{"id":18352370,"url":"https://github.com/limpix31/styield","last_synced_at":"2025-08-28T04:48:53.163Z","repository":{"id":65281370,"uuid":"588893378","full_name":"LIMPIX31/styield","owner":"LIMPIX31","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-19T17:59:54.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-26T11:53:22.073Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LIMPIX31.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-14T11:43:54.000Z","updated_at":"2023-01-14T11:44:13.000Z","dependencies_parsed_at":"2023-02-11T14:15:21.759Z","dependency_job_id":null,"html_url":"https://github.com/LIMPIX31/styield","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LIMPIX31/styield","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIMPIX31%2Fstyield","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIMPIX31%2Fstyield/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIMPIX31%2Fstyield/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIMPIX31%2Fstyield/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LIMPIX31","download_url":"https://codeload.github.com/LIMPIX31/styield/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIMPIX31%2Fstyield/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272440388,"owners_count":24935426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T21:35:45.918Z","updated_at":"2025-08-28T04:48:53.145Z","avatar_url":"https://github.com/LIMPIX31.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Styield - no ternaries\n\n### styled-components\n```ts\nexport const Button = styled.button`\n  background-color: ${({ disabled, primary, danger }) =\u003e \n    disabled ? 'gray' : primary ? 'blue' : 'red'\n  }\n  color: ${({ disabled, primary, danger  }) =\u003e disabled ? 'lightgray' : 'white'}\n`\n```\n### Possible simplifications\n```ts\nexport const Button = styled.button(({ disabled, primary, danger }) =\u003e {\n  let styles = ''\n  if (disabled) {\n    styles += 'background-color: gray;'\n    styles += 'color: lightgray;'\n  }\n  else {\n    if (primary) styles += 'background-color: blue;'\n    else if (danger) styles += 'background-color: red;'\n    styles += 'color: white;'\n  }\n  return styles\n})\n```\n\n## Styield\n```ts\nexport const StyledButton = styled.button\u003cButtonProps\u003e(\n  ({ theme, variant = 'default', destructive, only, size = 'md', disabled }) =\u003e\n    build(\n      styield\n        .display('flex')\n        .alignItems('center')\n        .justifyContent('center')\n        .borderRadius(theme.radius())\n        .gap(theme.space())\n        .boxSizing('border-box')\n        .transition('all .2s')\n        .userSelect('none')\n        .borderWidth('2px')\n        .borderStyle('solid')\n        .ifNot(disabled, styield.cursor('pointer'))\n        .switch(size, {\n          sm: styield\n            .var('size', '30px')\n            .fontSize('0.825rem')\n            .padding(`0 ${theme.space(2)}`),\n          lg: styield\n            .var('size', '42px')\n            .fontSize('1.15rem')\n            .padding(`0 ${theme.space(4)}`),\n          default: styield\n            .var('size', '38px')\n            .fontSize('1rem')\n            .padding(`0 ${theme.space(3)}`),\n        })\n        .height.var('size')\n        .if(only, styield.width.var('size'))\n        .lineHeight('0px')\n        .switch(variant, {\n          primary() {\n            const color = destructive ? theme.palette.red : theme.accent.primary\n            const lighted = pick(color, 600)\n            return styield.color(theme.master.back).if(\n              disabled,\n              styield\n                .var('disabled-color', pick(theme.master.front, 100))\n                .background.var('disabled-color')\n                .borderColor.var('disabled-color'),\n              styield\n                .backgroundColor(color)\n                .borderColor(color)\n                .selector('\u0026:hover', styield.backgroundColor(lighted).borderColor(lighted))\n                .selector('\u0026:focus', styield.boxShadow(css`0 0 0 4px ${pick(color, 50)}`)),\n            )\n          },\n          secondary() {\n            const color = destructive ? theme.palette.red : theme.accent.primary\n            return styield.if(\n              disabled,\n              styield\n                .var('color', pick(color, 25))\n                .backgroundColor.var('color')\n                .borderColor.var('color')\n                .color(pick(color, 300)),\n              styield\n                .var('color', pick(color, 50))\n                .backgroundColor.var('color')\n                .borderColor.var('color')\n                .color(color)\n                .selector(\n                  '\u0026:hover',\n                  styield\n                    .var('color', pick(color, 60))\n                    .backgroundColor.var('color')\n                    .borderColor.var('color')\n                    .color(pick(color, 600)),\n                )\n                .selector('\u0026:focus', styield.boxShadow(css`0px 0px 0px 4px ${pick(color, 25)}`)),\n            )\n          },\n          'tertiary-gray': true,\n          'tertiary-color'() {\n            const color = destructive\n              ? theme.palette.red\n              : variant === 'tertiary-gray'\n                ? theme.palette.gray\n                : theme.accent.primary\n            return styield\n              .borderColor('transparent')\n              .if(\n                disabled,\n                styield.color(pick(color, 300)),\n                styield\n                  .color(pick(color, 500))\n                  .selector('\u0026:hover', styield.color(pick(color, 600)).background(pick(color, 50))),\n              )\n          },\n          'link-gray': true,\n          'link-color'() {\n            const color = destructive\n              ? theme.palette.red\n              : variant === 'link-gray'\n                ? theme.palette.gray\n                : theme.accent.primary\n            return styield\n              .borderWidth('0px')\n              .padding('0px')\n              .height('auto')\n              .if(\n                disabled,\n                styield.color(pick(color, 300)),\n                styield.color(pick(color, 600)).selector('\u0026:hover', styield.color(pick(color, 700))),\n              )\n          },\n          default() {\n            const color = destructive ? theme.palette.red : theme.palette.gray\n            return styield.if(\n              disabled,\n              styield.borderColor(pick(color, 50)).color(pick(color, 100)),\n              styield\n                .borderColor(pick(color, 300))\n                .color(pick(color, 700))\n                .var('color', pick(color, 50))\n                .selector('\u0026:hover', styield.backgroundColor.var('color'))\n                .selector('\u0026:focus', styield.boxShadow(`0 0 0 4px ${styield.var('color')}`)),\n            )\n          },\n        })\n        .if(variant.match(/^(primary|secondary|default)$/), styield.boxShadow('0px 1px 2px rgba(16, 24, 40, 0.05)')),\n    ),\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimpix31%2Fstyield","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flimpix31%2Fstyield","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flimpix31%2Fstyield/lists"}