mirror of
https://github.com/we-promise/sure.git
synced 2026-07-16 23:05:22 +00:00
77dda53ffb
* feat(ds): one canonical focus ring across primitives (#2136) Replaces the grab-bag of per-primitive focus indicators (neutral ring-alpha-black/white, outline-gray-900/white, faint form-field ring-4) with a single recipe — the #1737 accessibility follow-up. - New --color-focus-ring token: blue-600 (light) / blue-500 (dark), >=4:1 against both surfaces. - Canonical .focus-ring / .focus-ring-within in components.css: a 2px outline + 2px offset on :focus-visible only. Outline (not a box-shadow ring) so the offset gap is transparent on any surface with no layout shift; :focus-visible so it never shows for mouse/touch. - Applied to every focusable DS primitive: Button (had none), Link, Disclosure summary, Tabs nav, MenuItem (replaces the browser-default box), SearchInput, Tooltip trigger, Popover trigger, Select panel (focus-within), Toggle (peer-driven outline-focus-ring). .form-field adopts it via :focus-within, replacing the ~1:1 ring-4. - Dialog close button is a DS::Button icon variant, so it inherits the focus-visible-only ring and keeps no resting border (fixes "stuck ring"). Verified in-browser, light+dark: focus-visible ring on button, input, and full-width menu row — consistent blue 2px+offset, legible on both surfaces. Remaining follow-up: >=44px touch targets (disclosure trigger, composer send); bespoke notification / account-new close buttons that still carry a permanent border. * fix(ds): #2136 interactive-state follow-ups — touch target + close-button chrome - Disclosure default trigger: add min-h-11 (44px) so the standalone disclosure summary clears the touch-target minimum (was px-3 py-2 ~36px). Composer send + the coming-soon icons are already DS::Button icon/md (w-11 h-11). - Notification close buttons (sync_toast, notice): drop the resting border-alpha-black-50 box ("frame shouts, glyph muted"); keep a bg-container + shadow-xs chip so the corner control stays visible over the page, and brighten the muted glyph on hover (text-subdued -> hover:text-primary). * refactor(ds): focus ring -> neutral hugging box-shadow (was blue outline) Per design feedback: the blue 2px outline + 2px offset read as a loud, detached frame on the otherwise-neutral UI. Switch the canonical .focus-ring to a soft box-shadow ring that hugs the control (follows border-radius, no gap), in the theme-aware neutral focus-ring token (alpha-black/white-400). Transparent outline kept as a forced-colors fallback; toggle peer-driver switched from outline-* to ring-* to match. Still one token, :focus-visible only. Strength is tunable (currently subtle ~1.5:1). * fix(ds): focus ring vanished on shadowed controls — outline, not box-shadow The neutral box-shadow ring lived in the components layer, so any utility-layer shadow-* (or .form-field's focus-within:shadow-none) on the same element overrode it and the ring silently disappeared on shadowed buttons/inputs. Draw the same subtle neutral ring with a hugging `outline` (outline-offset: 0) instead — a separate property with no box-shadow conflict, and it doubles as the forced-colors indicator. Toggle peer-driver switched ring-* -> outline-* to match. Look is unchanged (neutral, hugging, subtle); it just no longer vanishes. * fix(a11y): enlarge sync-toast close-button touch target (p-0.5 -> p-1.5) The hover-revealed close button had ~2px padding around a 20px icon (~24px total), at the WCAG 2.5.8 AAA boundary. p-1.5 brings the interactive area to ~32px. Addresses CodeRabbit review on #2140. * fix(ds): keep form-field's resting halo; stop the outline color flash Two testing findings: - .form-field reverts to its original always-on soft ring (focus-within ring-4 at low alpha, theme-aware) instead of adopting the keyboard-only outline. It's a resting decoration, not a focus indicator, and the lower-opacity halo was the better look. The canonical block's comment documents the deliberate opt-out. - .focus-ring/.focus-ring-within now carry a base transparent 2px outline so consumers with transition-all (form-field had it) animate transparent -> token on focus instead of passing through currentColor, which flashed as a black border appearing and then fading out. * feat(ds): focus-ring token clears WCAG 3:1 non-text contrast alpha-black-400 (20%) measured ~1.6:1 against white — visible but below the AA bar for focus indicators. Bump to the 700 stop (50%): ~3.95:1 on light containers, ~4.6:1 on dark. Recipe unchanged; one token edit via tokens:build. * fix(ds): ring the hand-rolled privacy toggle too The header pair showed two different focus treatments: panel-right (a DS::Button) got the new token ring while the hand-rolled privacy toggle next to it fell back to the browser-default ring — the sweep covered DS primitives but not bespoke buttons. Both privacy toggles (mobile + desktop) now carry .focus-ring. Also documents the transition interplay on the focused-state rule: consumers with transition-colors fade the ring in over 150ms because Tailwind v4's color transition list includes outline-color. Verified settled value at the intended 50% alpha via Playwright. * fix(ds): ring the sidebar and settings nav links The reshoot caught both nav species falling back to the browser's blue default ring — main sidebar items and settings nav items are bespoke link_to markup the primitive sweep missed, and they're the primary keyboard path in the app. Both adopt .focus-ring (main nav adds rounded-lg so the outline follows a shape). * fix(ds): retire the legacy base-layer button ring for the canonical outline The @layer base button rule still painted a ring-2 ring-offset-2 box-shadow on :focus-visible. Box-shadow and outline are independent properties, so .focus-ring (an outline) could never clear it and every button-tag primitive double-painted both indicators on keyboard focus. Apply the canonical recipe to the base button rule itself: every <button> now gets the transparent resting outline + focus-ring token on :focus-visible by default. Two bespoke buttons suppressed the outline with focus:outline-none and relied on the base ring for their keyboard indicator (category dropdown rows, the sign-up password toggle). Drop the suppression so they pick up the canonical outline — :focus-visible keeps it keyboard-only, which is what the suppression was protecting against anyway. * fix(ds): segmented control adopts the canonical focus recipe The segment rule inlined its own focus-visible outline (offset 2, alpha-400 colors) with a comment noting it was temporary until the canonical token landed — this branch is that token. Drop the inlined utilities: button segments get the outline from the base button rule, and link segments now carry .focus-ring.
506 lines
14 KiB
CSS
Generated
506 lines
14 KiB
CSS
Generated
/*
|
|
* GENERATED — do not edit by hand.
|
|
* Source: design/tokens/sure.tokens.json
|
|
* Build: npm run tokens:build
|
|
*/
|
|
|
|
@theme {
|
|
--font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
--color-white: #ffffff;
|
|
--color-black: #0B0B0B;
|
|
--color-success: var(--color-green-700);
|
|
--color-warning: var(--color-yellow-600);
|
|
--color-destructive: var(--color-red-500);
|
|
--color-info: var(--color-blue-600);
|
|
--color-shadow: --alpha(var(--color-black) / 6%);
|
|
--color-link: var(--color-blue-600);
|
|
--color-focus-ring: var(--color-alpha-black-700);
|
|
--color-tertiary: var(--color-alpha-black-100);
|
|
--color-surface: var(--color-gray-50);
|
|
--color-surface-hover: var(--color-gray-100);
|
|
--color-surface-inset: var(--color-gray-100);
|
|
--color-surface-inset-hover: var(--color-gray-200);
|
|
--color-container: var(--color-white);
|
|
--color-container-hover: var(--color-gray-50);
|
|
--color-container-inset: var(--color-gray-50);
|
|
--color-container-inset-hover: var(--color-gray-100);
|
|
--color-nav-indicator: var(--color-black);
|
|
--color-toggle-track: var(--color-gray-300);
|
|
--color-destructive-subtle: var(--color-red-200);
|
|
--color-gray-25: #FAFAFA;
|
|
--color-gray-50: #F7F7F7;
|
|
--color-gray-100: #F0F0F0;
|
|
--color-gray-200: #E7E7E7;
|
|
--color-gray-300: #CFCFCF;
|
|
--color-gray-400: #9E9E9E;
|
|
--color-gray-500: #737373;
|
|
--color-gray-600: #5C5C5C;
|
|
--color-gray-700: #363636;
|
|
--color-gray-800: #242424;
|
|
--color-gray-900: #171717;
|
|
--color-gray: var(--color-gray-500);
|
|
--color-gray-tint-5: --alpha(var(--color-gray-500) / 5%);
|
|
--color-gray-tint-10: --alpha(var(--color-gray-500) / 10%);
|
|
--color-alpha-white-25: --alpha(var(--color-white) / 3%);
|
|
--color-alpha-white-50: --alpha(var(--color-white) / 5%);
|
|
--color-alpha-white-100: --alpha(var(--color-white) / 8%);
|
|
--color-alpha-white-200: --alpha(var(--color-white) / 10%);
|
|
--color-alpha-white-300: --alpha(var(--color-white) / 15%);
|
|
--color-alpha-white-400: --alpha(var(--color-white) / 20%);
|
|
--color-alpha-white-500: --alpha(var(--color-white) / 30%);
|
|
--color-alpha-white-600: --alpha(var(--color-white) / 40%);
|
|
--color-alpha-white-700: --alpha(var(--color-white) / 50%);
|
|
--color-alpha-white-800: --alpha(var(--color-white) / 70%);
|
|
--color-alpha-white-900: --alpha(var(--color-white) / 85%);
|
|
--color-alpha-black-25: --alpha(var(--color-black) / 3%);
|
|
--color-alpha-black-50: --alpha(var(--color-black) / 5%);
|
|
--color-alpha-black-100: --alpha(var(--color-black) / 8%);
|
|
--color-alpha-black-200: --alpha(var(--color-black) / 10%);
|
|
--color-alpha-black-300: --alpha(var(--color-black) / 15%);
|
|
--color-alpha-black-400: --alpha(var(--color-black) / 20%);
|
|
--color-alpha-black-500: --alpha(var(--color-black) / 30%);
|
|
--color-alpha-black-600: --alpha(var(--color-black) / 40%);
|
|
--color-alpha-black-700: --alpha(var(--color-black) / 50%);
|
|
--color-alpha-black-800: --alpha(var(--color-black) / 70%);
|
|
--color-alpha-black-900: --alpha(var(--color-black) / 85%);
|
|
--color-red-25: #FFFBFB;
|
|
--color-red-50: #FFF1F0;
|
|
--color-red-100: #FFDEDB;
|
|
--color-red-200: #FEB9B3;
|
|
--color-red-300: #F88C86;
|
|
--color-red-400: #ED4E4E;
|
|
--color-red-500: #F13636;
|
|
--color-red-600: #EC2222;
|
|
--color-red-700: #C91313;
|
|
--color-red-800: #A40E0E;
|
|
--color-red-900: #7E0707;
|
|
--color-red-tint-5: --alpha(var(--color-red-500) / 5%);
|
|
--color-red-tint-10: --alpha(var(--color-red-500) / 10%);
|
|
--color-green-25: #F6FEF9;
|
|
--color-green-50: #ECFDF3;
|
|
--color-green-100: #D1FADF;
|
|
--color-green-200: #A6F4C5;
|
|
--color-green-300: #6CE9A6;
|
|
--color-green-400: #32D583;
|
|
--color-green-500: #12B76A;
|
|
--color-green-600: #10A861;
|
|
--color-green-700: #078C52;
|
|
--color-green-800: #05603A;
|
|
--color-green-900: #054F31;
|
|
--color-green-tint-5: --alpha(var(--color-green-500) / 5%);
|
|
--color-green-tint-10: --alpha(var(--color-green-500) / 10%);
|
|
--color-yellow-25: #FFFCF5;
|
|
--color-yellow-50: #FFFAEB;
|
|
--color-yellow-100: #FEF0C7;
|
|
--color-yellow-200: #FEDF89;
|
|
--color-yellow-300: #FEC84B;
|
|
--color-yellow-400: #FDB022;
|
|
--color-yellow-500: #F79009;
|
|
--color-yellow-600: #DC6803;
|
|
--color-yellow-700: #B54708;
|
|
--color-yellow-800: #93370D;
|
|
--color-yellow-900: #7A2E0E;
|
|
--color-yellow-tint-5: --alpha(var(--color-yellow-500) / 5%);
|
|
--color-yellow-tint-10: --alpha(var(--color-yellow-500) / 10%);
|
|
--color-cyan-25: #F5FEFF;
|
|
--color-cyan-50: #ECFDFF;
|
|
--color-cyan-100: #CFF9FE;
|
|
--color-cyan-200: #A5F0FC;
|
|
--color-cyan-300: #67E3F9;
|
|
--color-cyan-400: #22CCEE;
|
|
--color-cyan-500: #06AED4;
|
|
--color-cyan-600: #088AB2;
|
|
--color-cyan-700: #0E7090;
|
|
--color-cyan-800: #155B75;
|
|
--color-cyan-900: #164E63;
|
|
--color-cyan-tint-5: --alpha(var(--color-cyan-500) / 5%);
|
|
--color-cyan-tint-10: --alpha(var(--color-cyan-500) / 10%);
|
|
--color-blue-25: #F5FAFF;
|
|
--color-blue-50: #EFF8FF;
|
|
--color-blue-100: #D1E9FF;
|
|
--color-blue-200: #B2DDFF;
|
|
--color-blue-300: #84CAFF;
|
|
--color-blue-400: #53B1FD;
|
|
--color-blue-500: #2E90FA;
|
|
--color-blue-600: #1570EF;
|
|
--color-blue-700: #175CD3;
|
|
--color-blue-800: #1849A9;
|
|
--color-blue-900: #194185;
|
|
--color-blue-tint-5: --alpha(var(--color-blue-500) / 5%);
|
|
--color-blue-tint-10: --alpha(var(--color-blue-500) / 10%);
|
|
--color-indigo-25: #F5F8FF;
|
|
--color-indigo-50: #EFF4FF;
|
|
--color-indigo-100: #E0EAFF;
|
|
--color-indigo-200: #C7D7FE;
|
|
--color-indigo-300: #A4BCFD;
|
|
--color-indigo-400: #8098F9;
|
|
--color-indigo-500: #6172F3;
|
|
--color-indigo-600: #444CE7;
|
|
--color-indigo-700: #3538CD;
|
|
--color-indigo-800: #2D31A6;
|
|
--color-indigo-900: #2D3282;
|
|
--color-indigo-tint-5: --alpha(var(--color-indigo-500) / 5%);
|
|
--color-indigo-tint-10: --alpha(var(--color-indigo-500) / 10%);
|
|
--color-violet-25: #FBFAFF;
|
|
--color-violet-50: #F5F3FF;
|
|
--color-violet-100: #ECE9FE;
|
|
--color-violet-200: #DDD6FE;
|
|
--color-violet-300: #C3B5FD;
|
|
--color-violet-400: #A48AFB;
|
|
--color-violet-500: #875BF7;
|
|
--color-violet-600: #7839EE;
|
|
--color-violet-700: #6927DA;
|
|
--color-violet-tint-5: --alpha(var(--color-violet-500) / 5%);
|
|
--color-violet-tint-10: --alpha(var(--color-violet-500) / 10%);
|
|
--color-fuchsia-25: #FEFAFF;
|
|
--color-fuchsia-50: #FDF4FF;
|
|
--color-fuchsia-100: #FBE8FF;
|
|
--color-fuchsia-200: #F6D0FE;
|
|
--color-fuchsia-300: #EEAAFD;
|
|
--color-fuchsia-400: #E478FA;
|
|
--color-fuchsia-500: #D444F1;
|
|
--color-fuchsia-600: #BA24D5;
|
|
--color-fuchsia-700: #9F1AB1;
|
|
--color-fuchsia-800: #821890;
|
|
--color-fuchsia-900: #6F1877;
|
|
--color-fuchsia-tint-5: --alpha(var(--color-fuchsia-500) / 5%);
|
|
--color-fuchsia-tint-10: --alpha(var(--color-fuchsia-500) / 10%);
|
|
--color-pink-25: #FFFAFC;
|
|
--color-pink-50: #FEF0F7;
|
|
--color-pink-100: #FFD1E2;
|
|
--color-pink-200: #FFB1CE;
|
|
--color-pink-300: #FD8FBA;
|
|
--color-pink-400: #F86BA7;
|
|
--color-pink-500: #F23E94;
|
|
--color-pink-600: #D5327F;
|
|
--color-pink-700: #BA256B;
|
|
--color-pink-800: #9E1958;
|
|
--color-pink-900: #840B45;
|
|
--color-pink-tint-5: --alpha(var(--color-pink-500) / 5%);
|
|
--color-pink-tint-10: --alpha(var(--color-pink-500) / 10%);
|
|
--color-orange-25: #FFF9F5;
|
|
--color-orange-50: #FFF4ED;
|
|
--color-orange-100: #FFE6D5;
|
|
--color-orange-200: #FFD6AE;
|
|
--color-orange-300: #FF9C66;
|
|
--color-orange-400: #FF692E;
|
|
--color-orange-500: #FF4405;
|
|
--color-orange-600: #E62E05;
|
|
--color-orange-700: #BC1B06;
|
|
--color-orange-800: #97180C;
|
|
--color-orange-900: #771A0D;
|
|
--color-orange-tint-5: --alpha(var(--color-orange-500) / 5%);
|
|
--color-orange-tint-10: --alpha(var(--color-orange-500) / 10%);
|
|
--budget-unused-fill: var(--color-gray-200);
|
|
--budget-unallocated-fill: var(--color-gray-50);
|
|
--border-radius-md: 8px;
|
|
--border-radius-lg: 10px;
|
|
--shadow-xs: 0px 1px 2px 0px --alpha(var(--color-black) / 6%);
|
|
--shadow-sm: 0px 1px 6px 0px --alpha(var(--color-black) / 6%);
|
|
--shadow-md: 0px 4px 8px -2px --alpha(var(--color-black) / 6%);
|
|
--shadow-lg: 0px 12px 16px -4px --alpha(var(--color-black) / 6%);
|
|
--shadow-xl: 0px 20px 24px -4px --alpha(var(--color-black) / 6%);
|
|
--animate-stroke-fill: stroke-fill 3s 300ms forwards;
|
|
|
|
@keyframes stroke-fill {
|
|
0% { stroke-dashoffset: 43.9822971503; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
[data-theme="dark"] {
|
|
--color-success: var(--color-green-400);
|
|
--color-warning: var(--color-yellow-400);
|
|
--color-destructive: var(--color-red-400);
|
|
--color-info: var(--color-blue-500);
|
|
--color-shadow: --alpha(var(--color-white) / 8%);
|
|
--color-link: var(--color-blue-500);
|
|
--color-focus-ring: var(--color-alpha-white-700);
|
|
--color-tertiary: var(--color-alpha-white-200);
|
|
--color-surface: var(--color-black);
|
|
--color-surface-hover: var(--color-gray-800);
|
|
--color-surface-inset: var(--color-gray-800);
|
|
--color-surface-inset-hover: var(--color-gray-800);
|
|
--color-container: var(--color-gray-900);
|
|
--color-container-hover: var(--color-gray-800);
|
|
--color-container-inset: var(--color-gray-800);
|
|
--color-container-inset-hover: var(--color-gray-700);
|
|
--color-nav-indicator: var(--color-white);
|
|
--color-toggle-track: var(--color-gray-700);
|
|
--color-destructive-subtle: var(--color-red-800);
|
|
--budget-unused-fill: var(--color-gray-500);
|
|
--budget-unallocated-fill: var(--color-gray-700);
|
|
--shadow-xs: 0px 1px 2px 0px --alpha(var(--color-white) / 8%);
|
|
--shadow-sm: 0px 1px 6px 0px --alpha(var(--color-white) / 8%);
|
|
--shadow-md: 0px 4px 8px -2px --alpha(var(--color-white) / 8%);
|
|
--shadow-lg: 0px 12px 16px -4px --alpha(var(--color-white) / 8%);
|
|
--shadow-xl: 0px 20px 24px -4px --alpha(var(--color-white) / 8%);
|
|
}
|
|
}
|
|
|
|
@utility bg-inverse {
|
|
@apply bg-gray-800;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
|
|
@utility bg-inverse-hover {
|
|
@apply bg-gray-700;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-100;
|
|
}
|
|
}
|
|
|
|
@utility bg-overlay {
|
|
background-color: --alpha(var(--color-gray-100) / 50%);
|
|
|
|
@variant theme-dark {
|
|
background-color: var(--color-alpha-black-900);
|
|
}
|
|
}
|
|
|
|
@utility bg-loader {
|
|
@apply bg-surface-inset animate-pulse;
|
|
}
|
|
|
|
@utility text-primary {
|
|
@apply text-gray-900;
|
|
|
|
@variant theme-dark {
|
|
@apply text-white;
|
|
}
|
|
}
|
|
|
|
@utility text-inverse {
|
|
@apply text-white;
|
|
|
|
@variant theme-dark {
|
|
@apply text-gray-900;
|
|
}
|
|
}
|
|
|
|
@utility text-secondary {
|
|
@apply text-gray-500;
|
|
|
|
@variant theme-dark {
|
|
@apply text-gray-300;
|
|
}
|
|
}
|
|
|
|
@utility text-subdued {
|
|
@apply text-gray-400;
|
|
|
|
@variant theme-dark {
|
|
@apply text-gray-400;
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-xs {
|
|
box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-xs), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-sm {
|
|
box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-sm), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-md {
|
|
box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-md), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-lg {
|
|
box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-lg), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility shadow-border-xl {
|
|
box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-black-50);
|
|
|
|
@variant theme-dark {
|
|
box-shadow: var(--shadow-xl), 0px 0px 0px 1px var(--color-alpha-white-50);
|
|
}
|
|
}
|
|
|
|
@utility border-primary {
|
|
@apply border-alpha-black-300;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-white-500;
|
|
}
|
|
}
|
|
|
|
@utility border-secondary {
|
|
@apply border-alpha-black-200;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-white-400;
|
|
}
|
|
}
|
|
|
|
@utility border-divider {
|
|
@apply border-tertiary;
|
|
}
|
|
|
|
@utility border-subdued {
|
|
@apply border-alpha-black-50;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-white-200;
|
|
}
|
|
}
|
|
|
|
@utility border-solid {
|
|
@apply border-black;
|
|
|
|
@variant theme-dark {
|
|
@apply border-white;
|
|
}
|
|
}
|
|
|
|
@utility border-destructive {
|
|
@apply border-red-500;
|
|
|
|
@variant theme-dark {
|
|
@apply border-red-400;
|
|
}
|
|
}
|
|
|
|
@utility border-inverse {
|
|
@apply border-alpha-white-200;
|
|
|
|
@variant theme-dark {
|
|
@apply border-alpha-black-300;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-primary {
|
|
@apply bg-gray-900;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-primary-hover {
|
|
@apply bg-gray-800;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-50;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary-hover {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-600;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary-strong {
|
|
@apply bg-gray-200;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-secondary-strong-hover {
|
|
@apply bg-gray-300;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-600;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-disabled {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-destructive {
|
|
@apply bg-red-600;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-red-400;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-destructive-hover {
|
|
@apply bg-red-700;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-red-500;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-ghost-hover {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800 text-inverse;
|
|
}
|
|
}
|
|
|
|
@utility button-bg-outline-hover {
|
|
@apply bg-gray-100;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility tab-item-active {
|
|
@apply bg-white;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-700;
|
|
}
|
|
}
|
|
|
|
@utility tab-item-hover {
|
|
@apply bg-gray-200;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-gray-800;
|
|
}
|
|
}
|
|
|
|
@utility tab-bg-group {
|
|
@apply bg-gray-50;
|
|
|
|
@variant theme-dark {
|
|
@apply bg-alpha-black-700;
|
|
}
|
|
}
|