initial commit
This commit is contained in:
@@ -0,0 +1,423 @@
|
||||
/* ============================================================================
|
||||
TIER 2 - SEMANTIC TOKENS
|
||||
----------------------------------------------------------------------------
|
||||
Every token here carries MEANING and every value is a var() pointing at a
|
||||
TIER 1 primitive (app/styles/primitives.css). No raw hex is allowed below.
|
||||
|
||||
Components may use ONLY these tokens - never a primitive, never a hex.
|
||||
|
||||
SURFACES, not a global theme.
|
||||
The SHARP-ER home page is dark by default (bg #1d1d1b), while the nav and
|
||||
footer also ship light variants, so the whole tier-2 palette is redefined
|
||||
per surface. Any element can flip the surface for its own subtree:
|
||||
|
||||
<html data-surface="dark"> <!-- default, may be omitted -->
|
||||
<footer data-surface="light"> <!-- light footer inside a dark page -->
|
||||
|
||||
:root and [data-surface="dark"] share one block; [data-surface="light"]
|
||||
comes afterwards so it wins on the same element, and proximity makes the
|
||||
nearest data-surface ancestor win for any subtree.
|
||||
========================================================================= */
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
DARK SURFACE - the default
|
||||
------------------------------------------------------------------------ */
|
||||
:root,
|
||||
[data-surface="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* --- surfaces / backgrounds ------------------------------------------ */
|
||||
--surface-page: var(--color-neutral-800); /* figma background/primary */
|
||||
--surface-raised: var(--color-neutral-700); /* cards sitting on the page */
|
||||
--surface-sunken: var(--color-neutral-900); /* figma Neutral Black/900 */
|
||||
--surface-muted: var(--color-white-a08); /* subtle fills, chips, wells */
|
||||
--surface-accent: var(--color-green-600); /* figma background/accent */
|
||||
--surface-accent-subtle: var(--color-green-a24);
|
||||
--surface-danger: var(--color-red-500);
|
||||
--surface-danger-subtle: var(--color-red-a24);
|
||||
--surface-inverse: var(--color-white); /* figma background/inverse */
|
||||
--surface-selection: var(--color-green-a40);
|
||||
|
||||
/* --- text ------------------------------------------------------------- */
|
||||
--text-primary: var(--color-neutral-50); /* figma text/primary */
|
||||
--text-secondary: var(--color-neutral-300); /* figma text/secondary */
|
||||
--text-tertiary: var(--color-neutral-400); /* figma text/tertiary */
|
||||
--text-disabled: var(--color-neutral-500);
|
||||
--text-accent: var(--color-green-400); /* green-600 is unreadable on #1d1d1b */
|
||||
--text-danger: var(--color-red-400);
|
||||
--text-on-accent: var(--color-white); /* figma text/inverse - label on a filled button */
|
||||
--text-on-inverse: var(--color-neutral-800); /* text sitting on --surface-inverse */
|
||||
--text-inverse: var(--color-neutral-800); /* alias of --text-on-inverse */
|
||||
--text-link: var(--color-green-400);
|
||||
--text-link-hover: var(--color-green-300);
|
||||
|
||||
/* --- borders ----------------------------------------------------------- */
|
||||
--border-subtle: var(--color-white-a12); /* figma stroke/subtle, dark equivalent */
|
||||
--border-default: var(--color-white-a24);
|
||||
--border-strong: var(--color-neutral-50);
|
||||
--border-accent: var(--color-green-600);
|
||||
--border-danger: var(--color-red-500);
|
||||
--border-inverse: var(--color-neutral-800);
|
||||
|
||||
/* --- interactive: primary (filled green) ------------------------------- */
|
||||
--interactive-primary-bg: var(--color-green-600);
|
||||
--interactive-primary-bg-hover: var(--color-green-700);
|
||||
--interactive-primary-bg-active: var(--color-green-800);
|
||||
--interactive-primary-bg-disabled: var(--color-green-400);
|
||||
--interactive-primary-fg: var(--color-white);
|
||||
--interactive-primary-fg-hover: var(--color-white);
|
||||
--interactive-primary-fg-disabled: var(--color-white);
|
||||
--interactive-primary-border: var(--color-transparent);
|
||||
--interactive-primary-border-hover: var(--color-transparent);
|
||||
--interactive-primary-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- interactive: secondary (outlined) --------------------------------- */
|
||||
--interactive-secondary-bg: var(--color-transparent);
|
||||
--interactive-secondary-bg-hover: var(--color-white-a12);
|
||||
--interactive-secondary-bg-active: var(--color-white-a16);
|
||||
--interactive-secondary-bg-disabled: var(--color-transparent);
|
||||
--interactive-secondary-fg: var(--color-neutral-50);
|
||||
--interactive-secondary-fg-hover: var(--color-neutral-50);
|
||||
--interactive-secondary-fg-disabled: var(--color-neutral-500);
|
||||
--interactive-secondary-border: var(--color-neutral-50);
|
||||
--interactive-secondary-border-hover: var(--color-neutral-50);
|
||||
--interactive-secondary-border-disabled: var(--color-white-a24);
|
||||
|
||||
/* --- interactive: dark (near-black fill) -------------------------------- */
|
||||
--interactive-dark-bg: var(--color-neutral-900);
|
||||
--interactive-dark-bg-hover: var(--color-black);
|
||||
--interactive-dark-bg-active: var(--color-black);
|
||||
--interactive-dark-bg-disabled: var(--color-neutral-600);
|
||||
--interactive-dark-fg: var(--color-white);
|
||||
--interactive-dark-fg-hover: var(--color-white);
|
||||
--interactive-dark-fg-disabled: var(--color-neutral-300);
|
||||
--interactive-dark-border: var(--color-white-a24);
|
||||
--interactive-dark-border-hover: var(--color-white-a24);
|
||||
--interactive-dark-border-disabled: var(--color-white-a12);
|
||||
|
||||
/* --- interactive: danger ------------------------------------------------ */
|
||||
--interactive-danger-bg: var(--color-red-500);
|
||||
--interactive-danger-bg-hover: var(--color-red-600);
|
||||
--interactive-danger-bg-active: var(--color-red-700);
|
||||
--interactive-danger-bg-disabled: var(--color-red-300);
|
||||
--interactive-danger-fg: var(--color-white);
|
||||
--interactive-danger-fg-hover: var(--color-white);
|
||||
--interactive-danger-fg-disabled: var(--color-white);
|
||||
--interactive-danger-border: var(--color-transparent);
|
||||
--interactive-danger-border-hover: var(--color-transparent);
|
||||
--interactive-danger-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- interactive: ghost (text-only) -------------------------------------
|
||||
DEVIATION FROM FIGMA (a11y). The published component paints the hover
|
||||
background/accent (#008764) and keeps base/turquoise-dark (#006b4f) as
|
||||
the label - 1.40:1, far below WCAG AA. Both surfaces therefore use white
|
||||
on the accent fill, which is 4.52:1 and passes AA for body text. The two
|
||||
lines marked (a11y) are the only ones that differ from Figma; reverting
|
||||
them to var(--color-green-700) restores pixel parity and the failure. */
|
||||
--interactive-ghost-bg: var(--color-transparent);
|
||||
--interactive-ghost-bg-hover: var(--color-green-600);
|
||||
--interactive-ghost-bg-active: var(--color-green-700);
|
||||
--interactive-ghost-bg-disabled: var(--color-transparent);
|
||||
--interactive-ghost-fg: var(--color-green-400);
|
||||
--interactive-ghost-fg-hover: var(--color-white); /* (a11y) 4.52:1 on green-600; figma: green-700 = 1.40:1 */
|
||||
--interactive-ghost-fg-disabled: var(--color-green-400);
|
||||
--interactive-ghost-border: var(--color-transparent);
|
||||
--interactive-ghost-border-hover: var(--color-transparent);
|
||||
--interactive-ghost-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- form fields --------------------------------------------------------- */
|
||||
--field-bg: var(--color-white-a08);
|
||||
--field-bg-disabled: var(--color-white-a04);
|
||||
--field-fg: var(--color-neutral-50);
|
||||
--field-fg-disabled: var(--color-neutral-500);
|
||||
--field-placeholder: var(--color-neutral-400);
|
||||
--field-border: var(--color-white-a24);
|
||||
--field-border-hover: var(--color-white-a40);
|
||||
--field-border-focus: var(--color-green-400);
|
||||
--field-border-error: var(--color-red-400);
|
||||
|
||||
/* --- focus ring ---------------------------------------------------------- */
|
||||
--focus-ring-color: var(--color-green-400);
|
||||
--focus-ring-color-inverse: var(--color-white);
|
||||
|
||||
/* --- overlay / scrim ------------------------------------------------------ */
|
||||
--overlay-scrim: var(--color-black-a56);
|
||||
--overlay-scrim-strong: var(--color-black-a72);
|
||||
--overlay-veil: var(--color-white-a08);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
LIGHT SURFACE - light nav, light footer, light content sections
|
||||
Same token names, re-pointed at different primitives.
|
||||
------------------------------------------------------------------------ */
|
||||
[data-surface="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
/* --- surfaces / backgrounds ------------------------------------------ */
|
||||
--surface-page: var(--color-white); /* figma background/primary (light) */
|
||||
--surface-raised: var(--color-white);
|
||||
--surface-sunken: var(--color-neutral-50);
|
||||
--surface-muted: var(--color-neutral-100); /* figma stroke/subtle as a fill */
|
||||
--surface-accent: var(--color-green-600);
|
||||
--surface-accent-subtle: var(--color-green-100);
|
||||
--surface-danger: var(--color-red-500);
|
||||
--surface-danger-subtle: var(--color-red-100);
|
||||
--surface-inverse: var(--color-neutral-900); /* figma background/inverse #0b0b0a */
|
||||
--surface-selection: var(--color-green-200);
|
||||
|
||||
/* --- text ------------------------------------------------------------- */
|
||||
--text-primary: var(--color-neutral-800); /* figma text/primary (light) */
|
||||
--text-secondary: var(--color-neutral-500);
|
||||
/* neutral-400 (#949492) is only 3.04:1 on white - below AA for body text.
|
||||
Tertiary is real, readable copy (eyebrows, meta lines), so it takes
|
||||
neutral-500 (7.14:1). #949492 stays on --text-disabled, where WCAG 1.4.3
|
||||
exempts a disabled control's own label. On the dark surface neutral-400
|
||||
is 5.56:1 and needs no change. */
|
||||
--text-tertiary: var(--color-neutral-500);
|
||||
--text-disabled: var(--color-neutral-400);
|
||||
--text-accent: var(--color-green-600); /* figma text/accent */
|
||||
--text-danger: var(--color-red-600);
|
||||
--text-on-accent: var(--color-white); /* figma text/inverse */
|
||||
--text-on-inverse: var(--color-neutral-50);
|
||||
--text-inverse: var(--color-neutral-50);
|
||||
--text-link: var(--color-green-700);
|
||||
--text-link-hover: var(--color-green-800);
|
||||
|
||||
/* --- borders ----------------------------------------------------------- */
|
||||
--border-subtle: var(--color-neutral-100); /* figma stroke/subtle #e8e8e8 */
|
||||
--border-default: var(--color-neutral-200);
|
||||
--border-strong: var(--color-black); /* figma base/black button stroke */
|
||||
--border-accent: var(--color-green-600);
|
||||
--border-danger: var(--color-red-500);
|
||||
--border-inverse: var(--color-neutral-50);
|
||||
|
||||
/* --- interactive: primary (filled green) ------------------------------- */
|
||||
--interactive-primary-bg: var(--color-green-600);
|
||||
--interactive-primary-bg-hover: var(--color-green-700);
|
||||
--interactive-primary-bg-active: var(--color-green-800);
|
||||
--interactive-primary-bg-disabled: var(--color-green-400);
|
||||
--interactive-primary-fg: var(--color-white);
|
||||
--interactive-primary-fg-hover: var(--color-white);
|
||||
--interactive-primary-fg-disabled: var(--color-white);
|
||||
--interactive-primary-border: var(--color-transparent);
|
||||
--interactive-primary-border-hover: var(--color-transparent);
|
||||
--interactive-primary-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- interactive: secondary (outlined) --------------------------------- */
|
||||
--interactive-secondary-bg: var(--color-white);
|
||||
--interactive-secondary-bg-hover: var(--color-neutral-100);
|
||||
--interactive-secondary-bg-active: var(--color-neutral-200);
|
||||
--interactive-secondary-bg-disabled: var(--color-white);
|
||||
--interactive-secondary-fg: var(--color-neutral-800);
|
||||
--interactive-secondary-fg-hover: var(--color-neutral-800);
|
||||
--interactive-secondary-fg-disabled: var(--color-neutral-400);
|
||||
--interactive-secondary-border: var(--color-black);
|
||||
--interactive-secondary-border-hover: var(--color-black);
|
||||
--interactive-secondary-border-disabled: var(--color-neutral-200);
|
||||
|
||||
/* --- interactive: dark (near-black fill) -------------------------------- */
|
||||
--interactive-dark-bg: var(--color-neutral-900);
|
||||
--interactive-dark-bg-hover: var(--color-black);
|
||||
--interactive-dark-bg-active: var(--color-black);
|
||||
--interactive-dark-bg-disabled: var(--color-neutral-500);
|
||||
--interactive-dark-fg: var(--color-white);
|
||||
--interactive-dark-fg-hover: var(--color-white);
|
||||
--interactive-dark-fg-disabled: var(--color-neutral-200);
|
||||
--interactive-dark-border: var(--color-transparent);
|
||||
--interactive-dark-border-hover: var(--color-transparent);
|
||||
--interactive-dark-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- interactive: danger ------------------------------------------------ */
|
||||
--interactive-danger-bg: var(--color-red-500);
|
||||
--interactive-danger-bg-hover: var(--color-red-600);
|
||||
--interactive-danger-bg-active: var(--color-red-700);
|
||||
--interactive-danger-bg-disabled: var(--color-red-300);
|
||||
--interactive-danger-fg: var(--color-white);
|
||||
--interactive-danger-fg-hover: var(--color-white);
|
||||
--interactive-danger-fg-disabled: var(--color-white);
|
||||
--interactive-danger-border: var(--color-transparent);
|
||||
--interactive-danger-border-hover: var(--color-transparent);
|
||||
--interactive-danger-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- interactive: ghost (text-only) - see the a11y note above ---------- */
|
||||
--interactive-ghost-bg: var(--color-transparent);
|
||||
--interactive-ghost-bg-hover: var(--color-green-600);
|
||||
--interactive-ghost-bg-active: var(--color-green-700);
|
||||
--interactive-ghost-bg-disabled: var(--color-transparent);
|
||||
--interactive-ghost-fg: var(--color-green-600);
|
||||
--interactive-ghost-fg-hover: var(--color-white); /* (a11y) 4.52:1 on green-600; figma: green-700 = 1.40:1 */
|
||||
--interactive-ghost-fg-disabled: var(--color-green-600);
|
||||
--interactive-ghost-border: var(--color-transparent);
|
||||
--interactive-ghost-border-hover: var(--color-transparent);
|
||||
--interactive-ghost-border-disabled: var(--color-transparent);
|
||||
|
||||
/* --- form fields --------------------------------------------------------- */
|
||||
--field-bg: var(--color-white);
|
||||
--field-bg-disabled: var(--color-neutral-50);
|
||||
--field-fg: var(--color-neutral-800);
|
||||
--field-fg-disabled: var(--color-neutral-400);
|
||||
--field-placeholder: var(--color-neutral-400);
|
||||
--field-border: var(--color-neutral-200);
|
||||
--field-border-hover: var(--color-neutral-500);
|
||||
--field-border-focus: var(--color-green-600);
|
||||
--field-border-error: var(--color-red-500);
|
||||
|
||||
/* --- focus ring ---------------------------------------------------------- */
|
||||
--focus-ring-color: var(--color-green-600);
|
||||
--focus-ring-color-inverse: var(--color-neutral-900);
|
||||
|
||||
/* --- overlay / scrim ------------------------------------------------------ */
|
||||
--overlay-scrim: var(--color-black-a40);
|
||||
--overlay-scrim-strong: var(--color-black-a56);
|
||||
--overlay-veil: var(--color-black-a04);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
SURFACE-INDEPENDENT SEMANTICS
|
||||
Sizes, shapes, motion and stacking do not change between surfaces, so they
|
||||
are declared once. Values still alias tier 1 only.
|
||||
------------------------------------------------------------------------ */
|
||||
:root {
|
||||
/* --- shape -------------------------------------------------------------
|
||||
--radius-control / --radius-control-lg / --radius-card / --radius-surface
|
||||
/ --radius-pill are declared in the @theme block near the bottom of this
|
||||
file so that they also generate rounded-* utilities. They are tier-2
|
||||
tokens like everything else here. */
|
||||
|
||||
/* --- control metrics (from the Figma Button frame) ---------------------- */
|
||||
--control-border-width: var(--border-width-md); /* 1.5px outlined button */
|
||||
--control-gap: var(--spacing-xs); /* 8px label <-> icon */
|
||||
--control-icon-size: var(--spacing-lg); /* 24px icon box */
|
||||
--control-padding-inline-sm: var(--spacing-md); /* 16 */
|
||||
--control-padding-block-sm: var(--spacing-xs); /* 8 */
|
||||
--control-padding-inline-md: var(--spacing-lg); /* 24 */
|
||||
--control-padding-block-md: var(--spacing-sm); /* 12 */
|
||||
--control-padding-inline-lg: var(--spacing-lg); /* 24 */
|
||||
--control-padding-block-lg: var(--spacing-sm); /* 12 */
|
||||
--control-opacity-disabled: var(--opacity-40); /* figma disabled state */
|
||||
|
||||
/* --- base document type -------------------------------------------------
|
||||
The only type the base layer in app/app.css sets on <body>; everything
|
||||
else is a type-role utility from typography.css. It lives here so that
|
||||
app.css never has to reach past a role to --text-md / --leading-6.
|
||||
Values match the `body-md` role (Body/Medium, 16/24). */
|
||||
--type-body-base-size: var(--text-md);
|
||||
--type-body-base-leading: var(--leading-6);
|
||||
|
||||
/* --- layout ------------------------------------------------------------- */
|
||||
--layout-gutter: var(--spacing-lg);
|
||||
--layout-gutter-lg: var(--spacing-xl);
|
||||
--layout-section-gap: var(--spacing-3xl);
|
||||
--layout-stack-gap: var(--spacing-md);
|
||||
--layout-content-max: var(--container-content);
|
||||
--layout-prose-max: var(--container-prose);
|
||||
|
||||
/* --- elevation ---------------------------------------------------------- */
|
||||
--elevation-flat: var(--shadow-none);
|
||||
--elevation-raised: var(--shadow-sm);
|
||||
--elevation-card: var(--shadow-md);
|
||||
--elevation-popover: var(--shadow-lg);
|
||||
--elevation-modal: var(--shadow-xl);
|
||||
|
||||
/* --- focus ring geometry ------------------------------------------------- */
|
||||
--focus-ring-width: var(--border-width-lg);
|
||||
--focus-ring-offset: var(--border-width-lg);
|
||||
|
||||
/* --- motion --------------------------------------------------------------- */
|
||||
--motion-duration-fast: var(--duration-fast);
|
||||
--motion-duration-base: var(--duration-base);
|
||||
--motion-duration-slow: var(--duration-slow);
|
||||
--motion-ease-standard: var(--ease-standard);
|
||||
--motion-ease-entrance: var(--ease-decelerate);
|
||||
--motion-ease-exit: var(--ease-accelerate);
|
||||
--motion-ease-emphasized: var(--ease-emphasized);
|
||||
|
||||
/* --- stacking layers ------------------------------------------------------- */
|
||||
--layer-base: var(--z-0);
|
||||
--layer-raised: var(--z-10);
|
||||
--layer-sticky: var(--z-20);
|
||||
--layer-header: var(--z-30);
|
||||
--layer-dropdown: var(--z-40);
|
||||
--layer-overlay: var(--z-50);
|
||||
--layer-modal: var(--z-60);
|
||||
--layer-toast: var(--z-70);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
TAILWIND BRIDGE
|
||||
`@theme inline` exposes the semantic tokens as Tailwind utilities without
|
||||
freezing their value, so `bg-surface-page` still re-resolves inside a
|
||||
[data-surface] subtree. The utility name is always
|
||||
<tailwind-prefix>-<token-name>: --surface-page -> bg-surface-page,
|
||||
--text-primary -> text-text-primary, --border-subtle -> border-border-subtle.
|
||||
Using bg-[var(--surface-page)] directly is equally valid.
|
||||
------------------------------------------------------------------------ */
|
||||
@theme inline {
|
||||
--color-surface-page: var(--surface-page);
|
||||
--color-surface-raised: var(--surface-raised);
|
||||
--color-surface-sunken: var(--surface-sunken);
|
||||
--color-surface-muted: var(--surface-muted);
|
||||
--color-surface-accent: var(--surface-accent);
|
||||
--color-surface-accent-subtle: var(--surface-accent-subtle);
|
||||
--color-surface-danger: var(--surface-danger);
|
||||
--color-surface-danger-subtle: var(--surface-danger-subtle);
|
||||
--color-surface-inverse: var(--surface-inverse);
|
||||
|
||||
--color-text-primary: var(--text-primary);
|
||||
--color-text-secondary: var(--text-secondary);
|
||||
--color-text-tertiary: var(--text-tertiary);
|
||||
--color-text-disabled: var(--text-disabled);
|
||||
--color-text-accent: var(--text-accent);
|
||||
--color-text-danger: var(--text-danger);
|
||||
--color-text-on-accent: var(--text-on-accent);
|
||||
--color-text-on-inverse: var(--text-on-inverse);
|
||||
--color-text-inverse: var(--text-inverse);
|
||||
--color-text-link: var(--text-link);
|
||||
--color-text-link-hover: var(--text-link-hover);
|
||||
|
||||
--color-border-subtle: var(--border-subtle);
|
||||
--color-border-default: var(--border-default);
|
||||
--color-border-strong: var(--border-strong);
|
||||
--color-border-accent: var(--border-accent);
|
||||
--color-border-danger: var(--border-danger);
|
||||
--color-border-inverse: var(--border-inverse);
|
||||
|
||||
--color-interactive-primary: var(--interactive-primary-bg);
|
||||
--color-interactive-primary-hover: var(--interactive-primary-bg-hover);
|
||||
--color-interactive-primary-active: var(--interactive-primary-bg-active);
|
||||
--color-interactive-primary-disabled: var(--interactive-primary-bg-disabled);
|
||||
--color-interactive-secondary: var(--interactive-secondary-bg);
|
||||
--color-interactive-secondary-hover: var(--interactive-secondary-bg-hover);
|
||||
--color-interactive-dark: var(--interactive-dark-bg);
|
||||
--color-interactive-dark-hover: var(--interactive-dark-bg-hover);
|
||||
--color-interactive-danger: var(--interactive-danger-bg);
|
||||
--color-interactive-danger-hover: var(--interactive-danger-bg-hover);
|
||||
--color-interactive-ghost-hover: var(--interactive-ghost-bg-hover);
|
||||
|
||||
--color-field-bg: var(--field-bg);
|
||||
--color-field-border: var(--field-border);
|
||||
--color-field-border-focus: var(--field-border-focus);
|
||||
--color-field-border-error: var(--field-border-error);
|
||||
--color-field-placeholder: var(--field-placeholder);
|
||||
|
||||
--color-focus-ring: var(--focus-ring-color);
|
||||
--color-overlay-scrim: var(--overlay-scrim);
|
||||
}
|
||||
|
||||
/* Shape semantics that also need to exist as Tailwind utilities
|
||||
(rounded-control / rounded-card / rounded-surface). They alias tier 1
|
||||
directly - never a tier-2 name, which would self-reference. */
|
||||
@theme static {
|
||||
--radius-control: var(--radius-sm);
|
||||
--radius-control-lg: var(--radius-md);
|
||||
--radius-card: var(--radius-md);
|
||||
--radius-surface: var(--radius-lg);
|
||||
--radius-pill: var(--radius-full);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
SURFACE VARIANTS - target a surface explicitly from a utility class,
|
||||
e.g. `surface-light:underline`.
|
||||
------------------------------------------------------------------------ */
|
||||
@custom-variant surface-dark (&:where([data-surface="dark"], [data-surface="dark"] *));
|
||||
@custom-variant surface-light (&:where([data-surface="light"], [data-surface="light"] *));
|
||||
Reference in New Issue
Block a user