mirror of
https://github.com/we-promise/sure.git
synced 2026-05-12 15:15:01 +00:00
0fe1e06645
* refactor(design-system): migrate fg-* utilities to text-* and remove namespace
The design system carried two parallel namespaces for foreground colors:
text-* (canonical, ~2,000 uses) and fg-* (32 uses). Most fg-* tokens
were 1:1 duplicates of a text-* counterpart. fg-gray was nearly
identical to text-secondary, with a one-step shade difference in dark
mode.
This PR migrates all 32 usages to their text-* equivalents and removes
the fg-* block from the design tokens. Closes #1606.
Mapping:
- fg-inverse -> text-inverse (20 usages, identical light/dark values)
- fg-gray -> text-secondary (7 usages; light values match, dark is
one step lighter: gray-300 vs gray-400)
- fg-primary -> text-primary (3 usages, identical values)
- fg-subdued -> text-subdued (2 usages, identical values)
The four other fg-* tokens (fg-contrast, fg-primary-variant,
fg-secondary, fg-secondary-variant) had zero usages despite being
defined; they are removed without replacement.
JSON / build:
- design/tokens/sure.tokens.json: $version 1.0.0 -> 2.0.0 (breaking
schema change per the policy added in #1620). 8 fg-* token
definitions removed.
- button-bg-ghost-hover's dark value still references "fg-inverse"
internally; rewritten to "bg-gray-800 text-inverse" so the cleanup
doesn't break that utility.
- _generated.css regenerated. 42 utility blocks now (was 50).
Lookbook tokens preview:
- The Text & foregrounds section dropped its split between text-*
(canonical) and fg-* (legacy). Now a single section listing the
five text-* utilities. The "(legacy)" framing is gone since there's
no legacy left.
README:
- design/tokens/README.md's button-bg-ghost-hover edge-case example
updated to reflect the new "bg-gray-800 text-inverse" dark value.
Visual review needed in dark mode:
- Anywhere icons use the application_helper#icon helper with
color: "default" (most icons in the app). The default class moved
from fg-gray (gray-400 dark) to text-secondary (gray-300 dark), so
default-color icons render slightly lighter in dark mode.
- DS::Buttonish icons in secondary buttons (same shade shift).
- DS::Link icons (same).
- Time series chart axes (same).
- All tooltips, account add flow, settings hostings buttons,
invitations, AI consent, family export, danger-zone buttons --
these used fg-inverse, which is identical to text-inverse, so no
visual change expected.
* fix(design-system): use inverse pair on tooltips for readable dark mode
* fix(lookbook): use semantic tokens in menu preview header text
* fix(lookbook): set text-primary on layout body so previews inherit theme
* fix(design-system): keep shadows dark-toned in dark mode
Inverting shadows to white|8% on dark surfaces produces a halo
effect rather than an elevation cue, and stacks redundantly with
the alpha-white 1px ring already in shadow-border-*.
Switch dark-mode shadows to black at progressively higher alpha
(25%/30%/35%/40%/50% for xs..xl) so they read as actual cast
shadows on near-black surfaces. Surface-tint differences and the
existing alpha-white border ring continue to handle elevation
hierarchy and edge definition.
Approach matches Material 3, Apple HIG, IBM Carbon, Refactoring UI,
and the dark-mode shadows used in Linear/Vercel/Stripe.
* fix(design-system): set text-primary on DS::Dialog element
Browser UA stylesheets apply color: black directly to <dialog>,
which overrides ancestor inheritance even when a body or html
ancestor sets a theme-aware color. Unstyled child content then
renders black regardless of theme.
Setting text-primary on the dialog element itself defeats the UA
override and lets descendants inherit the semantic token.
* fix(lookbook): use shadow css vars in effects preview so dark theme renders
* Revert "fix(design-system): keep shadows dark-toned in dark mode"
This reverts commit 3e9d76ed0b.
* fix(design-system): use opacity-70 instead of text-inverse/70 in value tooltip
The custom @utility text-inverse expands to @apply text-white and
isn't modifier-aware, so text-inverse/70 produced no CSS at all and
the muted labels fell through to inherited color (invisible on the
white pill in dark mode).
Replace with text-inverse + opacity-70. Same visual effect, works
with the existing utility definition.
350 lines
20 KiB
JSON
350 lines
20 KiB
JSON
{
|
|
"$schema": "https://design-tokens.github.io/community-group/format/",
|
|
"$version": "2.0.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.600}", "$type": "color", "$extensions": { "sure.dark": "{color.green.500}" } },
|
|
"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}" } },
|
|
"shadow": { "$value": "{color.black|6%}", "$type": "color", "$extensions": { "sure.dark": "{color.white|8%}" } },
|
|
|
|
"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-surface": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.black}" } },
|
|
"bg-surface-hover": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } },
|
|
"bg-surface-inset": { "$type": "utility", "$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } },
|
|
"bg-surface-inset-hover": { "$type": "utility", "$value": "{color.gray.200}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } },
|
|
"bg-container": { "$type": "utility", "$value": "{color.white}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.900}" } },
|
|
"bg-container-hover": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } },
|
|
"bg-container-inset": { "$type": "utility", "$value": "{color.gray.50}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.800}" } },
|
|
"bg-container-inset-hover":{ "$type": "utility","$value": "{color.gray.100}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.gray.700}" } },
|
|
"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}" } },
|
|
"text-link": { "$type": "utility", "$value": "{color.blue.600}", "$extensions": { "sure.utility": { "prefix": "text" }, "sure.dark": "{color.blue.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-tertiary": { "$type": "utility", "$value": "{color.alpha-black.100}", "$extensions": { "sure.utility": { "prefix": "border" }, "sure.dark": "{color.alpha-white.200}" } },
|
|
"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-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}" } },
|
|
"bg-nav-indicator": { "$type": "utility", "$value": "{color.black}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } }
|
|
}
|
|
}
|