QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-29 23:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
fdffcd0dfdba7f8e53b0bc44064951fa3d267c25
sure/design/tokens/sure.tokens.json
Guillem Arias Fauste 57d71cd55e refactor(design-system): extend DS::Alert and migrate 9 inline alert blocks (#1731) 
* feat(design-system): add info semantic color token

Mirrors success/warning/destructive: --color-info maps to blue-600 in
light mode, blue-500 in dark mode. Unblocks the DS::Alert info variant
from carrying a raw 'blue-600' literal in icon_color and lets surface
tokens use bg-info/N alpha modifiers like the rest of the system.

Refs #1715

* refactor(design-system): adopt semantic tokens and add body slot in DS::Alert

Replaces the bg-{blue,green,yellow,red}-50 / text-{...}-700 / border-{...}-200
palette block in DS::Alert with semantic alpha-modifier surfaces
(bg-{info,success,warning,destructive}/10 + matching /20 borders).
Drops the 'blue-600' literal that icon_color was returning for the
info variant; helpers#icon now accepts color: :info backed by the
new --color-info token.

Adds an optional title: kwarg and an opt-in block-content slot so
rich alerts (title + paragraph, lists, embedded actions) can render
without callers reaching for a hand-rolled flex layout. The existing
message: API stays backward-compatible — nothing in the codebase that
already calls DS::Alert.new(message: ..., variant: ...) needs to change.

Lookbook gains with_title and with_body_slot examples covering the
new shapes.

Refs #1715

* refactor(views): migrate api_keys, hostings, lunchflow alerts to DS::Alert

Cleans up nine bespoke alert blocks that hand-rolled the same
flex + icon + bordered-surface shape DS::Alert already provides:

- settings/api_keys/{new,created,created.turbo_stream}.html.erb — three
  near-identical 'Security Warning' / 'Important Security Note' boxes
  using the broken bg-warning-50 / text-warning-700 raw-palette pair.
- settings/hostings/{_alpha_vantage,_eodhd,_yahoo_finance,_twelve_data,_provider_selection}_settings.html.erb —
  five amber-50 / amber-200 warning boxes covering rate-limit notes,
  health-check failure messaging, and the env-configured override
  banner. The twelve_data plan-restriction block keeps its bullet
  list and pricing link inside the new DS::Alert body slot.
- lunchflow_items/{_api_error,_setup_required}.html.erb — two modal
  alert headers whose flex+icon scaffolding now collapses onto
  DS::Alert. The surrounding bg-surface 'Common issues' / 'Setup
  steps' info cards stay as-is; this PR only touches the alert
  shape itself.

No functional or behavioural changes. Locale keys preserved.
amber-* palette uses on the alerts disappear; remaining bg-amber-*
hits in the codebase live outside the alert pattern and stay for
follow-up sub-PRs of #1715.

Refs #1715
2026-05-10 17:14:06 +02:00

353 lines
21 KiB
JSON
Raw Blame History

{
"$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.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}" } },
"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%}" } },
"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-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}" } },
"bg-nav-indicator": { "$type": "utility", "$value": "{color.black}", "$extensions": { "sure.utility": { "prefix": "bg" }, "sure.dark": "{color.white}" } }
}
}
Reference in New Issue View Git Blame Copy Permalink