diff --git a/.changeset/color-system-brands.md b/.changeset/color-system-brands.md index e269eae6ba..322500b181 100644 --- a/.changeset/color-system-brands.md +++ b/.changeset/color-system-brands.md @@ -4,9 +4,8 @@ '@skillsoft/gamut': minor --- -Brands on the generated color system, and `--colors-*` variable names. +Brands on the generated color system. -- **Breaking:** color CSS variables are renamed from `--color-*` to `--colors-*`, in `@skillsoft/variance`'s `createTheme` and in `tokens.css`. Raw CSS that reads `var(--color-…)` has to be updated. - **Breaking:** `tokens.css` puts its rules in `@layer tokens`, with `reset, base, tokens, recipes, utilities` declared first. - Adds `originalCodecademyTheme`, today's core colors, fonts and hard-offset elevation rebuilt on the generated system. `tokens.css` carries a palette block per brand under `[data-brand]`. - A brand can override a palette step with an exact hex, or point a role at a different step (and, optionally, a different alpha) in one mode. Overrides go through the same contrast checks as generated values. diff --git a/packages/gamut-agent-tools/skills/gamut-review/SKILL.md b/packages/gamut-agent-tools/skills/gamut-review/SKILL.md index 3beed06dd6..353ce56c65 100644 --- a/packages/gamut-agent-tools/skills/gamut-review/SKILL.md +++ b/packages/gamut-agent-tools/skills/gamut-review/SKILL.md @@ -19,9 +19,9 @@ Remediation skills: [`gamut-theming`](../gamut-theming/SKILL.md) · [`gamut-colo Resolve the audit root from the user's path if provided, otherwise the current working directory. Look for `DESIGN.md` at that root (not inside `node_modules` or package subfolders unless the audit path is explicitly that folder). -| Result | Action | -| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Found | Report `✓ DESIGN.md present ()`. Proceed with Checks 1–5 using this file for product/theme context. | +| Result | Action | +| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Found | Report `✓ DESIGN.md present ()`. Proceed with Checks 1–5 using this file for product/theme context. | | Missing | Report `✗ DESIGN.md not found` as a blocking finding. Include remediation: from the repo root run `gamut plugin install cursor --theme core` (or `percipio`, `lxstudio`, `admin`, `platform`; also `claude`), or manually copy the matching `DESIGN.*.md` from `@skillsoft/gamut` agent-tools and rename to `DESIGN.md`. Still run Checks 1–3 and 5. For Check 4, list hex violations with `palette:` / `semantic:` only where Appendix A/B apply without product YAML — prefix the Hardcoded colors section with `⚠ low confidence — no DESIGN.md` and do not assume Codecademy Core semantics; do not use Appendix B shortcuts as authoritative. | --- @@ -30,11 +30,11 @@ Resolve the audit root from the user's path if provided, otherwise the current w Read `package.json` at the audit root. Inspect `dependencies`, `devDependencies`, and `peerDependencies` combined. -| Package | Expectation | -| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `@skillsoft/gamut` | Required — core component library | -| `@skillsoft/gamut-styles` | Recommended — design tokens and theme primitives | -| `@skillsoft/variance` | Recommended — style-prop system used by Gamut internals | +| Package | Expectation | +| ------------------------- | ------------------------------------------------------- | +| `@skillsoft/gamut` | Required — core component library | +| `@skillsoft/gamut-styles` | Recommended — design tokens and theme primitives | +| `@skillsoft/variance` | Recommended — style-prop system used by Gamut internals | --- @@ -48,7 +48,7 @@ Search source files (`.ts`, `.tsx`, `.js`, `.jsx`) for these symbols. Skip `node | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `GamutProvider` | Required — must appear at least once (app root wrapper) | | `ColorMode` | Recommended — enables semantic light/dark theming | -| `Background` | Recommended — semantic surface color via `@skillsoft/gamut-styles` | +| `Background` | Recommended — semantic surface color via `@skillsoft/gamut-styles` | | `declare module '@emotion/react'` | **Required if TypeScript** — `Theme` must be augmented with the active theme type (e.g. `CoreTheme`) so scale props type-check correctly; grep `.d.ts` and `.ts`/`.tsx` source files for this string. **Recommended if not TypeScript** — note that adopting TypeScript is recommended and that `theme.d.ts` will be needed when it is. | For each found symbol report the first file path where it appears. @@ -61,8 +61,8 @@ For each found symbol report the first file path where it appears. Grep source files for any of these patterns. Each match is an error. -| Pattern | Reason | -| ------------------------------- | ----------------------------------------------------------------------- | +| Pattern | Reason | +| ------------------------------ | ----------------------------------------------------------------------- | | `@skillsoft/gamut/dist/` | Deep dist import — bypasses public API and breaks on internal refactors | | `@skillsoft/gamut/src/` | Deep src import — not part of the published package | | `@skillsoft/gamut-styles/src/` | Deep src import — use the package root | @@ -393,7 +393,7 @@ After the hex scan, grep `.scss`, `.css`, and `.less` files for `var(--` occurre _Gamut-issued variables_ — skip these: -- `--colors-*` (ColorMode semantic aliases) +- `--color-*` (ColorMode semantic aliases) - `--space*` (spacing scale) - `--font*` (font-size scale) - `--lineHeight*` (line-height scale) @@ -406,7 +406,7 @@ Any other name — especially camel-cased semantic names like `--darkNeutralColo Severity: ✗ error for color-semantic variables (invisible in tests/Storybook without the host stylesheet); ⚠ warning for spacing/sizing variables that duplicate Gamut scale tokens. -Reporting: count unique non-Gamut variable names and list the top offenders with frequency. Do not enumerate every call-site — just the variable names and usage counts. Suggest the nearest Gamut semantic alias where obvious (e.g. `--darkNeutralColor` → `--colors-text`, `--whiteColor` → `--colors-background`). +Reporting: count unique non-Gamut variable names and list the top offenders with frequency. Do not enumerate every call-site — just the variable names and usage counts. Suggest the nearest Gamut semantic alias where obvious (e.g. `--darkNeutralColor` → `--color-text`, `--whiteColor` → `--color-background`). --- @@ -414,13 +414,13 @@ Reporting: count unique non-Gamut variable names and list the top offenders with Grep test files (`**/__tests__/**/*.{ts,tsx}`, `**/*.test.{ts,tsx}`, `**/*.spec.{ts,tsx}`) for these patterns. Skip `node_modules`, `dist`. -| Pattern | Verdict | Reason | -| ----------------------------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `jest.mock\(.*@skillsoft/gamut` | Error | Manual mocking bypasses theme context and produces false-positive tests; prefer `setupRtl` from `@skillsoft/gamut-tests` (or a harness + `setupRtl`); use raw `MockGamutProvider` + `render` only for rare one-offs or Storybook mocks | -| `jest.mock\(.*@skillsoft/gamut-styles` | Error | Same issue as above — mocking gamut-styles breaks token resolution | -| `from '@skillsoft/gamut-tests'` | Good — report count of files using it | Correct import for `setupRtl` and `MockGamutProvider` | +| Pattern | Verdict | Reason | +| ----------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `jest.mock\(.*@skillsoft/gamut` | Error | Manual mocking bypasses theme context and produces false-positive tests; prefer `setupRtl` from `@skillsoft/gamut-tests` (or a harness + `setupRtl`); use raw `MockGamutProvider` + `render` only for rare one-offs or Storybook mocks | +| `jest.mock\(.*@skillsoft/gamut-styles` | Error | Same issue as above — mocking gamut-styles breaks token resolution | +| `from '@skillsoft/gamut-tests'` | Good — report count of files using it | Correct import for `setupRtl` and `MockGamutProvider` | | `from 'component-test-setup'` (without gamut-tests) | Warning | Should import `setupRtl` from `@skillsoft/gamut-tests`, not directly from `component-test-setup` — the gamut-tests wrapper adds `MockGamutProvider` automatically | -| `new GamutProvider` or ` { }; ``` -**For colors, `theme.colors[key]` is usually enough — it works with aliases and doesn't need a second lookup step.** `theme.colors[key]` (including semantic aliases like `'primary'` or `'background-current'`) returns a live CSS variable reference (`var(--colors-key)`), which the browser resolves through the normal light/dark cascade. This works as a plain attribute value on DOM-rendered elements — including SVG presentation attributes like `stroke`/`fill` — exactly like `RadialProgress` does it in production: `stroke={theme.colors['background-current']}` (`packages/gamut/src/RadialProgress/index.tsx`). Reach for this first; it's simpler and it's what real Gamut components actually do for imperative SVG color. +**For colors, `theme.colors[key]` is usually enough — it works with aliases and doesn't need a second lookup step.** `theme.colors[key]` (including semantic aliases like `'primary'` or `'background-current'`) returns a live CSS variable reference (`var(--color-key)`), which the browser resolves through the normal light/dark cascade. This works as a plain attribute value on DOM-rendered elements — including SVG presentation attributes like `stroke`/`fill` — exactly like `RadialProgress` does it in production: `stroke={theme.colors['background-current']}` (`packages/gamut/src/RadialProgress/index.tsx`). Reach for this first; it's simpler and it's what real Gamut components actually do for imperative SVG color. **The exception**: a `var(...)` string doesn't mean anything to a consumer outside the DOM/CSS rendering pipeline — canvas 2D `fillStyle`, WebGL, or any color-math (contrast calculations, blending) that needs the actual resolved value. For those, use `useColorModes()` instead of bare `useTheme()` — but its `getColorValue()` only accepts a **raw palette key** (`hyper-500`, `navy-800`, …), not an alias: `getColorValue('primary')` silently returns `undefined`, since aliases are never merged into the raw-key map `getColorValue` reads. Resolve the alias first with `isColorAlias`, exactly like `packages/gamut-styles/src/Background.tsx` does before computing contrast: diff --git a/packages/gamut-brand/README.md b/packages/gamut-brand/README.md index d186a9f393..0e4f18af14 100644 --- a/packages/gamut-brand/README.md +++ b/packages/gamut-brand/README.md @@ -35,7 +35,7 @@ That writes `src/theme/acme/`: | File | What it is | | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | `values.ts` | The palette, roles, content modes and the brand's CSS as typed constants. `createBrandTheme` takes this module | -| `tokens.css` | `--colors-*` and `--gradient-*` custom properties for this brand only, starting on `:root` in its initial mode | +| `tokens.css` | `--color-*` and `--gradient-*` custom properties for this brand only, starting on `:root` in its initial mode | | `palette.tokens.json`, `light.tokens.json`, `dark.tokens.json` | DTCG 2025.10 for Figma and other tools. Each color is OKLCH with its hex alongside | Check the files in, like any generated source. Then build the theme from them: @@ -175,12 +175,12 @@ yarn workspace @skillsoft/gamut-styles validate:tokens # full report for gamut ## Naming -- Primitives: `--colors-palette--`, for example `--colors-palette-primary-800`. Not for components; use roles. -- Translucent primitives: `--colors-palette-primary-600-a6` (6% alpha), `--colors-black-a60`. -- Roles: `--colors-`, for example `--colors-action-primary`. +- Primitives: `--color-palette--`, for example `--color-palette-primary-800`. Not for components; use roles. +- Translucent primitives: `--color-palette-primary-600-a6` (6% alpha), `--color-black-a60`. +- Roles: `--color-`, for example `--color-action-primary`. - `white` and `black` keep their bare names (boundary tokens). -The `--colors-` prefix on primitives is there because variance's `addColors` always emits `--colors-`. One name for both the Emotion and CSS routes beat the shorter `--palette-*`. +The `--color-` prefix on primitives is there because variance's `addColors` always emits `--color-`. One name for both the Emotion and CSS routes beat the shorter `--palette-*`. ## Known gaps diff --git a/packages/gamut-brand/src/__tests__/system.test.ts b/packages/gamut-brand/src/__tests__/system.test.ts index 76df1725d4..565c8777c9 100644 --- a/packages/gamut-brand/src/__tests__/system.test.ts +++ b/packages/gamut-brand/src/__tests__/system.test.ts @@ -122,7 +122,7 @@ describe('color system', () => { 'primary', ]); expect(gradientCssVars(ocd.gradients.light['surface-brand'])).toContain( - 'radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300)' + 'radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300)' ); }); diff --git a/packages/gamut-brand/src/emit.ts b/packages/gamut-brand/src/emit.ts index 5722819049..96e30b8d4b 100644 --- a/packages/gamut-brand/src/emit.ts +++ b/packages/gamut-brand/src/emit.ts @@ -115,7 +115,7 @@ export const gradientCssVars = (gradient: Gradient) => .map(({ ref, radius, at }) => { const stops = FALLOFF.map( ([pos, alpha]) => - `color-mix(in oklab, var(--colors-${paletteKey(ref)}) ${Number( + `color-mix(in oklab, var(--color-${paletteKey(ref)}) ${Number( (alpha * 100).toFixed(2) )}%, transparent) ${pos}%` ).join(', '); diff --git a/packages/gamut-brand/src/generate.ts b/packages/gamut-brand/src/generate.ts index 20965b5d6f..a19fadd6a0 100644 --- a/packages/gamut-brand/src/generate.ts +++ b/packages/gamut-brand/src/generate.ts @@ -40,10 +40,10 @@ const FORMAT = 'css/gamut-variables'; * * Mode blocks also get: * - `color-scheme`, so native controls and scrollbars follow the mode; - * - `color: var(--colors-text-default)`, because `color` inherits as a computed + * - `color: var(--color-text-default)`, because `color` inherits as a computed * value — without it, text under a nested `[data-color-mode]` keeps the * parent mode's color (ColorMode sets it on its wrapper for the same reason); - * - a default `--colors-background-current`, which ColorMode sets at runtime + * - a default `--color-background-current`, which ColorMode sets at runtime * and a CSS-only subtree needs from somewhere. */ StyleDictionary.registerFormat({ @@ -68,8 +68,8 @@ StyleDictionary.registerFormat({ const modeLines = mode ? [ ` color-scheme: ${mode};`, - ' color: var(--colors-text-default);', - ' --colors-background-current: var(--colors-surface-default);', + ' color: var(--color-text-default);', + ' --color-background-current: var(--color-surface-default);', ] : []; return `${header}${options.selector} {\n${[ @@ -96,7 +96,7 @@ const cssBlock = async ( platforms: { css: { transforms: ['name/kebab', 'color/oklch'], - prefix: 'colors', + prefix: 'color', files: [ { destination: 'unused.css', diff --git a/packages/gamut-brand/src/roundTrip.ts b/packages/gamut-brand/src/roundTrip.ts index 1b87f5c550..b076aef415 100644 --- a/packages/gamut-brand/src/roundTrip.ts +++ b/packages/gamut-brand/src/roundTrip.ts @@ -46,7 +46,7 @@ export const parseTokensCss = ( slot, Object.fromEntries( GRADES.map((grade) => { - const p = oklch(palette[`--colors-palette-${slot}-${grade}`]); + const p = oklch(palette[`--color-palette-${slot}-${grade}`]); return [grade, { grade, l: p.l, c: p.c, h: p.h, hex: '' }]; }) ), @@ -61,12 +61,12 @@ export const parseTokensCss = ( Object.fromEntries( ROLES.map((r) => { const ref = - decls[`--colors-${r.token}`]?.match(/^var\((--[\w-]+)\)$/); + decls[`--color-${r.token}`]?.match(/^var\((--[\w-]+)\)$/); if (!ref) throw new Error(`${r.token} (${mode}) is not a var()`); const value: ResolvedValue = { ...oklch(palette[ref[1]]), hex: '', - key: ref[1].replace(/^--colors-/, ''), + key: ref[1].replace(/^--color-/, ''), }; return [r.token, value]; }) diff --git a/packages/gamut-docs/astro.config.mjs b/packages/gamut-docs/astro.config.mjs index 5a29b58baf..e8053cbded 100644 --- a/packages/gamut-docs/astro.config.mjs +++ b/packages/gamut-docs/astro.config.mjs @@ -94,7 +94,10 @@ export default defineConfig({ baseUrl: 'https://github.com/Codecademy/skillsoft-gamut/edit/main/packages/gamut-docs/', }, - customCss: ['./src/styles/gamut-core-theme.css'], + customCss: [ + '@skillsoft/gamut-styles/tokens.css', + './src/styles/gamut-theme.css', + ], plugins: [ starlightSidebarTopics( [ diff --git a/packages/gamut-docs/src/content/docs/components/actions/Buttons/cta-button.mdx b/packages/gamut-docs/src/content/docs/components/actions/Buttons/cta-button.mdx index ebbf83aabe..f9ce99ca81 100644 --- a/packages/gamut-docs/src/content/docs/components/actions/Buttons/cta-button.mdx +++ b/packages/gamut-docs/src/content/docs/components/actions/Buttons/cta-button.mdx @@ -30,7 +30,7 @@ Use this for a single, high-visibility marketing action — the offset shadow an - **Anything other than the single most important action on the page** — use [FillButton](/components/actions/buttons/fill-button/) instead. - **An icon alongside the label** — `CTAButton` doesn't support the `icon`/`iconPosition` props the other buttons do; use [FillButton](/components/actions/buttons/fill-button/) if an inline icon is required. - **Icon-only actions** — use [IconButton](/components/actions/buttons/icon-button/) instead; it requires an accessible name via its `tip` prop. -- **Outside its color-mode context** — don't place a light-mode button on a navy background; wrap the surface in `Background` instead of styling around it. +- **Outside its color-mode context** — don't place a light-mode button on a dark background; wrap the surface in `Background` instead of styling around it. ### Anatomy diff --git a/packages/gamut-docs/src/content/docs/components/actions/Buttons/fill-button.mdx b/packages/gamut-docs/src/content/docs/components/actions/Buttons/fill-button.mdx index 8ff9ed6fef..211bc417ec 100644 --- a/packages/gamut-docs/src/content/docs/components/actions/Buttons/fill-button.mdx +++ b/packages/gamut-docs/src/content/docs/components/actions/Buttons/fill-button.mdx @@ -33,7 +33,7 @@ Use this for primary actions. Include a leading or trailing icon from our mini i - **Low-emphasis, inline actions** — use [TextButton](/components/actions/buttons/text-button/) instead. - **Icon-only actions** — use [IconButton](/components/actions/buttons/icon-button/) instead; it requires an accessible name via its `tip` prop. - **Marketing / high-visibility CTAs** — use [CTAButton](/components/actions/buttons/cta-button/) instead. -- **Outside its color-mode context** — don't place a light-mode button on a navy background; wrap the surface in `Background` instead of styling around it. +- **Outside its color-mode context** — don't place a light-mode button on a dark background; wrap the surface in `Background` instead of styling around it. ### Anatomy diff --git a/packages/gamut-docs/src/content/docs/components/actions/Buttons/icon-button.mdx b/packages/gamut-docs/src/content/docs/components/actions/Buttons/icon-button.mdx index 11dc87a327..7c00899037 100644 --- a/packages/gamut-docs/src/content/docs/components/actions/Buttons/icon-button.mdx +++ b/packages/gamut-docs/src/content/docs/components/actions/Buttons/icon-button.mdx @@ -30,7 +30,7 @@ Use this for secondary or space-constrained actions with a recognizable icon and - **A visible label fits** — use [TextButton](/components/actions/buttons/text-button/), [StrokeButton](/components/actions/buttons/stroke-button/), or [FillButton](/components/actions/buttons/fill-button/) instead; don't reach for an icon-only button just to save space if a label would fit. - **Marketing / high-visibility CTAs** — use [CTAButton](/components/actions/buttons/cta-button/) instead. -- **Outside its color-mode context** — don't place a light-mode button on a navy background; wrap the surface in `Background` instead of styling around it. +- **Outside its color-mode context** — don't place a light-mode button on a dark background; wrap the surface in `Background` instead of styling around it. ### Anatomy diff --git a/packages/gamut-docs/src/content/docs/components/actions/Buttons/stroke-button.mdx b/packages/gamut-docs/src/content/docs/components/actions/Buttons/stroke-button.mdx index acedbc1ef8..21df320012 100644 --- a/packages/gamut-docs/src/content/docs/components/actions/Buttons/stroke-button.mdx +++ b/packages/gamut-docs/src/content/docs/components/actions/Buttons/stroke-button.mdx @@ -31,7 +31,7 @@ Use this for secondary actions. Include a leading or trailing icon from our mini - **Low-emphasis, inline actions** — use [TextButton](/components/actions/buttons/text-button/) instead. - **Icon-only actions** — use [IconButton](/components/actions/buttons/icon-button/) instead; it requires an accessible name via its `tip` prop. - **Marketing / high-visibility CTAs** — use [CTAButton](/components/actions/buttons/cta-button/) instead. -- **Outside its color-mode context** — don't place a light-mode button on a navy background; wrap the surface in `Background` instead of styling around it. +- **Outside its color-mode context** — don't place a light-mode button on a dark background; wrap the surface in `Background` instead of styling around it. ### Anatomy diff --git a/packages/gamut-docs/src/content/docs/components/actions/Buttons/text-button.mdx b/packages/gamut-docs/src/content/docs/components/actions/Buttons/text-button.mdx index 2978300e1b..145c7911b7 100644 --- a/packages/gamut-docs/src/content/docs/components/actions/Buttons/text-button.mdx +++ b/packages/gamut-docs/src/content/docs/components/actions/Buttons/text-button.mdx @@ -32,7 +32,7 @@ Use this for tertiary actions. Include a leading or trailing icon from our mini - **Secondary / outlined actions** — use [StrokeButton](/components/actions/buttons/stroke-button/) instead. - **Icon-only actions** — use [IconButton](/components/actions/buttons/icon-button/) instead; it requires an accessible name via its `tip` prop. - **Marketing / high-visibility CTAs** — use [CTAButton](/components/actions/buttons/cta-button/) instead. -- **Outside its color-mode context** — don't place a light-mode button on a navy background; wrap the surface in `Background` instead of styling around it. +- **Outside its color-mode context** — don't place a light-mode button on a dark background; wrap the surface in `Background` instead of styling around it. ### Anatomy diff --git a/packages/gamut-docs/src/content/docs/components/containers/card.mdx b/packages/gamut-docs/src/content/docs/components/containers/card.mdx index 09c710b9e6..a99cbce47d 100644 --- a/packages/gamut-docs/src/content/docs/components/containers/card.mdx +++ b/packages/gamut-docs/src/content/docs/components/containers/card.mdx @@ -1,6 +1,6 @@ --- title: Card -description: A contained surface with background color variants, optional shadow/pattern treatments, and hover behavior. +description: A contained surface with two variants, optional shadow/pattern treatments, and hover behavior. --- import FigmaEmbed from '~/components/FigmaEmbed.astro'; @@ -14,8 +14,8 @@ Use `Card` to present a piece of information as a distinct, contained surface, w **Best practices:** -- Use `variant="default"` (the default) for a background that follows the current color mode automatically; use `white`/`yellow`/`beige` inside a light-mode surface, or `navy`/`hyper` inside a dark-mode surface, when a static color is what's needed. -- Add `isInteractive` when wrapping `Card` in an `Anchor` — it applies a `'md'` border radius and a hover shadow effect, and a card with a pattern loses its pattern on hover. +- Use `variant="default"` (the default) for a card on `surface-raised`, which follows the color mode. Use `variant="brand"` for a featured card on the brand gradient. Every card has a `border-subtle` hairline. The old color variants (`white`, `beige`, `navy`, `yellow`, `hyper`) are gone; for a dark card, wrap it in ``. +- Add `isInteractive` when wrapping `Card` in an `Anchor`. It applies an `'md'` border radius and the theme's raised shadow, and on hover a `state-hover` layer and a deeper shadow; a card with a pattern loses its pattern on hover. A card that isn't interactive has no shadow. - `borderRadius` defaults to `'none'` (non-interactive) or `'md'` (`isInteractive`), and can be overridden — the outline/pattern shadow automatically matches whatever `borderRadius` is set. **When NOT to use:** @@ -34,25 +34,23 @@ The shadow/pattern treatment (`shadow`) always renders along the bottom edge plu Wrap `Card` in an `Anchor` and add `isInteractive` to get the hover shadow and `'md'` border radius: - + ## Prop Reference ### Variant - - - + + ### Shadow - - - - + + + ### Border radius `borderRadius` defaults to `'none'`, or `'md'` when `isInteractive` is set, and can be overridden independently of both: - + diff --git a/packages/gamut-docs/src/content/docs/components/data-display/bar-chart.mdx b/packages/gamut-docs/src/content/docs/components/data-display/bar-chart.mdx index e984aeddfd..7fc89eeb87 100644 --- a/packages/gamut-docs/src/content/docs/components/data-display/bar-chart.mdx +++ b/packages/gamut-docs/src/content/docs/components/data-display/bar-chart.mdx @@ -33,7 +33,7 @@ Use `BarChart` to visualize comparative data across categories, as a horizontal 4. **Scale/value axis** — the minimum is always 0; dividers and the maximum are adjustable via `scaleInterval`/`maxScaleValue`. 5. **Series one value** 6. **Series two value** (optional, via `seriesTwoValue`) — creates the stacked effect. -7. **Series one bar** — defaults to the text color; gains an automatic white/navy border for contrast when needed. +7. **Series one bar** — defaults to the text color; gains an automatic light or dark border for contrast when needed. 8. **Series two bar** — defaults to the primary color; same automatic border rule. ## Usage examples diff --git a/packages/gamut-docs/src/content/docs/concepts/best-practices.md b/packages/gamut-docs/src/content/docs/concepts/best-practices.md index 470334b8e5..d480fab140 100644 --- a/packages/gamut-docs/src/content/docs/concepts/best-practices.md +++ b/packages/gamut-docs/src/content/docs/concepts/best-practices.md @@ -7,7 +7,7 @@ For best practices specific to one component — like alerts, errors, or confirm ## Prefer semantic tokens over raw values -Access colors through Gamut's semantic aliases (`text`, `background`, `primary`, `secondary`) rather than raw color values — see [Color modes](/concepts/color-modes/) for why. Aliases guarantee you get the right color for the right theme and color mode, with the right types and states. +Access colors through Gamut's color roles (`text-default`, `surface-raised`, `action-primary` and the rest) rather than raw values or palette colors; see [Color modes](/concepts/color-modes/) for why. Roles give you the right color for the theme and color mode, with the right types and states. [Color system](/concepts/color-system/#pick-a-role-by-its-job) lists which role fits which job. ```tsx import { css } from '@skillsoft/gamut-styles'; @@ -17,7 +17,7 @@ import styled from '@emotion/styled'; const Box = styled.div(css({ p: 4 })); // A semantic color, not a raw one -const OtherCoolThing = styled.div(css({ color: 'primary', p: 4 })); +const OtherCoolThing = styled.div(css({ color: 'action-primary', p: 4 })); ``` `variant` and `states` extend the same idea to whole sets of styles — see [Compose and variants](/foundations/system-props/compose-and-variants/) for the full API. diff --git a/packages/gamut-docs/src/content/docs/concepts/color-modes.md b/packages/gamut-docs/src/content/docs/concepts/color-modes.md index 47fa30082d..f9b9617f6c 100644 --- a/packages/gamut-docs/src/content/docs/concepts/color-modes.md +++ b/packages/gamut-docs/src/content/docs/concepts/color-modes.md @@ -1,22 +1,31 @@ --- title: Color modes -description: How light/dark color mode works conceptually, distinct from theming. +description: How light and dark mode work, and how they combine with a brand. --- -Gamut components are built on semantic color aliases, not raw color values. Each alias names what a color is _used for_, not what it looks like: +Gamut components use color roles, not color values. Each role names a job, not a look: -- `text` — the standard color for all type. -- `background` — the base background color. -- `primary` — the color for interactive elements with a primary action. -- `secondary` — the color for interactive elements with a secondary action. +- `text-default`, for body text and headings. +- `surface-default`, for the page. +- `surface-raised`, for cards, menus, dialogs and fields. +- `action-primary`, for the main interactive fill, links and focus rings. -Building components against these aliases, instead of specific values, guarantees: +Every role points at a palette color once for light mode and once for dark mode. A color mode is the choice between those two. Switching the mode switches every role at once, so a component built on roles works in both modes with no extra code. The full list of roles is on the [Color system](/concepts/color-system/#roles) page. -- Components work correctly in any context, without extra configuration. -- Color usage stays consistent and accessible between contexts. -- Code reads more meaningfully, since each alias hints at its own purpose. -- Configuration stays simple — swapping a color mode swaps every aliased value at once. +## Modes are HTML attributes -A color mode is the layer that resolves each alias to an actual value, for a light or dark context. For the exact values each alias resolves to, see [Themes](/foundations/themes/). For how to actually apply a color mode or build a component that adapts to it, see [Supporting dark mode](/guides/supporting-dark-mode/). +The `data-color-mode` attribute sets a mode, and the roles under it resolve in plain CSS. `ColorMode` sets the attribute for you: -This is distinct from [theming](/guides/theming-your-app/): a theme swaps which _palette_ Gamut draws from (Core, Admin, LX Studio); a color mode swaps _which half_ of that palette — light or dark — an alias resolves against. The two compose: the same alias resolves differently depending on both which theme and which color mode are active. +```tsx +import { ColorMode } from '@skillsoft/gamut-styles'; + +const Panel = ({ children }) => {children}; +``` + +Modes nest: a light section can hold a dark panel, which can hold a light card. Each mode block also sets the CSS `color-scheme`, so scrollbars and native form controls follow the mode. A page starts in its brand's initial mode, which is light for every brand but Platform, with nothing set on ``. + +## Modes and brands + +A brand decides which palette the roles draw from: Skillsoft's, Original Codecademy's, and so on. A mode decides which of that brand's two mappings is active. The two combine: `action-primary` is a different color in each brand and each mode, but it always means the main action. + +Each theme carries one brand, and a page carries one brand's colors. See [Themes](/foundations/themes/) for the brands Gamut ships, and [Supporting dark mode](/guides/supporting-dark-mode/) for how to apply a mode or build a component that adapts to it. diff --git a/packages/gamut-docs/src/content/docs/concepts/color-system.md b/packages/gamut-docs/src/content/docs/concepts/color-system.md new file mode 100644 index 0000000000..8dfce4d579 --- /dev/null +++ b/packages/gamut-docs/src/content/docs/concepts/color-system.md @@ -0,0 +1,342 @@ +--- +title: Color system +description: How Gamut generates its colors from a few brand hues, checks them, and ships them as roles for light and dark mode. +--- + +Gamut's colors come from a generator in `@skillsoft/gamut-brand`. A brand supplies a few hues. The generator turns them into a palette, maps the palette onto named roles for light and dark mode, checks every pairing for contrast, and writes the result as CSS, JSON and TypeScript. Components and app code use the role names. `@skillsoft/gamut-styles` ships the result for Gamut's own brands, so an app on one of them never runs the generator. A team that wants its own colors runs it at build time; see [Build your own brand](#build-your-own-brand). + +## How it works + +Each step feeds the next one: + +1. A brand names a hue for each slot. +2. The generator builds a palette of 11 grades per slot. +3. Roles point at palette colors, once per mode. +4. The build checks contrast and stops if anything fails. +5. The build writes each brand's `tokens.css`, DTCG JSON and TypeScript constants. +6. `GamutProvider` puts the theme's brand's `tokens.css` on the page. +7. HTML attributes switch the mode inside the page. + +The generator lives in `packages/gamut-brand/src/`, and the output for Gamut's brands is checked in at `packages/gamut-styles/src/tokens/generated//`. + +### Brand inputs + +A brand is a `BrandInput` object with a name and a hue for each of eight slots. A new brand needs only this object, with no hand-written theme or alias table. The slots are: + +- `neutral-light` and `neutral-dark`, for surfaces, text and borders +- `primary`, for actions, links and focus rings +- `accent` and `accent-alt`, for brand gradients and charts +- `danger`, `warning` and `success`, for status + +Only `primary` is required. A brand that leaves out its neutrals gets neutrals derived from the primary hue. A brand that leaves out a status or accent slot gets Gamut's default hue for it, so red still means error. + +The generator keeps only the hue of each input. `#3A10E5` means "this blue-violet hue", and the generator decides how light and how colorful each step is. + +A brand can also set `initialMode`, `'light'` or `'dark'`, the mode a page starts in. It defaults to `'light'`. + +```ts +export const originalCodecademyBrand: BrandInput = { + name: 'originalCodecademy', + hues: { + 'neutral-light': '#FFF0E5', + 'neutral-dark': '#10162F', + primary: '#3A10E5', + accent: '#FFD300', + // ... + }, +}; +``` + +When a brand has to keep an exact color the generator wouldn't produce, it can add overrides. An override pins a palette step to a hex value, points a role at a different palette color in one mode, or moves a gradient's colors to another slot. Original Codecademy uses overrides to keep its exact yellow and to make dark mode's primary action yellow. Its navy and beige aren't pinned: exact, they carry far more chroma than the generated surfaces next to them, so the generated steps at their hues are used instead. Overrides go through the same checks as everything else. + +Five brands ship today: + +- `skillsoft`, the default, which replaces Percipio. Its theme is `skillsoftTheme`: Percipio's fonts, font weights and resting shadow, with colors generated from the Skillsoft brand's hues. +- `originalCodecademy`, the old Core theme rebuilt as a brand. Its theme is `originalCodecademyTheme`. +- `admin`, `platform` and `lxStudio`, the other old themes rebuilt the same way. Their themes keep their old names: `adminTheme`, `platformTheme` and `lxStudioTheme`. `percipioTheme` is removed; use `skillsoftTheme` instead. + +Each rebuilt brand takes its colors from what its old theme showed in each job, and keeps that theme's fonts and weights. Shadows are drawn in the shadow roles: Original Codecademy keeps old Core's hard offset, and every other brand uses a soft shadow. The `platform` brand starts in dark mode, and `platformTheme` keeps its `editor-*` code editor colors, which aren't part of the generated system. + +### Palette + +Each slot becomes a ramp of 11 grades, from `100` (lightest) to `1100` (darkest). The generator works in [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch), a way of writing a color as lightness, chroma (how colorful it is) and hue. OKLCH lightness matches how bright people see a color, so two colors with the same lightness look equally light whatever their hue. + +Every grade has a fixed lightness, and that lightness is the same in every slot and every brand. Chroma is a share of the most color a screen can show at that lightness and hue. Because lightness is fixed, the contrast between two grades barely changes from brand to brand: `primary-800` on `neutral-light-100` has close to the same contrast whatever the primary hue is. That is what lets every brand share one role mapping. + +Palette colors are [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) named `--color-palette--`, for example `--color-palette-primary-800`. A few steps also come in translucent versions, such as `--color-palette-primary-600-a6` at 6% opacity. `--color-white` and `--color-black` sit outside the ramps. Palette colors exist for the system to build roles from. Components don't use them. + +### Roles + +A role names a job and points at a palette color in each mode. There are 45 roles: + +| Family | Roles | Used for | +| ----------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | +| `surface-*` | `default`, `raised`, `sunken`, `success`, `warning`, `error`, `brand`, `brand-subtle` | Anything with a background: the page, cards, wells, status tints | +| `text-*` | `default`, `subtle`, `inverse`, `success`, `warning`, `error` | Text and icons | +| `border-*` | `strong`, `default`, `subtle` | Borders and dividers | +| `action-*` | `primary`, `danger` and `neutral`, each with `-hover` and `-pressed`; `disabled` | Interactive fills and inks: buttons, links, toggles | +| `state-*` | `hover`, `pressed`, `selected` | Translucent layers over elements that have no fill of their own | +| `viz-*` | `1` to `8` (categorical), `seq-1` to `seq-4` (sequential) | Charts | +| `shadow-*` | `key`, `ambient`, `scrim` | Shadow colors and the dimmed layer behind a modal | + +Each role has one job. `surface-raised` is the lighter surface step: cards, menus, dialogs and form fields, and flat sections with a border. How high something sits comes from its shadow, not its fill. The mapping is the same for every brand: `text-subtle` is `neutral-dark-800` in light mode and `neutral-light-400` in dark mode on every brand. Only the palette under it changes. + +Roles are custom properties named `--color-`, for example `--color-action-primary`. The two brand surfaces also have a gradient. `--color-surface-brand` is the flat fallback color, and `--gradient-surface-brand` is the gradient to paint over it. The same goes for `surface-brand-subtle`. + +The shadow roles hold only color. Every elevation shadow has two layers, `shadow-key` for the tight edge and `shadow-ambient` for the soft falloff, and the elevation supplies the offset and blur. Raised and hover differ in geometry, not color. `shadow-scrim` is the dimmed layer behind a modal. The shadow alphas are design's current values and may still be tuned. + +### Checks + +The generator refuses to write a brand's files if a check fails, in either mode. It checks that: + +- every text role reaches a 4.5:1 [contrast ratio](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) on the surfaces it's meant for; +- every border, action and chart role that carries meaning reaches 3:1, the [non-text contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) minimum; +- the translucent `state-*` roles still meet those minimums once they're laid over each surface; +- `state-pressed` looks visibly different from `state-hover` on every surface; +- 204 text and icon pairings inside 25 real components, such as an `Alert` icon on its tint, meet their minimum. + +`border-subtle`, `action-disabled` and the `shadow-*` roles are exempt from contrast: the first is decorative, the second marks an inactive control, and a shadow isn't something to read. Separation of the three status colors for people with color-vision deficiencies is measured and reported, but doesn't fail the build. + +The generator runs every check a second time on the values read back out of the brand's own `tokens.css`, so what ships is what was checked. To see the full report for Gamut's brands, run: + +```sh +yarn workspace @skillsoft/gamut-styles validate:tokens +``` + +### Outputs + +Each brand gets its own set of three outputs. No file holds more than one brand: + +| Output | Import | For | +| ------------ | ------------------------------------------------------------------------- | --------------------------------------------------------------- | +| `tokens.css` | `@skillsoft/gamut-styles/tokens/.css` | The brand's colors as custom properties | +| DTCG JSON | `@skillsoft/gamut-styles/tokens//{palette,light,dark}.tokens.json` | Tools outside JavaScript, such as Figma plugins and native apps | +| TS constants | `@skillsoft/gamut-styles/tokens` | Code that needs the values or the role table itself | + +`@skillsoft/gamut-styles/tokens.css` is the default brand's file, `skillsoft`. + +The JSON follows the [Design Tokens Community Group](https://www.designtokens.org/) (DTCG) format, a shared JSON format for design tokens. There is one file each for the palette, light roles and dark roles, and each color is OKLCH with its hex value alongside. The TypeScript entry exports the default brand's `palette`, `roles`, `gradients`, `contentModes` and `tokensCss`, plus every brand under `brands`, such as `brands.originalCodecademy.palette`. It doesn't depend on React or Emotion. + +A brand's `tokens.css` puts every value inside a [cascade layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) called `tokens`, with the brand's palette and its initial mode on `:root`: + +```css +@layer reset, base, tokens, recipes, utilities; + +@layer tokens { + :root, + [data-brand='originalCodecademy'] { + --color-palette-primary-800: oklch(0.4115 0.2344 274.1); + /* ... */ + } + :root, + [data-color-mode='light'] { + --color-text-default: var(--color-palette-neutral-dark-1000); + /* ... */ + } + [data-color-mode='dark'] { + --color-action-primary: var(--color-palette-accent-300); + /* ... */ + } +} +``` + +A brand's overrides sit in its mode blocks, like Original Codecademy's yellow `action-primary` in dark mode in the previous example. + +Styles inside a layer lose to styles outside any layer, whatever the selector. Emotion's styles and your own unlayered CSS override a token value without needing a more specific selector. + +### How the colors reach the page + +A theme built on the color system carries its brand's `tokens.css` as a string, and `GamutProvider` injects it as an Emotion global style, the same way it injects its reset and typography styles. A React app gets its brand's colors without loading a file, starts in the brand's initial mode with no attributes on ``, and the colors are in the server-rendered HTML too. + +The theme's own colors are `var()` names like `var(--color-surface-raised)`, so `css()`, `variant()`, `states()` and system props keep working as they did before. + +If your app loads the brand's `tokens.css` itself, pass `useTokens={false}` to `GamutProvider` to skip the injected copy. Loading both does no harm, because the rules are identical. Pages without React or Emotion, such as plain HTML or email, can link the brand's `tokens.css` directly. + +### Modes and brands at runtime + +A mode switch is an HTML attribute. The `ColorMode` component sets two attributes on its element, `data-color-mode` and `data-brand`, and every role inside it points at its color for that mode, through plain CSS. It nests as deep as you need. Each mode block also sets [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme), so scrollbars and native form controls follow the mode. + +`data-brand` names the palette. A page carries one brand's CSS, the theme's, so every `ColorMode` inside it is in that brand, overrides included. Use `ColorMode`, or `Background` for a colored section; if you set the attributes by hand, set both on the same element. + +The `Background` component decides its content mode at build time. For each of the 90 opaque palette colors (the 88 ramp steps, white and black), the generator records whether light-mode or dark-mode content reads better on it. `Background` looks the answer up in that table instead of measuring contrast in the browser on every render. + +## Intended use + +### Pick a role by its job + +| Job | Role | +| ------------------------------------------- | ------------------------------------------------ | +| The page, a nav or a header | `surface-default` | +| A card, popover, menu, modal panel or field | `surface-raised` | +| An inset well or code block | `surface-sunken` | +| Body text and headings | `text-default` | +| Descriptions, metadata and helper text | `text-subtle` | +| Anything clickable | `action-*` | +| Hover and press on something with no fill | `state-hover`, `state-pressed`, `state-selected` | +| A border that carries meaning, like a field | `border-default` | +| A divider, or the edge of a floating panel | `border-subtle` | +| A shadow's two layers | `shadow-key`, `shadow-ambient` | +| The dimmed layer behind a modal | `shadow-scrim` | + +```tsx +import { Box, Text } from '@skillsoft/gamut'; + +const Card = () => ( + + Course progress + Updated 2 hours ago + +); +``` + +### Give raised surfaces a hairline + +In light mode `surface-raised` is too close to the page to see on its own, so anything on it takes a `border-subtle` hairline. Floating surfaces, such as menus, popovers, tooltips and toasts, add a shadow that separates them from whatever is underneath. Field outlines and control strokes carry meaning, so they stay `border-default`. + +`Card` has two variants: `default` on `surface-raised`, and `brand`, the featured card on the brand gradient. Every card has the hairline. An interactive card adds the raised shadow at rest and, on hover, the `state-hover` layer and a deeper shadow; its border doesn't change. + +### Use `text-inverse` on filled controls + +A label on a filled action, such as `action-primary`, uses `text-inverse` in either mode. `text-inverse` is only checked against `action-primary`, `action-neutral` and `action-danger`. + +```tsx + + Start lesson + +``` + +### Pair a status tint with a status ink + +A status message is a tint behind and an ink on top. An error box uses `surface-error` for the background and `text-error` for the icon and the message; each status ink clears text contrast on its own tint. A floating `Alert` takes the same ink on its border. Show warnings with an icon, not color alone. + +### Put colored sections inside `Background` + +`Background` paints a color and switches the mode inside it to whichever one reads better on that color. Inside, every role resolves in the new mode, so `text-default` stays readable without picking a mode by hand. + +```tsx +import { Background } from '@skillsoft/gamut-styles'; + +const PromoBand = ({ children }) => ( + + {children} + +); +``` + +### Use `viz-*` for charts + +Use `viz-1` to `viz-8` for categorical series and `viz-seq-1` to `viz-seq-4` for ordered steps from low to high. Don't rely on color alone to tell series apart; add labels, patterns or markers ([WCAG use of color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)). For the same reason, links keep their underline. + +### Use roles, never palette colors + +Write `bg="surface-raised"`, not `bg="palette-neutral-light-100"`. A palette color is the same in every mode, so it doesn't change when the mode does, and it breaks dark mode. + +### Set up an app + +A React app gets the colors from `GamutProvider`. Pass the theme for your brand: + +```tsx +import { + GamutProvider, + originalCodecademyTheme, +} from '@skillsoft/gamut-styles'; + +export const App = ({ children }) => ( + {children} +); +``` + +The page starts in that brand and its initial mode, `` included, with nothing to set on ``. + +Pages without React load the brand's file, such as `@skillsoft/gamut-styles/tokens/originalCodecademy.css`. + +## Build your own brand + +A team that needs its own colors builds a brand with `@skillsoft/gamut-brand`, the same tool that builds Gamut's. It runs at build time only, so install it as a dev dependency: + +```sh +yarn add -D @skillsoft/gamut-brand +``` + +Write the brand. Only `name` and `hues.primary` are required: + +```ts +// src/theme/acme.brand.ts +import { defineBrand } from '@skillsoft/gamut-brand'; + +export default defineBrand({ + name: 'acme', + hues: { primary: '#0A5CFF', accent: '#FFB000' }, +}); +``` + +Generate it, and check in the `src/theme/acme/` folder it writes: + +```sh +gamut-brand build src/theme/acme.brand.ts +``` + +Build the theme from the generated values, and pass it to `GamutProvider` like any other theme: + +```ts +import { + createBrandTheme, + fontWeightMediumTitle, + percipioFontFamily, + softElevation, +} from '@skillsoft/gamut-styles'; + +import * as values from './acme/values'; + +export const acmeTheme = createBrandTheme(values, { + name: 'acme', + fontFamily: percipioFontFamily, + fontWeight: fontWeightMediumTitle, + elevation: softElevation, +}); +``` + +Every brand has the same palette keys and the same 45 roles, so `acmeTheme` has the same type as Gamut's themes. System props, `css()`, `variant()` and `states()` stay typed, and `bg="surface-raisd"` fails to compile. `defineBrand` is typed too, so a misspelled slot or role fails. + +A brand that fails a check isn't written, and the error names the check, its worst value and where. Pick another hue, or pin the color with an override, and run the build again. + +To keep the files current, run `gamut-brand build src/theme/acme.brand.ts --watch` next to your dev server, and the same command with `--check` in CI. `--check` writes nothing and fails when the files are out of date, including after an upgrade of `@skillsoft/gamut-brand`. Keep `@skillsoft/gamut-brand` on the same version as `@skillsoft/gamut-styles`. + +## Compared with the old color system + +### What stays the same + +- Themes are still variance themes, and components still style with `css()`, `variant()`, `states()` and system props. Only the color names change. +- Components still use names, not values. The old themes already handed components `var()` names, and the new ones do the same. +- Color modes still work through CSS custom properties and still nest. An attribute drives them now instead of an injected class. +- `GamutProvider`, `ColorMode` and `Background` keep the same props, and `GamutProvider` still delivers the colors. +- The old look comes back as brands. Original Codecademy is old Core rebuilt from its navy, beige, hyper and yellow, with the same fonts and old Core's hard offset shadow. Admin, Platform and LX Studio are rebuilt the same way, under their old theme names. + +### What improves + +| | Old | New | +| ----------------- | ------------------------------------------------------- | ------------------------------------------------------------------- | +| Where values live | Emotion theme objects, written onto the page at runtime | One generated stylesheet per brand, injected once | +| Mode switch | Every alias for the mode written into a new class | One attribute | +| `Background` | Contrast math on every render | A table decided at build time | +| Accessibility | Colors picked by hand and never checked | Every role pairing and 204 component pairings checked at build time | +| Names | Ambiguous: `background` is both the page and a card | One job each: `surface-default`, `surface-raised` | +| New brand | A hand-written theme and alias table | A few hues and `gamut-brand build`, checked automatically | +| Who can read it | JavaScript only | CSS, DTCG JSON and TypeScript from one source | +| Color space | Hex, tuned by hand per step | OKLCH with fixed lightness per grade, hex alongside in the JSON | + +### What costs more + +- Every color name changes. `text` becomes `text-default` and `primary` becomes `action-primary`. Some old names split into several roles depending on where they're used: `background` becomes `surface-raised` on a card and `surface-default` on the page, so a person has to choose each time. The type check fails on every old name until it's moved. +- Rebuilt themes aren't pixel-identical. Roles use the same grades on every brand, so some colors move noticeably even when the brand hues match the old theme. Overrides cover colors that have to stay exact. +- Colors that only one old theme had are gone, such as LX Studio's `lxStudioBgPrimary`. Use the role for the job instead. +- The browser floor goes up. `tokens.css` uses `oklch()`, [`color-mix()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix), `@layer` and [container query units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units) with no hex fallback. Browsers older than about Chrome and Edge 111, Safari 16.2 or Firefox 113 get no color. Check [oklch support](https://caniuse.com/mdn-css_types_color_oklch) and [color-mix support](https://caniuse.com/mdn-css_types_color_color-mix) against your app's browser list. +- Any unlayered CSS overrides a token. That's on purpose, but a stray global rule can now change a color. +- Some pieces are missing. Shadow geometry lives in each brand's theme for now, and floating surfaces borrow the raised shadow until there's an overlay depth. The chart colors use the order solved for Skillsoft's hues, so another brand gets that order without it being re-solved for its own hues. +- The Emotion theme carries sRGB copies of each color, because the [polished](https://polished.js.org/) library can't read OKLCH. Code that reads a color from the theme in JavaScript gets a very slightly different value from what's on screen. diff --git a/packages/gamut-docs/src/content/docs/concepts/index.md b/packages/gamut-docs/src/content/docs/concepts/index.md index fc02130aff..67dd34d79a 100644 --- a/packages/gamut-docs/src/content/docs/concepts/index.md +++ b/packages/gamut-docs/src/content/docs/concepts/index.md @@ -5,6 +5,7 @@ description: Background on how and why Gamut is built the way it is. Explanation: how and why the system is built the way it is, for when you want to understand rather than do. +- [Color system](/concepts/color-system/) - [Color modes](/concepts/color-modes/) - [Brand](/concepts/brand/) - [Best practices](/concepts/best-practices/) diff --git a/packages/gamut-docs/src/content/docs/foundations/design-tokens.md b/packages/gamut-docs/src/content/docs/foundations/design-tokens.md index c52561b437..8389f20317 100644 --- a/packages/gamut-docs/src/content/docs/foundations/design-tokens.md +++ b/packages/gamut-docs/src/content/docs/foundations/design-tokens.md @@ -3,15 +3,18 @@ title: Design tokens description: Color, spacing, radius, and other token values, and the keys used to access them. --- -Every theme exposes the same token categories, each accessible on the Emotion theme object via its own key. Exact values differ per theme — see [Themes](/foundations/themes/) for the available theme palettes, or open Storybook's Theme Switcher (paintbrush icon in the toolbar) to browse live values for any theme/color-mode combination. For the full, exhaustive listing of every value in a category — every color swatch, every spacing step, every border radius — see that theme's own page under Foundations → Theme in Storybook (for example, [Core Theme](https://gamut.codecademy.com/?path=/docs/foundations-theme-core-theme--docs)) rather than a static copy here. +Every theme exposes the same token categories, each on the Emotion theme object under its own key. Exact values differ per theme; see [Themes](/foundations/themes/) for the themes Gamut ships, or open Storybook's Theme Switcher (paintbrush icon in the toolbar) to browse live values for any theme and color mode. ## Color — `colors` -- Standard colors — the color atoms Codecademy designs should draw from. -- Solid swatches — accessed as `colors['-']`. -- Navy/white swatches — semi-transparent except for a few fixed weights (`100`, `navy-800`, `navy-900`); the white weights only show in dark mode, and the navy weights only in light mode. +Colors come from the [color system](/concepts/color-system/), in two layers: -See [Color modes](/concepts/color-modes/) for the semantic aliases (`text`, `background`, `primary`, `secondary`) built on top of these raw values. +- **Roles**, such as `surface-raised`, `text-default` and `action-primary`. Each names a job and resolves to a different color in light and dark mode. Components and app code use roles. +- **Palette colors**, named `palette--`, such as `palette-primary-800`, plus `white` and `black`. A palette color is the same in every mode. Roles point at these; components shouldn't. + +Each color is also a CSS custom property with a `--color-` prefix, such as `var(--color-surface-raised)`, for stylesheets and pages without React. + +See [Color modes](/concepts/color-modes/) for how roles follow the mode. ## Typography @@ -34,16 +37,16 @@ See [Color modes](/concepts/color-modes/) for the semantic aliases (`text`, `bac ## Elevation -- `elevation` — how a surface like Card renders shadow and lift. Three states — `rest`, `hover`, `hoverMirrored` — each with a `shadow` and a `transform` token, accessed as `elevation['-']`. `hoverMirrored` is for a surface that casts its shadow to the right instead of the left. Shadow colors reference the `shadow-primary` alias, so they follow color mode automatically; a theme can supply its own elevation scale — Skillsoft, for example, swaps the hard offset shadow for a soft, blurred one with no lift. +- `elevation` — how a surface like Card renders shadow and lift. Three states, `rest`, `hover` and `hoverMirrored`, each with a `shadow` and a `transform` token, accessed as `elevation['-']`. `hoverMirrored` is for a surface that casts its shadow to the right instead of the left. Every shadow is drawn in two roles, `shadow-key` (the tight contact layer) and `shadow-ambient` (the soft falloff), so shadows follow color mode automatically. Each theme supplies its own geometry: Original Codecademy keeps a hard offset, and the other themes use a soft shadow with no lift. ## Accessing tokens directly -Reach for a token directly only when a [system prop](/foundations/system-props/) can't express what you need — most components should consume tokens through system props instead. +Reach for a token directly only when a [system prop](/foundations/system-props/) can't express what you need. Most components should consume tokens through system props instead. ```tsx // on the theme prop of any styled component const styles = styled.div` - color: ${({ theme }) => theme.colors.blue}; + color: ${({ theme }) => theme.colors['text-subtle']}; `; // or imported directly diff --git a/packages/gamut-docs/src/content/docs/foundations/eslint-rules.md b/packages/gamut-docs/src/content/docs/foundations/eslint-rules.md index 27716af235..536da66442 100644 --- a/packages/gamut-docs/src/content/docs/foundations/eslint-rules.md +++ b/packages/gamut-docs/src/content/docs/foundations/eslint-rules.md @@ -55,11 +55,11 @@ Suggests the `themed()` utility over reaching directly into `theme` inside a sty ```tsx // Instead of: const StyledDiv = styled.div` - color: ${({ theme }) => theme.colors.primary}; + color: ${({ theme }) => theme.colors['action-primary']}; `; // Prefer: -const StyledBox = styled(Box)(css({ color: themed('colors.primary') })); +const StyledBox = styled(Box)(css({ color: themed('colors.action-primary') })); ``` ## Configuration diff --git a/packages/gamut-docs/src/content/docs/foundations/system-props/compose-and-variants.md b/packages/gamut-docs/src/content/docs/foundations/system-props/compose-and-variants.md index a73d4fb01c..dbb7f4b59f 100644 --- a/packages/gamut-docs/src/content/docs/foundations/system-props/compose-and-variants.md +++ b/packages/gamut-docs/src/content/docs/foundations/system-props/compose-and-variants.md @@ -66,7 +66,7 @@ const Anchor = styled.a( variant({ variants: { interface: { - color: 'navy', + color: 'text-default', '&:hover': { textDecoration: 'none', border: '2px solid currentColor' }, }, }, diff --git a/packages/gamut-docs/src/content/docs/foundations/system-props/prop-groups.md b/packages/gamut-docs/src/content/docs/foundations/system-props/prop-groups.md index 71dd781d0c..42b486411a 100644 --- a/packages/gamut-docs/src/content/docs/foundations/system-props/prop-groups.md +++ b/packages/gamut-docs/src/content/docs/foundations/system-props/prop-groups.md @@ -42,12 +42,16 @@ const TextExample = styled.p(system.typography); ## Color -Color props control foreground, background, and border colors, restricted to the theme's color palette. `bg` is a shorthand for background color. +Color props control foreground, background, and border colors, restricted to the theme's colors. Use [color roles](/concepts/color-system/#pick-a-role-by-its-job), which follow the color mode. `bg` is a shorthand for background color. ```tsx const ColorExample = styled.div(system.color); -; +; ``` ## Border diff --git a/packages/gamut-docs/src/content/docs/foundations/themes.md b/packages/gamut-docs/src/content/docs/foundations/themes.md index f6349c9cd3..a946ebec03 100644 --- a/packages/gamut-docs/src/content/docs/foundations/themes.md +++ b/packages/gamut-docs/src/content/docs/foundations/themes.md @@ -1,20 +1,31 @@ --- title: Themes -description: The theme palettes available (Core, Admin, LX Studio and Platform) and their values. +description: The themes Gamut ships (Skillsoft, Original Codecademy, Admin, Platform and LX Studio) and how they relate to brands. --- -Every Emotion component in Gamut has typed access to the current theme's tokens, without any extra imports — most commonly through [system props](/foundations/system-props/) or the `theme` prop. +Every Emotion component in Gamut has typed access to the current theme's tokens, without any extra imports, most commonly through [system props](/foundations/system-props/) or the `theme` prop. ## Available themes -- **Core** — Codecademy's own public-facing theme. -- **Admin** — the internal admin/back-office theme. -- **LX Studio** — the theme for LX Studio. -- **Platform** — the shared learning-platform theme. +Each theme is one brand of the [color system](/concepts/color-system/), plus that brand's fonts, font weights and shadows: + +| Theme | Brand | For | +| ------------------------- | -------------------- | --------------------------------------------------------------- | +| `skillsoftTheme` | `skillsoft` | The default. Replaces `percipioTheme` | +| `originalCodecademyTheme` | `originalCodecademy` | Codecademy's public-facing product, rebuilt from the Core theme | +| `adminTheme` | `admin` | Internal admin and back-office tools | +| `platformTheme` | `platform` | The learning environment. Starts in dark mode | +| `lxStudioTheme` | `lxStudio` | LX Studio | + +`GamutProvider` uses `skillsoftTheme` when you don't pass one. Every theme has the same palette keys and the same roles, so they all share one type, `SkillsoftTheme`, and a component that type-checks against one works on all of them. + +`coreTheme` is still exported, on the old color names, until the move to roles is finished. Use `originalCodecademyTheme` for new work. + +A team that needs its own colors can build its own brand and theme; see [Creating a custom theme](/guides/creating-a-custom-theme/). ## Comparing themes live -Use Storybook's Theme Switcher (paintbrush icon in the toolbar) to preview any component across every theme, paired with the Color Mode selector to check both light and dark variants of each. This is the fastest way to see a token's actual resolved value — exact hex codes and scale values are theme-specific and aren't reproduced statically here. +Use Storybook's Theme Switcher (paintbrush icon in the toolbar) to preview any component in every theme, and the Color Mode selector to check light and dark for each. Exact color values are theme-specific and aren't reproduced here. ## Choosing a theme diff --git a/packages/gamut-docs/src/content/docs/getting-started/build-your-first-page.md b/packages/gamut-docs/src/content/docs/getting-started/build-your-first-page.md index f7c3eacdb9..50220b831f 100644 --- a/packages/gamut-docs/src/content/docs/getting-started/build-your-first-page.md +++ b/packages/gamut-docs/src/content/docs/getting-started/build-your-first-page.md @@ -11,19 +11,19 @@ It assumes you've completed [Installation](/getting-started/installation/) and h ## 1. Lay down a colored surface -`Background` paints a semantic color behind its children and keeps text inside it readable in both color modes. Start your page component with one: +`Background` paints a color role behind its children and keeps text inside it readable in both color modes. Start your page component with one: ```tsx title="WelcomePage.tsx" import { Background } from '@skillsoft/gamut-styles'; export const WelcomePage = () => ( - + {/* content goes here */} ); ``` -Run your app. You should see a full-width beige panel with 32px of padding and nothing in it yet. +Run your app. You should see a full-width panel, a step darker than the page, with 32px of padding and nothing in it yet. ## 2. Add a heading @@ -34,7 +34,7 @@ import { Background } from '@skillsoft/gamut-styles'; import { Text } from '@skillsoft/gamut'; export const WelcomePage = () => ( - + Welcome to Gamut @@ -42,7 +42,7 @@ export const WelcomePage = () => ( ); ``` -Refresh — you now have a styled heading sitting in the beige panel. +Refresh — you now have a styled heading sitting in the panel. ## 3. Arrange content in a grid @@ -54,7 +54,7 @@ import { Text } from '@skillsoft/gamut'; import { GridBox } from '@skillsoft/gamut'; export const WelcomePage = () => ( - + Welcome to Gamut @@ -87,7 +87,7 @@ import { GridBox } from '@skillsoft/gamut'; import { Text } from '@skillsoft/gamut'; export const WelcomePage = () => ( - + Welcome to Gamut @@ -120,7 +120,7 @@ export const WelcomePage = () => ( You should now have a page with: -- A beige background panel with consistent padding. +- A `surface-sunken` panel with consistent padding. - A page heading and supporting copy. - A responsive two-column layout that collapses to one column on narrow screens. - A card containing a secondary heading, copy, and a primary button that links to the component reference. diff --git a/packages/gamut-docs/src/content/docs/getting-started/installation.md b/packages/gamut-docs/src/content/docs/getting-started/installation.md index 10fe4402cc..be21f4d61c 100644 --- a/packages/gamut-docs/src/content/docs/getting-started/installation.md +++ b/packages/gamut-docs/src/content/docs/getting-started/installation.md @@ -48,10 +48,10 @@ render( `GamutProvider` does four things every Gamut app needs: -1. Wraps your app in the theme context. +1. Wraps your app in the theme context. Without a `theme` prop, it uses `skillsoftTheme`; see [Theming your app](/guides/theming-your-app/) to pick another. 2. Creates an Emotion cache with Gamut's plugins. -3. Injects global styles and CSS variables. -4. Sets the current color mode context and variables. +3. Injects global styles and the theme's brand colors as CSS variables. +4. Starts the page in the brand's initial color mode. For Next.js, do this in `_app.tsx`. For Gatsby, do it in both `gatsby-ssr.js` and `gatsby-browser.js` via `wrapRootElement`. @@ -70,11 +70,11 @@ Gamut components read their allowed props from your Emotion theme shape, so decl ```tsx title="theme.d.ts" import '@emotion/react'; -// Use whichever theme shape matches your app: `CoreTheme` or `PlatformTheme`. -import { CoreTheme } from '@skillsoft/gamut-styles'; +// Every Gamut theme shares this type, whichever one your app uses. +import type { SkillsoftTheme } from '@skillsoft/gamut-styles'; declare module '@emotion/react' { - export interface Theme extends CoreTheme {} + export interface Theme extends SkillsoftTheme {} } ``` @@ -87,7 +87,7 @@ import { Background } from '@skillsoft/gamut-styles'; import { Text } from '@skillsoft/gamut'; export const App = () => ( - + Hello World! ); diff --git a/packages/gamut-docs/src/content/docs/guides/creating-a-custom-theme.md b/packages/gamut-docs/src/content/docs/guides/creating-a-custom-theme.md index 35490b0d5a..6196cad583 100644 --- a/packages/gamut-docs/src/content/docs/guides/creating-a-custom-theme.md +++ b/packages/gamut-docs/src/content/docs/guides/creating-a-custom-theme.md @@ -1,163 +1,195 @@ --- title: Creating a custom theme -description: Build a custom theme with gamut-styles' createTheme builder. +description: Build your own brand with @skillsoft/gamut-brand and turn it into a theme with createBrandTheme. --- ## When to reach for this -Most apps should [choose an existing theme](/guides/theming-your-app/) rather than build a new one — reach for a custom theme only for a genuinely new product surface that doesn't fit Core, Admin, LX Studio or Platform. +Most apps should [choose an existing theme](/guides/theming-your-app/). Build your own only when a product needs its own colors, for example to white-label Gamut for a customer. -## The `createTheme` builder +A custom theme has two parts: -Themes are built with `createTheme` from `@skillsoft/variance`, giving you type-safe autocomplete, automatic CSS variable generation, built-in light/dark color mode support, and full compatibility with existing Gamut components: +- **A brand**: a few hues, which `@skillsoft/gamut-brand` turns into a palette, light and dark roles, and the CSS for them, all checked for contrast. +- **A theme**: the brand's generated values plus fonts, font weights and shadows, put together by `createBrandTheme` from `@skillsoft/gamut-styles`. -```tsx -import { createTheme } from '@skillsoft/variance'; - -const myTheme = createTheme({ - ...baseTheme, - fontFamily: customFontFamily, -}) - .addColors(colorPalette) - .addColorModes('light', colorModeConfig) - .addScale('customProperty', scaleFunction) // only for new scales - .addName('my-theme') - .build(); +The result has the same type as Gamut's own themes, so every component, system prop and `css()` call works and stays type-checked. See [Color system](/concepts/color-system/) for how the generator works. + +## 1. Install the generator + +`@skillsoft/gamut-brand` runs at build time only, so install it as a dev dependency, on the same version as `@skillsoft/gamut-styles`: + +```sh +yarn add -D @skillsoft/gamut-brand ``` -## 1. Start from `coreTheme` +## 2. Write the brand -Extend `coreTheme` unless you're certain you have a full replacement for every token — see [Themes](/foundations/themes/) for what Core already provides: +Only `name` and `hues.primary` are required: -```tsx -import { createTheme } from '@skillsoft/variance'; -import { coreTheme } from '@skillsoft/gamut-styles'; +```ts +// src/theme/acme.brand.ts +import { defineBrand } from '@skillsoft/gamut-brand'; -const myCustomTheme = createTheme({ - ...coreTheme, - // your overrides here +export default defineBrand({ + name: 'acme', + hues: { primary: '#0A5CFF', accent: '#FFB000' }, }); ``` -## 2. Define a color palette +`name` becomes the brand's `data-brand` attribute and its output folder: letters, digits and `_`, starting with a letter. -Build an object of your brand's raw colors — usually a `brand` object, plus a numbered `50`–`900` scale per hue: +`hues` takes a hue in degrees, or a color to take the hue from, for each of eight slots: `primary`, `neutral-light`, `neutral-dark`, `accent`, `accent-alt`, `danger`, `warning` and `success`. Slots you leave out are filled in: neutrals from the primary's hue, and status and accent slots from Gamut's defaults, so red still means error. -```tsx -const myColorPalette = { - brand: { - primary: '#004C54', - secondary: '#000000', - black: '#000000', - white: '#FFFFFF', - }, - kelly: { - 50: '#E6FFF7', - 500: '#00B388', - 900: '#004D3D', - // ...the rest of the scale - }, - success: '#10B981', - warning: '#F59E0B', - error: '#DC2626', -}; - -const myTheme = createTheme({ ...coreTheme }).addColors(myColorPalette); +Only a color's hue is kept. `#0A5CFF` means "this blue's hue", and the generator sets how light and how colorful each grade is, which is what keeps contrast the same for every brand. To start from one of Gamut's brands, spread it: + +```ts +import { defineBrand, skillsoftBrand } from '@skillsoft/gamut-brand'; + +export default defineBrand({ + ...skillsoftBrand, + name: 'acme', + hues: { ...skillsoftBrand.hues, primary: '#0A5CFF' }, +}); ``` -## 3. Map colors to semantic tokens per color mode +### Optional settings -`.addColorModes` maps your palette onto the same semantic aliases Gamut components already read from — `text`, `background`, `primary`, `secondary`, `border`, and the rest — once per color mode. See [Color modes](/concepts/color-modes/) for what each alias means: +- `initialMode: 'dark'` starts pages in dark mode. The default is `'light'`. +- `overrides` keeps colors the generator wouldn't produce. Use them sparingly; each one still goes through every check. -```tsx -const myTheme = createTheme({ ...coreTheme }) - .addColors(myColorPalette) - .addColorModes('light', { - light: { - text: { _: 'brand-black', secondary: 'silver-700' }, - background: { _: 'brand-white', primary: 'kelly-50' }, - primary: { _: 'brand-primary', hover: 'kelly-700' }, - border: { primary: 'kelly-500', secondary: 'kelly-200' }, - // ... - }, - dark: { - text: { _: 'brand-white', secondary: 'silver-400' }, - background: { _: 'brand-black', primary: 'midnight-800' }, - primary: { _: 'brand-accent', hover: 'silver-400' }, - border: { primary: 'midnight-600', secondary: 'midnight-700' }, - // ... - }, - }); +```ts +overrides: { + // An exact color for one palette step. Pick the grade nearest its lightness. + palette: { 'accent-300': '#FFB000' }, + // A role pointed at another palette color in one mode. + roles: { dark: { 'action-primary': { slot: 'accent', grade: 300 } } }, + // A gradient's circles moved to another slot. + gradients: { 'surface-brand': { accent: 'accent-alt' } }, +}, ``` -## 4. Override or add scales +`defineBrand` is typed, so a misspelled slot, role or palette step fails to compile. -Override an existing scale — `spacing`, `fontFamily`, `fontWeight`, and the rest — directly in the initial `createTheme()` object. Reach for `.addScale()` only for a genuinely new scale that doesn't already exist on `coreTheme`: +## 3. Generate the files -```tsx -const myTheme = createTheme({ - ...coreTheme, - fontFamily: { ...coreTheme.fontFamily, base: '"Roboto", sans-serif' }, - spacing: { ...coreTheme.spacing, xs: 4, sm: 8, md: 16 }, -}) - .addColors(myColorPalette) - .addColorModes('light', colorModeConfig) - .addScale('shadows', ({ colors }) => ({ - sm: `0 1px 2px ${colors['shadow-primary']}`, - md: `0 4px 6px ${colors['shadow-secondary']}`, - })); +```sh +gamut-brand build src/theme/acme.brand.ts +``` + +This writes `src/theme/acme/`: + +| File | What it is | +| -------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| `values.ts` | The palette, roles and the brand's CSS as typed constants, for `createBrandTheme` | +| `tokens.css` | The brand's `--color-*` and `--gradient-*` custom properties, and nothing else | +| `palette.tokens.json`, `light.tokens.json`, `dark.tokens.json` | DTCG JSON for Figma and other design tools | + +Check the folder in, like any generated source. + +A brand that fails a contrast check isn't written. The error names the check, its worst value and where: + +``` +refusing to generate "acme"; failed checks: + text-inverse ≥ 4.5:1: 1.04 at light: action-primary + action-primary ≥ 3:1: 1.04 at light: surface-sunken ``` -## 5. Convert scales to CSS variables +Pick another hue, or change the override that caused it, and build again. -`.createScaleVariables` turns a scale into real CSS custom properties, for better runtime performance: +## 4. Keep the files current + +Add the build to your scripts: + +```json title="package.json" +{ + "scripts": { + "brand": "gamut-brand build src/theme/acme.brand.ts", + "brand:watch": "gamut-brand build src/theme/acme.brand.ts --watch", + "brand:check": "gamut-brand build src/theme/acme.brand.ts --check" + } +} +``` + +Run `--watch` next to your dev server. It regenerates when the brand file, or a file next to it, changes, and only rewrites files whose contents changed. Run `--check` in CI: it writes nothing, and fails when the files are out of date, including after an upgrade of `@skillsoft/gamut-brand`. `--out ` writes somewhere other than a folder named after the brand. + +## 5. Build the theme + +`createBrandTheme` takes the generated values and everything about the brand that isn't color: + +```ts +// src/theme/index.ts +import { + createBrandTheme, + fontWeightMediumTitle, + percipioFontFamily, + softElevation, +} from '@skillsoft/gamut-styles'; + +import * as values from './acme/values'; + +export const acmeTheme = createBrandTheme(values, { + name: 'acme', + fontFamily: percipioFontFamily, + fontWeight: fontWeightMediumTitle, + elevation: softElevation, +}); +``` + +| Option | What it sets | +| ------------- | ----------------------------------------------------------------------------------------------------------------- | +| `name` | The theme's name | +| `fontFamily` | Every font family key Gamut uses. `percipioFontFamily` is Skillsoft's | +| `fontWeight` | Every font weight key, including `title`. `fontWeightMediumTitle` sets titles to 500 | +| `elevation` | How shadows are drawn. `softElevation` is the soft shadow; `offsetElevation` is Original Codecademy's hard offset | +| `borderRadii` | Optional. Defaults to Gamut's radii | + +Shadow colors come from the brand's `shadow-key` and `shadow-ambient` roles, so an elevation works with any brand. + +## 6. Use it + +Pass the theme to `GamutProvider`. It puts the brand's CSS on the page, so the app loads nothing else: ```tsx -const myTheme = createTheme({ ...coreTheme }) - .addColors(myColorPalette) - .addColorModes('light', colorModeConfig) - .addScale('shadows', shadowConfig) - .createScaleVariables('shadows') // creates --shadow-sm, --shadow-md, ... - .addName('my-custom-theme') - .build(); + + + +``` + +Declare the Emotion theme type once, as for any Gamut app. Every brand theme shares the `SkillsoftTheme` type: + +```ts title="emotion.d.ts" +import '@emotion/react'; +import type { SkillsoftTheme } from '@skillsoft/gamut-styles'; + +declare module '@emotion/react' { + export interface Theme extends SkillsoftTheme {} +} ``` -## Using your theme +`` then compiles, and `` doesn't. + +A page without React loads the generated `acme/tokens.css` instead. -Follow [Installation](/getting-started/installation/) to wire up `GamutProvider` with your new theme, the same way you would with any existing one. +## Previewing in Gamut's Storybook -To preview it against real components in Storybook before shipping, register it in the theme switcher: +To preview a brand against real components in Gamut's own Storybook, add its theme to the theme switcher: ```tsx -// packages/styleguide/.storybook/theming/GamutThemeProvider.tsx +// packages/.storybook/theming/GamutThemeProvider.tsx const themeMap = { - core: coreTheme, - admin: adminTheme, - lxStudio: lxStudioTheme, - 'your-theme-here': yourCustomTheme, + // ...Gamut's themes + acme: acmeTheme, } as const; ``` -```tsx -// .storybook/preview.ts -theme: { - name: 'Theme', - defaultValue: 'core', - toolbar: { - icon: 'paintbrush', - items: [ - { value: 'core', title: 'Core' }, - { value: 'your-theme-here', title: 'Custom Theme' }, - ], - }, -}, +```ts +// packages/.storybook/preview.ts, under globalTypes.theme.toolbar.items +{ value: 'acme', title: 'Acme' }, ``` ## Best practices -- Replace every token, or extend from `coreTheme` — a partial theme breaks compatibility with existing components. -- Override an existing scale in `createTheme()`'s initial object; reach for `.addScale()` only for scales that don't already exist. -- Map your palette to semantic color names (`primary`, `secondary`, and the rest), not just raw brand colors. -- Provide both light and dark color modes. -- Convert frequently-used scales to CSS variables for performance. -- Test the theme against real Gamut components before shipping it. +- Supply as few hues as you need. Every hue you supply is one more you have to keep in step with your brand. +- Prefer a hue over an override. Overrides are for a color that has to be exact, such as a logo color. +- Use roles in your own code too, never palette colors. A palette color doesn't change with the mode. +- Check both modes in Storybook before shipping. diff --git a/packages/gamut-docs/src/content/docs/guides/supporting-dark-mode.md b/packages/gamut-docs/src/content/docs/guides/supporting-dark-mode.md index 3a2333aaf1..3e4a187022 100644 --- a/packages/gamut-docs/src/content/docs/guides/supporting-dark-mode.md +++ b/packages/gamut-docs/src/content/docs/guides/supporting-dark-mode.md @@ -3,7 +3,7 @@ title: Supporting dark mode description: Make a page or component work correctly in both color modes. --- -Gamut components are built on semantic color aliases (`text`, `background`, `primary`, `secondary`, and more — see [Color modes](/concepts/color-modes/) for why), so most components support both color modes automatically, with no extra work. This guide covers the parts that need you to actually do something. +Gamut components are built on color roles (`text-default`, `surface-raised`, `action-primary` and the rest; see [Color modes](/concepts/color-modes/) for why), so most components support both color modes with no extra work. This guide covers the parts that need you to do something. ## Setting a color mode @@ -22,26 +22,30 @@ const Page = ({ children }) => {children}; ## Setting a background without guessing the mode -Use `` instead of picking a color mode by hand for a section's background — it checks the contrast between the background color you give it and the current mode's text color, and switches to an accessible mode automatically if the combination wouldn't pass: +Use `` instead of picking a color mode by hand for a section's background. It paints the color you give it and switches the mode inside to whichever one's text reads better on that color: ```tsx import { Background } from '@skillsoft/gamut-styles'; -const Page = ({ children }) => {children}; +const Page = ({ children }) => ( + {children} +); ``` -`` establishes a new color context for everything inside it, so you can safely nest one background inside another — a dark section can contain its own lighter card, for example, and each still resolves its own aliases correctly. +The choice is made at build time: for every opaque palette color, the color system records whether light-mode or dark-mode content reads better on it, and `Background` looks the answer up. -The color a `` resolves to is exposed as the `background-current` theme variable — reach for it when a descendant needs to reference its ancestor's background directly, for example to simulate transparency against it. +`` establishes a new color context for everything inside it, so you can safely nest one background inside another. A dark section can contain its own lighter card, and each still resolves its own roles correctly. + +The color a `` paints is exposed as the `background-current` theme variable (`--color-background-current` in CSS). Reach for it when a descendant needs to reference its ancestor's background directly, for example to simulate transparency against it. ## Reading the current mode in JS -Reach for these only when you need the mode value itself, not just correctly-themed styles: +Reach for these only when you need the mode value itself, not just correctly themed styles: -- `useColorModes()` — returns `[mode, modeColors, modes, getColorValue]`, for when you need every mode's values, not just the active one. -- `useCurrentMode(mode?)` — returns just the active mode key, or lets you override it. -- `usePrefersDarkMode()` — returns a boolean from the reader's OS-level `prefers-color-scheme: dark` media query, independent of whatever `` is actually active. +- `useColorModes()` returns `[mode, modeColors, modes, getColorValue]`, for when you need every mode's values, not just the active one. +- `useCurrentMode(mode?)` returns just the active mode key, or lets you override it. +- `usePrefersDarkMode()` returns a boolean from the reader's OS-level `prefers-color-scheme: dark` media query, independent of whatever `` is active. ## Checking your work -Toggle color mode with Storybook's Color Mode selector while reviewing a component or page — a component built entirely from semantic aliases and system props should need no other changes to read correctly in both modes. If something looks wrong in one mode only, that's usually a raw color value that should have been a semantic alias instead. +Toggle color mode with Storybook's Color Mode selector while reviewing a component or page. A component built entirely from roles and system props should need no other changes to read correctly in both modes. If something looks wrong in one mode only, it's usually a palette color or a raw value that should have been a role. A palette color, such as `palette-neutral-light-100`, is the same in every mode, so it doesn't change when the mode does. diff --git a/packages/gamut-docs/src/content/docs/guides/theming-your-app.md b/packages/gamut-docs/src/content/docs/guides/theming-your-app.md index 7bb853d736..20338449fa 100644 --- a/packages/gamut-docs/src/content/docs/guides/theming-your-app.md +++ b/packages/gamut-docs/src/content/docs/guides/theming-your-app.md @@ -3,25 +3,36 @@ title: Theming your app description: Choose and wire up a Gamut theme for your application. --- -Every Emotion component in Gamut has typed access to the current theme's tokens, without any extra imports — most directly through the `theme` prop every styled component receives, or through the `theme` object imported straight from `@skillsoft/gamut-styles`. +Every Emotion component in Gamut has typed access to the current theme's tokens, without any extra imports: through the `theme` prop every styled component receives, or through the `theme` object imported from `@skillsoft/gamut-styles`. ## 1. Choose a theme -See [Themes](/foundations/themes/) for the available palettes (Core, Admin, LX Studio, Platform) and what each one is for. Use Storybook's Theme Switcher (paintbrush icon in the toolbar) to preview your components across every theme before committing to one, paired with the Color Mode selector to check both light and dark variants. +See [Themes](/foundations/themes/) for the themes Gamut ships (Skillsoft, Original Codecademy, Admin, Platform, LX Studio) and what each one is for. Use Storybook's Theme Switcher (paintbrush icon in the toolbar) to preview your components in each theme before committing to one, and the Color Mode selector to check light and dark. ## 2. Wire up the theme -`GamutProvider` (covered in [Installation](/getting-started/installation/)) already puts the right theme's values on Emotion's context for you. From there, reach a token: +Pass the theme to `GamutProvider` (covered in [Installation](/getting-started/installation/)). It puts the theme's values on Emotion's context and its brand's colors on the page: + +```tsx +import { + GamutProvider, + originalCodecademyTheme, +} from '@skillsoft/gamut-styles'; + +export const App = ({ children }) => ( + {children} +); +``` + +Without a `theme`, `GamutProvider` uses `skillsoftTheme`. From there, reach a token: ```tsx import { css } from '@skillsoft/gamut-styles'; import styled from '@emotion/styled'; -// Preferred: through a system prop -const Box = styled.div(css({ bg: 'navy-400', p: 4 })); - -// Preferred: through a ColorMode semantic alias -const OtherCoolThing = styled.div(css({ color: 'primary', p: 4 })); +// Preferred: through a system prop, with a color role +const Panel = styled.div(css({ bg: 'surface-raised', p: 4 })); +const Callout = styled.div(css({ color: 'action-primary', p: 4 })); ``` ```tsx @@ -29,14 +40,14 @@ const OtherCoolThing = styled.div(css({ color: 'primary', p: 4 })); import styled from '@emotion/styled'; const styles = styled.div` - color: ${({ theme }) => theme.colors.blue}; + color: ${({ theme }) => theme.colors['text-subtle']}; `; ``` -Prefer the first form — a [system prop](/foundations/system-props/) — whenever one exists for what you're styling; it's type-checked against the active theme's scales, so a typo or an out-of-range value is a compile error instead of a silent fallback. +Prefer the first form, a [system prop](/foundations/system-props/), whenever one exists for what you're styling. It's type-checked against the theme's scales, so a typo or an out-of-range value is a compile error instead of a silent fallback. ## 3. Check your work across themes -Re-open the Theme Switcher and step through every theme your app might run under, in both color modes. A component built entirely from semantic aliases and system props should need no extra work to look right everywhere; if something looks off in one theme, that's usually a sign a raw value snuck in somewhere it should have been a token. +Re-open the Theme Switcher and step through every theme your app might run under, in both color modes. A component built entirely from roles and system props should need no extra work to look right everywhere. If something looks off in one theme, a raw value or a palette color usually snuck in where a role belonged. -See [Design tokens](/foundations/design-tokens/) for the full list of token categories, and [Color modes](/concepts/color-modes/) for how color mode composes with theme choice. +See [Design tokens](/foundations/design-tokens/) for the token categories, [Color modes](/concepts/color-modes/) for how color mode combines with a brand, and [Color system](/concepts/color-system/#pick-a-role-by-its-job) for which role fits which job. diff --git a/packages/gamut-docs/src/styles/gamut-core-theme.css b/packages/gamut-docs/src/styles/gamut-core-theme.css deleted file mode 100644 index 50cc69e2ca..0000000000 --- a/packages/gamut-docs/src/styles/gamut-core-theme.css +++ /dev/null @@ -1,84 +0,0 @@ -/** - * Custom Starlight color theme derived from Gamut's `coreTheme` - * (packages/gamut-styles/src/themes/core.ts). - * - * Starlight themes are just overrides of its CSS custom properties (see - * https://starlight.astro.build/guides/css-and-tailwind/#theming). Each - * variable below is paired with the coreTheme color-mode token it stands in - * for, so this file can be re-derived if coreTheme's palette changes. - * - * Only colors are wired up here — coreTheme's typography (fontFamily) relies - * on licensed, non-self-hosted fonts (Apercu/Suisse) that this site doesn't - * load, so Starlight's default font stack is left in place. - */ - -:root[data-theme="light"] { - /* gray-1..7: coreTheme's light-mode navy scale, most-to-least intense */ - --sl-color-gray-1: #0a0d1c; /* navy-900 — text.accent */ - --sl-color-gray-2: #10162f; /* navy-800 — text._ (body text) */ - --sl-color-gray-3: rgba(16, 22, 47, 0.86); /* navy-700 */ - --sl-color-gray-4: rgba(16, 22, 47, 0.75); /* navy-600 — border.secondary */ - --sl-color-gray-5: rgba( - 16, - 22, - 47, - 0.28 - ); /* navy-300 — border.tertiary (hairline) */ - --sl-color-gray-6: rgba( - 16, - 22, - 47, - 0.12 - ); /* navy-200 — subtle bg tint (inline code) */ - --sl-color-gray-7: rgba( - 16, - 22, - 47, - 0.04 - ); /* navy-100 — background.selected */ - - /* white/black are Starlight's text/bg endpoints, inverted per mode */ - --sl-color-white: #0a0d1c; /* navy-900 — heading text */ - --sl-color-black: #ffffff; /* background._ — page background */ - - /* accent: primary._ / primary.hover (hyper) */ - --sl-color-accent-low: color-mix(in srgb, #3a10e5 10%, white); - --sl-color-accent: #3a10e5; /* hyper-500 */ - --sl-color-accent-high: color-mix(in srgb, #3a10e5 65%, black); - - /* background.primary — a warm chrome tone behind the top nav, distinct - from the white content canvas (background._) */ - --sl-color-bg-nav: #fff0e5; /* beige */ -} - -:root[data-theme="dark"] { - /* gray-1..6: coreTheme's dark-mode white scale, most-to-least intense */ - --sl-color-gray-1: #ffffff; /* white — text._ */ - --sl-color-gray-2: rgba(255, 255, 255, 0.8); /* white-700 */ - --sl-color-gray-3: rgba(255, 255, 255, 0.65); /* white-600 — text.secondary */ - --sl-color-gray-4: rgba(255, 255, 255, 0.5); /* white-500 — border.disabled */ - --sl-color-gray-5: rgba( - 255, - 255, - 255, - 0.2 - ); /* white-300 — border.tertiary (hairline) */ - --sl-color-gray-6: rgba( - 255, - 255, - 255, - 0.09 - ); /* white-200 — subtle bg tint (inline code) */ - - --sl-color-white: #ffffff; /* text._ — heading text */ - --sl-color-black: #10162f; /* navy-800 — background._ (page background) */ - - /* accent: primary._ / primary.hover (yellow) */ - --sl-color-accent-low: color-mix(in srgb, #ffd300 20%, black); - --sl-color-accent: #ffd300; /* yellow-500 */ - --sl-color-accent-high: color-mix(in srgb, #ffd300 85%, white); - - /* background.primary — a deeper chrome tone behind the top nav, distinct - from the navy-800 content canvas (background._) */ - --sl-color-bg-nav: #0a0d1c; /* navy-900 */ -} diff --git a/packages/gamut-docs/src/styles/gamut-theme.css b/packages/gamut-docs/src/styles/gamut-theme.css new file mode 100644 index 0000000000..2e33181bd9 --- /dev/null +++ b/packages/gamut-docs/src/styles/gamut-theme.css @@ -0,0 +1,82 @@ +/* + * Starlight's colors, taken from the Skillsoft brand of Gamut's color system. + * + * `@skillsoft/gamut-styles/tokens.css`, loaded before this file, puts the + * brand's palette on `:root`. Starlight switches modes with `data-theme`, not + * Gamut's `data-color-mode`, so the roles' mode blocks don't apply here. + * Instead each Starlight variable points at the palette color its Gamut role + * uses in that mode, named in the comment beside it. If a role's mapping + * changes, update the line here. + * + * Starlight themes are overrides of its CSS custom properties + * (https://starlight.astro.build/guides/css-and-tailwind/#theming). Only + * colors are wired up; Skillsoft's fonts aren't loaded on this site, so + * Starlight's font stack stays. + */ + +:root[data-theme="light"] { + /* gray-1..7, most to least intense */ + /* border-strong */ + --sl-color-gray-1: var(--color-palette-neutral-dark-1100); + /* text-default */ + --sl-color-gray-2: var(--color-palette-neutral-dark-1000); + /* text-subtle */ + --sl-color-gray-3: var(--color-palette-neutral-dark-800); + /* border-default */ + --sl-color-gray-4: var(--color-palette-neutral-dark-600); + /* border-subtle */ + --sl-color-gray-5: var(--color-palette-neutral-dark-300); + /* surface-sunken */ + --sl-color-gray-6: var(--color-palette-neutral-light-200); + /* surface-default */ + --sl-color-gray-7: var(--color-palette-neutral-light-100); + + /* Starlight's text and background endpoints */ + /* text-default */ + --sl-color-white: var(--color-palette-neutral-dark-1000); + /* surface-default */ + --sl-color-black: var(--color-palette-neutral-light-100); + + --sl-color-accent-low: var(--color-palette-primary-100); + /* action-primary */ + --sl-color-accent: var(--color-palette-primary-800); + /* action-primary-pressed */ + --sl-color-accent-high: var(--color-palette-primary-1000); + + /* surface-raised */ + + --sl-color-bg-nav: var(--color-white); +} + +:root[data-theme="dark"] { + /* border-strong */ + --sl-color-gray-1: var(--color-palette-neutral-light-100); + /* text-default */ + --sl-color-gray-2: var(--color-palette-neutral-light-200); + /* text-subtle */ + --sl-color-gray-3: var(--color-palette-neutral-light-400); + /* border-default */ + --sl-color-gray-4: var(--color-palette-neutral-light-600); + /* border-subtle */ + --sl-color-gray-5: var(--color-palette-neutral-light-900); + /* surface-raised */ + --sl-color-gray-6: var(--color-palette-neutral-dark-1000); + /* surface-default */ + --sl-color-gray-7: var(--color-palette-neutral-dark-1100); + + /* border-strong */ + + --sl-color-white: var(--color-palette-neutral-light-100); + /* surface-default */ + --sl-color-black: var(--color-palette-neutral-dark-1100); + + --sl-color-accent-low: var(--color-palette-primary-1100); + /* action-primary */ + --sl-color-accent: var(--color-palette-primary-400); + /* action-primary-pressed */ + --sl-color-accent-high: var(--color-palette-primary-200); + + /* surface-sunken */ + + --sl-color-bg-nav: var(--color-black); +} diff --git a/packages/gamut-styles/src/ColorMode.tsx b/packages/gamut-styles/src/ColorMode.tsx index b77dfce3a4..2f7b04a317 100644 --- a/packages/gamut-styles/src/ColorMode.tsx +++ b/packages/gamut-styles/src/ColorMode.tsx @@ -69,7 +69,7 @@ export const modeColorProps = ({ const { colors } = theme; return serializeTokens( mapValues(theme?.modes[mode], (color) => colors[color]), - 'colors', + 'color', theme ).variables; }; @@ -204,7 +204,7 @@ export const ColorMode = forwardRef< variables: bg === undefined ? {} - : { '--colors-background-current': colors[bg] as string }, + : { '--color-background-current': colors[bg] as string }, }; } return serializeTokens( @@ -214,7 +214,7 @@ export const ColorMode = forwardRef< } return colors[color]; }), - 'colors', + 'color', theme ); }, [colors, mode, modes, theme, bg, fromTokensCss]); @@ -222,7 +222,7 @@ export const ColorMode = forwardRef< if (active === mode) { const vars = alwaysSetVariables ? variables - : pick(variables, ['--colors-background-current']); + : pick(variables, ['--color-background-current']); return ( { it('switches the default colormode when contrast standards are not met', () => { const { view } = renderView({ bg: 'palette-neutral-dark-1000' }); expect(view.getByTestId('content').parentElement).toHaveStyleRule( - '--colors-background-current', + '--color-background-current', theme.colors['palette-neutral-dark-1000'] ); @@ -61,12 +61,12 @@ describe('Background', () => { ), }); expect(view.getByTestId('content').parentElement).toHaveStyleRule( - '--colors-background-current', + '--color-background-current', theme.colors['palette-neutral-dark-1000'] ); expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule( - '--colors-background-current', + '--color-background-current', theme.colors['palette-neutral-light-200'] ); }); @@ -92,7 +92,7 @@ describe('Background', () => { it('it sets the current background color to the specified bg', () => { const { view } = renderView({ bg: 'palette-primary-200' }); expect(view.getByTestId('content').parentElement).toHaveStyleRule( - '--colors-background-current', + '--color-background-current', theme.colors['palette-primary-200'] ); }); @@ -100,7 +100,7 @@ describe('Background', () => { it('it sets the current background color to the specified bg when switch modes', () => { const { view } = renderView({ bg: 'palette-neutral-dark-1000' }); expect(view.getByTestId('content').parentElement).toHaveStyleRule( - '--colors-background-current', + '--color-background-current', theme.colors['palette-neutral-dark-1000'] ); }); diff --git a/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx b/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx index ba447f13d6..fbd448b1f7 100644 --- a/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx +++ b/packages/gamut-styles/src/__tests__/GamutProvider.test.tsx @@ -151,25 +151,25 @@ describe(GamutProvider, () => { it('injects tokens.css for a theme on the generated color system', () => { renderView({ theme: skillsoftTheme }); - expect(emotionCss()).toContain('--colors-palette-primary-800:'); + expect(emotionCss()).toContain('--color-palette-primary-800:'); }); it('does not inject tokens when configured not to', () => { renderView({ theme: skillsoftTheme, useTokens: false }); - expect(emotionCss()).not.toContain('--colors-palette-primary-800:'); + expect(emotionCss()).not.toContain('--color-palette-primary-800:'); }); it('does not inject tokens without globals', () => { renderView({ theme: skillsoftTheme, useGlobals: false }); - expect(emotionCss()).not.toContain('--colors-palette-primary-800:'); + expect(emotionCss()).not.toContain('--color-palette-primary-800:'); }); it('does not inject tokens for themes that do not carry them', () => { renderView(); - expect(emotionCss()).not.toContain('--colors-palette-primary-800:'); + expect(emotionCss()).not.toContain('--color-palette-primary-800:'); }); }); }); diff --git a/packages/gamut-styles/src/__tests__/stylingContract.test.tsx b/packages/gamut-styles/src/__tests__/stylingContract.test.tsx index f282d7b4fe..eba15e975e 100644 --- a/packages/gamut-styles/src/__tests__/stylingContract.test.tsx +++ b/packages/gamut-styles/src/__tests__/stylingContract.test.tsx @@ -70,7 +70,7 @@ const tokensCssVars = (mode: Mode, tokensCss: string): Vars => { }; const hasStaticValues = (theme: Theme) => - !Object.keys(theme._variables.root).some((k) => k.startsWith('--colors-')); + !Object.keys(theme._variables.root).some((k) => k.startsWith('--color-')); /* The variables in scope inside a `mode` subtree of `theme`. */ const varsFor = (theme: Theme, mode: Mode): Vars => @@ -198,7 +198,7 @@ describe.each(CASES)('%s, %s', (_, mode, theme) => { const vars = { ...varsFor(t, other), ...out }; const missing = namesOf(t).filter( (name) => - !isColor(out[`--colors-${name}`] ?? vars[`--colors-${name}`], vars) + !isColor(out[`--color-${name}`] ?? vars[`--color-${name}`], vars) ); expect(missing).toEqual([]); }); @@ -262,7 +262,7 @@ describe.each(CASES)('%s, %s', (_, mode, theme) => { const expected = t.colors[t.modes[mode][bg as never]]; let ok = true; try { - expect(el).toHaveStyleRule('--colors-background-current', expected); + expect(el).toHaveStyleRule('--color-background-current', expected); expect(el).toHaveStyleRule('background-color', resolvesToColor(vars)); } catch { ok = false; @@ -286,17 +286,17 @@ describe.each(CASES)('%s, %s', (_, mode, theme) => { if (t.contentModes) { expect(el.getAttribute('data-color-mode')).toBe(other); expect(el.getAttribute('data-brand')).toBe(t.brand); - expect(el).not.toHaveStyleRule(`--colors-${someName}`, expect.anything()); + expect(el).not.toHaveStyleRule(`--color-${someName}`, expect.anything()); } else { expect(el.getAttribute('data-color-mode')).toBeNull(); - expect(el).toHaveStyleRule(`--colors-${someName}`, expect.anything()); + expect(el).toHaveStyleRule(`--color-${someName}`, expect.anything()); } }); }); it('resolves each brand’s roles against its own palette', () => { const primary = (theme: Theme) => - resolveVars('var(--colors-action-primary)', varsFor(theme, 'light')); + resolveVars('var(--color-action-primary)', varsFor(theme, 'light')); /* Same lightness and grade, hyper's hue (274.1°) in place of Sapphire's. */ expect(primary(THEMES.originalCodecademy)).toBe( 'oklch(0.4115 0.2344 274.10)' diff --git a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap index 59352fa2c4..f6f30fd586 100644 --- a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap +++ b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap @@ -212,52 +212,52 @@ exports[`themes admin - theme shape 1`] = ` }, "_variables": { "mode": { - "--colors-action-danger": "var(--colors-palette-danger-800)", - "--colors-action-danger-hover": "var(--colors-palette-danger-900)", - "--colors-action-danger-pressed": "var(--colors-palette-danger-1000)", - "--colors-action-disabled": "var(--colors-palette-neutral-light-400)", - "--colors-action-neutral": "var(--colors-palette-neutral-dark-1000)", - "--colors-action-neutral-hover": "var(--colors-palette-neutral-dark-1100)", - "--colors-action-neutral-pressed": "var(--colors-black)", - "--colors-action-primary": "var(--colors-palette-primary-800)", - "--colors-action-primary-hover": "var(--colors-palette-primary-900)", - "--colors-action-primary-pressed": "var(--colors-palette-primary-1000)", - "--colors-background-current": "var(--colors-palette-neutral-light-100)", - "--colors-border-default": "var(--colors-palette-neutral-dark-600)", - "--colors-border-strong": "var(--colors-palette-neutral-dark-1100)", - "--colors-border-subtle": "var(--colors-palette-neutral-dark-300)", - "--colors-shadow-ambient": "var(--colors-palette-neutral-dark-1100-a12)", - "--colors-shadow-key": "var(--colors-palette-neutral-dark-1100-a16)", - "--colors-shadow-scrim": "var(--colors-black-a60)", - "--colors-state-hover": "var(--colors-palette-primary-600-a6)", - "--colors-state-pressed": "var(--colors-palette-primary-600-a9)", - "--colors-state-selected": "var(--colors-palette-primary-600-a8)", - "--colors-surface-brand": "var(--colors-palette-neutral-light-100)", - "--colors-surface-brand-subtle": "var(--colors-palette-neutral-light-100)", - "--colors-surface-default": "var(--colors-palette-neutral-light-100)", - "--colors-surface-error": "var(--colors-palette-danger-200)", - "--colors-surface-raised": "var(--colors-white)", - "--colors-surface-success": "var(--colors-palette-success-200)", - "--colors-surface-sunken": "var(--colors-palette-neutral-light-200)", - "--colors-surface-warning": "var(--colors-palette-warning-200)", - "--colors-text-default": "var(--colors-palette-neutral-dark-1000)", - "--colors-text-error": "var(--colors-palette-danger-900)", - "--colors-text-inverse": "var(--colors-palette-neutral-light-200)", - "--colors-text-subtle": "var(--colors-palette-neutral-dark-800)", - "--colors-text-success": "var(--colors-palette-success-900)", - "--colors-text-warning": "var(--colors-palette-warning-900)", - "--colors-viz-1": "var(--colors-palette-primary-800)", - "--colors-viz-2": "var(--colors-palette-accent-700)", - "--colors-viz-3": "var(--colors-palette-warning-700)", - "--colors-viz-4": "var(--colors-palette-accent-alt-600)", - "--colors-viz-5": "var(--colors-palette-success-600)", - "--colors-viz-6": "var(--colors-palette-danger-600)", - "--colors-viz-7": "var(--colors-palette-neutral-dark-1000)", - "--colors-viz-8": "var(--colors-palette-neutral-light-600)", - "--colors-viz-seq-1": "var(--colors-palette-primary-600)", - "--colors-viz-seq-2": "var(--colors-palette-primary-700)", - "--colors-viz-seq-3": "var(--colors-palette-primary-800)", - "--colors-viz-seq-4": "var(--colors-palette-primary-900)", + "--color-action-danger": "var(--color-palette-danger-800)", + "--color-action-danger-hover": "var(--color-palette-danger-900)", + "--color-action-danger-pressed": "var(--color-palette-danger-1000)", + "--color-action-disabled": "var(--color-palette-neutral-light-400)", + "--color-action-neutral": "var(--color-palette-neutral-dark-1000)", + "--color-action-neutral-hover": "var(--color-palette-neutral-dark-1100)", + "--color-action-neutral-pressed": "var(--color-black)", + "--color-action-primary": "var(--color-palette-primary-800)", + "--color-action-primary-hover": "var(--color-palette-primary-900)", + "--color-action-primary-pressed": "var(--color-palette-primary-1000)", + "--color-background-current": "var(--color-palette-neutral-light-100)", + "--color-border-default": "var(--color-palette-neutral-dark-600)", + "--color-border-strong": "var(--color-palette-neutral-dark-1100)", + "--color-border-subtle": "var(--color-palette-neutral-dark-300)", + "--color-shadow-ambient": "var(--color-palette-neutral-dark-1100-a12)", + "--color-shadow-key": "var(--color-palette-neutral-dark-1100-a16)", + "--color-shadow-scrim": "var(--color-black-a60)", + "--color-state-hover": "var(--color-palette-primary-600-a6)", + "--color-state-pressed": "var(--color-palette-primary-600-a9)", + "--color-state-selected": "var(--color-palette-primary-600-a8)", + "--color-surface-brand": "var(--color-palette-neutral-light-100)", + "--color-surface-brand-subtle": "var(--color-palette-neutral-light-100)", + "--color-surface-default": "var(--color-palette-neutral-light-100)", + "--color-surface-error": "var(--color-palette-danger-200)", + "--color-surface-raised": "var(--color-white)", + "--color-surface-success": "var(--color-palette-success-200)", + "--color-surface-sunken": "var(--color-palette-neutral-light-200)", + "--color-surface-warning": "var(--color-palette-warning-200)", + "--color-text-default": "var(--color-palette-neutral-dark-1000)", + "--color-text-error": "var(--color-palette-danger-900)", + "--color-text-inverse": "var(--color-palette-neutral-light-200)", + "--color-text-subtle": "var(--color-palette-neutral-dark-800)", + "--color-text-success": "var(--color-palette-success-900)", + "--color-text-warning": "var(--color-palette-warning-900)", + "--color-viz-1": "var(--color-palette-primary-800)", + "--color-viz-2": "var(--color-palette-accent-700)", + "--color-viz-3": "var(--color-palette-warning-700)", + "--color-viz-4": "var(--color-palette-accent-alt-600)", + "--color-viz-5": "var(--color-palette-success-600)", + "--color-viz-6": "var(--color-palette-danger-600)", + "--color-viz-7": "var(--color-palette-neutral-dark-1000)", + "--color-viz-8": "var(--color-palette-neutral-light-600)", + "--color-viz-seq-1": "var(--color-palette-primary-600)", + "--color-viz-seq-2": "var(--color-palette-primary-700)", + "--color-viz-seq-3": "var(--color-palette-primary-800)", + "--color-viz-seq-4": "var(--color-palette-primary-900)", }, "root": { "--elements-headerHeight": "4rem", @@ -276,8 +276,8 @@ exports[`themes admin - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--colors-border-strong)", - "2": "2px solid var(--colors-border-strong)", + "1": "1px solid var(--color-border-strong)", + "2": "2px solid var(--color-border-strong)", }, "brand": "admin", "breakpoints": { @@ -294,150 +294,150 @@ exports[`themes admin - theme shape 1`] = ` "xs": "@media only screen and (min-width: 480px)", }, "colors": { - "action-danger": "var(--colors-action-danger)", - "action-danger-hover": "var(--colors-action-danger-hover)", - "action-danger-pressed": "var(--colors-action-danger-pressed)", - "action-disabled": "var(--colors-action-disabled)", - "action-neutral": "var(--colors-action-neutral)", - "action-neutral-hover": "var(--colors-action-neutral-hover)", - "action-neutral-pressed": "var(--colors-action-neutral-pressed)", - "action-primary": "var(--colors-action-primary)", - "action-primary-hover": "var(--colors-action-primary-hover)", - "action-primary-pressed": "var(--colors-action-primary-pressed)", - "background-current": "var(--colors-background-current)", - "black": "var(--colors-black)", - "black-a24": "var(--colors-black-a24)", - "black-a32": "var(--colors-black-a32)", - "black-a60": "var(--colors-black-a60)", - "border-default": "var(--colors-border-default)", - "border-strong": "var(--colors-border-strong)", - "border-subtle": "var(--colors-border-subtle)", - "palette-accent-100": "var(--colors-palette-accent-100)", - "palette-accent-1000": "var(--colors-palette-accent-1000)", - "palette-accent-1100": "var(--colors-palette-accent-1100)", - "palette-accent-200": "var(--colors-palette-accent-200)", - "palette-accent-300": "var(--colors-palette-accent-300)", - "palette-accent-400": "var(--colors-palette-accent-400)", - "palette-accent-500": "var(--colors-palette-accent-500)", - "palette-accent-600": "var(--colors-palette-accent-600)", - "palette-accent-700": "var(--colors-palette-accent-700)", - "palette-accent-800": "var(--colors-palette-accent-800)", - "palette-accent-900": "var(--colors-palette-accent-900)", - "palette-accent-alt-100": "var(--colors-palette-accent-alt-100)", - "palette-accent-alt-1000": "var(--colors-palette-accent-alt-1000)", - "palette-accent-alt-1100": "var(--colors-palette-accent-alt-1100)", - "palette-accent-alt-200": "var(--colors-palette-accent-alt-200)", - "palette-accent-alt-300": "var(--colors-palette-accent-alt-300)", - "palette-accent-alt-400": "var(--colors-palette-accent-alt-400)", - "palette-accent-alt-500": "var(--colors-palette-accent-alt-500)", - "palette-accent-alt-600": "var(--colors-palette-accent-alt-600)", - "palette-accent-alt-700": "var(--colors-palette-accent-alt-700)", - "palette-accent-alt-800": "var(--colors-palette-accent-alt-800)", - "palette-accent-alt-900": "var(--colors-palette-accent-alt-900)", - "palette-danger-100": "var(--colors-palette-danger-100)", - "palette-danger-1000": "var(--colors-palette-danger-1000)", - "palette-danger-1100": "var(--colors-palette-danger-1100)", - "palette-danger-200": "var(--colors-palette-danger-200)", - "palette-danger-300": "var(--colors-palette-danger-300)", - "palette-danger-400": "var(--colors-palette-danger-400)", - "palette-danger-500": "var(--colors-palette-danger-500)", - "palette-danger-600": "var(--colors-palette-danger-600)", - "palette-danger-700": "var(--colors-palette-danger-700)", - "palette-danger-800": "var(--colors-palette-danger-800)", - "palette-danger-900": "var(--colors-palette-danger-900)", - "palette-neutral-dark-100": "var(--colors-palette-neutral-dark-100)", - "palette-neutral-dark-1000": "var(--colors-palette-neutral-dark-1000)", - "palette-neutral-dark-1100": "var(--colors-palette-neutral-dark-1100)", - "palette-neutral-dark-1100-a12": "var(--colors-palette-neutral-dark-1100-a12)", - "palette-neutral-dark-1100-a16": "var(--colors-palette-neutral-dark-1100-a16)", - "palette-neutral-dark-200": "var(--colors-palette-neutral-dark-200)", - "palette-neutral-dark-300": "var(--colors-palette-neutral-dark-300)", - "palette-neutral-dark-400": "var(--colors-palette-neutral-dark-400)", - "palette-neutral-dark-500": "var(--colors-palette-neutral-dark-500)", - "palette-neutral-dark-600": "var(--colors-palette-neutral-dark-600)", - "palette-neutral-dark-700": "var(--colors-palette-neutral-dark-700)", - "palette-neutral-dark-800": "var(--colors-palette-neutral-dark-800)", - "palette-neutral-dark-900": "var(--colors-palette-neutral-dark-900)", - "palette-neutral-light-100": "var(--colors-palette-neutral-light-100)", - "palette-neutral-light-1000": "var(--colors-palette-neutral-light-1000)", - "palette-neutral-light-1100": "var(--colors-palette-neutral-light-1100)", - "palette-neutral-light-200": "var(--colors-palette-neutral-light-200)", - "palette-neutral-light-300": "var(--colors-palette-neutral-light-300)", - "palette-neutral-light-400": "var(--colors-palette-neutral-light-400)", - "palette-neutral-light-500": "var(--colors-palette-neutral-light-500)", - "palette-neutral-light-600": "var(--colors-palette-neutral-light-600)", - "palette-neutral-light-700": "var(--colors-palette-neutral-light-700)", - "palette-neutral-light-800": "var(--colors-palette-neutral-light-800)", - "palette-neutral-light-900": "var(--colors-palette-neutral-light-900)", - "palette-primary-100": "var(--colors-palette-primary-100)", - "palette-primary-1000": "var(--colors-palette-primary-1000)", - "palette-primary-1100": "var(--colors-palette-primary-1100)", - "palette-primary-200": "var(--colors-palette-primary-200)", - "palette-primary-300": "var(--colors-palette-primary-300)", - "palette-primary-400": "var(--colors-palette-primary-400)", - "palette-primary-500": "var(--colors-palette-primary-500)", - "palette-primary-600": "var(--colors-palette-primary-600)", - "palette-primary-600-a6": "var(--colors-palette-primary-600-a6)", - "palette-primary-600-a8": "var(--colors-palette-primary-600-a8)", - "palette-primary-600-a9": "var(--colors-palette-primary-600-a9)", - "palette-primary-700": "var(--colors-palette-primary-700)", - "palette-primary-800": "var(--colors-palette-primary-800)", - "palette-primary-900": "var(--colors-palette-primary-900)", - "palette-success-100": "var(--colors-palette-success-100)", - "palette-success-1000": "var(--colors-palette-success-1000)", - "palette-success-1100": "var(--colors-palette-success-1100)", - "palette-success-200": "var(--colors-palette-success-200)", - "palette-success-300": "var(--colors-palette-success-300)", - "palette-success-400": "var(--colors-palette-success-400)", - "palette-success-500": "var(--colors-palette-success-500)", - "palette-success-600": "var(--colors-palette-success-600)", - "palette-success-700": "var(--colors-palette-success-700)", - "palette-success-800": "var(--colors-palette-success-800)", - "palette-success-900": "var(--colors-palette-success-900)", - "palette-warning-100": "var(--colors-palette-warning-100)", - "palette-warning-1000": "var(--colors-palette-warning-1000)", - "palette-warning-1100": "var(--colors-palette-warning-1100)", - "palette-warning-200": "var(--colors-palette-warning-200)", - "palette-warning-300": "var(--colors-palette-warning-300)", - "palette-warning-400": "var(--colors-palette-warning-400)", - "palette-warning-500": "var(--colors-palette-warning-500)", - "palette-warning-600": "var(--colors-palette-warning-600)", - "palette-warning-700": "var(--colors-palette-warning-700)", - "palette-warning-800": "var(--colors-palette-warning-800)", - "palette-warning-900": "var(--colors-palette-warning-900)", - "shadow-ambient": "var(--colors-shadow-ambient)", - "shadow-key": "var(--colors-shadow-key)", - "shadow-scrim": "var(--colors-shadow-scrim)", - "state-hover": "var(--colors-state-hover)", - "state-pressed": "var(--colors-state-pressed)", - "state-selected": "var(--colors-state-selected)", - "surface-brand": "var(--colors-surface-brand)", - "surface-brand-subtle": "var(--colors-surface-brand-subtle)", - "surface-default": "var(--colors-surface-default)", - "surface-error": "var(--colors-surface-error)", - "surface-raised": "var(--colors-surface-raised)", - "surface-success": "var(--colors-surface-success)", - "surface-sunken": "var(--colors-surface-sunken)", - "surface-warning": "var(--colors-surface-warning)", - "text-default": "var(--colors-text-default)", - "text-error": "var(--colors-text-error)", - "text-inverse": "var(--colors-text-inverse)", - "text-subtle": "var(--colors-text-subtle)", - "text-success": "var(--colors-text-success)", - "text-warning": "var(--colors-text-warning)", - "viz-1": "var(--colors-viz-1)", - "viz-2": "var(--colors-viz-2)", - "viz-3": "var(--colors-viz-3)", - "viz-4": "var(--colors-viz-4)", - "viz-5": "var(--colors-viz-5)", - "viz-6": "var(--colors-viz-6)", - "viz-7": "var(--colors-viz-7)", - "viz-8": "var(--colors-viz-8)", - "viz-seq-1": "var(--colors-viz-seq-1)", - "viz-seq-2": "var(--colors-viz-seq-2)", - "viz-seq-3": "var(--colors-viz-seq-3)", - "viz-seq-4": "var(--colors-viz-seq-4)", - "white": "var(--colors-white)", + "action-danger": "var(--color-action-danger)", + "action-danger-hover": "var(--color-action-danger-hover)", + "action-danger-pressed": "var(--color-action-danger-pressed)", + "action-disabled": "var(--color-action-disabled)", + "action-neutral": "var(--color-action-neutral)", + "action-neutral-hover": "var(--color-action-neutral-hover)", + "action-neutral-pressed": "var(--color-action-neutral-pressed)", + "action-primary": "var(--color-action-primary)", + "action-primary-hover": "var(--color-action-primary-hover)", + "action-primary-pressed": "var(--color-action-primary-pressed)", + "background-current": "var(--color-background-current)", + "black": "var(--color-black)", + "black-a24": "var(--color-black-a24)", + "black-a32": "var(--color-black-a32)", + "black-a60": "var(--color-black-a60)", + "border-default": "var(--color-border-default)", + "border-strong": "var(--color-border-strong)", + "border-subtle": "var(--color-border-subtle)", + "palette-accent-100": "var(--color-palette-accent-100)", + "palette-accent-1000": "var(--color-palette-accent-1000)", + "palette-accent-1100": "var(--color-palette-accent-1100)", + "palette-accent-200": "var(--color-palette-accent-200)", + "palette-accent-300": "var(--color-palette-accent-300)", + "palette-accent-400": "var(--color-palette-accent-400)", + "palette-accent-500": "var(--color-palette-accent-500)", + "palette-accent-600": "var(--color-palette-accent-600)", + "palette-accent-700": "var(--color-palette-accent-700)", + "palette-accent-800": "var(--color-palette-accent-800)", + "palette-accent-900": "var(--color-palette-accent-900)", + "palette-accent-alt-100": "var(--color-palette-accent-alt-100)", + "palette-accent-alt-1000": "var(--color-palette-accent-alt-1000)", + "palette-accent-alt-1100": "var(--color-palette-accent-alt-1100)", + "palette-accent-alt-200": "var(--color-palette-accent-alt-200)", + "palette-accent-alt-300": "var(--color-palette-accent-alt-300)", + "palette-accent-alt-400": "var(--color-palette-accent-alt-400)", + "palette-accent-alt-500": "var(--color-palette-accent-alt-500)", + "palette-accent-alt-600": "var(--color-palette-accent-alt-600)", + "palette-accent-alt-700": "var(--color-palette-accent-alt-700)", + "palette-accent-alt-800": "var(--color-palette-accent-alt-800)", + "palette-accent-alt-900": "var(--color-palette-accent-alt-900)", + "palette-danger-100": "var(--color-palette-danger-100)", + "palette-danger-1000": "var(--color-palette-danger-1000)", + "palette-danger-1100": "var(--color-palette-danger-1100)", + "palette-danger-200": "var(--color-palette-danger-200)", + "palette-danger-300": "var(--color-palette-danger-300)", + "palette-danger-400": "var(--color-palette-danger-400)", + "palette-danger-500": "var(--color-palette-danger-500)", + "palette-danger-600": "var(--color-palette-danger-600)", + "palette-danger-700": "var(--color-palette-danger-700)", + "palette-danger-800": "var(--color-palette-danger-800)", + "palette-danger-900": "var(--color-palette-danger-900)", + "palette-neutral-dark-100": "var(--color-palette-neutral-dark-100)", + "palette-neutral-dark-1000": "var(--color-palette-neutral-dark-1000)", + "palette-neutral-dark-1100": "var(--color-palette-neutral-dark-1100)", + "palette-neutral-dark-1100-a12": "var(--color-palette-neutral-dark-1100-a12)", + "palette-neutral-dark-1100-a16": "var(--color-palette-neutral-dark-1100-a16)", + "palette-neutral-dark-200": "var(--color-palette-neutral-dark-200)", + "palette-neutral-dark-300": "var(--color-palette-neutral-dark-300)", + "palette-neutral-dark-400": "var(--color-palette-neutral-dark-400)", + "palette-neutral-dark-500": "var(--color-palette-neutral-dark-500)", + "palette-neutral-dark-600": "var(--color-palette-neutral-dark-600)", + "palette-neutral-dark-700": "var(--color-palette-neutral-dark-700)", + "palette-neutral-dark-800": "var(--color-palette-neutral-dark-800)", + "palette-neutral-dark-900": "var(--color-palette-neutral-dark-900)", + "palette-neutral-light-100": "var(--color-palette-neutral-light-100)", + "palette-neutral-light-1000": "var(--color-palette-neutral-light-1000)", + "palette-neutral-light-1100": "var(--color-palette-neutral-light-1100)", + "palette-neutral-light-200": "var(--color-palette-neutral-light-200)", + "palette-neutral-light-300": "var(--color-palette-neutral-light-300)", + "palette-neutral-light-400": "var(--color-palette-neutral-light-400)", + "palette-neutral-light-500": "var(--color-palette-neutral-light-500)", + "palette-neutral-light-600": "var(--color-palette-neutral-light-600)", + "palette-neutral-light-700": "var(--color-palette-neutral-light-700)", + "palette-neutral-light-800": "var(--color-palette-neutral-light-800)", + "palette-neutral-light-900": "var(--color-palette-neutral-light-900)", + "palette-primary-100": "var(--color-palette-primary-100)", + "palette-primary-1000": "var(--color-palette-primary-1000)", + "palette-primary-1100": "var(--color-palette-primary-1100)", + "palette-primary-200": "var(--color-palette-primary-200)", + "palette-primary-300": "var(--color-palette-primary-300)", + "palette-primary-400": "var(--color-palette-primary-400)", + "palette-primary-500": "var(--color-palette-primary-500)", + "palette-primary-600": "var(--color-palette-primary-600)", + "palette-primary-600-a6": "var(--color-palette-primary-600-a6)", + "palette-primary-600-a8": "var(--color-palette-primary-600-a8)", + "palette-primary-600-a9": "var(--color-palette-primary-600-a9)", + "palette-primary-700": "var(--color-palette-primary-700)", + "palette-primary-800": "var(--color-palette-primary-800)", + "palette-primary-900": "var(--color-palette-primary-900)", + "palette-success-100": "var(--color-palette-success-100)", + "palette-success-1000": "var(--color-palette-success-1000)", + "palette-success-1100": "var(--color-palette-success-1100)", + "palette-success-200": "var(--color-palette-success-200)", + "palette-success-300": "var(--color-palette-success-300)", + "palette-success-400": "var(--color-palette-success-400)", + "palette-success-500": "var(--color-palette-success-500)", + "palette-success-600": "var(--color-palette-success-600)", + "palette-success-700": "var(--color-palette-success-700)", + "palette-success-800": "var(--color-palette-success-800)", + "palette-success-900": "var(--color-palette-success-900)", + "palette-warning-100": "var(--color-palette-warning-100)", + "palette-warning-1000": "var(--color-palette-warning-1000)", + "palette-warning-1100": "var(--color-palette-warning-1100)", + "palette-warning-200": "var(--color-palette-warning-200)", + "palette-warning-300": "var(--color-palette-warning-300)", + "palette-warning-400": "var(--color-palette-warning-400)", + "palette-warning-500": "var(--color-palette-warning-500)", + "palette-warning-600": "var(--color-palette-warning-600)", + "palette-warning-700": "var(--color-palette-warning-700)", + "palette-warning-800": "var(--color-palette-warning-800)", + "palette-warning-900": "var(--color-palette-warning-900)", + "shadow-ambient": "var(--color-shadow-ambient)", + "shadow-key": "var(--color-shadow-key)", + "shadow-scrim": "var(--color-shadow-scrim)", + "state-hover": "var(--color-state-hover)", + "state-pressed": "var(--color-state-pressed)", + "state-selected": "var(--color-state-selected)", + "surface-brand": "var(--color-surface-brand)", + "surface-brand-subtle": "var(--color-surface-brand-subtle)", + "surface-default": "var(--color-surface-default)", + "surface-error": "var(--color-surface-error)", + "surface-raised": "var(--color-surface-raised)", + "surface-success": "var(--color-surface-success)", + "surface-sunken": "var(--color-surface-sunken)", + "surface-warning": "var(--color-surface-warning)", + "text-default": "var(--color-text-default)", + "text-error": "var(--color-text-error)", + "text-inverse": "var(--color-text-inverse)", + "text-subtle": "var(--color-text-subtle)", + "text-success": "var(--color-text-success)", + "text-warning": "var(--color-text-warning)", + "viz-1": "var(--color-viz-1)", + "viz-2": "var(--color-viz-2)", + "viz-3": "var(--color-viz-3)", + "viz-4": "var(--color-viz-4)", + "viz-5": "var(--color-viz-5)", + "viz-6": "var(--color-viz-6)", + "viz-7": "var(--color-viz-7)", + "viz-8": "var(--color-viz-8)", + "viz-seq-1": "var(--color-viz-seq-1)", + "viz-seq-2": "var(--color-viz-seq-2)", + "viz-seq-3": "var(--color-viz-seq-3)", + "viz-seq-4": "var(--color-viz-seq-4)", + "white": "var(--color-white)", }, "contentModes": { "black": "dark", @@ -536,11 +536,11 @@ exports[`themes admin - theme shape 1`] = ` "headerZ": "var(--elements-headerZ)", }, "elevation": { - "hover-shadow": "0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)", + "hover-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", "hover-transform": "none", - "hoverMirrored-shadow": "0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)", + "hoverMirrored-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", "hoverMirrored-transform": "none", - "rest-shadow": "0 1px 4px 0 var(--colors-shadow-key), 0 2px 7px 0 var(--colors-shadow-ambient)", + "rest-shadow": "0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)", "rest-transform": "none", }, "fontFamily": { @@ -695,210 +695,210 @@ monospace", @layer tokens { :root, [data-brand="admin"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); - --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); - --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); - --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); - --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); - --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); - --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); - --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); - --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 263.60); - --colors-palette-primary-200: oklch(0.9364 0.0120 263.60); - --colors-palette-primary-300: oklch(0.8497 0.0406 263.60); - --colors-palette-primary-400: oklch(0.7628 0.0845 263.60); - --colors-palette-primary-500: oklch(0.6707 0.1528 263.60); - --colors-palette-primary-600: oklch(0.5835 0.2271 263.60); - --colors-palette-primary-700: oklch(0.4972 0.2553 263.60); - --colors-palette-primary-800: oklch(0.4115 0.2002 263.60); - --colors-palette-primary-900: oklch(0.3346 0.1591 263.60); - --colors-palette-primary-1000: oklch(0.2499 0.1134 263.60); - --colors-palette-primary-1100: oklch(0.1925 0.0832 263.60); - --colors-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8789 0.1801 93.58); - --colors-palette-accent-400: oklch(0.7442 0.1526 93.94); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0228 145.50); - --colors-palette-success-200: oklch(0.9364 0.0458 145.50); - --colors-palette-success-300: oklch(0.8497 0.1448 145.50); - --colors-palette-success-400: oklch(0.7628 0.1654 145.50); - --colors-palette-success-500: oklch(0.6707 0.1829 145.50); - --colors-palette-success-600: oklch(0.5835 0.1808 145.50); - --colors-palette-success-700: oklch(0.4972 0.1464 145.50); - --colors-palette-success-800: oklch(0.4115 0.1147 145.50); - --colors-palette-success-900: oklch(0.3346 0.0912 145.50); - --colors-palette-success-1000: oklch(0.2499 0.0650 145.50); - --colors-palette-success-1100: oklch(0.1925 0.0477 145.50); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); + --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 263.60); + --color-palette-primary-200: oklch(0.9364 0.0120 263.60); + --color-palette-primary-300: oklch(0.8497 0.0406 263.60); + --color-palette-primary-400: oklch(0.7628 0.0845 263.60); + --color-palette-primary-500: oklch(0.6707 0.1528 263.60); + --color-palette-primary-600: oklch(0.5835 0.2271 263.60); + --color-palette-primary-700: oklch(0.4972 0.2553 263.60); + --color-palette-primary-800: oklch(0.4115 0.2002 263.60); + --color-palette-primary-900: oklch(0.3346 0.1591 263.60); + --color-palette-primary-1000: oklch(0.2499 0.1134 263.60); + --color-palette-primary-1100: oklch(0.1925 0.0832 263.60); + --color-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } ", @@ -1059,108 +1059,108 @@ exports[`themes core - theme shape 1`] = ` }, "_variables": { "mode": { - "--colors-background": "var(--colors-white)", - "--colors-background-contrast": "var(--colors-white)", - "--colors-background-current": "var(--colors-white)", - "--colors-background-disabled": "var(--colors-navy-200)", - "--colors-background-error": "var(--colors-red-0)", - "--colors-background-hover": "var(--colors-navy-200)", - "--colors-background-primary": "var(--colors-beige)", - "--colors-background-selected": "var(--colors-navy-100)", - "--colors-background-success": "var(--colors-green-0)", - "--colors-background-warning": "var(--colors-yellow-0)", - "--colors-border-disabled": "var(--colors-navy-500)", - "--colors-border-primary": "var(--colors-navy-800)", - "--colors-border-secondary": "var(--colors-navy-600)", - "--colors-border-tertiary": "var(--colors-navy-300)", - "--colors-danger": "var(--colors-red-500)", - "--colors-danger-hover": "var(--colors-red-600)", - "--colors-feedback-error": "var(--colors-red-600)", - "--colors-feedback-success": "var(--colors-green-700)", - "--colors-feedback-warning": "var(--colors-yellow)", - "--colors-interface": "var(--colors-hyper-500)", - "--colors-interface-hover": "var(--colors-hyper-400)", - "--colors-primary": "var(--colors-hyper-500)", - "--colors-primary-hover": "var(--colors-hyper-400)", - "--colors-primary-inverse": "var(--colors-yellow-500)", - "--colors-secondary": "var(--colors-navy-800)", - "--colors-secondary-hover": "var(--colors-navy-700)", - "--colors-shadow-primary": "var(--colors-navy-800)", - "--colors-shadow-secondary": "var(--colors-navy-600)", - "--colors-text": "var(--colors-navy-800)", - "--colors-text-accent": "var(--colors-navy-900)", - "--colors-text-disabled": "var(--colors-navy-500)", - "--colors-text-secondary": "var(--colors-navy-600)", + "--color-background": "var(--color-white)", + "--color-background-contrast": "var(--color-white)", + "--color-background-current": "var(--color-white)", + "--color-background-disabled": "var(--color-navy-200)", + "--color-background-error": "var(--color-red-0)", + "--color-background-hover": "var(--color-navy-200)", + "--color-background-primary": "var(--color-beige)", + "--color-background-selected": "var(--color-navy-100)", + "--color-background-success": "var(--color-green-0)", + "--color-background-warning": "var(--color-yellow-0)", + "--color-border-disabled": "var(--color-navy-500)", + "--color-border-primary": "var(--color-navy-800)", + "--color-border-secondary": "var(--color-navy-600)", + "--color-border-tertiary": "var(--color-navy-300)", + "--color-danger": "var(--color-red-500)", + "--color-danger-hover": "var(--color-red-600)", + "--color-feedback-error": "var(--color-red-600)", + "--color-feedback-success": "var(--color-green-700)", + "--color-feedback-warning": "var(--color-yellow)", + "--color-interface": "var(--color-hyper-500)", + "--color-interface-hover": "var(--color-hyper-400)", + "--color-primary": "var(--color-hyper-500)", + "--color-primary-hover": "var(--color-hyper-400)", + "--color-primary-inverse": "var(--color-yellow-500)", + "--color-secondary": "var(--color-navy-800)", + "--color-secondary-hover": "var(--color-navy-700)", + "--color-shadow-primary": "var(--color-navy-800)", + "--color-shadow-secondary": "var(--color-navy-600)", + "--color-text": "var(--color-navy-800)", + "--color-text-accent": "var(--color-navy-900)", + "--color-text-disabled": "var(--color-navy-500)", + "--color-text-secondary": "var(--color-navy-600)", }, "root": { - "--colors-beige": "#FFF0E5", - "--colors-beige-100": "#FFF0E5", - "--colors-black": "#000000", - "--colors-blue": "#1557FF", - "--colors-blue-0": "#F5FCFF", - "--colors-blue-100": "#D3F2FF", - "--colors-blue-300": "#66C4FF", - "--colors-blue-400": "#3388FF", - "--colors-blue-500": "#1557FF", - "--colors-blue-800": "#1D2340", - "--colors-gray-100": "#F5F5F5", - "--colors-gray-200": "#EEEEEE", - "--colors-gray-300": "#E0E0E0", - "--colors-gray-600": "#9E9E9E", - "--colors-gray-800": "#616161", - "--colors-gray-900": "#424242", - "--colors-green": "#008A27", - "--colors-green-0": "#F5FFE3", - "--colors-green-100": "#EAFDC6", - "--colors-green-400": "#AEE938", - "--colors-green-700": "#008A27", - "--colors-green-900": "#151C07", - "--colors-hyper": "#3A10E5", - "--colors-hyper-400": "#5533FF", - "--colors-hyper-500": "#3A10E5", - "--colors-lightBlue": "#66C4FF", - "--colors-lightGreen": "#AEE938", - "--colors-navy": "#10162F", - "--colors-navy-100": "rgba(16,22,47,0.04)", - "--colors-navy-200": "rgba(16,22,47,0.12)", - "--colors-navy-300": "rgba(16,22,47,0.28)", - "--colors-navy-400": "rgba(16,22,47,0.47)", - "--colors-navy-500": "rgba(16,22,47,0.63)", - "--colors-navy-600": "rgba(16,22,47,0.75)", - "--colors-navy-700": "rgba(16,22,47,0.86)", - "--colors-navy-800": "#10162F", - "--colors-navy-900": "#0A0D1C", - "--colors-orange": "#FF8C00", - "--colors-orange-100": "#FFE8CC", - "--colors-orange-500": "#FF8C00", - "--colors-paleBlue": "#F5FCFF", - "--colors-paleGreen": "#F5FFE3", - "--colors-palePink": "#FFF5FF", - "--colors-paleRed": "#DC5879", - "--colors-paleYellow": "#FFFAE5", - "--colors-pink": "#F966FF", - "--colors-pink-0": "#FFF5FF", - "--colors-pink-400": "#F966FF", - "--colors-red": "#E91C11", - "--colors-red-0": "#FBF1F0", - "--colors-red-300": "#E85D7F", - "--colors-red-400": "#DC5879", - "--colors-red-500": "#E91C11", - "--colors-red-600": "#BE1809", - "--colors-red-900": "#280503", - "--colors-white": "#ffffff", - "--colors-white-100": "rgba(255,255,255,0.04)", - "--colors-white-200": "rgba(255,255,255,0.09)", - "--colors-white-300": "rgba(255,255,255,0.2)", - "--colors-white-400": "rgba(255,255,255,0.35)", - "--colors-white-500": "rgba(255,255,255,0.5)", - "--colors-white-600": "rgba(255,255,255,0.65)", - "--colors-white-700": "rgba(255,255,255,0.8)", - "--colors-yellow": "#FFD300", - "--colors-yellow-0": "#FFFAE5", - "--colors-yellow-400": "#CCA900", - "--colors-yellow-500": "#FFD300", - "--colors-yellow-900": "#211B00", + "--color-beige": "#FFF0E5", + "--color-beige-100": "#FFF0E5", + "--color-black": "#000000", + "--color-blue": "#1557FF", + "--color-blue-0": "#F5FCFF", + "--color-blue-100": "#D3F2FF", + "--color-blue-300": "#66C4FF", + "--color-blue-400": "#3388FF", + "--color-blue-500": "#1557FF", + "--color-blue-800": "#1D2340", + "--color-gray-100": "#F5F5F5", + "--color-gray-200": "#EEEEEE", + "--color-gray-300": "#E0E0E0", + "--color-gray-600": "#9E9E9E", + "--color-gray-800": "#616161", + "--color-gray-900": "#424242", + "--color-green": "#008A27", + "--color-green-0": "#F5FFE3", + "--color-green-100": "#EAFDC6", + "--color-green-400": "#AEE938", + "--color-green-700": "#008A27", + "--color-green-900": "#151C07", + "--color-hyper": "#3A10E5", + "--color-hyper-400": "#5533FF", + "--color-hyper-500": "#3A10E5", + "--color-lightBlue": "#66C4FF", + "--color-lightGreen": "#AEE938", + "--color-navy": "#10162F", + "--color-navy-100": "rgba(16,22,47,0.04)", + "--color-navy-200": "rgba(16,22,47,0.12)", + "--color-navy-300": "rgba(16,22,47,0.28)", + "--color-navy-400": "rgba(16,22,47,0.47)", + "--color-navy-500": "rgba(16,22,47,0.63)", + "--color-navy-600": "rgba(16,22,47,0.75)", + "--color-navy-700": "rgba(16,22,47,0.86)", + "--color-navy-800": "#10162F", + "--color-navy-900": "#0A0D1C", + "--color-orange": "#FF8C00", + "--color-orange-100": "#FFE8CC", + "--color-orange-500": "#FF8C00", + "--color-paleBlue": "#F5FCFF", + "--color-paleGreen": "#F5FFE3", + "--color-palePink": "#FFF5FF", + "--color-paleRed": "#DC5879", + "--color-paleYellow": "#FFFAE5", + "--color-pink": "#F966FF", + "--color-pink-0": "#FFF5FF", + "--color-pink-400": "#F966FF", + "--color-red": "#E91C11", + "--color-red-0": "#FBF1F0", + "--color-red-300": "#E85D7F", + "--color-red-400": "#DC5879", + "--color-red-500": "#E91C11", + "--color-red-600": "#BE1809", + "--color-red-900": "#280503", + "--color-white": "#ffffff", + "--color-white-100": "rgba(255,255,255,0.04)", + "--color-white-200": "rgba(255,255,255,0.09)", + "--color-white-300": "rgba(255,255,255,0.2)", + "--color-white-400": "rgba(255,255,255,0.35)", + "--color-white-500": "rgba(255,255,255,0.5)", + "--color-white-600": "rgba(255,255,255,0.65)", + "--color-white-700": "rgba(255,255,255,0.8)", + "--color-yellow": "#FFD300", + "--color-yellow-0": "#FFFAE5", + "--color-yellow-400": "#CCA900", + "--color-yellow-500": "#FFD300", + "--color-yellow-900": "#211B00", "--elements-headerHeight": "4rem", "--elements-headerZ": 15, "@media only screen and (min-width: 1024px)": { @@ -1177,8 +1177,8 @@ exports[`themes core - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--colors-border-primary)", - "2": "2px solid var(--colors-border-primary)", + "1": "1px solid var(--color-border-primary)", + "2": "2px solid var(--color-border-primary)", }, "breakpoints": { "c_base": "@container (min-width: 1px)", @@ -1194,117 +1194,117 @@ exports[`themes core - theme shape 1`] = ` "xs": "@media only screen and (min-width: 480px)", }, "colors": { - "background": "var(--colors-background)", - "background-contrast": "var(--colors-background-contrast)", - "background-current": "var(--colors-background-current)", - "background-disabled": "var(--colors-background-disabled)", - "background-error": "var(--colors-background-error)", - "background-hover": "var(--colors-background-hover)", - "background-primary": "var(--colors-background-primary)", - "background-selected": "var(--colors-background-selected)", - "background-success": "var(--colors-background-success)", - "background-warning": "var(--colors-background-warning)", - "beige": "var(--colors-beige)", - "beige-100": "var(--colors-beige-100)", - "black": "var(--colors-black)", - "blue": "var(--colors-blue)", - "blue-0": "var(--colors-blue-0)", - "blue-100": "var(--colors-blue-100)", - "blue-300": "var(--colors-blue-300)", - "blue-400": "var(--colors-blue-400)", - "blue-500": "var(--colors-blue-500)", - "blue-800": "var(--colors-blue-800)", - "border-disabled": "var(--colors-border-disabled)", - "border-primary": "var(--colors-border-primary)", - "border-secondary": "var(--colors-border-secondary)", - "border-tertiary": "var(--colors-border-tertiary)", - "danger": "var(--colors-danger)", - "danger-hover": "var(--colors-danger-hover)", - "feedback-error": "var(--colors-feedback-error)", - "feedback-success": "var(--colors-feedback-success)", - "feedback-warning": "var(--colors-feedback-warning)", - "gray-100": "var(--colors-gray-100)", - "gray-200": "var(--colors-gray-200)", - "gray-300": "var(--colors-gray-300)", - "gray-600": "var(--colors-gray-600)", - "gray-800": "var(--colors-gray-800)", - "gray-900": "var(--colors-gray-900)", - "green": "var(--colors-green)", - "green-0": "var(--colors-green-0)", - "green-100": "var(--colors-green-100)", - "green-400": "var(--colors-green-400)", - "green-700": "var(--colors-green-700)", - "green-900": "var(--colors-green-900)", - "hyper": "var(--colors-hyper)", - "hyper-400": "var(--colors-hyper-400)", - "hyper-500": "var(--colors-hyper-500)", - "interface": "var(--colors-interface)", - "interface-hover": "var(--colors-interface-hover)", - "lightBlue": "var(--colors-lightBlue)", - "lightGreen": "var(--colors-lightGreen)", - "navy": "var(--colors-navy)", - "navy-100": "var(--colors-navy-100)", - "navy-200": "var(--colors-navy-200)", - "navy-300": "var(--colors-navy-300)", - "navy-400": "var(--colors-navy-400)", - "navy-500": "var(--colors-navy-500)", - "navy-600": "var(--colors-navy-600)", - "navy-700": "var(--colors-navy-700)", - "navy-800": "var(--colors-navy-800)", - "navy-900": "var(--colors-navy-900)", - "orange": "var(--colors-orange)", - "orange-100": "var(--colors-orange-100)", - "orange-500": "var(--colors-orange-500)", - "paleBlue": "var(--colors-paleBlue)", - "paleGreen": "var(--colors-paleGreen)", - "palePink": "var(--colors-palePink)", - "paleRed": "var(--colors-paleRed)", - "paleYellow": "var(--colors-paleYellow)", - "pink": "var(--colors-pink)", - "pink-0": "var(--colors-pink-0)", - "pink-400": "var(--colors-pink-400)", - "primary": "var(--colors-primary)", - "primary-hover": "var(--colors-primary-hover)", - "primary-inverse": "var(--colors-primary-inverse)", - "red": "var(--colors-red)", - "red-0": "var(--colors-red-0)", - "red-300": "var(--colors-red-300)", - "red-400": "var(--colors-red-400)", - "red-500": "var(--colors-red-500)", - "red-600": "var(--colors-red-600)", - "red-900": "var(--colors-red-900)", - "secondary": "var(--colors-secondary)", - "secondary-hover": "var(--colors-secondary-hover)", - "shadow-primary": "var(--colors-shadow-primary)", - "shadow-secondary": "var(--colors-shadow-secondary)", - "text": "var(--colors-text)", - "text-accent": "var(--colors-text-accent)", - "text-disabled": "var(--colors-text-disabled)", - "text-secondary": "var(--colors-text-secondary)", - "white": "var(--colors-white)", - "white-100": "var(--colors-white-100)", - "white-200": "var(--colors-white-200)", - "white-300": "var(--colors-white-300)", - "white-400": "var(--colors-white-400)", - "white-500": "var(--colors-white-500)", - "white-600": "var(--colors-white-600)", - "white-700": "var(--colors-white-700)", - "yellow": "var(--colors-yellow)", - "yellow-0": "var(--colors-yellow-0)", - "yellow-400": "var(--colors-yellow-400)", - "yellow-500": "var(--colors-yellow-500)", - "yellow-900": "var(--colors-yellow-900)", + "background": "var(--color-background)", + "background-contrast": "var(--color-background-contrast)", + "background-current": "var(--color-background-current)", + "background-disabled": "var(--color-background-disabled)", + "background-error": "var(--color-background-error)", + "background-hover": "var(--color-background-hover)", + "background-primary": "var(--color-background-primary)", + "background-selected": "var(--color-background-selected)", + "background-success": "var(--color-background-success)", + "background-warning": "var(--color-background-warning)", + "beige": "var(--color-beige)", + "beige-100": "var(--color-beige-100)", + "black": "var(--color-black)", + "blue": "var(--color-blue)", + "blue-0": "var(--color-blue-0)", + "blue-100": "var(--color-blue-100)", + "blue-300": "var(--color-blue-300)", + "blue-400": "var(--color-blue-400)", + "blue-500": "var(--color-blue-500)", + "blue-800": "var(--color-blue-800)", + "border-disabled": "var(--color-border-disabled)", + "border-primary": "var(--color-border-primary)", + "border-secondary": "var(--color-border-secondary)", + "border-tertiary": "var(--color-border-tertiary)", + "danger": "var(--color-danger)", + "danger-hover": "var(--color-danger-hover)", + "feedback-error": "var(--color-feedback-error)", + "feedback-success": "var(--color-feedback-success)", + "feedback-warning": "var(--color-feedback-warning)", + "gray-100": "var(--color-gray-100)", + "gray-200": "var(--color-gray-200)", + "gray-300": "var(--color-gray-300)", + "gray-600": "var(--color-gray-600)", + "gray-800": "var(--color-gray-800)", + "gray-900": "var(--color-gray-900)", + "green": "var(--color-green)", + "green-0": "var(--color-green-0)", + "green-100": "var(--color-green-100)", + "green-400": "var(--color-green-400)", + "green-700": "var(--color-green-700)", + "green-900": "var(--color-green-900)", + "hyper": "var(--color-hyper)", + "hyper-400": "var(--color-hyper-400)", + "hyper-500": "var(--color-hyper-500)", + "interface": "var(--color-interface)", + "interface-hover": "var(--color-interface-hover)", + "lightBlue": "var(--color-lightBlue)", + "lightGreen": "var(--color-lightGreen)", + "navy": "var(--color-navy)", + "navy-100": "var(--color-navy-100)", + "navy-200": "var(--color-navy-200)", + "navy-300": "var(--color-navy-300)", + "navy-400": "var(--color-navy-400)", + "navy-500": "var(--color-navy-500)", + "navy-600": "var(--color-navy-600)", + "navy-700": "var(--color-navy-700)", + "navy-800": "var(--color-navy-800)", + "navy-900": "var(--color-navy-900)", + "orange": "var(--color-orange)", + "orange-100": "var(--color-orange-100)", + "orange-500": "var(--color-orange-500)", + "paleBlue": "var(--color-paleBlue)", + "paleGreen": "var(--color-paleGreen)", + "palePink": "var(--color-palePink)", + "paleRed": "var(--color-paleRed)", + "paleYellow": "var(--color-paleYellow)", + "pink": "var(--color-pink)", + "pink-0": "var(--color-pink-0)", + "pink-400": "var(--color-pink-400)", + "primary": "var(--color-primary)", + "primary-hover": "var(--color-primary-hover)", + "primary-inverse": "var(--color-primary-inverse)", + "red": "var(--color-red)", + "red-0": "var(--color-red-0)", + "red-300": "var(--color-red-300)", + "red-400": "var(--color-red-400)", + "red-500": "var(--color-red-500)", + "red-600": "var(--color-red-600)", + "red-900": "var(--color-red-900)", + "secondary": "var(--color-secondary)", + "secondary-hover": "var(--color-secondary-hover)", + "shadow-primary": "var(--color-shadow-primary)", + "shadow-secondary": "var(--color-shadow-secondary)", + "text": "var(--color-text)", + "text-accent": "var(--color-text-accent)", + "text-disabled": "var(--color-text-disabled)", + "text-secondary": "var(--color-text-secondary)", + "white": "var(--color-white)", + "white-100": "var(--color-white-100)", + "white-200": "var(--color-white-200)", + "white-300": "var(--color-white-300)", + "white-400": "var(--color-white-400)", + "white-500": "var(--color-white-500)", + "white-600": "var(--color-white-600)", + "white-700": "var(--color-white-700)", + "yellow": "var(--color-yellow)", + "yellow-0": "var(--color-yellow-0)", + "yellow-400": "var(--color-yellow-400)", + "yellow-500": "var(--color-yellow-500)", + "yellow-900": "var(--color-yellow-900)", }, "elements": { "headerHeight": "var(--elements-headerHeight)", "headerZ": "var(--elements-headerZ)", }, "elevation": { - "hover-shadow": "-8px 8px 0 0 var(--colors-shadow-primary)", + "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)", "hover-transform": "translate(4px, -4px)", - "hoverMirrored-shadow": "8px 8px 0 0 var(--colors-shadow-primary)", + "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)", "hoverMirrored-transform": "translate(-4px, -4px)", - "rest-shadow": "0 0 0 0 var(--colors-shadow-primary)", + "rest-shadow": "0 0 0 0 var(--color-shadow-primary)", "rest-transform": "none", }, "fontFamily": { @@ -1641,52 +1641,52 @@ exports[`themes lxStudio - theme shape 1`] = ` }, "_variables": { "mode": { - "--colors-action-danger": "var(--colors-palette-danger-800)", - "--colors-action-danger-hover": "var(--colors-palette-danger-900)", - "--colors-action-danger-pressed": "var(--colors-palette-danger-1000)", - "--colors-action-disabled": "var(--colors-palette-neutral-light-400)", - "--colors-action-neutral": "var(--colors-palette-neutral-dark-1000)", - "--colors-action-neutral-hover": "var(--colors-palette-neutral-dark-1100)", - "--colors-action-neutral-pressed": "var(--colors-black)", - "--colors-action-primary": "var(--colors-palette-primary-800)", - "--colors-action-primary-hover": "var(--colors-palette-primary-900)", - "--colors-action-primary-pressed": "var(--colors-palette-primary-1000)", - "--colors-background-current": "var(--colors-palette-neutral-light-100)", - "--colors-border-default": "var(--colors-palette-neutral-dark-600)", - "--colors-border-strong": "var(--colors-palette-neutral-dark-1100)", - "--colors-border-subtle": "var(--colors-palette-neutral-dark-300)", - "--colors-shadow-ambient": "var(--colors-palette-neutral-dark-1100-a12)", - "--colors-shadow-key": "var(--colors-palette-neutral-dark-1100-a16)", - "--colors-shadow-scrim": "var(--colors-black-a60)", - "--colors-state-hover": "var(--colors-palette-primary-600-a6)", - "--colors-state-pressed": "var(--colors-palette-primary-600-a9)", - "--colors-state-selected": "var(--colors-palette-primary-600-a8)", - "--colors-surface-brand": "var(--colors-palette-neutral-light-100)", - "--colors-surface-brand-subtle": "var(--colors-palette-neutral-light-100)", - "--colors-surface-default": "var(--colors-palette-neutral-light-100)", - "--colors-surface-error": "var(--colors-palette-danger-200)", - "--colors-surface-raised": "var(--colors-white)", - "--colors-surface-success": "var(--colors-palette-success-200)", - "--colors-surface-sunken": "var(--colors-palette-neutral-light-200)", - "--colors-surface-warning": "var(--colors-palette-warning-200)", - "--colors-text-default": "var(--colors-palette-neutral-dark-1000)", - "--colors-text-error": "var(--colors-palette-danger-900)", - "--colors-text-inverse": "var(--colors-palette-neutral-light-200)", - "--colors-text-subtle": "var(--colors-palette-neutral-dark-800)", - "--colors-text-success": "var(--colors-palette-success-900)", - "--colors-text-warning": "var(--colors-palette-warning-900)", - "--colors-viz-1": "var(--colors-palette-primary-800)", - "--colors-viz-2": "var(--colors-palette-accent-700)", - "--colors-viz-3": "var(--colors-palette-warning-700)", - "--colors-viz-4": "var(--colors-palette-accent-alt-600)", - "--colors-viz-5": "var(--colors-palette-success-600)", - "--colors-viz-6": "var(--colors-palette-danger-600)", - "--colors-viz-7": "var(--colors-palette-neutral-dark-1000)", - "--colors-viz-8": "var(--colors-palette-neutral-light-600)", - "--colors-viz-seq-1": "var(--colors-palette-primary-600)", - "--colors-viz-seq-2": "var(--colors-palette-primary-700)", - "--colors-viz-seq-3": "var(--colors-palette-primary-800)", - "--colors-viz-seq-4": "var(--colors-palette-primary-900)", + "--color-action-danger": "var(--color-palette-danger-800)", + "--color-action-danger-hover": "var(--color-palette-danger-900)", + "--color-action-danger-pressed": "var(--color-palette-danger-1000)", + "--color-action-disabled": "var(--color-palette-neutral-light-400)", + "--color-action-neutral": "var(--color-palette-neutral-dark-1000)", + "--color-action-neutral-hover": "var(--color-palette-neutral-dark-1100)", + "--color-action-neutral-pressed": "var(--color-black)", + "--color-action-primary": "var(--color-palette-primary-800)", + "--color-action-primary-hover": "var(--color-palette-primary-900)", + "--color-action-primary-pressed": "var(--color-palette-primary-1000)", + "--color-background-current": "var(--color-palette-neutral-light-100)", + "--color-border-default": "var(--color-palette-neutral-dark-600)", + "--color-border-strong": "var(--color-palette-neutral-dark-1100)", + "--color-border-subtle": "var(--color-palette-neutral-dark-300)", + "--color-shadow-ambient": "var(--color-palette-neutral-dark-1100-a12)", + "--color-shadow-key": "var(--color-palette-neutral-dark-1100-a16)", + "--color-shadow-scrim": "var(--color-black-a60)", + "--color-state-hover": "var(--color-palette-primary-600-a6)", + "--color-state-pressed": "var(--color-palette-primary-600-a9)", + "--color-state-selected": "var(--color-palette-primary-600-a8)", + "--color-surface-brand": "var(--color-palette-neutral-light-100)", + "--color-surface-brand-subtle": "var(--color-palette-neutral-light-100)", + "--color-surface-default": "var(--color-palette-neutral-light-100)", + "--color-surface-error": "var(--color-palette-danger-200)", + "--color-surface-raised": "var(--color-white)", + "--color-surface-success": "var(--color-palette-success-200)", + "--color-surface-sunken": "var(--color-palette-neutral-light-200)", + "--color-surface-warning": "var(--color-palette-warning-200)", + "--color-text-default": "var(--color-palette-neutral-dark-1000)", + "--color-text-error": "var(--color-palette-danger-900)", + "--color-text-inverse": "var(--color-palette-neutral-light-200)", + "--color-text-subtle": "var(--color-palette-neutral-dark-800)", + "--color-text-success": "var(--color-palette-success-900)", + "--color-text-warning": "var(--color-palette-warning-900)", + "--color-viz-1": "var(--color-palette-primary-800)", + "--color-viz-2": "var(--color-palette-accent-700)", + "--color-viz-3": "var(--color-palette-warning-700)", + "--color-viz-4": "var(--color-palette-accent-alt-600)", + "--color-viz-5": "var(--color-palette-success-600)", + "--color-viz-6": "var(--color-palette-danger-600)", + "--color-viz-7": "var(--color-palette-neutral-dark-1000)", + "--color-viz-8": "var(--color-palette-neutral-light-600)", + "--color-viz-seq-1": "var(--color-palette-primary-600)", + "--color-viz-seq-2": "var(--color-palette-primary-700)", + "--color-viz-seq-3": "var(--color-palette-primary-800)", + "--color-viz-seq-4": "var(--color-palette-primary-900)", }, "root": { "--elements-headerHeight": "4rem", @@ -1705,8 +1705,8 @@ exports[`themes lxStudio - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--colors-border-strong)", - "2": "2px solid var(--colors-border-strong)", + "1": "1px solid var(--color-border-strong)", + "2": "2px solid var(--color-border-strong)", }, "brand": "lxStudio", "breakpoints": { @@ -1723,150 +1723,150 @@ exports[`themes lxStudio - theme shape 1`] = ` "xs": "@media only screen and (min-width: 480px)", }, "colors": { - "action-danger": "var(--colors-action-danger)", - "action-danger-hover": "var(--colors-action-danger-hover)", - "action-danger-pressed": "var(--colors-action-danger-pressed)", - "action-disabled": "var(--colors-action-disabled)", - "action-neutral": "var(--colors-action-neutral)", - "action-neutral-hover": "var(--colors-action-neutral-hover)", - "action-neutral-pressed": "var(--colors-action-neutral-pressed)", - "action-primary": "var(--colors-action-primary)", - "action-primary-hover": "var(--colors-action-primary-hover)", - "action-primary-pressed": "var(--colors-action-primary-pressed)", - "background-current": "var(--colors-background-current)", - "black": "var(--colors-black)", - "black-a24": "var(--colors-black-a24)", - "black-a32": "var(--colors-black-a32)", - "black-a60": "var(--colors-black-a60)", - "border-default": "var(--colors-border-default)", - "border-strong": "var(--colors-border-strong)", - "border-subtle": "var(--colors-border-subtle)", - "palette-accent-100": "var(--colors-palette-accent-100)", - "palette-accent-1000": "var(--colors-palette-accent-1000)", - "palette-accent-1100": "var(--colors-palette-accent-1100)", - "palette-accent-200": "var(--colors-palette-accent-200)", - "palette-accent-300": "var(--colors-palette-accent-300)", - "palette-accent-400": "var(--colors-palette-accent-400)", - "palette-accent-500": "var(--colors-palette-accent-500)", - "palette-accent-600": "var(--colors-palette-accent-600)", - "palette-accent-700": "var(--colors-palette-accent-700)", - "palette-accent-800": "var(--colors-palette-accent-800)", - "palette-accent-900": "var(--colors-palette-accent-900)", - "palette-accent-alt-100": "var(--colors-palette-accent-alt-100)", - "palette-accent-alt-1000": "var(--colors-palette-accent-alt-1000)", - "palette-accent-alt-1100": "var(--colors-palette-accent-alt-1100)", - "palette-accent-alt-200": "var(--colors-palette-accent-alt-200)", - "palette-accent-alt-300": "var(--colors-palette-accent-alt-300)", - "palette-accent-alt-400": "var(--colors-palette-accent-alt-400)", - "palette-accent-alt-500": "var(--colors-palette-accent-alt-500)", - "palette-accent-alt-600": "var(--colors-palette-accent-alt-600)", - "palette-accent-alt-700": "var(--colors-palette-accent-alt-700)", - "palette-accent-alt-800": "var(--colors-palette-accent-alt-800)", - "palette-accent-alt-900": "var(--colors-palette-accent-alt-900)", - "palette-danger-100": "var(--colors-palette-danger-100)", - "palette-danger-1000": "var(--colors-palette-danger-1000)", - "palette-danger-1100": "var(--colors-palette-danger-1100)", - "palette-danger-200": "var(--colors-palette-danger-200)", - "palette-danger-300": "var(--colors-palette-danger-300)", - "palette-danger-400": "var(--colors-palette-danger-400)", - "palette-danger-500": "var(--colors-palette-danger-500)", - "palette-danger-600": "var(--colors-palette-danger-600)", - "palette-danger-700": "var(--colors-palette-danger-700)", - "palette-danger-800": "var(--colors-palette-danger-800)", - "palette-danger-900": "var(--colors-palette-danger-900)", - "palette-neutral-dark-100": "var(--colors-palette-neutral-dark-100)", - "palette-neutral-dark-1000": "var(--colors-palette-neutral-dark-1000)", - "palette-neutral-dark-1100": "var(--colors-palette-neutral-dark-1100)", - "palette-neutral-dark-1100-a12": "var(--colors-palette-neutral-dark-1100-a12)", - "palette-neutral-dark-1100-a16": "var(--colors-palette-neutral-dark-1100-a16)", - "palette-neutral-dark-200": "var(--colors-palette-neutral-dark-200)", - "palette-neutral-dark-300": "var(--colors-palette-neutral-dark-300)", - "palette-neutral-dark-400": "var(--colors-palette-neutral-dark-400)", - "palette-neutral-dark-500": "var(--colors-palette-neutral-dark-500)", - "palette-neutral-dark-600": "var(--colors-palette-neutral-dark-600)", - "palette-neutral-dark-700": "var(--colors-palette-neutral-dark-700)", - "palette-neutral-dark-800": "var(--colors-palette-neutral-dark-800)", - "palette-neutral-dark-900": "var(--colors-palette-neutral-dark-900)", - "palette-neutral-light-100": "var(--colors-palette-neutral-light-100)", - "palette-neutral-light-1000": "var(--colors-palette-neutral-light-1000)", - "palette-neutral-light-1100": "var(--colors-palette-neutral-light-1100)", - "palette-neutral-light-200": "var(--colors-palette-neutral-light-200)", - "palette-neutral-light-300": "var(--colors-palette-neutral-light-300)", - "palette-neutral-light-400": "var(--colors-palette-neutral-light-400)", - "palette-neutral-light-500": "var(--colors-palette-neutral-light-500)", - "palette-neutral-light-600": "var(--colors-palette-neutral-light-600)", - "palette-neutral-light-700": "var(--colors-palette-neutral-light-700)", - "palette-neutral-light-800": "var(--colors-palette-neutral-light-800)", - "palette-neutral-light-900": "var(--colors-palette-neutral-light-900)", - "palette-primary-100": "var(--colors-palette-primary-100)", - "palette-primary-1000": "var(--colors-palette-primary-1000)", - "palette-primary-1100": "var(--colors-palette-primary-1100)", - "palette-primary-200": "var(--colors-palette-primary-200)", - "palette-primary-300": "var(--colors-palette-primary-300)", - "palette-primary-400": "var(--colors-palette-primary-400)", - "palette-primary-500": "var(--colors-palette-primary-500)", - "palette-primary-600": "var(--colors-palette-primary-600)", - "palette-primary-600-a6": "var(--colors-palette-primary-600-a6)", - "palette-primary-600-a8": "var(--colors-palette-primary-600-a8)", - "palette-primary-600-a9": "var(--colors-palette-primary-600-a9)", - "palette-primary-700": "var(--colors-palette-primary-700)", - "palette-primary-800": "var(--colors-palette-primary-800)", - "palette-primary-900": "var(--colors-palette-primary-900)", - "palette-success-100": "var(--colors-palette-success-100)", - "palette-success-1000": "var(--colors-palette-success-1000)", - "palette-success-1100": "var(--colors-palette-success-1100)", - "palette-success-200": "var(--colors-palette-success-200)", - "palette-success-300": "var(--colors-palette-success-300)", - "palette-success-400": "var(--colors-palette-success-400)", - "palette-success-500": "var(--colors-palette-success-500)", - "palette-success-600": "var(--colors-palette-success-600)", - "palette-success-700": "var(--colors-palette-success-700)", - "palette-success-800": "var(--colors-palette-success-800)", - "palette-success-900": "var(--colors-palette-success-900)", - "palette-warning-100": "var(--colors-palette-warning-100)", - "palette-warning-1000": "var(--colors-palette-warning-1000)", - "palette-warning-1100": "var(--colors-palette-warning-1100)", - "palette-warning-200": "var(--colors-palette-warning-200)", - "palette-warning-300": "var(--colors-palette-warning-300)", - "palette-warning-400": "var(--colors-palette-warning-400)", - "palette-warning-500": "var(--colors-palette-warning-500)", - "palette-warning-600": "var(--colors-palette-warning-600)", - "palette-warning-700": "var(--colors-palette-warning-700)", - "palette-warning-800": "var(--colors-palette-warning-800)", - "palette-warning-900": "var(--colors-palette-warning-900)", - "shadow-ambient": "var(--colors-shadow-ambient)", - "shadow-key": "var(--colors-shadow-key)", - "shadow-scrim": "var(--colors-shadow-scrim)", - "state-hover": "var(--colors-state-hover)", - "state-pressed": "var(--colors-state-pressed)", - "state-selected": "var(--colors-state-selected)", - "surface-brand": "var(--colors-surface-brand)", - "surface-brand-subtle": "var(--colors-surface-brand-subtle)", - "surface-default": "var(--colors-surface-default)", - "surface-error": "var(--colors-surface-error)", - "surface-raised": "var(--colors-surface-raised)", - "surface-success": "var(--colors-surface-success)", - "surface-sunken": "var(--colors-surface-sunken)", - "surface-warning": "var(--colors-surface-warning)", - "text-default": "var(--colors-text-default)", - "text-error": "var(--colors-text-error)", - "text-inverse": "var(--colors-text-inverse)", - "text-subtle": "var(--colors-text-subtle)", - "text-success": "var(--colors-text-success)", - "text-warning": "var(--colors-text-warning)", - "viz-1": "var(--colors-viz-1)", - "viz-2": "var(--colors-viz-2)", - "viz-3": "var(--colors-viz-3)", - "viz-4": "var(--colors-viz-4)", - "viz-5": "var(--colors-viz-5)", - "viz-6": "var(--colors-viz-6)", - "viz-7": "var(--colors-viz-7)", - "viz-8": "var(--colors-viz-8)", - "viz-seq-1": "var(--colors-viz-seq-1)", - "viz-seq-2": "var(--colors-viz-seq-2)", - "viz-seq-3": "var(--colors-viz-seq-3)", - "viz-seq-4": "var(--colors-viz-seq-4)", - "white": "var(--colors-white)", + "action-danger": "var(--color-action-danger)", + "action-danger-hover": "var(--color-action-danger-hover)", + "action-danger-pressed": "var(--color-action-danger-pressed)", + "action-disabled": "var(--color-action-disabled)", + "action-neutral": "var(--color-action-neutral)", + "action-neutral-hover": "var(--color-action-neutral-hover)", + "action-neutral-pressed": "var(--color-action-neutral-pressed)", + "action-primary": "var(--color-action-primary)", + "action-primary-hover": "var(--color-action-primary-hover)", + "action-primary-pressed": "var(--color-action-primary-pressed)", + "background-current": "var(--color-background-current)", + "black": "var(--color-black)", + "black-a24": "var(--color-black-a24)", + "black-a32": "var(--color-black-a32)", + "black-a60": "var(--color-black-a60)", + "border-default": "var(--color-border-default)", + "border-strong": "var(--color-border-strong)", + "border-subtle": "var(--color-border-subtle)", + "palette-accent-100": "var(--color-palette-accent-100)", + "palette-accent-1000": "var(--color-palette-accent-1000)", + "palette-accent-1100": "var(--color-palette-accent-1100)", + "palette-accent-200": "var(--color-palette-accent-200)", + "palette-accent-300": "var(--color-palette-accent-300)", + "palette-accent-400": "var(--color-palette-accent-400)", + "palette-accent-500": "var(--color-palette-accent-500)", + "palette-accent-600": "var(--color-palette-accent-600)", + "palette-accent-700": "var(--color-palette-accent-700)", + "palette-accent-800": "var(--color-palette-accent-800)", + "palette-accent-900": "var(--color-palette-accent-900)", + "palette-accent-alt-100": "var(--color-palette-accent-alt-100)", + "palette-accent-alt-1000": "var(--color-palette-accent-alt-1000)", + "palette-accent-alt-1100": "var(--color-palette-accent-alt-1100)", + "palette-accent-alt-200": "var(--color-palette-accent-alt-200)", + "palette-accent-alt-300": "var(--color-palette-accent-alt-300)", + "palette-accent-alt-400": "var(--color-palette-accent-alt-400)", + "palette-accent-alt-500": "var(--color-palette-accent-alt-500)", + "palette-accent-alt-600": "var(--color-palette-accent-alt-600)", + "palette-accent-alt-700": "var(--color-palette-accent-alt-700)", + "palette-accent-alt-800": "var(--color-palette-accent-alt-800)", + "palette-accent-alt-900": "var(--color-palette-accent-alt-900)", + "palette-danger-100": "var(--color-palette-danger-100)", + "palette-danger-1000": "var(--color-palette-danger-1000)", + "palette-danger-1100": "var(--color-palette-danger-1100)", + "palette-danger-200": "var(--color-palette-danger-200)", + "palette-danger-300": "var(--color-palette-danger-300)", + "palette-danger-400": "var(--color-palette-danger-400)", + "palette-danger-500": "var(--color-palette-danger-500)", + "palette-danger-600": "var(--color-palette-danger-600)", + "palette-danger-700": "var(--color-palette-danger-700)", + "palette-danger-800": "var(--color-palette-danger-800)", + "palette-danger-900": "var(--color-palette-danger-900)", + "palette-neutral-dark-100": "var(--color-palette-neutral-dark-100)", + "palette-neutral-dark-1000": "var(--color-palette-neutral-dark-1000)", + "palette-neutral-dark-1100": "var(--color-palette-neutral-dark-1100)", + "palette-neutral-dark-1100-a12": "var(--color-palette-neutral-dark-1100-a12)", + "palette-neutral-dark-1100-a16": "var(--color-palette-neutral-dark-1100-a16)", + "palette-neutral-dark-200": "var(--color-palette-neutral-dark-200)", + "palette-neutral-dark-300": "var(--color-palette-neutral-dark-300)", + "palette-neutral-dark-400": "var(--color-palette-neutral-dark-400)", + "palette-neutral-dark-500": "var(--color-palette-neutral-dark-500)", + "palette-neutral-dark-600": "var(--color-palette-neutral-dark-600)", + "palette-neutral-dark-700": "var(--color-palette-neutral-dark-700)", + "palette-neutral-dark-800": "var(--color-palette-neutral-dark-800)", + "palette-neutral-dark-900": "var(--color-palette-neutral-dark-900)", + "palette-neutral-light-100": "var(--color-palette-neutral-light-100)", + "palette-neutral-light-1000": "var(--color-palette-neutral-light-1000)", + "palette-neutral-light-1100": "var(--color-palette-neutral-light-1100)", + "palette-neutral-light-200": "var(--color-palette-neutral-light-200)", + "palette-neutral-light-300": "var(--color-palette-neutral-light-300)", + "palette-neutral-light-400": "var(--color-palette-neutral-light-400)", + "palette-neutral-light-500": "var(--color-palette-neutral-light-500)", + "palette-neutral-light-600": "var(--color-palette-neutral-light-600)", + "palette-neutral-light-700": "var(--color-palette-neutral-light-700)", + "palette-neutral-light-800": "var(--color-palette-neutral-light-800)", + "palette-neutral-light-900": "var(--color-palette-neutral-light-900)", + "palette-primary-100": "var(--color-palette-primary-100)", + "palette-primary-1000": "var(--color-palette-primary-1000)", + "palette-primary-1100": "var(--color-palette-primary-1100)", + "palette-primary-200": "var(--color-palette-primary-200)", + "palette-primary-300": "var(--color-palette-primary-300)", + "palette-primary-400": "var(--color-palette-primary-400)", + "palette-primary-500": "var(--color-palette-primary-500)", + "palette-primary-600": "var(--color-palette-primary-600)", + "palette-primary-600-a6": "var(--color-palette-primary-600-a6)", + "palette-primary-600-a8": "var(--color-palette-primary-600-a8)", + "palette-primary-600-a9": "var(--color-palette-primary-600-a9)", + "palette-primary-700": "var(--color-palette-primary-700)", + "palette-primary-800": "var(--color-palette-primary-800)", + "palette-primary-900": "var(--color-palette-primary-900)", + "palette-success-100": "var(--color-palette-success-100)", + "palette-success-1000": "var(--color-palette-success-1000)", + "palette-success-1100": "var(--color-palette-success-1100)", + "palette-success-200": "var(--color-palette-success-200)", + "palette-success-300": "var(--color-palette-success-300)", + "palette-success-400": "var(--color-palette-success-400)", + "palette-success-500": "var(--color-palette-success-500)", + "palette-success-600": "var(--color-palette-success-600)", + "palette-success-700": "var(--color-palette-success-700)", + "palette-success-800": "var(--color-palette-success-800)", + "palette-success-900": "var(--color-palette-success-900)", + "palette-warning-100": "var(--color-palette-warning-100)", + "palette-warning-1000": "var(--color-palette-warning-1000)", + "palette-warning-1100": "var(--color-palette-warning-1100)", + "palette-warning-200": "var(--color-palette-warning-200)", + "palette-warning-300": "var(--color-palette-warning-300)", + "palette-warning-400": "var(--color-palette-warning-400)", + "palette-warning-500": "var(--color-palette-warning-500)", + "palette-warning-600": "var(--color-palette-warning-600)", + "palette-warning-700": "var(--color-palette-warning-700)", + "palette-warning-800": "var(--color-palette-warning-800)", + "palette-warning-900": "var(--color-palette-warning-900)", + "shadow-ambient": "var(--color-shadow-ambient)", + "shadow-key": "var(--color-shadow-key)", + "shadow-scrim": "var(--color-shadow-scrim)", + "state-hover": "var(--color-state-hover)", + "state-pressed": "var(--color-state-pressed)", + "state-selected": "var(--color-state-selected)", + "surface-brand": "var(--color-surface-brand)", + "surface-brand-subtle": "var(--color-surface-brand-subtle)", + "surface-default": "var(--color-surface-default)", + "surface-error": "var(--color-surface-error)", + "surface-raised": "var(--color-surface-raised)", + "surface-success": "var(--color-surface-success)", + "surface-sunken": "var(--color-surface-sunken)", + "surface-warning": "var(--color-surface-warning)", + "text-default": "var(--color-text-default)", + "text-error": "var(--color-text-error)", + "text-inverse": "var(--color-text-inverse)", + "text-subtle": "var(--color-text-subtle)", + "text-success": "var(--color-text-success)", + "text-warning": "var(--color-text-warning)", + "viz-1": "var(--color-viz-1)", + "viz-2": "var(--color-viz-2)", + "viz-3": "var(--color-viz-3)", + "viz-4": "var(--color-viz-4)", + "viz-5": "var(--color-viz-5)", + "viz-6": "var(--color-viz-6)", + "viz-7": "var(--color-viz-7)", + "viz-8": "var(--color-viz-8)", + "viz-seq-1": "var(--color-viz-seq-1)", + "viz-seq-2": "var(--color-viz-seq-2)", + "viz-seq-3": "var(--color-viz-seq-3)", + "viz-seq-4": "var(--color-viz-seq-4)", + "white": "var(--color-white)", }, "contentModes": { "black": "dark", @@ -1965,11 +1965,11 @@ exports[`themes lxStudio - theme shape 1`] = ` "headerZ": "var(--elements-headerZ)", }, "elevation": { - "hover-shadow": "0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)", + "hover-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", "hover-transform": "none", - "hoverMirrored-shadow": "0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)", + "hoverMirrored-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", "hoverMirrored-transform": "none", - "rest-shadow": "0 1px 4px 0 var(--colors-shadow-key), 0 2px 7px 0 var(--colors-shadow-ambient)", + "rest-shadow": "0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)", "rest-transform": "none", }, "fontFamily": { @@ -2126,210 +2126,210 @@ monospace", @layer tokens { :root, [data-brand="lxStudio"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9876 0.0017 247.84); - --colors-palette-neutral-light-200: oklch(0.9364 0.0025 247.80); - --colors-palette-neutral-light-300: oklch(0.8497 0.0086 247.80); - --colors-palette-neutral-light-400: oklch(0.7628 0.0178 247.80); - --colors-palette-neutral-light-500: oklch(0.6707 0.0316 247.80); - --colors-palette-neutral-light-600: oklch(0.5835 0.0312 247.80); - --colors-palette-neutral-light-700: oklch(0.4972 0.0253 247.80); - --colors-palette-neutral-light-800: oklch(0.4115 0.0198 247.80); - --colors-palette-neutral-light-900: oklch(0.3346 0.0157 247.80); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 262.40); - --colors-palette-primary-200: oklch(0.9364 0.0121 262.40); - --colors-palette-primary-300: oklch(0.8497 0.0407 262.40); - --colors-palette-primary-400: oklch(0.7628 0.0846 262.40); - --colors-palette-primary-500: oklch(0.6707 0.1531 262.40); - --colors-palette-primary-600: oklch(0.5835 0.2274 262.40); - --colors-palette-primary-700: oklch(0.4972 0.2254 262.40); - --colors-palette-primary-800: oklch(0.4115 0.1767 262.40); - --colors-palette-primary-900: oklch(0.3346 0.1405 262.40); - --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40); - --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40); - --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8497 0.0957 93.60); - --colors-palette-accent-400: oklch(0.7628 0.1094 93.60); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0204 156.70); - --colors-palette-success-200: oklch(0.9364 0.0405 156.70); - --colors-palette-success-300: oklch(0.8497 0.1118 156.70); - --colors-palette-success-400: oklch(0.7628 0.1278 156.70); - --colors-palette-success-500: oklch(0.6707 0.1413 156.70); - --colors-palette-success-600: oklch(0.5835 0.1396 156.70); - --colors-palette-success-700: oklch(0.4972 0.1130 156.70); - --colors-palette-success-800: oklch(0.4115 0.0886 156.70); - --colors-palette-success-900: oklch(0.3346 0.0704 156.70); - --colors-palette-success-1000: oklch(0.2499 0.0502 156.70); - --colors-palette-success-1100: oklch(0.1925 0.0368 156.70); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9876 0.0017 247.84); + --color-palette-neutral-light-200: oklch(0.9364 0.0025 247.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0086 247.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0178 247.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0316 247.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0312 247.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0253 247.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0198 247.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0157 247.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 262.40); + --color-palette-primary-200: oklch(0.9364 0.0121 262.40); + --color-palette-primary-300: oklch(0.8497 0.0407 262.40); + --color-palette-primary-400: oklch(0.7628 0.0846 262.40); + --color-palette-primary-500: oklch(0.6707 0.1531 262.40); + --color-palette-primary-600: oklch(0.5835 0.2274 262.40); + --color-palette-primary-700: oklch(0.4972 0.2254 262.40); + --color-palette-primary-800: oklch(0.4115 0.1767 262.40); + --color-palette-primary-900: oklch(0.3346 0.1405 262.40); + --color-palette-primary-1000: oklch(0.2499 0.1001 262.40); + --color-palette-primary-1100: oklch(0.1925 0.0734 262.40); + --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8497 0.0957 93.60); + --color-palette-accent-400: oklch(0.7628 0.1094 93.60); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0204 156.70); + --color-palette-success-200: oklch(0.9364 0.0405 156.70); + --color-palette-success-300: oklch(0.8497 0.1118 156.70); + --color-palette-success-400: oklch(0.7628 0.1278 156.70); + --color-palette-success-500: oklch(0.6707 0.1413 156.70); + --color-palette-success-600: oklch(0.5835 0.1396 156.70); + --color-palette-success-700: oklch(0.4972 0.1130 156.70); + --color-palette-success-800: oklch(0.4115 0.0886 156.70); + --color-palette-success-900: oklch(0.3346 0.0704 156.70); + --color-palette-success-1000: oklch(0.2499 0.0502 156.70); + --color-palette-success-1100: oklch(0.1925 0.0368 156.70); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } ", @@ -2548,52 +2548,52 @@ exports[`themes platform - theme shape 1`] = ` }, "_variables": { "mode": { - "--colors-action-danger": "var(--colors-palette-danger-400)", - "--colors-action-danger-hover": "var(--colors-palette-danger-300)", - "--colors-action-danger-pressed": "var(--colors-palette-danger-200)", - "--colors-action-disabled": "var(--colors-palette-neutral-dark-800)", - "--colors-action-neutral": "var(--colors-palette-neutral-light-200)", - "--colors-action-neutral-hover": "var(--colors-palette-neutral-light-100)", - "--colors-action-neutral-pressed": "var(--colors-white)", - "--colors-action-primary": "var(--colors-palette-accent-300)", - "--colors-action-primary-hover": "var(--colors-palette-accent-400)", - "--colors-action-primary-pressed": "var(--colors-palette-accent-500)", - "--colors-background-current": "var(--colors-palette-neutral-dark-1100)", - "--colors-border-default": "var(--colors-palette-neutral-light-600)", - "--colors-border-strong": "var(--colors-palette-neutral-light-100)", - "--colors-border-subtle": "var(--colors-palette-neutral-light-900)", - "--colors-shadow-ambient": "var(--colors-black-a24)", - "--colors-shadow-key": "var(--colors-black-a32)", - "--colors-shadow-scrim": "var(--colors-black-a60)", - "--colors-state-hover": "var(--colors-palette-primary-600-a6)", - "--colors-state-pressed": "var(--colors-palette-primary-600-a9)", - "--colors-state-selected": "var(--colors-palette-primary-600-a8)", - "--colors-surface-brand": "var(--colors-palette-neutral-dark-1100)", - "--colors-surface-brand-subtle": "var(--colors-palette-neutral-dark-1100)", - "--colors-surface-default": "var(--colors-palette-neutral-dark-1100)", - "--colors-surface-error": "var(--colors-palette-danger-1000)", - "--colors-surface-raised": "var(--colors-palette-neutral-dark-1000)", - "--colors-surface-success": "var(--colors-palette-success-1000)", - "--colors-surface-sunken": "var(--colors-black)", - "--colors-surface-warning": "var(--colors-palette-warning-1000)", - "--colors-text-default": "var(--colors-palette-neutral-light-200)", - "--colors-text-error": "var(--colors-palette-danger-300)", - "--colors-text-inverse": "var(--colors-palette-neutral-dark-1000)", - "--colors-text-subtle": "var(--colors-palette-neutral-light-400)", - "--colors-text-success": "var(--colors-palette-success-300)", - "--colors-text-warning": "var(--colors-palette-warning-300)", - "--colors-viz-1": "var(--colors-palette-primary-500)", - "--colors-viz-2": "var(--colors-palette-accent-500)", - "--colors-viz-3": "var(--colors-palette-warning-400)", - "--colors-viz-4": "var(--colors-palette-accent-alt-600)", - "--colors-viz-5": "var(--colors-palette-success-300)", - "--colors-viz-6": "var(--colors-palette-danger-600)", - "--colors-viz-7": "var(--colors-palette-neutral-dark-500)", - "--colors-viz-8": "var(--colors-palette-neutral-light-600)", - "--colors-viz-seq-1": "var(--colors-palette-primary-600)", - "--colors-viz-seq-2": "var(--colors-palette-primary-500)", - "--colors-viz-seq-3": "var(--colors-palette-primary-400)", - "--colors-viz-seq-4": "var(--colors-palette-primary-300)", + "--color-action-danger": "var(--color-palette-danger-400)", + "--color-action-danger-hover": "var(--color-palette-danger-300)", + "--color-action-danger-pressed": "var(--color-palette-danger-200)", + "--color-action-disabled": "var(--color-palette-neutral-dark-800)", + "--color-action-neutral": "var(--color-palette-neutral-light-200)", + "--color-action-neutral-hover": "var(--color-palette-neutral-light-100)", + "--color-action-neutral-pressed": "var(--color-white)", + "--color-action-primary": "var(--color-palette-accent-300)", + "--color-action-primary-hover": "var(--color-palette-accent-400)", + "--color-action-primary-pressed": "var(--color-palette-accent-500)", + "--color-background-current": "var(--color-palette-neutral-dark-1100)", + "--color-border-default": "var(--color-palette-neutral-light-600)", + "--color-border-strong": "var(--color-palette-neutral-light-100)", + "--color-border-subtle": "var(--color-palette-neutral-light-900)", + "--color-shadow-ambient": "var(--color-black-a24)", + "--color-shadow-key": "var(--color-black-a32)", + "--color-shadow-scrim": "var(--color-black-a60)", + "--color-state-hover": "var(--color-palette-primary-600-a6)", + "--color-state-pressed": "var(--color-palette-primary-600-a9)", + "--color-state-selected": "var(--color-palette-primary-600-a8)", + "--color-surface-brand": "var(--color-palette-neutral-dark-1100)", + "--color-surface-brand-subtle": "var(--color-palette-neutral-dark-1100)", + "--color-surface-default": "var(--color-palette-neutral-dark-1100)", + "--color-surface-error": "var(--color-palette-danger-1000)", + "--color-surface-raised": "var(--color-palette-neutral-dark-1000)", + "--color-surface-success": "var(--color-palette-success-1000)", + "--color-surface-sunken": "var(--color-black)", + "--color-surface-warning": "var(--color-palette-warning-1000)", + "--color-text-default": "var(--color-palette-neutral-light-200)", + "--color-text-error": "var(--color-palette-danger-300)", + "--color-text-inverse": "var(--color-palette-neutral-dark-1000)", + "--color-text-subtle": "var(--color-palette-neutral-light-400)", + "--color-text-success": "var(--color-palette-success-300)", + "--color-text-warning": "var(--color-palette-warning-300)", + "--color-viz-1": "var(--color-palette-primary-500)", + "--color-viz-2": "var(--color-palette-accent-500)", + "--color-viz-3": "var(--color-palette-warning-400)", + "--color-viz-4": "var(--color-palette-accent-alt-600)", + "--color-viz-5": "var(--color-palette-success-300)", + "--color-viz-6": "var(--color-palette-danger-600)", + "--color-viz-7": "var(--color-palette-neutral-dark-500)", + "--color-viz-8": "var(--color-palette-neutral-light-600)", + "--color-viz-seq-1": "var(--color-palette-primary-600)", + "--color-viz-seq-2": "var(--color-palette-primary-500)", + "--color-viz-seq-3": "var(--color-palette-primary-400)", + "--color-viz-seq-4": "var(--color-palette-primary-300)", }, "root": { "--elements-headerHeight": "4rem", @@ -2612,8 +2612,8 @@ exports[`themes platform - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--colors-border-strong)", - "2": "2px solid var(--colors-border-strong)", + "1": "1px solid var(--color-border-strong)", + "2": "2px solid var(--color-border-strong)", }, "brand": "platform", "breakpoints": { @@ -2630,176 +2630,176 @@ exports[`themes platform - theme shape 1`] = ` "xs": "@media only screen and (min-width: 480px)", }, "colors": { - "action-danger": "var(--colors-action-danger)", - "action-danger-hover": "var(--colors-action-danger-hover)", - "action-danger-pressed": "var(--colors-action-danger-pressed)", - "action-disabled": "var(--colors-action-disabled)", - "action-neutral": "var(--colors-action-neutral)", - "action-neutral-hover": "var(--colors-action-neutral-hover)", - "action-neutral-pressed": "var(--colors-action-neutral-pressed)", - "action-primary": "var(--colors-action-primary)", - "action-primary-hover": "var(--colors-action-primary-hover)", - "action-primary-pressed": "var(--colors-action-primary-pressed)", - "background-current": "var(--colors-background-current)", - "black": "var(--colors-black)", - "black-a24": "var(--colors-black-a24)", - "black-a32": "var(--colors-black-a32)", - "black-a60": "var(--colors-black-a60)", - "border-default": "var(--colors-border-default)", - "border-strong": "var(--colors-border-strong)", - "border-subtle": "var(--colors-border-subtle)", - "editor-annotation": "var(--colors-editor-annotation)", - "editor-atom": "var(--colors-editor-atom)", - "editor-attribute": "var(--colors-editor-attribute)", - "editor-basic": "var(--colors-editor-basic)", - "editor-comment": "var(--colors-editor-comment)", - "editor-constant": "var(--colors-editor-constant)", - "editor-decoration": "var(--colors-editor-decoration)", - "editor-invalid": "var(--colors-editor-invalid)", - "editor-key": "var(--colors-editor-key)", - "editor-keyword": "var(--colors-editor-keyword)", - "editor-number": "var(--colors-editor-number)", - "editor-operator": "var(--colors-editor-operator)", - "editor-predefined": "var(--colors-editor-predefined)", - "editor-property": "var(--colors-editor-property)", - "editor-regexp": "var(--colors-editor-regexp)", - "editor-string": "var(--colors-editor-string)", - "editor-tag": "var(--colors-editor-tag)", - "editor-text": "var(--colors-editor-text)", - "editor-ui-background": "var(--colors-editor-ui-background)", - "editor-ui-indent-active": "var(--colors-editor-ui-indent-active)", - "editor-ui-indent-inactive": "var(--colors-editor-ui-indent-inactive)", - "editor-ui-line-number-active": "var(--colors-editor-ui-line-number-active)", - "editor-ui-line-number-inactive": "var(--colors-editor-ui-line-number-inactive)", - "editor-ui-text": "var(--colors-editor-ui-text)", - "editor-value": "var(--colors-editor-value)", - "editor-variable": "var(--colors-editor-variable)", - "palette-accent-100": "var(--colors-palette-accent-100)", - "palette-accent-1000": "var(--colors-palette-accent-1000)", - "palette-accent-1100": "var(--colors-palette-accent-1100)", - "palette-accent-200": "var(--colors-palette-accent-200)", - "palette-accent-300": "var(--colors-palette-accent-300)", - "palette-accent-400": "var(--colors-palette-accent-400)", - "palette-accent-500": "var(--colors-palette-accent-500)", - "palette-accent-600": "var(--colors-palette-accent-600)", - "palette-accent-700": "var(--colors-palette-accent-700)", - "palette-accent-800": "var(--colors-palette-accent-800)", - "palette-accent-900": "var(--colors-palette-accent-900)", - "palette-accent-alt-100": "var(--colors-palette-accent-alt-100)", - "palette-accent-alt-1000": "var(--colors-palette-accent-alt-1000)", - "palette-accent-alt-1100": "var(--colors-palette-accent-alt-1100)", - "palette-accent-alt-200": "var(--colors-palette-accent-alt-200)", - "palette-accent-alt-300": "var(--colors-palette-accent-alt-300)", - "palette-accent-alt-400": "var(--colors-palette-accent-alt-400)", - "palette-accent-alt-500": "var(--colors-palette-accent-alt-500)", - "palette-accent-alt-600": "var(--colors-palette-accent-alt-600)", - "palette-accent-alt-700": "var(--colors-palette-accent-alt-700)", - "palette-accent-alt-800": "var(--colors-palette-accent-alt-800)", - "palette-accent-alt-900": "var(--colors-palette-accent-alt-900)", - "palette-danger-100": "var(--colors-palette-danger-100)", - "palette-danger-1000": "var(--colors-palette-danger-1000)", - "palette-danger-1100": "var(--colors-palette-danger-1100)", - "palette-danger-200": "var(--colors-palette-danger-200)", - "palette-danger-300": "var(--colors-palette-danger-300)", - "palette-danger-400": "var(--colors-palette-danger-400)", - "palette-danger-500": "var(--colors-palette-danger-500)", - "palette-danger-600": "var(--colors-palette-danger-600)", - "palette-danger-700": "var(--colors-palette-danger-700)", - "palette-danger-800": "var(--colors-palette-danger-800)", - "palette-danger-900": "var(--colors-palette-danger-900)", - "palette-neutral-dark-100": "var(--colors-palette-neutral-dark-100)", - "palette-neutral-dark-1000": "var(--colors-palette-neutral-dark-1000)", - "palette-neutral-dark-1100": "var(--colors-palette-neutral-dark-1100)", - "palette-neutral-dark-1100-a12": "var(--colors-palette-neutral-dark-1100-a12)", - "palette-neutral-dark-1100-a16": "var(--colors-palette-neutral-dark-1100-a16)", - "palette-neutral-dark-200": "var(--colors-palette-neutral-dark-200)", - "palette-neutral-dark-300": "var(--colors-palette-neutral-dark-300)", - "palette-neutral-dark-400": "var(--colors-palette-neutral-dark-400)", - "palette-neutral-dark-500": "var(--colors-palette-neutral-dark-500)", - "palette-neutral-dark-600": "var(--colors-palette-neutral-dark-600)", - "palette-neutral-dark-700": "var(--colors-palette-neutral-dark-700)", - "palette-neutral-dark-800": "var(--colors-palette-neutral-dark-800)", - "palette-neutral-dark-900": "var(--colors-palette-neutral-dark-900)", - "palette-neutral-light-100": "var(--colors-palette-neutral-light-100)", - "palette-neutral-light-1000": "var(--colors-palette-neutral-light-1000)", - "palette-neutral-light-1100": "var(--colors-palette-neutral-light-1100)", - "palette-neutral-light-200": "var(--colors-palette-neutral-light-200)", - "palette-neutral-light-300": "var(--colors-palette-neutral-light-300)", - "palette-neutral-light-400": "var(--colors-palette-neutral-light-400)", - "palette-neutral-light-500": "var(--colors-palette-neutral-light-500)", - "palette-neutral-light-600": "var(--colors-palette-neutral-light-600)", - "palette-neutral-light-700": "var(--colors-palette-neutral-light-700)", - "palette-neutral-light-800": "var(--colors-palette-neutral-light-800)", - "palette-neutral-light-900": "var(--colors-palette-neutral-light-900)", - "palette-primary-100": "var(--colors-palette-primary-100)", - "palette-primary-1000": "var(--colors-palette-primary-1000)", - "palette-primary-1100": "var(--colors-palette-primary-1100)", - "palette-primary-200": "var(--colors-palette-primary-200)", - "palette-primary-300": "var(--colors-palette-primary-300)", - "palette-primary-400": "var(--colors-palette-primary-400)", - "palette-primary-500": "var(--colors-palette-primary-500)", - "palette-primary-600": "var(--colors-palette-primary-600)", - "palette-primary-600-a6": "var(--colors-palette-primary-600-a6)", - "palette-primary-600-a8": "var(--colors-palette-primary-600-a8)", - "palette-primary-600-a9": "var(--colors-palette-primary-600-a9)", - "palette-primary-700": "var(--colors-palette-primary-700)", - "palette-primary-800": "var(--colors-palette-primary-800)", - "palette-primary-900": "var(--colors-palette-primary-900)", - "palette-success-100": "var(--colors-palette-success-100)", - "palette-success-1000": "var(--colors-palette-success-1000)", - "palette-success-1100": "var(--colors-palette-success-1100)", - "palette-success-200": "var(--colors-palette-success-200)", - "palette-success-300": "var(--colors-palette-success-300)", - "palette-success-400": "var(--colors-palette-success-400)", - "palette-success-500": "var(--colors-palette-success-500)", - "palette-success-600": "var(--colors-palette-success-600)", - "palette-success-700": "var(--colors-palette-success-700)", - "palette-success-800": "var(--colors-palette-success-800)", - "palette-success-900": "var(--colors-palette-success-900)", - "palette-warning-100": "var(--colors-palette-warning-100)", - "palette-warning-1000": "var(--colors-palette-warning-1000)", - "palette-warning-1100": "var(--colors-palette-warning-1100)", - "palette-warning-200": "var(--colors-palette-warning-200)", - "palette-warning-300": "var(--colors-palette-warning-300)", - "palette-warning-400": "var(--colors-palette-warning-400)", - "palette-warning-500": "var(--colors-palette-warning-500)", - "palette-warning-600": "var(--colors-palette-warning-600)", - "palette-warning-700": "var(--colors-palette-warning-700)", - "palette-warning-800": "var(--colors-palette-warning-800)", - "palette-warning-900": "var(--colors-palette-warning-900)", - "shadow-ambient": "var(--colors-shadow-ambient)", - "shadow-key": "var(--colors-shadow-key)", - "shadow-scrim": "var(--colors-shadow-scrim)", - "state-hover": "var(--colors-state-hover)", - "state-pressed": "var(--colors-state-pressed)", - "state-selected": "var(--colors-state-selected)", - "surface-brand": "var(--colors-surface-brand)", - "surface-brand-subtle": "var(--colors-surface-brand-subtle)", - "surface-default": "var(--colors-surface-default)", - "surface-error": "var(--colors-surface-error)", - "surface-raised": "var(--colors-surface-raised)", - "surface-success": "var(--colors-surface-success)", - "surface-sunken": "var(--colors-surface-sunken)", - "surface-warning": "var(--colors-surface-warning)", - "text-default": "var(--colors-text-default)", - "text-error": "var(--colors-text-error)", - "text-inverse": "var(--colors-text-inverse)", - "text-subtle": "var(--colors-text-subtle)", - "text-success": "var(--colors-text-success)", - "text-warning": "var(--colors-text-warning)", - "viz-1": "var(--colors-viz-1)", - "viz-2": "var(--colors-viz-2)", - "viz-3": "var(--colors-viz-3)", - "viz-4": "var(--colors-viz-4)", - "viz-5": "var(--colors-viz-5)", - "viz-6": "var(--colors-viz-6)", - "viz-7": "var(--colors-viz-7)", - "viz-8": "var(--colors-viz-8)", - "viz-seq-1": "var(--colors-viz-seq-1)", - "viz-seq-2": "var(--colors-viz-seq-2)", - "viz-seq-3": "var(--colors-viz-seq-3)", - "viz-seq-4": "var(--colors-viz-seq-4)", - "white": "var(--colors-white)", + "action-danger": "var(--color-action-danger)", + "action-danger-hover": "var(--color-action-danger-hover)", + "action-danger-pressed": "var(--color-action-danger-pressed)", + "action-disabled": "var(--color-action-disabled)", + "action-neutral": "var(--color-action-neutral)", + "action-neutral-hover": "var(--color-action-neutral-hover)", + "action-neutral-pressed": "var(--color-action-neutral-pressed)", + "action-primary": "var(--color-action-primary)", + "action-primary-hover": "var(--color-action-primary-hover)", + "action-primary-pressed": "var(--color-action-primary-pressed)", + "background-current": "var(--color-background-current)", + "black": "var(--color-black)", + "black-a24": "var(--color-black-a24)", + "black-a32": "var(--color-black-a32)", + "black-a60": "var(--color-black-a60)", + "border-default": "var(--color-border-default)", + "border-strong": "var(--color-border-strong)", + "border-subtle": "var(--color-border-subtle)", + "editor-annotation": "var(--color-editor-annotation)", + "editor-atom": "var(--color-editor-atom)", + "editor-attribute": "var(--color-editor-attribute)", + "editor-basic": "var(--color-editor-basic)", + "editor-comment": "var(--color-editor-comment)", + "editor-constant": "var(--color-editor-constant)", + "editor-decoration": "var(--color-editor-decoration)", + "editor-invalid": "var(--color-editor-invalid)", + "editor-key": "var(--color-editor-key)", + "editor-keyword": "var(--color-editor-keyword)", + "editor-number": "var(--color-editor-number)", + "editor-operator": "var(--color-editor-operator)", + "editor-predefined": "var(--color-editor-predefined)", + "editor-property": "var(--color-editor-property)", + "editor-regexp": "var(--color-editor-regexp)", + "editor-string": "var(--color-editor-string)", + "editor-tag": "var(--color-editor-tag)", + "editor-text": "var(--color-editor-text)", + "editor-ui-background": "var(--color-editor-ui-background)", + "editor-ui-indent-active": "var(--color-editor-ui-indent-active)", + "editor-ui-indent-inactive": "var(--color-editor-ui-indent-inactive)", + "editor-ui-line-number-active": "var(--color-editor-ui-line-number-active)", + "editor-ui-line-number-inactive": "var(--color-editor-ui-line-number-inactive)", + "editor-ui-text": "var(--color-editor-ui-text)", + "editor-value": "var(--color-editor-value)", + "editor-variable": "var(--color-editor-variable)", + "palette-accent-100": "var(--color-palette-accent-100)", + "palette-accent-1000": "var(--color-palette-accent-1000)", + "palette-accent-1100": "var(--color-palette-accent-1100)", + "palette-accent-200": "var(--color-palette-accent-200)", + "palette-accent-300": "var(--color-palette-accent-300)", + "palette-accent-400": "var(--color-palette-accent-400)", + "palette-accent-500": "var(--color-palette-accent-500)", + "palette-accent-600": "var(--color-palette-accent-600)", + "palette-accent-700": "var(--color-palette-accent-700)", + "palette-accent-800": "var(--color-palette-accent-800)", + "palette-accent-900": "var(--color-palette-accent-900)", + "palette-accent-alt-100": "var(--color-palette-accent-alt-100)", + "palette-accent-alt-1000": "var(--color-palette-accent-alt-1000)", + "palette-accent-alt-1100": "var(--color-palette-accent-alt-1100)", + "palette-accent-alt-200": "var(--color-palette-accent-alt-200)", + "palette-accent-alt-300": "var(--color-palette-accent-alt-300)", + "palette-accent-alt-400": "var(--color-palette-accent-alt-400)", + "palette-accent-alt-500": "var(--color-palette-accent-alt-500)", + "palette-accent-alt-600": "var(--color-palette-accent-alt-600)", + "palette-accent-alt-700": "var(--color-palette-accent-alt-700)", + "palette-accent-alt-800": "var(--color-palette-accent-alt-800)", + "palette-accent-alt-900": "var(--color-palette-accent-alt-900)", + "palette-danger-100": "var(--color-palette-danger-100)", + "palette-danger-1000": "var(--color-palette-danger-1000)", + "palette-danger-1100": "var(--color-palette-danger-1100)", + "palette-danger-200": "var(--color-palette-danger-200)", + "palette-danger-300": "var(--color-palette-danger-300)", + "palette-danger-400": "var(--color-palette-danger-400)", + "palette-danger-500": "var(--color-palette-danger-500)", + "palette-danger-600": "var(--color-palette-danger-600)", + "palette-danger-700": "var(--color-palette-danger-700)", + "palette-danger-800": "var(--color-palette-danger-800)", + "palette-danger-900": "var(--color-palette-danger-900)", + "palette-neutral-dark-100": "var(--color-palette-neutral-dark-100)", + "palette-neutral-dark-1000": "var(--color-palette-neutral-dark-1000)", + "palette-neutral-dark-1100": "var(--color-palette-neutral-dark-1100)", + "palette-neutral-dark-1100-a12": "var(--color-palette-neutral-dark-1100-a12)", + "palette-neutral-dark-1100-a16": "var(--color-palette-neutral-dark-1100-a16)", + "palette-neutral-dark-200": "var(--color-palette-neutral-dark-200)", + "palette-neutral-dark-300": "var(--color-palette-neutral-dark-300)", + "palette-neutral-dark-400": "var(--color-palette-neutral-dark-400)", + "palette-neutral-dark-500": "var(--color-palette-neutral-dark-500)", + "palette-neutral-dark-600": "var(--color-palette-neutral-dark-600)", + "palette-neutral-dark-700": "var(--color-palette-neutral-dark-700)", + "palette-neutral-dark-800": "var(--color-palette-neutral-dark-800)", + "palette-neutral-dark-900": "var(--color-palette-neutral-dark-900)", + "palette-neutral-light-100": "var(--color-palette-neutral-light-100)", + "palette-neutral-light-1000": "var(--color-palette-neutral-light-1000)", + "palette-neutral-light-1100": "var(--color-palette-neutral-light-1100)", + "palette-neutral-light-200": "var(--color-palette-neutral-light-200)", + "palette-neutral-light-300": "var(--color-palette-neutral-light-300)", + "palette-neutral-light-400": "var(--color-palette-neutral-light-400)", + "palette-neutral-light-500": "var(--color-palette-neutral-light-500)", + "palette-neutral-light-600": "var(--color-palette-neutral-light-600)", + "palette-neutral-light-700": "var(--color-palette-neutral-light-700)", + "palette-neutral-light-800": "var(--color-palette-neutral-light-800)", + "palette-neutral-light-900": "var(--color-palette-neutral-light-900)", + "palette-primary-100": "var(--color-palette-primary-100)", + "palette-primary-1000": "var(--color-palette-primary-1000)", + "palette-primary-1100": "var(--color-palette-primary-1100)", + "palette-primary-200": "var(--color-palette-primary-200)", + "palette-primary-300": "var(--color-palette-primary-300)", + "palette-primary-400": "var(--color-palette-primary-400)", + "palette-primary-500": "var(--color-palette-primary-500)", + "palette-primary-600": "var(--color-palette-primary-600)", + "palette-primary-600-a6": "var(--color-palette-primary-600-a6)", + "palette-primary-600-a8": "var(--color-palette-primary-600-a8)", + "palette-primary-600-a9": "var(--color-palette-primary-600-a9)", + "palette-primary-700": "var(--color-palette-primary-700)", + "palette-primary-800": "var(--color-palette-primary-800)", + "palette-primary-900": "var(--color-palette-primary-900)", + "palette-success-100": "var(--color-palette-success-100)", + "palette-success-1000": "var(--color-palette-success-1000)", + "palette-success-1100": "var(--color-palette-success-1100)", + "palette-success-200": "var(--color-palette-success-200)", + "palette-success-300": "var(--color-palette-success-300)", + "palette-success-400": "var(--color-palette-success-400)", + "palette-success-500": "var(--color-palette-success-500)", + "palette-success-600": "var(--color-palette-success-600)", + "palette-success-700": "var(--color-palette-success-700)", + "palette-success-800": "var(--color-palette-success-800)", + "palette-success-900": "var(--color-palette-success-900)", + "palette-warning-100": "var(--color-palette-warning-100)", + "palette-warning-1000": "var(--color-palette-warning-1000)", + "palette-warning-1100": "var(--color-palette-warning-1100)", + "palette-warning-200": "var(--color-palette-warning-200)", + "palette-warning-300": "var(--color-palette-warning-300)", + "palette-warning-400": "var(--color-palette-warning-400)", + "palette-warning-500": "var(--color-palette-warning-500)", + "palette-warning-600": "var(--color-palette-warning-600)", + "palette-warning-700": "var(--color-palette-warning-700)", + "palette-warning-800": "var(--color-palette-warning-800)", + "palette-warning-900": "var(--color-palette-warning-900)", + "shadow-ambient": "var(--color-shadow-ambient)", + "shadow-key": "var(--color-shadow-key)", + "shadow-scrim": "var(--color-shadow-scrim)", + "state-hover": "var(--color-state-hover)", + "state-pressed": "var(--color-state-pressed)", + "state-selected": "var(--color-state-selected)", + "surface-brand": "var(--color-surface-brand)", + "surface-brand-subtle": "var(--color-surface-brand-subtle)", + "surface-default": "var(--color-surface-default)", + "surface-error": "var(--color-surface-error)", + "surface-raised": "var(--color-surface-raised)", + "surface-success": "var(--color-surface-success)", + "surface-sunken": "var(--color-surface-sunken)", + "surface-warning": "var(--color-surface-warning)", + "text-default": "var(--color-text-default)", + "text-error": "var(--color-text-error)", + "text-inverse": "var(--color-text-inverse)", + "text-subtle": "var(--color-text-subtle)", + "text-success": "var(--color-text-success)", + "text-warning": "var(--color-text-warning)", + "viz-1": "var(--color-viz-1)", + "viz-2": "var(--color-viz-2)", + "viz-3": "var(--color-viz-3)", + "viz-4": "var(--color-viz-4)", + "viz-5": "var(--color-viz-5)", + "viz-6": "var(--color-viz-6)", + "viz-7": "var(--color-viz-7)", + "viz-8": "var(--color-viz-8)", + "viz-seq-1": "var(--color-viz-seq-1)", + "viz-seq-2": "var(--color-viz-seq-2)", + "viz-seq-3": "var(--color-viz-seq-3)", + "viz-seq-4": "var(--color-viz-seq-4)", + "white": "var(--color-white)", }, "contentModes": { "black": "dark", @@ -2898,11 +2898,11 @@ exports[`themes platform - theme shape 1`] = ` "headerZ": "var(--elements-headerZ)", }, "elevation": { - "hover-shadow": "0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)", + "hover-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", "hover-transform": "none", - "hoverMirrored-shadow": "0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)", + "hoverMirrored-shadow": "0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)", "hoverMirrored-transform": "none", - "rest-shadow": "0 1px 4px 0 var(--colors-shadow-key), 0 2px 7px 0 var(--colors-shadow-ambient)", + "rest-shadow": "0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)", "rest-transform": "none", }, "fontFamily": { @@ -3057,213 +3057,213 @@ monospace", @layer tokens { :root, [data-brand="platform"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9867 0.0084 225.08); - --colors-palette-neutral-light-200: oklch(0.9364 0.0032 225.10); - --colors-palette-neutral-light-300: oklch(0.8497 0.0109 225.10); - --colors-palette-neutral-light-400: oklch(0.7628 0.0202 225.10); - --colors-palette-neutral-light-500: oklch(0.6707 0.0223 225.10); - --colors-palette-neutral-light-600: oklch(0.5835 0.0221 225.10); - --colors-palette-neutral-light-700: oklch(0.4972 0.0179 225.10); - --colors-palette-neutral-light-800: oklch(0.4115 0.0140 225.10); - --colors-palette-neutral-light-900: oklch(0.3346 0.0111 225.10); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 274.10); - --colors-palette-primary-200: oklch(0.9364 0.0121 274.10); - --colors-palette-primary-300: oklch(0.8497 0.0408 274.10); - --colors-palette-primary-400: oklch(0.7628 0.0849 274.10); - --colors-palette-primary-500: oklch(0.6707 0.1537 274.10); - --colors-palette-primary-600: oklch(0.5835 0.2285 274.10); - --colors-palette-primary-700: oklch(0.4972 0.2707 274.10); - --colors-palette-primary-800: oklch(0.4115 0.2344 274.10); - --colors-palette-primary-900: oklch(0.3346 0.1863 274.10); - --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10); - --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10); - --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8789 0.1801 93.58); - --colors-palette-accent-400: oklch(0.7442 0.1526 93.94); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0228 145.50); - --colors-palette-success-200: oklch(0.9364 0.0458 145.50); - --colors-palette-success-300: oklch(0.8497 0.1448 145.50); - --colors-palette-success-400: oklch(0.7628 0.1654 145.50); - --colors-palette-success-500: oklch(0.6707 0.1829 145.50); - --colors-palette-success-600: oklch(0.5835 0.1808 145.50); - --colors-palette-success-700: oklch(0.4972 0.1464 145.50); - --colors-palette-success-800: oklch(0.4115 0.1147 145.50); - --colors-palette-success-900: oklch(0.3346 0.0912 145.50); - --colors-palette-success-1000: oklch(0.2499 0.0650 145.50); - --colors-palette-success-1100: oklch(0.1925 0.0477 145.50); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9867 0.0084 225.08); + --color-palette-neutral-light-200: oklch(0.9364 0.0032 225.10); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 225.10); + --color-palette-neutral-light-400: oklch(0.7628 0.0202 225.10); + --color-palette-neutral-light-500: oklch(0.6707 0.0223 225.10); + --color-palette-neutral-light-600: oklch(0.5835 0.0221 225.10); + --color-palette-neutral-light-700: oklch(0.4972 0.0179 225.10); + --color-palette-neutral-light-800: oklch(0.4115 0.0140 225.10); + --color-palette-neutral-light-900: oklch(0.3346 0.0111 225.10); + --color-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10); + --color-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 274.10); + --color-palette-primary-200: oklch(0.9364 0.0121 274.10); + --color-palette-primary-300: oklch(0.8497 0.0408 274.10); + --color-palette-primary-400: oklch(0.7628 0.0849 274.10); + --color-palette-primary-500: oklch(0.6707 0.1537 274.10); + --color-palette-primary-600: oklch(0.5835 0.2285 274.10); + --color-palette-primary-700: oklch(0.4972 0.2707 274.10); + --color-palette-primary-800: oklch(0.4115 0.2344 274.10); + --color-palette-primary-900: oklch(0.3346 0.1863 274.10); + --color-palette-primary-1000: oklch(0.2499 0.1328 274.10); + --color-palette-primary-1100: oklch(0.1925 0.0974 274.10); + --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } } -@layer tokens{:root,[data-color-mode="dark"]{--colors-editor-attribute:#AEE938;--colors-editor-annotation:#E85D7F;--colors-editor-atom:#F966FF;--colors-editor-basic:#ffffff;--colors-editor-comment:#84868D;--colors-editor-constant:#FF8C00;--colors-editor-decoration:#E85D7F;--colors-editor-invalid:#E85D7F;--colors-editor-key:#66C4FF;--colors-editor-keyword:#B3CCFF;--colors-editor-number:#E85D7F;--colors-editor-operator:#E85D7F;--colors-editor-predefined:#ffffff;--colors-editor-property:#E85D7F;--colors-editor-regexp:#AEE938;--colors-editor-string:#FFD300;--colors-editor-tag:#E85D7F;--colors-editor-text:#FF8C00;--colors-editor-value:#FFD300;--colors-editor-variable:#AEE938;--colors-editor-ui-background:#0A0D1C;--colors-editor-ui-text:#ffffff;--colors-editor-ui-indent-active:#3B3D49;--colors-editor-ui-indent-inactive:#5F616B;--colors-editor-ui-line-number-active:#CECFD2;--colors-editor-ui-line-number-inactive:#84868D;}[data-color-mode="light"]{--colors-editor-attribute:#008A27;--colors-editor-annotation:#E91C11;--colors-editor-atom:#CA00D1;--colors-editor-basic:#10162F;--colors-editor-comment:#686C7B;--colors-editor-constant:#D14900;--colors-editor-decoration:#E91C11;--colors-editor-invalid:#E91C11;--colors-editor-key:#006D82;--colors-editor-keyword:#1557FF;--colors-editor-number:#E91C11;--colors-editor-operator:#E91C11;--colors-editor-predefined:#10162F;--colors-editor-property:#E91C11;--colors-editor-regexp:#008A27;--colors-editor-string:#8A7300;--colors-editor-tag:#E91C11;--colors-editor-text:#D14900;--colors-editor-value:#8A7300;--colors-editor-variable:#008A27;--colors-editor-ui-background:#ffffff;--colors-editor-ui-text:#10162F;--colors-editor-ui-indent-active:#BCBDC4;--colors-editor-ui-indent-inactive:#8E919D;--colors-editor-ui-line-number-active:#31374C;--colors-editor-ui-line-number-inactive:#686C7B;}}", +@layer tokens{:root,[data-color-mode="dark"]{--color-editor-attribute:#AEE938;--color-editor-annotation:#E85D7F;--color-editor-atom:#F966FF;--color-editor-basic:#ffffff;--color-editor-comment:#84868D;--color-editor-constant:#FF8C00;--color-editor-decoration:#E85D7F;--color-editor-invalid:#E85D7F;--color-editor-key:#66C4FF;--color-editor-keyword:#B3CCFF;--color-editor-number:#E85D7F;--color-editor-operator:#E85D7F;--color-editor-predefined:#ffffff;--color-editor-property:#E85D7F;--color-editor-regexp:#AEE938;--color-editor-string:#FFD300;--color-editor-tag:#E85D7F;--color-editor-text:#FF8C00;--color-editor-value:#FFD300;--color-editor-variable:#AEE938;--color-editor-ui-background:#0A0D1C;--color-editor-ui-text:#ffffff;--color-editor-ui-indent-active:#3B3D49;--color-editor-ui-indent-inactive:#5F616B;--color-editor-ui-line-number-active:#CECFD2;--color-editor-ui-line-number-inactive:#84868D;}[data-color-mode="light"]{--color-editor-attribute:#008A27;--color-editor-annotation:#E91C11;--color-editor-atom:#CA00D1;--color-editor-basic:#10162F;--color-editor-comment:#686C7B;--color-editor-constant:#D14900;--color-editor-decoration:#E91C11;--color-editor-invalid:#E91C11;--color-editor-key:#006D82;--color-editor-keyword:#1557FF;--color-editor-number:#E91C11;--color-editor-operator:#E91C11;--color-editor-predefined:#10162F;--color-editor-property:#E91C11;--color-editor-regexp:#008A27;--color-editor-string:#8A7300;--color-editor-tag:#E91C11;--color-editor-text:#D14900;--color-editor-value:#8A7300;--color-editor-variable:#008A27;--color-editor-ui-background:#ffffff;--color-editor-ui-text:#10162F;--color-editor-ui-indent-active:#BCBDC4;--color-editor-ui-indent-inactive:#8E919D;--color-editor-ui-line-number-active:#31374C;--color-editor-ui-line-number-inactive:#686C7B;}}", } `; diff --git a/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts b/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts index b05c68eb88..271f07cd06 100644 --- a/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts +++ b/packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts @@ -23,8 +23,8 @@ describe('brand elevation', () => { for (const state of STATES) { const shadow = elevation[`${state}-shadow`]; expect(shadow).not.toContain('undefined'); - expect(shadow).toContain('var(--colors-shadow-key)'); - expect(shadow).toContain('var(--colors-shadow-ambient)'); + expect(shadow).toContain('var(--color-shadow-key)'); + expect(shadow).toContain('var(--color-shadow-ambient)'); } }); @@ -36,18 +36,18 @@ describe('brand elevation', () => { ])('gives %s the soft raised shadow', (_, theme) => { expect(theme.elevation).toMatchObject({ 'rest-shadow': - '0 1px 4px 0 var(--colors-shadow-key), 0 2px 7px 0 var(--colors-shadow-ambient)', + '0 1px 4px 0 var(--color-shadow-key), 0 2px 7px 0 var(--color-shadow-ambient)', 'hover-shadow': - '0 2px 6px 0 var(--colors-shadow-key), 0 6px 16px 0 var(--colors-shadow-ambient)', + '0 2px 6px 0 var(--color-shadow-key), 0 6px 16px 0 var(--color-shadow-ambient)', }); }); it("gives Original Codecademy old core's hard offset", () => { expect(originalCodecademyTheme.elevation).toMatchObject({ 'rest-shadow': - '-4px 4px 0 0 var(--colors-shadow-key), 0 0 0 0 var(--colors-shadow-ambient)', + '-4px 4px 0 0 var(--color-shadow-key), 0 0 0 0 var(--color-shadow-ambient)', 'hover-shadow': - '-8px 8px 0 0 var(--colors-shadow-key), 0 0 0 0 var(--colors-shadow-ambient)', + '-8px 8px 0 0 var(--color-shadow-key), 0 0 0 0 var(--color-shadow-ambient)', 'hover-transform': 'translate(4px, -4px)', }); }); @@ -62,7 +62,7 @@ describe('brand elevation', () => { lxStudio: lxStudioTheme, }) .filter(([, theme]) => - /--colors-shadow-ambient: var\(--colors-[\w-]+-a0\);/.test( + /--color-shadow-ambient: var\(--color-[\w-]+-a0\);/.test( theme.tokensCss ) ) diff --git a/packages/gamut-styles/src/themes/__tests__/theme.test.ts b/packages/gamut-styles/src/themes/__tests__/theme.test.ts index 172cd74c39..17d575a1dd 100644 --- a/packages/gamut-styles/src/themes/__tests__/theme.test.ts +++ b/packages/gamut-styles/src/themes/__tests__/theme.test.ts @@ -23,16 +23,16 @@ describe('platformTheme', () => { it("keeps the code editor's colors, declared in both modes", () => { expect(platformTheme.colors['editor-keyword']).toBe( - 'var(--colors-editor-keyword)' + 'var(--color-editor-keyword)' ); expect(platformTheme.tokensCss).toContain( - '[data-color-mode="light"]{--colors-editor-attribute:#008A27;' + '[data-color-mode="light"]{--color-editor-attribute:#008A27;' ); expect(platformTheme.tokensCss).toContain( - ':root,[data-color-mode="dark"]{--colors-editor-attribute:' + ':root,[data-color-mode="dark"]{--color-editor-attribute:' ); expect(platformTheme.tokensCss).toContain( - '--colors-editor-keyword:#B3CCFF;' + '--color-editor-keyword:#B3CCFF;' ); }); }); diff --git a/packages/gamut-styles/src/themes/createBrandTheme.ts b/packages/gamut-styles/src/themes/createBrandTheme.ts index d5e7b003fa..4ca9d22aaf 100644 --- a/packages/gamut-styles/src/themes/createBrandTheme.ts +++ b/packages/gamut-styles/src/themes/createBrandTheme.ts @@ -122,7 +122,7 @@ export const createBrandTheme = ( * as `tokensCss` for GamutProvider to inject: this brand's palette and * roles, no other brand's. The theme doesn't also inject the palette as variables, so * the OKLCH in tokens.css is what renders. The theme keeps names - * (`var(--colors-*)`), `brand` (ColorMode sets it as `data-brand`), and + * (`var(--color-*)`), `brand` (ColorMode sets it as `data-brand`), and * `contentModes`, which Background reads instead of measuring contrast. * `_getColorValue` still returns sRGB for the components that run polished * on it (BarChart). @@ -136,7 +136,7 @@ export const createBrandTheme = ( ...built._variables, root: pickBy( built._variables.root, - (_, key) => !key.startsWith('--colors-') + (_, key) => !key.startsWith('--color-') ), }, }; diff --git a/packages/gamut-styles/src/themes/platform.ts b/packages/gamut-styles/src/themes/platform.ts index 186ee454c6..afc7d3f306 100644 --- a/packages/gamut-styles/src/themes/platform.ts +++ b/packages/gamut-styles/src/themes/platform.ts @@ -21,7 +21,7 @@ import { createBrandTheme } from './createBrandTheme'; * system: no role covers them, and they aren't generated or checked. They * keep old platform's names and exact values, resolved from the same * palettes as before, and only this theme's GamutProvider declares them, - * as `--colors-editor-*` in tokens.css's layer and mode selectors, the + * as `--color-editor-*` in tokens.css's layer and mode selectors, the * brand's initial mode on :root. */ const OLD_PALETTE: Record = { @@ -104,7 +104,7 @@ const editorValues = (mode: 'light' | 'dark') => const editorBlock = (selector: string, mode: 'light' | 'dark') => `${selector}{${Object.entries(editorValues(mode)) - .map(([alias, value]) => `--colors-${alias}:${value};`) + .map(([alias, value]) => `--color-${alias}:${value};`) .join('')}}`; export const platformTheme = { @@ -113,7 +113,7 @@ export const platformTheme = { ...base.colors, ...(mapValues( editor.light, - (_, alias) => `var(--colors-${alias})` + (_, alias) => `var(--color-${alias})` ) as Record), }, tokensCss: `${base.tokensCss}\n@layer tokens{${editorBlock( diff --git a/packages/gamut-styles/src/tokens/generated/admin/dark.tokens.json b/packages/gamut-styles/src/tokens/generated/admin/dark.tokens.json index 50fcfd8e67..53ae6377ed 100644 --- a/packages/gamut-styles/src/tokens/generated/admin/dark.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/admin/dark.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1696 287.1 / 0.45) 0%, oklch(0.3346 0.1696 287.1 / 0.43) 16%, oklch(0.3346 0.1696 287.1 / 0.24) 36%, oklch(0.3346 0.1696 287.1 / 0.11) 56%, oklch(0.3346 0.1696 287.1 / 0.04) 76%, oklch(0.3346 0.1696 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1591 263.6 / 0.45) 0%, oklch(0.3346 0.1591 263.6 / 0.43) 16%, oklch(0.3346 0.1591 263.6 / 0.24) 36%, oklch(0.3346 0.1591 263.6 / 0.11) 56%, oklch(0.3346 0.1591 263.6 / 0.04) 76%, oklch(0.3346 0.1591 263.6 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1591 263.6 / 0.45) 0%, oklch(0.3346 0.1591 263.6 / 0.43) 16%, oklch(0.3346 0.1591 263.6 / 0.24) 36%, oklch(0.3346 0.1591 263.6 / 0.11) 56%, oklch(0.3346 0.1591 263.6 / 0.04) 76%, oklch(0.3346 0.1591 263.6 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/admin/light.tokens.json b/packages/gamut-styles/src/tokens/generated/admin/light.tokens.json index cf5ae65704..e42321eb08 100644 --- a/packages/gamut-styles/src/tokens/generated/admin/light.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/admin/light.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.043 287.1 / 0.45) 0%, oklch(0.8497 0.043 287.1 / 0.43) 16%, oklch(0.8497 0.043 287.1 / 0.24) 36%, oklch(0.8497 0.043 287.1 / 0.11) 56%, oklch(0.8497 0.043 287.1 / 0.04) 76%, oklch(0.8497 0.043 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0406 263.6 / 0.45) 0%, oklch(0.8497 0.0406 263.6 / 0.43) 16%, oklch(0.8497 0.0406 263.6 / 0.24) 36%, oklch(0.8497 0.0406 263.6 / 0.11) 56%, oklch(0.8497 0.0406 263.6 / 0.04) 76%, oklch(0.8497 0.0406 263.6 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0406 263.6 / 0.45) 0%, oklch(0.8497 0.0406 263.6 / 0.43) 16%, oklch(0.8497 0.0406 263.6 / 0.24) 36%, oklch(0.8497 0.0406 263.6 / 0.11) 56%, oklch(0.8497 0.0406 263.6 / 0.04) 76%, oklch(0.8497 0.0406 263.6 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/admin/tokens.css b/packages/gamut-styles/src/tokens/generated/admin/tokens.css index 221b6ca38b..6e2eeb2f5e 100644 --- a/packages/gamut-styles/src/tokens/generated/admin/tokens.css +++ b/packages/gamut-styles/src/tokens/generated/admin/tokens.css @@ -3,209 +3,209 @@ @layer tokens { :root, [data-brand="admin"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); - --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); - --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); - --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); - --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); - --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); - --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); - --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); - --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 263.60); - --colors-palette-primary-200: oklch(0.9364 0.0120 263.60); - --colors-palette-primary-300: oklch(0.8497 0.0406 263.60); - --colors-palette-primary-400: oklch(0.7628 0.0845 263.60); - --colors-palette-primary-500: oklch(0.6707 0.1528 263.60); - --colors-palette-primary-600: oklch(0.5835 0.2271 263.60); - --colors-palette-primary-700: oklch(0.4972 0.2553 263.60); - --colors-palette-primary-800: oklch(0.4115 0.2002 263.60); - --colors-palette-primary-900: oklch(0.3346 0.1591 263.60); - --colors-palette-primary-1000: oklch(0.2499 0.1134 263.60); - --colors-palette-primary-1100: oklch(0.1925 0.0832 263.60); - --colors-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8789 0.1801 93.58); - --colors-palette-accent-400: oklch(0.7442 0.1526 93.94); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0228 145.50); - --colors-palette-success-200: oklch(0.9364 0.0458 145.50); - --colors-palette-success-300: oklch(0.8497 0.1448 145.50); - --colors-palette-success-400: oklch(0.7628 0.1654 145.50); - --colors-palette-success-500: oklch(0.6707 0.1829 145.50); - --colors-palette-success-600: oklch(0.5835 0.1808 145.50); - --colors-palette-success-700: oklch(0.4972 0.1464 145.50); - --colors-palette-success-800: oklch(0.4115 0.1147 145.50); - --colors-palette-success-900: oklch(0.3346 0.0912 145.50); - --colors-palette-success-1000: oklch(0.2499 0.0650 145.50); - --colors-palette-success-1100: oklch(0.1925 0.0477 145.50); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); + --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 263.60); + --color-palette-primary-200: oklch(0.9364 0.0120 263.60); + --color-palette-primary-300: oklch(0.8497 0.0406 263.60); + --color-palette-primary-400: oklch(0.7628 0.0845 263.60); + --color-palette-primary-500: oklch(0.6707 0.1528 263.60); + --color-palette-primary-600: oklch(0.5835 0.2271 263.60); + --color-palette-primary-700: oklch(0.4972 0.2553 263.60); + --color-palette-primary-800: oklch(0.4115 0.2002 263.60); + --color-palette-primary-900: oklch(0.3346 0.1591 263.60); + --color-palette-primary-1000: oklch(0.2499 0.1134 263.60); + --color-palette-primary-1100: oklch(0.1925 0.0832 263.60); + --color-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } diff --git a/packages/gamut-styles/src/tokens/generated/admin/values.ts b/packages/gamut-styles/src/tokens/generated/admin/values.ts index 583518c6d0..2593ab0041 100644 --- a/packages/gamut-styles/src/tokens/generated/admin/values.ts +++ b/packages/gamut-styles/src/tokens/generated/admin/values.ts @@ -1041,4 +1041,4 @@ export const contentModes = { } as const; /* This brand's tokens.css, for GamutProvider to inject. */ -export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"admin\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"admin\"] {\n --colors-white: oklch(1.0000 0.0000 0.00);\n --colors-black: oklch(0.0000 0.0000 0.00);\n --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);\n --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);\n --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);\n --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);\n --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);\n --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);\n --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);\n --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);\n --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);\n --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);\n --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);\n --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --colors-palette-primary-100: oklch(0.9862 0.0064 263.60);\n --colors-palette-primary-200: oklch(0.9364 0.0120 263.60);\n --colors-palette-primary-300: oklch(0.8497 0.0406 263.60);\n --colors-palette-primary-400: oklch(0.7628 0.0845 263.60);\n --colors-palette-primary-500: oklch(0.6707 0.1528 263.60);\n --colors-palette-primary-600: oklch(0.5835 0.2271 263.60);\n --colors-palette-primary-700: oklch(0.4972 0.2553 263.60);\n --colors-palette-primary-800: oklch(0.4115 0.2002 263.60);\n --colors-palette-primary-900: oklch(0.3346 0.1591 263.60);\n --colors-palette-primary-1000: oklch(0.2499 0.1134 263.60);\n --colors-palette-primary-1100: oklch(0.1925 0.0832 263.60);\n --colors-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06);\n --colors-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09);\n --colors-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08);\n --colors-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --colors-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --colors-palette-accent-300: oklch(0.8789 0.1801 93.58);\n --colors-palette-accent-400: oklch(0.7442 0.1526 93.94);\n --colors-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --colors-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --colors-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --colors-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --colors-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --colors-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --colors-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --colors-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --colors-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --colors-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --colors-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --colors-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --colors-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --colors-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --colors-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --colors-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --colors-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --colors-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --colors-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --colors-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --colors-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --colors-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --colors-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --colors-palette-success-100: oklch(0.9862 0.0228 145.50);\n --colors-palette-success-200: oklch(0.9364 0.0458 145.50);\n --colors-palette-success-300: oklch(0.8497 0.1448 145.50);\n --colors-palette-success-400: oklch(0.7628 0.1654 145.50);\n --colors-palette-success-500: oklch(0.6707 0.1829 145.50);\n --colors-palette-success-600: oklch(0.5835 0.1808 145.50);\n --colors-palette-success-700: oklch(0.4972 0.1464 145.50);\n --colors-palette-success-800: oklch(0.4115 0.1147 145.50);\n --colors-palette-success-900: oklch(0.3346 0.0912 145.50);\n --colors-palette-success-1000: oklch(0.2499 0.0650 145.50);\n --colors-palette-success-1100: oklch(0.1925 0.0477 145.50);\n --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; +export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"admin\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"admin\"] {\n --color-white: oklch(1.0000 0.0000 0.00);\n --color-black: oklch(0.0000 0.0000 0.00);\n --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);\n --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);\n --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);\n --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);\n --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);\n --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);\n --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);\n --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);\n --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);\n --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);\n --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);\n --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --color-palette-primary-100: oklch(0.9862 0.0064 263.60);\n --color-palette-primary-200: oklch(0.9364 0.0120 263.60);\n --color-palette-primary-300: oklch(0.8497 0.0406 263.60);\n --color-palette-primary-400: oklch(0.7628 0.0845 263.60);\n --color-palette-primary-500: oklch(0.6707 0.1528 263.60);\n --color-palette-primary-600: oklch(0.5835 0.2271 263.60);\n --color-palette-primary-700: oklch(0.4972 0.2553 263.60);\n --color-palette-primary-800: oklch(0.4115 0.2002 263.60);\n --color-palette-primary-900: oklch(0.3346 0.1591 263.60);\n --color-palette-primary-1000: oklch(0.2499 0.1134 263.60);\n --color-palette-primary-1100: oklch(0.1925 0.0832 263.60);\n --color-palette-primary-600-a6: oklch(0.5835 0.2271 263.60 / 0.06);\n --color-palette-primary-600-a9: oklch(0.5835 0.2271 263.60 / 0.09);\n --color-palette-primary-600-a8: oklch(0.5835 0.2271 263.60 / 0.08);\n --color-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --color-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --color-palette-accent-300: oklch(0.8789 0.1801 93.58);\n --color-palette-accent-400: oklch(0.7442 0.1526 93.94);\n --color-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --color-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --color-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --color-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --color-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --color-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --color-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --color-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --color-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --color-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --color-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --color-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --color-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --color-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --color-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --color-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --color-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --color-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --color-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --color-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --color-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --color-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --color-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --color-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --color-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --color-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --color-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --color-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --color-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --color-palette-success-100: oklch(0.9862 0.0228 145.50);\n --color-palette-success-200: oklch(0.9364 0.0458 145.50);\n --color-palette-success-300: oklch(0.8497 0.1448 145.50);\n --color-palette-success-400: oklch(0.7628 0.1654 145.50);\n --color-palette-success-500: oklch(0.6707 0.1829 145.50);\n --color-palette-success-600: oklch(0.5835 0.1808 145.50);\n --color-palette-success-700: oklch(0.4972 0.1464 145.50);\n --color-palette-success-800: oklch(0.4115 0.1147 145.50);\n --color-palette-success-900: oklch(0.3346 0.0912 145.50);\n --color-palette-success-1000: oklch(0.2499 0.0650 145.50);\n --color-palette-success-1100: oklch(0.1925 0.0477 145.50);\n --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-900); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-300); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; diff --git a/packages/gamut-styles/src/tokens/generated/lxStudio/dark.tokens.json b/packages/gamut-styles/src/tokens/generated/lxStudio/dark.tokens.json index 3b3790409e..19f966422e 100644 --- a/packages/gamut-styles/src/tokens/generated/lxStudio/dark.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/lxStudio/dark.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1696 287.1 / 0.45) 0%, oklch(0.3346 0.1696 287.1 / 0.43) 16%, oklch(0.3346 0.1696 287.1 / 0.24) 36%, oklch(0.3346 0.1696 287.1 / 0.11) 56%, oklch(0.3346 0.1696 287.1 / 0.04) 76%, oklch(0.3346 0.1696 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1405 262.4 / 0.45) 0%, oklch(0.3346 0.1405 262.4 / 0.43) 16%, oklch(0.3346 0.1405 262.4 / 0.24) 36%, oklch(0.3346 0.1405 262.4 / 0.11) 56%, oklch(0.3346 0.1405 262.4 / 0.04) 76%, oklch(0.3346 0.1405 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1405 262.4 / 0.45) 0%, oklch(0.3346 0.1405 262.4 / 0.43) 16%, oklch(0.3346 0.1405 262.4 / 0.24) 36%, oklch(0.3346 0.1405 262.4 / 0.11) 56%, oklch(0.3346 0.1405 262.4 / 0.04) 76%, oklch(0.3346 0.1405 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/lxStudio/light.tokens.json b/packages/gamut-styles/src/tokens/generated/lxStudio/light.tokens.json index dcced4e7e0..8a1dbb1303 100644 --- a/packages/gamut-styles/src/tokens/generated/lxStudio/light.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/lxStudio/light.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.043 287.1 / 0.45) 0%, oklch(0.8497 0.043 287.1 / 0.43) 16%, oklch(0.8497 0.043 287.1 / 0.24) 36%, oklch(0.8497 0.043 287.1 / 0.11) 56%, oklch(0.8497 0.043 287.1 / 0.04) 76%, oklch(0.8497 0.043 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0407 262.4 / 0.45) 0%, oklch(0.8497 0.0407 262.4 / 0.43) 16%, oklch(0.8497 0.0407 262.4 / 0.24) 36%, oklch(0.8497 0.0407 262.4 / 0.11) 56%, oklch(0.8497 0.0407 262.4 / 0.04) 76%, oklch(0.8497 0.0407 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0407 262.4 / 0.45) 0%, oklch(0.8497 0.0407 262.4 / 0.43) 16%, oklch(0.8497 0.0407 262.4 / 0.24) 36%, oklch(0.8497 0.0407 262.4 / 0.11) 56%, oklch(0.8497 0.0407 262.4 / 0.04) 76%, oklch(0.8497 0.0407 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/lxStudio/tokens.css b/packages/gamut-styles/src/tokens/generated/lxStudio/tokens.css index 907e5d9928..1fc403dcc4 100644 --- a/packages/gamut-styles/src/tokens/generated/lxStudio/tokens.css +++ b/packages/gamut-styles/src/tokens/generated/lxStudio/tokens.css @@ -3,209 +3,209 @@ @layer tokens { :root, [data-brand="lxStudio"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9876 0.0017 247.84); - --colors-palette-neutral-light-200: oklch(0.9364 0.0025 247.80); - --colors-palette-neutral-light-300: oklch(0.8497 0.0086 247.80); - --colors-palette-neutral-light-400: oklch(0.7628 0.0178 247.80); - --colors-palette-neutral-light-500: oklch(0.6707 0.0316 247.80); - --colors-palette-neutral-light-600: oklch(0.5835 0.0312 247.80); - --colors-palette-neutral-light-700: oklch(0.4972 0.0253 247.80); - --colors-palette-neutral-light-800: oklch(0.4115 0.0198 247.80); - --colors-palette-neutral-light-900: oklch(0.3346 0.0157 247.80); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 262.40); - --colors-palette-primary-200: oklch(0.9364 0.0121 262.40); - --colors-palette-primary-300: oklch(0.8497 0.0407 262.40); - --colors-palette-primary-400: oklch(0.7628 0.0846 262.40); - --colors-palette-primary-500: oklch(0.6707 0.1531 262.40); - --colors-palette-primary-600: oklch(0.5835 0.2274 262.40); - --colors-palette-primary-700: oklch(0.4972 0.2254 262.40); - --colors-palette-primary-800: oklch(0.4115 0.1767 262.40); - --colors-palette-primary-900: oklch(0.3346 0.1405 262.40); - --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40); - --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40); - --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8497 0.0957 93.60); - --colors-palette-accent-400: oklch(0.7628 0.1094 93.60); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0204 156.70); - --colors-palette-success-200: oklch(0.9364 0.0405 156.70); - --colors-palette-success-300: oklch(0.8497 0.1118 156.70); - --colors-palette-success-400: oklch(0.7628 0.1278 156.70); - --colors-palette-success-500: oklch(0.6707 0.1413 156.70); - --colors-palette-success-600: oklch(0.5835 0.1396 156.70); - --colors-palette-success-700: oklch(0.4972 0.1130 156.70); - --colors-palette-success-800: oklch(0.4115 0.0886 156.70); - --colors-palette-success-900: oklch(0.3346 0.0704 156.70); - --colors-palette-success-1000: oklch(0.2499 0.0502 156.70); - --colors-palette-success-1100: oklch(0.1925 0.0368 156.70); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9876 0.0017 247.84); + --color-palette-neutral-light-200: oklch(0.9364 0.0025 247.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0086 247.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0178 247.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0316 247.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0312 247.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0253 247.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0198 247.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0157 247.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 262.40); + --color-palette-primary-200: oklch(0.9364 0.0121 262.40); + --color-palette-primary-300: oklch(0.8497 0.0407 262.40); + --color-palette-primary-400: oklch(0.7628 0.0846 262.40); + --color-palette-primary-500: oklch(0.6707 0.1531 262.40); + --color-palette-primary-600: oklch(0.5835 0.2274 262.40); + --color-palette-primary-700: oklch(0.4972 0.2254 262.40); + --color-palette-primary-800: oklch(0.4115 0.1767 262.40); + --color-palette-primary-900: oklch(0.3346 0.1405 262.40); + --color-palette-primary-1000: oklch(0.2499 0.1001 262.40); + --color-palette-primary-1100: oklch(0.1925 0.0734 262.40); + --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8497 0.0957 93.60); + --color-palette-accent-400: oklch(0.7628 0.1094 93.60); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0204 156.70); + --color-palette-success-200: oklch(0.9364 0.0405 156.70); + --color-palette-success-300: oklch(0.8497 0.1118 156.70); + --color-palette-success-400: oklch(0.7628 0.1278 156.70); + --color-palette-success-500: oklch(0.6707 0.1413 156.70); + --color-palette-success-600: oklch(0.5835 0.1396 156.70); + --color-palette-success-700: oklch(0.4972 0.1130 156.70); + --color-palette-success-800: oklch(0.4115 0.0886 156.70); + --color-palette-success-900: oklch(0.3346 0.0704 156.70); + --color-palette-success-1000: oklch(0.2499 0.0502 156.70); + --color-palette-success-1100: oklch(0.1925 0.0368 156.70); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } diff --git a/packages/gamut-styles/src/tokens/generated/lxStudio/values.ts b/packages/gamut-styles/src/tokens/generated/lxStudio/values.ts index 50e4725dd9..df709b3381 100644 --- a/packages/gamut-styles/src/tokens/generated/lxStudio/values.ts +++ b/packages/gamut-styles/src/tokens/generated/lxStudio/values.ts @@ -1024,4 +1024,4 @@ export const contentModes = { } as const; /* This brand's tokens.css, for GamutProvider to inject. */ -export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"lxStudio\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"lxStudio\"] {\n --colors-white: oklch(1.0000 0.0000 0.00);\n --colors-black: oklch(0.0000 0.0000 0.00);\n --colors-palette-neutral-light-100: oklch(0.9876 0.0017 247.84);\n --colors-palette-neutral-light-200: oklch(0.9364 0.0025 247.80);\n --colors-palette-neutral-light-300: oklch(0.8497 0.0086 247.80);\n --colors-palette-neutral-light-400: oklch(0.7628 0.0178 247.80);\n --colors-palette-neutral-light-500: oklch(0.6707 0.0316 247.80);\n --colors-palette-neutral-light-600: oklch(0.5835 0.0312 247.80);\n --colors-palette-neutral-light-700: oklch(0.4972 0.0253 247.80);\n --colors-palette-neutral-light-800: oklch(0.4115 0.0198 247.80);\n --colors-palette-neutral-light-900: oklch(0.3346 0.0157 247.80);\n --colors-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80);\n --colors-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80);\n --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --colors-palette-primary-100: oklch(0.9862 0.0064 262.40);\n --colors-palette-primary-200: oklch(0.9364 0.0121 262.40);\n --colors-palette-primary-300: oklch(0.8497 0.0407 262.40);\n --colors-palette-primary-400: oklch(0.7628 0.0846 262.40);\n --colors-palette-primary-500: oklch(0.6707 0.1531 262.40);\n --colors-palette-primary-600: oklch(0.5835 0.2274 262.40);\n --colors-palette-primary-700: oklch(0.4972 0.2254 262.40);\n --colors-palette-primary-800: oklch(0.4115 0.1767 262.40);\n --colors-palette-primary-900: oklch(0.3346 0.1405 262.40);\n --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40);\n --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40);\n --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);\n --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);\n --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);\n --colors-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --colors-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --colors-palette-accent-300: oklch(0.8497 0.0957 93.60);\n --colors-palette-accent-400: oklch(0.7628 0.1094 93.60);\n --colors-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --colors-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --colors-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --colors-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --colors-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --colors-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --colors-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --colors-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --colors-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --colors-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --colors-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --colors-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --colors-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --colors-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --colors-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --colors-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --colors-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --colors-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --colors-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --colors-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --colors-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --colors-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --colors-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --colors-palette-success-100: oklch(0.9862 0.0204 156.70);\n --colors-palette-success-200: oklch(0.9364 0.0405 156.70);\n --colors-palette-success-300: oklch(0.8497 0.1118 156.70);\n --colors-palette-success-400: oklch(0.7628 0.1278 156.70);\n --colors-palette-success-500: oklch(0.6707 0.1413 156.70);\n --colors-palette-success-600: oklch(0.5835 0.1396 156.70);\n --colors-palette-success-700: oklch(0.4972 0.1130 156.70);\n --colors-palette-success-800: oklch(0.4115 0.0886 156.70);\n --colors-palette-success-900: oklch(0.3346 0.0704 156.70);\n --colors-palette-success-1000: oklch(0.2499 0.0502 156.70);\n --colors-palette-success-1100: oklch(0.1925 0.0368 156.70);\n --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; +export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"lxStudio\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"lxStudio\"] {\n --color-white: oklch(1.0000 0.0000 0.00);\n --color-black: oklch(0.0000 0.0000 0.00);\n --color-palette-neutral-light-100: oklch(0.9876 0.0017 247.84);\n --color-palette-neutral-light-200: oklch(0.9364 0.0025 247.80);\n --color-palette-neutral-light-300: oklch(0.8497 0.0086 247.80);\n --color-palette-neutral-light-400: oklch(0.7628 0.0178 247.80);\n --color-palette-neutral-light-500: oklch(0.6707 0.0316 247.80);\n --color-palette-neutral-light-600: oklch(0.5835 0.0312 247.80);\n --color-palette-neutral-light-700: oklch(0.4972 0.0253 247.80);\n --color-palette-neutral-light-800: oklch(0.4115 0.0198 247.80);\n --color-palette-neutral-light-900: oklch(0.3346 0.0157 247.80);\n --color-palette-neutral-light-1000: oklch(0.2499 0.0112 247.80);\n --color-palette-neutral-light-1100: oklch(0.1925 0.0082 247.80);\n --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --color-palette-primary-100: oklch(0.9862 0.0064 262.40);\n --color-palette-primary-200: oklch(0.9364 0.0121 262.40);\n --color-palette-primary-300: oklch(0.8497 0.0407 262.40);\n --color-palette-primary-400: oklch(0.7628 0.0846 262.40);\n --color-palette-primary-500: oklch(0.6707 0.1531 262.40);\n --color-palette-primary-600: oklch(0.5835 0.2274 262.40);\n --color-palette-primary-700: oklch(0.4972 0.2254 262.40);\n --color-palette-primary-800: oklch(0.4115 0.1767 262.40);\n --color-palette-primary-900: oklch(0.3346 0.1405 262.40);\n --color-palette-primary-1000: oklch(0.2499 0.1001 262.40);\n --color-palette-primary-1100: oklch(0.1925 0.0734 262.40);\n --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);\n --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);\n --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);\n --color-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --color-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --color-palette-accent-300: oklch(0.8497 0.0957 93.60);\n --color-palette-accent-400: oklch(0.7628 0.1094 93.60);\n --color-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --color-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --color-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --color-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --color-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --color-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --color-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --color-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --color-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --color-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --color-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --color-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --color-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --color-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --color-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --color-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --color-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --color-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --color-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --color-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --color-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --color-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --color-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --color-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --color-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --color-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --color-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --color-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --color-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --color-palette-success-100: oklch(0.9862 0.0204 156.70);\n --color-palette-success-200: oklch(0.9364 0.0405 156.70);\n --color-palette-success-300: oklch(0.8497 0.1118 156.70);\n --color-palette-success-400: oklch(0.7628 0.1278 156.70);\n --color-palette-success-500: oklch(0.6707 0.1413 156.70);\n --color-palette-success-600: oklch(0.5835 0.1396 156.70);\n --color-palette-success-700: oklch(0.4972 0.1130 156.70);\n --color-palette-success-800: oklch(0.4115 0.0886 156.70);\n --color-palette-success-900: oklch(0.3346 0.0704 156.70);\n --color-palette-success-1000: oklch(0.2499 0.0502 156.70);\n --color-palette-success-1100: oklch(0.1925 0.0368 156.70);\n --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-900); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-300); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; diff --git a/packages/gamut-styles/src/tokens/generated/originalCodecademy/dark.tokens.json b/packages/gamut-styles/src/tokens/generated/originalCodecademy/dark.tokens.json index 835559c4d8..63d48ae42a 100644 --- a/packages/gamut-styles/src/tokens/generated/originalCodecademy/dark.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/originalCodecademy/dark.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1696 287.1 / 0.45) 0%, oklch(0.3346 0.1696 287.1 / 0.43) 16%, oklch(0.3346 0.1696 287.1 / 0.24) 36%, oklch(0.3346 0.1696 287.1 / 0.11) 56%, oklch(0.3346 0.1696 287.1 / 0.04) 76%, oklch(0.3346 0.1696 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1863 274.1 / 0.45) 0%, oklch(0.3346 0.1863 274.1 / 0.43) 16%, oklch(0.3346 0.1863 274.1 / 0.24) 36%, oklch(0.3346 0.1863 274.1 / 0.11) 56%, oklch(0.3346 0.1863 274.1 / 0.04) 76%, oklch(0.3346 0.1863 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1863 274.1 / 0.45) 0%, oklch(0.3346 0.1863 274.1 / 0.43) 16%, oklch(0.3346 0.1863 274.1 / 0.24) 36%, oklch(0.3346 0.1863 274.1 / 0.11) 56%, oklch(0.3346 0.1863 274.1 / 0.04) 76%, oklch(0.3346 0.1863 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/originalCodecademy/light.tokens.json b/packages/gamut-styles/src/tokens/generated/originalCodecademy/light.tokens.json index 633dd1435d..004073019f 100644 --- a/packages/gamut-styles/src/tokens/generated/originalCodecademy/light.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/originalCodecademy/light.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.043 287.1 / 0.45) 0%, oklch(0.8497 0.043 287.1 / 0.43) 16%, oklch(0.8497 0.043 287.1 / 0.24) 36%, oklch(0.8497 0.043 287.1 / 0.11) 56%, oklch(0.8497 0.043 287.1 / 0.04) 76%, oklch(0.8497 0.043 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0408 274.1 / 0.45) 0%, oklch(0.8497 0.0408 274.1 / 0.43) 16%, oklch(0.8497 0.0408 274.1 / 0.24) 36%, oklch(0.8497 0.0408 274.1 / 0.11) 56%, oklch(0.8497 0.0408 274.1 / 0.04) 76%, oklch(0.8497 0.0408 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0408 274.1 / 0.45) 0%, oklch(0.8497 0.0408 274.1 / 0.43) 16%, oklch(0.8497 0.0408 274.1 / 0.24) 36%, oklch(0.8497 0.0408 274.1 / 0.11) 56%, oklch(0.8497 0.0408 274.1 / 0.04) 76%, oklch(0.8497 0.0408 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/originalCodecademy/tokens.css b/packages/gamut-styles/src/tokens/generated/originalCodecademy/tokens.css index 852792e606..4785e3e52b 100644 --- a/packages/gamut-styles/src/tokens/generated/originalCodecademy/tokens.css +++ b/packages/gamut-styles/src/tokens/generated/originalCodecademy/tokens.css @@ -3,211 +3,211 @@ @layer tokens { :root, [data-brand="originalCodecademy"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); - --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); - --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); - --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); - --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); - --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); - --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); - --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); - --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0); - --colors-palette-primary-100: oklch(0.9862 0.0064 274.10); - --colors-palette-primary-200: oklch(0.9364 0.0121 274.10); - --colors-palette-primary-300: oklch(0.8497 0.0408 274.10); - --colors-palette-primary-400: oklch(0.7628 0.0849 274.10); - --colors-palette-primary-500: oklch(0.6707 0.1537 274.10); - --colors-palette-primary-600: oklch(0.5835 0.2285 274.10); - --colors-palette-primary-700: oklch(0.4972 0.2707 274.10); - --colors-palette-primary-800: oklch(0.4115 0.2344 274.10); - --colors-palette-primary-900: oklch(0.3346 0.1863 274.10); - --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10); - --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10); - --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8789 0.1801 93.58); - --colors-palette-accent-400: oklch(0.7442 0.1526 93.94); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0228 145.50); - --colors-palette-success-200: oklch(0.9364 0.0458 145.50); - --colors-palette-success-300: oklch(0.8497 0.1448 145.50); - --colors-palette-success-400: oklch(0.7628 0.1654 145.50); - --colors-palette-success-500: oklch(0.6707 0.1829 145.50); - --colors-palette-success-600: oklch(0.5835 0.1808 145.50); - --colors-palette-success-700: oklch(0.4972 0.1464 145.50); - --colors-palette-success-800: oklch(0.4115 0.1147 145.50); - --colors-palette-success-900: oklch(0.3346 0.0912 145.50); - --colors-palette-success-1000: oklch(0.2499 0.0650 145.50); - --colors-palette-success-1100: oklch(0.1925 0.0477 145.50); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); - --colors-black-a0: oklch(0.0000 0.0000 0.00 / 0); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80); + --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80); + --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80); + --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80); + --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80); + --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80); + --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80); + --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80); + --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80); + --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0); + --color-palette-primary-100: oklch(0.9862 0.0064 274.10); + --color-palette-primary-200: oklch(0.9364 0.0121 274.10); + --color-palette-primary-300: oklch(0.8497 0.0408 274.10); + --color-palette-primary-400: oklch(0.7628 0.0849 274.10); + --color-palette-primary-500: oklch(0.6707 0.1537 274.10); + --color-palette-primary-600: oklch(0.5835 0.2285 274.10); + --color-palette-primary-700: oklch(0.4972 0.2707 274.10); + --color-palette-primary-800: oklch(0.4115 0.2344 274.10); + --color-palette-primary-900: oklch(0.3346 0.1863 274.10); + --color-palette-primary-1000: oklch(0.2499 0.1328 274.10); + --color-palette-primary-1100: oklch(0.1925 0.0974 274.10); + --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-black-a0: oklch(0.0000 0.0000 0.00 / 0); } :root, [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } diff --git a/packages/gamut-styles/src/tokens/generated/originalCodecademy/values.ts b/packages/gamut-styles/src/tokens/generated/originalCodecademy/values.ts index 1360810874..1941a4b36e 100644 --- a/packages/gamut-styles/src/tokens/generated/originalCodecademy/values.ts +++ b/packages/gamut-styles/src/tokens/generated/originalCodecademy/values.ts @@ -1062,4 +1062,4 @@ export const contentModes = { } as const; /* This brand's tokens.css, for GamutProvider to inject. */ -export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"originalCodecademy\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"originalCodecademy\"] {\n --colors-white: oklch(1.0000 0.0000 0.00);\n --colors-black: oklch(0.0000 0.0000 0.00);\n --colors-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);\n --colors-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);\n --colors-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);\n --colors-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);\n --colors-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);\n --colors-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);\n --colors-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);\n --colors-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);\n --colors-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);\n --colors-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);\n --colors-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);\n --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --colors-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0);\n --colors-palette-primary-100: oklch(0.9862 0.0064 274.10);\n --colors-palette-primary-200: oklch(0.9364 0.0121 274.10);\n --colors-palette-primary-300: oklch(0.8497 0.0408 274.10);\n --colors-palette-primary-400: oklch(0.7628 0.0849 274.10);\n --colors-palette-primary-500: oklch(0.6707 0.1537 274.10);\n --colors-palette-primary-600: oklch(0.5835 0.2285 274.10);\n --colors-palette-primary-700: oklch(0.4972 0.2707 274.10);\n --colors-palette-primary-800: oklch(0.4115 0.2344 274.10);\n --colors-palette-primary-900: oklch(0.3346 0.1863 274.10);\n --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10);\n --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10);\n --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);\n --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);\n --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);\n --colors-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --colors-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --colors-palette-accent-300: oklch(0.8789 0.1801 93.58);\n --colors-palette-accent-400: oklch(0.7442 0.1526 93.94);\n --colors-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --colors-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --colors-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --colors-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --colors-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --colors-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --colors-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --colors-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --colors-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --colors-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --colors-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --colors-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --colors-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --colors-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --colors-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --colors-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --colors-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --colors-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --colors-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --colors-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --colors-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --colors-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --colors-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --colors-palette-success-100: oklch(0.9862 0.0228 145.50);\n --colors-palette-success-200: oklch(0.9364 0.0458 145.50);\n --colors-palette-success-300: oklch(0.8497 0.1448 145.50);\n --colors-palette-success-400: oklch(0.7628 0.1654 145.50);\n --colors-palette-success-500: oklch(0.6707 0.1829 145.50);\n --colors-palette-success-600: oklch(0.5835 0.1808 145.50);\n --colors-palette-success-700: oklch(0.4972 0.1464 145.50);\n --colors-palette-success-800: oklch(0.4115 0.1147 145.50);\n --colors-palette-success-900: oklch(0.3346 0.0912 145.50);\n --colors-palette-success-1000: oklch(0.2499 0.0650 145.50);\n --colors-palette-success-1100: oklch(0.1925 0.0477 145.50);\n --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n --colors-black-a0: oklch(0.0000 0.0000 0.00 / 0);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-black-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; +export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"originalCodecademy\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"originalCodecademy\"] {\n --color-white: oklch(1.0000 0.0000 0.00);\n --color-black: oklch(0.0000 0.0000 0.00);\n --color-palette-neutral-light-100: oklch(0.9862 0.0016 58.80);\n --color-palette-neutral-light-200: oklch(0.9364 0.0031 58.80);\n --color-palette-neutral-light-300: oklch(0.8497 0.0109 58.80);\n --color-palette-neutral-light-400: oklch(0.7628 0.0237 58.80);\n --color-palette-neutral-light-500: oklch(0.6707 0.0280 58.80);\n --color-palette-neutral-light-600: oklch(0.5835 0.0277 58.80);\n --color-palette-neutral-light-700: oklch(0.4972 0.0224 58.80);\n --color-palette-neutral-light-800: oklch(0.4115 0.0175 58.80);\n --color-palette-neutral-light-900: oklch(0.3346 0.0139 58.80);\n --color-palette-neutral-light-1000: oklch(0.2499 0.0099 58.80);\n --color-palette-neutral-light-1100: oklch(0.1925 0.0073 58.80);\n --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --color-palette-neutral-dark-1100-a0: oklch(0.1925 0.0199 271.30 / 0);\n --color-palette-primary-100: oklch(0.9862 0.0064 274.10);\n --color-palette-primary-200: oklch(0.9364 0.0121 274.10);\n --color-palette-primary-300: oklch(0.8497 0.0408 274.10);\n --color-palette-primary-400: oklch(0.7628 0.0849 274.10);\n --color-palette-primary-500: oklch(0.6707 0.1537 274.10);\n --color-palette-primary-600: oklch(0.5835 0.2285 274.10);\n --color-palette-primary-700: oklch(0.4972 0.2707 274.10);\n --color-palette-primary-800: oklch(0.4115 0.2344 274.10);\n --color-palette-primary-900: oklch(0.3346 0.1863 274.10);\n --color-palette-primary-1000: oklch(0.2499 0.1328 274.10);\n --color-palette-primary-1100: oklch(0.1925 0.0974 274.10);\n --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);\n --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);\n --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);\n --color-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --color-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --color-palette-accent-300: oklch(0.8789 0.1801 93.58);\n --color-palette-accent-400: oklch(0.7442 0.1526 93.94);\n --color-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --color-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --color-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --color-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --color-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --color-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --color-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --color-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --color-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --color-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --color-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --color-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --color-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --color-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --color-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --color-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --color-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --color-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --color-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --color-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --color-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --color-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --color-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --color-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --color-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --color-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --color-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --color-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --color-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --color-palette-success-100: oklch(0.9862 0.0228 145.50);\n --color-palette-success-200: oklch(0.9364 0.0458 145.50);\n --color-palette-success-300: oklch(0.8497 0.1448 145.50);\n --color-palette-success-400: oklch(0.7628 0.1654 145.50);\n --color-palette-success-500: oklch(0.6707 0.1829 145.50);\n --color-palette-success-600: oklch(0.5835 0.1808 145.50);\n --color-palette-success-700: oklch(0.4972 0.1464 145.50);\n --color-palette-success-800: oklch(0.4115 0.1147 145.50);\n --color-palette-success-900: oklch(0.3346 0.0912 145.50);\n --color-palette-success-1000: oklch(0.2499 0.0650 145.50);\n --color-palette-success-1100: oklch(0.1925 0.0477 145.50);\n --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n --color-black-a0: oklch(0.0000 0.0000 0.00 / 0);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-900); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-300); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-black-a0); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; diff --git a/packages/gamut-styles/src/tokens/generated/platform/dark.tokens.json b/packages/gamut-styles/src/tokens/generated/platform/dark.tokens.json index 88ca95a096..849ec9d72c 100644 --- a/packages/gamut-styles/src/tokens/generated/platform/dark.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/platform/dark.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1696 287.1 / 0.45) 0%, oklch(0.3346 0.1696 287.1 / 0.43) 16%, oklch(0.3346 0.1696 287.1 / 0.24) 36%, oklch(0.3346 0.1696 287.1 / 0.11) 56%, oklch(0.3346 0.1696 287.1 / 0.04) 76%, oklch(0.3346 0.1696 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1863 274.1 / 0.45) 0%, oklch(0.3346 0.1863 274.1 / 0.43) 16%, oklch(0.3346 0.1863 274.1 / 0.24) 36%, oklch(0.3346 0.1863 274.1 / 0.11) 56%, oklch(0.3346 0.1863 274.1 / 0.04) 76%, oklch(0.3346 0.1863 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1863 274.1 / 0.45) 0%, oklch(0.3346 0.1863 274.1 / 0.43) 16%, oklch(0.3346 0.1863 274.1 / 0.24) 36%, oklch(0.3346 0.1863 274.1 / 0.11) 56%, oklch(0.3346 0.1863 274.1 / 0.04) 76%, oklch(0.3346 0.1863 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/platform/light.tokens.json b/packages/gamut-styles/src/tokens/generated/platform/light.tokens.json index 52aef19ba4..785502d77b 100644 --- a/packages/gamut-styles/src/tokens/generated/platform/light.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/platform/light.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.043 287.1 / 0.45) 0%, oklch(0.8497 0.043 287.1 / 0.43) 16%, oklch(0.8497 0.043 287.1 / 0.24) 36%, oklch(0.8497 0.043 287.1 / 0.11) 56%, oklch(0.8497 0.043 287.1 / 0.04) 76%, oklch(0.8497 0.043 287.1 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0408 274.1 / 0.45) 0%, oklch(0.8497 0.0408 274.1 / 0.43) 16%, oklch(0.8497 0.0408 274.1 / 0.24) 36%, oklch(0.8497 0.0408 274.1 / 0.11) 56%, oklch(0.8497 0.0408 274.1 / 0.04) 76%, oklch(0.8497 0.0408 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0408 274.1 / 0.45) 0%, oklch(0.8497 0.0408 274.1 / 0.43) 16%, oklch(0.8497 0.0408 274.1 / 0.24) 36%, oklch(0.8497 0.0408 274.1 / 0.11) 56%, oklch(0.8497 0.0408 274.1 / 0.04) 76%, oklch(0.8497 0.0408 274.1 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/platform/tokens.css b/packages/gamut-styles/src/tokens/generated/platform/tokens.css index 2fe70dc346..012f9f5aa8 100644 --- a/packages/gamut-styles/src/tokens/generated/platform/tokens.css +++ b/packages/gamut-styles/src/tokens/generated/platform/tokens.css @@ -3,209 +3,209 @@ @layer tokens { :root, [data-brand="platform"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9867 0.0084 225.08); - --colors-palette-neutral-light-200: oklch(0.9364 0.0032 225.10); - --colors-palette-neutral-light-300: oklch(0.8497 0.0109 225.10); - --colors-palette-neutral-light-400: oklch(0.7628 0.0202 225.10); - --colors-palette-neutral-light-500: oklch(0.6707 0.0223 225.10); - --colors-palette-neutral-light-600: oklch(0.5835 0.0221 225.10); - --colors-palette-neutral-light-700: oklch(0.4972 0.0179 225.10); - --colors-palette-neutral-light-800: oklch(0.4115 0.0140 225.10); - --colors-palette-neutral-light-900: oklch(0.3346 0.0111 225.10); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 274.10); - --colors-palette-primary-200: oklch(0.9364 0.0121 274.10); - --colors-palette-primary-300: oklch(0.8497 0.0408 274.10); - --colors-palette-primary-400: oklch(0.7628 0.0849 274.10); - --colors-palette-primary-500: oklch(0.6707 0.1537 274.10); - --colors-palette-primary-600: oklch(0.5835 0.2285 274.10); - --colors-palette-primary-700: oklch(0.4972 0.2707 274.10); - --colors-palette-primary-800: oklch(0.4115 0.2344 274.10); - --colors-palette-primary-900: oklch(0.3346 0.1863 274.10); - --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10); - --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10); - --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0205 93.60); - --colors-palette-accent-200: oklch(0.9364 0.0378 93.60); - --colors-palette-accent-300: oklch(0.8789 0.1801 93.58); - --colors-palette-accent-400: oklch(0.7442 0.1526 93.94); - --colors-palette-accent-500: oklch(0.6707 0.1209 93.60); - --colors-palette-accent-600: oklch(0.5835 0.1195 93.60); - --colors-palette-accent-700: oklch(0.4972 0.0967 93.60); - --colors-palette-accent-800: oklch(0.4115 0.0758 93.60); - --colors-palette-accent-900: oklch(0.3346 0.0603 93.60); - --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60); - --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 29.40); - --colors-palette-danger-200: oklch(0.9364 0.0128 29.40); - --colors-palette-danger-300: oklch(0.8497 0.0452 29.40); - --colors-palette-danger-400: oklch(0.7628 0.0990 29.40); - --colors-palette-danger-500: oklch(0.6707 0.1910 29.40); - --colors-palette-danger-600: oklch(0.5835 0.2382 29.40); - --colors-palette-danger-700: oklch(0.4972 0.1928 29.40); - --colors-palette-danger-800: oklch(0.4115 0.1512 29.40); - --colors-palette-danger-900: oklch(0.3346 0.1202 29.40); - --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40); - --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40); - --colors-palette-warning-100: oklch(0.9862 0.0082 58.30); - --colors-palette-warning-200: oklch(0.9364 0.0156 58.30); - --colors-palette-warning-300: oklch(0.8497 0.0545 58.30); - --colors-palette-warning-400: oklch(0.7628 0.1179 58.30); - --colors-palette-warning-500: oklch(0.6707 0.1408 58.30); - --colors-palette-warning-600: oklch(0.5835 0.1392 58.30); - --colors-palette-warning-700: oklch(0.4972 0.1127 58.30); - --colors-palette-warning-800: oklch(0.4115 0.0883 58.30); - --colors-palette-warning-900: oklch(0.3346 0.0702 58.30); - --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30); - --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30); - --colors-palette-success-100: oklch(0.9862 0.0228 145.50); - --colors-palette-success-200: oklch(0.9364 0.0458 145.50); - --colors-palette-success-300: oklch(0.8497 0.1448 145.50); - --colors-palette-success-400: oklch(0.7628 0.1654 145.50); - --colors-palette-success-500: oklch(0.6707 0.1829 145.50); - --colors-palette-success-600: oklch(0.5835 0.1808 145.50); - --colors-palette-success-700: oklch(0.4972 0.1464 145.50); - --colors-palette-success-800: oklch(0.4115 0.1147 145.50); - --colors-palette-success-900: oklch(0.3346 0.0912 145.50); - --colors-palette-success-1000: oklch(0.2499 0.0650 145.50); - --colors-palette-success-1100: oklch(0.1925 0.0477 145.50); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9867 0.0084 225.08); + --color-palette-neutral-light-200: oklch(0.9364 0.0032 225.10); + --color-palette-neutral-light-300: oklch(0.8497 0.0109 225.10); + --color-palette-neutral-light-400: oklch(0.7628 0.0202 225.10); + --color-palette-neutral-light-500: oklch(0.6707 0.0223 225.10); + --color-palette-neutral-light-600: oklch(0.5835 0.0221 225.10); + --color-palette-neutral-light-700: oklch(0.4972 0.0179 225.10); + --color-palette-neutral-light-800: oklch(0.4115 0.0140 225.10); + --color-palette-neutral-light-900: oklch(0.3346 0.0111 225.10); + --color-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10); + --color-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30); + --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30); + --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30); + --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30); + --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 274.10); + --color-palette-primary-200: oklch(0.9364 0.0121 274.10); + --color-palette-primary-300: oklch(0.8497 0.0408 274.10); + --color-palette-primary-400: oklch(0.7628 0.0849 274.10); + --color-palette-primary-500: oklch(0.6707 0.1537 274.10); + --color-palette-primary-600: oklch(0.5835 0.2285 274.10); + --color-palette-primary-700: oklch(0.4972 0.2707 274.10); + --color-palette-primary-800: oklch(0.4115 0.2344 274.10); + --color-palette-primary-900: oklch(0.3346 0.1863 274.10); + --color-palette-primary-1000: oklch(0.2499 0.1328 274.10); + --color-palette-primary-1100: oklch(0.1925 0.0974 274.10); + --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0205 93.60); + --color-palette-accent-200: oklch(0.9364 0.0378 93.60); + --color-palette-accent-300: oklch(0.8789 0.1801 93.58); + --color-palette-accent-400: oklch(0.7442 0.1526 93.94); + --color-palette-accent-500: oklch(0.6707 0.1209 93.60); + --color-palette-accent-600: oklch(0.5835 0.1195 93.60); + --color-palette-accent-700: oklch(0.4972 0.0967 93.60); + --color-palette-accent-800: oklch(0.4115 0.0758 93.60); + --color-palette-accent-900: oklch(0.3346 0.0603 93.60); + --color-palette-accent-1000: oklch(0.2499 0.0430 93.60); + --color-palette-accent-1100: oklch(0.1925 0.0315 93.60); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 29.40); + --color-palette-danger-200: oklch(0.9364 0.0128 29.40); + --color-palette-danger-300: oklch(0.8497 0.0452 29.40); + --color-palette-danger-400: oklch(0.7628 0.0990 29.40); + --color-palette-danger-500: oklch(0.6707 0.1910 29.40); + --color-palette-danger-600: oklch(0.5835 0.2382 29.40); + --color-palette-danger-700: oklch(0.4972 0.1928 29.40); + --color-palette-danger-800: oklch(0.4115 0.1512 29.40); + --color-palette-danger-900: oklch(0.3346 0.1202 29.40); + --color-palette-danger-1000: oklch(0.2499 0.0857 29.40); + --color-palette-danger-1100: oklch(0.1925 0.0628 29.40); + --color-palette-warning-100: oklch(0.9862 0.0082 58.30); + --color-palette-warning-200: oklch(0.9364 0.0156 58.30); + --color-palette-warning-300: oklch(0.8497 0.0545 58.30); + --color-palette-warning-400: oklch(0.7628 0.1179 58.30); + --color-palette-warning-500: oklch(0.6707 0.1408 58.30); + --color-palette-warning-600: oklch(0.5835 0.1392 58.30); + --color-palette-warning-700: oklch(0.4972 0.1127 58.30); + --color-palette-warning-800: oklch(0.4115 0.0883 58.30); + --color-palette-warning-900: oklch(0.3346 0.0702 58.30); + --color-palette-warning-1000: oklch(0.2499 0.0500 58.30); + --color-palette-warning-1100: oklch(0.1925 0.0367 58.30); + --color-palette-success-100: oklch(0.9862 0.0228 145.50); + --color-palette-success-200: oklch(0.9364 0.0458 145.50); + --color-palette-success-300: oklch(0.8497 0.1448 145.50); + --color-palette-success-400: oklch(0.7628 0.1654 145.50); + --color-palette-success-500: oklch(0.6707 0.1829 145.50); + --color-palette-success-600: oklch(0.5835 0.1808 145.50); + --color-palette-success-700: oklch(0.4972 0.1464 145.50); + --color-palette-success-800: oklch(0.4115 0.1147 145.50); + --color-palette-success-900: oklch(0.3346 0.0912 145.50); + --color-palette-success-1000: oklch(0.2499 0.0650 145.50); + --color-palette-success-1100: oklch(0.1925 0.0477 145.50); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } } diff --git a/packages/gamut-styles/src/tokens/generated/platform/values.ts b/packages/gamut-styles/src/tokens/generated/platform/values.ts index 262cd844de..2760de5631 100644 --- a/packages/gamut-styles/src/tokens/generated/platform/values.ts +++ b/packages/gamut-styles/src/tokens/generated/platform/values.ts @@ -1042,4 +1042,4 @@ export const contentModes = { } as const; /* This brand's tokens.css, for GamutProvider to inject. */ -export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"platform\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"platform\"] {\n --colors-white: oklch(1.0000 0.0000 0.00);\n --colors-black: oklch(0.0000 0.0000 0.00);\n --colors-palette-neutral-light-100: oklch(0.9867 0.0084 225.08);\n --colors-palette-neutral-light-200: oklch(0.9364 0.0032 225.10);\n --colors-palette-neutral-light-300: oklch(0.8497 0.0109 225.10);\n --colors-palette-neutral-light-400: oklch(0.7628 0.0202 225.10);\n --colors-palette-neutral-light-500: oklch(0.6707 0.0223 225.10);\n --colors-palette-neutral-light-600: oklch(0.5835 0.0221 225.10);\n --colors-palette-neutral-light-700: oklch(0.4972 0.0179 225.10);\n --colors-palette-neutral-light-800: oklch(0.4115 0.0140 225.10);\n --colors-palette-neutral-light-900: oklch(0.3346 0.0111 225.10);\n --colors-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10);\n --colors-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10);\n --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --colors-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --colors-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --colors-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --colors-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --colors-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --colors-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --colors-palette-primary-100: oklch(0.9862 0.0064 274.10);\n --colors-palette-primary-200: oklch(0.9364 0.0121 274.10);\n --colors-palette-primary-300: oklch(0.8497 0.0408 274.10);\n --colors-palette-primary-400: oklch(0.7628 0.0849 274.10);\n --colors-palette-primary-500: oklch(0.6707 0.1537 274.10);\n --colors-palette-primary-600: oklch(0.5835 0.2285 274.10);\n --colors-palette-primary-700: oklch(0.4972 0.2707 274.10);\n --colors-palette-primary-800: oklch(0.4115 0.2344 274.10);\n --colors-palette-primary-900: oklch(0.3346 0.1863 274.10);\n --colors-palette-primary-1000: oklch(0.2499 0.1328 274.10);\n --colors-palette-primary-1100: oklch(0.1925 0.0974 274.10);\n --colors-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);\n --colors-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);\n --colors-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);\n --colors-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --colors-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --colors-palette-accent-300: oklch(0.8789 0.1801 93.58);\n --colors-palette-accent-400: oklch(0.7442 0.1526 93.94);\n --colors-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --colors-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --colors-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --colors-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --colors-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --colors-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --colors-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --colors-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --colors-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --colors-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --colors-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --colors-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --colors-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --colors-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --colors-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --colors-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --colors-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --colors-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --colors-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --colors-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --colors-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --colors-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --colors-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --colors-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --colors-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --colors-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --colors-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --colors-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --colors-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --colors-palette-success-100: oklch(0.9862 0.0228 145.50);\n --colors-palette-success-200: oklch(0.9364 0.0458 145.50);\n --colors-palette-success-300: oklch(0.8497 0.1448 145.50);\n --colors-palette-success-400: oklch(0.7628 0.1654 145.50);\n --colors-palette-success-500: oklch(0.6707 0.1829 145.50);\n --colors-palette-success-600: oklch(0.5835 0.1808 145.50);\n --colors-palette-success-700: oklch(0.4972 0.1464 145.50);\n --colors-palette-success-800: oklch(0.4115 0.1147 145.50);\n --colors-palette-success-900: oklch(0.3346 0.0912 145.50);\n --colors-palette-success-1000: oklch(0.2499 0.0650 145.50);\n --colors-palette-success-1100: oklch(0.1925 0.0477 145.50);\n --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-accent-400); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-accent-500); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n }\n}\n"; +export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"platform\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"platform\"] {\n --color-white: oklch(1.0000 0.0000 0.00);\n --color-black: oklch(0.0000 0.0000 0.00);\n --color-palette-neutral-light-100: oklch(0.9867 0.0084 225.08);\n --color-palette-neutral-light-200: oklch(0.9364 0.0032 225.10);\n --color-palette-neutral-light-300: oklch(0.8497 0.0109 225.10);\n --color-palette-neutral-light-400: oklch(0.7628 0.0202 225.10);\n --color-palette-neutral-light-500: oklch(0.6707 0.0223 225.10);\n --color-palette-neutral-light-600: oklch(0.5835 0.0221 225.10);\n --color-palette-neutral-light-700: oklch(0.4972 0.0179 225.10);\n --color-palette-neutral-light-800: oklch(0.4115 0.0140 225.10);\n --color-palette-neutral-light-900: oklch(0.3346 0.0111 225.10);\n --color-palette-neutral-light-1000: oklch(0.2499 0.0079 225.10);\n --color-palette-neutral-light-1100: oklch(0.1925 0.0058 225.10);\n --color-palette-neutral-dark-100: oklch(0.9862 0.0012 271.30);\n --color-palette-neutral-dark-200: oklch(0.9364 0.0024 271.30);\n --color-palette-neutral-dark-300: oklch(0.8497 0.0081 271.30);\n --color-palette-neutral-dark-400: oklch(0.7628 0.0169 271.30);\n --color-palette-neutral-dark-500: oklch(0.6707 0.0306 271.30);\n --color-palette-neutral-dark-600: oklch(0.5835 0.0454 271.30);\n --color-palette-neutral-dark-700: oklch(0.4972 0.0538 271.30);\n --color-palette-neutral-dark-800: oklch(0.4115 0.0479 271.30);\n --color-palette-neutral-dark-900: oklch(0.3346 0.0381 271.30);\n --color-palette-neutral-dark-1000: oklch(0.2499 0.0272 271.30);\n --color-palette-neutral-dark-1100: oklch(0.1925 0.0199 271.30);\n --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0199 271.30 / 0.16);\n --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0199 271.30 / 0.12);\n --color-palette-primary-100: oklch(0.9862 0.0064 274.10);\n --color-palette-primary-200: oklch(0.9364 0.0121 274.10);\n --color-palette-primary-300: oklch(0.8497 0.0408 274.10);\n --color-palette-primary-400: oklch(0.7628 0.0849 274.10);\n --color-palette-primary-500: oklch(0.6707 0.1537 274.10);\n --color-palette-primary-600: oklch(0.5835 0.2285 274.10);\n --color-palette-primary-700: oklch(0.4972 0.2707 274.10);\n --color-palette-primary-800: oklch(0.4115 0.2344 274.10);\n --color-palette-primary-900: oklch(0.3346 0.1863 274.10);\n --color-palette-primary-1000: oklch(0.2499 0.1328 274.10);\n --color-palette-primary-1100: oklch(0.1925 0.0974 274.10);\n --color-palette-primary-600-a6: oklch(0.5835 0.2285 274.10 / 0.06);\n --color-palette-primary-600-a9: oklch(0.5835 0.2285 274.10 / 0.09);\n --color-palette-primary-600-a8: oklch(0.5835 0.2285 274.10 / 0.08);\n --color-palette-accent-100: oklch(0.9862 0.0205 93.60);\n --color-palette-accent-200: oklch(0.9364 0.0378 93.60);\n --color-palette-accent-300: oklch(0.8789 0.1801 93.58);\n --color-palette-accent-400: oklch(0.7442 0.1526 93.94);\n --color-palette-accent-500: oklch(0.6707 0.1209 93.60);\n --color-palette-accent-600: oklch(0.5835 0.1195 93.60);\n --color-palette-accent-700: oklch(0.4972 0.0967 93.60);\n --color-palette-accent-800: oklch(0.4115 0.0758 93.60);\n --color-palette-accent-900: oklch(0.3346 0.0603 93.60);\n --color-palette-accent-1000: oklch(0.2499 0.0430 93.60);\n --color-palette-accent-1100: oklch(0.1925 0.0315 93.60);\n --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --color-palette-danger-100: oklch(0.9862 0.0066 29.40);\n --color-palette-danger-200: oklch(0.9364 0.0128 29.40);\n --color-palette-danger-300: oklch(0.8497 0.0452 29.40);\n --color-palette-danger-400: oklch(0.7628 0.0990 29.40);\n --color-palette-danger-500: oklch(0.6707 0.1910 29.40);\n --color-palette-danger-600: oklch(0.5835 0.2382 29.40);\n --color-palette-danger-700: oklch(0.4972 0.1928 29.40);\n --color-palette-danger-800: oklch(0.4115 0.1512 29.40);\n --color-palette-danger-900: oklch(0.3346 0.1202 29.40);\n --color-palette-danger-1000: oklch(0.2499 0.0857 29.40);\n --color-palette-danger-1100: oklch(0.1925 0.0628 29.40);\n --color-palette-warning-100: oklch(0.9862 0.0082 58.30);\n --color-palette-warning-200: oklch(0.9364 0.0156 58.30);\n --color-palette-warning-300: oklch(0.8497 0.0545 58.30);\n --color-palette-warning-400: oklch(0.7628 0.1179 58.30);\n --color-palette-warning-500: oklch(0.6707 0.1408 58.30);\n --color-palette-warning-600: oklch(0.5835 0.1392 58.30);\n --color-palette-warning-700: oklch(0.4972 0.1127 58.30);\n --color-palette-warning-800: oklch(0.4115 0.0883 58.30);\n --color-palette-warning-900: oklch(0.3346 0.0702 58.30);\n --color-palette-warning-1000: oklch(0.2499 0.0500 58.30);\n --color-palette-warning-1100: oklch(0.1925 0.0367 58.30);\n --color-palette-success-100: oklch(0.9862 0.0228 145.50);\n --color-palette-success-200: oklch(0.9364 0.0458 145.50);\n --color-palette-success-300: oklch(0.8497 0.1448 145.50);\n --color-palette-success-400: oklch(0.7628 0.1654 145.50);\n --color-palette-success-500: oklch(0.6707 0.1829 145.50);\n --color-palette-success-600: oklch(0.5835 0.1808 145.50);\n --color-palette-success-700: oklch(0.4972 0.1464 145.50);\n --color-palette-success-800: oklch(0.4115 0.1147 145.50);\n --color-palette-success-900: oklch(0.3346 0.0912 145.50);\n --color-palette-success-1000: oklch(0.2499 0.0650 145.50);\n --color-palette-success-1100: oklch(0.1925 0.0477 145.50);\n --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-300); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-accent-300); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-accent-400); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-accent-500); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-900); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-alt-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-alt-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-alt-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-alt-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-alt-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-alt-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n }\n}\n"; diff --git a/packages/gamut-styles/src/tokens/generated/skillsoft/dark.tokens.json b/packages/gamut-styles/src/tokens/generated/skillsoft/dark.tokens.json index 7ecfd089c2..79264f3fd5 100644 --- a/packages/gamut-styles/src/tokens/generated/skillsoft/dark.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/skillsoft/dark.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.3346 0.1201 357.3 / 0.45) 0%, oklch(0.3346 0.1201 357.3 / 0.43) 16%, oklch(0.3346 0.1201 357.3 / 0.24) 36%, oklch(0.3346 0.1201 357.3 / 0.11) 56%, oklch(0.3346 0.1201 357.3 / 0.04) 76%, oklch(0.3346 0.1201 357.3 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.3346 0.1405 262.4 / 0.45) 0%, oklch(0.3346 0.1405 262.4 / 0.43) 16%, oklch(0.3346 0.1405 262.4 / 0.24) 36%, oklch(0.3346 0.1405 262.4 / 0.11) 56%, oklch(0.3346 0.1405 262.4 / 0.04) 76%, oklch(0.3346 0.1405 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.3346 0.1405 262.4 / 0.45) 0%, oklch(0.3346 0.1405 262.4 / 0.43) 16%, oklch(0.3346 0.1405 262.4 / 0.24) 36%, oklch(0.3346 0.1405 262.4 / 0.11) 56%, oklch(0.3346 0.1405 262.4 / 0.04) 76%, oklch(0.3346 0.1405 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/skillsoft/light.tokens.json b/packages/gamut-styles/src/tokens/generated/skillsoft/light.tokens.json index 8a85b5d624..d930273da2 100644 --- a/packages/gamut-styles/src/tokens/generated/skillsoft/light.tokens.json +++ b/packages/gamut-styles/src/tokens/generated/skillsoft/light.tokens.json @@ -76,7 +76,7 @@ ] ], "css": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, oklch(0.8497 0.0499 357.3 / 0.45) 0%, oklch(0.8497 0.0499 357.3 / 0.43) 16%, oklch(0.8497 0.0499 357.3 / 0.24) 36%, oklch(0.8497 0.0499 357.3 / 0.11) 56%, oklch(0.8497 0.0499 357.3 / 0.04) 76%, oklch(0.8497 0.0499 357.3 / 0) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, oklch(0.8497 0.0407 262.4 / 0.45) 0%, oklch(0.8497 0.0407 262.4 / 0.43) 16%, oklch(0.8497 0.0407 262.4 / 0.24) 36%, oklch(0.8497 0.0407 262.4 / 0.11) 56%, oklch(0.8497 0.0407 262.4 / 0.04) 76%, oklch(0.8497 0.0407 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } @@ -122,7 +122,7 @@ ] ], "css": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, oklch(0.8497 0.0407 262.4 / 0.45) 0%, oklch(0.8497 0.0407 262.4 / 0.43) 16%, oklch(0.8497 0.0407 262.4 / 0.24) 36%, oklch(0.8497 0.0407 262.4 / 0.11) 56%, oklch(0.8497 0.0407 262.4 / 0.04) 76%, oklch(0.8497 0.0407 262.4 / 0) 100%)", - "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%)" + "cssVars": "radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%)" } } } diff --git a/packages/gamut-styles/src/tokens/generated/skillsoft/tokens.css b/packages/gamut-styles/src/tokens/generated/skillsoft/tokens.css index 97eed80f5c..3990c148f2 100644 --- a/packages/gamut-styles/src/tokens/generated/skillsoft/tokens.css +++ b/packages/gamut-styles/src/tokens/generated/skillsoft/tokens.css @@ -3,209 +3,209 @@ @layer tokens { :root, [data-brand="skillsoft"] { - --colors-white: oklch(1.0000 0.0000 0.00); - --colors-black: oklch(0.0000 0.0000 0.00); - --colors-palette-neutral-light-100: oklch(0.9862 0.0041 93.70); - --colors-palette-neutral-light-200: oklch(0.9364 0.0075 93.70); - --colors-palette-neutral-light-300: oklch(0.8497 0.0191 93.70); - --colors-palette-neutral-light-400: oklch(0.7628 0.0218 93.70); - --colors-palette-neutral-light-500: oklch(0.6707 0.0241 93.70); - --colors-palette-neutral-light-600: oklch(0.5835 0.0239 93.70); - --colors-palette-neutral-light-700: oklch(0.4972 0.0193 93.70); - --colors-palette-neutral-light-800: oklch(0.4115 0.0151 93.70); - --colors-palette-neutral-light-900: oklch(0.3346 0.0120 93.70); - --colors-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70); - --colors-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70); - --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70); - --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70); - --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70); - --colors-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70); - --colors-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70); - --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70); - --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70); - --colors-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70); - --colors-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70); - --colors-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70); - --colors-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70); - --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16); - --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12); - --colors-palette-primary-100: oklch(0.9862 0.0064 262.40); - --colors-palette-primary-200: oklch(0.9364 0.0121 262.40); - --colors-palette-primary-300: oklch(0.8497 0.0407 262.40); - --colors-palette-primary-400: oklch(0.7628 0.0846 262.40); - --colors-palette-primary-500: oklch(0.6707 0.1531 262.40); - --colors-palette-primary-600: oklch(0.5835 0.2274 262.40); - --colors-palette-primary-700: oklch(0.4972 0.2254 262.40); - --colors-palette-primary-800: oklch(0.4115 0.1767 262.40); - --colors-palette-primary-900: oklch(0.3346 0.1405 262.40); - --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40); - --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40); - --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); - --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); - --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); - --colors-palette-accent-100: oklch(0.9862 0.0073 357.30); - --colors-palette-accent-200: oklch(0.9364 0.0141 357.30); - --colors-palette-accent-300: oklch(0.8497 0.0499 357.30); - --colors-palette-accent-400: oklch(0.7628 0.1100 357.30); - --colors-palette-accent-500: oklch(0.6707 0.2144 357.30); - --colors-palette-accent-600: oklch(0.5835 0.2380 357.30); - --colors-palette-accent-700: oklch(0.4972 0.1927 357.30); - --colors-palette-accent-800: oklch(0.4115 0.1511 357.30); - --colors-palette-accent-900: oklch(0.3346 0.1201 357.30); - --colors-palette-accent-1000: oklch(0.2499 0.0856 357.30); - --colors-palette-accent-1100: oklch(0.1925 0.0628 357.30); - --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); - --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); - --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); - --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); - --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); - --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); - --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); - --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); - --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); - --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); - --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); - --colors-palette-danger-100: oklch(0.9862 0.0066 17.30); - --colors-palette-danger-200: oklch(0.9364 0.0128 17.30); - --colors-palette-danger-300: oklch(0.8497 0.0452 17.30); - --colors-palette-danger-400: oklch(0.7628 0.0993 17.30); - --colors-palette-danger-500: oklch(0.6707 0.1924 17.30); - --colors-palette-danger-600: oklch(0.5835 0.2336 17.30); - --colors-palette-danger-700: oklch(0.4972 0.1891 17.30); - --colors-palette-danger-800: oklch(0.4115 0.1482 17.30); - --colors-palette-danger-900: oklch(0.3346 0.1178 17.30); - --colors-palette-danger-1000: oklch(0.2499 0.0840 17.30); - --colors-palette-danger-1100: oklch(0.1925 0.0616 17.30); - --colors-palette-warning-100: oklch(0.9862 0.0160 88.00); - --colors-palette-warning-200: oklch(0.9364 0.0300 88.00); - --colors-palette-warning-300: oklch(0.8497 0.0955 88.00); - --colors-palette-warning-400: oklch(0.7628 0.1091 88.00); - --colors-palette-warning-500: oklch(0.6707 0.1206 88.00); - --colors-palette-warning-600: oklch(0.5835 0.1192 88.00); - --colors-palette-warning-700: oklch(0.4972 0.0965 88.00); - --colors-palette-warning-800: oklch(0.4115 0.0757 88.00); - --colors-palette-warning-900: oklch(0.3346 0.0601 88.00); - --colors-palette-warning-1000: oklch(0.2499 0.0429 88.00); - --colors-palette-warning-1100: oklch(0.1925 0.0314 88.00); - --colors-palette-success-100: oklch(0.9862 0.0170 200.00); - --colors-palette-success-200: oklch(0.9364 0.0318 200.00); - --colors-palette-success-300: oklch(0.8497 0.0794 200.00); - --colors-palette-success-400: oklch(0.7628 0.0907 200.00); - --colors-palette-success-500: oklch(0.6707 0.1003 200.00); - --colors-palette-success-600: oklch(0.5835 0.0991 200.00); - --colors-palette-success-700: oklch(0.4972 0.0803 200.00); - --colors-palette-success-800: oklch(0.4115 0.0629 200.00); - --colors-palette-success-900: oklch(0.3346 0.0500 200.00); - --colors-palette-success-1000: oklch(0.2499 0.0356 200.00); - --colors-palette-success-1100: oklch(0.1925 0.0261 200.00); - --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); - --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); - --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); + --color-white: oklch(1.0000 0.0000 0.00); + --color-black: oklch(0.0000 0.0000 0.00); + --color-palette-neutral-light-100: oklch(0.9862 0.0041 93.70); + --color-palette-neutral-light-200: oklch(0.9364 0.0075 93.70); + --color-palette-neutral-light-300: oklch(0.8497 0.0191 93.70); + --color-palette-neutral-light-400: oklch(0.7628 0.0218 93.70); + --color-palette-neutral-light-500: oklch(0.6707 0.0241 93.70); + --color-palette-neutral-light-600: oklch(0.5835 0.0239 93.70); + --color-palette-neutral-light-700: oklch(0.4972 0.0193 93.70); + --color-palette-neutral-light-800: oklch(0.4115 0.0151 93.70); + --color-palette-neutral-light-900: oklch(0.3346 0.0120 93.70); + --color-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70); + --color-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70); + --color-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70); + --color-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70); + --color-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70); + --color-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70); + --color-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70); + --color-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70); + --color-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70); + --color-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70); + --color-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70); + --color-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70); + --color-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70); + --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16); + --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12); + --color-palette-primary-100: oklch(0.9862 0.0064 262.40); + --color-palette-primary-200: oklch(0.9364 0.0121 262.40); + --color-palette-primary-300: oklch(0.8497 0.0407 262.40); + --color-palette-primary-400: oklch(0.7628 0.0846 262.40); + --color-palette-primary-500: oklch(0.6707 0.1531 262.40); + --color-palette-primary-600: oklch(0.5835 0.2274 262.40); + --color-palette-primary-700: oklch(0.4972 0.2254 262.40); + --color-palette-primary-800: oklch(0.4115 0.1767 262.40); + --color-palette-primary-900: oklch(0.3346 0.1405 262.40); + --color-palette-primary-1000: oklch(0.2499 0.1001 262.40); + --color-palette-primary-1100: oklch(0.1925 0.0734 262.40); + --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06); + --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09); + --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08); + --color-palette-accent-100: oklch(0.9862 0.0073 357.30); + --color-palette-accent-200: oklch(0.9364 0.0141 357.30); + --color-palette-accent-300: oklch(0.8497 0.0499 357.30); + --color-palette-accent-400: oklch(0.7628 0.1100 357.30); + --color-palette-accent-500: oklch(0.6707 0.2144 357.30); + --color-palette-accent-600: oklch(0.5835 0.2380 357.30); + --color-palette-accent-700: oklch(0.4972 0.1927 357.30); + --color-palette-accent-800: oklch(0.4115 0.1511 357.30); + --color-palette-accent-900: oklch(0.3346 0.1201 357.30); + --color-palette-accent-1000: oklch(0.2499 0.0856 357.30); + --color-palette-accent-1100: oklch(0.1925 0.0628 357.30); + --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10); + --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10); + --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10); + --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10); + --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10); + --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10); + --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10); + --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10); + --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10); + --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10); + --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10); + --color-palette-danger-100: oklch(0.9862 0.0066 17.30); + --color-palette-danger-200: oklch(0.9364 0.0128 17.30); + --color-palette-danger-300: oklch(0.8497 0.0452 17.30); + --color-palette-danger-400: oklch(0.7628 0.0993 17.30); + --color-palette-danger-500: oklch(0.6707 0.1924 17.30); + --color-palette-danger-600: oklch(0.5835 0.2336 17.30); + --color-palette-danger-700: oklch(0.4972 0.1891 17.30); + --color-palette-danger-800: oklch(0.4115 0.1482 17.30); + --color-palette-danger-900: oklch(0.3346 0.1178 17.30); + --color-palette-danger-1000: oklch(0.2499 0.0840 17.30); + --color-palette-danger-1100: oklch(0.1925 0.0616 17.30); + --color-palette-warning-100: oklch(0.9862 0.0160 88.00); + --color-palette-warning-200: oklch(0.9364 0.0300 88.00); + --color-palette-warning-300: oklch(0.8497 0.0955 88.00); + --color-palette-warning-400: oklch(0.7628 0.1091 88.00); + --color-palette-warning-500: oklch(0.6707 0.1206 88.00); + --color-palette-warning-600: oklch(0.5835 0.1192 88.00); + --color-palette-warning-700: oklch(0.4972 0.0965 88.00); + --color-palette-warning-800: oklch(0.4115 0.0757 88.00); + --color-palette-warning-900: oklch(0.3346 0.0601 88.00); + --color-palette-warning-1000: oklch(0.2499 0.0429 88.00); + --color-palette-warning-1100: oklch(0.1925 0.0314 88.00); + --color-palette-success-100: oklch(0.9862 0.0170 200.00); + --color-palette-success-200: oklch(0.9364 0.0318 200.00); + --color-palette-success-300: oklch(0.8497 0.0794 200.00); + --color-palette-success-400: oklch(0.7628 0.0907 200.00); + --color-palette-success-500: oklch(0.6707 0.1003 200.00); + --color-palette-success-600: oklch(0.5835 0.0991 200.00); + --color-palette-success-700: oklch(0.4972 0.0803 200.00); + --color-palette-success-800: oklch(0.4115 0.0629 200.00); + --color-palette-success-900: oklch(0.3346 0.0500 200.00); + --color-palette-success-1000: oklch(0.2499 0.0356 200.00); + --color-palette-success-1100: oklch(0.1925 0.0261 200.00); + --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32); + --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24); + --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6); } :root, [data-color-mode="light"] { color-scheme: light; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-900); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%); } [data-color-mode="dark"] { color-scheme: dark; - color: var(--colors-text-default); - --colors-background-current: var(--colors-surface-default); - --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */ - --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ - --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ - --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ - --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ - --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ - --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ - --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ - --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */ - --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ - --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ - --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */ - --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */ - --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */ - --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ - --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ - --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ - --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ - --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */ - --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */ - --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ - --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */ - --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */ - --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ - --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */ - --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */ - --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ - --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ - --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */ - --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ - --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */ - --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */ - --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */ - --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */ - --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */ - --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */ - --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */ - --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */ - --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */ - --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */ - --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */ - --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */ - --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ - --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ - --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ - --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); - --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%); + color: var(--color-text-default); + --color-background-current: var(--color-surface-default); + --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */ + --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */ + --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */ + --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */ + --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */ + --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */ + --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */ + --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */ + --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */ + --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */ + --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */ + --color-text-success: var(--color-palette-success-300); /** Success text and icons. */ + --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */ + --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */ + --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */ + --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */ + --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */ + --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */ + --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */ + --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */ + --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */ + --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */ + --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */ + --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant="secondary" resolves here. */ + --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */ + --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */ + --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */ + --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */ + --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */ + --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent "this one is chosen" tint. */ + --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */ + --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */ + --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */ + --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */ + --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */ + --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */ + --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */ + --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */ + --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */ + --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */ + --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */ + --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */ + --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */ + --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */ + --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */ + --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); + --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%); } } diff --git a/packages/gamut-styles/src/tokens/generated/skillsoft/values.ts b/packages/gamut-styles/src/tokens/generated/skillsoft/values.ts index fb878bbe1c..1deaec1e75 100644 --- a/packages/gamut-styles/src/tokens/generated/skillsoft/values.ts +++ b/packages/gamut-styles/src/tokens/generated/skillsoft/values.ts @@ -975,4 +975,4 @@ export const contentModes = { } as const; /* This brand's tokens.css, for GamutProvider to inject. */ -export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"skillsoft\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"skillsoft\"] {\n --colors-white: oklch(1.0000 0.0000 0.00);\n --colors-black: oklch(0.0000 0.0000 0.00);\n --colors-palette-neutral-light-100: oklch(0.9862 0.0041 93.70);\n --colors-palette-neutral-light-200: oklch(0.9364 0.0075 93.70);\n --colors-palette-neutral-light-300: oklch(0.8497 0.0191 93.70);\n --colors-palette-neutral-light-400: oklch(0.7628 0.0218 93.70);\n --colors-palette-neutral-light-500: oklch(0.6707 0.0241 93.70);\n --colors-palette-neutral-light-600: oklch(0.5835 0.0239 93.70);\n --colors-palette-neutral-light-700: oklch(0.4972 0.0193 93.70);\n --colors-palette-neutral-light-800: oklch(0.4115 0.0151 93.70);\n --colors-palette-neutral-light-900: oklch(0.3346 0.0120 93.70);\n --colors-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70);\n --colors-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70);\n --colors-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70);\n --colors-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70);\n --colors-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70);\n --colors-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70);\n --colors-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70);\n --colors-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70);\n --colors-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70);\n --colors-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70);\n --colors-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70);\n --colors-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70);\n --colors-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70);\n --colors-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16);\n --colors-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12);\n --colors-palette-primary-100: oklch(0.9862 0.0064 262.40);\n --colors-palette-primary-200: oklch(0.9364 0.0121 262.40);\n --colors-palette-primary-300: oklch(0.8497 0.0407 262.40);\n --colors-palette-primary-400: oklch(0.7628 0.0846 262.40);\n --colors-palette-primary-500: oklch(0.6707 0.1531 262.40);\n --colors-palette-primary-600: oklch(0.5835 0.2274 262.40);\n --colors-palette-primary-700: oklch(0.4972 0.2254 262.40);\n --colors-palette-primary-800: oklch(0.4115 0.1767 262.40);\n --colors-palette-primary-900: oklch(0.3346 0.1405 262.40);\n --colors-palette-primary-1000: oklch(0.2499 0.1001 262.40);\n --colors-palette-primary-1100: oklch(0.1925 0.0734 262.40);\n --colors-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);\n --colors-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);\n --colors-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);\n --colors-palette-accent-100: oklch(0.9862 0.0073 357.30);\n --colors-palette-accent-200: oklch(0.9364 0.0141 357.30);\n --colors-palette-accent-300: oklch(0.8497 0.0499 357.30);\n --colors-palette-accent-400: oklch(0.7628 0.1100 357.30);\n --colors-palette-accent-500: oklch(0.6707 0.2144 357.30);\n --colors-palette-accent-600: oklch(0.5835 0.2380 357.30);\n --colors-palette-accent-700: oklch(0.4972 0.1927 357.30);\n --colors-palette-accent-800: oklch(0.4115 0.1511 357.30);\n --colors-palette-accent-900: oklch(0.3346 0.1201 357.30);\n --colors-palette-accent-1000: oklch(0.2499 0.0856 357.30);\n --colors-palette-accent-1100: oklch(0.1925 0.0628 357.30);\n --colors-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --colors-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --colors-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --colors-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --colors-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --colors-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --colors-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --colors-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --colors-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --colors-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --colors-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --colors-palette-danger-100: oklch(0.9862 0.0066 17.30);\n --colors-palette-danger-200: oklch(0.9364 0.0128 17.30);\n --colors-palette-danger-300: oklch(0.8497 0.0452 17.30);\n --colors-palette-danger-400: oklch(0.7628 0.0993 17.30);\n --colors-palette-danger-500: oklch(0.6707 0.1924 17.30);\n --colors-palette-danger-600: oklch(0.5835 0.2336 17.30);\n --colors-palette-danger-700: oklch(0.4972 0.1891 17.30);\n --colors-palette-danger-800: oklch(0.4115 0.1482 17.30);\n --colors-palette-danger-900: oklch(0.3346 0.1178 17.30);\n --colors-palette-danger-1000: oklch(0.2499 0.0840 17.30);\n --colors-palette-danger-1100: oklch(0.1925 0.0616 17.30);\n --colors-palette-warning-100: oklch(0.9862 0.0160 88.00);\n --colors-palette-warning-200: oklch(0.9364 0.0300 88.00);\n --colors-palette-warning-300: oklch(0.8497 0.0955 88.00);\n --colors-palette-warning-400: oklch(0.7628 0.1091 88.00);\n --colors-palette-warning-500: oklch(0.6707 0.1206 88.00);\n --colors-palette-warning-600: oklch(0.5835 0.1192 88.00);\n --colors-palette-warning-700: oklch(0.4972 0.0965 88.00);\n --colors-palette-warning-800: oklch(0.4115 0.0757 88.00);\n --colors-palette-warning-900: oklch(0.3346 0.0601 88.00);\n --colors-palette-warning-1000: oklch(0.2499 0.0429 88.00);\n --colors-palette-warning-1100: oklch(0.1925 0.0314 88.00);\n --colors-palette-success-100: oklch(0.9862 0.0170 200.00);\n --colors-palette-success-200: oklch(0.9364 0.0318 200.00);\n --colors-palette-success-300: oklch(0.8497 0.0794 200.00);\n --colors-palette-success-400: oklch(0.7628 0.0907 200.00);\n --colors-palette-success-500: oklch(0.6707 0.1003 200.00);\n --colors-palette-success-600: oklch(0.5835 0.0991 200.00);\n --colors-palette-success-700: oklch(0.4972 0.0803 200.00);\n --colors-palette-success-800: oklch(0.4115 0.0629 200.00);\n --colors-palette-success-900: oklch(0.3346 0.0500 200.00);\n --colors-palette-success-1000: oklch(0.2499 0.0356 200.00);\n --colors-palette-success-1100: oklch(0.1925 0.0261 200.00);\n --colors-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --colors-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --colors-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-dark-1000); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-900); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-900); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-900); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-1000); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-900); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-1000); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-black); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-800); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-700); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-700); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-600); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-1000); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-700); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-800); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-900); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--colors-text-default);\n --colors-background-current: var(--colors-surface-default);\n --colors-surface-sunken: var(--colors-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --colors-surface-default: var(--colors-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --colors-surface-raised: var(--colors-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --colors-surface-success: var(--colors-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --colors-surface-warning: var(--colors-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --colors-surface-error: var(--colors-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --colors-surface-brand: var(--colors-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --colors-surface-brand-subtle: var(--colors-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --colors-text-default: var(--colors-palette-neutral-light-200); /** Body copy and headings. */\n --colors-text-subtle: var(--colors-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --colors-text-inverse: var(--colors-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --colors-text-success: var(--colors-palette-success-300); /** Success text and icons. */\n --colors-text-warning: var(--colors-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --colors-text-error: var(--colors-palette-danger-300); /** Error text and icons. */\n --colors-border-strong: var(--colors-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --colors-border-default: var(--colors-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --colors-border-subtle: var(--colors-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --colors-action-primary: var(--colors-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */\n --colors-action-primary-hover: var(--colors-palette-primary-300); /** Hover for action-primary. */\n --colors-action-primary-pressed: var(--colors-palette-primary-200); /** Pressed for action-primary. */\n --colors-action-danger: var(--colors-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --colors-action-danger-hover: var(--colors-palette-danger-300); /** Hover for action-danger. */\n --colors-action-danger-pressed: var(--colors-palette-danger-200); /** Pressed for action-danger. */\n --colors-action-neutral: var(--colors-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --colors-action-neutral-hover: var(--colors-palette-neutral-light-100); /** Hover for action-neutral. */\n --colors-action-neutral-pressed: var(--colors-white); /** Pressed for action-neutral. */\n --colors-action-disabled: var(--colors-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --colors-state-hover: var(--colors-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --colors-state-pressed: var(--colors-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --colors-state-selected: var(--colors-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --colors-viz-1: var(--colors-palette-primary-500); /** Categorical series 1. */\n --colors-viz-2: var(--colors-palette-accent-500); /** Categorical series 2. */\n --colors-viz-3: var(--colors-palette-warning-400); /** Categorical series 3. */\n --colors-viz-4: var(--colors-palette-accent-alt-600); /** Categorical series 4. */\n --colors-viz-5: var(--colors-palette-success-300); /** Categorical series 5. */\n --colors-viz-6: var(--colors-palette-danger-600); /** Categorical series 6. */\n --colors-viz-7: var(--colors-palette-neutral-dark-500); /** Categorical series 7. */\n --colors-viz-8: var(--colors-palette-neutral-light-600); /** Categorical series 8. */\n --colors-viz-seq-1: var(--colors-palette-primary-600); /** Sequential step 1, low to high. */\n --colors-viz-seq-2: var(--colors-palette-primary-500); /** Sequential step 2, low to high. */\n --colors-viz-seq-3: var(--colors-palette-primary-400); /** Sequential step 3, low to high. */\n --colors-viz-seq-4: var(--colors-palette-primary-300); /** Sequential step 4, low to high. */\n --colors-shadow-key: var(--colors-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --colors-shadow-ambient: var(--colors-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --colors-shadow-scrim: var(--colors-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--colors-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--colors-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--colors-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--colors-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--colors-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--colors-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--colors-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; +export const tokensCss = "/* Generated by @skillsoft/gamut-brand from the \"skillsoft\" brand. Do not edit. */\n@layer reset, base, tokens, recipes, utilities;\n\n@layer tokens {\n :root, [data-brand=\"skillsoft\"] {\n --color-white: oklch(1.0000 0.0000 0.00);\n --color-black: oklch(0.0000 0.0000 0.00);\n --color-palette-neutral-light-100: oklch(0.9862 0.0041 93.70);\n --color-palette-neutral-light-200: oklch(0.9364 0.0075 93.70);\n --color-palette-neutral-light-300: oklch(0.8497 0.0191 93.70);\n --color-palette-neutral-light-400: oklch(0.7628 0.0218 93.70);\n --color-palette-neutral-light-500: oklch(0.6707 0.0241 93.70);\n --color-palette-neutral-light-600: oklch(0.5835 0.0239 93.70);\n --color-palette-neutral-light-700: oklch(0.4972 0.0193 93.70);\n --color-palette-neutral-light-800: oklch(0.4115 0.0151 93.70);\n --color-palette-neutral-light-900: oklch(0.3346 0.0120 93.70);\n --color-palette-neutral-light-1000: oklch(0.2499 0.0086 93.70);\n --color-palette-neutral-light-1100: oklch(0.1925 0.0063 93.70);\n --color-palette-neutral-dark-100: oklch(0.9862 0.0012 270.70);\n --color-palette-neutral-dark-200: oklch(0.9364 0.0024 270.70);\n --color-palette-neutral-dark-300: oklch(0.8497 0.0081 270.70);\n --color-palette-neutral-dark-400: oklch(0.7628 0.0168 270.70);\n --color-palette-neutral-dark-500: oklch(0.6707 0.0305 270.70);\n --color-palette-neutral-dark-600: oklch(0.5835 0.0454 270.70);\n --color-palette-neutral-dark-700: oklch(0.4972 0.0538 270.70);\n --color-palette-neutral-dark-800: oklch(0.4115 0.0482 270.70);\n --color-palette-neutral-dark-900: oklch(0.3346 0.0383 270.70);\n --color-palette-neutral-dark-1000: oklch(0.2499 0.0273 270.70);\n --color-palette-neutral-dark-1100: oklch(0.1925 0.0200 270.70);\n --color-palette-neutral-dark-1100-a16: oklch(0.1925 0.0200 270.70 / 0.16);\n --color-palette-neutral-dark-1100-a12: oklch(0.1925 0.0200 270.70 / 0.12);\n --color-palette-primary-100: oklch(0.9862 0.0064 262.40);\n --color-palette-primary-200: oklch(0.9364 0.0121 262.40);\n --color-palette-primary-300: oklch(0.8497 0.0407 262.40);\n --color-palette-primary-400: oklch(0.7628 0.0846 262.40);\n --color-palette-primary-500: oklch(0.6707 0.1531 262.40);\n --color-palette-primary-600: oklch(0.5835 0.2274 262.40);\n --color-palette-primary-700: oklch(0.4972 0.2254 262.40);\n --color-palette-primary-800: oklch(0.4115 0.1767 262.40);\n --color-palette-primary-900: oklch(0.3346 0.1405 262.40);\n --color-palette-primary-1000: oklch(0.2499 0.1001 262.40);\n --color-palette-primary-1100: oklch(0.1925 0.0734 262.40);\n --color-palette-primary-600-a6: oklch(0.5835 0.2274 262.40 / 0.06);\n --color-palette-primary-600-a9: oklch(0.5835 0.2274 262.40 / 0.09);\n --color-palette-primary-600-a8: oklch(0.5835 0.2274 262.40 / 0.08);\n --color-palette-accent-100: oklch(0.9862 0.0073 357.30);\n --color-palette-accent-200: oklch(0.9364 0.0141 357.30);\n --color-palette-accent-300: oklch(0.8497 0.0499 357.30);\n --color-palette-accent-400: oklch(0.7628 0.1100 357.30);\n --color-palette-accent-500: oklch(0.6707 0.2144 357.30);\n --color-palette-accent-600: oklch(0.5835 0.2380 357.30);\n --color-palette-accent-700: oklch(0.4972 0.1927 357.30);\n --color-palette-accent-800: oklch(0.4115 0.1511 357.30);\n --color-palette-accent-900: oklch(0.3346 0.1201 357.30);\n --color-palette-accent-1000: oklch(0.2499 0.0856 357.30);\n --color-palette-accent-1100: oklch(0.1925 0.0628 357.30);\n --color-palette-accent-alt-100: oklch(0.9862 0.0067 287.10);\n --color-palette-accent-alt-200: oklch(0.9364 0.0127 287.10);\n --color-palette-accent-alt-300: oklch(0.8497 0.0430 287.10);\n --color-palette-accent-alt-400: oklch(0.7628 0.0896 287.10);\n --color-palette-accent-alt-500: oklch(0.6707 0.1624 287.10);\n --color-palette-accent-alt-600: oklch(0.5835 0.2416 287.10);\n --color-palette-accent-alt-700: oklch(0.4972 0.2722 287.10);\n --color-palette-accent-alt-800: oklch(0.4115 0.2134 287.10);\n --color-palette-accent-alt-900: oklch(0.3346 0.1696 287.10);\n --color-palette-accent-alt-1000: oklch(0.2499 0.1209 287.10);\n --color-palette-accent-alt-1100: oklch(0.1925 0.0887 287.10);\n --color-palette-danger-100: oklch(0.9862 0.0066 17.30);\n --color-palette-danger-200: oklch(0.9364 0.0128 17.30);\n --color-palette-danger-300: oklch(0.8497 0.0452 17.30);\n --color-palette-danger-400: oklch(0.7628 0.0993 17.30);\n --color-palette-danger-500: oklch(0.6707 0.1924 17.30);\n --color-palette-danger-600: oklch(0.5835 0.2336 17.30);\n --color-palette-danger-700: oklch(0.4972 0.1891 17.30);\n --color-palette-danger-800: oklch(0.4115 0.1482 17.30);\n --color-palette-danger-900: oklch(0.3346 0.1178 17.30);\n --color-palette-danger-1000: oklch(0.2499 0.0840 17.30);\n --color-palette-danger-1100: oklch(0.1925 0.0616 17.30);\n --color-palette-warning-100: oklch(0.9862 0.0160 88.00);\n --color-palette-warning-200: oklch(0.9364 0.0300 88.00);\n --color-palette-warning-300: oklch(0.8497 0.0955 88.00);\n --color-palette-warning-400: oklch(0.7628 0.1091 88.00);\n --color-palette-warning-500: oklch(0.6707 0.1206 88.00);\n --color-palette-warning-600: oklch(0.5835 0.1192 88.00);\n --color-palette-warning-700: oklch(0.4972 0.0965 88.00);\n --color-palette-warning-800: oklch(0.4115 0.0757 88.00);\n --color-palette-warning-900: oklch(0.3346 0.0601 88.00);\n --color-palette-warning-1000: oklch(0.2499 0.0429 88.00);\n --color-palette-warning-1100: oklch(0.1925 0.0314 88.00);\n --color-palette-success-100: oklch(0.9862 0.0170 200.00);\n --color-palette-success-200: oklch(0.9364 0.0318 200.00);\n --color-palette-success-300: oklch(0.8497 0.0794 200.00);\n --color-palette-success-400: oklch(0.7628 0.0907 200.00);\n --color-palette-success-500: oklch(0.6707 0.1003 200.00);\n --color-palette-success-600: oklch(0.5835 0.0991 200.00);\n --color-palette-success-700: oklch(0.4972 0.0803 200.00);\n --color-palette-success-800: oklch(0.4115 0.0629 200.00);\n --color-palette-success-900: oklch(0.3346 0.0500 200.00);\n --color-palette-success-1000: oklch(0.2499 0.0356 200.00);\n --color-palette-success-1100: oklch(0.1925 0.0261 200.00);\n --color-black-a32: oklch(0.0000 0.0000 0.00 / 0.32);\n --color-black-a24: oklch(0.0000 0.0000 0.00 / 0.24);\n --color-black-a60: oklch(0.0000 0.0000 0.00 / 0.6);\n }\n\n :root, [data-color-mode=\"light\"] {\n color-scheme: light;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-palette-neutral-light-200); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-light-100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-white); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-200); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-200); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-200); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-light-100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-light-100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-dark-1000); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-dark-800); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-light-200); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-900); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-900); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-900); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-dark-1100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-dark-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-dark-300); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-800); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-900); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-1000); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-800); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-900); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-1000); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-dark-1000); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-dark-1100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-black); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-light-400); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-800); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-700); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-700); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-600); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-1000); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-700); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-800); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-900); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-palette-neutral-dark-1100-a16); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-palette-neutral-dark-1100-a12); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-300) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-300) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-300) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-300) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-300) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-300) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-300) 0%, transparent) 100%);\n }\n\n [data-color-mode=\"dark\"] {\n color-scheme: dark;\n color: var(--color-text-default);\n --color-background-current: var(--color-surface-default);\n --color-surface-sunken: var(--color-black); /** Wells, insets, code blocks — anything recessed into the page. */\n --color-surface-default: var(--color-palette-neutral-dark-1100); /** The page background — the base every other surface elevates from. */\n --color-surface-raised: var(--color-palette-neutral-dark-1000); /** The lighter surface step, not a depth: cards, menus, dialogs, fields, and flat bordered sections. Shadow, not the fill, says how high something sits. */\n --color-surface-success: var(--color-palette-success-1000); /** The success tint behind an alert or inline confirmation. */\n --color-surface-warning: var(--color-palette-warning-1000); /** The warning tint behind an alert or inline caution. */\n --color-surface-error: var(--color-palette-danger-1000); /** The error tint behind an alert or inline validation message. */\n --color-surface-brand: var(--color-palette-neutral-dark-1100); /** The two-color brand gradient. The color is the flat fallback; the gradient ships as --gradient-surface-brand. */\n --color-surface-brand-subtle: var(--color-palette-neutral-dark-1100); /** The one-color brand gradient, for backgrounds behind real text. Ships as --gradient-surface-brand-subtle. */\n --color-text-default: var(--color-palette-neutral-light-200); /** Body copy and headings. */\n --color-text-subtle: var(--color-palette-neutral-light-400); /** Secondary text — descriptions, metadata, helper copy. */\n --color-text-inverse: var(--color-palette-neutral-dark-1000); /** Labels on a filled control — action-primary, -neutral, -danger. */\n --color-text-success: var(--color-palette-success-300); /** Success text and icons. */\n --color-text-warning: var(--color-palette-warning-300); /** Warning text and icons. Always with an icon. */\n --color-text-error: var(--color-palette-danger-300); /** Error text and icons. */\n --color-border-strong: var(--color-palette-neutral-light-100); /** Emphasis — an active field, a selected row. */\n --color-border-default: var(--color-palette-neutral-light-600); /** Any border that carries meaning — control outlines, field borders. */\n --color-border-subtle: var(--color-palette-neutral-light-900); /** Decorative hairlines — table rules, dividers. Contrast-exempt. */\n --color-action-primary: var(--color-palette-primary-400); /** Primary interactive fills, strokes, links and focus rings. */\n --color-action-primary-hover: var(--color-palette-primary-300); /** Hover for action-primary. */\n --color-action-primary-pressed: var(--color-palette-primary-200); /** Pressed for action-primary. */\n --color-action-danger: var(--color-palette-danger-400); /** Destructive actions — delete, remove, revoke. */\n --color-action-danger-hover: var(--color-palette-danger-300); /** Hover for action-danger. */\n --color-action-danger-pressed: var(--color-palette-danger-200); /** Pressed for action-danger. */\n --color-action-neutral: var(--color-palette-neutral-light-200); /** The neutral action fill. Button variant=\"secondary\" resolves here. */\n --color-action-neutral-hover: var(--color-palette-neutral-light-100); /** Hover for action-neutral. */\n --color-action-neutral-pressed: var(--color-white); /** Pressed for action-neutral. */\n --color-action-disabled: var(--color-palette-neutral-dark-800); /** The disabled fill for every action variant. Contrast-exempt (inactive control). */\n --color-state-hover: var(--color-palette-primary-600-a6); /** Rest → hover on rows, tabs, chips, menu items. */\n --color-state-pressed: var(--color-palette-primary-600-a9); /** Hover → pressed on the same elements. */\n --color-state-selected: var(--color-palette-primary-600-a8); /** The persistent \"this one is chosen\" tint. */\n --color-viz-1: var(--color-palette-primary-500); /** Categorical series 1. */\n --color-viz-2: var(--color-palette-accent-500); /** Categorical series 2. */\n --color-viz-3: var(--color-palette-warning-400); /** Categorical series 3. */\n --color-viz-4: var(--color-palette-accent-alt-600); /** Categorical series 4. */\n --color-viz-5: var(--color-palette-success-300); /** Categorical series 5. */\n --color-viz-6: var(--color-palette-danger-600); /** Categorical series 6. */\n --color-viz-7: var(--color-palette-neutral-dark-500); /** Categorical series 7. */\n --color-viz-8: var(--color-palette-neutral-light-600); /** Categorical series 8. */\n --color-viz-seq-1: var(--color-palette-primary-600); /** Sequential step 1, low to high. */\n --color-viz-seq-2: var(--color-palette-primary-500); /** Sequential step 2, low to high. */\n --color-viz-seq-3: var(--color-palette-primary-400); /** Sequential step 3, low to high. */\n --color-viz-seq-4: var(--color-palette-primary-300); /** Sequential step 4, low to high. */\n --color-shadow-key: var(--color-black-a32); /** The tight, darker layer of an elevation shadow. Box-shadow color only; the elevation supplies offset and blur. */\n --color-shadow-ambient: var(--color-black-a24); /** The wide, soft layer of an elevation shadow, always paired with shadow-key. Transparent where a brand has no soft falloff. */\n --color-shadow-scrim: var(--color-black-a60); /** The scrim behind modals and dialogs. Mode-independent. */\n --gradient-surface-brand: radial-gradient(circle calc(0.85 * 100cqw) at 100% -5%, color-mix(in oklab, var(--color-palette-accent-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-accent-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-accent-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-accent-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-accent-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-accent-900) 0%, transparent) 100%), radial-gradient(circle calc(1.21 * 100cqw) at 5% 100%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n --gradient-surface-brand-subtle: radial-gradient(circle calc(0.78 * 100cqw) at 50% -10%, color-mix(in oklab, var(--color-palette-primary-900) 45%, transparent) 0%, color-mix(in oklab, var(--color-palette-primary-900) 43%, transparent) 16%, color-mix(in oklab, var(--color-palette-primary-900) 24%, transparent) 36%, color-mix(in oklab, var(--color-palette-primary-900) 11%, transparent) 56%, color-mix(in oklab, var(--color-palette-primary-900) 4%, transparent) 76%, color-mix(in oklab, var(--color-palette-primary-900) 0%, transparent) 100%);\n }\n}\n"; diff --git a/packages/gamut/src/Alert/__tests__/Alert.test.tsx b/packages/gamut/src/Alert/__tests__/Alert.test.tsx index ee2b2c82ac..86d6305cb8 100644 --- a/packages/gamut/src/Alert/__tests__/Alert.test.tsx +++ b/packages/gamut/src/Alert/__tests__/Alert.test.tsx @@ -156,7 +156,7 @@ describe('Alert', () => { /* A forced mode writes that mode's role variables into the button's class. */ expect(cta).not.toHaveStyleRule( - '--colors-action-neutral', + '--color-action-neutral', expect.any(String) ); }); @@ -166,7 +166,7 @@ describe('Alert', () => { expect(view.getByRole('status')).toHaveStyleRule( 'color', - 'var(--colors-text-error)' + 'var(--color-text-error)' ); }); @@ -175,7 +175,7 @@ describe('Alert', () => { expect(view.getByRole('status')).toHaveStyleRule( 'color', - 'var(--colors-text-default)' + 'var(--color-text-default)' ); }); @@ -184,7 +184,7 @@ describe('Alert', () => { expect(view.getByRole('status')).toHaveStyleRule( 'border-color', - 'var(--colors-text-success)' + 'var(--color-text-success)' ); }); @@ -193,7 +193,7 @@ describe('Alert', () => { expect(view.getByRole('status')).not.toHaveStyleRule( 'border-color', - 'var(--colors-text-success)' + 'var(--color-text-success)' ); }); }); diff --git a/packages/gamut/src/DataList/__tests__/DataGrid.test.tsx b/packages/gamut/src/DataList/__tests__/DataGrid.test.tsx index b0e4a4a424..eb750b3704 100644 --- a/packages/gamut/src/DataList/__tests__/DataGrid.test.tsx +++ b/packages/gamut/src/DataList/__tests__/DataGrid.test.tsx @@ -111,11 +111,11 @@ describe('DataGrid', () => { expect(rows).toContain(selectedRow); expect(selectedRow).toHaveStyleRule( 'background-image', - expect.stringContaining('var(--colors-state-selected)') + expect.stringContaining('var(--color-state-selected)') ); expect(otherRow).not.toHaveStyleRule( 'background-image', - expect.stringContaining('var(--colors-state-selected)') + expect.stringContaining('var(--color-state-selected)') ); }); diff --git a/packages/gamut/src/Form/__tests__/fieldColors.test.tsx b/packages/gamut/src/Form/__tests__/fieldColors.test.tsx index 481571ee08..44b3a87995 100644 --- a/packages/gamut/src/Form/__tests__/fieldColors.test.tsx +++ b/packages/gamut/src/Form/__tests__/fieldColors.test.tsx @@ -18,7 +18,7 @@ const renderIn = (ui: React.ReactElement) => ).container; -const role = (name: string) => `var(--colors-${name})`; +const role = (name: string) => `var(--color-${name})`; /* Design's field map, and design's "inputs use surface-raised". */ describe('field colors', () => { diff --git a/packages/gamut/src/ProgressBar/ProgressBar.test.tsx b/packages/gamut/src/ProgressBar/ProgressBar.test.tsx index d2b90dc9e8..710ff521ca 100644 --- a/packages/gamut/src/ProgressBar/ProgressBar.test.tsx +++ b/packages/gamut/src/ProgressBar/ProgressBar.test.tsx @@ -62,7 +62,7 @@ describe('ProgressBar label', () => { expect(screen.getByTestId('progress-bar-bar')).toContainElement(labels[1]); expect(labels[0].parentElement).toHaveStyleRule( 'color', - 'var(--colors-text-default)' + 'var(--color-text-default)' ); expect(screen.getByTestId('progress-bar-bar')).toHaveStyleRule( 'overflow', diff --git a/packages/gamut/src/Tag/__tests__/Tag.test.tsx b/packages/gamut/src/Tag/__tests__/Tag.test.tsx index d2d1a8fca7..8db5f03229 100644 --- a/packages/gamut/src/Tag/__tests__/Tag.test.tsx +++ b/packages/gamut/src/Tag/__tests__/Tag.test.tsx @@ -29,7 +29,7 @@ describe('Tag', () => { expect(fillOf(view.getByText('Python'))).toHaveStyleRule( 'background-color', - 'var(--colors-text-subtle)' + 'var(--color-text-subtle)' ); }); @@ -38,10 +38,10 @@ describe('Tag', () => { const fill = fillOf(view.getByText('Python')); expect(fill).toHaveStyleRule('background-color', 'transparent'); - expect(fill).toHaveStyleRule('color', 'var(--colors-action-disabled)'); + expect(fill).toHaveStyleRule('color', 'var(--color-action-disabled)'); expect( view.getByRole('button', { name: 'Dismiss Python Tag' }) - ).not.toHaveStyleRule('background-color', 'var(--colors-action-disabled)', { + ).not.toHaveStyleRule('background-color', 'var(--color-action-disabled)', { target: ':disabled', }); }); @@ -55,7 +55,7 @@ describe('Tag', () => { expect(view.getByText('Python').closest('a, button')).not.toHaveStyleRule( 'background-color', - 'var(--colors-action-disabled)', + 'var(--color-action-disabled)', { target: ':disabled' } ); }); diff --git a/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css b/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css index 8b8dbf4d3c..7d6dd2517f 100644 --- a/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css +++ b/packages/gamut/src/Video/lib/VidstackPlayer/vidstack-styles.css @@ -29,10 +29,10 @@ iframe.vds-youtube[data-no-controls] { /* Small layout volume / time slider */ :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track) { - background-color: var(--colors-gray-600); + background-color: var(--color-gray-600); } :where(.vds-video-layout[data-sm] .vds-volume-slider .vds-slider-track-fill) { - background-color: var(--colors-secondary); + background-color: var(--color-secondary); } .vds-video-layout .vds-time-slider .vds-slider-value { border: unset; @@ -59,7 +59,7 @@ iframe.vds-youtube[data-no-controls] { left: calc(50% - 0.5rem); background-image: linear-gradient( to top left, - var(--colors-background-contrast) 55%, + var(--color-background-contrast) 55%, rgba(0, 0, 0, 0) 20% ); } @@ -70,7 +70,7 @@ iframe.vds-youtube[data-no-controls] { left: calc(50% - 0.5rem); background-image: linear-gradient( to bottom right, - var(--colors-background-contrast) 55%, + var(--color-background-contrast) 55%, rgba(0, 0, 0, 0) 20% ); } diff --git a/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx b/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx index cedcfa0fc2..6867e9f442 100644 --- a/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx +++ b/packages/styleguide/src/lib/Foundations/ColorMode/CssContract.stories.tsx @@ -21,7 +21,7 @@ type Mode = keyof typeof roles; const panel: React.CSSProperties = { padding: 16, - border: '1px solid var(--colors-border-default)', + border: '1px solid var(--color-border-default)', borderRadius: 4, }; @@ -32,12 +32,12 @@ const Panel: React.FC<{ mode: Mode; children?: React.ReactNode }> = ({ }) => (

{mode} — text-default,{' '} - text-subtle,{' '} - + text-subtle,{' '} + action-primary

@@ -71,7 +71,7 @@ const CssSurface: React.FC<{ const key = ( color in roles[outer] ? roles[outer][color as RoleName].ref : color ) as PaletteKey; - const bg = `var(--colors-${key})`; + const bg = `var(--color-${key})`; return (
{color} - + {' '} → {contentModes[key]} content @@ -132,14 +132,14 @@ export const Surfaces: Story = { /* * gamut components inside a subtree themed only by CSS. Their colors are - * `var(--colors-*)` names, so they follow the attribute. What doesn't follow: + * `var(--color-*)` names, so they follow the attribute. What doesn't follow: * anything that reads the mode from Emotion's theme in JS. */ export const EmotionInsideCss: Story = { render: () => (
Text, an Anchor, and buttons, under a plain{' '} diff --git a/packages/variance/integration/__tests__/variance.test.ts b/packages/variance/integration/__tests__/variance.test.ts index 62cec102ed..8b14c488cd 100644 --- a/packages/variance/integration/__tests__/variance.test.ts +++ b/packages/variance/integration/__tests__/variance.test.ts @@ -266,7 +266,7 @@ describe('css', () => { expect(returnedFn({ theme })).toEqual({ width: '100%', - boxShadow: '0px 0px 0px 0px var(--colors-black)', + boxShadow: '0px 0px 0px 0px var(--color-black)', XS: { width: '200%' }, '&:hover': { width: '50%', diff --git a/packages/variance/src/createTheme/createTheme.test.ts b/packages/variance/src/createTheme/createTheme.test.ts index 7e31bcf5b3..2876dd1b66 100644 --- a/packages/variance/src/createTheme/createTheme.test.ts +++ b/packages/variance/src/createTheme/createTheme.test.ts @@ -67,7 +67,7 @@ describe('createTheme', () => { }; const cssVariableReferences = mapValues( staticColors, - (val) => `var(--colors-${val})` + (val) => `var(--color-${val})` ); const builder = createTheme(base); it('creates color variables', () => { @@ -89,12 +89,12 @@ describe('createTheme', () => { .build(); expect(theme.colors).toEqual({ - ...mapValues(staticColors, (val) => `var(--colors-${val})`), - primary: 'var(--colors-primary)', + ...mapValues(staticColors, (val) => `var(--color-${val})`), + primary: 'var(--color-primary)', }); expect(theme._variables.mode).toEqual({ - '--colors-primary': 'var(--colors-red)', + '--color-primary': 'var(--color-red)', }); }); diff --git a/packages/variance/src/createTheme/createTheme.ts b/packages/variance/src/createTheme/createTheme.ts index 78eed910bd..971abad705 100644 --- a/packages/variance/src/createTheme/createTheme.ts +++ b/packages/variance/src/createTheme/createTheme.ts @@ -53,7 +53,7 @@ class ThemeBuilder { /** * - * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--colors-${key}`. + * @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`. * @example .addColors({ navy: 'navy', hyper: 'purple' }) */ addColors< @@ -64,14 +64,14 @@ class ThemeBuilder { ): ThemeBuilder< MergeTheme< T & PrivateThemeKeys, - Record<'colors', KeyAsVariable> + Record<'colors', KeyAsVariable> > > { const flatColors = flattenScale(colors); const { variables, tokens } = serializeTokens( // TS 5.9+ no longer resolves LiteralPaths<> as assignable to SerializedTokensInput; flattened scales are plain token maps at runtime. flatColors as Record, - 'colors', + 'color', this.#theme ); this.#theme = merge({}, this.#theme, { @@ -107,7 +107,7 @@ class ThemeBuilder { { colors: KeyAsVariable< LiteralPaths, - 'colors' + 'color' > & T['colors']; modes: Merge; @@ -123,7 +123,7 @@ class ThemeBuilder { merge({}, this.#theme.modes?.[initialMode], modes[initialMode]), (color) => this.#theme.colors[color] ), - 'colors', + 'color', this.#theme );