mirror of
https://github.com/we-promise/sure.git
synced 2026-08-12 11:10:20 +00:00
Guillem Arias FausteandGitHub
e67ff3e3dc
* refactor(design-system): migrate single-color semantic tokens to @theme + lint @utility /N footgun Closes #1653. Tailwind v4 auto-generates the `/N` opacity-modifier pipeline (`color-mix(in oklab, var(--color-X) N%, transparent)`) only for colors declared in `@theme`. Tokens emitted as `@utility name { @apply ... }` bypass that pipeline entirely, so `text-link/70`, `bg-surface/50`, etc. silently compile to nothing — the workaround from #1626 was `text-inverse opacity-70`. Migrate the 11 single-color semantic tokens whose class names match Tailwind's color-utility convention (`bg-X`, `text-X`, `border-X`) and have no cross-prefix collision: bg-surface, bg-surface-hover, bg-surface-inset, bg-surface-inset-hover bg-container, bg-container-hover, bg-container-inset, bg-container-inset-hover bg-nav-indicator text-link border-tertiary After migration, `--color-surface`, `--color-container`, etc. live in `@theme` and Tailwind auto-generates every prefix variant (`bg-surface`, `text-surface`, `border-surface`, plus `/10`..`/100`). The original utility class names are preserved (now via auto-generation instead of `@utility` blocks), so every existing callsite continues to work. NOT migrated, by design: - **inverse family** (`bg-inverse`, `text-inverse`, `bg-inverse-hover`, `border-inverse`): bg- and text- variants have *different* colors, cannot share one `--color-inverse`. Renaming the family (`bg-strong-surface` + `text-on-strong-surface`) would touch ~61 view files and trade one footgun for semantic loss; deferred until a concrete `bg-inverse/N` use case appears. - **primary/secondary/subdued/destructive** (cross-prefix collision): `text-primary` (gray.900) and `border-primary` (alpha-black.300) carry deliberately distinct values, can't share `--color-primary`. Same for the secondary/subdued pairs. Migrating either alone would force a rename of the other. - **button-bg-*, tab-item-*, tab-bg-group**: class names don't follow Tailwind's `<prefix>-<name>` convention, so auto-generation would emit `bg-button-bg-primary` not `button-bg-primary`. - **composites** (`bg-loader`, `bg-overlay`, `shadow-border-*`, `border-divider`): compile to multiple properties or alias-reference other utilities — must stay as @utility. Add an `erb_lint` DeprecatedClasses rule covering the @utility-only tokens with `\d+` regex modifiers so any future `text-inverse/70` etc. fails CI with the explanation that `opacity-N` is the workaround and #1653 is the tracking issue. Verified the rule fires on synthetic input; verified zero new violations on the existing app. Stats: `@utility` blocks dropped from 45 → 34; @theme primitives grew from 183 → 194. * fix(review): cover remaining @utility /N footgun tokens in erb_lint CodeRabbit flagged that the new DeprecatedClasses /N rule missed seven still-defined @utility color tokens: border-destructive, border-solid, button-bg-secondary-strong, button-bg-secondary-strong-hover, button-bg-disabled, button-bg-ghost-hover, button-bg-outline-hover. Without them, classes like button-bg-disabled/50 pass lint while Tailwind silently drops the class. Adding the patterns surfaced two pre-existing offenders (border-destructive/30, border-destructive/20). Swap both to solid border-destructive — the @utility override defines red-500 (light) while --color-destructive in @theme is red-600, so the /N modifier was rendering an off-shade rather than the intended faded variant. Verified the rule fires on synthetic input for all seven new patterns, then verified zero remaining violations on the new patterns across app/**/*.erb. * chore(erb_lint): add trailing newline to .erb_lint.yml Per review feedback on #1849. Some editors flag the missing newline; keeps style consistent with the rest of the codebase.
354 lines
20 KiB
JSON
354 lines
20 KiB
JSON
{
|
|
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
"$version": "2.1.0",
|
|
"$description": "Sure design tokens. Single source of truth. Hand-edit; run `npm run tokens:build` to regenerate CSS. Template syntax in $value strings: `{path.to.token}` resolves to `var(--path-to-token)`; `{path|N%}` becomes `--alpha(var(--path) / N%)`. Utility tokens whose value lacks `{}` are treated as raw Tailwind class lists for @apply.",
|
|
|
|
"font": {
|
|
"sans": {
|
|
"$value": "'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
"$type": "fontFamily"
|
|
},
|
|
"mono": {
|
|
"$value": "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
|
"$type": "fontFamily"
|
|
}
|
|
},
|
|
|
|
"color": {
|
|
"white": { "$value": "#ffffff", "$type": "color" },
|
|
"black": { "$value": "#0B0B0B", "$type": "color" },
|
|
|
|
"success": { "$value": "{color.green.700}", "$type": "color", "$extensions": { "sure.dark": "{color.green.400}" } },
|
|
"warning": { "$value": "{color.yellow.600}", "$type": "color", "$extensions": { "sure.dark": "{color.yellow.400}" } },
|
|
"destructive": { "$value": "{color.red.600}", "$type": "color", "$extensions": { "sure.dark": "{color.red.400}" } },
|
|
"info": { "$value": "{color.blue.600}", "$type": "color", "$extensions": { "sure.dark": "{color.blue.500}" } },
|
|
"shadow": { "$value": "{color.black|6%}", "$type": "color", "$extensions": { "sure.dark": "{color.white|8%}" } },
|
|
|
|
"link": { "$value": "{color.blue.600}", "$type": "color", "$extensions": { "sure.dark": "{color.blue.500}" } },
|
|
"tertiary": { "$value": "{color.alpha-black.100}", "$type": "color", "$extensions": { "sure.dark": "{color.alpha-white.200}" } },
|
|
"surface": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.black}" } },
|
|
"surface-hover": { "$value": "{color.gray.100}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } },
|
|
"surface-inset": { "$value": "{color.gray.100}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } },
|
|
"surface-inset-hover": { "$value": "{color.gray.200}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } },
|
|
"container": { "$value": "{color.white}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.900}" } },
|
|
"container-hover": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } },
|
|
"container-inset": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.800}" } },
|
|
"container-inset-hover": { "$value": "{color.gray.100}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.700}" } },
|
|
"nav-indicator": { "$value": "{color.black}", "$type": "color", "$extensions": { "sure.dark": "{color.white}" } },
|
|
|
|
"gray": {
|
|
"25": { "$value": "#FAFAFA", "$type": "color" },
|
|
"50": { "$value": "#F7F7F7", "$type": "color" },
|
|
"100": { "$value": "#F0F0F0", "$type": "color" },
|
|
"200": { "$value": "#E7E7E7", "$type": "color" },
|
|
"300": { "$value": "#CFCFCF", "$type": "color" },
|
|
"400": { "$value": "#9E9E9E", "$type": "color" },
|
|
"500": { "$value": "#737373", "$type": "color" },
|
|
"600": { "$value": "#5C5C5C", "$type": "color" },
|
|
"700": { "$value": "#363636", "$type": "color" },
|
|
"800": { "$value": "#242424", "$type": "color" },
|
|
"900": { "$value": "#171717", "$type": "color" },
|
|
"DEFAULT": { "$value": "{color.gray.500}", "$type": "color" },
|
|
"tint-5": { "$value": "{color.gray.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.gray.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"alpha-white": {
|
|
"25": { "$value": "{color.white|3%}", "$type": "color" },
|
|
"50": { "$value": "{color.white|5%}", "$type": "color" },
|
|
"100": { "$value": "{color.white|8%}", "$type": "color" },
|
|
"200": { "$value": "{color.white|10%}", "$type": "color" },
|
|
"300": { "$value": "{color.white|15%}", "$type": "color" },
|
|
"400": { "$value": "{color.white|20%}", "$type": "color" },
|
|
"500": { "$value": "{color.white|30%}", "$type": "color" },
|
|
"600": { "$value": "{color.white|40%}", "$type": "color" },
|
|
"700": { "$value": "{color.white|50%}", "$type": "color" },
|
|
"800": { "$value": "{color.white|70%}", "$type": "color" },
|
|
"900": { "$value": "{color.white|85%}", "$type": "color" }
|
|
},
|
|
|
|
"alpha-black": {
|
|
"25": { "$value": "{color.black|3%}", "$type": "color" },
|
|
"50": { "$value": "{color.black|5%}", "$type": "color" },
|
|
"100": { "$value": "{color.black|8%}", "$type": "color" },
|
|
"200": { "$value": "{color.black|10%}", "$type": "color" },
|
|
"300": { "$value": "{color.black|15%}", "$type": "color" },
|
|
"400": { "$value": "{color.black|20%}", "$type": "color" },
|
|
"500": { "$value": "{color.black|30%}", "$type": "color" },
|
|
"600": { "$value": "{color.black|40%}", "$type": "color" },
|
|
"700": { "$value": "{color.black|50%}", "$type": "color" },
|
|
"800": { "$value": "{color.black|70%}", "$type": "color" },
|
|
"900": { "$value": "{color.black|85%}", "$type": "color" }
|
|
},
|
|
|
|
"red": {
|
|
"25": { "$value": "#FFFBFB", "$type": "color" },
|
|
"50": { "$value": "#FFF1F0", "$type": "color" },
|
|
"100": { "$value": "#FFDEDB", "$type": "color" },
|
|
"200": { "$value": "#FEB9B3", "$type": "color" },
|
|
"300": { "$value": "#F88C86", "$type": "color" },
|
|
"400": { "$value": "#ED4E4E", "$type": "color" },
|
|
"500": { "$value": "#F13636", "$type": "color" },
|
|
"600": { "$value": "#EC2222", "$type": "color" },
|
|
"700": { "$value": "#C91313", "$type": "color" },
|
|
"800": { "$value": "#A40E0E", "$type": "color" },
|
|
"900": { "$value": "#7E0707", "$type": "color" },
|
|
"tint-5": { "$value": "{color.red.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.red.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"green": {
|
|
"25": { "$value": "#F6FEF9", "$type": "color" },
|
|
"50": { "$value": "#ECFDF3", "$type": "color" },
|
|
"100": { "$value": "#D1FADF", "$type": "color" },
|
|
"200": { "$value": "#A6F4C5", "$type": "color" },
|
|
"300": { "$value": "#6CE9A6", "$type": "color" },
|
|
"400": { "$value": "#32D583", "$type": "color" },
|
|
"500": { "$value": "#12B76A", "$type": "color" },
|
|
"600": { "$value": "#10A861", "$type": "color" },
|
|
"700": { "$value": "#078C52", "$type": "color" },
|
|
"800": { "$value": "#05603A", "$type": "color" },
|
|
"900": { "$value": "#054F31", "$type": "color" },
|
|
"tint-5": { "$value": "{color.green.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.green.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"yellow": {
|
|
"25": { "$value": "#FFFCF5", "$type": "color" },
|
|
"50": { "$value": "#FFFAEB", "$type": "color" },
|
|
"100": { "$value": "#FEF0C7", "$type": "color" },
|
|
"200": { "$value": "#FEDF89", "$type": "color" },
|
|
"300": { "$value": "#FEC84B", "$type": "color" },
|
|
"400": { "$value": "#FDB022", "$type": "color" },
|
|
"500": { "$value": "#F79009", "$type": "color" },
|
|
"600": { "$value": "#DC6803", "$type": "color" },
|
|
"700": { "$value": "#B54708", "$type": "color" },
|
|
"800": { "$value": "#93370D", "$type": "color" },
|
|
"900": { "$value": "#7A2E0E", "$type": "color" },
|
|
"tint-5": { "$value": "{color.yellow.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.yellow.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"cyan": {
|
|
"25": { "$value": "#F5FEFF", "$type": "color" },
|
|
"50": { "$value": "#ECFDFF", "$type": "color" },
|
|
"100": { "$value": "#CFF9FE", "$type": "color" },
|
|
"200": { "$value": "#A5F0FC", "$type": "color" },
|
|
"300": { "$value": "#67E3F9", "$type": "color" },
|
|
"400": { "$value": "#22CCEE", "$type": "color" },
|
|
"500": { "$value": "#06AED4", "$type": "color" },
|
|
"600": { "$value": "#088AB2", "$type": "color" },
|
|
"700": { "$value": "#0E7090", "$type": "color" },
|
|
"800": { "$value": "#155B75", "$type": "color" },
|
|
"900": { "$value": "#164E63", "$type": "color" },
|
|
"tint-5": { "$value": "{color.cyan.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.cyan.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"blue": {
|
|
"25": { "$value": "#F5FAFF", "$type": "color" },
|
|
"50": { "$value": "#EFF8FF", "$type": "color" },
|
|
"100": { "$value": "#D1E9FF", "$type": "color" },
|
|
"200": { "$value": "#B2DDFF", "$type": "color" },
|
|
"300": { "$value": "#84CAFF", "$type": "color" },
|
|
"400": { "$value": "#53B1FD", "$type": "color" },
|
|
"500": { "$value": "#2E90FA", "$type": "color" },
|
|
"600": { "$value": "#1570EF", "$type": "color" },
|
|
"700": { "$value": "#175CD3", "$type": "color" },
|
|
"800": { "$value": "#1849A9", "$type": "color" },
|
|
"900": { "$value": "#194185", "$type": "color" },
|
|
"tint-5": { "$value": "{color.blue.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.blue.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"indigo": {
|
|
"25": { "$value": "#F5F8FF", "$type": "color" },
|
|
"50": { "$value": "#EFF4FF", "$type": "color" },
|
|
"100": { "$value": "#E0EAFF", "$type": "color" },
|
|
"200": { "$value": "#C7D7FE", "$type": "color" },
|
|
"300": { "$value": "#A4BCFD", "$type": "color" },
|
|
"400": { "$value": "#8098F9", "$type": "color" },
|
|
"500": { "$value": "#6172F3", "$type": "color" },
|
|
"600": { "$value": "#444CE7", "$type": "color" },
|
|
"700": { "$value": "#3538CD", "$type": "color" },
|
|
"800": { "$value": "#2D31A6", "$type": "color" },
|
|
"900": { "$value": "#2D3282", "$type": "color" },
|
|
"tint-5": { "$value": "{color.indigo.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.indigo.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"violet": {
|
|
"25": { "$value": "#FBFAFF", "$type": "color" },
|
|
"50": { "$value": "#F5F3FF", "$type": "color" },
|
|
"100": { "$value": "#ECE9FE", "$type": "color" },
|
|
"200": { "$value": "#DDD6FE", "$type": "color" },
|
|
"300": { "$value": "#C3B5FD", "$type": "color" },
|
|
"400": { "$value": "#A48AFB", "$type": "color" },
|
|
"500": { "$value": "#875BF7", "$type": "color" },
|
|
"600": { "$value": "#7839EE", "$type": "color" },
|
|
"700": { "$value": "#6927DA", "$type": "color" },
|
|
"tint-5": { "$value": "{color.violet.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.violet.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"fuchsia": {
|
|
"25": { "$value": "#FEFAFF", "$type": "color" },
|
|
"50": { "$value": "#FDF4FF", "$type": "color" },
|
|
"100": { "$value": "#FBE8FF", "$type": "color" },
|
|
"200": { "$value": "#F6D0FE", "$type": "color" },
|
|
"300": { "$value": "#EEAAFD", "$type": "color" },
|
|
"400": { "$value": "#E478FA", "$type": "color" },
|
|
"500": { "$value": "#D444F1", "$type": "color" },
|
|
"600": { "$value": "#BA24D5", "$type": "color" },
|
|
"700": { "$value": "#9F1AB1", "$type": "color" },
|
|
"800": { "$value": "#821890", "$type": "color" },
|
|
"900": { "$value": "#6F1877", "$type": "color" },
|
|
"tint-5": { "$value": "{color.fuchsia.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.fuchsia.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"pink": {
|
|
"25": { "$value": "#FFFAFC", "$type": "color" },
|
|
"50": { "$value": "#FEF0F7", "$type": "color" },
|
|
"100": { "$value": "#FFD1E2", "$type": "color" },
|
|
"200": { "$value": "#FFB1CE", "$type": "color" },
|
|
"300": { "$value": "#FD8FBA", "$type": "color" },
|
|
"400": { "$value": "#F86BA7", "$type": "color" },
|
|
"500": { "$value": "#F23E94", "$type": "color" },
|
|
"600": { "$value": "#D5327F", "$type": "color" },
|
|
"700": { "$value": "#BA256B", "$type": "color" },
|
|
"800": { "$value": "#9E1958", "$type": "color" },
|
|
"900": { "$value": "#840B45", "$type": "color" },
|
|
"tint-5": { "$value": "{color.pink.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.pink.500|10%}", "$type": "color" }
|
|
},
|
|
|
|
"orange": {
|
|
"25": { "$value": "#FFF9F5", "$type": "color" },
|
|
"50": { "$value": "#FFF4ED", "$type": "color" },
|
|
"100": { "$value": "#FFE6D5", "$type": "color" },
|
|
"200": { "$value": "#FFD6AE", "$type": "color" },
|
|
"300": { "$value": "#FF9C66", "$type": "color" },
|
|
"400": { "$value": "#FF692E", "$type": "color" },
|
|
"500": { "$value": "#FF4405", "$type": "color" },
|
|
"600": { "$value": "#E62E05", "$type": "color" },
|
|
"700": { "$value": "#BC1B06", "$type": "color" },
|
|
"800": { "$value": "#97180C", "$type": "color" },
|
|
"900": { "$value": "#771A0D", "$type": "color" },
|
|
"tint-5": { "$value": "{color.orange.500|5%}", "$type": "color" },
|
|
"tint-10": { "$value": "{color.orange.500|10%}", "$type": "color" }
|
|
}
|
|
},
|
|
|
|
"budget": {
|
|
"unused-fill": { "$value": "{color.gray.200}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.500}" } },
|
|
"unallocated-fill": { "$value": "{color.gray.50}", "$type": "color", "$extensions": { "sure.dark": "{color.gray.700}" } }
|
|
},
|
|
|
|
"border": {
|
|
"radius": {
|
|
"md": { "$value": "8px", "$type": "dimension" },
|
|
"lg": { "$value": "10px", "$type": "dimension" }
|
|
}
|
|
},
|
|
|
|
"shadow": {
|
|
"xs": { "$value": "0px 1px 2px 0px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 2px 0px {color.white|8%}" } },
|
|
"sm": { "$value": "0px 1px 6px 0px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 1px 6px 0px {color.white|8%}" } },
|
|
"md": { "$value": "0px 4px 8px -2px {color.black|6%}", "$type": "shadow", "$extensions": { "sure.dark": "0px 4px 8px -2px {color.white|8%}" } },
|
|
"lg": { "$value": "0px 12px 16px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 12px 16px -4px {color.white|8%}" } },
|
|
"xl": { "$value": "0px 20px 24px -4px {color.black|6%}","$type": "shadow", "$extensions": { "sure.dark": "0px 20px 24px -4px {color.white|8%}" } }
|
|
},
|
|
|
|
"animate": {
|
|
"stroke-fill": { "$value": "stroke-fill 3s 300ms forwards", "$type": "transition" }
|
|
},
|
|
|
|
"utility": {
|
|
"bg-inverse": { "$type": "utility", "$value": "{color.gray.800}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } },
|
|
"bg-inverse-hover": { "$type": "utility", "$value": "{color.gray.700}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.100}" } },
|
|
"bg-overlay": {
|
|
"$type": "utility",
|
|
"$value": "{color.gray.100|50%}",
|
|
"$extensions": {
|
|
"sure.utility": { "raw": "background-color" },
|
|
"sure.dark": "{color.alpha-black.900}"
|
|
}
|
|
},
|
|
"bg-loader": {
|
|
"$type": "utility",
|
|
"$extensions": { "sure.compose": ["bg-surface-inset", "animate-pulse"] }
|
|
},
|
|
|
|
"text-primary": { "$type": "utility", "$value": "{color.gray.900}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.white}" } },
|
|
"text-inverse": { "$type": "utility", "$value": "{color.white}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.gray.900}" } },
|
|
"text-secondary": { "$type": "utility", "$value": "{color.gray.500}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.gray.300}" } },
|
|
"text-subdued": { "$type": "utility", "$value": "{color.gray.400}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.gray.500}" } },
|
|
|
|
"shadow-border-xs": {
|
|
"$type": "utility",
|
|
"$value": "{shadow.xs}, 0px 0px 0px 1px {color.alpha-black.50}",
|
|
"$extensions": {
|
|
"sure.utility": { "raw": "box-shadow" },
|
|
"sure.dark": "{shadow.xs}, 0px 0px 0px 1px {color.alpha-white.50}"
|
|
}
|
|
},
|
|
"shadow-border-sm": {
|
|
"$type": "utility",
|
|
"$value": "{shadow.sm}, 0px 0px 0px 1px {color.alpha-black.50}",
|
|
"$extensions": {
|
|
"sure.utility": { "raw": "box-shadow" },
|
|
"sure.dark": "{shadow.sm}, 0px 0px 0px 1px {color.alpha-white.50}"
|
|
}
|
|
},
|
|
"shadow-border-md": {
|
|
"$type": "utility",
|
|
"$value": "{shadow.md}, 0px 0px 0px 1px {color.alpha-black.50}",
|
|
"$extensions": {
|
|
"sure.utility": { "raw": "box-shadow" },
|
|
"sure.dark": "{shadow.md}, 0px 0px 0px 1px {color.alpha-white.50}"
|
|
}
|
|
},
|
|
"shadow-border-lg": {
|
|
"$type": "utility",
|
|
"$value": "{shadow.lg}, 0px 0px 0px 1px {color.alpha-black.50}",
|
|
"$extensions": {
|
|
"sure.utility": { "raw": "box-shadow" },
|
|
"sure.dark": "{shadow.lg}, 0px 0px 0px 1px {color.alpha-white.50}"
|
|
}
|
|
},
|
|
"shadow-border-xl": {
|
|
"$type": "utility",
|
|
"$value": "{shadow.xl}, 0px 0px 0px 1px {color.alpha-black.50}",
|
|
"$extensions": {
|
|
"sure.utility": { "raw": "box-shadow" },
|
|
"sure.dark": "{shadow.xl}, 0px 0px 0px 1px {color.alpha-white.50}"
|
|
}
|
|
},
|
|
|
|
"border-primary": { "$type": "utility", "$value": "{color.alpha-black.300}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.400}" } },
|
|
"border-secondary": { "$type": "utility", "$value": "{color.alpha-black.200}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.300}" } },
|
|
"border-divider": { "$type": "utility", "$value": "border-tertiary" },
|
|
"border-subdued": { "$type": "utility", "$value": "{color.alpha-black.50}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.100}" } },
|
|
"border-solid": { "$type": "utility", "$value": "{color.black}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.white}" } },
|
|
"border-destructive": { "$type": "utility", "$value": "{color.red.500}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.red.400}" } },
|
|
"border-inverse": { "$type": "utility", "$value": "{color.alpha-white.200}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-black.300}" } },
|
|
|
|
"button-bg-primary": { "$type": "utility", "$value": "{color.gray.900}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } },
|
|
"button-bg-primary-hover": { "$type": "utility", "$value": "{color.gray.800}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.50}" } },
|
|
"button-bg-secondary": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } },
|
|
"button-bg-secondary-hover": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.600}" } },
|
|
"button-bg-secondary-strong": { "$type": "utility", "$value": "{color.gray.200}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } },
|
|
"button-bg-secondary-strong-hover": { "$type": "utility", "$value": "{color.gray.300}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.600}" } },
|
|
"button-bg-disabled": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } },
|
|
"button-bg-destructive": { "$type": "utility", "$value": "{color.red.500}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.red.400}" } },
|
|
"button-bg-destructive-hover": { "$type": "utility", "$value": "{color.red.600}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.red.500}" } },
|
|
"button-bg-ghost-hover": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "bg-gray-800 text-inverse" } },
|
|
"button-bg-outline-hover": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } },
|
|
|
|
"tab-item-active": { "$type": "utility", "$value": "{color.white}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } },
|
|
"tab-item-hover": { "$type": "utility", "$value": "{color.gray.200}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } },
|
|
"tab-bg-group": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.alpha-black.700}" } }
|
|
}
|
|
}
|