From 5b345cdde21bfb0e78ae93dd87fa129da43ad681 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Wed, 4 Nov 2026 13:58:14 -0500 Subject: [PATCH 1/2] feat(gamut): selected-row tint, raised table rows and a two-tone ProgressBar label Behavior design's component map (sandbox df33b47) adds on top of the role swap in #54: - List: an `isSelected` row state draws the `state-selected` veil over the row's fill, stacked under the hover veil; DataList's selected rows set it. Table rows are `surface-raised` instead of transparent. - ProgressBar: at large and xl, a second copy of the label sits on the track in `text-default` and the bar clips its `text-inverse` copy, so a label crossing the bar edge reads on both sides. Co-Authored-By: Claude Opus 5.5 --- .changeset/color-roles-component-behavior.md | 9 +++++ .../src/DataList/Tables/Rows/TableRow.tsx | 2 +- .../src/DataList/__tests__/DataGrid.test.tsx | 22 ++++++++++++ packages/gamut/src/List/elements.tsx | 20 +++++++++-- .../src/ProgressBar/ProgressBar.test.tsx | 35 +++++++++++++++++++ packages/gamut/src/ProgressBar/index.tsx | 34 ++++++++++++++++-- 6 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 .changeset/color-roles-component-behavior.md diff --git a/.changeset/color-roles-component-behavior.md b/.changeset/color-roles-component-behavior.md new file mode 100644 index 0000000000..2742edd04b --- /dev/null +++ b/.changeset/color-roles-component-behavior.md @@ -0,0 +1,9 @@ +--- +'@skillsoft/gamut': minor +--- + +Component behavior from design's component map that the role swap didn't cover. + +- A selected DataList or DataTable row takes the `state-selected` veil over its fill, with the hover veil on top when hovered. `ListRow` takes an `isSelected` prop for the same tint. +- Table rows are `surface-raised`, with `surface-sunken` stripes, instead of transparent. +- ProgressBar's label at `large` and `xl` sizes is two-tone: `text-inverse` on the bar and `text-default` where it runs onto the track, so a short bar's label stays readable. diff --git a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx index 4d872d8642..3282072d62 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx @@ -77,7 +77,7 @@ export const TableRow: DataRow = ({ : {}; return ( - + {selectable && ( { }); }); + it('tints a selected row with the state-selected veil', () => { + renderView({ selected: ['1'] }); + + const rows = screen.getAllByRole('row'); + const selectedRow = screen + .getByRole('checkbox', { name: 'Select 1' }) + .closest('tr')!; + const otherRow = screen + .getByRole('checkbox', { name: 'Select 2' }) + .closest('tr')!; + + expect(rows).toContain(selectedRow); + expect(selectedRow).toHaveStyleRule( + 'background-image', + expect.stringContaining('var(--colors-state-selected)') + ); + expect(otherRow).not.toHaveStyleRule( + 'background-image', + expect.stringContaining('var(--colors-state-selected)') + ); + }); + it("clicking the row's checkbox deselects the row when the row is already selected", () => { renderView({ selected: ['1'] }); diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx index dc0d63b113..a43b73a588 100644 --- a/packages/gamut/src/List/elements.tsx +++ b/packages/gamut/src/List/elements.tsx @@ -59,6 +59,10 @@ export const ListEl = styled('ul', styledOptions<'ul'>())( space ); +/* A veil as a background layer, so it sits over the row's own fill. */ +const veil = (role: 'state-hover' | 'state-selected') => + `linear-gradient(${theme.colors[role]}, ${theme.colors[role]})`; + const rowStates = states({ isOl: { '&::before': { @@ -81,6 +85,16 @@ const rowStates = states({ transparentBg: { bg: 'transparent', }, + /* + * A selected row takes the `state-selected` veil over its own fill + * (design's list map). Hovering it stacks the hover veil on top. + */ + isSelected: { + backgroundImage: veil('state-selected'), + '&:hover': { + backgroundImage: `${veil('state-hover')}, ${veil('state-selected')}`, + }, + }, }); const interactiveState = states({ @@ -89,7 +103,7 @@ const interactiveState = states({ /* Hover is a veil over the row's own fill; focus is the ring alone. */ '&:hover': { - backgroundImage: `linear-gradient(${theme.colors['state-hover']}, ${theme.colors['state-hover']})`, + backgroundImage: veil('state-hover'), }, '&:focus-visible, &:focus-within': { outline: `1px solid ${theme.colors['action-primary']}`, @@ -132,9 +146,9 @@ const rowVariants = variant({ borderColorTop: 'border-subtle', }, }, + /* Rows are `surface-raised`; a stripe is sunken, so it never reads as a selection. */ table: { - bg: 'transparent', - /* A stripe is a sunken surface, so it never reads as a selection. */ + bg: 'surface-raised', '&:nth-of-type(2n)': { bg: 'surface-sunken', }, diff --git a/packages/gamut/src/ProgressBar/ProgressBar.test.tsx b/packages/gamut/src/ProgressBar/ProgressBar.test.tsx index 891a7d489f..d2b90dc9e8 100644 --- a/packages/gamut/src/ProgressBar/ProgressBar.test.tsx +++ b/packages/gamut/src/ProgressBar/ProgressBar.test.tsx @@ -1,9 +1,12 @@ +import { matchers } from '@emotion/jest'; import { MockGamutProvider } from '@skillsoft/gamut-tests'; import { render, screen } from '@testing-library/react'; import { ProgressBar } from '.'; import type { ProgressBarProps } from './types'; +expect.extend(matchers); + describe('ProgressBar', () => { describe.each([ { useLogicalProperties: true, widthProp: 'inlineSize' }, @@ -41,3 +44,35 @@ describe('ProgressBar', () => { } ); }); + +describe('ProgressBar label', () => { + const renderBar = (props: Partial = {}) => + render( + + + + ); + + /* Design's two-tone label: text-inverse on the bar, text-default on the track. */ + it('draws the label on the bar and on the track at large sizes', () => { + renderBar({ size: 'large' }); + + const labels = screen.getAllByText('10%'); + expect(labels).toHaveLength(2); + expect(screen.getByTestId('progress-bar-bar')).toContainElement(labels[1]); + expect(labels[0].parentElement).toHaveStyleRule( + 'color', + 'var(--colors-text-default)' + ); + expect(screen.getByTestId('progress-bar-bar')).toHaveStyleRule( + 'overflow', + 'hidden' + ); + }); + + it('draws no label at small sizes', () => { + renderBar({ size: 'small' }); + + expect(screen.queryByText('10%')).toBeNull(); + }); +}); diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index 03a9b72a90..eb78845616 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import type { PatternProps } from '@skillsoft/gamut-patterns'; -import { variant } from '@skillsoft/gamut-styles'; +import { css, variant } from '@skillsoft/gamut-styles'; import * as React from 'react'; import { Box } from '../Box'; @@ -116,6 +116,8 @@ const progressBarForegroundVariants = variant({ display: 'flex', transition: 'width 0.5s', position: 'relative', + /* Clips the bar's copy of the label to the bar. */ + overflow: 'hidden', }, /* Every bar is `text-default`, blue and yellow included. */ variants: { @@ -156,9 +158,28 @@ const DisplayedPercent = styled.span` font-weight: bold; padding: 0.5rem; text-align: right; + white-space: nowrap; width: 100%; `; +/* + * Design's two-tone label: `text-inverse` where it sits on the bar, + * `text-default` where it runs onto the track. The track's copy sits at the + * same place under the bar, so the bar covers it and the wrapper clips it. + */ +const TrackLabel = styled(Box)( + css({ + alignItems: 'center', + color: 'text-default', + display: 'flex', + height: '100%', + left: 0, + position: 'absolute', + top: 0, + transition: 'width 0.5s', + }) +); + export const ProgressBar: React.FC = ({ flat, minimumPercent = 0, @@ -168,6 +189,8 @@ export const ProgressBar: React.FC = ({ variant, }) => { const id = React.useId(); + const width = `${Math.max(minimumPercent, percent)}%`; + const showLabel = ['large', 'xl'].includes(size); return ( = ({ > {`Progress: ${percent}%`} {Pattern && } + {showLabel && ( + + {percent}% + + )} - {['large', 'xl'].includes(size) && ( + {showLabel && ( {percent}% )} From 001a5ff83d676c6712fce2746d080dd29d5ceda7 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 10 Nov 2026 09:10:18 -0500 Subject: [PATCH 2/2] refactor: use the singular --color- prefix for color variables Co-Authored-By: Claude Haiku 5.5 --- .changeset/color-system-brands.md | 3 +- .../skills/gamut-review/SKILL.md | 40 +- .../skills/gamut-style-utilities/SKILL.md | 2 +- packages/gamut-brand/README.md | 10 +- .../gamut-brand/src/__tests__/system.test.ts | 2 +- packages/gamut-brand/src/emit.ts | 2 +- packages/gamut-brand/src/generate.ts | 10 +- packages/gamut-brand/src/roundTrip.ts | 6 +- packages/gamut-styles/src/ColorMode.tsx | 8 +- .../src/__tests__/Background.test.tsx | 10 +- .../src/__tests__/GamutProvider.test.tsx | 8 +- .../src/__tests__/stylingContract.test.tsx | 12 +- .../__snapshots__/theme.test.ts.snap | 2810 ++++++++--------- .../themes/__tests__/brandElevation.test.ts | 14 +- .../src/themes/__tests__/theme.test.ts | 8 +- .../src/themes/createBrandTheme.ts | 4 +- packages/gamut-styles/src/themes/platform.ts | 6 +- .../tokens/generated/admin/dark.tokens.json | 4 +- .../tokens/generated/admin/light.tokens.json | 4 +- .../src/tokens/generated/admin/tokens.css | 392 +-- .../src/tokens/generated/admin/values.ts | 2 +- .../generated/lxStudio/dark.tokens.json | 4 +- .../generated/lxStudio/light.tokens.json | 4 +- .../src/tokens/generated/lxStudio/tokens.css | 392 +-- .../src/tokens/generated/lxStudio/values.ts | 2 +- .../originalCodecademy/dark.tokens.json | 4 +- .../originalCodecademy/light.tokens.json | 4 +- .../generated/originalCodecademy/tokens.css | 396 +-- .../generated/originalCodecademy/values.ts | 2 +- .../generated/platform/dark.tokens.json | 4 +- .../generated/platform/light.tokens.json | 4 +- .../src/tokens/generated/platform/tokens.css | 392 +-- .../src/tokens/generated/platform/values.ts | 2 +- .../generated/skillsoft/dark.tokens.json | 4 +- .../generated/skillsoft/light.tokens.json | 4 +- .../src/tokens/generated/skillsoft/tokens.css | 392 +-- .../src/tokens/generated/skillsoft/values.ts | 2 +- .../gamut/src/Alert/__tests__/Alert.test.tsx | 10 +- .../src/DataList/__tests__/DataGrid.test.tsx | 4 +- .../src/Form/__tests__/fieldColors.test.tsx | 2 +- .../src/ProgressBar/ProgressBar.test.tsx | 2 +- packages/gamut/src/Tag/__tests__/Tag.test.tsx | 8 +- .../lib/VidstackPlayer/vidstack-styles.css | 8 +- .../ColorMode/CssContract.stories.tsx | 18 +- .../integration/__tests__/variance.test.ts | 2 +- .../src/createTheme/createTheme.test.ts | 8 +- .../variance/src/createTheme/createTheme.ts | 10 +- 47 files changed, 2520 insertions(+), 2521 deletions(-) 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-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 );