From 95ea389496cd8ffd34a665d21e3beeaa9d90bd91 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Sun, 26 Jul 2026 21:04:06 -0700 Subject: [PATCH 001/640] chore(migration): scaffold griffel-to-tailwind migration plan (ledger, runbook) Durable state for the Griffel -> Tailwind v4 + CSS Modules styling migration. Plan files only; no component code changes. See migration/griffel-to-tailwind/RUNBOOK.md for the resume protocol. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- migration/griffel-to-tailwind/README.md | 64 +++ migration/griffel-to-tailwind/RUNBOOK.md | 104 +++++ migration/griffel-to-tailwind/ledger.json | 541 ++++++++++++++++++++++ 3 files changed, 709 insertions(+) create mode 100644 migration/griffel-to-tailwind/README.md create mode 100644 migration/griffel-to-tailwind/RUNBOOK.md create mode 100644 migration/griffel-to-tailwind/ledger.json diff --git a/migration/griffel-to-tailwind/README.md b/migration/griffel-to-tailwind/README.md new file mode 100644 index 00000000000000..d778cb82a8fd34 --- /dev/null +++ b/migration/griffel-to-tailwind/README.md @@ -0,0 +1,64 @@ +# Griffel → Tailwind v4 + CSS Modules Migration + +**Branch:** `styling/tailwind-css-modules` · **Started:** 2026-07-26 · **Status ledger:** `ledger.json` + +## Mission + +Convert the styling mechanism of every Fluent UI v9 react-component from Griffel +(`makeStyles`/`mergeClasses` CSS-in-JS) to **Tailwind v4 + CSS Modules with variant +selectors**, following the conventions established in `C:/Users/ArrayKnight/Code/nyt-games`. + +**Invariants (non-negotiable):** + +1. Every component looks pixel-identical and functions identically from the user's + perspective, across all states, options, themes (web/teams, light/dark/high-contrast), + and RTL. +2. Only the styling _mechanism_ changes. No behavior, DOM-structure, or API redesigns + beyond what the mechanism swap strictly requires. +3. Theme values adhere to the existing Fluent UI theme (design tokens as CSS custom + properties). The **only** Tailwind theme value carried over from nyt-games is: + `--base-scale: calc(1rem / 16px);` +4. Validation is Storybook-driven: existing stories (docs + VR stories) are the source of + truth for states/options/themes, screenshot-diffed before vs. after per package. +5. Deliverable includes a metrics report: build time, build output size, client bundle + size, before vs. after. + +## Target styling convention (from nyt-games, verified against its source) + +- **CSS Modules** per component (`button.module.css`), header `@reference '#theme';`, + rules inside `@layer components.lN` (N = nesting/precedence level). +- **Tailwind v4** syntax: `@apply` for utilities, `@variant { ... }` for state + blocks inside a class. +- **Custom variants** defined once in a shared theme file via + `@custom-variant name (&:where([data-...="..."], :pseudo));` — `:where()` keeps + specificity flat so consumer overrides win. +- **Enum props → module classes** (e.g. `styles[appearance]`, `styles[shape]`); + **stateful/interactive props → data-attributes** (e.g. `data-size`, `data-disabled`) + targeted by custom variants. +- **Composition:** `clsx(staticSlotClass, styles.root, styles[enumProp]..., className)` — + consumer `className` always last. +- Dual-selector theming variants (`dark`/`light`) keyed off both class and `data-theme`. + +## Directory map + +| Path | Purpose | +| --------------------- | ------------------------------------------------------------------------- | +| `README.md` | This file — mission + invariants. | +| `RUNBOOK.md` | **Resume protocol.** Any session/person continues the work from here. | +| `CONVERSION_GUIDE.md` | The cookbook workers follow for each package (exact recipes). | +| `ledger.json` | Machine-readable per-package status. Single source of truth for progress. | +| `reports/` | Research reports, decisions, and the final metrics report. | +| `workflows/` | Orchestration workflow scripts (batch conversion, validation). | +| `validation/` | Screenshot-diff harness (Storybook → Playwright → pixel diff). | +| `metrics/` | Baseline + post-migration measurements (build time, bundle sizes). | + +## Phases + +0. **Infrastructure** — research, this scaffolding, Tailwind/CSS-Modules build wiring, + validation harness, baseline metrics capture. _(current)_ +1. **Pilot** — convert 1–2 simple packages end-to-end (e.g. react-divider, react-badge); + prove the pipeline: convert → build → screenshot-diff green → metrics. +2. **Mass conversion** — ledger-driven batches via workflow orchestration + (Opus/Sonnet workers, Fable oversight). Update `ledger.json` after every batch. +3. **Integration** — suite package, docsite, SSR tests, conformance tests green. +4. **Report** — metrics before/after, PR authoring. diff --git a/migration/griffel-to-tailwind/RUNBOOK.md b/migration/griffel-to-tailwind/RUNBOOK.md new file mode 100644 index 00000000000000..6625b5609e852b --- /dev/null +++ b/migration/griffel-to-tailwind/RUNBOOK.md @@ -0,0 +1,104 @@ +# RUNBOOK — Resume Protocol + +This migration is designed to survive token-limit resets, session crashes, and computer +restarts. **All durable state lives in this directory on branch +`styling/tailwind-css-modules`** (committed — never rely on uncommitted state or on +conversation memory). + +## If you are a fresh session picking this up + +1. `git checkout styling/tailwind-css-modules` in `C:/Users/ArrayKnight/Code/fluentui`. +2. Read `README.md` (mission + invariants), then `ledger.json` (`phase` field + per-package + statuses), then the phase section below matching `ledger.phase`. +3. Read `reports/DECISIONS.md` for settled architecture decisions — do not re-litigate them. +4. Continue at the first unfinished step. Update `ledger.json` and commit after **every** + completed unit of work (small commits, `chore(migration): ...` prefix; plan files in + dedicated commits so they can be dropped before the final PR). + +## Orchestration model + +- **Fable (main session)** oversees: reads/writes the ledger, launches workflows, reviews + results, makes decisions, commits. +- **Opus workers** do conversion and analysis; **Sonnet workers** do mechanical steps + (inventory, screenshot runs, diff triage). Set per-agent via workflow `model:` opts. +- Workflow scripts live in `workflows/` and are **parameterized by `args`** (the batch of + package names). They never read the ledger themselves (workflow scripts have no fs + access) — the overseer reads the ledger, picks the batch, passes it as `args`, and + writes results back to the ledger when the workflow returns. +- Batch size: 3–6 packages per workflow run so a crash loses at most one batch. +- Note: the ECC GateGuard hook fact-gates the first Bash call and every new-file Write in + each session, including worker sessions. For mass-conversion sessions consider launching + with `ECC_GATEGUARD=off` (user's call — ask once per session if unclear). + +## Ledger contract (`ledger.json`) + +- `phase`: `0-infrastructure` | `1-pilot` | `2-mass-conversion` | `3-integration` | `4-report` +- Package `status` lifecycle: + `pending-triage → (no-styles | needs-conversion | special) → converting → converted → +validated → done`, with `blocked` as an escape hatch (always fill `notes`). +- `validated` means: package builds, unit tests pass, and screenshot diff vs. baseline is + clean for every covered story × theme × direction combo. +- Only the overseer writes the ledger. Workers return results; overseer records them. + +## Phase checklists + +### Phase 0 — Infrastructure (current) + +- [x] Branch + scaffolding + ledger seeded (87 packages, pending-triage) +- [ ] Research reports saved to `reports/` (7 areas: nyt-games conventions, Griffel + inventory, theming, storybook/VR, build/metrics, headless precedent, risks) +- [ ] `reports/DECISIONS.md` written: CSS shipping mechanism, layer scheme, variant + catalog location, className-override compat strategy, RTL strategy (logical + properties), focus-indicator strategy +- [ ] `CONVERSION_GUIDE.md` cookbook completed (with a worked example) +- [ ] Shared theme layer created (Fluent tokens bridge + `--base-scale` + custom variants) +- [ ] Tailwind v4 + CSS Modules build wiring for one package + its storybook proven +- [ ] Validation harness working (`validation/` — see its README once written) +- [ ] Baseline metrics captured (`metrics/baseline/` — build time, monosize bundle sizes, + docsite bundle) **before any component code changes** +- [ ] Ledger triage: every package classified via Griffel inventory report + +### Phase 1 — Pilot (user validates the process here) + +- [ ] Convert `react-divider` (1 component; real CSS complexity: ::before/::after rules, + vertical/horizontal, inset, alignContent) — full pipeline: convert → build → unit + tests → screenshot diff vs. baseline → metrics for the package +- [ ] Present pilot results to user for sign-off before mass conversion +- [ ] Convert `react-badge` second (enum-heavy: appearance × color × size × shape) +- [ ] Cookbook updated with lessons learned; `workflows/convert-batch.js` finalized + +### Phase 2 — Mass conversion (ledger-driven loop) + +Repeat until no `needs-conversion` remain: + +1. Overseer picks next batch from ledger (dependency-ordered: theme/utility layers first, + then simple leaf components, then compound components, `react-components` suite last). +2. Run `workflows/convert-batch.js` with `args = [batch]`. +3. For each package: worker converts per cookbook → build + unit tests → validation + harness screenshot diff → verifier agent adjudicates diffs. +4. Overseer updates ledger (converted/validated/blocked + notes), commits code + ledger. +5. `special` packages (runtime-value styles, portals, motion) get individual Opus + deep-dives, not batch treatment. + +### Phase 3 — Integration + +- [ ] `react-components` suite package builds; storybook (public-docsite-v9) builds +- [ ] Full VR pass across all packages; SSR tests (apps/ssr-tests-v9) green +- [ ] Conformance + unit test suites green repo-wide; snapshot tests updated intentionally +- [ ] Remove Griffel deps where no longer used; dependency graph clean + +### Phase 4 — Report + PR + +- [ ] Re-run every metric from `metrics/baseline/` → `metrics/after/` +- [ ] Write `reports/METRICS_REPORT.md` (build time, output size, client bundle, deltas) +- [ ] Author PR; move/remove `migration/` docs per user's preference + +## Recovery notes + +- Workflow crashed mid-batch: ledger still says `converting` — reset those packages' + working tree (`git checkout -- packages/react-components/`) or inspect partial + work, then re-run the batch. Never trust half-converted state. +- Session died before ledger update: `git status`/`git diff` is ground truth; reconcile + ledger to match reality before continuing. +- Baseline artifacts (screenshots/metrics) are large; if missing after a clean clone, + re-run capture scripts against `master` (scripts record the exact baseline commit). diff --git a/migration/griffel-to-tailwind/ledger.json b/migration/griffel-to-tailwind/ledger.json new file mode 100644 index 00000000000000..d73cc4323f876c --- /dev/null +++ b/migration/griffel-to-tailwind/ledger.json @@ -0,0 +1,541 @@ +{ + "version": 1, + "updated": "2026-07-26", + "phase": "0-infrastructure", + "branch": "styling/tailwind-css-modules", + "statusValues": [ + "pending-triage", + "no-styles", + "needs-conversion", + "special", + "converting", + "converted", + "validated", + "blocked", + "done" + ], + "packages": { + "babel-preset-global-context": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "babel-preset-storybook-full-source": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "component-selector-preview": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "deprecated": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "eslint-plugin-react-components": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "global-context": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "keyboard-keys": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "priority-overflow": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-accordion": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-aria": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-avatar": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-badge": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-breadcrumb": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-button": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-calendar-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-card": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-carousel": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-checkbox": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-color-picker": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-colorpicker-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-combobox": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-components": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-conformance-griffel": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-context-selector": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-datepicker-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-dialog": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-divider": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-drawer": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-field": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-headless-components-preview": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-icons-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-image": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-infolabel": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-input": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-jsx-runtime": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-label": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-link": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-list": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-menu": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-menu-grid-preview": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-message-bar": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-migration-v0-v9": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-migration-v8-v9": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-motion": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-motion-components-preview": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-nav": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-overflow": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-persona": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-popover": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-portal": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-portal-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-portal-compat-context": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-positioning": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-progress": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-provider": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-radio": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-rating": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-search": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-select": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-shared-contexts": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-skeleton": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-slider": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-spinbutton": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-spinner": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-storybook-addon": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-storybook-addon-export-to-sandbox": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-swatch-picker": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-switch": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-table": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-tabs": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-tabster": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-tag-picker": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-tags": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-teaching-popover": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-text": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-textarea": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-theme": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-theme-sass": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-timepicker-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-toast": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-toolbar": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-tooltip": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-tree": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-utilities": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "react-utilities-compat": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "recipes": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + }, + "theme-designer": { + "status": "pending-triage", + "stylesFiles": null, + "storiesCovered": null, + "notes": "" + } + } +} From 8924bef0a52283112e6f7984160b9a81dd820a26 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Sun, 26 Jul 2026 21:44:21 -0700 Subject: [PATCH 002/640] chore(migration): phase-0 research reports, architecture decisions, conversion cookbook, ledger triage 7-area research (nyt-games conventions, Griffel inventory, theming, storybook/VR, build/metrics, headless precedent, risk analysis) -> reports/. DECISIONS.md D1-D12 settles CSS shipping, @layer cascade scheme, data-attribute variants, RTL, focus, test strategy, and metrics methodology. Ledger: 49 needs-conversion / 14 special / 24 no-styles across 247 styles files. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../griffel-to-tailwind/CONVERSION_GUIDE.md | 135 +++ migration/griffel-to-tailwind/RUNBOOK.md | 11 +- migration/griffel-to-tailwind/ledger.json | 426 ++++----- .../griffel-to-tailwind/reports/DECISIONS.md | 209 +++++ .../reports/build-metrics.md | 494 ++++++++++ .../reports/griffel-inventory.md | 163 ++++ .../reports/headless-precedent.md | 118 +++ .../reports/nyt-games-conventions.md | 843 ++++++++++++++++++ .../reports/risk-analysis.md | 428 +++++++++ .../reports/storybook-vr-infra.md | 412 +++++++++ .../griffel-to-tailwind/reports/summary.md | 15 + .../reports/theming-system.md | 606 +++++++++++++ 12 files changed, 3641 insertions(+), 219 deletions(-) create mode 100644 migration/griffel-to-tailwind/CONVERSION_GUIDE.md create mode 100644 migration/griffel-to-tailwind/reports/DECISIONS.md create mode 100644 migration/griffel-to-tailwind/reports/build-metrics.md create mode 100644 migration/griffel-to-tailwind/reports/griffel-inventory.md create mode 100644 migration/griffel-to-tailwind/reports/headless-precedent.md create mode 100644 migration/griffel-to-tailwind/reports/nyt-games-conventions.md create mode 100644 migration/griffel-to-tailwind/reports/risk-analysis.md create mode 100644 migration/griffel-to-tailwind/reports/storybook-vr-infra.md create mode 100644 migration/griffel-to-tailwind/reports/summary.md create mode 100644 migration/griffel-to-tailwind/reports/theming-system.md diff --git a/migration/griffel-to-tailwind/CONVERSION_GUIDE.md b/migration/griffel-to-tailwind/CONVERSION_GUIDE.md new file mode 100644 index 00000000000000..09e6eefc020f5f --- /dev/null +++ b/migration/griffel-to-tailwind/CONVERSION_GUIDE.md @@ -0,0 +1,135 @@ +# Conversion Guide (Worker Cookbook) + +Read `reports/DECISIONS.md` first — this guide implements those decisions. Read +`reports/nyt-games-conventions.md` for the authoring dialect. When this guide and a +research report disagree with the actual code, the code wins — report the discrepancy. + +## Per-package conversion recipe + +For each component in `packages/react-components//library/src/components//`: + +### 1. Read and map the Griffel styles + +Open `useStyles.styles.ts`. Build a mapping table before writing any CSS: + +| makeStyles slice | mergeClasses position | → target | +| ----------------------------------------------- | --------------------- | ------------------------------------------- | +| `makeResetStyles` base | first | `@layer fui.reset` rule on the slot class | +| base slice | early | `@layer fui.base` | +| enum slices (appearance/shape/color) | middle | module classes in `fui.variant` | +| size/state conditionals | middle/late | `data-*` + `@variant` blocks in `fui.state` | +| slices that override earlier slices' properties | late | `fui.override` | + +**Order rule (critical):** replicate the `mergeClasses` **argument order**, not the source +declaration order. When two slices set the same property, the later argument must land in +a later layer (or later in the same layer). The risk report lists 23 known inversions — +check whether your component is one of them (`reports/risk-analysis.md`). + +### 2. Author `.module.css` + +```css +@reference '#theme'; + +@layer fui.reset { + .root { /* makeResetStyles content */ } +} + +@layer fui.base { + .root { + @apply flex items-center; /* Tailwind utilities where 1:1 */ + font-family: var(--fontFamilyBase); /* tokens stay literal var() */ + + &::before { … } + + @variant vertical { … } /* data-orientation-driven states */ + @variant disabled { … } + } +} + +@layer fui.variant { + .brand { color: var(--colorBrandForeground1); } + .subtle { … } +} +``` + +Dialect rules (from nyt-games + Fluent adaptations): + +- First line always `@reference '#theme';` (resolution wired by the build; see theme + package README). +- Tokens: literal `var(--tokenName)` — never re-declare them, never put them in `@theme`. +- Numeric px values from Griffel: use Tailwind spacing utilities (`p-12` = 12px-reading, + rem-computed) **only** for pixel literals; token-derived values stay `var()`. +- **Logical properties only** for anything Griffel would RTL-flip: `paddingLeft` → + `padding-inline-start`, `marginRight` → `margin-inline-end`, `left` → + `inset-inline-start`, `textAlign: left` → `text-align: start`, + `borderTopLeftRadius` → `border-start-start-radius`, etc. +- Value-level RTL (gradients, `translateX`, box-shadow x-offset, `transform-origin`, + `cursor: *-resize`, keyframes): duplicate under `@variant rtl { … }` with mirrored + values. rtl-css-js's exact flip semantics are in `reports/theming-system.md`. +- `shorthands.*` and CSS shorthands: **expand to longhands** in emitted CSS + (`shorthands.borderColor(x)` → four `border-*-color` longhands; `padding: '3px 8px'` → + four longhands) — Griffel's shorthand/longhand priority machinery has no CSS equivalent. +- Selectors on other components' static classes: `:global(.fui-Xxx)`. +- Pseudo-states: use the shared custom variants (`@variant hover`, `@variant disabled`, + `@variant focus-visible-fui` …) — never raw `[data-fui-focus-visible]` selectors in + component files. +- Focus rings: `@apply` the shared focus-ring utility; never hand-copy the ring CSS. +- Keep a comment trail: each rule block cites the source slice name it replaces + (`/* from useBaseStyles.base */`) — reviewers diff against the Griffel file. + +### 3. Rewrite `useStyles.styles.ts` + +- Keep the file name, export names, and `'use client'` (harmless for CSS Modules; + cleanup happens Phase 3). +- `import { clsx } from 'clsx'` replaces `mergeClasses`; `import styles from +'./.module.css'`. +- Class composition: `clsx(xClassNames.slot, styles.slot, styles[enumProp]…, +state.slot.className)` — static class first, consumer className last. The + **`xClassNames` static objects are untouchable API.** +- Data attributes: set in the styles hook on the slot props (e.g. + `state.root['data-orientation'] = state.vertical ? 'vertical' : 'horizontal'`), using + the headless preview's attribute names where one exists + (`reports/headless-precedent.md` lists all 25). New names only when no precedent. +- Delete no exports. `useXStyles_unstable` signature unchanged. + +### 4. Package plumbing (once per package) + +- `package.json`: `"sideEffects": ["**/*.css"]` (was `false` — this is a BLOCKER-level + correctness change); add `"./styles.css"` export once build emits it. +- Jest: covered by shared `jest.preset.js` mapper + serializer (Phase 0 infra). Add + `disabledTests: ['make-styles-overrides-win']` + the replacement conformance test in + the package's `isConformant` wrapper. +- Remove `@griffel/react` from dependencies **only when** no file in the package imports + it (grep first — some packages use it outside `.styles.ts`). + +### 5. Validate (every conversion, no exceptions) + +1. `yarn nx run :build` — clean. +2. `yarn nx run :test` — clean; snapshot diffs must be **empty** (serializer strips + module classes; a snapshot change means you changed DOM or class order). +3. VR: capture the package's stories and diff vs baseline + (`migration/griffel-to-tailwind/validation/README.md` for exact commands). Every + story × theme × RTL must pass tolerance. Adjudicate any diff: antialiasing-level noise + → tolerated by threshold; anything structural → fix before proceeding. +4. Report back (structured): files changed, mapping table, inversions encountered, + data-attributes added, diffs adjudicated, anything that didn't fit this cookbook. + +## Known special cases (route to `special`, not batch conversion) + +- Runtime-value styles (Slider, ColorPicker sliders, Tab indicator, TagPicker widths, + positioning middlewares, v0 Attachment): the inline-style / CSS-var mechanism already + in place **ports unchanged** — only the static Griffel parts convert. Do not touch the + JS that sets `--fui-*` vars or `style` props. +- Style factories (`createArrowStyles`, `createSlideStyles`, tabster focus helpers, + `customizeSelector` call sites — 4 files): bespoke per-site resolution. +- `react-badge` `!important` usage (`usePresenceBadgeStyles`): semantics invert under + layers — needs explicit design during the badge pilot. +- Keyframes (5 files, 12 animationName): author `@keyframes` in the module, add RTL twin + under `@variant rtl` where the body was flippable (Skeleton wave!). +- `react-tabster`, `react-positioning`, `react-provider`, `react-portal-compat`, + `react-migration-v8-v9`, suite package `react-components`: individually planned. + +## Definition of done (per package) + +Ledger `validated`: build + tests green, VR diff clean, no `@griffel` import remains in +`library/src` (unless whitelisted in ledger notes), `sideEffects` updated, report filed. diff --git a/migration/griffel-to-tailwind/RUNBOOK.md b/migration/griffel-to-tailwind/RUNBOOK.md index 6625b5609e852b..97cf73416e2643 100644 --- a/migration/griffel-to-tailwind/RUNBOOK.md +++ b/migration/griffel-to-tailwind/RUNBOOK.md @@ -45,18 +45,17 @@ validated → done`, with `blocked` as an escape hatch (always fill `notes`). ### Phase 0 — Infrastructure (current) - [x] Branch + scaffolding + ledger seeded (87 packages, pending-triage) -- [ ] Research reports saved to `reports/` (7 areas: nyt-games conventions, Griffel +- [x] Research reports saved to `reports/` (7 areas: nyt-games conventions, Griffel inventory, theming, storybook/VR, build/metrics, headless precedent, risks) -- [ ] `reports/DECISIONS.md` written: CSS shipping mechanism, layer scheme, variant - catalog location, className-override compat strategy, RTL strategy (logical - properties), focus-indicator strategy -- [ ] `CONVERSION_GUIDE.md` cookbook completed (with a worked example) +- [x] `reports/DECISIONS.md` written (D1–D12; includes CSS shipping, layers, variants, + className compat, RTL, focus, tests, metrics, out-of-scope) +- [x] `CONVERSION_GUIDE.md` cookbook completed (worked example lands with the pilot) - [ ] Shared theme layer created (Fluent tokens bridge + `--base-scale` + custom variants) - [ ] Tailwind v4 + CSS Modules build wiring for one package + its storybook proven - [ ] Validation harness working (`validation/` — see its README once written) - [ ] Baseline metrics captured (`metrics/baseline/` — build time, monosize bundle sizes, docsite bundle) **before any component code changes** -- [ ] Ledger triage: every package classified via Griffel inventory report +- [x] Ledger triage: 49 needs-conversion / 14 special / 24 no-styles (247 styles files) ### Phase 1 — Pilot (user validates the process here) diff --git a/migration/griffel-to-tailwind/ledger.json b/migration/griffel-to-tailwind/ledger.json index d73cc4323f876c..868390feb9020e 100644 --- a/migration/griffel-to-tailwind/ledger.json +++ b/migration/griffel-to-tailwind/ledger.json @@ -16,524 +16,524 @@ ], "packages": { "babel-preset-global-context": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "babel-preset-storybook-full-source": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "component-selector-preview": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "deprecated": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "eslint-plugin-react-components": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "global-context": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "keyboard-keys": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "priority-overflow": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-accordion": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 4, "storiesCovered": null, "notes": "" }, "react-aria": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-avatar": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 4, "storiesCovered": null, "notes": "" }, "react-badge": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 3, "storiesCovered": null, - "notes": "" + "notes": "usePresenceBadgeStyles uses !important x7 - semantics invert under @layer; pilot #2" }, "react-breadcrumb": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 4, "storiesCovered": null, "notes": "" }, "react-button": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 5, "storiesCovered": null, "notes": "" }, "react-calendar-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 7, "storiesCovered": null, "notes": "" }, "react-card": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 4, "storiesCovered": null, "notes": "" }, "react-carousel": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 10, "storiesCovered": null, "notes": "" }, "react-checkbox": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-color-picker": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 4, "storiesCovered": null, - "notes": "" + "notes": "Runtime drag-position CSS vars port unchanged; static parts convert" }, "react-colorpicker-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-combobox": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 5, "storiesCovered": null, "notes": "" }, "react-components": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "Suite package: 12 Griffel re-exports, 180 hooks re-exported; converts in Phase 3" }, "react-conformance-griffel": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "Test-infra package: mergeClasses conformance matchers; replacement test needed (D9)" }, "react-context-selector": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-datepicker-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-dialog": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 6, "storiesCovered": null, "notes": "" }, "react-divider": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, - "notes": "" + "notes": "PILOT #1 (user sign-off gate)" }, "react-drawer": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 10, "storiesCovered": null, "notes": "" }, "react-field": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-headless-components-preview": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-icons-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-image": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-infolabel": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 2, "storiesCovered": null, "notes": "" }, "react-input": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-jsx-runtime": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-label": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-link": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-list": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 2, "storiesCovered": null, "notes": "" }, "react-menu": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 12, "storiesCovered": null, "notes": "" }, "react-menu-grid-preview": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 6, "storiesCovered": null, "notes": "" }, "react-message-bar": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 5, "storiesCovered": null, "notes": "" }, "react-migration-v0-v9": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 14, "storiesCovered": null, - "notes": "" + "notes": "14 styles files + v0 compat; Attachment runtime width" }, "react-migration-v8-v9": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 3, "storiesCovered": null, - "notes": "" + "notes": "Mixes v8 IStyle + Griffel; v8 merge-styles layering seam (D11)" }, "react-motion": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "Web Animations API, zero Griffel - no conversion needed" }, "react-motion-components-preview": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-nav": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 16, "storiesCovered": null, "notes": "" }, "react-overflow": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-persona": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-popover": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-portal": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-portal-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "v8 interop; regex-couples to provider className" }, "react-portal-compat-context": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-positioning": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 1, "storiesCovered": null, - "notes": "" + "notes": "Style factories (createArrowStyles/createSlideStyles, :global+@noflip) + runtime middlewares (port unchanged)" }, "react-progress": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-provider": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 1, "storiesCovered": null, - "notes": "" + "notes": "FluentProvider: theme style tag, renderer context, CSP nonce, portal theme class (D11)" }, "react-radio": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 2, "storiesCovered": null, "notes": "" }, "react-rating": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 3, "storiesCovered": null, "notes": "" }, "react-search": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-select": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-shared-contexts": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-skeleton": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 2, "storiesCovered": null, - "notes": "" + "notes": "Wave keyframes RTL-flipped by Griffel; needs @variant rtl keyframe twin" }, "react-slider": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 1, "storiesCovered": null, - "notes": "" + "notes": "Runtime CSS vars (--fui-Slider--progress/direction) port unchanged; static parts convert" }, "react-spinbutton": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-spinner": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-storybook-addon": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-storybook-addon-export-to-sandbox": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-swatch-picker": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 5, "storiesCovered": null, "notes": "" }, "react-switch": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-table": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 17, "storiesCovered": null, "notes": "" }, "react-tabs": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 3, "storiesCovered": null, - "notes": "" + "notes": "Animated indicator uses measured rects (rAF) - runtime part ports unchanged" }, "react-tabster": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "Defines Griffel focus-ring factories (createFocusOutlineStyle/createCustomFocusIndicatorStyle) used by 46 styles files; convert to shared CSS utilities FIRST (D6)" }, "react-tag-picker": { - "status": "pending-triage", - "stylesFiles": null, + "status": "special", + "stylesFiles": 7, "storiesCovered": null, - "notes": "" + "notes": "ResizeObserver-driven widths port unchanged" }, "react-tags": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 5, "storiesCovered": null, "notes": "" }, "react-teaching-popover": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 12, "storiesCovered": null, "notes": "" }, "react-text": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 18, "storiesCovered": null, "notes": "" }, "react-textarea": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-theme": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-theme-sass": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-timepicker-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-toast": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 8, "storiesCovered": null, "notes": "" }, "react-toolbar": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 6, "storiesCovered": null, "notes": "" }, "react-tooltip": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 1, "storiesCovered": null, "notes": "" }, "react-tree": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 5, "storiesCovered": null, "notes": "" }, "react-utilities": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "react-utilities-compat": { - "status": "pending-triage", - "stylesFiles": null, + "status": "no-styles", + "stylesFiles": 0, "storiesCovered": null, - "notes": "" + "notes": "No *.styles.ts files; verify no stray @griffel imports during Phase 3 sweep" }, "recipes": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 2, "storiesCovered": null, "notes": "" }, "theme-designer": { - "status": "pending-triage", - "stylesFiles": null, + "status": "needs-conversion", + "stylesFiles": 2, "storiesCovered": null, "notes": "" } diff --git a/migration/griffel-to-tailwind/reports/DECISIONS.md b/migration/griffel-to-tailwind/reports/DECISIONS.md new file mode 100644 index 00000000000000..3d011e56afcd94 --- /dev/null +++ b/migration/griffel-to-tailwind/reports/DECISIONS.md @@ -0,0 +1,209 @@ +# Architecture Decisions + +Settled 2026-07-26 from the seven research reports in this directory. **Do not re-litigate +without new evidence.** Every decision cites its evidence report. + +## D1 — CSS is compiled at package build time; consumers receive plain CSS + +Source of truth is Tailwind-flavored CSS Modules (`*.module.css` with `@reference`, +`@apply`, `@variant`) living next to each component. The **package build** compiles them +(PostCSS: `@tailwindcss/postcss` → CSS Modules hashing) into: + +- a per-package aggregated stylesheet shipped at `dist/styles.css` (layered, plain CSS, + no Tailwind syntax), and +- generated class-map JS (what `import styles from './X.module.css'` resolves to in + `lib/`/`lib-commonjs`). + +Consumers never run Tailwind. Precedent: `@fluentui/react-storybook-addon` already ships +`dist/styles.css` with a `sideEffects` allowlist + `exports` map (build-metrics report). +The accepted in-repo RFC `stop-styles-transforms.md` rejects dual-output shipping — we do +not ship raw `.module.css` sources for consumers to compile (build-metrics). + +Component JS keeps auto-loading semantics via a side-effect CSS import, which **requires** +flipping `"sideEffects": false` → `"sideEffects": ["**/*.css"]` in every converted package +first (risk-analysis BLOCKER: 83/85 packages would silently tree-shake the import today). + +## D2 — Cascade determinism via `@layer fui.*` sublayers, `:where()` everywhere + +Griffel's ordering (bucket order + mergeClasses last-wins property deletion) is replaced by +explicit cascade layers, declared once in the shared theme layer: + +```css +@layer fui.reset, fui.base, fui.variant, fui.state, fui.override; +``` + +- `fui.reset` — `makeResetStyles` output (126 call sites rely on reset-loses-to-variant; + bucket `r` → lowest layer). +- `fui.base` — the base makeStyles slice of each slot. +- `fui.variant` — enum/appearance/size/shape slices. +- `fui.state` — disabled/selected/checked and interaction states. +- `fui.override` — the rare later-argument overrides that contradict source order + (23 confirmed inversions in 12 files, e.g. Button `size`-then-`shape` borderRadius — + risk-analysis). Conversion must replicate **mergeClasses argument order**, not source + declaration order. + +All selectors inside layers wrap conditions in `:where()` so specificity stays flat +(nyt-games convention). Consumer CSS (unlayered — including consumer Griffel atomics, +which Griffel injects unlayered) beats layered Fluent CSS for normal declarations, +preserving the "consumer overrides win" contract that `mergeClasses` provided +(risk-analysis §2 verified). + +**Accepted new failure modes** (documented for the PR): unlayered third-party resets now +beat Fluent styles; `!important` inside layers inverts strength (only 1 file uses it: +`usePresenceBadgeStyles`); v8 `merge-styles` (unlayered) wins ties in mixed v8/v9 apps. +Layer names become public API; the theme layer emits the `@layer` statement first. + +## D3 — Enum "look" props → module classes; states → data-attributes + custom variants + +Following nyt-games conventions and the in-repo headless preview's established data-attribute +vocabulary (25 names, headless-precedent report — reuse its names: `data-orientation`, +`data-disabled`, `data-checked`, `data-icon-position`, …): + +- Look props (`appearance`, `shape`, `color`): `styles[appearance]` class lookups. +- State/scale props (`size`, `disabled`, `vertical`, `checked`…): `data-*` attributes + rendered by the component's `useX` hook, targeted by `@custom-variant` selectors + defined once in the shared theme layer (all `:where()`-wrapped). +- Composition: `clsx(staticSlotClass, styles.slot, styles[enumProp]…, className)` — + static `fui-*` class first (a conformance-tested contract, 839 call sites), consumer + `className` last. +- Selectors referencing other components' static classes (191 sites across 22 files) use + `:global(.fui-…)`. + +## D4 — Theming: raw `var(--token)`; Tailwind theme gets ONLY `--base-scale` + +Fluent tokens are already plain inherited CSS custom properties written by FluentProvider +(`.fui-FluentProviderN { --colorNeutralForeground1: … }`, 459 per theme) — theming is +100% Griffel-independent and keeps working unchanged, including nested provider scoping, +portals (`applyStylesToPortals` threads the theme class), and all 7 themes +(theming-system report). + +Therefore: component CSS consumes tokens as literal `var(--colorNeutralForeground1)` +(plain declarations or Tailwind arbitrary values). Tokens are **never** registered in +Tailwind `@theme` — `@theme` writes to `:root` and cannot express nested-provider scoping +(risk-analysis). The only Tailwind theme values: + +```css +@theme static { + --base-scale: calc(1rem / 16px); /* the ONE carry-over from nyt-games */ + --spacing: calc(1px * var(--base-scale)); /* numeric utilities read px, compute rem */ +} +``` + +Intentional, user-approved deviation: px→rem via `--base-scale` means values scale with +root font-size (an accessibility goal). At default 16px root, computed pixels are +identical; VR validation runs at default. + +zIndex tokens are theme-absent with hardcoded fallbacks (`var(--zIndexPopup, 2000)`) — +carry the fallback forms verbatim (theming-system). + +## D5 — RTL: logical properties + `:dir(rtl)` variant for value-level flips + +Griffel auto-flips ~500 physical declarations at compile time (theming/risk reports). +Replacement: + +- Property-level flips → CSS logical properties (`padding-inline-start`, + `margin-inline-end`, `inset-inline`, `border-start-start-radius`, `text-align: start`…). + Precedent: `packages/web-components` already does exactly this. +- Value-level flips (gradients, `translateX`, box-shadow x-offset, 4-value shorthands, + `cursor: *-resize`, `transform-origin`, keyframe bodies — logical properties cannot + express these) → explicit `@custom-variant rtl (&:where(:dir(rtl)));` rules. + `:dir()` resolves **computed** direction (correct with nesting, specificity-flat under + `:where()`; supported by all 2026 baseline browsers). +- Semantics change (documented): direction now follows the DOM (`dir` attributes, which + FluentProvider always writes) instead of React context. A raw `
` inside a + provider now flips styles — arguably more correct; flagged for the PR description. + +## D6 — Focus indicators: keep keyborg attributes, share one focus-ring CSS utility + +No behavior change: keyborg/tabster continues to set `data-fui-focus-visible`/ +`data-fui-focus-within`. The shared theme layer defines +`@custom-variant focus-visible-fui` / `focus-within-fui` plus focus-ring utilities that +reproduce `createFocusOutlineStyle`'s **compiled** output byte-for-byte: +`border: 2px solid var(--colorStrokeFocus2)` on `::after`, offsets `calc(2px * -1)`, +`@media (forced-colors: active) { … Highlight }` — including the hardcoded `2px` +(do NOT "fix" it to `strokeWidthThick`; known FIXME, changing it changes rendering — +theming-system). react-tabster's Griffel helpers (used in 46 styles files) are replaced by +these utilities during each package's conversion; the JS helpers remain exported until +Phase 3 cleanup. + +## D7 — Public API: hooks stay, Griffel exports stay (for now) + +`useXStyles_unstable` hooks (180) keep existing and now apply module classes; +`xClassNames` (193) unchanged; `customStyleHooks_unstable` (194 keys) keeps working — +it is className-string based, and consumer `mergeClasses` passes non-atomic strings +through. Griffel symbol re-exports from the suite package remain (consumers may use them +standalone); marked deprecated in the PR, removed in a later major. `GriffelStyle`-typed +option APIs (`createArrowStyles`, `createSlideStyles`, focus helpers) are converted +per-package as `special` items. + +## D8 — Validation: VR storybook + StoryWright (local) + in-repo pixelmatch CLI + +- Harness: `apps/vr-tests-react-components` — 1578 stories × themes/RTL/HC, StoryWright + writes PNGs locally (no cloud), and it is the **only** storybook that builds on this + Windows machine (storybook-vr-infra; the docsite storybooks fail on a POSIX-path regex + in `react-storybook-addon-export-to-sandbox/src/webpack.ts:19` — fix separately). +- Diff: `tools/visual-regression-assert` (in-repo pixelmatch CLI, currently unwired) with + tolerance aligned to the cloud pipeline (`--threshold 0.04 --cumThreshold 1` semantics), + not its default zero-pixel strictness. +- The harness must **assert expected screenshot counts** (StoryWright exits 0 on browser + launch failure) and treat renamed stories as failures, not add/remove noise. +- Same-machine before/after only; never compare local vs CI captures (font/GPU + differences). +- VR storybook webpack gains a `.module.css` rule (Tailwind PostCSS + css-loader modules) + since storybooks build from TS source; keep `griffelRule` alongside until Phase 3 + (unconverted packages still need it). + +## D9 — Tests: deterministic class names + serializer swap + conformance replacement + +- CSS Modules compile with deterministic `localIdentName` (readable pattern, stable + prefix, e.g. `fuicm-__`), so a small jest snapshot serializer strips + them exactly like `@griffel/jest-serializer` strips atomics today → the 126 `class=` + snapshots stay byte-identical. +- `jest.preset.js` gains a repo-wide `moduleNameMapper` for `\.module\.css$` (maps to the + generated class map / deterministic proxy) **before** the first conversion + (build-metrics BLOCKER: zero jest configs handle CSS today). +- `make-styles-overrides-win` conformance (57 wrappers / 243 call sites, mocks + `mergeClasses`) — converted packages disable it via existing `disabledTests` and enable + a new `classname-overrides-win` conformance test asserting consumer `className` is last + in the rendered class list (clsx-equivalent). + +## D10 — Metrics methodology (report backbone) + +Baseline captured on this machine before any component change; identical commands after. + +- **Build time**: `nx run-many -t build --projects=tag:vNext --skip-nx-cache` (baseline + measured 3m04.9s / 91 projects); per-package via `NX_VERBOSE_LOGGING` Execution Timings. +- **Bundle size**: monosize with `assetTypes: ['js','css']` + webpack + `experiments.css` + `output.cssFilename` (proven zero-dep fix — build-metrics). Local + A/B via snapshotting `packages/**/dist/bundle-size/monosize.json` (compare-reports + requires GITHUB_TOKEN; not used). **Primary metric: combined JS+CSS min+gzip** — gzip + is not additive; never derive savings by subtraction. +- **Install size**: `npm pack --dry-run --json` per package (react-button baseline: + 124,354 B packed). `*.styles.raw.js` (719,570 B repo-wide, 15.2% of shipped lib JS, + imported by nothing) is deleted by conversion — counted as its own line item. +- **Storybook client bundle**: `vr-tests-react-components` static build size (35 MB + baseline; docsite unbuildable on Windows). +- Griffel-AOT elimination tracked via `grep 'Processing griffel AOT' build.log` + (62 packages / 277 files at baseline → 0). + +## D11 — Out-of-scope / accepted losses (state in PR) + +- **Iframe & shadow-DOM style injection** (`createDOMRenderer(contentDocument)`, + `@griffel/shadow-dom`): static stylesheets don't cross document boundaries. Affected: + 1 iframe story, ShadowDOM VR stories. Replacement (stylesheet cloning / + `adoptedStyleSheets`) is deliberately deferred; stories marked known-changed. +- **CSP nonce for component styles**: static CSS needs no nonce (improvement); the + theme ` - - - - -``` - -For mobile-first methodology, consider using [`sort-css-media-queries`](https://github.com/dutchenkoOleg/sort-css-media-queries): - -```js -import { createDOMRenderer } from '@fluentui/react-components'; -import sortCSSmq from 'sort-css-media-queries'; - -const renderer = createDOMRenderer(document, { - compareMediaQueries: sortCSSmq, -}); -``` - -```html - - - - - - - -``` - ### Content Security Policies (CSP) -To add `nonce` attribute need for [Content Security Policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), please use `styleElementAttributes` to specify it: +`FluentProvider` renders the theme's custom properties through a `
-
+
Option 1
-
+
Option 2
-
+
Option 3
-
+
Option 4
diff --git a/packages/react-components/react-menu/library/package.json b/packages/react-components/react-menu/library/package.json index 3c20b243c230e7..6436ef562cdfaf 100644 --- a/packages/react-components/react-menu/library/package.json +++ b/packages/react-components/react-menu/library/package.json @@ -30,7 +30,6 @@ "@fluentui/react-tabster": "^9.26.16", "@fluentui/react-theme": "^9.2.1", "@fluentui/react-utilities": "^9.26.5", - "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1", "clsx": "^2.1.1" }, diff --git a/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx index 7af7f8dce53dee..7f9fa478f66638 100644 --- a/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx +++ b/packages/react-components/react-menu/library/src/components/Menu/Menu.cy.tsx @@ -1,5 +1,4 @@ import { mount as mountBase } from '@fluentui/scripts-cypress'; -import { makeStyles } from '@griffel/react'; import type { JSXElement } from '@fluentui/react-utilities'; import { Menu, @@ -28,12 +27,10 @@ import { menuTriggerId, } from '../../testing/selectors'; -// eslint-disable-next-line @griffel/styles-file -const useStyles = makeStyles({ - pointerPortal: { - zIndex: 10000000, - }, -}); +// Griffel → Tailwind + CSS Modules migration (S-H): was a Griffel `makeStyles` hook. A plain +// class + a `
{ // has nothing to stamp it on (Griffel → Tailwind migration). COMPONENT_HAS_GROUP_MARKER_TEST_NAME, // Menu does not have own styles - 'make-styles-overrides-win', // TODO: // onOpenChange: A second (data) argument cannot be a union 'consistent-callback-args', diff --git a/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.test.tsx b/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.test.tsx index 6a20029e5722c4..e9a120504e1f93 100644 --- a/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.test.tsx @@ -21,7 +21,7 @@ describe('MenuDivider', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu/library/src/components/MenuGroup/MenuGroup.test.tsx b/packages/react-components/react-menu/library/src/components/MenuGroup/MenuGroup.test.tsx index 90d3e0a8b699e2..c954f22791dc1e 100644 --- a/packages/react-components/react-menu/library/src/components/MenuGroup/MenuGroup.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuGroup/MenuGroup.test.tsx @@ -18,7 +18,7 @@ describe('MenuGroup', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed; `component-has-group-marker` (a default test since // D16.6) replaces it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx index 30ababb9c61034..92df652e03cd36 100644 --- a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.test.tsx @@ -22,7 +22,7 @@ describe('MenuGroupHeader', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx index f531bd64f0999a..16ac270c71bb27 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.test.tsx @@ -30,7 +30,7 @@ describe('MenuItem', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx index 27ae39786e2c30..2f0738fa7d1615 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx @@ -32,7 +32,7 @@ describe('MenuItemCheckbox conformance', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // This root IS a MenuItem root — `useMenuItemStyles_unstable` stamps its marker on the // same element — so it legitimately carries both markers below (DECISIONS.md D16.3). diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.test.tsx index 35b466cb8651cf..f9d0dec73420f6 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItemLink/MenuItemLink.test.tsx @@ -26,7 +26,7 @@ describe('MenuItemLink', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // This root IS a MenuItem root — `useMenuItemStyles_unstable` stamps its marker on the // same element — so it legitimately carries both markers below (DECISIONS.md D16.3). diff --git a/packages/react-components/react-menu/library/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemRadio/MenuItemRadio.test.tsx index c96451f02addad..6444549a9670e5 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItemRadio/MenuItemRadio.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItemRadio/MenuItemRadio.test.tsx @@ -29,7 +29,7 @@ describe('MenuItemRadio', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // This root IS a MenuItem root — `useMenuItemStyles_unstable` stamps its marker on the // same element — so it legitimately carries both markers below (DECISIONS.md D16.3). diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx index 926b28f5c43185..59f3d4fbb22440 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.test.tsx @@ -32,7 +32,7 @@ describe('MenuItemSwitch', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // This root IS a MenuItem root — `useMenuItemStyles_unstable` stamps its marker on the // same element — so it legitimately carries both markers below (DECISIONS.md D16.3). diff --git a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.test.tsx b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.test.tsx index c4c968ae96341a..02bfd0b6312872 100644 --- a/packages/react-components/react-menu/library/src/components/MenuList/MenuList.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuList/MenuList.test.tsx @@ -19,7 +19,7 @@ describe('MenuList', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed; `component-has-group-marker` (a default test since // D16.6) replaces it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { 'consistent-callback-args': { legacyCallbacks: ['onCheckedValueChange'], diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx index e0f3d71ba973a5..64bb75b0d328a5 100644 --- a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.test.tsx @@ -24,7 +24,7 @@ describe('MenuPopover', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, requiredProps: { 'data-testid': testid } as MenuPopoverProps, getTargetElement: result => result.getByTestId(testid), diff --git a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx index 27662a3e4141c8..c6a2f882367428 100644 --- a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.test.tsx @@ -21,7 +21,7 @@ describe('MenuSplitGroup', () => { // D16.6) replaces it: it asserts the group marker IS stamped and is never // `classList[0]` (D16.2). The `has-static-classnames` testOptions that fed the deleted // test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.test.tsx b/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.test.tsx index 64a606cb71bdf3..46a720bfcc101c 100644 --- a/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.test.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuTrigger/MenuTrigger.test.tsx @@ -24,7 +24,6 @@ describe('MenuTrigger', () => { // has nothing to stamp it on (Griffel → Tailwind migration). COMPONENT_HAS_GROUP_MARKER_TEST_NAME, // MenuTrigger does not have own styles - 'make-styles-overrides-win', ], Component: MenuTrigger, displayName: 'MenuTrigger', diff --git a/packages/react-components/react-menu/library/src/testing/isConformant.ts b/packages/react-components/react-menu/library/src/testing/isConformant.ts index de9011aa6da371..37a87d1bf19797 100644 --- a/packages/react-components/react-menu/library/src/testing/isConformant.ts +++ b/packages/react-components/react-menu/library/src/testing/isConformant.ts @@ -1,6 +1,5 @@ import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; -import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance'; -import griffelTests from '@fluentui/react-conformance-griffel'; +import type { IsConformantOptions } from '@fluentui/react-conformance'; export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, @@ -14,7 +13,6 @@ export function isConformant( // DECISIONS.md D16.6) instead of opting out, and drops the `hasStaticClassNames` opt-in // that stood in for it. `make-styles-overrides-win` is disabled per component, alongside // the `classname-overrides-win` replacement that supersedes it (D9). - extraTests: griffelTests as TestObject, }; baseIsConformant(defaultOptions, testInfo); From d1389ddbb7d4b756606b4b50735c334e255677ae Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:41:01 -0700 Subject: [PATCH 508/640] feat(react-conformance-griffel)!: retire the package (S-H, D23) BREAKING CHANGE: @fluentui/react-conformance-griffel is retired in the same major as the Griffel removal and receives no further releases. - griffelTests unwired from all 55 non-deprecated package isConformant wrappers; classname-overrides-win (D9) remains the cascade-native replacement and its docs no longer reference the retired test. - Package moved to packages/react-components/deprecated/ (react-alert precedent): eol nx tag, beachball freeze (major/minor/patch), DEPRECATED README note. The deprecated Griffel packages (react-alert, react-infobutton) keep consuming it - published history is untouched. - scripts/generators create-package now uses @fluentui/react-conformance as the node reference package. - react-button useButton.test.tsx / react-dialog Dialog.test.tsx: last test-side @griffel/react imports converted to clsx / + + + ); }); const result = render( diff --git a/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx index dabaf310e0661f..f68ffbf0f2720b 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx +++ b/packages/react-components/react-dialog/library/src/components/DialogActions/DialogActions.test.tsx @@ -24,7 +24,7 @@ describe('DialogActions', () => { // construction. `component-has-group-marker` (now a default test) is its replacement — // it asserts the marker IS stamped and, critically, that it is never `classList[0]` // (D15.1 / D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-dialog/library/src/components/DialogBody/DialogBody.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogBody/DialogBody.test.tsx index 0664d415dc1ef1..45a61db6d31ac8 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogBody/DialogBody.test.tsx +++ b/packages/react-components/react-dialog/library/src/components/DialogBody/DialogBody.test.tsx @@ -19,7 +19,7 @@ describe('DialogBody', () => { // asserts are no longer rendered, and `dialogBodyClassNames` is now the retained, // marker-valued `{ root: string }` of D16.5. `component-has-group-marker` replaces it — // the marker is stamped, and never at `classList[0]` (D15.1 / D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.test.tsx index 94dbb7ecc11dae..bcbbda1851fde6 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.test.tsx +++ b/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.test.tsx @@ -18,7 +18,7 @@ describe('DialogContent', () => { // asserts are no longer rendered, and `dialogContentClassNames` is now the retained, // marker-valued `{ root: string }` of D16.5. `component-has-group-marker` replaces it — // the marker is stamped, and never at `classList[0]` (D15.1 / D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.test.tsx index 805d242531189c..a72168bfa115da 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.test.tsx +++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/DialogSurface.test.tsx @@ -30,7 +30,7 @@ describe('DialogSurface', () => { // compile error. `component-has-group-marker` replaces it, and reaches the portalled // root through the `getTargetElement` below — asserting the marker is stamped and that // it is never `classList[0]` (D15.1 / D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-dialog/library/src/components/DialogTitle/DialogTitle.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogTitle/DialogTitle.test.tsx index 206c253cba964b..072effc7e94585 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogTitle/DialogTitle.test.tsx +++ b/packages/react-components/react-dialog/library/src/components/DialogTitle/DialogTitle.test.tsx @@ -25,7 +25,6 @@ describe('DialogTitle', () => { // Fragment — it reads the classList of the container's first child, which is the //

root — asserting the marker is stamped and never `classList[0]` // (D15.1 / D16.2). - 'make-styles-overrides-win', ], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, diff --git a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx index c3b0554fd5fa6d..11dba5321a2087 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx +++ b/packages/react-components/react-dialog/library/src/components/DialogTrigger/DialogTrigger.test.tsx @@ -24,7 +24,6 @@ describe('DialogTrigger', () => { // `component-has-group-marker` (a default test since DECISIONS.md D16.6) to target. 'component-has-group-marker', // DialogTrigger does not have own styles - 'make-styles-overrides-win', ], Component: DialogTrigger, displayName: 'DialogTrigger', diff --git a/packages/react-components/react-divider/library/src/components/Divider/Divider.test.tsx b/packages/react-components/react-divider/library/src/components/Divider/Divider.test.tsx index 1daf9aa8ae107d..9efd118d3a9e15 100644 --- a/packages/react-components/react-divider/library/src/components/Divider/Divider.test.tsx +++ b/packages/react-components/react-divider/library/src/components/Divider/Divider.test.tsx @@ -27,7 +27,7 @@ describe('Divider', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (now a default test) replaces it — it asserts the group marker IS stamped and, per D16.2, is never // `classList[0]`. The `has-static-classnames` testOptions entry goes with it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-drawer/library/src/components/Drawer/Drawer.test.tsx b/packages/react-components/react-drawer/library/src/components/Drawer/Drawer.test.tsx index f5031413484f02..e44bfc263b1fe0 100644 --- a/packages/react-components/react-drawer/library/src/components/Drawer/Drawer.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/Drawer/Drawer.test.tsx @@ -40,7 +40,6 @@ describe('Drawer', () => { 'component-handles-classname', 'component-has-static-classnames-object', 'consistent-callback-args', - 'make-styles-overrides-win', ], testOptions: { // A Drawer IS an InlineDrawer or an OverlayDrawer: `useDrawer_unstable` picks one as diff --git a/packages/react-components/react-drawer/library/src/components/DrawerBody/DrawerBody.test.tsx b/packages/react-components/react-drawer/library/src/components/DrawerBody/DrawerBody.test.tsx index 783ceb56e06daa..c4ac60b3cdcdd3 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerBody/DrawerBody.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/DrawerBody/DrawerBody.test.tsx @@ -21,7 +21,7 @@ describe('DrawerBody', () => { // D16.1 removed the BEM statics, D16.5 narrowed the export to `{ root }` and re-pointed // it at the group marker. It is replaced by `component-has-group-marker`, now a default // test. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.test.tsx b/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.test.tsx index 2079b038e1c56e..22dc55a0ad877f 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.test.tsx @@ -21,7 +21,7 @@ describe('DrawerFooter', () => { // D16.1 removed the BEM statics, D16.5 narrowed the export to `{ root }` and re-pointed // it at the group marker. It is replaced by `component-has-group-marker`, now a default // test. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.test.tsx b/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.test.tsx index 8a6eb6ffb1c77d..994fdd88d62d43 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.test.tsx @@ -21,7 +21,7 @@ describe('DrawerHeader', () => { // D16.1 removed the BEM statics, D16.5 narrowed the export to `{ root }` and re-pointed // it at the group marker. It is replaced by `component-has-group-marker`, now a default // test. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.test.tsx b/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.test.tsx index 482ba7213c9a50..6edc058576db3b 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/DrawerHeaderNavigation/DrawerHeaderNavigation.test.tsx @@ -21,7 +21,7 @@ describe('DrawerHeaderNavigation', () => { // design: DECISIONS.md D16.1 removed the BEM statics, D16.5 narrowed the export to // `{ root }` and re-pointed it at the group marker. It is replaced by // `component-has-group-marker`, now a default test. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx index 21a54c69b39323..275cdefd34f91b 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/DrawerHeaderTitle.test.tsx @@ -23,7 +23,7 @@ describe('DrawerHeaderTitle', () => { // with it now, because there are no sub-slot statics left to find (DECISIONS.md D16.1) // and `drawerHeaderTitleClassNames` is `{ root: }` (D16.5). The replacement is // `component-has-group-marker`, now a default test. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx index 8c6b81c6073fe1..04bcce9caaddc0 100644 --- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.test.tsx @@ -27,7 +27,7 @@ describe('InlineDrawer', () => { // D16.1 removed the BEM statics, D16.5 narrowed the export to `{ root }` and re-pointed // it at the group marker. It is replaced by `component-has-group-marker`, now a default // test. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx index 3423f99c3773cc..3d22638c27756c 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx @@ -45,7 +45,6 @@ describe('OverlayDrawer', () => { 'component-handles-classname', 'component-has-static-classnames-object', 'consistent-callback-args', - 'make-styles-overrides-win', ], requiredProps: props, getTargetElement: result => result.getByTestId(testid), diff --git a/packages/react-components/react-field/library/src/components/Field/Field.test.tsx b/packages/react-components/react-field/library/src/components/Field/Field.test.tsx index fdd046a6491074..549beb8efae7cd 100644 --- a/packages/react-components/react-field/library/src/components/Field/Field.test.tsx +++ b/packages/react-components/react-field/library/src/components/Field/Field.test.tsx @@ -29,7 +29,6 @@ describe('Field', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1 / D16.6). Field no longer renders `fui-Field*` BEM // statics, and `fieldClassNames` is now `{ root: }`, so all three sub-tests of // this rule — the export shape, the hard-coded `fui-__` format, and the diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Dialog/Dialog.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Dialog/Dialog.test.tsx index bd0fcf8fe3c251..e51cd0aa41cf76 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/Dialog/Dialog.test.tsx +++ b/packages/react-components/react-headless-components-preview/library/src/components/Dialog/Dialog.test.tsx @@ -20,7 +20,6 @@ describe('Dialog', () => { 'component-handles-classname', 'component-has-static-classnames-object', 'consistent-callback-args', - 'make-styles-overrides-win', ], requiredProps: { children: Dialog content, diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.test.tsx index 8abad2ea4033be..58e34d61149e1f 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.test.tsx +++ b/packages/react-components/react-headless-components-preview/library/src/components/TeachingPopover/TeachingPopover.test.tsx @@ -24,7 +24,6 @@ describe('TeachingPopover', () => { 'component-has-root-ref', 'component-handles-classname', 'component-has-static-classnames-object', - 'make-styles-overrides-win', 'consistent-callback-args', ], }); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx index 8c7b3e36b594f3..dc663097d6e88b 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx +++ b/packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastContainer/ToastContainer.test.tsx @@ -43,7 +43,6 @@ describe('ToastContainer', () => { 'consistent-callback-args', // Headless ToastContainer has no static classnames object. 'component-has-static-classnames-object', - 'make-styles-overrides-win', // ToastContainer is exported from `toast.ts` rather than top-level `toast-container.ts`. 'has-top-level-file-extra', 'export-map-entry-exists', diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/Toaster.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/Toaster.test.tsx index 998489831689d0..fcbfdb51551d40 100644 --- a/packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/Toaster.test.tsx +++ b/packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/Toaster.test.tsx @@ -13,7 +13,6 @@ describe('Toaster', () => { 'component-handles-ref', 'component-handles-classname', 'component-has-static-classnames-object', - 'make-styles-overrides-win', // Toaster is exported from `toast.ts` rather than top-level `toaster.ts`. 'has-top-level-file-extra', 'export-map-entry-exists', diff --git a/packages/react-components/react-image/library/src/components/Image/Image.test.tsx b/packages/react-components/react-image/library/src/components/Image/Image.test.tsx index 8a285d8110f7fa..022d2f1206b30e 100644 --- a/packages/react-components/react-image/library/src/components/Image/Image.test.tsx +++ b/packages/react-components/react-image/library/src/components/Image/Image.test.tsx @@ -22,7 +22,7 @@ describe('Image', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (now a default test) replaces it — it asserts the group marker IS stamped and, per D16.2, is never // `classList[0]`. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.test.tsx b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.test.tsx index 5ca7f1f9fa35d3..bf80cdd5c5b982 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.test.tsx +++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.test.tsx @@ -49,7 +49,7 @@ describe('InfoButton', () => { // `state.root.className` last and the `@layer fui.*` sublayers keep unlayered consumer // CSS winning (DECISIONS.md D2/D9). `classname-overrides-win` below is its // cascade-native replacement (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'exported-top-level', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object', 'exported-top-level'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.test.tsx b/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.test.tsx index 9f625a82a43b1c..781264c409116e 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.test.tsx +++ b/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.test.tsx @@ -22,7 +22,7 @@ describe('InfoLabel', () => { // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). The // `has-static-classnames` testOptions that fed the deleted test went with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-input/library/src/components/Input/Input.test.tsx b/packages/react-components/react-input/library/src/components/Input/Input.test.tsx index 61e8dd1d62a7a1..64445c15971810 100644 --- a/packages/react-components/react-input/library/src/components/Input/Input.test.tsx +++ b/packages/react-components/react-input/library/src/components/Input/Input.test.tsx @@ -40,7 +40,7 @@ describe('Input', () => { // package as each one is swept; it leaves `defaultTests` altogether once every converted // package has been (D16.6). `component-has-group-marker` (now a default test) is its replacement — it // asserts the marker is stamped AND that it is never `classList[0]` (D16.2). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-label/library/src/components/Label/Label.test.tsx b/packages/react-components/react-label/library/src/components/Label/Label.test.tsx index 343fc01ab49c20..6771a866d0cf14 100644 --- a/packages/react-components/react-label/library/src/components/Label/Label.test.tsx +++ b/packages/react-components/react-label/library/src/components/Label/Label.test.tsx @@ -23,7 +23,7 @@ describe('Label', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (now a default test) replaces it — it asserts the group marker IS stamped and, per D16.2, is never // `classList[0]`. The `has-static-classnames` testOptions entry goes with it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-link/library/src/components/Link/Link.test.tsx b/packages/react-components/react-link/library/src/components/Link/Link.test.tsx index 9b00e480436821..e69d17f785b137 100644 --- a/packages/react-components/react-link/library/src/components/Link/Link.test.tsx +++ b/packages/react-components/react-link/library/src/components/Link/Link.test.tsx @@ -26,7 +26,7 @@ describe('Link', () => { // `{ root }` and re-pointed it at the group marker. `component-has-group-marker` (now a default test) // is its replacement and asserts the contract that actually holds now — including the // D15.1 `classList[0]` invariant the static used to satisfy incidentally (D16.2/D16.6). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-list/library/src/components/List/List.test.tsx b/packages/react-components/react-list/library/src/components/List/List.test.tsx index 972b5cf2aa9528..9a87148ab6752d 100644 --- a/packages/react-components/react-list/library/src/components/List/List.test.tsx +++ b/packages/react-components/react-list/library/src/components/List/List.test.tsx @@ -68,7 +68,7 @@ describe('List', () => { // deleted from the default set repo-wide when the sweep completes (D16.6); until then // converted packages opt out here. `component-has-group-marker` (now a default test) replaces it — it // asserts the marker IS stamped and, crucially, that it is never `classList[0]` (D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx b/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx index 423f8830c79dbc..8822a9539bb876 100644 --- a/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx +++ b/packages/react-components/react-list/library/src/components/ListItem/ListItem.test.tsx @@ -26,7 +26,7 @@ describe('ListItem', () => { // until then converted packages opt out here. `component-has-group-marker` (now a default test) replaces // it — it asserts the marker IS stamped and, crucially, that it is never `classList[0]` // (D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.test.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.test.tsx index 23fa77d57ea742..8f67d0d2beafa0 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.test.tsx +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGrid/MenuGrid.test.tsx @@ -17,7 +17,7 @@ describe('MenuGrid', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed; `component-has-group-marker` (a default test since // D16.6) replaces it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/MenuGridCell.test.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/MenuGridCell.test.tsx index af6f4e5358124b..bc98e846560a0c 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/MenuGridCell.test.tsx +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridCell/MenuGridCell.test.tsx @@ -10,7 +10,7 @@ describe('MenuGridCell', () => { displayName: 'MenuGridCell', // Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). // See MenuGrid.test.tsx for the rationale behind this pair of adjustments. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/MenuGridGroup.test.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/MenuGridGroup.test.tsx index 4aa3fb65735f3e..d977f8eaafa7ee 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/MenuGridGroup.test.tsx +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroup/MenuGridGroup.test.tsx @@ -11,7 +11,7 @@ describe('MenuGridGroup', () => { displayName: 'MenuGridGroup', // Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). // See MenuGrid.test.tsx for the rationale behind this pair of adjustments. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.test.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.test.tsx index 487cbcfb09934a..0609328b0e4c5b 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.test.tsx +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.test.tsx @@ -11,7 +11,7 @@ describe('MenuGridGroupHeader', () => { displayName: 'MenuGridGroupHeader', // Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). // See MenuGrid.test.tsx for the rationale behind this pair of adjustments. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.test.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.test.tsx index 8b29f7a3667beb..cd09ce17bfab53 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.test.tsx +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridItem/MenuGridItem.test.tsx @@ -12,7 +12,7 @@ describe('MenuGridItem', () => { // See MenuGrid.test.tsx for the rationale behind this pair of adjustments. The // `has-static-classnames` testOptions that fed the deleted BEM test went with it // (DECISIONS.md D16.1). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // This root IS a MenuGridRow root — `useMenuGridItem_unstable` builds the root slot with // `elementType: MenuGridRow`, so `useMenuGridRowStyles_unstable` stamps its marker on diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.test.tsx b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.test.tsx index ae952b7203517c..59cbf3af01952f 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.test.tsx +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.test.tsx @@ -10,7 +10,7 @@ describe('MenuGridRow', () => { displayName: 'MenuGridRow', // Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). // See MenuGrid.test.tsx for the rationale behind this pair of adjustments. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx index 159e5fcebacac7..9741d3b247f395 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.test.tsx @@ -42,7 +42,6 @@ describe('MessageBar', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1 / D16.6). MessageBar no longer renders // `fui-MessageBar*` BEM statics, and `messageBarClassNames` is now `{ root: }`, // so all three sub-tests of this rule — the export shape, the hard-coded From 07c59a3a3dcf8b0197beeae4846ae6a0b3893d5d Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:42:20 -0700 Subject: [PATCH 511/640] test: drop retired make-styles-overrides-win disabledTests entries (3/5) (S-H, D23) With @fluentui/react-conformance-griffel unwired from the isConformant wrappers, the make-styles-overrides-win test no longer exists; its disabledTests entries are dead weight. Explanatory migration comments stay for the S-I provenance-comment sweep. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../src/components/MessageBarActions/MessageBarActions.test.tsx | 1 - .../src/components/MessageBarBody/MessageBarBody.test.tsx | 1 - .../src/components/MessageBarGroup/MessageBarGroup.test.tsx | 1 - .../src/components/MessageBarTitle/MessageBarTitle.test.tsx | 1 - .../react-nav/library/src/components/AppItem/AppItem.test.tsx | 2 +- .../library/src/components/AppItemStatic/AppItemStatic.test.tsx | 2 +- .../library/src/components/Hamburger/Hamburger.test.tsx | 2 +- .../react-nav/library/src/components/Nav/Nav.test.tsx | 2 +- .../library/src/components/NavCategory/NavCategory.test.tsx | 1 - .../library/src/components/NavDivider/NavDivider.test.tsx | 2 +- .../library/src/components/NavDrawer/NavDrawer.test.tsx | 1 - .../library/src/components/NavDrawerBody/NavDrawerBody.test.tsx | 2 +- .../src/components/NavDrawerFooter/NavDrawerFooter.test.tsx | 2 +- .../src/components/NavDrawerHeader/NavDrawerHeader.test.tsx | 2 +- .../react-nav/library/src/components/NavItem/NavItem.test.tsx | 2 +- .../src/components/NavSectionHeader/NavSectionHeader.test.tsx | 2 +- .../library/src/components/NavSubItem/NavSubItem.test.tsx | 2 +- .../src/components/NavSubItemGroup/NavSubItemGroup.test.tsx | 2 +- .../library/src/components/SplitNavItem/SplitNavItem.test.tsx | 2 +- .../library/src/components/Persona/Persona.test.tsx | 1 - .../library/src/components/Popover/Popover.test.tsx | 1 - .../src/components/PopoverSurface/PopoverSurface.test.tsx | 2 +- .../src/components/PopoverTrigger/PopoverTrigger.test.tsx | 1 - .../library/src/components/ProgressBar/ProgressBar.test.tsx | 2 +- .../react-radio/library/src/components/Radio/Radio.test.tsx | 2 +- .../library/src/components/RadioGroup/RadioGroup.test.tsx | 2 +- .../react-rating/library/src/components/Rating/Rating.test.tsx | 1 - .../library/src/components/RatingDisplay/RatingDisplay.test.tsx | 1 - .../library/src/components/RatingItem/RatingItem.test.tsx | 1 - .../library/src/components/SearchBox/SearchBox.test.tsx | 2 +- .../react-select/library/src/components/Select/Select.test.tsx | 2 +- .../library/src/components/Skeleton/Skeleton.test.tsx | 2 +- .../library/src/components/SkeletonItem/SkeletonItem.test.tsx | 2 +- .../react-slider/library/src/components/Slider/Slider.test.tsx | 2 +- .../library/src/components/SpinButton/SpinButton.test.tsx | 1 - .../library/src/components/Spinner/Spinner.test.tsx | 2 +- .../library/src/components/ColorSwatch/ColorSwatch.test.tsx | 2 +- .../library/src/components/EmptySwatch/EmptySwatch.test.tsx | 2 +- .../library/src/components/ImageSwatch/ImageSwatch.test.tsx | 2 +- .../library/src/components/SwatchPicker/SwatchPicker.test.tsx | 2 +- 40 files changed, 27 insertions(+), 40 deletions(-) diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx index f446bdbd23ef41..f6749f8d4178c1 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.test.tsx @@ -22,7 +22,6 @@ describe('MessageBarActions', () => { // The guarantee itself is unchanged — clsx puts `state.root.className` last and the // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - 'make-styles-overrides-win', ], // `component-has-group-marker` asserts the D16 public contract: exactly one // `group/fui-message-bar-actions` marker on the outermost slot, and never at diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.test.tsx index c8fde65496b220..7adb0ebed795b8 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.test.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.test.tsx @@ -16,7 +16,6 @@ describe('MessageBarBody', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1 / D16.6) — see MessageBar.test.tsx for the full // rationale. Replaced by `component-has-group-marker` (now a default test). 'component-has-static-classnames-object', diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.test.tsx index 32757f280863f0..4fa8299c7a8738 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.test.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarGroup/MessageBarGroup.test.tsx @@ -19,7 +19,6 @@ describe('MessageBarGroup', () => { // guarantee is simply that clsx puts `state.root.className` last (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1 / D16.6) — see MessageBar.test.tsx for the full // rationale. Replaced by `component-has-group-marker` (now a default test). 'component-has-static-classnames-object', diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx index ceacda99992874..24d8318920ac4f 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.test.tsx @@ -16,7 +16,6 @@ describe('MessageBarTitle', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1 / D16.6) — see MessageBar.test.tsx for the full // rationale. Replaced by `component-has-group-marker` (now a default test). 'component-has-static-classnames-object', diff --git a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx index ac08ac5ba06c1b..302a28651c13df 100644 --- a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx +++ b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.test.tsx @@ -19,7 +19,7 @@ describe('AppItem', () => { // holding the group marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` // (a default test) replaces it. The `has-static-classnames` testOptions block that // asserted the `icon` static went with it — that key no longer exists. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx index 076da6d4959fdf..152179d56d335b 100644 --- a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx +++ b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.test.tsx @@ -20,7 +20,7 @@ describe('AppItemStatic', () => { // `component-has-group-marker` (a default test) replaces it. The `has-static-classnames` // testOptions block that asserted the `icon` static went with it — that key no longer // exists. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx index 260c18b0e99f3a..64d4613c57f9b7 100644 --- a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx +++ b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.test.tsx @@ -20,7 +20,7 @@ describe('Hamburger', () => { // format the D16 statics-removal sweep retired; `hamburgerClassNames` is now `{ root }` // holding the group marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` // (a default test) replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // Hamburger IS a react-button Button — `useHamburgerStyles_unstable` calls diff --git a/packages/react-components/react-nav/library/src/components/Nav/Nav.test.tsx b/packages/react-components/react-nav/library/src/components/Nav/Nav.test.tsx index 6f12b57d51ec2f..2ae995add48850 100644 --- a/packages/react-components/react-nav/library/src/components/Nav/Nav.test.tsx +++ b/packages/react-components/react-nav/library/src/components/Nav/Nav.test.tsx @@ -18,7 +18,7 @@ describe('Nav', () => { // it. // // todo - # 30012, remove `consistent-callback-args` when conformance is updated - disabledTests: ['consistent-callback-args', 'make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['consistent-callback-args', 'component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.test.tsx b/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.test.tsx index 69b5fe52aff070..eca24ced444667 100644 --- a/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavCategory/NavCategory.test.tsx @@ -19,7 +19,6 @@ describe('NavCategory', () => { 'component-has-root-ref', 'component-handles-classname', 'component-has-static-classnames-object', - 'make-styles-overrides-win', COMPONENT_HAS_GROUP_MARKER_TEST_NAME, ], }); diff --git a/packages/react-components/react-nav/library/src/components/NavDivider/NavDivider.test.tsx b/packages/react-components/react-nav/library/src/components/NavDivider/NavDivider.test.tsx index db32255924c5a8..6b6bd2d2b43c0d 100644 --- a/packages/react-components/react-nav/library/src/components/NavDivider/NavDivider.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavDivider/NavDivider.test.tsx @@ -17,7 +17,7 @@ describe('NavDivider', () => { // holding the group marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` // (a default test) replaces it. The `has-static-classnames` testOptions block went with // it, along with the `wrapper` key. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // NavDivider IS a react-divider Divider — `useNavDividerStyles_unstable` calls diff --git a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.test.tsx b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.test.tsx index 6a7b669f2fb0c5..fae51c0b0c595c 100644 --- a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.test.tsx @@ -43,7 +43,6 @@ describe('NavDrawer', () => { 'component-handles-classname', 'component-has-static-classnames-object', 'consistent-callback-args', - 'make-styles-overrides-win', ], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerBody/NavDrawerBody.test.tsx b/packages/react-components/react-nav/library/src/components/NavDrawerBody/NavDrawerBody.test.tsx index b901144f9d3c26..3bf670f3561e9a 100644 --- a/packages/react-components/react-nav/library/src/components/NavDrawerBody/NavDrawerBody.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavDrawerBody/NavDrawerBody.test.tsx @@ -18,7 +18,7 @@ describe('NavDrawerBody', () => { // D16 statics-removal sweep retired; `navDrawerBodyClassNames.root` is now the group // marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) // replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // NavDrawerBody IS a react-drawer DrawerBody — `useNavDrawerBodyStyles_unstable` calls diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.test.tsx b/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.test.tsx index 55785a407d5694..308d3cff885dd8 100644 --- a/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.test.tsx @@ -18,7 +18,7 @@ describe('NavDrawerFooter', () => { // D16 statics-removal sweep retired; `navDrawerFooterClassNames.root` is now the group // marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) // replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // NavDrawerFooter IS a react-drawer DrawerFooter — `useNavDrawerFooterStyles_unstable` diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerHeader/NavDrawerHeader.test.tsx b/packages/react-components/react-nav/library/src/components/NavDrawerHeader/NavDrawerHeader.test.tsx index 64a73bb2a37204..52ea79939e249c 100644 --- a/packages/react-components/react-nav/library/src/components/NavDrawerHeader/NavDrawerHeader.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavDrawerHeader/NavDrawerHeader.test.tsx @@ -18,7 +18,7 @@ describe('NavDrawerHeader', () => { // D16 statics-removal sweep retired; `navDrawerHeaderClassNames.root` is now the group // marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) // replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // NavDrawerHeader IS a react-drawer DrawerHeader — `useNavDrawerHeaderStyles_unstable` diff --git a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx index 21d7684fc2cf7b..7f4a424282588c 100644 --- a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.test.tsx @@ -19,7 +19,7 @@ describe('NavItem', () => { // holding the group marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` // (a default test) replaces it. The `has-static-classnames` testOptions block that // asserted the `icon` static went with it — that key no longer exists. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx b/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx index 7f2a32640780de..86fa2610ba607b 100644 --- a/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.test.tsx @@ -18,7 +18,7 @@ describe('NavSectionHeader', () => { // D16 statics-removal sweep retired; `navSectionHeaderClassNames.root` is now the group // marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) // replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx index c6c0be33aa374b..e5c59eb3d3b937 100644 --- a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.test.tsx @@ -18,7 +18,7 @@ describe('NavSubItem', () => { // D16 statics-removal sweep retired; `navSubItemClassNames.root` is now the group marker // (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) replaces // it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx index f02356c8fdb189..a254058d478efa 100644 --- a/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx +++ b/packages/react-components/react-nav/library/src/components/NavSubItemGroup/NavSubItemGroup.test.tsx @@ -38,7 +38,7 @@ describe('NavSubItemGroup', () => { // D16 statics-removal sweep retired; `navSubItemGroupClassNames.root` is now the group // marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) // replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.test.tsx b/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.test.tsx index 402e8495eeda49..233aadc4747a2b 100644 --- a/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.test.tsx +++ b/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.test.tsx @@ -19,7 +19,7 @@ describe('SplitNavItem', () => { // testOptions block that asserted the five slot statics went with it — the three button // slots are now styled through JS slot composition plus `group-*/fui-split-nav-item` // variants (D16.3, mechanism M2), so there is nothing public left to assert. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); }); diff --git a/packages/react-components/react-persona/library/src/components/Persona/Persona.test.tsx b/packages/react-components/react-persona/library/src/components/Persona/Persona.test.tsx index 09a80bf8e24061..b0b99a65cefbca 100644 --- a/packages/react-components/react-persona/library/src/components/Persona/Persona.test.tsx +++ b/packages/react-components/react-persona/library/src/components/Persona/Persona.test.tsx @@ -16,7 +16,6 @@ describe('Persona', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1/D16.6). Persona no longer renders // `fui-Persona` / `fui-Persona__`, and `personaClassNames` is now // `{ root: 'group/fui-persona' }`, so all three assertions in diff --git a/packages/react-components/react-popover/library/src/components/Popover/Popover.test.tsx b/packages/react-components/react-popover/library/src/components/Popover/Popover.test.tsx index 84725495a18093..9406ed728ea917 100644 --- a/packages/react-components/react-popover/library/src/components/Popover/Popover.test.tsx +++ b/packages/react-components/react-popover/library/src/components/Popover/Popover.test.tsx @@ -24,7 +24,6 @@ describe('Popover', () => { // marker (migration/griffel-to-tailwind). 'component-has-group-marker', // Popover does not have own styles - 'make-styles-overrides-win', ], testOptions: { 'consistent-callback-args': { diff --git a/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx b/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx index dccef1be6a152f..0a65115b73a89a 100644 --- a/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx +++ b/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.test.tsx @@ -33,7 +33,7 @@ describe('PopoverSurface', () => { // format and asserts those classes are rendered, both of which are exactly what D16 // retires. `component-has-group-marker` (a default test) replaces it — it asserts // `group/fui-popover-surface` IS stamped and, per D16.2, is never `classList[0]`. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.test.tsx b/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.test.tsx index 99efc3078d0f1b..822a4017c49244 100644 --- a/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.test.tsx +++ b/packages/react-components/react-popover/library/src/components/PopoverTrigger/PopoverTrigger.test.tsx @@ -25,7 +25,6 @@ describe('PopoverTrigger', () => { // (migration/griffel-to-tailwind). 'component-has-group-marker', // PopoverTrigger does not have own styles - 'make-styles-overrides-win', ], }); diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.test.tsx b/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.test.tsx index 54e95f13f3c0cc..1a2c66c2ce10f8 100644 --- a/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.test.tsx +++ b/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.test.tsx @@ -25,7 +25,7 @@ describe('ProgressBar', () => { // actually holds now — including the D15.1 `classList[0]` invariant the static used to // satisfy incidentally (D16.2/D16.6). Its `has-static-classnames` testOptions entry // (which rendered a label/description so the sub-slot statics could be found) goes with it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-radio/library/src/components/Radio/Radio.test.tsx b/packages/react-components/react-radio/library/src/components/Radio/Radio.test.tsx index 7c287cab31636f..59dadb67482b6d 100644 --- a/packages/react-components/react-radio/library/src/components/Radio/Radio.test.tsx +++ b/packages/react-components/react-radio/library/src/components/Radio/Radio.test.tsx @@ -27,7 +27,7 @@ describe('Radio', () => { // package as each one is swept; it leaves `defaultTests` altogether once every converted // package has been (D16.6). `component-has-group-marker` (now a default test) is its replacement — it // asserts the marker is stamped AND that it is never `classList[0]` (D16.2). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.test.tsx b/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.test.tsx index e2d0ee90b918d7..9dd42592f8597d 100644 --- a/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.test.tsx +++ b/packages/react-components/react-radio/library/src/components/RadioGroup/RadioGroup.test.tsx @@ -27,7 +27,7 @@ describe('RadioGroup', () => { // converted package has been (D16.6). `component-has-group-marker` (now a default test) is its // replacement — it asserts the marker is stamped AND that it is never `classList[0]` // (D16.2). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-rating/library/src/components/Rating/Rating.test.tsx b/packages/react-components/react-rating/library/src/components/Rating/Rating.test.tsx index a51f7d29a3b165..fbc2506f71a20a 100644 --- a/packages/react-components/react-rating/library/src/components/Rating/Rating.test.tsx +++ b/packages/react-components/react-rating/library/src/components/Rating/Rating.test.tsx @@ -16,7 +16,6 @@ describe('Rating', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1/D16.6). Rating no longer renders `fui-Rating`, // and `ratingClassNames` is now `{ root: 'group/fui-rating' }`, so all three // assertions in `component-has-static-classnames-object` — the export shape, the diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.test.tsx b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.test.tsx index 5b9895efc15914..d67a4fa6679992 100644 --- a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.test.tsx +++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.test.tsx @@ -17,7 +17,6 @@ describe('RatingDisplay', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1/D16.6). RatingDisplay no longer renders // `fui-RatingDisplay` / `fui-RatingDisplay__`, and `ratingDisplayClassNames` is // now `{ root: 'group/fui-rating-display' }`, so all three assertions in diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx index cca5099c3fdd05..a4c0e709b51c03 100644 --- a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx +++ b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.test.tsx @@ -27,7 +27,6 @@ describe('RatingItem', () => { // The guarantee itself is unchanged — clsx puts `state.root.className` last and the // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - 'make-styles-overrides-win', ], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, diff --git a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx index feae82e14bf634..c900e7ca71fce8 100644 --- a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx +++ b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.test.tsx @@ -43,7 +43,7 @@ describe('SearchBox', () => { // to `{ root }` and re-pointed it at the group marker. Its `has-static-classnames` // testOptions entry — which existed only to name the three sub-slot statics that the // default render does not produce — goes with it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // a SearchBox IS an Input — `useInputStyles_unstable` stamps its marker on this same element, so this root diff --git a/packages/react-components/react-select/library/src/components/Select/Select.test.tsx b/packages/react-components/react-select/library/src/components/Select/Select.test.tsx index 7648b85d14e38f..e9b33fd743e372 100644 --- a/packages/react-components/react-select/library/src/components/Select/Select.test.tsx +++ b/packages/react-components/react-select/library/src/components/Select/Select.test.tsx @@ -24,7 +24,7 @@ describe('Select', () => { // `{ root }` and re-pointed it at the group marker. `component-has-group-marker` (now a default test) is // its replacement and asserts the contract that actually holds now — including the D15.1 // `classList[0]` invariant the static used to satisfy incidentally (D16.2/D16.6). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx index fc06bca74bb5e1..009256a5a84bcc 100644 --- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx +++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx @@ -25,7 +25,7 @@ describe('Skeleton', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (now a default test) replaces it — it asserts the group marker IS stamped and, per D16.2, is never // `classList[0]`. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.test.tsx b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.test.tsx index 000a983b00e780..7aa8959d7ac339 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.test.tsx +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.test.tsx @@ -22,7 +22,7 @@ describe('SkeletonItem', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (now a default test) replaces it — it asserts the group marker IS stamped and, per D16.2, is never // `classList[0]`. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-slider/library/src/components/Slider/Slider.test.tsx b/packages/react-components/react-slider/library/src/components/Slider/Slider.test.tsx index e7790740bf00ce..38655f846c3c23 100644 --- a/packages/react-components/react-slider/library/src/components/Slider/Slider.test.tsx +++ b/packages/react-components/react-slider/library/src/components/Slider/Slider.test.tsx @@ -25,7 +25,7 @@ describe('Slider', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (a default test since D16.6) replaces it — it asserts the group marker IS stamped // and, per D16.2, is never `classList[0]`. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.test.tsx b/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.test.tsx index a393085974eef4..8da3f71f12a3ec 100644 --- a/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.test.tsx +++ b/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.test.tsx @@ -24,7 +24,6 @@ describe('SpinButton', () => { // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). disabledTests: [ - 'make-styles-overrides-win', // Statics removal (DECISIONS.md D16.1/D16.6). SpinButton no longer renders // `fui-SpinButton` / `fui-SpinButton__`, and `spinButtonClassNames` is now // `{ root: 'group/fui-spin-button' }`, so all three assertions in diff --git a/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.test.tsx b/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.test.tsx index 6165a84e1f8af2..fb244de7b3b299 100644 --- a/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.test.tsx +++ b/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.test.tsx @@ -24,7 +24,7 @@ describe('Spinner', () => { // rendered, both of which are exactly what D16 retires. `component-has-group-marker` // (now a default test) replaces it — it asserts the group marker IS stamped and, per D16.2, is never // `classList[0]`. The `has-static-classnames` testOptions entry goes with it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx index 54210a93aee339..c009d60578109d 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx @@ -21,7 +21,7 @@ describe('ColorSwatch', () => { // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) // replaces it: it asserts the group marker IS stamped and is never `classList[0]` // (D16.2 / D16.6). Its `has-static-classnames` testOptions entry goes with it. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.test.tsx index e27e8fe6b409a9..61a1b77d32d6bd 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.test.tsx @@ -13,7 +13,7 @@ describe('EmptySwatch', () => { // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and // `component-has-group-marker` (a default test) replaces the BEM-static assertion // (D16.1 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.test.tsx index dbed9182b634ad..df3652f9a6484b 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.test.tsx @@ -14,7 +14,7 @@ describe('ImageSwatch', () => { // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and // `component-has-group-marker` (a default test) replaces the BEM-static assertion // (D16.1 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx index fa6fbbc36d8193..35eb9b1d7cc906 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx @@ -16,7 +16,7 @@ describe('SwatchPicker', () => { // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and // `component-has-group-marker` (a default test) replaces the BEM-static assertion // (D16.1 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, From 3b8b4a02f55ee05b22b0ec5bf2515de1e05ce439 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:42:22 -0700 Subject: [PATCH 512/640] test: drop retired make-styles-overrides-win disabledTests entries (4/5) (S-H, D23) With @fluentui/react-conformance-griffel unwired from the isConformant wrappers, the make-styles-overrides-win test no longer exists; its disabledTests entries are dead weight. Explanatory migration comments stay for the S-I provenance-comment sweep. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../src/components/SwatchPickerRow/SwatchPickerRow.test.tsx | 2 +- .../react-switch/library/src/components/Switch/Switch.test.tsx | 2 +- .../library/src/components/DataGrid/DataGrid.test.tsx | 1 - .../library/src/components/DataGridBody/DataGridBody.test.tsx | 1 - .../library/src/components/DataGridCell/DataGridCell.test.tsx | 1 - .../src/components/DataGridHeader/DataGridHeader.test.tsx | 1 - .../components/DataGridHeaderCell/DataGridHeaderCell.test.tsx | 1 - .../library/src/components/DataGridRow/DataGridRow.test.tsx | 1 - .../DataGridSelectionCell/DataGridSelectionCell.test.tsx | 1 - .../react-table/library/src/components/Table/Table.test.tsx | 1 - .../library/src/components/TableBody/TableBody.test.tsx | 1 - .../library/src/components/TableCell/TableCell.test.tsx | 1 - .../src/components/TableCellActions/TableCellActions.test.tsx | 1 - .../src/components/TableCellLayout/TableCellLayout.test.tsx | 1 - .../library/src/components/TableHeader/TableHeader.test.tsx | 1 - .../src/components/TableHeaderCell/TableHeaderCell.test.tsx | 1 - .../src/components/TableResizeHandle/TableResizeHandle.test.tsx | 1 - .../library/src/components/TableRow/TableRow.test.tsx | 1 - .../components/TableSelectionCell/TableSelectionCell.test.tsx | 1 - .../react-tabs/library/src/components/Tab/Tab.test.tsx | 2 +- .../react-tabs/library/src/components/TabList/TabList.test.tsx | 2 +- .../library/src/components/TagPicker/TagPicker.test.tsx | 1 - .../src/components/TagPickerButton/TagPickerButton.test.tsx | 1 - .../src/components/TagPickerControl/TagPickerControl.test.tsx | 1 - .../src/components/TagPickerGroup/TagPickerGroup.test.tsx | 1 - .../src/components/TagPickerInput/TagPickerInput.test.tsx | 1 - .../library/src/components/TagPickerList/TagPickerList.test.tsx | 1 - .../src/components/TagPickerOption/TagPickerOption.test.tsx | 1 - .../TagPickerOptionGroup/TagPickerOptionGroup.test.tsx | 1 - .../src/components/InteractionTag/InteractionTag.test.tsx | 2 +- .../InteractionTagPrimary/InteractionTagPrimary.test.tsx | 2 +- .../InteractionTagSecondary/InteractionTagSecondary.test.tsx | 2 +- .../react-tags/library/src/components/Tag/Tag.test.tsx | 2 +- .../library/src/components/TagGroup/TagGroup.test.tsx | 2 +- .../src/components/TeachingPopover/TeachingPopover.test.tsx | 1 - .../components/TeachingPopoverBody/TeachingPopoverBody.test.tsx | 2 +- .../TeachingPopoverCarousel/TeachingPopoverCarousel.test.tsx | 2 +- .../TeachingPopoverCarouselCard.test.tsx | 1 - .../TeachingPopoverCarouselFooter.test.tsx | 2 +- .../TeachingPopoverCarouselFooterButton.test.tsx | 2 +- 40 files changed, 13 insertions(+), 40 deletions(-) diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx index 6483b1d3d9b93b..4da2abbb51b747 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx @@ -13,7 +13,7 @@ describe('SwatchPickerRow', () => { // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and // `component-has-group-marker` (a default test) replaces the BEM-static assertion // (D16.1 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-switch/library/src/components/Switch/Switch.test.tsx b/packages/react-components/react-switch/library/src/components/Switch/Switch.test.tsx index 10ab4a3702b6fc..209ee6f7a3c256 100644 --- a/packages/react-components/react-switch/library/src/components/Switch/Switch.test.tsx +++ b/packages/react-components/react-switch/library/src/components/Switch/Switch.test.tsx @@ -28,7 +28,7 @@ describe('Switch', () => { // every converted package has been (D16.6). `component-has-group-marker` (now a default test) is its // replacement — it asserts the marker is stamped AND that it is never `classList[0]` // (D16.2). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx index 4fc6c7a9f68bac..1e27caafb5fce6 100644 --- a/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGrid/DataGrid.test.tsx @@ -42,7 +42,6 @@ describe('DataGrid', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, requiredProps: { items: testItems, diff --git a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx index b5e3f3b265d686..3f0ed2464039b2 100644 --- a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.test.tsx @@ -19,7 +19,6 @@ describe('DataGridBody', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], // This component renders another component's ROOT — a DataGridBody IS a TableBody — so the // element legitimately carries BOTH markers (DECISIONS.md D16.3). Declaring the whole set // keeps `component-has-group-marker` running as an exact set comparison, and keeps its diff --git a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx index 7838b596af16f0..dcd969a983822f 100644 --- a/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridCell/DataGridCell.test.tsx @@ -16,7 +16,6 @@ describe('DataGridCell', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], // This component renders another component's ROOT — a DataGridCell IS a TableCell — so the // element legitimately carries BOTH markers (DECISIONS.md D16.3). Declaring the whole set // keeps `component-has-group-marker` running as an exact set comparison, and keeps its diff --git a/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx b/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx index 170dce8f436644..008a7ad7d94b4f 100644 --- a/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridHeader/DataGridHeader.test.tsx @@ -14,7 +14,6 @@ describe('DataGridHeader', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], // This component renders another component's ROOT — a DataGridHeader IS a TableHeader — so the // element legitimately carries BOTH markers (DECISIONS.md D16.3). Declaring the whole set // keeps `component-has-group-marker` running as an exact set comparison, and keeps its diff --git a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx index e1c24d55a89296..518089d7141521 100644 --- a/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx @@ -20,7 +20,6 @@ describe('DataGridHeaderCell', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], // This component renders another component's ROOT — a DataGridHeaderCell IS a TableHeaderCell — so the // element legitimately carries BOTH markers (DECISIONS.md D16.3). Declaring the whole set // keeps `component-has-group-marker` running as an exact set comparison, and keeps its diff --git a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx index cc8f6873713a02..dbe5ad89b30607 100644 --- a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx @@ -23,7 +23,6 @@ describe('DataGridRow', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], // This component renders another component's ROOT — a DataGridRow IS a TableRow — so the // element legitimately carries BOTH markers (DECISIONS.md D16.3). Declaring the whole set // keeps `component-has-group-marker` running as an exact set comparison, and keeps its diff --git a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx index 3bc9efaf97ffe5..85942ff9827f7e 100644 --- a/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx @@ -17,7 +17,6 @@ describe('DataGridSelectionCell', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], // This component renders another component's ROOT — a DataGridSelectionCell IS a TableSelectionCell — so the // element legitimately carries BOTH markers (DECISIONS.md D16.3). Declaring the whole set // keeps `component-has-group-marker` running as an exact set comparison, and keeps its diff --git a/packages/react-components/react-table/library/src/components/Table/Table.test.tsx b/packages/react-components/react-table/library/src/components/Table/Table.test.tsx index aebf10f914aae1..8fa3548447b518 100644 --- a/packages/react-components/react-table/library/src/components/Table/Table.test.tsx +++ b/packages/react-components/react-table/library/src/components/Table/Table.test.tsx @@ -17,7 +17,6 @@ describe('Table', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx b/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx index 92a43b570042a7..8664b9fdb2e42d 100644 --- a/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableBody/TableBody.test.tsx @@ -19,7 +19,6 @@ describe('TableBody', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, renderOptions: { container: table, diff --git a/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx b/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx index d774c4a0d06c0d..7e8378acfd7f12 100644 --- a/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableCell/TableCell.test.tsx @@ -23,7 +23,6 @@ describe('TableCell', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-table/library/src/components/TableCellActions/TableCellActions.test.tsx b/packages/react-components/react-table/library/src/components/TableCellActions/TableCellActions.test.tsx index 89255ec8c19f4a..0779b92f2cc96f 100644 --- a/packages/react-components/react-table/library/src/components/TableCellActions/TableCellActions.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableCellActions/TableCellActions.test.tsx @@ -13,7 +13,6 @@ describe('TableCellActions', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx index d3c7aeedb88d96..f384a2e28ccc4b 100644 --- a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.test.tsx @@ -14,7 +14,6 @@ describe('TableCellLayout', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx b/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx index 39d3e3e26ea029..eff3919c2417a9 100644 --- a/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableHeader/TableHeader.test.tsx @@ -19,7 +19,6 @@ describe('TableHeader', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, renderOptions: { container: table, diff --git a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx index 96fa5af97e4689..f9073a694365a1 100644 --- a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.test.tsx @@ -21,7 +21,6 @@ describe('TableHeaderCell', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, renderOptions: { container: tr, diff --git a/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.test.tsx b/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.test.tsx index 6c41453906b5c5..1fe8c288072bd9 100644 --- a/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.test.tsx @@ -13,7 +13,6 @@ describe('TableResizeHandle', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx b/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx index b842fd03d65aa7..fd9104becb5faa 100644 --- a/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableRow/TableRow.test.tsx @@ -24,7 +24,6 @@ describe('TableRow', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx index 3ab34368a1796e..75f95b2323bf9d 100644 --- a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx +++ b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.test.tsx @@ -22,7 +22,6 @@ describe('TableSelectionCell', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, renderOptions: { container: tr, diff --git a/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx b/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx index 8beb7559ce4579..134c460e5451ae 100644 --- a/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx +++ b/packages/react-components/react-tabs/library/src/components/Tab/Tab.test.tsx @@ -23,7 +23,7 @@ describe('Tab', () => { // marker (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) // replaces it. The `has-static-classnames` testOptions block that asserted the `icon` and // `content` statics went with it — those keys no longer exist. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, }); diff --git a/packages/react-components/react-tabs/library/src/components/TabList/TabList.test.tsx b/packages/react-components/react-tabs/library/src/components/TabList/TabList.test.tsx index 353dcf71876a5c..444a92b1476c05 100644 --- a/packages/react-components/react-tabs/library/src/components/TabList/TabList.test.tsx +++ b/packages/react-components/react-tabs/library/src/components/TabList/TabList.test.tsx @@ -18,7 +18,7 @@ describe('TabList', () => { // `component-has-static-classnames-object` asserts the exact `fui-` format the // conversion retired; `tabListClassNames` is now `{ root }` holding the group marker // (DECISIONS.md D16.5/D16.6) and `component-has-group-marker` (a default test) replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { 'consistent-callback-args': { diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.test.tsx index cd98b7bba5ea3a..dfa7f56b0e17c4 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPicker/TagPicker.test.tsx @@ -24,7 +24,6 @@ describe('TagPicker', () => { // element, so there is nothing to stamp a marker on. 'component-has-group-marker', // TagPicker does not have own styles - 'make-styles-overrides-win', ], }); diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.test.tsx index 75504e264958e9..2c5df1837f52a3 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.test.tsx @@ -19,7 +19,6 @@ describe('TagPickerButton', () => { // The former `component-has-static-classnames-object` entry is dropped: that test left the // default set with DECISIONS.md D16.6 and this package no longer opts into it. // `component-has-group-marker` — the contract that DID replace it — now runs by default. - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.test.tsx index db22893b4cd991..61aeb2315434ef 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.test.tsx @@ -18,7 +18,6 @@ describe('TagPickerControl', () => { // The guarantee itself is unchanged — clsx puts `state.root.className` last and the // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/TagPickerGroup.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/TagPickerGroup.test.tsx index 87da5b6930c1c7..93352a6cc7a173 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/TagPickerGroup.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/TagPickerGroup.test.tsx @@ -30,7 +30,6 @@ describe('TagPickerGroup', () => { // string, so the consumer's className is still last overall (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement — the promise the // pre-conversion comment here deferred until "react-tag-picker itself converts". - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.test.tsx index eddf1d9be49170..113a2c73c7274a 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.test.tsx @@ -18,7 +18,6 @@ describe('TagPickerInput', () => { // // The former `component-has-static-classnames-object` entry is dropped: that test left the // default set with DECISIONS.md D16.6 and this package no longer opts into it. - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.test.tsx index 1a6a6dce880a13..347a04759bcd3a 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.test.tsx @@ -29,7 +29,6 @@ describe('TagPickerList', () => { // The guarantee itself is unchanged — clsx puts `state.root.className` last, and the // `` this slot renders as carries that whole string through as ITS last argument // (DECISIONS.md D2/D9). `classname-overrides-win` below is its cascade-native replacement. - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx index bd55adc0d76b5f..60a4256c8b6c3b 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.test.tsx @@ -17,7 +17,6 @@ describe('TagPickerOption', () => { // The guarantee itself is unchanged — clsx puts `state.root.className` last, then // `useOptionStyles_unstable` prepends Option's own classes and carries the whole string // through (DECISIONS.md D2/D9). `classname-overrides-win` is its cascade-native replacement. - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.test.tsx b/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.test.tsx index 4c554aae3e30f7..3269a40fe1f8d1 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.test.tsx +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOptionGroup/TagPickerOptionGroup.test.tsx @@ -19,7 +19,6 @@ describe('TagPickerOptionGroup', () => { // unchanged: the consumer className is still last in the emitted string, and unlayered // consumer CSS still beats every `@layer fui.*` rule. `classname-overrides-win` is its // cascade-native replacement (DECISIONS.md D9). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx index 1d2e49f75a075b..a150758f720030 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx +++ b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.test.tsx @@ -26,7 +26,7 @@ describe('InteractionTag', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.test.tsx b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.test.tsx index ba5486307644ae..30200d38a21713 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.test.tsx +++ b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.test.tsx @@ -25,7 +25,7 @@ describe('InteractionTagPrimary', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.test.tsx b/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.test.tsx index d686887684a9f4..541bf6930efba3 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.test.tsx +++ b/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.test.tsx @@ -17,7 +17,7 @@ describe('InteractionTagSecondary', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx index ce06cbb1235d7e..516cee2f739d34 100644 --- a/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx +++ b/packages/react-components/react-tags/library/src/components/Tag/Tag.test.tsx @@ -29,7 +29,7 @@ describe('Tag', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.test.tsx b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.test.tsx index c693b97ae9b5e6..b266e0c336e77f 100644 --- a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.test.tsx +++ b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.test.tsx @@ -21,7 +21,7 @@ describe('TagGroup', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.test.tsx index 88da3c797a3c75..c18985bd0f132a 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopover/TeachingPopover.test.tsx @@ -21,7 +21,6 @@ describe('TeachingPopover', () => { // carries the marker (migration/griffel-to-tailwind). 'component-has-group-marker', // Popover does not have own styles - 'make-styles-overrides-win', // Our callbacks are intended to be simplified 'consistent-callback-args', ], diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.test.tsx index fcaf5c008e7530..dae1593981c109 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverBody/TeachingPopoverBody.test.tsx @@ -21,7 +21,7 @@ describe('TeachingPopoverBody', () => { // publishes BEM statics (DECISIONS.md D16.1): the test hard-codes the `fui-` // format and asserts those classes are rendered, both of which are exactly what D16 // retires. `component-has-group-marker` (a default test) replaces it. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.test.tsx index a207f08fe1a5e2..dadd359f6cd395 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarousel/TeachingPopoverCarousel.test.tsx @@ -19,7 +19,7 @@ describe('TeachingPopoverCarousel', () => { // `classname-overrides-win` passes here even though this component has no styles of its // own: the root carries the module's IDENTITY-ONLY local ahead of the marker (D16.2), so // there really is a class of its own for the consumer's to come after. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.test.tsx index e679abc195b556..f9137fc7bccd0a 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.test.tsx @@ -23,7 +23,6 @@ describe('TeachingPopoverCarouselCard', () => { // same reason `component-handles-classname` above is disabled — both assert against a // rendered root this suite does not resolve. `component-has-group-marker` (a default // test) does still run and pins the marker's placement. - 'make-styles-overrides-win', ], }); diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.test.tsx index 05324b207903ec..ad06d3191fecb5 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.test.tsx @@ -19,7 +19,7 @@ describe('TeachingPopoverCarouselFooter', () => { // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and the // BEM statics this package published are gone (D16.1) — including the `__previous` / // `__next` slot statics, which were the ONLY thing this hook wrote to those two slots. - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx index 1d7d441ae450a7..7e41dfe18652c6 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.test.tsx @@ -20,7 +20,7 @@ describe('TeachingPopoverCarouselFooterButton', () => { // // `component-has-static-classnames-object` is disabled because the BEM statics are gone // (D16.1). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // A TeachingPopoverCarouselFooterButton IS a react-button `Button` — // `useButtonStyles_unstable` stamps its marker on this same element — so this root From 2e305ce0905c4d76b164789953c2635f7aa7ffc5 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:42:24 -0700 Subject: [PATCH 513/640] test: drop retired make-styles-overrides-win disabledTests entries (5/5) (S-H, D23) With @fluentui/react-conformance-griffel unwired from the isConformant wrappers, the make-styles-overrides-win test no longer exists; its disabledTests entries are dead weight. Explanatory migration comments stay for the S-I provenance-comment sweep. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../TeachingPopoverCarouselNav.test.tsx | 2 +- .../TeachingPopoverCarouselPageCount.test.tsx | 2 +- .../TeachingPopoverFooter/TeachingPopoverFooter.test.tsx | 2 +- .../TeachingPopoverHeader/TeachingPopoverHeader.test.tsx | 2 +- .../TeachingPopoverSurface/TeachingPopoverSurface.test.tsx | 1 - .../TeachingPopoverTitle/TeachingPopoverTitle.test.tsx | 1 - .../TeachingPopoverTrigger/TeachingPopoverTrigger.test.tsx | 1 - .../library/src/components/Textarea/Textarea.test.tsx | 2 +- .../library/src/components/TimePicker/TimePicker.test.tsx | 2 +- .../library/src/components/AriaLive/AriaLive.test.tsx | 1 - .../react-toast/library/src/components/Toast/Toast.test.tsx | 1 - .../library/src/components/ToastBody/ToastBody.test.tsx | 1 - .../src/components/ToastContainer/ToastContainer.test.tsx | 1 - .../library/src/components/ToastFooter/ToastFooter.test.tsx | 1 - .../library/src/components/ToastTitle/ToastTitle.test.tsx | 1 - .../library/src/components/ToastTrigger/ToastTrigger.test.tsx | 1 - .../react-toast/library/src/components/Toaster/Toaster.test.tsx | 1 - .../library/src/components/Toolbar/Toolbar.test.tsx | 2 +- .../library/src/components/ToolbarButton/ToolbarButton.test.tsx | 2 +- .../src/components/ToolbarDivider/ToolbarDivider.test.tsx | 2 +- .../library/src/components/ToolbarGroup/ToolbarGroup.test.tsx | 2 +- .../components/ToolbarRadioButton/ToolbarRadioButton.test.tsx | 2 +- .../src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx | 2 +- .../components/ToolbarToggleButton/ToolbarToggleButton.test.tsx | 2 +- .../library/src/components/FlatTree/FlatTree.test.tsx | 2 +- .../react-tree/library/src/components/Tree/Tree.test.tsx | 2 +- .../library/src/components/TreeItem/TreeItem.test.tsx | 2 +- .../src/components/TreeItemLayout/TreeItemLayout.test.tsx | 1 - .../TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx | 1 - 29 files changed, 16 insertions(+), 29 deletions(-) diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.test.tsx index e7394df1dbbf2d..fd1fb97bb9dea6 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.test.tsx @@ -13,7 +13,7 @@ describe('TeachingPopoverCarouselNav', () => { // wrapper: `make-styles-overrides-win` can no longer observe a clsx-composed component, // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and the // BEM statics this package published are gone (D16.1). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.test.tsx index 6bb7a42f58d27c..4f38fed0e09683 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselPageCount/TeachingPopoverCarouselPageCount.test.tsx @@ -15,7 +15,7 @@ describe('TeachingPopoverCarouselPageCount', () => { // wrapper: `make-styles-overrides-win` can no longer observe a clsx-composed component, // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and the // BEM statics this package published are gone (D16.1). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.test.tsx index f282b2067019ea..9bf04441c8e990 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.test.tsx @@ -19,7 +19,7 @@ describe('TeachingPopoverFooter', () => { // BEM statics this package published are gone (D16.1) — including the `__primary` / // `__secondary` slot statics, whose styling now travels as hashed module classes composed // onto the two `Button` slot objects this hook holds (D16.3's M2). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx index 9cfb14965677f6..065733e904f58d 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.test.tsx @@ -13,7 +13,7 @@ describe('TeachingPopoverHeader', () => { // wrapper: `make-styles-overrides-win` can no longer observe a clsx-composed component, // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9), and the // BEM statics this package published are gone (D16.1). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.test.tsx index 80debb368731c8..f4fd597edc4384 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.test.tsx @@ -22,7 +22,6 @@ describe('TeachingPopoverSurface', () => { // composes with clsx and delegates to react-popover's converted // `usePopoverSurfaceStyles_unstable`, so mergeClasses is never called at all. // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - 'make-styles-overrides-win', // Arrow slot is optional — and, since D16.1, this package publishes no BEM statics at // all, which is the other half of why this test cannot apply. 'component-has-static-classnames-object', diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx index f4411aa09d9a7a..48e487cb6d6f5c 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.test.tsx @@ -15,7 +15,6 @@ describe('TeachingPopoverTitle', () => { // wrapper: `make-styles-overrides-win` can no longer observe a clsx-composed component // and `classname-overrides-win` below is its cascade-native replacement // (DECISIONS.md D9). - 'make-styles-overrides-win', // Title dismiss is optionally rendered — and, since D16.1, this package publishes no // BEM statics at all, which is the other half of why this test cannot apply. 'component-has-static-classnames-object', diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.test.tsx b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.test.tsx index 10fb2a6678186c..8cd971ee632bc8 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.test.tsx +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTrigger/TeachingPopoverTrigger.test.tsx @@ -20,7 +20,6 @@ describe('TeachingPopoverTrigger', () => { // resolve to the consumer's own element (migration/griffel-to-tailwind). 'component-has-group-marker', // PopoverTrigger does not have own styles - 'make-styles-overrides-win', ], }); diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx index 171e9d384691f4..0f87f8199d4853 100644 --- a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx +++ b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.test.tsx @@ -38,7 +38,7 @@ describe('Textarea', () => { // to `{ root }` and re-pointed it at the group marker. `component-has-group-marker` (now a default test) // is its replacement and asserts the contract that actually holds now — including the // D15.1 `classList[0]` invariant the static used to satisfy incidentally (D16.2/D16.6). - disabledTests: ['make-styles-overrides-win', 'component-has-static-classnames-object'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx index b52e645b1189ea..b53693f02962e7 100644 --- a/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx +++ b/packages/react-components/react-timepicker-compat/library/src/components/TimePicker/TimePicker.test.tsx @@ -42,7 +42,7 @@ describe('TimePicker', () => { // guarantee itself is unchanged — clsx puts `state.root.className` last and the // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin }, testOptions: { // a TimePicker IS a Combobox — `useComboboxStyles_unstable` stamps its marker on this same diff --git a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx index b914052922847e..a704203ceed234 100644 --- a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx +++ b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.test.tsx @@ -23,7 +23,6 @@ describe('AriaLive', () => { // `component-has-group-marker` (a default test) still runs and is satisfied — it reads // the container's first child, which is the `assertive` live region, and both regions // carry `group/fui-aria-live` after the hashed module class (D15.1 / D16.2). - 'make-styles-overrides-win', ], }); diff --git a/packages/react-components/react-toast/library/src/components/Toast/Toast.test.tsx b/packages/react-components/react-toast/library/src/components/Toast/Toast.test.tsx index 5f923f90c9bbfa..14d95a28709960 100644 --- a/packages/react-components/react-toast/library/src/components/Toast/Toast.test.tsx +++ b/packages/react-components/react-toast/library/src/components/Toast/Toast.test.tsx @@ -18,7 +18,6 @@ describe('Toast', () => { // // `component-has-group-marker` runs from the DEFAULT set: it asserts `group/fui-toast` is // stamped and, critically, that it is never `classList[0]` (D15.1 / D16.2). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx index ab0a585d103b72..bc3fb4adfadbad 100644 --- a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx +++ b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.test.tsx @@ -18,7 +18,6 @@ describe('ToastBody', () => { // `component-has-group-marker` runs from the DEFAULT set and needs no `getTargetElement` // here: `renderToastBody` puts `root` first in its fragment, so the container's first // child is the marker-bearing element. - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx index bff9e4f6c52f84..b48c7b1c5eaad2 100644 --- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx +++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.test.tsx @@ -80,7 +80,6 @@ describe('ToastContainer', () => { // // `component-has-group-marker` runs from the DEFAULT set and asserts // `group/fui-toast-container` is stamped and never `classList[0]` (D15.1 / D16.2). - 'make-styles-overrides-win', ], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, diff --git a/packages/react-components/react-toast/library/src/components/ToastFooter/ToastFooter.test.tsx b/packages/react-components/react-toast/library/src/components/ToastFooter/ToastFooter.test.tsx index d1ebea11e91651..b7219f52043521 100644 --- a/packages/react-components/react-toast/library/src/components/ToastFooter/ToastFooter.test.tsx +++ b/packages/react-components/react-toast/library/src/components/ToastFooter/ToastFooter.test.tsx @@ -16,7 +16,6 @@ describe('ToastFooter', () => { // // `component-has-group-marker` runs from the DEFAULT set: it asserts // `group/fui-toast-footer` is stamped and never `classList[0]` (D15.1 / D16.2). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx index 137ae300cba257..40ba8848e1d0ff 100644 --- a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx +++ b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.test.tsx @@ -35,7 +35,6 @@ describe('ToastTitle', () => { // `component-has-group-marker` runs from the DEFAULT set: it asserts // `group/fui-toast-title` is stamped on the element `getTargetElement` returns, and that // the marker is never `classList[0]` (D15.1 / D16.2). - disabledTests: ['make-styles-overrides-win'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx index 0d7ce489865165..f08b6922b926e7 100644 --- a/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx +++ b/packages/react-components/react-toast/library/src/components/ToastTrigger/ToastTrigger.test.tsx @@ -18,7 +18,6 @@ describe('ToastTrigger', () => { // the opt-out has to be explicit. 'component-has-group-marker', // ToastTrigger does not have own styles - 'make-styles-overrides-win', ], Component: ToastTrigger, displayName: 'ToastTrigger', diff --git a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx index 34fc370fa5bff0..ada7daa84fc3b8 100644 --- a/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx +++ b/packages/react-components/react-toast/library/src/components/Toaster/Toaster.test.tsx @@ -30,7 +30,6 @@ describe('Toaster', () => { 'component-has-group-marker', // `make-styles-overrides-win` jest-mocks `@griffel/react`'s mergeClasses; this hook // now composes with clsx and never calls it. - 'make-styles-overrides-win', ], }); diff --git a/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.test.tsx b/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.test.tsx index 02ae5befafd8f4..dccd7f4529e899 100644 --- a/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.test.tsx @@ -23,7 +23,7 @@ describe('Toolbar', () => { // (D16.6); until then converted packages opt out here. `component-has-group-marker` (now a default test) // replaces it — it asserts the marker IS stamped and, crucially, that it is never // `classList[0]` (D16.2). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx index 942fa0d411f561..9286289b63201b 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarButton/ToolbarButton.test.tsx @@ -15,7 +15,7 @@ describe('ToolbarButton', () => { // to observe. `classname-overrides-win` is its cascade-native replacement — it passes // here because `useButtonStyles_unstable`, called last, composes with clsx and keeps // the incoming className (which carries the consumer's) last (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // renders react-button’s Button, whose hook stamps its marker on this same element, so this root // legitimately carries every marker below (DECISIONS.md D16.3). Declaring the whole set diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/ToolbarDivider.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/ToolbarDivider.test.tsx index d94a40495eb5f7..12fb90e6f6c133 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/ToolbarDivider.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarDivider/ToolbarDivider.test.tsx @@ -14,7 +14,7 @@ describe('ToolbarDivider', () => { // nothing to observe — it was already failing on this component before this // conversion, from the react-divider side alone. `classname-overrides-win` is its // cascade-native replacement (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // renders react-divider’s Divider, whose hook stamps its marker on this same element, so this root // legitimately carries every marker below (DECISIONS.md D16.3). Declaring the whole set diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx index e9a3179a82e0c5..f67f865fb13056 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/ToolbarGroup.test.tsx @@ -14,7 +14,7 @@ describe('ToolbarGroup', () => { // it was called with the consumer className last; this component now composes with // clsx and never calls mergeClasses, so the test can no longer observe the contract. // `classname-overrides-win` is its cascade-native replacement (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx index 462fba9d7ff18f..92f7dcaaa82751 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.test.tsx @@ -15,7 +15,7 @@ describe('ToolbarRadioButton', () => { // reasoning as ToolbarToggleButton.test.tsx: nothing in this component's delegation // chain calls mergeClasses any more, so `make-styles-overrides-win` has nothing to // observe and `classname-overrides-win` replaces it (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // renders react-button’s ToggleButton, which renders Button — each hook stamps its own marker on the one element, so this root // legitimately carries every marker below (DECISIONS.md D16.3). Declaring the whole set diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx index 190b8644a1dcd6..d7453a980929f5 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioGroup/ToolbarRadioGroup.test.tsx @@ -12,7 +12,7 @@ describe('ToolbarRadioGroup', () => { // Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). // ToolbarRadioGroup renders through `useToolbarGroupStyles_unstable`, which is // converted, so it no longer calls mergeClasses either — same swap as ToolbarGroup. - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx index cf9af579a39aba..76f2622b11894d 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.test.tsx @@ -15,7 +15,7 @@ describe('ToolbarToggleButton', () => { // to observe. `classname-overrides-win` is its cascade-native replacement — it passes // here because `useToggleButtonStyles_unstable`, called last, composes with clsx and // keeps the incoming className (which carries the consumer's) last (DECISIONS.md D9). - disabledTests: ['component-has-static-classnames-object', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object'], testOptions: { // renders react-button’s ToggleButton, which renders Button — each hook stamps its own marker on the one element, so this root // legitimately carries every marker below (DECISIONS.md D16.3). Declaring the whole set diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.test.tsx b/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.test.tsx index b8cc1451597958..398a8d1a8ecff1 100644 --- a/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.test.tsx +++ b/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.test.tsx @@ -19,7 +19,7 @@ describe('FlatTree', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'consistent-callback-args', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object', 'consistent-callback-args'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tree/library/src/components/Tree/Tree.test.tsx b/packages/react-components/react-tree/library/src/components/Tree/Tree.test.tsx index c821289e76f6df..d194f61792cc18 100644 --- a/packages/react-components/react-tree/library/src/components/Tree/Tree.test.tsx +++ b/packages/react-components/react-tree/library/src/components/Tree/Tree.test.tsx @@ -23,7 +23,7 @@ describe('Tree', () => { // `component-has-static-classnames-object` asserts the `fui-__` BEM // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). - disabledTests: ['component-has-static-classnames-object', 'consistent-callback-args', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object', 'consistent-callback-args'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.test.tsx b/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.test.tsx index 9aa43b5bc90968..353b33700859e9 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.test.tsx +++ b/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.test.tsx @@ -32,7 +32,7 @@ describe('TreeItem', () => { // format DECISIONS.md D16.1 removed. `component-has-group-marker` (now a default test) replaces it: it // asserts the group marker IS stamped and is never `classList[0]` (D16.2 / D16.6). The // `has-static-classnames` testOptions that fed the deleted test went with it. - disabledTests: ['component-has-static-classnames-object', 'consistent-callback-args', 'make-styles-overrides-win'], + disabledTests: ['component-has-static-classnames-object', 'consistent-callback-args'], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, }, diff --git a/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.test.tsx b/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.test.tsx index d415e167a4075a..e1fd0f446fb965 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.test.tsx +++ b/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.test.tsx @@ -45,7 +45,6 @@ describe('TreeItemLayout', () => { // The guarantee itself is unchanged — clsx puts `root.className` last and the // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - 'make-styles-overrides-win', ], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, diff --git a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx index b256e0e8213b98..5a874a669111b2 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx +++ b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.test.tsx @@ -45,7 +45,6 @@ describe('TreeItemPersonaLayout', () => { // The guarantee itself is unchanged — clsx puts `state.root.className` last and the // `@layer fui.*` sublayers keep unlayered consumer CSS winning (DECISIONS.md D2/D9). // `classname-overrides-win` below is its cascade-native replacement (DECISIONS.md D9). - 'make-styles-overrides-win', ], extraTests: { [CLASSNAME_OVERRIDES_WIN_TEST_NAME]: classNameOverridesWin, From b0a48f0f993db1eb457c0f21db406087e7608be6 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:48:53 -0700 Subject: [PATCH 514/640] chore: purge Griffel tooling from shared configs and generators (S-H) - eslint: @griffel/eslint-plugin and its 4 rules removed from the shared react config (and the legacy/no-shorthands + per-app styles-file overrides); @eslint/compat dropped with its only usage. Deprecated Griffel packages keep linting via the shared config (rules were advisory only). - workspace-plugin generators: react-component now scaffolds clsx + CSS Modules (new *.module.css template, marker classNames per D15.1/D16.5); react-library no longer emits @griffel/react dep, @griffel/jest-serializer (the repo jest.preset ships the css-modules serializer), or the react-conformance-griffel wrapper. Specs updated. - root devDeps: @griffel/eslint-plugin and @griffel/react removed (no consumers left without their own manifest entry); clsx added (generator version fill). Kept with reasons: @griffel/babel-preset (deprecated/ AOT via scripts-babel preset-v9), @griffel/jest-serializer (S-I sweep), @griffel/shadow-dom + @griffel/webpack-loader (D11 survivor VR stories, storybook griffelRule). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../eslint.config.js | 1 - .../eslint.config.js | 1 - package.json | 3 +- packages/eslint-plugin/package.json | 2 - .../eslint-plugin/src/configs/react/config.js | 13 --- .../eslint-plugin/src/configs/react/legacy.js | 1 - .../react-storybook-addon/eslint.config.js | 1 - .../theme-designer/eslint.config.js | 1 - .../__componentName__.module.css__tmpl__ | 10 ++ ...e__componentName__Styles.styles.ts__tmpl__ | 37 ++++---- .../generators/react-component/index.spec.ts | 41 ++++----- .../files/jest.config.js__tmpl__ | 1 - .../react-library/files/package.json__tmpl__ | 4 +- .../files/src/testing/isConformant.ts__tmpl__ | 4 +- .../generators/react-library/index.spec.ts | 16 ++-- yarn.lock | 91 +------------------ 16 files changed, 62 insertions(+), 165 deletions(-) create mode 100644 tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ diff --git a/apps/perf-test-react-components/eslint.config.js b/apps/perf-test-react-components/eslint.config.js index 0884d266211dc6..2c22956fdc6cff 100644 --- a/apps/perf-test-react-components/eslint.config.js +++ b/apps/perf-test-react-components/eslint.config.js @@ -6,7 +6,6 @@ module.exports = [ ...fluentPlugin.configs['flat/react'], { rules: { - '@griffel/styles-file': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', 'no-console': 'off', '@nx/workspace-no-restricted-globals': 'off', diff --git a/apps/vr-tests-react-components/eslint.config.js b/apps/vr-tests-react-components/eslint.config.js index 317d76524a5fa0..1da3d56fc97591 100644 --- a/apps/vr-tests-react-components/eslint.config.js +++ b/apps/vr-tests-react-components/eslint.config.js @@ -6,7 +6,6 @@ module.exports = [ ...fluentPlugin.configs['flat/react'], { rules: { - '@griffel/styles-file': 'off', '@fluentui/no-restricted-imports': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/naming-convention': 'off', diff --git a/package.json b/package.json index b4ac5eaea57711..e5624d7215fb05 100644 --- a/package.json +++ b/package.json @@ -65,9 +65,7 @@ "@fluentui/scripts-test-ssr": "*", "@fluentui/storybook-llms-extractor": "*", "@griffel/babel-preset": "1.5.8", - "@griffel/eslint-plugin": "^2.0.0", "@griffel/jest-serializer": "1.1.24", - "@griffel/react": "^1.5.32", "@griffel/shadow-dom": "0.2.2", "@griffel/webpack-loader": "2.2.10", "@jest/reporters": "30.2.0", @@ -184,6 +182,7 @@ "circular-dependency-plugin": "5.2.2", "clean-css": "4.2.3", "clean-webpack-plugin": "4.0.0", + "clsx": "2.1.1", "connect-history-api-fallback": "1.6.0", "copy-webpack-plugin": "12.0.2", "cross-env": "^5.1.4", diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index 14d4e10ad3a591..b73e31d8fd4fe2 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -10,8 +10,6 @@ }, "license": "MIT", "dependencies": { - "@eslint/compat": "1.3.0", - "@griffel/eslint-plugin": "^2.0.0", "@nx/eslint-plugin": "21.6.10", "@rnx-kit/eslint-plugin": "^0.8.4", "@typescript-eslint/eslint-plugin": "8.46.2", diff --git a/packages/eslint-plugin/src/configs/react/config.js b/packages/eslint-plugin/src/configs/react/config.js index 1481bb2c4a3169..4b57cb32fc9f31 100644 --- a/packages/eslint-plugin/src/configs/react/config.js +++ b/packages/eslint-plugin/src/configs/react/config.js @@ -2,9 +2,7 @@ const jsxA11yPlugin = require('eslint-plugin-jsx-a11y'); const reactPlugin = require('eslint-plugin-react'); const reactHooksPlugin = require('eslint-plugin-react-hooks'); -const griffelPlugin = require('@griffel/eslint-plugin'); const configHelpers = require('../../utils/configHelpers'); -const { fixupPluginRules } = require('@eslint/compat'); const { defineConfig } = require('eslint/config'); // eslint-disable-next-line import/no-extraneous-dependencies -- dev dependency provided by the Nx workspace @@ -16,7 +14,6 @@ module.exports = defineConfig( files: ['**/*.{jsx,tsx,ts,js}'], plugins: { react: reactPlugin, - '@griffel': fixupPluginRules(/** @type {any} */ (griffelPlugin)), 'jsx-a11y': jsxA11yPlugin, 'react-hooks': reactHooksPlugin, '@fluentui/react-components': reactComponentsPlugin, @@ -51,14 +48,6 @@ module.exports = defineConfig( message: "Avoid named imports from 'react'. Use 'import * as React from \"react\"' instead.", }, ], - /** - * griffel eslint rules - * @see https://github.com/microsoft/griffel/tree/main/packages/eslint-plugin - */ - '@griffel/hook-naming': 'error', - '@griffel/no-shorthands': 'error', - '@griffel/pseudo-element-naming': 'error', - '@griffel/styles-file': 'error', /** * react eslint rules * @see https://github.com/yannickcr/eslint-plugin-react @@ -158,8 +147,6 @@ module.exports = defineConfig( { files: ['**/*.stories.tsx'], rules: { - // allow makeStyles calls in stories as examples should be defined in a single file - '@griffel/styles-file': 'off', // allow arrow functions in stories for now (may want to change this later since using // constantly-mutating functions can be an anti-pattern which we may not want to demonstrate // in our converged components docs; it happened to be allowed starting out because .stories diff --git a/packages/eslint-plugin/src/configs/react/legacy.js b/packages/eslint-plugin/src/configs/react/legacy.js index 6b8a92f9292d09..a72da6e981b8a4 100644 --- a/packages/eslint-plugin/src/configs/react/legacy.js +++ b/packages/eslint-plugin/src/configs/react/legacy.js @@ -13,7 +13,6 @@ module.exports = defineConfig( { rules: { 'jsdoc/check-tag-names': 'off', - '@griffel/no-shorthands': 'off', 'no-restricted-globals': restrictedGlobals, ...createReactCrossVersionRules({ crossCompatTypePackage: '@fluentui/utilities', diff --git a/packages/react-components/react-storybook-addon/eslint.config.js b/packages/react-components/react-storybook-addon/eslint.config.js index d21eda3d690b2c..251e97bf164408 100644 --- a/packages/react-components/react-storybook-addon/eslint.config.js +++ b/packages/react-components/react-storybook-addon/eslint.config.js @@ -7,7 +7,6 @@ module.exports = [ { files: ['**/*.ts', '**/*.tsx'], rules: { - '@griffel/styles-file': 'off', '@fluentui/react-components/enforce-use-client': 'off', }, }, diff --git a/packages/react-components/theme-designer/eslint.config.js b/packages/react-components/theme-designer/eslint.config.js index bb043204474e5d..0da5a8297aa5c8 100644 --- a/packages/react-components/theme-designer/eslint.config.js +++ b/packages/react-components/theme-designer/eslint.config.js @@ -6,7 +6,6 @@ module.exports = [ ...rootConfig, { rules: { - '@griffel/styles-file': 'off', '@nx/workspace-no-restricted-globals': 'off', '@fluentui/react-components/enforce-use-client': 'off', 'prefer-exponentiation-operator': 'off', diff --git a/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ new file mode 100644 index 00000000000000..8de625fcedf87b --- /dev/null +++ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ @@ -0,0 +1,10 @@ +/* Styles for <%= componentName %>. Reference theme values via the Fluent CSS variables, + * e.g. `color: var(--colorNeutralForeground1);`. Rules compile into the package's + * `dist/styles.css` inside the `@layer fui.*` cascade layers, so unlayered consumer CSS + * always wins ties. */ + +.root { + /* TODO Add default styles for the root element */ +} + +/* TODO add additional classes for different states and/or slots */ diff --git a/tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__ index 56d1ec20843e24..2ebc3bc1fde9ae 100644 --- a/tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__ +++ b/tools/workspace-plugin/src/generators/react-component/files/component/use__componentName__Styles.styles.ts__tmpl__ @@ -1,24 +1,19 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; -import type { SlotClassNames } from '@fluentui/react-utilities'; -import type { <%= componentName %>Slots, <%= componentName %>State } from './<%= componentName %>.types'; +import { clsx } from 'clsx'; +import type { <%= componentName %>State } from './<%= componentName %>.types'; - -export const <%= propertyName %>ClassNames:SlotClassNames<<%= componentName %>Slots> = { - root: 'fui-<%= componentName %>' - // TODO: add class names for all slots on <%= componentName %>Slots. - // Should be of the form `: 'fui-<%= componentName %>__` -}; +import styles from './<%= componentName %>.module.css'; /** - * Styles for the root slot + * Public identity class for <%= componentName %> — the component's Tailwind named-group marker + * (DECISIONS.md D15.1 / D16.5). The only supported way to style a component's internals is the + * per-slot `className` props; `root` is retained as the component's public identity class, + * usable as a selector and as a `group-*` variant target. The `/` in the marker is legal in a + * class TOKEN but not in a class SELECTOR — use `fuiSelector(<%= propertyName %>ClassNames.root)` + * from `@fluentui/react-utilities` at every selector site. */ -const useStyles = makeStyles({ - root: { - // TODO Add default styles for the root element - }, - - // TODO add additional classes for different states and/or slots -}); +export const <%= propertyName %>ClassNames: { root: string } = { + root: 'group/fui-<%= fileName %>', +}; /** * Apply styling to the <%= componentName %> slots based on the state @@ -26,12 +21,14 @@ const useStyles = makeStyles({ export const use<%= componentName %>Styles_unstable = (state: <%= componentName %>State): <%= componentName %>State => { 'use no memo'; - const styles = useStyles(); + // Unconditional module class FIRST, then the named-group marker, then any conditional module + // classes, with the consumer className LAST (DECISIONS.md D16.2). The marker must never be + // `classList[0]` (DECISIONS.md D15.1); the unconditional `styles.root` token guarantees that. // eslint-disable-next-line react-hooks/immutability - state.root.className = mergeClasses(<%= propertyName %>ClassNames.root, styles.root, state.root.className); + state.root.className = clsx(styles.root, <%= propertyName %>ClassNames.root, state.root.className); // TODO Add class names to slots, for example: - // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className); + // state.mySlot.className = clsx(styles.mySlot, state.mySlot.className); return state; }; diff --git a/tools/workspace-plugin/src/generators/react-component/index.spec.ts b/tools/workspace-plugin/src/generators/react-component/index.spec.ts index eef80b563a54fc..673ad0188741e3 100644 --- a/tools/workspace-plugin/src/generators/react-component/index.spec.ts +++ b/tools/workspace-plugin/src/generators/react-component/index.spec.ts @@ -72,6 +72,7 @@ describe('react-component generator', () => { expect(tree.children(componentRootPath)).toMatchInlineSnapshot(` Array [ + "MyOne.module.css", "MyOne.test.tsx", "MyOne.tsx", "MyOne.types.ts", @@ -131,26 +132,22 @@ describe('react-component generator', () => { expect(tree.read(joinPathFragments(componentRootPath, 'useMyOneStyles.styles.ts'), 'utf-8')) .toMatchInlineSnapshot(` - "import { makeStyles, mergeClasses } from '@griffel/react'; - import type { SlotClassNames } from '@fluentui/react-utilities'; - import type { MyOneSlots, MyOneState } from './MyOne.types'; - - export const myOneClassNames: SlotClassNames = { - root: 'fui-MyOne', - // TODO: add class names for all slots on MyOneSlots. - // Should be of the form \`: 'fui-MyOne__\` - }; + "import { clsx } from 'clsx'; + import type { MyOneState } from './MyOne.types'; + + import styles from './MyOne.module.css'; /** - * Styles for the root slot + * Public identity class for MyOne — the component's Tailwind named-group marker + * (DECISIONS.md D15.1 / D16.5). The only supported way to style a component's internals is the + * per-slot \`className\` props; \`root\` is retained as the component's public identity class, + * usable as a selector and as a \`group-*\` variant target. The \`/\` in the marker is legal in a + * class TOKEN but not in a class SELECTOR — use \`fuiSelector(myOneClassNames.root)\` + * from \`@fluentui/react-utilities\` at every selector site. */ - const useStyles = makeStyles({ - root: { - // TODO Add default styles for the root element - }, - - // TODO add additional classes for different states and/or slots - }); + export const myOneClassNames: { root: string } = { + root: 'group/fui-my-one', + }; /** * Apply styling to the MyOne slots based on the state @@ -158,16 +155,18 @@ describe('react-component generator', () => { export const useMyOneStyles_unstable = (state: MyOneState): MyOneState => { 'use no memo'; - const styles = useStyles(); + // Unconditional module class FIRST, then the named-group marker, then any conditional module + // classes, with the consumer className LAST (DECISIONS.md D16.2). The marker must never be + // \`classList[0]\` (DECISIONS.md D15.1); the unconditional \`styles.root\` token guarantees that. // eslint-disable-next-line react-hooks/immutability - state.root.className = mergeClasses( - myOneClassNames.root, + state.root.className = clsx( styles.root, + myOneClassNames.root, state.root.className ); // TODO Add class names to slots, for example: - // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className); + // state.mySlot.className = clsx(styles.mySlot, state.mySlot.className); return state; }; diff --git a/tools/workspace-plugin/src/generators/react-library/files/jest.config.js__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/jest.config.js__tmpl__ index 5e06cc7e423dd2..e720318f7e9050 100644 --- a/tools/workspace-plugin/src/generators/react-library/files/jest.config.js__tmpl__ +++ b/tools/workspace-plugin/src/generators/react-library/files/jest.config.js__tmpl__ @@ -30,5 +30,4 @@ module.exports = { }, coverageDirectory: './coverage', setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@griffel/jest-serializer'], }; diff --git a/tools/workspace-plugin/src/generators/react-library/files/package.json__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/package.json__tmpl__ index d0ea3466ca829f..d0891323618562 100644 --- a/tools/workspace-plugin/src/generators/react-library/files/package.json__tmpl__ +++ b/tools/workspace-plugin/src/generators/react-library/files/package.json__tmpl__ @@ -23,8 +23,8 @@ "@<%= npmScope %>/react-shared-contexts": "", "@<%= npmScope %>/react-theme": "", "@<%= npmScope %>/react-utilities": "", - "@griffel/react": "", - "@swc/helpers": "" + "@swc/helpers": "", + "clsx": "" }, "peerDependencies": { "@types/react": ">=16.14.0 <19.0.0", diff --git a/tools/workspace-plugin/src/generators/react-library/files/src/testing/isConformant.ts__tmpl__ b/tools/workspace-plugin/src/generators/react-library/files/src/testing/isConformant.ts__tmpl__ index 8ed2da0f925135..e3232ae7984cdb 100644 --- a/tools/workspace-plugin/src/generators/react-library/files/src/testing/isConformant.ts__tmpl__ +++ b/tools/workspace-plugin/src/generators/react-library/files/src/testing/isConformant.ts__tmpl__ @@ -1,6 +1,5 @@ import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; -import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance'; -import griffelTests from '@fluentui/react-conformance-griffel'; +import type { IsConformantOptions } from '@fluentui/react-conformance'; export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, @@ -8,7 +7,6 @@ export function isConformant( const defaultOptions: Partial> = { tsConfig: { configName: 'tsconfig.spec.json' }, componentPath: require.main?.filename.replace('.test', ''), - extraTests: griffelTests as TestObject, }; baseIsConformant(defaultOptions, testInfo); diff --git a/tools/workspace-plugin/src/generators/react-library/index.spec.ts b/tools/workspace-plugin/src/generators/react-library/index.spec.ts index 75af512ec0a54c..7a0d4654144560 100644 --- a/tools/workspace-plugin/src/generators/react-library/index.spec.ts +++ b/tools/workspace-plugin/src/generators/react-library/index.spec.ts @@ -35,8 +35,8 @@ describe('react-library generator', () => { } catch (err) { expect(err).toMatchInlineSnapshot(` [Error: Following dependencies are not installed within your monorepo. You need to install them in root package.json as devDependencies: - - @griffel/react - - @swc/helpers] + - @swc/helpers + - clsx] `); } }); @@ -55,14 +55,14 @@ describe('react-library generator', () => { "project.json", ".babelrc.json", ".swcrc", - "LICENSE", - "README.md", "config", "docs", "eslint.config.js", "etc", "jest.config.js", + "LICENSE", "package.json", + "README.md", "src", "tsconfig.json", "tsconfig.lib.json", @@ -109,8 +109,8 @@ describe('react-library generator', () => { '@proj/react-shared-contexts': '^9.0.0', '@proj/react-theme': '^9.0.0', '@proj/react-utilities': '^9.0.0', - '@griffel/react': '^1.2.3', '@swc/helpers': '^0.4.5', + clsx: '^2.1.3', }, }), ); @@ -256,14 +256,14 @@ describe('react-library generator', () => { "project.json", ".babelrc.json", ".swcrc", - "LICENSE", - "README.md", "config", "docs", "eslint.config.js", "etc", "jest.config.js", + "LICENSE", "package.json", + "README.md", "src", "tsconfig.json", "tsconfig.lib.json", @@ -306,8 +306,8 @@ describe('react-library generator', () => { function setup(tree: Tree) { updateJson(tree, 'package.json', json => { json.devDependencies = { - '@griffel/react': '1.2.3', '@swc/helpers': '0.4.5', + clsx: '2.1.3', }; return json; }); diff --git a/yarn.lock b/yarn.lock index 11f51850ec434d..2bebb87b4bd715 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2721,8 +2721,6 @@ __metadata: version: 0.0.0-use.local resolution: "@fluentui/eslint-plugin@workspace:packages/eslint-plugin" dependencies: - "@eslint/compat": "npm:1.3.0" - "@griffel/eslint-plugin": "npm:^2.0.0" "@nx/eslint-plugin": "npm:21.6.10" "@rnx-kit/eslint-plugin": "npm:^0.8.4" "@typescript-eslint/eslint-plugin": "npm:8.46.2" @@ -2808,9 +2806,7 @@ __metadata: "@fluentui/scripts-test-ssr": "npm:*" "@fluentui/storybook-llms-extractor": "npm:*" "@griffel/babel-preset": "npm:1.5.8" - "@griffel/eslint-plugin": "npm:^2.0.0" "@griffel/jest-serializer": "npm:1.1.24" - "@griffel/react": "npm:^1.5.32" "@griffel/shadow-dom": "npm:0.2.2" "@griffel/webpack-loader": "npm:2.2.10" "@jest/reporters": "npm:30.2.0" @@ -2927,6 +2923,7 @@ __metadata: circular-dependency-plugin: "npm:5.2.2" clean-css: "npm:4.2.3" clean-webpack-plugin: "npm:4.0.0" + clsx: "npm:2.1.1" connect-history-api-fallback: "npm:1.6.0" copy-to-clipboard: "npm:3.3.1" copy-webpack-plugin: "npm:12.0.2" @@ -6770,19 +6767,6 @@ __metadata: languageName: node linkType: hard -"@griffel/eslint-plugin@npm:^2.0.0": - version: 2.0.0 - resolution: "@griffel/eslint-plugin@npm:2.0.0" - dependencies: - "@typescript-eslint/utils": "npm:^7.18.0" - csstype: "npm:^3.1.3" - tslib: "npm:^2.1.0" - peerDependencies: - eslint: ^7.5.0 || ^8.0.0 - checksum: 10c0/a56512d12c0c04a29175faf2c4e37fe5c34ed66d55652554cee1b46a7798fbf01a664bc42aa6d2b41e8893551ba458547958322c2bfcea42a4761abc7991ec71 - languageName: node - linkType: hard - "@griffel/jest-serializer@npm:1.1.24": version: 1.1.24 resolution: "@griffel/jest-serializer@npm:1.1.24" @@ -11477,16 +11461,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:7.18.0": - version: 7.18.0 - resolution: "@typescript-eslint/scope-manager@npm:7.18.0" - dependencies: - "@typescript-eslint/types": "npm:7.18.0" - "@typescript-eslint/visitor-keys": "npm:7.18.0" - checksum: 10c0/038cd58c2271de146b3a594afe2c99290034033326d57ff1f902976022c8b0138ffd3cb893ae439ae41003b5e4bcc00cabf6b244ce40e8668f9412cc96d97b8e - languageName: node - linkType: hard - "@typescript-eslint/scope-manager@npm:8.46.2": version: 8.46.2 resolution: "@typescript-eslint/scope-manager@npm:8.46.2" @@ -11541,13 +11515,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:7.18.0": - version: 7.18.0 - resolution: "@typescript-eslint/types@npm:7.18.0" - checksum: 10c0/eb7371ac55ca77db8e59ba0310b41a74523f17e06f485a0ef819491bc3dd8909bb930120ff7d30aaf54e888167e0005aa1337011f3663dc90fb19203ce478054 - languageName: node - linkType: hard - "@typescript-eslint/types@npm:8.46.2": version: 8.46.2 resolution: "@typescript-eslint/types@npm:8.46.2" @@ -11562,25 +11529,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:7.18.0": - version: 7.18.0 - resolution: "@typescript-eslint/typescript-estree@npm:7.18.0" - dependencies: - "@typescript-eslint/types": "npm:7.18.0" - "@typescript-eslint/visitor-keys": "npm:7.18.0" - debug: "npm:^4.3.4" - globby: "npm:^11.1.0" - is-glob: "npm:^4.0.3" - minimatch: "npm:^9.0.4" - semver: "npm:^7.6.0" - ts-api-utils: "npm:^1.3.0" - peerDependenciesMeta: - typescript: - optional: true - checksum: 10c0/0c7f109a2e460ec8a1524339479cf78ff17814d23c83aa5112c77fb345e87b3642616291908dcddea1e671da63686403dfb712e4a4435104f92abdfddf9aba81 - languageName: node - linkType: hard - "@typescript-eslint/typescript-estree@npm:8.46.2": version: 8.46.2 resolution: "@typescript-eslint/typescript-estree@npm:8.46.2" @@ -11650,30 +11598,6 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/utils@npm:^7.18.0": - version: 7.18.0 - resolution: "@typescript-eslint/utils@npm:7.18.0" - dependencies: - "@eslint-community/eslint-utils": "npm:^4.4.0" - "@typescript-eslint/scope-manager": "npm:7.18.0" - "@typescript-eslint/types": "npm:7.18.0" - "@typescript-eslint/typescript-estree": "npm:7.18.0" - peerDependencies: - eslint: ^8.56.0 - checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e - languageName: node - linkType: hard - -"@typescript-eslint/visitor-keys@npm:7.18.0": - version: 7.18.0 - resolution: "@typescript-eslint/visitor-keys@npm:7.18.0" - dependencies: - "@typescript-eslint/types": "npm:7.18.0" - eslint-visitor-keys: "npm:^3.4.3" - checksum: 10c0/538b645f8ff1d9debf264865c69a317074eaff0255e63d7407046176b0f6a6beba34a6c51d511f12444bae12a98c69891eb6f403c9f54c6c2e2849d1c1cb73c0 - languageName: node - linkType: hard - "@typescript-eslint/visitor-keys@npm:8.46.2": version: 8.46.2 resolution: "@typescript-eslint/visitor-keys@npm:8.46.2" @@ -14803,7 +14727,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^2.1.1": +"clsx@npm:2.1.1, clsx@npm:^2.1.1": version: 2.1.1 resolution: "clsx@npm:2.1.1" checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839 @@ -19756,7 +19680,7 @@ __metadata: languageName: node linkType: hard -"globby@npm:11.1.0, globby@npm:^11.0.0, globby@npm:^11.0.1, globby@npm:^11.1.0": +"globby@npm:11.1.0, globby@npm:^11.0.0, globby@npm:^11.0.1": version: 11.1.0 resolution: "globby@npm:11.1.0" dependencies: @@ -31015,15 +30939,6 @@ __metadata: languageName: node linkType: hard -"ts-api-utils@npm:^1.3.0": - version: 1.3.0 - resolution: "ts-api-utils@npm:1.3.0" - peerDependencies: - typescript: ">=4.2.0" - checksum: 10c0/f54a0ba9ed56ce66baea90a3fa087a484002e807f28a8ccb2d070c75e76bde64bd0f6dce98b3802834156306050871b67eec325cb4e918015a360a3f0868c77c - languageName: node - linkType: hard - "ts-api-utils@npm:^2.1.0, ts-api-utils@npm:^2.4.0": version: 2.5.0 resolution: "ts-api-utils@npm:2.5.0" From 5dc6131ea3874cc519d179110f53e6655eaa0563 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:51:22 -0700 Subject: [PATCH 515/640] docs(react-image): teach CSS instead of Griffel makeStyles in MIGRATION.md (S-H) The three makeStyles fences (shouldFadeIn, shouldStartVisible, v8 styles customization) and the make-styles prose now show plain CSS / CSS Modules - the umbrella no longer re-exports Griffel (D19). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../react-image/library/docs/MIGRATION.md | 90 +++++++++---------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/packages/react-components/react-image/library/docs/MIGRATION.md b/packages/react-components/react-image/library/docs/MIGRATION.md index 8914fd88cc14a0..d4c582ccb68e2a 100644 --- a/packages/react-components/react-image/library/docs/MIGRATION.md +++ b/packages/react-components/react-image/library/docs/MIGRATION.md @@ -70,63 +70,64 @@ For v9, this feature is no longer supported. The alternative would be to use the ### shouldFadeIn -For v9, this feature is no longer supported. The alternative is to apply the animation through `make-styles` and using the global event `onLoad`. Below is an example of a migration: +For v9, this feature is no longer supported. The alternative is to apply the animation with your own CSS and the global event `onLoad`. Below is an example of a migration: + +```css +/* MyComponent.module.css */ +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.fadeIn400 { + animation-name: fade-in; + animation-iteration-count: infinite; + animation-duration: 0.367s; +} +``` ```jsx import { useState } from 'react'; import { Image } from '@fluentui/react-image'; -import { makeStyles } from '@griffel/react'; - -const useStyles = makeStyles(theme => ({ - fadeIn400: { - animationName: { - from : { - opacity: 0, - }, - to: { - opacity: 1, - } - }, - animationIterationCount: 'infinite', - animationDuration: '0.367s', - }, -}) +import styles from './MyComponent.module.css'; const MyComponent = () => { - const [isLoaded, setLoaded] = useState(false); - const styles = useStyles() + const [isLoaded, setLoaded] = useState(false); - return setLoaded(true)} className={!isLoaded? styles.fadeIn400 : ''} /> -} + return setLoaded(true)} className={!isLoaded ? styles.fadeIn400 : ''} />; +}; ``` ### shouldStartVisible For v9, this feature is no longer supported. The alternative would be to use the global events such as: `onLoad` and `onError` to achieve the same behaviour. Below is an example showcasing this: +```css +/* App.module.css */ +.hidden { + display: none; +} +``` + ```jsx import { useState } from 'react'; -import { makeStyles } from '@griffel/react'; import { Image } from '@fluentui/react-image'; - -const useStyles = makeStyles({ - root: { - display: 'none', - }, -}); +import styles from './App.module.css'; export default function App() { const [isLoaded, setLoaded] = useState(null); - const styles = useStyles(); - return ( Example image setLoaded(true)} onError={() => setLoaded(false)} - className={isLoaded === false ? styles.root : ''} + className={isLoaded === false ? styles.hidden : ''} /> ); } @@ -134,11 +135,11 @@ export default function App() { ### styles -For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop. +For v9, you should do style customizations with your own CSS through the `className` prop. ### theme -For v9, you should use `tokens` in conjunction with `make-styles` and `FluentProvider` to achieve theming correctly. +For v9, you should reference the theme's CSS variables (e.g. `var(--colorNeutralForeground1)`) in your CSS, with `FluentProvider` supplying the token values. ## Migration from v0 @@ -208,7 +209,7 @@ This prop has been renamed to `block` which will result into the same behaviour ### styles -For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop. +For v9, you should do style customizations with your own CSS through the `className` prop. ### variables @@ -224,19 +225,18 @@ const MyComponent = () => { #### v9 implementation +```css +/* MyComponent.module.css */ +.width100 { + width: 100px; +} +``` + ```jsx import { Image } from '@fluentui/react-image'; -import { makeStyles } from '@griffel/react'; - -const useStyles = makeStyles(theme => ({ - width100: { - width: '100px' - }, -}) +import styles from './MyComponent.module.css'; const MyComponent = () => { - const styles = useStyles() - - return -} + return ; +}; ``` From 9f2746236674b08c248da72d40c7dc23f6265712 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 02:52:25 -0700 Subject: [PATCH 516/640] chore: drop six stale @griffel/react manifest entries (S-H) public-docsite-v9, component-selector-preview, react-button, react-colorpicker-compat, react-icons-compat, react-utilities-compat all carry zero @griffel imports after the migration; the dependency entries were leftovers. vr-tests-react-components keeps its entry - the three D11 survivor MakeStyles/CustomStyleHooks stories still import @griffel/react. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- apps/public-docsite-v9/package.json | 1 - .../component-selector-preview/library/package.json | 1 - packages/react-components/react-button/library/package.json | 1 - .../react-components/react-colorpicker-compat/package.json | 1 - .../react-icons-compat/library/package.json | 1 - .../react-utilities-compat/library/package.json | 1 - yarn.lock | 6 ------ 7 files changed, 12 deletions(-) diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index 407a6a066623ae..08f05720fb0d88 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -38,7 +38,6 @@ "@fluentui/react-timepicker-compat": "*", "@fluentui/recipes": "*", "@fluentui/theme-designer": "*", - "@griffel/react": "^1.5.32", "@microsoft/applicationinsights-web": "^3.4.3", "react": "19.2.0", "react-dom": "19.2.0", diff --git a/packages/react-components/component-selector-preview/library/package.json b/packages/react-components/component-selector-preview/library/package.json index 8b5253adfe76b9..340dc136505306 100644 --- a/packages/react-components/component-selector-preview/library/package.json +++ b/packages/react-components/component-selector-preview/library/package.json @@ -23,7 +23,6 @@ "@fluentui/react-shared-contexts": "^9.26.2", "@fluentui/react-theme": "^9.2.1", "@fluentui/react-utilities": "^9.26.5", - "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1" }, "peerDependencies": { diff --git a/packages/react-components/react-button/library/package.json b/packages/react-components/react-button/library/package.json index 382cdb270f0cc3..bed08c9fdb4ac7 100644 --- a/packages/react-components/react-button/library/package.json +++ b/packages/react-components/react-button/library/package.json @@ -22,7 +22,6 @@ "@fluentui/react-tabster": "^9.26.16", "@fluentui/react-theme": "^9.2.1", "@fluentui/react-utilities": "^9.26.5", - "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1", "clsx": "^2.1.1" }, diff --git a/packages/react-components/react-colorpicker-compat/package.json b/packages/react-components/react-colorpicker-compat/package.json index 7c2cdf57d58030..c094df4766c8c4 100644 --- a/packages/react-components/react-colorpicker-compat/package.json +++ b/packages/react-components/react-colorpicker-compat/package.json @@ -16,7 +16,6 @@ "@fluentui/react-jsx-runtime": "^9.4.4", "@fluentui/react-theme": "^9.2.1", "@fluentui/react-utilities": "^9.26.5", - "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1" }, "peerDependencies": { diff --git a/packages/react-components/react-icons-compat/library/package.json b/packages/react-components/react-icons-compat/library/package.json index 8f938ddf25cc8f..1f86326b62029a 100644 --- a/packages/react-components/react-icons-compat/library/package.json +++ b/packages/react-components/react-icons-compat/library/package.json @@ -22,7 +22,6 @@ "@fluentui/react-shared-contexts": "^9.26.2", "@fluentui/react-theme": "^9.2.1", "@fluentui/react-utilities": "^9.26.5", - "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1" }, "peerDependencies": { diff --git a/packages/react-components/react-utilities-compat/library/package.json b/packages/react-components/react-utilities-compat/library/package.json index 4fa5667c3563e6..f23a5b0662ff19 100644 --- a/packages/react-components/react-utilities-compat/library/package.json +++ b/packages/react-components/react-utilities-compat/library/package.json @@ -23,7 +23,6 @@ "@fluentui/react-shared-contexts": "^9.26.2", "@fluentui/react-theme": "^9.2.1", "@fluentui/react-utilities": "^9.26.5", - "@griffel/react": "^1.5.32", "@swc/helpers": "^0.5.1" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 2bebb87b4bd715..575e4cfabba246 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2659,7 +2659,6 @@ __metadata: "@fluentui/react-shared-contexts": "npm:^9.26.2" "@fluentui/react-theme": "npm:^9.2.1" "@fluentui/react-utilities": "npm:^9.26.5" - "@griffel/react": "npm:^1.5.32" "@swc/helpers": "npm:^0.5.1" peerDependencies: "@types/react": ">=16.14.0 <20.0.0" @@ -3274,7 +3273,6 @@ __metadata: "@fluentui/react-timepicker-compat": "npm:*" "@fluentui/recipes": "npm:*" "@fluentui/theme-designer": "npm:*" - "@griffel/react": "npm:^1.5.32" "@microsoft/applicationinsights-web": "npm:^3.4.3" react: "npm:19.2.0" react-dom: "npm:19.2.0" @@ -3520,7 +3518,6 @@ __metadata: "@fluentui/react-tailwind-theme": "workspace:*" "@fluentui/react-theme": "npm:^9.2.1" "@fluentui/react-utilities": "npm:^9.26.5" - "@griffel/react": "npm:^1.5.32" "@swc/helpers": "npm:^0.5.1" clsx: "npm:^2.1.1" peerDependencies: @@ -3802,7 +3799,6 @@ __metadata: "@fluentui/react-jsx-runtime": "npm:^9.4.4" "@fluentui/react-theme": "npm:^9.2.1" "@fluentui/react-utilities": "npm:^9.26.5" - "@griffel/react": "npm:^1.5.32" "@swc/helpers": "npm:^0.5.1" peerDependencies: "@types/react": ">=16.14.0 <20.0.0" @@ -4423,7 +4419,6 @@ __metadata: "@fluentui/react-shared-contexts": "npm:^9.26.2" "@fluentui/react-theme": "npm:^9.2.1" "@fluentui/react-utilities": "npm:^9.26.5" - "@griffel/react": "npm:^1.5.32" "@swc/helpers": "npm:^0.5.1" peerDependencies: "@types/react": ">=16.8.0 <20.0.0" @@ -6014,7 +6009,6 @@ __metadata: "@fluentui/react-shared-contexts": "npm:^9.26.2" "@fluentui/react-theme": "npm:^9.2.1" "@fluentui/react-utilities": "npm:^9.26.5" - "@griffel/react": "npm:^1.5.32" "@swc/helpers": "npm:^0.5.1" peerDependencies: "@types/react": ">=16.14.0 <20.0.0" From 091bde5526a227cf2a9ab48053f00f05b0afd012 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Fri, 31 Jul 2026 04:14:08 -0700 Subject: [PATCH 517/640] =?UTF-8?q?docs(migration):=20S-H=20closed=20?= =?UTF-8?q?=E2=80=94=20the=20break=20record,=20D19/D23=20recorded,=20ledge?= =?UTF-8?q?r=20note?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Umbrella Griffel re-exports + wyw-in-js + dep removed (D19); migration mixins retired with stories/docs (D19); react-conformance-griffel retired to deprecated/ (D23); tooling purged. Gates: vNext build 91 projects green, jest affected sweep green minus pre-existing Windows-env suites, SSR green, docsite build-storybook green, VR spot 4/4 zero-diff, Griffel-zero grep asserted (survivors: deprecated/ + D11 stories, all listed with reasons). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- migration/griffel-to-tailwind/ledger.json | 7 + .../griffel-to-tailwind/reports/DECISIONS.md | 38 ++++ .../reports/sh-the-break.md | 170 ++++++++++++++++++ 3 files changed, 215 insertions(+) create mode 100644 migration/griffel-to-tailwind/reports/sh-the-break.md diff --git a/migration/griffel-to-tailwind/ledger.json b/migration/griffel-to-tailwind/ledger.json index 6632d48cbf59f3..40953898390e77 100644 --- a/migration/griffel-to-tailwind/ledger.json +++ b/migration/griffel-to-tailwind/ledger.json @@ -633,5 +633,12 @@ "deferred": "umbrella 12 Griffel re-exports + 3 types + wyw-in-js + dep (D19/S-H); react-conformance-griffel (D23/S-H); babel preset/eslint rules/root devDeps (S-H); react-migration-v0-v9 mixins (triage disposition); jest.preset.js griffel serializer + remaining entries (S-I); provenance comments (S-I)", "report": "reports/sg-core-specials.md", "decisions": "DECISIONS.md D20 (D20.1-D20.3)" + }, + "shTheBreak": { + "date": "2026-07-31", + "scope": "griffel-zero S-H: the break — umbrella Griffel re-export removal (D19), react-migration-v0-v9 mixins retirement (D19), react-conformance-griffel retirement + move to deprecated/ (D23), Griffel tooling purge (eslint plugin/rules, generator templates, root devDeps), last live Griffel imports converted (Menu.cy, useActiveDescendant.cy, Dialog.test, useButton.test, headless Introduction), 6 stale @griffel/react manifest entries dropped", + "result": "umbrella api.md delta = exactly 12 runtime + 3 type Griffel symbols; wyw-in-js block + @griffel/react dep gone. Mixins (flexItem/grid/input/slider/spinner/v0Icon/v9*) deleted with demo stories; FromV0 + react-image docs teach plain CSS. conformance-griffel: 55 wrappers unwired, ~190 disabledTests entries dropped, package under deprecated/ with eol tag + beachball freeze. Generators scaffold clsx+CSS Modules. Kept with consumers: @griffel/babel-preset (deprecated AOT), jest-serializer (S-I), shadow-dom + webpack-loader (D11 survivors). Gates: vNext build 91 projects green; jest affected 158-project sweep green except pre-existing Windows-env suites (identical failure identities in pre-S-H H*-affected-tests logs; v8 spawn-jest-ENOENT class included); SSR full run green; public-docsite-v9:build-storybook green (INFRA-1c no longer reproduces); VR spot 4/4 sets zero-diff on fresh --skip-nx-cache build (button 129 / button-family 342 / menu 64 / react-portal 2). Griffel-zero grep: zero live @griffel/* imports outside deprecated/ + D11 survivors (sh-the-break.md §5)", + "deferred": "S-I sweep: ~216 provenance comments, @griffel/jest-serializer entries (~59 jest configs), migrate-converged-pkg conditional Griffel logic, RFC/handbook docs. S-J: D2a5 retirement (icons workstream). D11 revisit: survivor VR stories + shadow-dom/webpack-loader devDeps + vr-tests @griffel/react.", + "report": "reports/sh-the-break.md" } } diff --git a/migration/griffel-to-tailwind/reports/DECISIONS.md b/migration/griffel-to-tailwind/reports/DECISIONS.md index 344249e641c4ac..997362a5e29f52 100644 --- a/migration/griffel-to-tailwind/reports/DECISIONS.md +++ b/migration/griffel-to-tailwind/reports/DECISIONS.md @@ -1209,3 +1209,41 @@ etc. re-exports (D7 surface, 12 symbols + 3 types + `wyw-in-js` block) remain un are S-H scope (D19). The tabster focus-ring factories and their umbrella re-exports were deleted in S-G (evaluation §8 places them there) — that is the only umbrella surface S-G touches. + +## D19 + D23 — the break, implemented (S-H, 2026-07-31) + +The griffel-zero plan's decision table resolved both; this records the implemented shape +(full record: `reports/sh-the-break.md`). + +### D19 — umbrella Griffel re-exports removed + +`@fluentui/react-components` drops the 12 `@griffel/react` runtime re-exports (`__css`, +`__resetCSS`, `__resetStyles`, `__styles`, `createDOMRenderer`, `makeResetStyles`, +`makeStaticStyles`, `makeStyles`, `mergeClasses`, `RendererProvider`, +`renderToStyleElements`, `shorthands`), the 3 types (`GriffelStyle`, `GriffelRenderer`, +`GriffelResetStyle`), the `wyw-in-js.tags` block, and the `@griffel/react` dependency — +**breaking**, same major as D16. No `griffel-compat` entrypoint was shipped (the plan's +"optional" variant): with S-F/S-G done there were zero in-repo consumers left, and a compat +entrypoint would keep the dependency the removal exists to drop. The react-migration-v0-v9 +Griffel mixins (the one published API built ON the re-exports) retire with it, per the +disposition recorded in sf-batch1/sf-batch4; their demo stories are deleted and the FromV0 +guides now teach the equivalent plain CSS. + +### D23 — react-conformance-griffel retired + +`griffelTests` unwired from all 55 non-deprecated `isConformant` wrappers and the +`make-styles-overrides-win` `disabledTests` entries dropped (~190 test files); +`classname-overrides-win` (D9) is the replacement. The package moved to +`packages/react-components/deprecated/` per the react-alert precedent (`eol` tag, beachball +freeze `major/minor/patch`, DEPRECATED readme) — published history untouched; the two +deprecated Griffel packages keep consuming it. Generators no longer scaffold it (or any +Griffel): react-component emits clsx + CSS Modules, react-library emits no `@griffel/react` +dep / serializer / griffel conformance wrapper. + +### Toolchain end-state + +`@griffel/eslint-plugin` (+ 4 rules) and root `@griffel/react` are gone. Deliberately kept, +each with a live consumer: `@griffel/babel-preset` (deprecated/ AOT via preset-v9), +`@griffel/jest-serializer` (S-I sweep), `@griffel/shadow-dom` + `@griffel/webpack-loader` +(D11 survivor VR stories + storybook `griffelRule`). Griffel-zero grep assertion: zero live +`@griffel/*` imports outside `deprecated/` and the D11 survivors (sh-the-break.md §5). diff --git a/migration/griffel-to-tailwind/reports/sh-the-break.md b/migration/griffel-to-tailwind/reports/sh-the-break.md new file mode 100644 index 00000000000000..d9bf27c9c972cf --- /dev/null +++ b/migration/griffel-to-tailwind/reports/sh-the-break.md @@ -0,0 +1,170 @@ +# S-H — The Break (umbrella Griffel removal) + +**Date:** 2026-07-31 · **Branch:** `styling/tailwind-css-modules` · **Decisions:** D16 (major framing), D19 (umbrella removal), D23 (conformance-griffel retirement), D20.3 (S-G/S-H boundary) + +This is the major-version break record: the umbrella stops advertising Griffel, the Griffel +conformance package retires, the migration mixins retire, and the toolchain drops every Griffel +piece that no longer has a consumer. After S-H the only Griffel left in the repo is the +deliberately-frozen `deprecated/` folder and the D11 survivor VR stories. + +## 1. Removed public surface + +### 1.1 `@fluentui/react-components` (the umbrella) — D19 + +Removed from `src/index.ts` (verified against `etc/react-components.api.md` regeneration — the +api.md delta is exactly these 15 symbols): + +- **12 runtime re-exports** from `@griffel/react`: `__css`, `__resetCSS`, `__resetStyles`, + `__styles`, `createDOMRenderer`, `makeResetStyles`, `makeStaticStyles`, `makeStyles`, + `mergeClasses`, `RendererProvider`, `renderToStyleElements`, `shorthands` +- **3 type re-exports**: `GriffelStyle`, `GriffelRenderer`, `GriffelResetStyle` +- **`package.json`**: the `wyw-in-js.tags` block (`makeStyles`/`makeResetStyles` → + `@griffel/tag-processor`) and the `@griffel/react` dependency + +The `/unstable` entrypoint re-exported nothing from Griffel (verified); its api.md is unchanged. +This drops `@griffel/core` from every v9 consumer's first-order install and kills the downstream +Griffel AOT advertisement. Consumers still authoring Griffel styles must depend on +`@griffel/react` directly. + +### 1.2 `@fluentui/react-migration-v0-v9` — mixins retirement (D19) + +Disposition recorded in sf-batch1/sf-batch4: "the mixins retire with the migration package in +S-H (D19)". Removed (api.md delta is exactly these): + +- `flexItem` (align/size/grow/shrink/pushRow/pushColumn), `grid` (columns/rows), + `input` (error/errorIndicator/fluid/successIndicator), `slider` (fluid), + `spinner` (v0Inline/v0SpinnerLabelStyle), and the button mixins `v0Icon`, `v9CustomSizeIcon`, + `v9DisabledCursor`, `v9HoverClasses`, `v9Icon` — 6 `*.mixins.ts` files + tests; the + mixin-only component folders (`Button/`, `Input/`, `Slider/`, `Spinner/`) are gone entirely. +- Mixin-demo stories deleted: `Migration Shims/V0/{ButtonMixins,InputMixins,SliderMixin,SpinnerMixins}` + and FlexShim's two `FlexItem*` mixin-comparison stories (**deviation, recorded**: FlexShim's + `Default` story is kept — the `Flex` shim component itself survives and would otherwise lose + its only story). +- FromV0 docsite guides rewritten to plain CSS (not deleted — they document surviving shim + components; only the mixin teaching retired): `Button.mdx` (both icon-integration fences + + mixin link), `FlexItem.mdx` (full prop table now maps to flexbox declarations), + `Grid.mdx`, `Flex.mdx`, `Slider.mdx`, `Loader.mdx`, `migrate-styles.mdx` note updated to + past tense. +- `docs/MIGRATION.md` in react-image: 3 `makeStyles`-from-`@griffel/react` fences → CSS Modules. + +### 1.3 `@fluentui/react-conformance-griffel` — retired (D23) + +- `griffelTests` unwired from all **55** non-deprecated `src/testing/isConformant.ts` wrappers + (the two `deprecated/` wrappers — react-alert, react-infobutton — keep it deliberately). +- `'make-styles-overrides-win'` dropped from `disabledTests` in **~190** component test files + (35 of them lost the now-empty `disabledTests` property). The explanatory migration comments + stay for the S-I provenance sweep. `classname-overrides-win` (D9) remains the cascade-native + replacement; its jsdoc/suggestion text no longer references the retired test. +- Package moved to `packages/react-components/deprecated/react-conformance-griffel` + (react-alert precedent): `eol` nx tag, beachball `disallowedChangeTypes` + `["major","minor","patch"]` freeze, `## DEPRECATED` README note, api-extractor + `mainEntryPointFilePath` override for the deeper folder. Published history untouched. +- References repointed: `tsconfig.base.json` / `tsconfig.base.all.json` path entries, + `.github/CODEOWNERS`, `scripts/beachball/src/config.test.ts` (tools scope), + `scripts/generators/src/create-package` node reference package → `@fluentui/react-conformance`. + +## 2. Tooling purged (and what deliberately stays) + +Removed: + +- **eslint**: `@griffel/eslint-plugin` + its 4 rules (`hook-naming`, `no-shorthands`, + `pseudo-element-naming`, `styles-file`) from `packages/eslint-plugin` shared react config, + legacy config, and the 4 per-app `styles-file: off` overrides (vr-tests, perf-test, + react-storybook-addon, theme-designer). `@eslint/compat` dropped with its only usage + (`fixupPluginRules` wrapped the Griffel plugin). Deprecated packages keep linting through the + shared config — the removed rules were advisory-only for them. +- **Generators**: `react-component` now scaffolds clsx + CSS Modules (`*.module.css` template, + `group/fui-` marker per D15.1/D16.5, clsx compose order per D16.2); `react-library` no + longer emits the `@griffel/react` dependency, the `@griffel/jest-serializer` + `snapshotSerializers` line (the repo `jest.preset.js` already ships the css-modules + serializer), or the conformance-griffel wrapper. Specs updated. This closes the S-A "new + packages are scaffolded onto Griffel" defect, which had survived to S-H. +- **Root devDeps**: `@griffel/eslint-plugin`, `@griffel/react` (every remaining importer has its + own manifest entry); `clsx` added (generator version-fill source). +- **Stale package deps**: `@griffel/react` removed from 6 manifests whose sources are + Griffel-free (public-docsite-v9, component-selector-preview, react-button, + react-colorpicker-compat, react-icons-compat, react-utilities-compat) and from react-menu + (its `Menu.cy.tsx` — the last consumer — was converted). + +Kept, each with a verified consumer: + +| root devDep | consumer | retires with | +| -------------------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | +| `@griffel/babel-preset` | `scripts-babel/preset-v9` → the build executor's per-package AOT gate, live only for `deprecated/` packages | the deprecated packages (executor TODO already tracks it) | +| `@griffel/jest-serializer` | ~59 per-package jest configs | S-I sweep | +| `@griffel/shadow-dom` | `vr-tests` ShadowDOM utils (D11 survivor) | D11 revisit | +| `@griffel/webpack-loader` | `scripts/storybook/rules.js` `griffelRule` | D11 revisit | + +The vr-tests `griffelRule` **stays**: the 3 D11 survivor stories (`MakeStyles`, +`MakeStylesPseudo`, `CustomStyleHooks`) and the ShadowDOM stories still exist (checked — not +deleted by the user), so the storybook webpack config still needs to compile Griffel imports. +`scripts/storybook/custom-loader.js`'s `'@griffel'` preset exclusion likewise stays (deprecated +packages' stories still flow through it). `migrate-converged-pkg`'s conditional Griffel logic +(serializer/babelrc emission keyed on a package having `@griffel/react`) is inert post-break and +left for S-I. + +## 3. Last live Griffel imports converted + +- `react-menu` `Menu.cy.tsx` — DebugPointer `makeStyles` → plain class + ` + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+`; + +const { chromium } = require_('playwright'); +const browser = await chromium.launch(); +const page = await browser.newPage(); +await page.setContent(PAGE); + +/** @param {string} id @param {string} prop */ +const computed = (id, prop) => + page.evaluate( + ([i, p]) => getComputedStyle(/** @type {Element} */ (document.getElementById(i))).getPropertyValue(p), + [id, prop], + ); + +let failures = 0; +/** @param {string} label @param {unknown} actual @param {unknown} expected */ +function assertEq(label, actual, expected) { + const ok = actual === expected; + console.log(`${ok ? 'PASS' : 'FAIL'}: ${label} — got \`${actual}\`${ok ? '' : ` expected \`${expected}\``}`); + if (!ok) failures++; +} + +// E. Default arithmetic — canonical px at a 16px root. +assertEq('default: .p-12 padding-top', await computed('numeric', 'padding-top'), '12px'); +assertEq('default: .p-horizontal-m padding-top', await computed('named', 'padding-top'), '12px'); + +// B. Canonical reads at :root scope (no FluentProvider on this page) — the exact strings +// the repointed tokens.* constants carry, plus the private hook and the utility form. +assertEq('tokens.*: var(--spacing-horizontal-m) padding-top', await computed('tokens-spacing', 'padding-top'), '12px'); +assertEq( + 'tokens.*: var(--stroke-width-thin) border-top-width', + await computed('tokens-stroke', 'border-top-width'), + '1px', +); +assertEq('hook: var(--spacing-thin) border-top-width', await computed('hook-stroke', 'border-top-width'), '1px'); +assertEq('utility: .w-thin width', await computed('util-stroke', 'width'), '1px'); + +// D. Old names are gone — unresolved var() → padding falls to its 0 initial; the +// old-name border must NOT compute to the canonical 1px. +assertEq('removed: var(--spacingHorizontalM) padding-top', await computed('old-spacing', 'padding-top'), '0px'); +const oldStroke = await computed('old-stroke', 'border-top-width'); +{ + const ok = oldStroke !== '1px'; + console.log( + `${ok ? 'PASS' : 'FAIL'}: removed: var(--strokeWidthThin) border-top-width does not resolve — got \`${oldStroke}\``, + ); + if (!ok) failures++; +} + +// A. Density knob — subtree --spacing override doubles BOTH forms identically. +assertEq('dense: .p-12 padding-top', await computed('dense-numeric', 'padding-top'), '24px'); +assertEq('dense: .p-horizontal-m padding-top', await computed('dense-named', 'padding-top'), '24px'); +assertEq( + 'dense: numeric === named response', + await computed('dense-numeric', 'padding-top'), + await computed('dense-named', 'padding-top'), +); +assertEq('dense: .p-24 padding-top', await computed('dense-numeric-24', 'padding-top'), '48px'); +assertEq('dense: .p-horizontal-xxl padding-top', await computed('dense-named-xxl', 'padding-top'), '48px'); + +// C. Stroke decoupling — the SAME subtree override must NOT thin/thicken borders. +assertEq( + 'dense: var(--stroke-width-thin) border-top-width unchanged', + await computed('dense-stroke', 'border-top-width'), + '1px', +); +assertEq( + 'dense: var(--spacing-thin) border-top-width unchanged', + await computed('dense-hook', 'border-top-width'), + '1px', +); + +await browser.close(); +console.log(failures === 0 ? '[probe-spacing-behavior] ALL PASS' : `[probe-spacing-behavior] ${failures} FAILURES`); +process.exit(failures === 0 ? 0 : 1); diff --git a/packages/tokens/src/tokens.test.ts b/packages/tokens/src/tokens.test.ts index 1783cf21ec1146..20a155dc43d4f8 100644 --- a/packages/tokens/src/tokens.test.ts +++ b/packages/tokens/src/tokens.test.ts @@ -1,13 +1,65 @@ import type { Theme } from './types'; import { tokens } from './tokens'; +/** + * Theming Phase 1 (option B, settled 2026-07-29): the 22 spacing tokens and the 4 + * strokeWidth tokens are the READ path for the CANONICAL kebab-case variables emitted by + * @fluentui/react-tailwind-theme (`--spacing-horizontal-m`, `--stroke-width-thin`, …). + * The old camelCase CSS variables no longer exist in emitted CSS, so these 26 entries + * deliberately do NOT follow the `var(--)` convention the rest of the token + * set uses. This map IS the contract — a change here must be coordinated with + * packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js, which + * asserts the same lockstep from the other side. + */ +const canonicalVariableTokens: Partial> = { + strokeWidthThin: 'var(--stroke-width-thin)', + strokeWidthThick: 'var(--stroke-width-thick)', + strokeWidthThicker: 'var(--stroke-width-thicker)', + strokeWidthThickest: 'var(--stroke-width-thickest)', + spacingHorizontalNone: 'var(--spacing-horizontal-none)', + spacingHorizontalXXS: 'var(--spacing-horizontal-xxs)', + spacingHorizontalXS: 'var(--spacing-horizontal-xs)', + spacingHorizontalSNudge: 'var(--spacing-horizontal-s-nudge)', + spacingHorizontalS: 'var(--spacing-horizontal-s)', + spacingHorizontalMNudge: 'var(--spacing-horizontal-m-nudge)', + spacingHorizontalM: 'var(--spacing-horizontal-m)', + spacingHorizontalL: 'var(--spacing-horizontal-l)', + spacingHorizontalXL: 'var(--spacing-horizontal-xl)', + spacingHorizontalXXL: 'var(--spacing-horizontal-xxl)', + spacingHorizontalXXXL: 'var(--spacing-horizontal-xxxl)', + spacingVerticalNone: 'var(--spacing-vertical-none)', + spacingVerticalXXS: 'var(--spacing-vertical-xxs)', + spacingVerticalXS: 'var(--spacing-vertical-xs)', + spacingVerticalSNudge: 'var(--spacing-vertical-s-nudge)', + spacingVerticalS: 'var(--spacing-vertical-s)', + spacingVerticalMNudge: 'var(--spacing-vertical-m-nudge)', + spacingVerticalM: 'var(--spacing-vertical-m)', + spacingVerticalL: 'var(--spacing-vertical-l)', + spacingVerticalXL: 'var(--spacing-vertical-xl)', + spacingVerticalXXL: 'var(--spacing-vertical-xxl)', + spacingVerticalXXXL: 'var(--spacing-vertical-xxxl)', +}; + describe('tokens', () => { it('CSS variables match expected format', () => { (Object.keys(tokens) as (keyof Theme)[]).forEach(token => { + if (token in canonicalVariableTokens) { + return; // covered by the exact-string test below + } const tokenValue = tokens[token]; const tokenRegex = new RegExp(`var\\(--${token}(, .+)?\\)`); expect(tokenValue).toMatch(tokenRegex); }); }); + + it('spacing and strokeWidth tokens reference the canonical kebab-case variables (theming Phase 1)', () => { + (Object.keys(canonicalVariableTokens) as (keyof Theme)[]).forEach(token => { + expect(tokens[token]).toBe(canonicalVariableTokens[token]); + }); + // No entry may reference an old camelCase spacing/stroke variable. + (Object.keys(tokens) as (keyof Theme)[]).forEach(token => { + expect(tokens[token]).not.toMatch(/var\(--(spacingHorizontal|spacingVertical|strokeWidth)[A-Z]/); + }); + }); }); diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts index 7d557ff4e25d8e..5201ed53567c7b 100644 --- a/packages/tokens/src/tokens.ts +++ b/packages/tokens/src/tokens.ts @@ -511,36 +511,47 @@ export const tokens: Record = { shadow28Brand: 'var(--shadow28Brand)', shadow64Brand: 'var(--shadow64Brand)', - // Stroke width tokens - strokeWidthThin: 'var(--strokeWidthThin)', - strokeWidthThick: 'var(--strokeWidthThick)', - strokeWidthThicker: 'var(--strokeWidthThicker)', - strokeWidthThickest: 'var(--strokeWidthThickest)', - - // Spacings - spacingHorizontalNone: 'var(--spacingHorizontalNone)', - spacingHorizontalXXS: 'var(--spacingHorizontalXXS)', - spacingHorizontalXS: 'var(--spacingHorizontalXS)', - spacingHorizontalSNudge: 'var(--spacingHorizontalSNudge)', - spacingHorizontalS: 'var(--spacingHorizontalS)', - spacingHorizontalMNudge: 'var(--spacingHorizontalMNudge)', - spacingHorizontalM: 'var(--spacingHorizontalM)', - spacingHorizontalL: 'var(--spacingHorizontalL)', - spacingHorizontalXL: 'var(--spacingHorizontalXL)', - spacingHorizontalXXL: 'var(--spacingHorizontalXXL)', - spacingHorizontalXXXL: 'var(--spacingHorizontalXXXL)', - - spacingVerticalNone: 'var(--spacingVerticalNone)', - spacingVerticalXXS: 'var(--spacingVerticalXXS)', - spacingVerticalXS: 'var(--spacingVerticalXS)', - spacingVerticalSNudge: 'var(--spacingVerticalSNudge)', - spacingVerticalS: 'var(--spacingVerticalS)', - spacingVerticalMNudge: 'var(--spacingVerticalMNudge)', - spacingVerticalM: 'var(--spacingVerticalM)', - spacingVerticalL: 'var(--spacingVerticalL)', - spacingVerticalXL: 'var(--spacingVerticalXL)', - spacingVerticalXXL: 'var(--spacingVerticalXXL)', - spacingVerticalXXXL: 'var(--spacingVerticalXXXL)', + // Stroke width tokens. + // + // THEMING PHASE 1 (settled with user 2026-07-29, option B): these JS constants are the + // READ path for stroke widths and reference the CANONICAL kebab-case variables emitted + // by @fluentui/react-tailwind-theme at `:root, :host` (--stroke-width-* — literal + // base-scale values, deliberately NOT coupled to the --spacing density knob). The old + // camelCase CSS variables (--strokeWidthThin, ...) no longer exist in emitted CSS. + strokeWidthThin: 'var(--stroke-width-thin)', + strokeWidthThick: 'var(--stroke-width-thick)', + strokeWidthThicker: 'var(--stroke-width-thicker)', + strokeWidthThickest: 'var(--stroke-width-thickest)', + + // Spacings. + // + // THEMING PHASE 1: same as stroke widths — these reference the canonical + // --spacing-horizontal-* / --spacing-vertical-* variables (numeric-axis aliases, + // calc(var(--spacing) * N)) emitted by the theme artifact; the old camelCase CSS + // variables (--spacingHorizontalM, ...) no longer exist in emitted CSS. + spacingHorizontalNone: 'var(--spacing-horizontal-none)', + spacingHorizontalXXS: 'var(--spacing-horizontal-xxs)', + spacingHorizontalXS: 'var(--spacing-horizontal-xs)', + spacingHorizontalSNudge: 'var(--spacing-horizontal-s-nudge)', + spacingHorizontalS: 'var(--spacing-horizontal-s)', + spacingHorizontalMNudge: 'var(--spacing-horizontal-m-nudge)', + spacingHorizontalM: 'var(--spacing-horizontal-m)', + spacingHorizontalL: 'var(--spacing-horizontal-l)', + spacingHorizontalXL: 'var(--spacing-horizontal-xl)', + spacingHorizontalXXL: 'var(--spacing-horizontal-xxl)', + spacingHorizontalXXXL: 'var(--spacing-horizontal-xxxl)', + + spacingVerticalNone: 'var(--spacing-vertical-none)', + spacingVerticalXXS: 'var(--spacing-vertical-xxs)', + spacingVerticalXS: 'var(--spacing-vertical-xs)', + spacingVerticalSNudge: 'var(--spacing-vertical-s-nudge)', + spacingVerticalS: 'var(--spacing-vertical-s)', + spacingVerticalMNudge: 'var(--spacing-vertical-m-nudge)', + spacingVerticalM: 'var(--spacing-vertical-m)', + spacingVerticalL: 'var(--spacing-vertical-l)', + spacingVerticalXL: 'var(--spacing-vertical-xl)', + spacingVerticalXXL: 'var(--spacing-vertical-xxl)', + spacingVerticalXXXL: 'var(--spacing-vertical-xxxl)', // Durations durationUltraFast: 'var(--durationUltraFast)', From 6b15d918527a6de8aa8fbbf1356504ae0b642a18 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:14:28 -0700 Subject: [PATCH 586/640] refactor(theming): repoint old camelCase token var() references to canonical names (1) Mechanical follow-through of the option-B removal: every raw var() reference to an old camelCase spacing/stroke variable in react-domain source repoints to the canonical kebab name (651 replacements / 197 files total, exact-name longest-first mapping; script .scratch/phase1-theming/repoint-oldnames.mjs). web-components excluded: separate system that defines its own camelCase vars. VR: full 76/76-set sweep at zero tolerance on the converted output. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../ChartTable/ChartTable.module.css | 4 +- .../components/DonutChart/Arc/Arc.module.css | 2 +- .../ChartTable/ChartTableDefault.module.css | 2 +- .../AccordionHeader.module.css | 2 +- .../AccordionPanel/AccordionPanel.module.css | 4 +- .../AvatarGroupItem.module.css | 2 +- .../AvatarGroupPopover.module.css | 2 +- .../src/components/Button/Button.module.css | 2 +- .../src/components/Card/Card.module.css | 4 +- .../CarouselNav/CarouselNav.module.css | 6 +-- .../CarouselNavContainer.module.css | 4 +- .../CarouselNavImageButton.module.css | 2 +- .../components/Checkbox/Checkbox.module.css | 6 +-- .../components/ColorArea/ColorArea.module.css | 4 +- .../ColorPicker/ColorPicker.module.css | 2 +- .../OptionGroup/OptionGroup.module.css | 2 +- .../DialogContent/DialogContent.module.css | 2 +- .../InlineDrawer/InlineDrawer.module.css | 2 +- .../OverlayDrawer/OverlayDrawer.module.css | 2 +- .../src/components/Field/Field.module.css | 2 +- .../InfoButton/InfoButton.module.css | 2 +- .../components/ListItem/ListItem.module.css | 2 +- .../MenuDivider/MenuDivider.module.css | 2 +- .../MessageBarActions.module.css | 2 +- .../NavDrawerFooter.module.css | 4 +- .../src/components/Radio/Radio.module.css | 6 +-- .../RatingDisplay/RatingDisplay.module.css | 2 +- .../SwatchPicker/SwatchPicker.module.css | 2 +- .../src/components/Switch/Switch.module.css | 6 +-- .../components/TableCell/TableCell.module.css | 2 +- .../TableCellLayout.module.css | 2 +- .../TagPickerControl.module.css | 4 +- .../library/src/components/Tag/Tag.module.css | 2 +- .../components/TagGroup/TagGroup.module.css | 2 +- .../TeachingPopoverCarouselNav.module.css | 2 +- .../TeachingPopoverSurface.module.css | 2 +- .../react-theme-sass/sass/spacingTokens.scss | 44 +++++++++---------- .../sass/strokeWidthTokens.scss | 8 ++-- .../ToastContainer/ToastContainer.module.css | 2 +- .../components/FlatTree/FlatTree.module.css | 2 +- .../src/components/Tree/Tree.module.css | 2 +- .../TreeItemLayout/TreeItemLayout.module.css | 10 ++--- .../TreeItemPersonaLayout.module.css | 8 ++-- 43 files changed, 89 insertions(+), 89 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css index e8353676286257..921a28a744101e 100644 --- a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css +++ b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css @@ -51,10 +51,10 @@ * `.svg-tooltip` uses `HighContrastSelector`, narrowed as usual (DonutChart precedent). * * ── Stroke widths (D4 addendum) ───────────────────────────────────────────────────────── - * `border: strokeWidthThick solid …` — raw `var(--strokeWidthThick)` is forbidden in + * `border: strokeWidthThick solid …` — raw `var(--stroke-width-thick)` is forbidden in * modules; the sanctioned form for border widths is the emitted `var(--spacing-thick)` * (= calc(2px * var(--base-scale)), identical at the default root). `padding: - * var(--spacingHorizontalS)` (8px, the S step) becomes the named utility `p-horizontal-s`. + * var(--spacing-horizontal-s)` (8px, the S step) becomes the named utility `p-horizontal-s`. */ @layer fui.components.l1 { diff --git a/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css b/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css index 01c85ad253a7cb..bbd47879b70a15 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css +++ b/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css @@ -59,7 +59,7 @@ * registers no `--stroke-width-*` namespace), so the stroke width is written as a direct * `var(--spacing-thickest)`. That variable IS emitted (it is one of the four stroke widths * `css/emit.css` ships as real custom properties) and it scales with `--base-scale`, which - * a raw `var(--strokeWidthThickest)` would not. + * a raw `var(--stroke-width-thickest)` would not. */ .focus-ring { fill: transparent; diff --git a/packages/charts/react-charts/stories/src/ChartTable/ChartTableDefault.module.css b/packages/charts/react-charts/stories/src/ChartTable/ChartTableDefault.module.css index 99d462d1029de0..6e9f535e34d4fd 100644 --- a/packages/charts/react-charts/stories/src/ChartTable/ChartTableDefault.module.css +++ b/packages/charts/react-charts/stories/src/ChartTable/ChartTableDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .tableContainer { - margin: var(--spacingVerticalM); + margin: var(--spacing-vertical-m); } diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css b/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css index 8a14c7227a5327..89aa03ed40c22a 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css +++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css @@ -166,7 +166,7 @@ border-left-width: 0; /* - * `padding: 0 var(--spacingHorizontalM) 0 var(--spacingHorizontalMNudge)` expanded to + * `padding: 0 var(--spacing-horizontal-m) 0 var(--spacing-horizontal-m-nudge)` expanded to * longhands. The compiled `[ltr, rtl]` pair (`f1rmphuq` / `f26yw9j`) swaps only the * two inline sides, i.e. a pure property flip → logical properties. */ diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.module.css b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.module.css index 1ae3652f45e138..efa03143d7a6b9 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.module.css +++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.module.css @@ -36,14 +36,14 @@ * * ── Spacing (DECISIONS.md D4 amendment) ──────────────────────────────────────────── * `tokens.spacingHorizontalM` is authored as the named utility `ms-horizontal-m` / - * `me-horizontal-m`; raw `var(--spacingHorizontalM)` is forbidden in modules because it + * `me-horizontal-m`; raw `var(--spacing-horizontal-m)` is forbidden in modules because it * is the one form that does not ride `--base-scale`. */ @layer fui.components.l1 { /* * from useStyles.root — root arg #2. - * `margin: 0 var(--spacingHorizontalM)` expanded to longhands (CONVERSION_GUIDE §2). + * `margin: 0 var(--spacing-horizontal-m)` expanded to longhands (CONVERSION_GUIDE §2). */ .root { @apply mt-0 mb-0 ms-horizontal-m me-horizontal-m; diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css index 05594f8e564121..b442bf05787bac 100644 --- a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css +++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css @@ -83,7 +83,7 @@ /* * arg 3' — from useRootStyles.overflowItem. Compiled as the `padding` shorthand - * (`var(--spacingVerticalXS) var(--spacingHorizontalXS)`). + * (`var(--spacing-vertical-xs) var(--spacing-horizontal-xs)`). * * Now the two named axis utilities (D4 amendment — raw `var(--spacing*)` is the one form * that does not scale with `--base-scale`): `py-vertical-xs` → `padding-block`, diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css index 911cafb39b3f47..6f9274f191ebaf 100644 --- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css +++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css @@ -363,7 +363,7 @@ * popoverSurface arg 1 — from usePopoverSurfaceStyles.base, over PopoverSurface's own l1 * rules (see the ALTITUDE note in the header). * - * `padding` compiled to the `var(--spacingVerticalS) var(--spacingHorizontalS)` shorthand + * `padding` compiled to the `var(--spacing-vertical-s) var(--spacing-horizontal-s)` shorthand * → the two named axis utilities (D4 amendment; raw `var(--spacing*)` does not scale with * `--base-scale`). These are the two-value LOGICAL pairs, so the inline sides still cannot * drift in RTL, and the axis↔token pairing matches the shorthand's vertical-then-horizontal diff --git a/packages/react-components/react-button/library/src/components/Button/Button.module.css b/packages/react-components/react-button/library/src/components/Button/Button.module.css index d985f75db960c9..8fecd2df3eb10f 100644 --- a/packages/react-components/react-button/library/src/components/Button/Button.module.css +++ b/packages/react-components/react-button/library/src/components/Button/Button.module.css @@ -425,7 +425,7 @@ .root { /* * Size variations — arg #4. `medium` is the compiled `{}` slice ("defined in base - * styles"), so only small/large have rules. `padding: 3px var(--spacingHorizontalS)` + * styles"), so only small/large have rules. `padding: 3px var(--spacing-horizontal-s)` * is expanded to block/inline longhands so the later `padding-block` overrides in * fui.components.l1 compose predictably. */ diff --git a/packages/react-components/react-card/library/src/components/Card/Card.module.css b/packages/react-components/react-card/library/src/components/Card/Card.module.css index c5c7148fb13acd..d48bd53b63f731 100644 --- a/packages/react-components/react-card/library/src/components/Card/Card.module.css +++ b/packages/react-components/react-card/library/src/components/Card/Card.module.css @@ -517,9 +517,9 @@ * into `::after` normally — the reset above already relies on that. * * Byte-check against the compiled atomics: - * .fpqizxz[…]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2)} + * .fpqizxz[…]::after{border:var(--stroke-width-thick) solid var(--colorStrokeFocus2)} * .fnd8nzh[…]::after{border-radius:var(--fui-Card--border-radius)} - * .f15fr7a0[…]::after{top:calc(0px - var(--strokeWidthThick) - -2px)} (×4 sides) + * .f15fr7a0[…]::after{top:calc(0px - var(--stroke-width-thick) - -2px)} (×4 sides) * The utility's `calc(0px - var(--fui-focus-outline-width, 2px) - * var(--fui-focus-outline-offset, 0px))` substitutes to exactly that. * diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css b/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css index 8dc88bde8d1c36..abf79440a37656 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css @@ -31,7 +31,7 @@ * shared utility to `@apply` — the declarations are the component's own and are written * under the catalog `focus-visible-fui` variant. Compiled selectors reproduced 1:1: * - * .f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2)} + * .f89hs3r[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid var(--colorStrokeFocus2)} * .f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium)} * .f8hki3x/.f1d2448m/.ffh67wi/.f1bjia2o[data-fui-focus-visible]{border-*-color:transparent} * @@ -45,11 +45,11 @@ * ── Stroke widths (DECISIONS.md D4 addendum) ──────────────────────────────────────── * `outline-width` is NOT one of the families that reads the `--spacing-*` namespace, so * `strokeWidthThick` takes the direct `var(--spacing-thick)` reference rather than a - * utility. Raw `var(--strokeWidthThick)` is forbidden — it is the one form that does not + * utility. Raw `var(--stroke-width-thick)` is forbidden — it is the one form that does not * ride `--base-scale`. * * ── Spacing (DECISIONS.md D4) ─────────────────────────────────────────────────────── - * `margin: auto var(--spacingHorizontalS)` compiled to a single class (`.fkb7v5e`, no + * `margin: auto var(--spacing-horizontal-s)` compiled to a single class (`.fkb7v5e`, no * `[ltr, rtl]` pair — a symmetric shorthand needs no flip). Expanded to longhands: the * block axis is `auto`, the inline axis is the NAMED spacing utility. * diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.module.css b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.module.css index 5e726f7552d2a9..265fb56d479933 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselNavContainer/CarouselNavContainer.module.css @@ -61,9 +61,9 @@ * `classList[0]` (D16.2), and none of these three slots carries a marker. * * ── ONE DECLARATION IS DELIBERATELY DROPPED ───────────────────────────────────────────── - * `autoplayExpanded` compiled to `.f49tsn4{bottom:-var(--spacingHorizontalXS);}`. That value + * `autoplayExpanded` compiled to `.f49tsn4{bottom:-var(--spacing-horizontal-xs);}`. That value * is INVALID CSS and always has been: `-var(` tokenises as a function named `-var`, so no - * `var()` substitution happens and `-var(--spacingHorizontalXS)` is not a ``. + * `var()` substitution happens and `-var(--spacing-horizontal-xs)` is not a ``. * Checked, not assumed — css-tree's lexer reports `Mismatch … syntax: | * | auto` for it, i.e. the declaration is dropped at parse time and the rule * has never contributed a `bottom` to any browser. Nothing else sets `bottom` on the diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css index f1296efcc6a4cb..6aba83a5a49782 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css @@ -56,7 +56,7 @@ * the base blocks — the same relation the mergeClasses argument order encoded. * * ── Shorthand expansion & spacing (DECISIONS.md D4) ───────────────────────────────────── - * `padding: 0px` (`.f1c5fvqg`) and `margin: 0 var(--spacingHorizontalXS)` (`.f186qr3g`, + * `padding: 0px` (`.f1c5fvqg`) and `margin: 0 var(--spacing-horizontal-xs)` (`.f186qr3g`, * single class — a symmetric shorthand needs no RTL flip) are expanded to longhands per the * cookbook; the inline margin takes the NAMED spacing utility. The 40/48 px box sizes match * no spacing step, so they take NUMERIC utilities (`w-40`, `h-48`), which compile through diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css index a4ac45e028da16..111e11f63e75b0 100644 --- a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css +++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css @@ -107,7 +107,7 @@ * * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * Every value the Griffel source read from a `tokens.spacing*` is authored as the NAMED - * spacing utility (`mt-vertical-s`, `ps-horizontal-xs`, …). Raw `var(--spacingVerticalS)` + * spacing utility (`mt-vertical-s`, `ps-horizontal-xs`, …). Raw `var(--spacing-vertical-s)` * is forbidden in modules: it is the one authoring form that does not ride `--base-scale`, * so it would drift from the indicator sizes above at a non-default root font size. The two * spacing terms that sit INSIDE a calc() — where no utility can reach — are written as the @@ -180,7 +180,7 @@ border-width: var(--spacing-thin); border-radius: var(--borderRadiusSmall); - /* `margin: var(--spacingVerticalS) var(--spacingHorizontalS)` expanded to longhands and + /* `margin: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands and then to the named spacing utilities (D4 amendment); no rtl class was compiled, so the inline sides stay physical. */ @apply mt-vertical-s mr-horizontal-s mb-vertical-s ml-horizontal-s; @@ -342,7 +342,7 @@ color: inherit; cursor: inherit; - /* `padding: var(--spacingVerticalS) var(--spacingHorizontalS)` expanded to longhands + /* `padding: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands (CONVERSION_GUIDE §2): the position slices below override single inline sides inside this same layer, and Griffel's shorthand-loses-to-longhand priority (`p: -1`) has no CSS equivalent. Inline sides are logical because `before`/`after` compile to an diff --git a/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.module.css b/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.module.css index 983fa967a0875d..06b3bf20d5908c 100644 --- a/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.module.css +++ b/packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.module.css @@ -157,9 +157,9 @@ * .ftqa4ok:focus{outline-style:none} * .f2hkw1w:focus-visible{outline-style:none} * .f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent} (×4 sides) - * .f1i978nd[…]::after{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2)} + * .f1i978nd[…]::after{border:var(--stroke-width-thick) solid var(--colorStrokeFocus2)} * .f16hcqkr[…]::after{border-radius:var(--borderRadiusCircular)} - * .f1tye2sp[…]::after{top:calc(var(--strokeWidthThick) * -1)} (×4 sides) + * .f1tye2sp[…]::after{top:calc(var(--stroke-width-thick) * -1)} (×4 sides) * @media (forced-colors: active){…::after{border-top-color:Highlight}} (×4 sides) * The shared `fui-focus-outline` utility emits exactly this set; its * `calc(0px - var(--fui-focus-outline-width) - var(--fui-focus-outline-offset, 0px))` diff --git a/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.module.css b/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.module.css index 65462b29a1bcb7..79748d0c108e05 100644 --- a/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.module.css +++ b/packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.module.css @@ -32,7 +32,7 @@ * Verified against the compiled Griffel atomics in * lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.js: * .f22iagw{display:flex} .f1vx9l62{flex-direction:column} - * .f7e3wsx{gap:var(--spacingVerticalXS)} + * .f7e3wsx{gap:var(--spacing-vertical-xs)} */ @layer fui.components.l1 { diff --git a/packages/react-components/react-combobox/library/src/components/OptionGroup/OptionGroup.module.css b/packages/react-components/react-combobox/library/src/components/OptionGroup/OptionGroup.module.css index 293b2704ecdd17..cc056924776a7a 100644 --- a/packages/react-components/react-combobox/library/src/components/OptionGroup/OptionGroup.module.css +++ b/packages/react-components/react-combobox/library/src/components/OptionGroup/OptionGroup.module.css @@ -56,7 +56,7 @@ /* `borderBottom: strokeWidthThin solid colorNeutralStroke2` expanded to longhands. `border-*-width` is NOT a spacing-powered Tailwind family, so the stroke width is referenced through the emitted `--spacing-thin` custom property, never - `var(--strokeWidthThin)` (D4 addendum). */ + `var(--stroke-width-thin)` (D4 addendum). */ border-bottom-width: var(--spacing-thin); border-bottom-style: solid; border-bottom-color: var(--colorNeutralStroke2); diff --git a/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.module.css b/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.module.css index 87f72e089bbc03..8f8a70f6125404 100644 --- a/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.module.css +++ b/packages/react-components/react-dialog/library/src/components/DialogContent/DialogContent.module.css @@ -38,7 +38,7 @@ * margin that cancels it — the pair exists so a focus ring drawn just outside a child is not * clipped by this element's `overflow-y: auto`, and it only nets to zero if both halves are * the same length. `padding` and `margin` are spacing-powered families (probe-measured), so - * both take the utility: `p-thick` / `-m-thick`. Raw `var(--strokeWidthThick)` is forbidden + * both take the utility: `p-thick` / `-m-thick`. Raw `var(--stroke-width-thick)` is forbidden * in component modules — it is the one form that does not ride `--base-scale`, which would * break exactly the cancellation this rule depends on under user zoom. * diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css index 0b935d689ad3ad..5856efca0e14ff 100644 --- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css +++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css @@ -67,7 +67,7 @@ * `--fui-Drawer--size` is a custom PROPERTY, so no utility can set it and the three px * widths take the D4 literal form `calc(px * var(--base-scale))`. `strokeWidthThin` * becomes `var(--spacing-thin)` (D4 addendum: `border-*-width` is not spacing-powered, so - * it takes the emitted variable directly, never `var(--strokeWidthThin)`). The separator's + * it takes the emitted variable directly, never `var(--stroke-width-thin)`). The separator's * hand-written `1px` is a px LITERAL, so it takes the `calc(1px * var(--base-scale))` form * — numerically the same as `var(--spacing-thin)`, but the source never named the token. * diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css index f9cc18dd0f6a5b..cefd1e153c4f2e 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css @@ -48,7 +48,7 @@ * ── ALTITUDE: the focus ring is hoisted OUT of fui.base ─────────────────────────────── * `useDrawerResetStyles` spreads `createFocusOutlineStyle()`, whose focus-visible half * compiles to `.r7dfyj8[data-fui-focus-visible]{border-*-color:transparent}` — 0-2-0. It - * beat arg #2a's `.f1xteiwb{border-right:var(--strokeWidthThin) solid + * beat arg #2a's `.f1xteiwb{border-right:var(--stroke-width-thin) solid * var(--colorTransparentStroke)}` (0-1-0) on SPECIFICITY even though the reset bucket sorts * first. `:where()`-flat selectors erase that, so leaving the focus block in `fui.base` * would let the position border colour survive a focus ring. That is observable: in the diff --git a/packages/react-components/react-field/library/src/components/Field/Field.module.css b/packages/react-components/react-field/library/src/components/Field/Field.module.css index 8d831b3bcf0128..92cf376aa4af0f 100644 --- a/packages/react-components/react-field/library/src/components/Field/Field.module.css +++ b/packages/react-components/react-field/library/src/components/Field/Field.module.css @@ -99,7 +99,7 @@ * ── Pixel literals and spacing (DECISIONS.md D4 + amendment) ──────────────────────── * Every value the Griffel source read from a `tokens.spacing*` is authored as the NAMED * spacing utility (`mt-vertical-xxs`, `me-horizontal-m`, `pt-vertical-s-nudge`, …). Raw - * `var(--spacingVerticalXXS)` is forbidden in modules: it is the one authoring form that + * `var(--spacing-vertical-xxs)` is forbidden in modules: it is the one authoring form that * does not ride `--base-scale`. The px literals (1px, 9px, and the 12px `iconSize`) ride * `--base-scale` too — via the numeric utilities (`pt-1`, `pt-9`) where one exists, and as * `calc(px * var(--base-scale))` inside calc()/font-size/vertical-align where none diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css index 95ab13759019fe..5ef1a7e100b7c6 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css +++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css @@ -202,7 +202,7 @@ * from useButtonStyles.large — arg #6, and the last `d` bucket rule, so it beats the * base padding above. `size` is a scale prop → `data-size` (DECISIONS.md D3). * - * NOTE the compiled value is `padding:var(--spacingVerticalXXS) var(--spacingVerticalXXS)` + * NOTE the compiled value is `padding:var(--spacing-vertical-xxs) var(--spacing-vertical-xxs)` * — spacingVERTICALXXS on BOTH axes. That is what the Griffel source says and what the * compiler emitted (atomic `f1kx978o`); reproduced verbatim rather than "fixed" to * spacingHorizontalXXS. The named utilities keep that quirk visible: the inline-axis pair diff --git a/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css b/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css index 5d1f83a23b43fd..6fc0184b6fc41a 100644 --- a/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css +++ b/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css @@ -65,7 +65,7 @@ * Compiled AOT reference * (lib-commonjs/components/ListItem/useListItemStyles.styles.js:25-65): * .rikgcmv{padding:0;margin:0;text-indent:0;list-style-type:none;} - * .rikgcmv[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid + * .rikgcmv[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid * var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);} * .f7nlbp4{align-self:center;} * .f1bgo3o3 .fui-Checkbox__indicator{margin:4px;} diff --git a/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css b/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css index 40a51f026012b7..1bd752ce936cb8 100644 --- a/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css @@ -35,7 +35,7 @@ * numeric utility `-mx-5`, which computes through the same `--base-scale`. `strokeWidthThin` * becomes `var(--spacing-thin)`: `border-*-width` is NOT a spacing-powered Tailwind family * (there is no `border-thin`), so the direct variable reference is the sanctioned form, and - * the raw `var(--strokeWidthThin)` is forbidden because it is the one form that does not + * the raw `var(--stroke-width-thin)` is forbidden because it is the one form that does not * scale with `--base-scale`. * * Verified against the compiled Griffel atomics in diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.module.css b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.module.css index 9c5b9567265e41..1f68fa2fb09080 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.module.css +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarActions/MessageBarActions.module.css @@ -67,7 +67,7 @@ * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * Every token read becomes the NAMED spacing utility. Note `useMultilineStyles.root` * reads `tokens.spacingVerticalM` for a HORIZONTAL property (`paddingRight`); the - * compiled atomic is `padding-right: var(--spacingVerticalM)`, so it is reproduced as + * compiled atomic is `padding-right: var(--spacing-vertical-m)`, so it is reproduced as * `pe-vertical-m` rather than silently re-axised to `pe-horizontal-m`. Both steps are * 12px and both ride `--base-scale`, so the computed length is identical either way — * the source token is kept so this stays a pure conversion. diff --git a/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.module.css b/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.module.css index ab218ddad3e15a..8eab0df83a072d 100644 --- a/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.module.css +++ b/packages/react-components/react-nav/library/src/components/NavDrawerFooter/NavDrawerFooter.module.css @@ -39,8 +39,8 @@ * ${spacingVerticalXS} ${spacingHorizontalMNudge}` * * and Griffel compiled it verbatim — - * `.f1j1cbdv{padding:var(--spacingVerticalXXS) var(--spacingHorizontalXS) - * var(--spacingVerticalXXS) var(--spacingVerticalXS) var(--spacingHorizontalMNudge);}`. + * `.f1j1cbdv{padding:var(--spacing-vertical-xxs) var(--spacing-horizontal-xs) + * var(--spacing-vertical-xxs) var(--spacing-vertical-xs) var(--spacing-horizontal-m-nudge);}`. * `padding` accepts one to four values, so five is a PARSE ERROR: every browser drops the * declaration and NavDrawerFooter renders today with DrawerFooter's own * `pt-vertical-l px-horizontal-xxl pb-vertical-xxl` and nothing from this slice. diff --git a/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css b/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css index 2ed18e3e7a359f..062d28a74ee6f5 100644 --- a/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css +++ b/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css @@ -103,7 +103,7 @@ * * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * Every value the Griffel source read from a `tokens.spacing*` is authored as the NAMED - * spacing utility (`mt-vertical-s`, `ps-horizontal-xs`, …). Raw `var(--spacingVerticalS)` + * spacing utility (`mt-vertical-s`, `ps-horizontal-xs`, …). Raw `var(--spacing-vertical-s)` * is forbidden in modules: it is the one authoring form that does not ride `--base-scale`, * so it would drift from `indicatorSize` above at a non-default root font size. The two * spacing terms that sit INSIDE a calc() — where no utility can reach — are written as the @@ -149,7 +149,7 @@ border: var(--spacing-thin) solid; border-radius: var(--borderRadiusCircular); - /* `margin: var(--spacingVerticalS) var(--spacingHorizontalS)` expanded to longhands and + /* `margin: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands and then to the named spacing utilities (D4 amendment); no rtl class was compiled, so the inline sides stay physical. */ @apply mt-vertical-s mr-horizontal-s mb-vertical-s ml-horizontal-s; @@ -380,7 +380,7 @@ .label { @apply self-center; - /* `padding: var(--spacingVerticalS) var(--spacingHorizontalS)` expanded to longhands + /* `padding: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands (CONVERSION_GUIDE §2): the position slices below override single sides inside this same layer, and Griffel's shorthand-loses-to-longhand priority has no CSS equivalent. Inline sides are logical because `after` compiles to an [ltr, rtl] diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css index f12e0cbfb456ca..f4087c2d184969 100644 --- a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css +++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css @@ -73,7 +73,7 @@ * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * All three margins read a `tokens.spacingHorizontal*`, so they are authored as the NAMED * spacing utilities (`ms-horizontal-xs` / `-s-nudge` / `-s`). Raw - * `var(--spacingHorizontalXS)` is forbidden in modules: it is the one authoring form that + * `var(--spacing-horizontal-xs)` is forbidden in modules: it is the one authoring form that * does not ride `--base-scale`. */ diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.module.css b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.module.css index 6ee935f8476f97..3b1cdf36b85a6c 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.module.css +++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.module.css @@ -41,7 +41,7 @@ .root { /* * `padding: ${spacingHorizontalNone} ${spacingVerticalNone}` — compiled verbatim as - * `padding:var(--spacingHorizontalNone) var(--spacingVerticalNone)`, i.e. the + * `padding:var(--spacing-horizontal-none) var(--spacing-vertical-none)`, i.e. the * HORIZONTAL token on the block axis and the VERTICAL token on the inline axis. The * axes are swapped relative to this guide's axis rule; that is the source's own * oddity and it is inert because both steps are 0. Reproduced as written (D4: raw diff --git a/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css b/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css index 4691c80ea0cfb4..c483c89a4eeb1c 100644 --- a/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css +++ b/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css @@ -103,7 +103,7 @@ * * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * Every value the Griffel source read from a `tokens.spacing*` is authored as the NAMED - * spacing utility (`mt-vertical-s`, `ps-horizontal-xs`, …). Raw `var(--spacingVerticalS)` + * spacing utility (`mt-vertical-s`, `ps-horizontal-xs`, …). Raw `var(--spacing-vertical-s)` * is forbidden in modules: it is the one authoring form that does not ride `--base-scale`, * so it would drift from the geometry above at a non-default root font size. The three * spacing terms that sit INSIDE a calc() — where no utility can reach — are written as the @@ -152,7 +152,7 @@ fill: currentColor; font-size: calc(18px * var(--base-scale)); - /* `margin: var(--spacingVerticalS) var(--spacingHorizontalS)` expanded to longhands and + /* `margin: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands and then to the named spacing utilities (D4 amendment); no rtl class was compiled, so the inline sides stay physical. */ @apply mt-vertical-s mr-horizontal-s mb-vertical-s ml-horizontal-s; @@ -477,7 +477,7 @@ margin-bottom: calc((20px * var(--base-scale) - var(--lineHeightBase300)) / 2); margin-top: calc((20px * var(--base-scale) - var(--lineHeightBase300)) / 2); - /* `padding: var(--spacingVerticalS) var(--spacingHorizontalS)` expanded to longhands + /* `padding: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands (CONVERSION_GUIDE §2): the position slices below override single sides inside this same layer, and Griffel's shorthand-loses-to-longhand priority has no CSS equivalent. Inline sides are logical because `after`/`before` compile to an diff --git a/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css b/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css index bcd14639bbb960..5b91d680e39128 100644 --- a/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css +++ b/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css @@ -45,7 +45,7 @@ * ── Spacing / pixel literals (DECISIONS.md D4 + amendment) ────────────────────────── * `padding: '0px ' + tokens.spacingHorizontalS` is the only token-derived value and takes * the NAMED utilities (`ps-horizontal-s` / `pe-horizontal-s`); raw - * `var(--spacingHorizontalS)` is forbidden in modules because it is the one form that does + * `var(--spacing-horizontal-s)` is forbidden in modules because it is the one form that does * not ride `--base-scale`. The row heights (44 / 34 / 24 px) are pixel LITERALS in the * Griffel source, so they take the NUMERIC utilities `h-44` / `min-h-44` &c., which * compute through the same `--base-scale`. diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css index 429666d0ec6021..6e1bdc63643caa 100644 --- a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css +++ b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css @@ -56,7 +56,7 @@ * * ── Spacing / pixel literals (DECISIONS.md D4 + amendment) ────────────────────────── * `tokens.spacingHorizontalS` takes the NAMED utility `gap-horizontal-s`; raw - * `var(--spacingHorizontalS)` is forbidden in modules because it is the one form that does + * `var(--spacing-horizontal-s)` is forbidden in modules because it is the one form that does * not ride `--base-scale`. The three media font sizes (16 / 20 / 24 px) are pixel LITERALS, * written `calc(px * var(--base-scale))` — `font-size` reads Tailwind's `--text-*` * namespace, not `--spacing-*`, so there is no numeric utility for it and this is the form diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css index 13abd5b4fbe1f3..ba1fb8bc52c274 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css @@ -77,7 +77,7 @@ * `useTagPickerControl.tsx`'s ResizeObserver via the byte-identical * `tagPickerControlAsideWidthToken` const. Both the name and the `, 0px` fallback are * reproduced verbatim from the compiled atomic - * (`.f1d8q41i{padding-right:calc(var(--spacingHorizontalM) + var(--fui-TagPickerControl-aside-width, 0px));}`). + * (`.f1d8q41i{padding-right:calc(var(--spacing-horizontal-m) + var(--fui-TagPickerControl-aside-width, 0px));}`). * The runtime mechanism is untouched by this conversion. * * ── Slot rules and specificity ────────────────────────────────────────────────────── @@ -118,7 +118,7 @@ * `paddingRight: calc(spacingHorizontalM + var(--fui-TagPickerControl-aside-width, 0px))`. * * A spacing step in ARITHMETIC with a runtime variable: no `pe-*` utility can express it, - * and raw `var(--spacingHorizontalM)` is forbidden because it is the one authoring form + * and raw `var(--spacing-horizontal-m)` is forbidden because it is the one authoring form * that does not ride `--base-scale` (D4 amendment). The M step is therefore written as its * own `calc(12px * var(--base-scale))`, which is byte-for-byte what `pe-horizontal-m` * compiles to (`--spacing-horizontal-m: calc(12px * var(--base-scale))` in the generated diff --git a/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css b/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css index eaaa5ac3d108eb..e79c8921af9af2 100644 --- a/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css +++ b/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css @@ -446,7 +446,7 @@ grid-row-start: primary; grid-row-end: secondary; - /* compiled `padding-bottom: var(--spacingHorizontalXXS)` — the HORIZONTAL token on a + /* compiled `padding-bottom: var(--spacing-horizontal-xxs)` — the HORIZONTAL token on a block-axis property. Reproduced verbatim rather than "fixed" to the vertical token; both steps are 2px, so this is a naming faithfulness point, not a value difference. */ @apply pb-horizontal-xxs; diff --git a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.module.css b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.module.css index a2c39261a56a85..7c1df9a015e998 100644 --- a/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.module.css +++ b/packages/react-components/react-tags/library/src/components/TagGroup/TagGroup.module.css @@ -30,7 +30,7 @@ * * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * `column-gap` is the INLINE axis, so the three size steps take the horizontal token's - * `gap-x-*` utility. Raw `var(--spacingHorizontalS)` is forbidden in modules: it is the + * `gap-x-*` utility. Raw `var(--spacing-horizontal-s)` is forbidden in modules: it is the * one authoring form that does not ride `--base-scale`. * * ── RTL ───────────────────────────────────────────────────────────────────────────── diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css index 53fdf1c364e248..dd7e1576f58a95 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css @@ -34,7 +34,7 @@ * * ── Stroke widths (DECISIONS.md D4 addendum) ──────────────────────────────────────────── * `outline-width` does NOT read the `--spacing-*` namespace, so `strokeWidthThick` takes a - * direct `var(--spacing-thick)` reference rather than a utility. Raw `var(--strokeWidthThick)` + * direct `var(--spacing-thick)` reference rather than a utility. Raw `var(--stroke-width-thick)` * is forbidden in modules — it is the one form that does not scale with `--base-scale`. * * ── ORDER ─────────────────────────────────────────────────────────────────────────────── diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css index 93a36fca6c196d..bd0b553bfffb6f 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css @@ -43,7 +43,7 @@ * * ── Lengths (DECISIONS.md D4) ─────────────────────────────────────────────────────────── * `padding` reads `spacingVerticalL` on BOTH axes in the source (not a copy-paste slip worth - * "fixing": the compiled atomic is `padding:var(--spacingVerticalL) var(--spacingVerticalL)`), + * "fixing": the compiled atomic is `padding:var(--spacing-vertical-l) var(--spacing-vertical-l)`), * so it takes the named `vertical` utility — `p-*` is all-sides and the two scales compute * through the same `--base-scale`. It stays the SHORTHAND Griffel emitted: PopoverSurface sets * its padding with a shorthand too, and cascade LAYERS decide between the two before diff --git a/packages/react-components/react-theme-sass/sass/spacingTokens.scss b/packages/react-components/react-theme-sass/sass/spacingTokens.scss index f986efa0583e3a..317bacb586ae2e 100644 --- a/packages/react-components/react-theme-sass/sass/spacingTokens.scss +++ b/packages/react-components/react-theme-sass/sass/spacingTokens.scss @@ -1,22 +1,22 @@ -$spacingHorizontalNone: var(--spacingHorizontalNone); -$spacingHorizontalXXS: var(--spacingHorizontalXXS); -$spacingHorizontalXS: var(--spacingHorizontalXS); -$spacingHorizontalSNudge: var(--spacingHorizontalSNudge); -$spacingHorizontalS: var(--spacingHorizontalS); -$spacingHorizontalMNudge: var(--spacingHorizontalMNudge); -$spacingHorizontalM: var(--spacingHorizontalM); -$spacingHorizontalL: var(--spacingHorizontalL); -$spacingHorizontalXL: var(--spacingHorizontalXL); -$spacingHorizontalXXL: var(--spacingHorizontalXXL); -$spacingHorizontalXXXL: var(--spacingHorizontalXXXL); -$spacingVerticalNone: var(--spacingVerticalNone); -$spacingVerticalXXS: var(--spacingVerticalXXS); -$spacingVerticalXS: var(--spacingVerticalXS); -$spacingVerticalSNudge: var(--spacingVerticalSNudge); -$spacingVerticalS: var(--spacingVerticalS); -$spacingVerticalMNudge: var(--spacingVerticalMNudge); -$spacingVerticalM: var(--spacingVerticalM); -$spacingVerticalL: var(--spacingVerticalL); -$spacingVerticalXL: var(--spacingVerticalXL); -$spacingVerticalXXL: var(--spacingVerticalXXL); -$spacingVerticalXXXL: var(--spacingVerticalXXXL); +$spacingHorizontalNone: var(--spacing-horizontal-none); +$spacingHorizontalXXS: var(--spacing-horizontal-xxs); +$spacingHorizontalXS: var(--spacing-horizontal-xs); +$spacingHorizontalSNudge: var(--spacing-horizontal-s-nudge); +$spacingHorizontalS: var(--spacing-horizontal-s); +$spacingHorizontalMNudge: var(--spacing-horizontal-m-nudge); +$spacingHorizontalM: var(--spacing-horizontal-m); +$spacingHorizontalL: var(--spacing-horizontal-l); +$spacingHorizontalXL: var(--spacing-horizontal-xl); +$spacingHorizontalXXL: var(--spacing-horizontal-xxl); +$spacingHorizontalXXXL: var(--spacing-horizontal-xxxl); +$spacingVerticalNone: var(--spacing-vertical-none); +$spacingVerticalXXS: var(--spacing-vertical-xxs); +$spacingVerticalXS: var(--spacing-vertical-xs); +$spacingVerticalSNudge: var(--spacing-vertical-s-nudge); +$spacingVerticalS: var(--spacing-vertical-s); +$spacingVerticalMNudge: var(--spacing-vertical-m-nudge); +$spacingVerticalM: var(--spacing-vertical-m); +$spacingVerticalL: var(--spacing-vertical-l); +$spacingVerticalXL: var(--spacing-vertical-xl); +$spacingVerticalXXL: var(--spacing-vertical-xxl); +$spacingVerticalXXXL: var(--spacing-vertical-xxxl); diff --git a/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss b/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss index 38f4f686a916ba..77129bbc8c9995 100644 --- a/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss +++ b/packages/react-components/react-theme-sass/sass/strokeWidthTokens.scss @@ -1,4 +1,4 @@ -$strokeWidthThin: var(--strokeWidthThin); -$strokeWidthThick: var(--strokeWidthThick); -$strokeWidthThicker: var(--strokeWidthThicker); -$strokeWidthThickest: var(--strokeWidthThickest); +$strokeWidthThin: var(--stroke-width-thin); +$strokeWidthThick: var(--stroke-width-thick); +$strokeWidthThicker: var(--stroke-width-thicker); +$strokeWidthThickest: var(--stroke-width-thickest); diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css index 9605398cd6d61c..7be2a34b9252be 100644 --- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css +++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css @@ -49,7 +49,7 @@ * The source spreads `createCustomFocusIndicatorStyle({ outline: … })` into the reset. That * helper compiles to a plain `[data-fui-focus-visible]` rule — the AOT output is literally * - * .r98b696[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);} + * .r98b696[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid var(--colorStrokeFocus2);} * * — i.e. a bespoke one-declaration outline, NOT `createFocusOutlineStyle` and NOT the * Button-family ring. So neither shared utility (`fui-focus-outline`, `fui-focus-ring`) diff --git a/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.module.css b/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.module.css index e95b4720788ec2..c9d85a7bfde406 100644 --- a/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.module.css +++ b/packages/react-components/react-tree/library/src/components/FlatTree/FlatTree.module.css @@ -36,7 +36,7 @@ * * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * `row-gap` was read from `tokens.spacingVerticalXXS` → the named `gap-y-vertical-xxs` - * utility. Raw `var(--spacingVerticalXXS)` is forbidden in modules: it is the one + * utility. Raw `var(--spacing-vertical-xxs)` is forbidden in modules: it is the one * authoring form that does not ride `--base-scale`. * * Verified against the compiled Griffel atomics in diff --git a/packages/react-components/react-tree/library/src/components/Tree/Tree.module.css b/packages/react-components/react-tree/library/src/components/Tree/Tree.module.css index fe8dfe95f39d12..89841905cebe75 100644 --- a/packages/react-components/react-tree/library/src/components/Tree/Tree.module.css +++ b/packages/react-components/react-tree/library/src/components/Tree/Tree.module.css @@ -38,7 +38,7 @@ * * ── Spacing (DECISIONS.md D4 amendment) ───────────────────────────────────────────── * Both lengths were read from `tokens.spacingVerticalXXS`, so both are authored as the - * named spacing utility. Raw `var(--spacingVerticalXXS)` is forbidden in modules: it is + * named spacing utility. Raw `var(--spacing-vertical-xxs)` is forbidden in modules: it is * the one authoring form that does not ride `--base-scale`. * * Verified against the compiled Griffel atomics in diff --git a/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css b/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css index 86ab97c268ef01..11336afd3f1e8f 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css +++ b/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css @@ -90,7 +90,7 @@ * has nothing for `--base-scale` to scale — same call InfoButton.module.css documents). * `spacingHorizontalXXL` appears inside a `calc()`, where no utility can reach, so it is * written as the token's canonical `24px * var(--base-scale)` — raw - * `var(--spacingHorizontalXXL)` is forbidden because it is the one form that would not + * `var(--spacing-horizontal-xxl)` is forbidden because it is the one form that would not * scale with the rest. * * Pixel literals (32/24 px min-height, 24px min-width) stay pixel literals and ride @@ -129,7 +129,7 @@ /* from useMainBaseStyles (makeResetStyles) — main arg #2 */ .main { - /* `padding: 0 var(--spacingHorizontalXXS)` expanded to longhands (cookbook §2) */ + /* `padding: 0 var(--spacing-horizontal-xxs)` expanded to longhands (cookbook §2) */ padding-top: 0; padding-bottom: 0; @@ -146,7 +146,7 @@ Griffel reset is `flex: 0 0 auto`. Same computed value, fewer questions. */ flex: 0 0 auto; - /* `padding: var(--spacingVerticalXS) 0` expanded to longhands (cookbook §2) */ + /* `padding: var(--spacing-vertical-xs) 0` expanded to longhands (cookbook §2) */ @apply pt-vertical-xs pb-vertical-xs; padding-left: 0; @@ -170,7 +170,7 @@ z-index: 1; grid-area: aside; - /* `padding: 0 var(--spacingHorizontalS)` expanded to longhands (cookbook §2) */ + /* `padding: 0 var(--spacing-horizontal-s)` expanded to longhands (cookbook §2) */ padding-top: 0; padding-bottom: 0; @@ -184,7 +184,7 @@ z-index: 0; grid-area: aside; - /* `padding: 0 var(--spacingHorizontalM)` expanded to longhands (cookbook §2) */ + /* `padding: 0 var(--spacing-horizontal-m)` expanded to longhands (cookbook §2) */ padding-top: 0; padding-bottom: 0; diff --git a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css index 1983d9bf4d874d..eb21e3597b5168 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css +++ b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css @@ -91,7 +91,7 @@ * has nothing for `--base-scale` to scale — same call InfoButton.module.css documents). * `spacingHorizontalXXL` appears inside a `calc()`, where no utility can reach, so it is * written as the token's canonical `24px * var(--base-scale)` — raw - * `var(--spacingHorizontalXXL)` is forbidden because it is the one form that would not + * `var(--spacing-horizontal-xxl)` is forbidden because it is the one form that would not * scale with the rest. * * Pixel literals (32px media box, 24px min-height / min-width) stay pixel literals and @@ -187,7 +187,7 @@ z-index: 1; grid-area: aside; - /* `padding: 0 var(--spacingHorizontalS)` expanded to longhands (cookbook §2) */ + /* `padding: 0 var(--spacing-horizontal-s)` expanded to longhands (cookbook §2) */ padding-top: 0; padding-bottom: 0; @@ -201,7 +201,7 @@ z-index: 0; grid-area: aside; - /* `padding: 0 var(--spacingHorizontalM)` expanded to longhands (cookbook §2) */ + /* `padding: 0 var(--spacing-horizontal-m)` expanded to longhands (cookbook §2) */ padding-top: 0; padding-bottom: 0; @@ -219,7 +219,7 @@ Griffel reset is `flex: 0 0 auto`. Same computed value, fewer questions. */ flex: 0 0 auto; - /* `padding: var(--spacingVerticalXS) 0` expanded to longhands (cookbook §2) */ + /* `padding: var(--spacing-vertical-xs) 0` expanded to longhands (cookbook §2) */ @apply pt-vertical-xs pb-vertical-xs; padding-left: 0; From ec13a8eea8c6700126015ad6cc71ad2700148f2b Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:14:30 -0700 Subject: [PATCH 587/640] refactor(theming): repoint old camelCase token var() references to canonical names (2) Mechanical follow-through of the option-B removal: every raw var() reference to an old camelCase spacing/stroke variable in react-domain source repoints to the canonical kebab name (651 replacements / 197 files total, exact-name longest-first mapping; script .scratch/phase1-theming/repoint-oldnames.mjs). web-components excluded: separate system that defines its own camelCase vars. VR: full 76/76-set sweep at zero tolerance on the converted output. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../IconCatalog/ComparisonTile.module.css | 2 +- .../FromV8/Components/Image/Image.mdx | 2 +- .../FromV8/Components/Slider/Slider.mdx | 2 +- ...PositioningOverflowBoundaryRect.module.css | 4 ++-- .../src/Concepts/Theming.mdx | 2 +- .../createCSSRuleFromThemeDefault.module.css | 4 ++-- ...createCSSRuleFromThemeSwitching.module.css | 6 +++--- .../src/stories/Badge/utils.module.css | 8 ++++---- .../src/stories/Tree.module.css | 4 ++-- .../AccordionMotionCustom.module.css | 12 +++++------ .../UseTypingAnnounceFiltering.module.css | 4 ++-- .../Badge/BadgeColorVsAppearance.module.css | 6 +++--- .../src/Button/ButtonLoading.module.css | 2 +- .../Carousel/CarouselActionCards.module.css | 4 ++-- .../src/Carousel/CarouselAutoplay.module.css | 4 ++-- .../Carousel/CarouselControlled.module.css | 8 ++++---- .../src/Carousel/CarouselEventing.module.css | 6 +++--- .../CarouselFirstRunExperience.module.css | 6 +++--- .../Carousel/CarouselResponsive.module.css | 6 +++--- .../Carousel/CarouselTopNavigation.module.css | 20 +++++++++---------- .../CarouselNav/CarouselNavDefault.module.css | 4 ++-- .../ColorAndSwatchPicker.module.css | 6 +++--- .../ComboboxMultiselectWithTags.module.css | 4 ++-- .../DialogBackdropAppearance.module.css | 4 ++-- .../src/Dialog/DialogMotionCustom.module.css | 8 ++++---- .../src/Drawer/DrawerCustomSize.module.css | 4 ++-- .../src/Drawer/DrawerDefault.module.css | 4 ++-- .../DrawerKeepRenderedInTheDOM.module.css | 4 ++-- .../src/Drawer/DrawerMotionCustom.module.css | 2 +- .../Drawer/DrawerMotionDisabled.module.css | 4 ++-- .../src/Drawer/DrawerPosition.module.css | 2 +- .../src/Drawer/DrawerResizable.module.css | 2 +- .../src/Drawer/DrawerResponsive.module.css | 4 ++-- .../src/Drawer/DrawerSeparator.module.css | 2 +- .../stories/src/Drawer/DrawerSize.module.css | 4 ++-- .../src/Drawer/DrawerWithScroll.module.css | 2 +- .../src/Drawer/InlineDrawer.module.css | 2 +- .../Drawer/OverlayInsideContainer.module.css | 6 +++--- .../Field/FieldComponentExamples.module.css | 2 +- .../stories/src/Field/FieldSize.module.css | 2 +- 40 files changed, 92 insertions(+), 92 deletions(-) diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css index 38c4ba2bba1dbd..c4e1c5950bbb8d 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css @@ -11,7 +11,7 @@ gap: 10px; border-color: var(--colorNeutralStroke1); border-style: solid; - border-width: var(--strokeWidthThin); + border-width: var(--stroke-width-thin); } .root:hover { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx index 55095a500f8e40..05bdc132ab7393 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx @@ -151,7 +151,7 @@ const Component = () => { @layer fui.components.l4 { .bordered { - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx index e096f25836807a..9cec1635bedc89 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Slider/Slider.mdx @@ -57,7 +57,7 @@ An equivalent `Slider` in v9 is display: grid; align-items: center; grid-template-columns: 1fr auto; - column-gap: var(--spacingHorizontalL); + column-gap: var(--spacing-horizontal-l); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css b/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css index c64ea4eb37566f..a75a92a5b83a6f 100644 --- a/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css +++ b/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css @@ -16,7 +16,7 @@ .area::before { content: 'Container'; position: absolute; - padding: var(--spacingHorizontalMNudge) var(--spacingHorizontalS); + padding: var(--spacing-horizontal-m-nudge) var(--spacing-horizontal-s); top: 0; left: 0; color: var(--colorStatusDangerBackground1); @@ -36,7 +36,7 @@ .boundary::before { content: 'Boundary'; position: absolute; - padding: var(--spacingHorizontalMNudge) var(--spacingHorizontalS); + padding: var(--spacing-horizontal-m-nudge) var(--spacing-horizontal-s); top: 0; left: 0; color: var(--colorNeutralForegroundOnBrand); diff --git a/apps/public-docsite-v9/src/Concepts/Theming.mdx b/apps/public-docsite-v9/src/Concepts/Theming.mdx index d46089358d90db..5c23b8db734a32 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.mdx @@ -69,7 +69,7 @@ For more details, see [Styling components](?path=/docs/concepts-developer-stylin ### Token names are the public contract -Token custom-property names (`--colorNeutralForeground3`, `--spacingHorizontalM`, …) are a supported +Token custom-property names (`--colorNeutralForeground3`, `--spacing-horizontal-m`, …) are a supported public surface: Fluent's own component CSS references them, and so should yours. What is _not_ public is anything below that — the hashed class names on component internals, and the exact rules inside a component's stylesheet. diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css index 26283b4e9a6161..b7aeb82e6f90f9 100644 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css +++ b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css @@ -12,10 +12,10 @@ } .box { - padding: var(--spacingHorizontalM); + padding: var(--spacing-horizontal-m); } .layout { display: flex; - gap: var(--spacingHorizontalM) var(--spacingVerticalM); + gap: var(--spacing-horizontal-m) var(--spacing-vertical-m); } diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css index 7feac2ad59c039..eb701bd005c918 100644 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css +++ b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css @@ -12,16 +12,16 @@ } .box { - padding: var(--spacingHorizontalM); + padding: var(--spacing-horizontal-m); } .horizontalLayout { display: flex; - gap: var(--spacingHorizontalM) var(--spacingVerticalM); + gap: var(--spacing-horizontal-m) var(--spacing-vertical-m); } .verticalLayout { display: flex; flex-direction: column; - gap: var(--spacingHorizontalM) var(--spacingVerticalM); + gap: var(--spacing-horizontal-m) var(--spacing-vertical-m); } diff --git a/apps/vr-tests-react-components/src/stories/Badge/utils.module.css b/apps/vr-tests-react-components/src/stories/Badge/utils.module.css index 1b55d46df8fb42..2c5139d107a03e 100644 --- a/apps/vr-tests-react-components/src/stories/Badge/utils.module.css +++ b/apps/vr-tests-react-components/src/stories/Badge/utils.module.css @@ -27,15 +27,15 @@ .groupSet { display: inline-flex; flex-direction: column; - padding: 0 var(--spacingHorizontalL); - row-gap: var(--spacingVerticalL); + padding: 0 var(--spacing-horizontal-l); + row-gap: var(--spacing-vertical-l); } .group { display: inline-flex; flex-direction: column; align-items: start; - row-gap: var(--spacingVerticalS); + row-gap: var(--spacing-vertical-s); } .groupLabel { @@ -48,5 +48,5 @@ .row { display: inline-flex; align-items: center; - column-gap: var(--spacingHorizontalS); + column-gap: var(--spacing-horizontal-s); } diff --git a/apps/vr-tests-react-components/src/stories/Tree.module.css b/apps/vr-tests-react-components/src/stories/Tree.module.css index 4c70dfc7a65225..a68759d8de820e 100644 --- a/apps/vr-tests-react-components/src/stories/Tree.module.css +++ b/apps/vr-tests-react-components/src/stories/Tree.module.css @@ -6,6 +6,6 @@ display: flex; align-items: center; margin-inline-start: auto; - padding: 0 var(--spacingHorizontalXS); - gap: var(--spacingHorizontalXS); + padding: 0 var(--spacing-horizontal-xs); + gap: var(--spacing-horizontal-xs); } diff --git a/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css b/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css index 8d3b3e92e21588..67bc5c281ebaaf 100644 --- a/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css +++ b/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css @@ -4,16 +4,16 @@ .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); - margin-bottom: var(--spacingVerticalL); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-s); + margin-bottom: var(--spacing-vertical-l); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); } .list { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); - padding: var(--spacingVerticalS) 0; + gap: var(--spacing-vertical-m); + padding: var(--spacing-vertical-s) 0; } diff --git a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css index d9a2f32d39b3b6..f1465e4c899e5b 100644 --- a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css +++ b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css @@ -7,9 +7,9 @@ list-style-type: none; padding: 0; margin: 0; - margin-top: var(--spacingVerticalM); + margin-top: var(--spacing-vertical-m); } .resultItem { - padding: var(--spacingVerticalS) var(--spacingHorizontalS); + padding: var(--spacing-vertical-s) var(--spacing-horizontal-s); } diff --git a/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css b/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css index 1426587f109805..edd44491257131 100644 --- a/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css +++ b/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css @@ -4,16 +4,16 @@ .example { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); + gap: var(--spacing-vertical-s); } .badge { display: flex; - gap: var(--spacingHorizontalS); + gap: var(--spacing-horizontal-s); } .brand { display: flex; background-color: var(--colorBrandBackground); - padding: var(--spacingHorizontalXXS); + padding: var(--spacing-horizontal-xxs); } diff --git a/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css b/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css index f39d5bda79354d..c819291c448075 100644 --- a/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css +++ b/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css @@ -8,7 +8,7 @@ .buttonNonInteractive { background-color: var(--colorNeutralBackground1); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); color: var(--colorNeutralForeground1); cursor: default; pointer-events: none; diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css index ff4f3c0a4dcf8f..787a0ffc1cc50e 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css @@ -11,7 +11,7 @@ .card { display: flex; flex-direction: column; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); border-top-left-radius: 0; border-top-right-radius: 0; @@ -28,7 +28,7 @@ display: flex; flex-direction: column; gap: 6px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-bottom: none; border-radius: var(--borderRadiusMedium); border-bottom-left-radius: 0; diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css index fed3a8dcb47ff0..b16d5d655d6f20 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css @@ -46,7 +46,7 @@ .card { display: flex; flex-direction: column; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); border-top-left-radius: 0; border-top-right-radius: 0; @@ -63,7 +63,7 @@ display: flex; flex-direction: column; gap: 6px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-bottom: none; border-radius: var(--borderRadiusMedium); border-bottom-left-radius: 0; diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css index d4d22c2a1ee9a3..7f8b1d80725081 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css @@ -25,7 +25,7 @@ align-self: center; justify-self: center; width: max-content; - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -51,7 +51,7 @@ .wireframe { background-color: var(--colorNeutralBackground3); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); display: flex; flex-direction: column; gap: 12px; @@ -63,7 +63,7 @@ .wireframeEven { background-color: var(--colorBrandBackground2); - border: var(--strokeWidthThin) solid var(--colorBrandStroke1); + border: var(--stroke-width-thin) solid var(--colorBrandStroke1); } .wireframeInfo { @@ -71,7 +71,7 @@ right: 12px; top: 12px; background-color: var(--colorPaletteRedBackground2); - border: var(--strokeWidthThin) dotted var(--colorPaletteRedBorder2); + border: var(--stroke-width-thin) dotted var(--colorPaletteRedBorder2); font-size: var(--fontSizeBase200); padding: 4px 8px; } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css index a181b0a1878d64..ff4affb67ac545 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css @@ -48,7 +48,7 @@ .wireframe { background-color: var(--colorNeutralBackground3); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); display: flex; flex-direction: column; gap: 12px; @@ -60,7 +60,7 @@ .wireframeEven { background-color: var(--colorBrandBackground2); - border: var(--strokeWidthThin) solid var(--colorBrandStroke1); + border: var(--stroke-width-thin) solid var(--colorBrandStroke1); } .wireframeInfo { @@ -68,7 +68,7 @@ right: 12px; top: 12px; background-color: var(--colorPaletteRedBackground2); - border: var(--strokeWidthThin) dotted var(--colorPaletteRedBorder2); + border: var(--stroke-width-thin) dotted var(--colorPaletteRedBorder2); font-size: var(--fontSizeBase200); padding: 4px 8px; } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css index 79b19cf65e802f..199e6d7f1ac74e 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css @@ -19,12 +19,12 @@ flex-direction: row; justify-content: space-between; width: auto; - padding: var(--spacingVerticalS) var(--spacingVerticalXXL) var(--spacingVerticalXXL) var(--spacingVerticalXXL); + padding: var(--spacing-vertical-s) var(--spacing-vertical-xxl) var(--spacing-vertical-xxl) var(--spacing-vertical-xxl); } .header { display: block; - margin: var(--spacingVerticalXXL) var(--spacingVerticalXXL) var(--spacingVerticalS) var(--spacingVerticalXXL); + margin: var(--spacing-vertical-xxl) var(--spacing-vertical-xxl) var(--spacing-vertical-s) var(--spacing-vertical-xxl); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase500); font-weight: var(--fontWeightSemibold); @@ -33,7 +33,7 @@ .text { display: block; - padding: var(--spacingVerticalS) var(--spacingVerticalXXL); + padding: var(--spacing-vertical-s) var(--spacing-vertical-xxl); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css index 3093a6bfa484ee..56aa81d5719b0b 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css @@ -7,7 +7,7 @@ .wireframe { background-color: var(--colorNeutralBackground3); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); display: flex; flex-direction: column; gap: 12px; @@ -19,7 +19,7 @@ .wireframeEven { background-color: var(--colorBrandBackground2); - border: var(--strokeWidthThin) solid var(--colorBrandStroke1); + border: var(--stroke-width-thin) solid var(--colorBrandStroke1); } .wireframeInfo { @@ -27,7 +27,7 @@ right: 12px; top: 12px; background-color: var(--colorPaletteRedBackground2); - border: var(--strokeWidthThin) dotted var(--colorPaletteRedBorder2); + border: var(--stroke-width-thin) dotted var(--colorPaletteRedBorder2); font-size: var(--fontSizeBase200); padding: 4px 8px; } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css index 635af7dfd7a7e3..a2922a63051244 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css @@ -17,14 +17,14 @@ .cardContainer { display: flex; flex-direction: column; - gap: var(--spacingHorizontalS); + gap: var(--spacing-horizontal-s); position: absolute; left: 10%; top: 25%; border-radius: var(--borderRadiusLarge); box-shadow: var(--shadow8); background: var(--colorNeutralBackground1); - padding: var(--spacingHorizontalXXL) var(--spacingVerticalXXXL); + padding: var(--spacing-horizontal-xxl) var(--spacing-vertical-xxxl); max-width: 270px; width: 50%; } @@ -37,7 +37,7 @@ } .subtext { - margin-bottom: var(--spacingVerticalM); + margin-bottom: var(--spacing-vertical-m); font-family: var(--fontFamilyBase); font-size: var(--fontSizeBase300); font-weight: var(--fontWeightRegular); @@ -56,14 +56,14 @@ .carousel { flex: 1; - padding-bottom: var(--spacingVerticalXL); + padding-bottom: var(--spacing-vertical-xl); } .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalSNudge); - padding: var(--spacingHorizontalMNudge) var(--spacingVerticalMNudge); + gap: var(--spacing-vertical-s-nudge); + padding: var(--spacing-horizontal-m-nudge) var(--spacing-vertical-m-nudge); } .field { @@ -79,8 +79,8 @@ display: flex; justify-content: space-between; align-items: center; - gap: var(--spacingVerticalSNudge); - margin-bottom: var(--spacingHorizontalL); + gap: var(--spacing-vertical-s-nudge); + margin-bottom: var(--spacing-horizontal-l); } .carouselHeaderTitle { @@ -97,6 +97,6 @@ } .slider { - gap: var(--spacingVerticalXXL); - padding: 0 var(--spacingVerticalXXL); + gap: var(--spacing-vertical-xxl); + padding: 0 var(--spacing-vertical-xxl); } diff --git a/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css index 7a83d9fc2de142..dfb41599e7bfdc 100644 --- a/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css +++ b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css @@ -13,7 +13,7 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); border-top-left-radius: 0; border-top-right-radius: 0; @@ -24,7 +24,7 @@ .controls { display: flex; flex-direction: column; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-bottom: none; border-radius: var(--borderRadiusMedium); border-bottom-left-radius: 0; diff --git a/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.module.css b/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.module.css index e72cb08e7666bf..e7d9a8187e401e 100644 --- a/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.module.css +++ b/packages/react-components/react-color-picker/stories/src/ColorPicker/ColorAndSwatchPicker.module.css @@ -13,7 +13,7 @@ height: 50px; border-radius: var(--borderRadiusMedium); border: 1px solid var(--colorNeutralStroke1); - margin: var(--spacingVerticalMNudge) 0; + margin: var(--spacing-vertical-m-nudge) 0; } @media (forced-colors: active) { @@ -23,12 +23,12 @@ } .button { - margin-inline-end: var(--spacingHorizontalS); + margin-inline-end: var(--spacing-horizontal-s); } .input { display: block; - margin: var(--spacingVerticalSNudge) 0; + margin: var(--spacing-vertical-s-nudge) 0; } .row { diff --git a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.module.css b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.module.css index 703e25d7ec310b..5e04304312c346 100644 --- a/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.module.css +++ b/packages/react-components/react-combobox/stories/src/Combobox/ComboboxMultiselectWithTags.module.css @@ -11,9 +11,9 @@ .tagsList { list-style-type: none; - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); margin-top: 0; display: flex; - grid-gap: var(--spacingHorizontalXXS); + grid-gap: var(--spacing-horizontal-xxs); padding-inline-start: 0; } diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.module.css b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.module.css index 3aa52c8535fae9..4df00bced33a44 100644 --- a/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.module.css +++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogBackdropAppearance.module.css @@ -3,6 +3,6 @@ .field { display: grid; - grid-row-gap: var(--spacingVerticalS); - margin-bottom: var(--spacingVerticalL); + grid-row-gap: var(--spacing-vertical-s); + margin-bottom: var(--spacing-vertical-l); } diff --git a/packages/react-components/react-dialog/stories/src/Dialog/DialogMotionCustom.module.css b/packages/react-components/react-dialog/stories/src/Dialog/DialogMotionCustom.module.css index 81ae9c93463086..2f454fc0cc9b66 100644 --- a/packages/react-components/react-dialog/stories/src/Dialog/DialogMotionCustom.module.css +++ b/packages/react-components/react-dialog/stories/src/Dialog/DialogMotionCustom.module.css @@ -4,9 +4,9 @@ .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); - margin-bottom: var(--spacingVerticalL); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-s); + margin-bottom: var(--spacing-vertical-l); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.module.css index f0a079e80ba266..4a383e88b96a2d 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerCustomSize.module.css @@ -4,10 +4,10 @@ .main { display: grid; justify-content: flex-start; - grid-row-gap: var(--spacingVerticalXXL); + grid-row-gap: var(--spacing-vertical-xxl); } .field { display: grid; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.module.css index 0717dbab074a35..a140716168d18d 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerDefault.module.css @@ -15,11 +15,11 @@ display: grid; justify-content: flex-start; align-items: flex-start; - grid-row-gap: var(--spacingVerticalXXL); + grid-row-gap: var(--spacing-vertical-xxl); grid-auto-rows: max-content; } .field { display: grid; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.module.css index da9aa7f3320253..b3475bf11eacd2 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerKeepRenderedInTheDOM.module.css @@ -15,11 +15,11 @@ display: grid; justify-content: flex-start; align-items: flex-start; - grid-row-gap: var(--spacingVerticalXXL); + grid-row-gap: var(--spacing-vertical-xxl); grid-auto-rows: max-content; } .field { display: grid; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css index fc907e12824d69..45da673d4804ee 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css @@ -24,7 +24,7 @@ display: grid; justify-content: flex-start; align-items: flex-start; - gap: var(--spacingVerticalM); + gap: var(--spacing-vertical-m); grid-auto-rows: max-content; box-sizing: border-box; position: absolute; diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.module.css index 6ca9171da4f297..f61dae87a2efe2 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionDisabled.module.css @@ -15,11 +15,11 @@ display: grid; justify-content: flex-start; align-items: flex-start; - gap: var(--spacingVerticalXXL); + gap: var(--spacing-vertical-xxl); grid-auto-rows: max-content; } .field { display: grid; - gap: var(--spacingVerticalS); + gap: var(--spacing-vertical-s); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.module.css index 4c5cf8c09cfd30..af365a9ae5e5b7 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerPosition.module.css @@ -5,5 +5,5 @@ display: flex; justify-content: center; align-items: flex-start; - column-gap: var(--spacingHorizontalXS); + column-gap: var(--spacing-horizontal-xs); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css index e4ba8c287d3904..8b830994df8616 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css @@ -64,7 +64,7 @@ } .content { - margin: var(--spacingVerticalXL) var(--spacingHorizontalXL); + margin: var(--spacing-vertical-xl) var(--spacing-horizontal-xl); flex: 1; } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.module.css index 3f2684cb52365b..f28c9b6d111350 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResponsive.module.css @@ -10,7 +10,7 @@ } .content { - margin: var(--spacingVerticalXL) var(--spacingHorizontalXL); + margin: var(--spacing-vertical-xl) var(--spacing-horizontal-xl); flex: 1; - grid-row-gap: var(--spacingVerticalXXL); + grid-row-gap: var(--spacing-vertical-xxl); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.module.css index a438b77ba30872..bd82a8c5f0b52d 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSeparator.module.css @@ -15,7 +15,7 @@ display: flex; justify-content: center; align-items: flex-start; - column-gap: var(--spacingHorizontalXS); + column-gap: var(--spacing-horizontal-xs); } .flexColumn { diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.module.css index 31d632418b920a..8770783fa09e35 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerSize.module.css @@ -4,10 +4,10 @@ .main { display: grid; justify-content: flex-start; - grid-row-gap: var(--spacingVerticalXXL); + grid-row-gap: var(--spacing-vertical-xxl); } .field { display: grid; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithScroll.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithScroll.module.css index 3b60390addf043..632bae1e423c19 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithScroll.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerWithScroll.module.css @@ -4,7 +4,7 @@ .root { display: flex; flex-wrap: wrap; - gap: var(--spacingHorizontalXXL); + gap: var(--spacing-horizontal-xxl); } .drawer { diff --git a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css index 7d9ec27d2e53ee..e123389cdb03b5 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css @@ -31,7 +31,7 @@ flex-wrap: wrap; justify-content: center; align-items: flex-start; - column-gap: var(--spacingHorizontalXS); + column-gap: var(--spacing-horizontal-xs); background-color: #fff; transition-duration: var(--durationFast); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css index 58836f320c299e..a82a21d37f6dd3 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css @@ -4,15 +4,15 @@ .root { display: flex; align-items: flex-start; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); } .container { width: 500px; height: 300px; - padding: var(--spacingVerticalL) var(--spacingHorizontalL); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-l); position: relative; overflow: hidden; - border: var(--strokeWidthThicker) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thicker) solid var(--colorNeutralStroke1); background-color: var(--colorBrandBackground2); } diff --git a/packages/react-components/react-field/stories/src/Field/FieldComponentExamples.module.css b/packages/react-components/react-field/stories/src/Field/FieldComponentExamples.module.css index aa9872abe1fbd6..efd7387dbbbd5b 100644 --- a/packages/react-components/react-field/stories/src/Field/FieldComponentExamples.module.css +++ b/packages/react-components/react-field/stories/src/Field/FieldComponentExamples.module.css @@ -4,5 +4,5 @@ .stack { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalL); + row-gap: var(--spacing-vertical-l); } diff --git a/packages/react-components/react-field/stories/src/Field/FieldSize.module.css b/packages/react-components/react-field/stories/src/Field/FieldSize.module.css index 46179a5bdb7fa8..80b25415582763 100644 --- a/packages/react-components/react-field/stories/src/Field/FieldSize.module.css +++ b/packages/react-components/react-field/stories/src/Field/FieldSize.module.css @@ -4,5 +4,5 @@ .stack { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalL); + row-gap: var(--spacing-vertical-l); } From 9cdc27f05f59262189116de8b56a59a5a869cc7b Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:14:32 -0700 Subject: [PATCH 588/640] refactor(theming): repoint old camelCase token var() references to canonical names (3) Mechanical follow-through of the option-B removal: every raw var() reference to an old camelCase spacing/stroke variable in react-domain source repoints to the canonical kebab name (651 replacements / 197 files total, exact-name longest-first mapping; script .scratch/phase1-theming/repoint-oldnames.mjs). web-components excluded: separate system that defines its own camelCase vars. VR: full 76/76-set sweep at zero tolerance on the converted output. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../Field/FieldValidationMessage.module.css | 2 +- .../src/InfoLabel/InfoLabelSize.module.css | 2 +- .../src/Input/InputAppearance.module.css | 6 ++--- .../src/Input/InputDisabled.module.css | 8 +++--- .../src/MessageBar/Animation.module.css | 2 +- .../stories/src/MessageBar/Dismiss.module.css | 2 +- .../src/ThemeShim/ThemePreviewV9.module.css | 16 ++++++------ .../stories/src/Atoms/AtomsDemo.module.css | 22 ++++++++-------- .../src/Atoms/ComposingAtomsDemo.module.css | 24 ++++++++--------- .../stories/src/Blur/Blur.module.css | 2 +- .../stories/src/Blur/BlurDefault.module.css | 8 +++--- .../stories/src/Blur/BlurDuration.module.css | 2 +- .../stories/src/Blur/BlurOpacity.module.css | 2 +- .../stories/src/Blur/BlurRadius.module.css | 10 +++---- .../stories/src/Collapse/Collapse.module.css | 2 +- .../Collapse/CollapseCustomization.module.css | 10 +++---- .../src/Collapse/CollapseDefault.module.css | 8 +++--- .../src/Collapse/CollapseDelayed.module.css | 8 +++--- .../Collapse/CollapseHorizontal.module.css | 4 +-- .../src/Collapse/CollapseRelaxed.module.css | 8 +++--- .../src/Collapse/CollapseSnappy.module.css | 8 +++--- .../stories/src/Fade/Fade.module.css | 2 +- .../src/Fade/FadeCustomization.module.css | 10 +++---- .../stories/src/Fade/FadeDefault.module.css | 8 +++--- .../stories/src/Fade/FadeRelaxed.module.css | 8 +++--- .../stories/src/Fade/FadeSnappy.module.css | 8 +++--- .../Introduction/ComponentsGrid.module.css | 14 +++++----- .../src/Introduction/InOutDemo.module.css | 16 ++++++------ .../src/Introduction/VariantsDemo.module.css | 16 ++++++------ .../stories/src/Rotate/Rotate.module.css | 2 +- .../src/Rotate/RotateCardFlip.module.css | 10 +++---- .../src/Rotate/RotateDefault.module.css | 26 +++++++++---------- .../stories/src/Scale/Scale.module.css | 2 +- .../src/Scale/ScaleCustomization.module.css | 10 +++---- .../stories/src/Scale/ScaleDefault.module.css | 8 +++--- .../stories/src/Scale/ScaleRelaxed.module.css | 8 +++--- .../stories/src/Scale/ScaleSnappy.module.css | 8 +++--- .../stories/src/Slide/Slide.module.css | 2 +- .../stories/src/Slide/SlideDefault.module.css | 8 +++--- .../src/Slide/SlideDirections.module.css | 2 +- 40 files changed, 162 insertions(+), 162 deletions(-) diff --git a/packages/react-components/react-field/stories/src/Field/FieldValidationMessage.module.css b/packages/react-components/react-field/stories/src/Field/FieldValidationMessage.module.css index ad3eb2ccccee05..089486c929dbf7 100644 --- a/packages/react-components/react-field/stories/src/Field/FieldValidationMessage.module.css +++ b/packages/react-components/react-field/stories/src/Field/FieldValidationMessage.module.css @@ -4,5 +4,5 @@ .stack { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalL); + row-gap: var(--spacing-vertical-l); } diff --git a/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelSize.module.css b/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelSize.module.css index 9722723f9d8a4f..4a271db9dcf8a5 100644 --- a/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelSize.module.css +++ b/packages/react-components/react-infolabel/stories/src/InfoLabel/InfoLabelSize.module.css @@ -5,5 +5,5 @@ align-items: start; display: flex; flex-direction: column; - row-gap: var(--spacingVerticalL); + row-gap: var(--spacing-vertical-l); } diff --git a/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css b/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css index c5300e3e240041..afb7bcb304fa32 100644 --- a/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css +++ b/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css @@ -9,9 +9,9 @@ .field { display: grid; - grid-row-gap: var(--spacingVerticalXXS); - margin-top: var(--spacingVerticalMNudge); - padding: var(--spacingHorizontalMNudge); + grid-row-gap: var(--spacing-vertical-xxs); + margin-top: var(--spacing-vertical-m-nudge); + padding: var(--spacing-horizontal-m-nudge); } .filledLighter { diff --git a/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css b/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css index 1cdc72950f37af..a890bd307e76f3 100644 --- a/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css +++ b/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css @@ -9,9 +9,9 @@ .field { display: grid; - grid-row-gap: var(--spacingVerticalXXS); - margin-top: var(--spacingVerticalMNudge); - padding: var(--spacingHorizontalMNudge); + grid-row-gap: var(--spacing-vertical-xxs); + margin-top: var(--spacing-vertical-m-nudge); + padding: var(--spacing-horizontal-m-nudge); } .filledLighter { @@ -31,5 +31,5 @@ } .toggle { - margin-top: var(--spacingVerticalXL); + margin-top: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css b/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css index 12021e4a5a024a..e60b75af413c67 100644 --- a/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css +++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css @@ -7,7 +7,7 @@ } .messageBarGroup { - padding: var(--spacingHorizontalMNudge); + padding: var(--spacing-horizontal-m-nudge); display: flex; flex-direction: column; margin-top: 10px; diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css b/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css index eba55cc2eb38fb..6cde2ed38c24b6 100644 --- a/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css +++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .messageBarGroup { - padding: var(--spacingHorizontalMNudge); + padding: var(--spacing-horizontal-m-nudge); display: flex; flex-direction: column; margin-top: 10px; diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV9.module.css b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV9.module.css index 7b87c4328b64ea..2bbb2815dded2b 100644 --- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV9.module.css +++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/ThemePreviewV9.module.css @@ -11,29 +11,29 @@ justify-content: center; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; - grid-column-gap: var(--spacingHorizontalXXXL); + grid-column-gap: var(--spacing-horizontal-xxxl); } .col1 { display: flex; justify-content: space-between; flex-direction: column; - gap: var(--spacingVerticalL); + gap: var(--spacing-vertical-l); } .col2 { display: flex; flex-direction: column; align-items: center; - gap: var(--spacingVerticalL); + gap: var(--spacing-vertical-l); } .col3 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); - grid-row-gap: var(--spacingVerticalS); - grid-column-gap: var(--spacingHorizontalS); + grid-row-gap: var(--spacing-vertical-s); + grid-column-gap: var(--spacing-horizontal-s); justify-content: center; align-items: center; } @@ -54,14 +54,14 @@ display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; - grid-row-gap: var(--spacingVerticalS); - grid-column-gap: var(--spacingHorizontalS); + grid-row-gap: var(--spacing-vertical-s); + grid-column-gap: var(--spacing-horizontal-s); justify-content: center; } .avatar { display: flex; - gap: var(--spacingVerticalL); + gap: var(--spacing-vertical-l); } .avatarText { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css index 51055f80d1d812..3ef097137f8355 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css @@ -4,21 +4,21 @@ .container { display: flex; flex-direction: column; - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); - margin-top: var(--spacingVerticalXXL); - margin-bottom: var(--spacingVerticalXXL); + margin-top: var(--spacing-vertical-xxl); + margin-bottom: var(--spacing-vertical-xxl); overflow: hidden; } .controls { display: flex; align-items: center; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); flex-wrap: wrap; - padding: var(--spacingVerticalL) var(--spacingHorizontalXL); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl); background-color: var(--colorNeutralBackground2); - border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-bottom: var(--stroke-width-thin) solid var(--colorNeutralStroke1); } .body { @@ -38,14 +38,14 @@ min-height: 120px; flex: 0 0 200px; background-color: var(--colorNeutralBackground1); - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } .demoBox { width: 100px; height: 80px; background-color: var(--colorNeutralBackground3); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); display: flex; align-items: center; @@ -58,9 +58,9 @@ flex: 1 1 auto; min-width: 0; margin: 0; - padding: var(--spacingVerticalL) var(--spacingHorizontalXL); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl); background-color: var(--colorNeutralBackground3); - border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-left: var(--stroke-width-thin) solid var(--colorNeutralStroke1); overflow: auto; font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase100); @@ -71,6 +71,6 @@ @media (max-width: 600px) { .codeArea { border-left: none; - border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-top: var(--stroke-width-thin) solid var(--colorNeutralStroke1); } } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css index 37fc8acb59d9c7..60d92ca69df210 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css @@ -2,20 +2,20 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); overflow: hidden; - margin-top: var(--spacingVerticalXXL); - margin-bottom: var(--spacingVerticalXXL); + margin-top: var(--spacing-vertical-xxl); + margin-bottom: var(--spacing-vertical-xxl); } .header { display: flex; align-items: center; justify-content: space-between; - padding: var(--spacingVerticalM) var(--spacingHorizontalXL); + padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl); background-color: var(--colorNeutralBackground2); - border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-bottom: var(--stroke-width-thin) solid var(--colorNeutralStroke1); } .title { @@ -40,7 +40,7 @@ justify-content: center; flex: 1 1 auto; min-height: 120px; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); background-color: var(--colorNeutralBackground1); } @@ -53,14 +53,14 @@ .buttonRow { display: flex; justify-content: center; - padding: var(--spacingVerticalM) var(--spacingHorizontalXL) var(--spacingVerticalL); + padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl) var(--spacing-vertical-l); background-color: var(--colorNeutralBackground1); } .demoBox { - padding: var(--spacingVerticalL) var(--spacingHorizontalXXL); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-xxl); background-color: var(--colorNeutralBackground3); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase300); @@ -71,16 +71,16 @@ .codeArea { flex: 1 1 auto; min-width: 0; - padding: var(--spacingVerticalL) var(--spacingHorizontalXL); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl); background-color: var(--colorNeutralBackground1); - border-left: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-left: var(--stroke-width-thin) solid var(--colorNeutralStroke1); overflow: auto; } @media (max-width: 600px) { .codeArea { border-left: none; - border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-top: var(--stroke-width-thin) solid var(--colorNeutralStroke1); } } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/Blur.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/Blur.module.css index 9c20e20d626cad..3cd1d6177ddb8f 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/Blur.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/Blur.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css index ac8585cc7c4bdb..187cd8c17e78ec 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css index e2b219538943cb..e5f22be326e62b 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css @@ -19,7 +19,7 @@ width: 200px; height: 120px; padding: 20px; - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); display: flex; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css index 43d803ab1463b6..46926f5b4deeff 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css @@ -19,7 +19,7 @@ width: 250px; height: 180px; padding: 20px; - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); display: flex; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css index 321fca1d7812fd..1f23f9b3adf63f 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css @@ -4,8 +4,8 @@ .container { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--spacingVerticalXXXL); - padding: var(--spacingVerticalMNudge); + gap: var(--spacing-vertical-xxxl); + padding: var(--spacing-vertical-m-nudge); } .card { @@ -13,8 +13,8 @@ flex-direction: column; justify-content: center; align-items: center; - padding: var(--spacingVerticalXL); - gap: var(--spacingVerticalM); + padding: var(--spacing-vertical-xl); + gap: var(--spacing-vertical-m); } .cellNormal { @@ -28,5 +28,5 @@ .controls { display: flex; justify-content: center; - margin-top: var(--spacingVerticalXL); + margin-top: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.module.css index 47e4ada11f1930..d8123fd98bb8fb 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/Collapse.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css index 6547e0f95efd88..58f2b5a3084180 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } .cardContent { @@ -25,10 +25,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { @@ -45,7 +45,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css index cc3ffbef2b111e..fc3e1128fa2eb0 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } .cardContent { @@ -21,10 +21,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css index d7fbc9f3066f35..be5fde9141e877 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } .cardContent { @@ -21,10 +21,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css index c5f9d30b44a2ea..1af486e7e4c5ac 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css @@ -25,10 +25,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css index 51357e5e46e68c..82f4e710d1d575 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } .cardContent { @@ -21,10 +21,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css index cc1dd93d478606..90a44b5bd4404d 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } .cardContent { @@ -21,10 +21,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.module.css index 3e87299628907b..d857761c6c703e 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/Fade.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css index 2bf963cbe8b2de..77cd01082baa8b 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -22,10 +22,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { @@ -42,7 +42,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css index 8f0b5164f6cd32..4507bad8069525 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css index ec9447a891a73d..c18d702b0abf87 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css index 7615004949e2cb..415109a47694eb 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css b/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css index 1ec07de9e0a5b2..55addce2d80201 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css @@ -4,18 +4,18 @@ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: var(--spacingHorizontalL); - margin-top: var(--spacingVerticalXXL); - margin-bottom: var(--spacingVerticalXXL); + gap: var(--spacing-horizontal-l); + margin-top: var(--spacing-vertical-xxl); + margin-bottom: var(--spacing-vertical-xxl); } .card { display: flex; flex-direction: column; align-items: center; - gap: var(--spacingVerticalM); - padding: var(--spacingVerticalXL); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + gap: var(--spacing-vertical-m); + padding: var(--spacing-vertical-xl); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } @@ -38,7 +38,7 @@ width: 50px; height: 50px; background-color: var(--colorNeutralBackground3); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusSmall); display: flex; align-items: center; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css index 08cf40287d286e..a5ccd3a5d98d98 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css @@ -4,9 +4,9 @@ .container { display: grid; grid-template-columns: repeat(3, 1fr); - gap: var(--spacingHorizontalL); - margin-top: var(--spacingVerticalXXL); - margin-bottom: var(--spacingVerticalXXL); + gap: var(--spacing-horizontal-l); + margin-top: var(--spacing-vertical-xxl); + margin-bottom: var(--spacing-vertical-xxl); } @media (max-width: 600px) { @@ -19,9 +19,9 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacingVerticalM); - padding: var(--spacingVerticalXL); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + gap: var(--spacing-vertical-m); + padding: var(--spacing-vertical-xl); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } @@ -43,7 +43,7 @@ font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase200); background-color: var(--colorNeutralBackground4); - padding: var(--spacingVerticalXXS) var(--spacingHorizontalSNudge); + padding: var(--spacing-vertical-xxs) var(--spacing-horizontal-s-nudge); border-radius: var(--borderRadiusSmall); } @@ -70,6 +70,6 @@ .button { min-width: auto; - padding: var(--spacingVerticalXS) var(--spacingHorizontalM); + padding: var(--spacing-vertical-xs) var(--spacing-horizontal-m); font-size: var(--fontSizeBase200); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css index 1d84c17698fec7..2203cb139b2cf6 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css @@ -3,15 +3,15 @@ .toolbar { text-align: center; - margin-bottom: var(--spacingVerticalL); + margin-bottom: var(--spacing-vertical-l); } .container { display: grid; grid-template-columns: repeat(3, 1fr); - gap: var(--spacingHorizontalL); - margin-top: var(--spacingVerticalXXL); - margin-bottom: var(--spacingVerticalXXL); + gap: var(--spacing-horizontal-l); + margin-top: var(--spacing-vertical-xxl); + margin-bottom: var(--spacing-vertical-xxl); } @media (max-width: 600px) { @@ -24,9 +24,9 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacingVerticalM); - padding: var(--spacingVerticalXL); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + gap: var(--spacing-vertical-m); + padding: var(--spacing-vertical-xl); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } @@ -67,6 +67,6 @@ .button { min-width: auto; - padding: var(--spacingVerticalXS) var(--spacingHorizontalM); + padding: var(--spacing-vertical-xs) var(--spacing-horizontal-m); font-size: var(--fontSizeBase200); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/Rotate.module.css b/packages/react-components/react-motion-components-preview/stories/src/Rotate/Rotate.module.css index 8d1871eb65e996..3e2745d5435c5a 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/Rotate.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/Rotate.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css index 577caefb24d02d..c7a2a603c7111a 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css @@ -6,23 +6,23 @@ .container { display: flex; flex-direction: column; - gap: var(--spacingVerticalXL); /* 20px */ - padding: var(--spacingVerticalXL); /* 20px */ + gap: var(--spacing-vertical-xl); /* 20px */ + padding: var(--spacing-vertical-xl); /* 20px */ max-width: 1000px; } .controls { display: flex; - gap: var(--spacingHorizontalMNudge); /* 10px */ + gap: var(--spacing-horizontal-m-nudge); /* 10px */ align-items: center; flex-wrap: wrap; - margin-bottom: var(--spacingVerticalXL); /* 20px */ + margin-bottom: var(--spacing-vertical-xl); /* 20px */ } .patternsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: var(--spacingVerticalXL); /* 20px */ + gap: var(--spacing-vertical-xl); /* 20px */ } .cardWrapper { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css index 76818800537ee4..62836e0ba07879 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingHorizontalMNudge); + padding: var(--spacing-horizontal-m-nudge); } .cardHeaderText { @@ -20,32 +20,32 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingHorizontalL); - gap: var(--spacingVerticalL); + padding: var(--spacing-horizontal-l); + gap: var(--spacing-vertical-l); } .controlSection { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); + gap: var(--spacing-vertical-m); } .sectionHeader { font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground2); - margin-bottom: var(--spacingVerticalXS); - border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); - padding-bottom: var(--spacingVerticalXS); + margin-bottom: var(--spacing-vertical-xs); + border-bottom: var(--stroke-width-thin) solid var(--colorNeutralStroke2); + padding-bottom: var(--spacing-vertical-xs); } .toggleGroup { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--spacingHorizontalM); + gap: var(--spacing-horizontal-m); } .ctaButton { @@ -55,19 +55,19 @@ .field { display: flex; flex-direction: column; - gap: var(--spacingVerticalXS); + gap: var(--spacing-vertical-xs); } .sliderField { display: flex; flex-direction: column; - gap: var(--spacingVerticalXS); + gap: var(--spacing-vertical-xs); } .sliderWrapper { display: flex; align-items: center; - gap: var(--spacingHorizontalS); + gap: var(--spacing-horizontal-s); } .sliderLabel { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.module.css index 33d279c4837491..39e2bcf0732aad 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/Scale.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css index 9b3bae8bb1a605..7877cc67e0702a 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -22,10 +22,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { @@ -42,7 +42,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css index b9790b3d95c178..e371a1a973054b 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css index 8a31fb85ddd44c..1a6eaa97897656 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css index 2103b3097ead0c..bf5485ddc383b1 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/Slide.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/Slide.module.css index 0614c431ea1d4e..738f50a903fb78 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/Slide.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/Slide.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css index 2b8fa67a7fa92b..be0d586d88b609 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -18,10 +18,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css index 013e70fb74bc3c..29916068b5a38a 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css @@ -43,7 +43,7 @@ } .demo { - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); padding: 20px; position: relative; From 66c85fbfdfef6573f5fecfced38503be36c55ed0 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:14:34 -0700 Subject: [PATCH 589/640] refactor(theming): repoint old camelCase token var() references to canonical names (4) Mechanical follow-through of the option-B removal: every raw var() reference to an old camelCase spacing/stroke variable in react-domain source repoints to the canonical kebab name (651 replacements / 197 files total, exact-name longest-first mapping; script .scratch/phase1-theming/repoint-oldnames.mjs). web-components excluded: separate system that defines its own camelCase vars. VR: full 76/76-set sweep at zero tolerance on the converted output. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../stories/src/Slide/SlideRelaxed.module.css | 8 ++--- .../stories/src/Slide/SlideSnappy.module.css | 8 ++--- .../Stagger/StaggerBouncingDots.module.css | 24 +++++++------- .../Stagger/StaggerDelayMode.module.css | 32 +++++++++---------- .../StaggerExpandableContainer.module.css | 12 +++---- .../Stagger/StaggerHideMode.module.css | 28 ++++++++-------- .../Stagger/StaggerItemDelay.module.css | 10 +++--- .../Stagger/StaggerPlainElements.module.css | 6 ++-- .../Stagger/StaggerPresence.module.css | 6 ++-- .../Stagger/StaggerReversed.module.css | 6 ++-- .../Stagger/StaggerSpinners.module.css | 24 +++++++------- .../Stagger/StaggerStaggerIn.module.css | 2 +- .../Stagger/StaggerStaggerOut.module.css | 2 +- .../Stagger/StaggerText.module.css | 6 ++-- .../CreateMotionComponentArrays.module.css | 4 +-- .../CreateMotionComponentDefault.module.css | 4 +-- .../CreateMotionComponentFactory.module.css | 4 +-- ...teMotionComponentFunctionParams.module.css | 6 ++-- .../CreateMotionComponentFunctions.module.css | 6 ++-- ...ComponentImperativeRefPlayState.module.css | 6 ++-- ...tionComponentLifecycleCallbacks.module.css | 8 ++--- ...reateMotionComponentTokensUsage.module.css | 2 +- ...teMotionComponentVariantDefault.module.css | 6 ++-- .../CreatePresenceComponentAppear.module.css | 6 ++-- .../CreatePresenceComponentArrays.module.css | 4 +-- .../CreatePresenceComponentDefault.module.css | 6 ++-- .../CreatePresenceComponentFactory.module.css | 6 ++-- ...PresenceComponentFunctionParams.module.css | 6 ++-- ...reatePresenceComponentFunctions.module.css | 6 ++-- ...CreatePresenceComponentInAndOut.module.css | 4 +-- ...enceComponentLifecycleCallbacks.module.css | 8 ++--- ...ePresenceComponentReducedMotion.module.css | 6 ++-- ...ePresenceComponentUnmountOnExit.module.css | 6 ++-- .../Introduction/MotionIntroDemo.module.css | 6 ++-- .../MotionVsPresenceDemo.module.css | 22 ++++++------- .../src/Motion/DirectParams.module.css | 20 ++++++------ .../MotionSlotCustomize.module.css | 2 +- .../MotionSlotDefault.module.css | 2 +- .../MotionSlotDisable.module.css | 2 +- .../PresenceGroupDefault.module.css | 4 +-- 40 files changed, 168 insertions(+), 168 deletions(-) diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css index 33916810f72af6..b9b40418c05da7 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -22,10 +22,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css index 3acd7964eaa824..634d99ab37aeba 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css @@ -4,12 +4,12 @@ .container { display: grid; grid-template: 'controls .' 'card card' / 1fr 1fr; - gap: var(--spacingVerticalXL) var(--spacingHorizontalMNudge); + gap: var(--spacing-vertical-xl) var(--spacing-horizontal-m-nudge); } .card { grid-area: card; - padding: var(--spacingVerticalXL); + padding: var(--spacing-vertical-xl); max-height: 300px; overflow: hidden; } @@ -22,10 +22,10 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); - padding: var(--spacingVerticalMNudge); + padding: var(--spacing-vertical-m-nudge); } .field { diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css index f43b5a16b25274..3053c45bbf9f73 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css @@ -4,16 +4,16 @@ .container { display: flex; flex-direction: column; - gap: var(--spacingVerticalXL); - padding: var(--spacingHorizontalL); + gap: var(--spacing-vertical-xl); + padding: var(--spacing-horizontal-l); } .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); - padding: var(--spacingHorizontalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-m); + padding: var(--spacing-horizontal-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow8); @@ -21,7 +21,7 @@ .controlsRow { display: flex; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); justify-content: center; align-items: center; flex-wrap: wrap; @@ -30,16 +30,16 @@ .controlGroup { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); + gap: var(--spacing-vertical-s); min-width: 200px; } .spinnerSection { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); - padding: var(--spacingHorizontalL); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + gap: var(--spacing-vertical-m); + padding: var(--spacing-horizontal-l); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } @@ -56,12 +56,12 @@ justify-content: center; align-items: center; min-height: 120px; - padding: var(--spacingHorizontalL); + padding: var(--spacing-horizontal-l); } .bouncingDotsSpinner { display: flex; - gap: var(--spacingHorizontalS); + gap: var(--spacing-horizontal-s); align-items: center; } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css index 56ae298a024aef..1bbf9e6bb0f920 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css @@ -4,15 +4,15 @@ .container { display: flex; flex-direction: column; - gap: var(--spacingVerticalXL); + gap: var(--spacing-vertical-xl); } .controls { display: flex; - gap: var(--spacingHorizontalM); + gap: var(--spacing-horizontal-m); align-items: center; - padding: var(--spacingVerticalM); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusSmall); background-color: var(--colorNeutralBackground2); } @@ -20,36 +20,36 @@ .comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); } .section { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); + gap: var(--spacing-vertical-m); } .sectionTitle { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1); - margin-bottom: var(--spacingVerticalXS); + margin-bottom: var(--spacing-vertical-xs); } .modeHeader { display: flex; - gap: var(--spacingHorizontalS); + gap: var(--spacing-horizontal-s); align-items: center; - margin-bottom: var(--spacingVerticalS); + margin-bottom: var(--spacing-vertical-s); } .items { display: flex; flex-wrap: wrap; align-items: flex-start; - gap: var(--spacingHorizontalS); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThin) dashed var(--colorNeutralStroke2); + gap: var(--spacing-horizontal-s); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thin) dashed var(--colorNeutralStroke2); border-radius: var(--borderRadiusSmall); min-height: 80px; position: relative; @@ -58,7 +58,7 @@ .description { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); - margin-top: var(--spacingVerticalXS); + margin-top: var(--spacing-vertical-xs); } .badge { @@ -66,9 +66,9 @@ font-weight: var(--fontWeightMedium); color: var(--colorBrandForeground1); background-color: var(--colorBrandBackground2); - padding: var(--spacingVerticalXXS) var(--spacingHorizontalXS); + padding: var(--spacing-vertical-xxs) var(--spacing-horizontal-xs); border-radius: var(--borderRadiusSmall); position: absolute; - top: var(--spacingVerticalXS); - right: var(--spacingHorizontalXS); + top: var(--spacing-vertical-xs); + right: var(--spacing-horizontal-xs); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css index f340b92299674b..28edc89dc316ae 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css @@ -6,13 +6,13 @@ .container { display: flex; flex-direction: column; - gap: var(--spacingVerticalL); + gap: var(--spacing-vertical-l); max-width: 300px; } .controls { display: flex; - gap: var(--spacingHorizontalM); + gap: var(--spacing-horizontal-m); align-items: center; } @@ -20,7 +20,7 @@ display: flex; flex-direction: row; align-items: center; - gap: var(--spacingVerticalS); + gap: var(--spacing-vertical-s); } .sliderLabel { @@ -35,7 +35,7 @@ } .listContainer { - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } @@ -43,8 +43,8 @@ .list { display: flex; flex-direction: column; - padding: var(--spacingVerticalL); - gap: var(--spacingVerticalL); + padding: var(--spacing-vertical-l); + gap: var(--spacing-vertical-l); } .item { diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css index bb9172974f706b..dc03effb879eef 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css @@ -4,15 +4,15 @@ .container { display: flex; flex-direction: column; - gap: var(--spacingVerticalXL); + gap: var(--spacing-vertical-xl); } .controls { display: flex; - gap: var(--spacingHorizontalM); + gap: var(--spacing-horizontal-m); align-items: center; - padding: var(--spacingVerticalM); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusSmall); background-color: var(--colorNeutralBackground2); } @@ -20,29 +20,29 @@ .comparison { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); } .section { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); + gap: var(--spacing-vertical-m); } .sectionTitle { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1); - margin-bottom: var(--spacingVerticalXS); + margin-bottom: var(--spacing-vertical-xs); } .items { display: flex; flex-wrap: wrap; align-items: flex-start; - gap: var(--spacingHorizontalS); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThin) dashed var(--colorNeutralStroke2); + gap: var(--spacing-horizontal-s); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thin) dashed var(--colorNeutralStroke2); border-radius: var(--borderRadiusSmall); min-height: 80px; position: relative; @@ -51,7 +51,7 @@ .description { font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground3); - margin-top: var(--spacingVerticalXS); + margin-top: var(--spacing-vertical-xs); } .badge { @@ -59,9 +59,9 @@ font-weight: var(--fontWeightMedium); color: var(--colorBrandForeground1); background-color: var(--colorBrandBackground2); - padding: var(--spacingVerticalXXS) var(--spacingHorizontalXS); + padding: var(--spacing-vertical-xxs) var(--spacing-horizontal-xs); border-radius: var(--borderRadiusSmall); position: absolute; - top: var(--spacingVerticalXS); - right: var(--spacingHorizontalXS); + top: var(--spacing-vertical-xs); + right: var(--spacing-horizontal-xs); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css index 0d33911867ff02..b88a44456098e0 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css @@ -5,15 +5,15 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); } .controls { display: flex; flex-direction: column; grid-area: controls; - gap: var(--spacingVerticalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -27,7 +27,7 @@ .sliderField { display: flex; flex-direction: column; - gap: var(--spacingVerticalXS); + gap: var(--spacing-vertical-xs); } .items { @@ -44,5 +44,5 @@ color: var(--colorNeutralForegroundInverted); width: 40px; height: 100px; - margin: var(--spacingHorizontalXXS); + margin: var(--spacing-horizontal-xxs); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css index ebac73d04d50d4..fd6e6a846be8ba 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css @@ -5,14 +5,14 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); } .controls { display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -36,5 +36,5 @@ color: var(--colorNeutralForegroundInverted); width: 40px; height: 100px; - margin: var(--spacingHorizontalXXS); + margin: var(--spacing-horizontal-xxs); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css index d458c7d6809197..5815722a193320 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css @@ -5,14 +5,14 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); } .controls { display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -36,5 +36,5 @@ color: var(--colorNeutralForegroundInverted); width: 40px; height: 100px; - margin: var(--spacingHorizontalXXS); + margin: var(--spacing-horizontal-xxs); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css index 50903e0d7cca80..2a6d8ed5d60d90 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css @@ -5,14 +5,14 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); } .controls { display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -36,5 +36,5 @@ color: var(--colorNeutralForegroundInverted); width: 40px; height: 100px; - margin: var(--spacingHorizontalXXS); + margin: var(--spacing-horizontal-xxs); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css index 26a409f55d735c..508f831d9a6004 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css @@ -4,16 +4,16 @@ .container { display: flex; flex-direction: column; - gap: var(--spacingVerticalXL); - padding: var(--spacingHorizontalL); + gap: var(--spacing-vertical-xl); + padding: var(--spacing-horizontal-l); } .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); - padding: var(--spacingHorizontalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-m); + padding: var(--spacing-horizontal-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow8); @@ -22,9 +22,9 @@ .spinnerSection { display: flex; flex-direction: column; - gap: var(--spacingVerticalM); - padding: var(--spacingHorizontalL); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + gap: var(--spacing-vertical-m); + padding: var(--spacing-horizontal-l); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); } @@ -41,12 +41,12 @@ justify-content: center; align-items: center; min-height: 120px; - padding: var(--spacingHorizontalL); + padding: var(--spacing-horizontal-l); } .spinnerGrid { display: grid; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); grid-template-columns: 1fr; align-items: start; } @@ -115,7 +115,7 @@ .growingBarsSpinner { display: flex; - gap: var(--spacingHorizontalS); + gap: var(--spacing-horizontal-s); align-items: end; height: 40px; } @@ -129,7 +129,7 @@ .slidingBlocksSpinner { display: flex; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); align-items: center; } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css index 31d872b06751d7..df514deb4de5d0 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css @@ -14,7 +14,7 @@ flex-direction: column; gap: 12px; padding: 16px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow8); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css index 87b4da77d0ab17..4ee504719e6b54 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css @@ -14,7 +14,7 @@ flex-direction: column; gap: 12px; padding: 16px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); background-color: var(--colorNeutralBackground1); box-shadow: var(--shadow8); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css index 5677f1234691b6..b4440ce30d0905 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css @@ -5,7 +5,7 @@ display: flex; flex-direction: column; align-items: flex-start; - gap: var(--spacingHorizontalXL); + gap: var(--spacing-horizontal-xl); overflow: hidden; } @@ -13,7 +13,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -38,7 +38,7 @@ font-weight: bold; font-size: 100px; color: transparent; - margin: var(--spacingHorizontalXXS); + margin: var(--spacing-horizontal-xxs); -webkit-text-stroke: 4px var(--tokens-colorBrandStroke2, var(--colorBrandStroke2)); -webkit-filter: blur(1.2px); filter: blur(1.2px); diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css index dae4880bbf8157..1be16e95317d75 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css index 4165f1cff950cb..caac02731bb835 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -21,7 +21,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css index 5489c9de5716df..2dd73f1bb48db7 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -22,7 +22,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); width: 100px; height: 100px; } diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css index d0a161b37ad986..faa492f1fe6960 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css @@ -12,7 +12,7 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -22,7 +22,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -50,7 +50,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css index dc5976b28b2643..fc927a1f5b1923 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -24,7 +24,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ } .item { - border: var(--strokeWidthThicker) solid var(--colorBrandBackground); + border: var(--stroke-width-thicker) solid var(--colorBrandBackground); padding: 8px; width: 300px; overflow: hidden; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css index 732c3941415730..89d3aac3af8037 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css index 16131ab60e901d..0604215b4841b9 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; @@ -69,7 +69,7 @@ overflow-y: auto; position: relative; height: 200px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); border-top-right-radius: 0; padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css index b0cbbd34bedf33..63a397406fe1e1 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css index afcb6a722732f9..a6fa5439b0a8c4 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css @@ -20,7 +20,7 @@ align-items: center; justify-content: center; flex: 1; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 20px; @@ -31,7 +31,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -51,7 +51,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css index eb9c1c654244a5..0b837a4a5a247f 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css index 9b6a55e247458c..46a78b8432a6aa 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css index b98e64ea905835..c64d53c4f47af6 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -24,7 +24,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -36,7 +36,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css index ac4e9ae1447ecd..128424e8422602 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -24,7 +24,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -36,7 +36,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css index 118d8e16954321..8c7ffe32630935 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css @@ -12,7 +12,7 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -22,7 +22,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -50,7 +50,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css index 2f6646a9ef2b2a..220e80ff134fd2 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css @@ -12,7 +12,7 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -50,7 +50,7 @@ } .item { - border: var(--strokeWidthThicker) solid var(--colorBrandBackground); + border: var(--stroke-width-thicker) solid var(--colorBrandBackground); padding: 8px; width: 300px; } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css index 1e58ad59fbf86c..9a88ccde8d4a17 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css @@ -13,7 +13,7 @@ justify-content: center; gap: 10px; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -24,7 +24,7 @@ align-items: center; justify-content: center; background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css index fe6cbcb3fd9573..06b90041d4214a 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; @@ -69,7 +69,7 @@ overflow-y: auto; position: relative; height: 200px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); border-top-right-radius: 0; padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css index 35703c59ddc8f0..b7fb455f92eeab 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); width: 100px; height: 100px; } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css index 55d3fc14cbef51..305a213141fe8b 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -43,7 +43,7 @@ .item { background-color: var(--colorBrandBackground); - border: var(--strokeWidthThicker) solid var(--colorTransparentStroke); + border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css b/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css index d2d767cd24c0bb..e55b9382ae73c2 100644 --- a/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css +++ b/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css @@ -5,12 +5,12 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacingVerticalM); - padding: var(--spacingVerticalXL); + gap: var(--spacing-vertical-m); + padding: var(--spacing-vertical-xl); } .card { - padding: var(--spacingVerticalL) var(--spacingHorizontalXXL); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-xxl); font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); text-align: center; diff --git a/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css b/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css index 0774cb2322bf95..cabe3ec0d37ba6 100644 --- a/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css +++ b/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css @@ -4,9 +4,9 @@ .container { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--spacingHorizontalXXL); - margin-top: var(--spacingVerticalXXL); - margin-bottom: var(--spacingVerticalXXL); + gap: var(--spacing-horizontal-xxl); + margin-top: var(--spacing-vertical-xxl); + margin-bottom: var(--spacing-vertical-xxl); } @media (max-width: 600px) { @@ -18,7 +18,7 @@ .panel { display: flex; flex-direction: column; - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); overflow: hidden; } @@ -27,8 +27,8 @@ display: flex; flex-direction: column; align-items: center; - gap: var(--spacingVerticalXS); - padding: var(--spacingVerticalL) var(--spacingHorizontalXL) var(--spacingVerticalM); + gap: var(--spacing-vertical-xs); + padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl) var(--spacing-vertical-m); background-color: var(--colorNeutralBackground2); } @@ -50,7 +50,7 @@ align-items: center; justify-items: center; height: 80px; - padding: var(--spacingVerticalL); + padding: var(--spacing-vertical-l); background-color: var(--colorNeutralBackground1); } @@ -61,16 +61,16 @@ .card { align-items: center; justify-content: center; - padding: var(--spacingVerticalM) var(--spacingHorizontalXL); + padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl); font-weight: var(--fontWeightSemibold); font-size: var(--fontSizeBase300); } .codeArea { margin: 0; - padding: var(--spacingVerticalM) var(--spacingHorizontalL); + padding: var(--spacing-vertical-m) var(--spacing-horizontal-l); background-color: var(--colorNeutralBackground3); - border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border-top: var(--stroke-width-thin) solid var(--colorNeutralStroke1); overflow: auto; font-family: var(--fontFamilyMonospace); font-size: var(--fontSizeBase100); @@ -81,6 +81,6 @@ .buttonRow { display: flex; justify-content: center; - padding: var(--spacingVerticalM) var(--spacingHorizontalXL) var(--spacingVerticalL); + padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl) var(--spacing-vertical-l); background-color: var(--colorNeutralBackground2); } diff --git a/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css b/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css index e6127fd35479ea..0fa34de2744850 100644 --- a/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css +++ b/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css @@ -4,7 +4,7 @@ .wrapper { display: flex; flex-direction: column; - gap: var(--spacingVerticalL); + gap: var(--spacing-vertical-l); width: 100%; max-width: 800px; scrollbar-gutter: stable; @@ -13,22 +13,22 @@ .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-s); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); } .row { display: flex; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); align-items: start; } .column { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); + gap: var(--spacing-vertical-s); flex: 1; min-width: 0; } @@ -36,9 +36,9 @@ .section { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-s); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); overflow: hidden; overflow-wrap: break-word; @@ -52,7 +52,7 @@ font-size: var(--fontSizeBase200); background-color: var(--colorNeutralBackground1Pressed); border-radius: var(--borderRadiusMedium); - padding: var(--spacingVerticalS) var(--spacingHorizontalM); + padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); white-space: pre; overflow: auto; } diff --git a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css index a4355d2843b656..f3f1b1b09d9fd6 100644 --- a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css +++ b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: center; gap: 10px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 20px; diff --git a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css index ff974bf1441a31..1a598a7586b7a6 100644 --- a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css +++ b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 20px; diff --git a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css index c76cc772dd9142..13b40fc383dbcb 100644 --- a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css +++ b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: center; gap: 10px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 20px; diff --git a/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css b/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css index 909ecc97785985..6519d92a474e0f 100644 --- a/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css @@ -10,7 +10,7 @@ display: flex; flex-direction: column; gap: 10px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); border-top-right-radius: 0; box-shadow: var(--shadow16); @@ -20,7 +20,7 @@ .controls { display: flex; gap: 10px; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-bottom: none; border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); From 7a41986d6017110162e4fe4ac926a678dc7d2b59 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:14:35 -0700 Subject: [PATCH 590/640] refactor(theming): repoint old camelCase token var() references to canonical names (5) Mechanical follow-through of the option-B removal: every raw var() reference to an old camelCase spacing/stroke variable in react-domain source repoints to the canonical kebab name (651 replacements / 197 files total, exact-name longest-first mapping; script .scratch/phase1-theming/repoint-oldnames.mjs). web-components excluded: separate system that defines its own camelCase vars. VR: full 76/76-set sweep at zero tolerance on the converted output. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../PresenceMotionSlotCustomize.module.css | 4 ++-- .../PresenceMotionSlotDefault.module.css | 4 ++-- .../PresenceMotionSlotDisable.module.css | 4 ++-- .../react-nav/stories/src/Nav/Basic.module.css | 2 +- .../react-nav/stories/src/Nav/Controlled.module.css | 2 +- .../stories/src/Nav/CustomMotion.module.css | 4 ++-- .../stories/src/Nav/SplitNavItems.module.css | 2 +- .../stories/src/Nav/VariableDensityItems.module.css | 2 +- .../stories/src/Popover/PopoverAppearance.module.css | 2 +- .../stories/src/Portal/PortalDefault.module.css | 6 +++--- .../stories/src/toMountNodeProps/Default.module.css | 2 +- .../UseSafeZoneAreaDefault.module.css | 8 ++++---- .../src/SearchBox/SearchBoxAppearance.module.css | 2 +- .../SearchBox/SearchBoxContentBeforeAfter.module.css | 2 +- .../stories/src/SearchBox/SearchBoxSize.module.css | 2 +- .../src/SearchBox/SearchBoxTypeahead.module.css | 12 ++++++------ .../stories/src/Select/SelectAppearance.module.css | 6 +++--- .../src/Skeleton/SkeletonItemShape.module.css | 4 ++-- .../stories/src/Skeleton/SkeletonItemSize.module.css | 6 +++--- .../src/SpinButton/SpinButtonAppearance.module.css | 6 +++--- .../src/SpinButton/SpinButtonBounds.module.css | 2 +- .../src/SpinButton/SpinButtonControlled.module.css | 2 +- .../src/SpinButton/SpinButtonDefault.module.css | 2 +- .../src/SpinButton/SpinButtonDisabled.module.css | 2 +- .../src/SpinButton/SpinButtonDisplayValue.module.css | 2 +- .../src/SpinButton/SpinButtonReadOnly.module.css | 2 +- .../stories/src/SpinButton/SpinButtonSize.module.css | 4 ++-- .../stories/src/SpinButton/SpinButtonStep.module.css | 2 +- .../src/SpinButton/SpinButtonUncontrolled.module.css | 2 +- .../stories/src/TagGroup/TagGroupOverflow.module.css | 2 +- .../src/Textarea/TextareaAppearance.module.css | 4 ++-- .../stories/src/Textarea/TextareaResize.module.css | 2 +- .../stories/src/Textarea/TextareaSize.module.css | 2 +- .../stories/src/Tree/TreeMotionCustom.module.css | 8 ++++---- 34 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css index 5253310b52bb46..2f4ccff0e714e3 100644 --- a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css @@ -12,7 +12,7 @@ flex-direction: column; align-items: center; justify-content: center; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -23,7 +23,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css index 536c997f2706bb..3436400e022134 100644 --- a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -24,7 +24,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; diff --git a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css index 9fe53cb6f949b1..aa4dc8f9a00e09 100644 --- a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css @@ -13,7 +13,7 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -24,7 +24,7 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; diff --git a/packages/react-components/react-nav/stories/src/Nav/Basic.module.css b/packages/react-components/react-nav/stories/src/Nav/Basic.module.css index 99d58826115fe3..71f524ef493f62 100644 --- a/packages/react-components/react-nav/stories/src/Nav/Basic.module.css +++ b/packages/react-components/react-nav/stories/src/Nav/Basic.module.css @@ -23,6 +23,6 @@ display: flex; margin-top: 4px; flex-direction: column; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); margin-inline-start: 8px; } diff --git a/packages/react-components/react-nav/stories/src/Nav/Controlled.module.css b/packages/react-components/react-nav/stories/src/Nav/Controlled.module.css index fd7068c73867b1..16fe0032d1522f 100644 --- a/packages/react-components/react-nav/stories/src/Nav/Controlled.module.css +++ b/packages/react-components/react-nav/stories/src/Nav/Controlled.module.css @@ -23,6 +23,6 @@ display: flex; margin-top: 4px; flex-direction: column; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); margin-inline-start: 8px; } diff --git a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css index 8ed47416288045..8a738eb552c8a6 100644 --- a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css +++ b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css @@ -23,7 +23,7 @@ justify-content: flex-start; align-items: flex-start; margin: 0; - gap: var(--spacingVerticalM); + gap: var(--spacing-vertical-m); grid-auto-rows: max-content; box-sizing: border-box; position: absolute; @@ -35,5 +35,5 @@ margin-top: 4px; margin-left: 8px; flex-direction: column; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); } diff --git a/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.module.css b/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.module.css index a0c15e4fc8de21..88c597ac3cb795 100644 --- a/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.module.css +++ b/packages/react-components/react-nav/stories/src/Nav/SplitNavItems.module.css @@ -23,7 +23,7 @@ display: flex; margin-top: 4px; flex-direction: column; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); margin-inline-start: 8px; } diff --git a/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.module.css b/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.module.css index e299dcd3b9a9d4..fa7ba181ab7959 100644 --- a/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.module.css +++ b/packages/react-components/react-nav/stories/src/Nav/VariableDensityItems.module.css @@ -23,6 +23,6 @@ display: flex; margin-top: 4px; flex-direction: column; - grid-row-gap: var(--spacingVerticalS); + grid-row-gap: var(--spacing-vertical-s); margin-inline-start: 8px; } diff --git a/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.module.css b/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.module.css index c0cbdcd7ff417a..06aaeb361a5fe1 100644 --- a/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.module.css +++ b/packages/react-components/react-popover/stories/src/Popover/PopoverAppearance.module.css @@ -8,5 +8,5 @@ .root { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalMNudge); + row-gap: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css b/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css index 0ea98a642cef07..988862e5d4a3e4 100644 --- a/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css +++ b/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css @@ -15,7 +15,7 @@ .state { font-family: var(--fontFamilyMonospace); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); padding: 4px; text-align: center; } @@ -27,7 +27,7 @@ line-height: var(--lineHeightBase400); background-color: var(--colorNeutralBackground1); color: var(--colorNeutralForeground1); - border: var(--strokeWidthThick) solid var(--colorNeutralStroke1); + border: var(--stroke-width-thick) solid var(--colorNeutralStroke1); padding: 24px 8px; overflow: hidden; } @@ -39,6 +39,6 @@ line-height: var(--lineHeightBase500); background-color: var(--colorBrandBackground2); color: var(--colorBrandForeground2); - border: var(--strokeWidthThick) dashed var(--colorBrandStroke2); + border: var(--stroke-width-thick) dashed var(--colorBrandStroke2); padding: 12px 6px; } diff --git a/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css b/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css index 443c7d26f30d94..5bf2b21f73ab7f 100644 --- a/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css +++ b/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css @@ -3,7 +3,7 @@ .message { background-color: var(--colorNeutralBackground1); - border: var(--strokeWidthThick) solid var(--colorStatusSuccessBorder1); + border: var(--stroke-width-thick) solid var(--colorStatusSuccessBorder1); padding: 20px; font-size: var(--fontSizeBase600); position: fixed; diff --git a/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css b/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css index 532936a091c485..a4582a87256634 100644 --- a/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css +++ b/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css @@ -11,7 +11,7 @@ display: grid; grid-template-columns: 1fr auto; align-items: center; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -22,7 +22,7 @@ flex-direction: column; align-items: center; justify-content: center; - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); box-shadow: var(--shadow16); padding: 10px; @@ -45,7 +45,7 @@ width: 300px; height: 300px; color: var(--colorPaletteBerryForeground2); - border: var(--strokeWidthThicker) solid var(--colorPaletteBerryBorderActive); + border: var(--stroke-width-thicker) solid var(--colorPaletteBerryBorderActive); background-color: var(--colorPaletteBerryBackground2); } @@ -57,7 +57,7 @@ width: 300px; height: 50px; color: var(--colorPaletteBlueForeground2); - border: var(--strokeWidthThicker) solid var(--colorPaletteBlueBorderActive); + border: var(--stroke-width-thicker) solid var(--colorPaletteBlueBorderActive); background-color: var(--colorPaletteBlueBackground2); } diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css index 75edd0ba9b6647..c2b7f67a448795 100644 --- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css +++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css @@ -23,5 +23,5 @@ } .fieldWrapper { - padding: var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge); + padding: var(--spacing-vertical-m-nudge) var(--spacing-horizontal-m-nudge); } diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.module.css b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.module.css index 8ce1e658e95be0..467b7a95d8dbb2 100644 --- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.module.css +++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxContentBeforeAfter.module.css @@ -7,5 +7,5 @@ } .fieldWrapper { - padding: var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge); + padding: var(--spacing-vertical-m-nudge) var(--spacing-horizontal-m-nudge); } diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxSize.module.css b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxSize.module.css index 01eeccbfb5613b..c6857224c9a406 100644 --- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxSize.module.css +++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxSize.module.css @@ -7,5 +7,5 @@ } .fieldWrapper { - padding: var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge); + padding: var(--spacing-vertical-m-nudge) var(--spacing-horizontal-m-nudge); } diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css index f6c74a8ad94c71..fa77ac10ddf725 100644 --- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css +++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css @@ -14,7 +14,7 @@ box-sizing: border-box; list-style-type: none; margin: 0; - padding: var(--spacingVerticalXS) 0; + padding: var(--spacing-vertical-xs) 0; position: absolute; width: 100%; z-index: 1000; @@ -28,8 +28,8 @@ align-items: center; cursor: pointer; display: flex; - gap: var(--spacingHorizontalS); - padding: var(--spacingVerticalS) var(--spacingHorizontalM); + gap: var(--spacing-horizontal-s); + padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); } .option:hover { @@ -44,12 +44,12 @@ .spinnerWrapper { align-items: center; display: flex; - gap: var(--spacingHorizontalS); - padding: var(--spacingVerticalS) var(--spacingHorizontalM); + gap: var(--spacing-horizontal-s); + padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); color: var(--colorNeutralForeground3); } .noResults { color: var(--colorNeutralForeground3); - padding: var(--spacingVerticalS) var(--spacingHorizontalM); + padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); } diff --git a/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css b/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css index 5d017f9f8e0b72..5c4647630dc001 100644 --- a/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css +++ b/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css @@ -9,9 +9,9 @@ .field { display: grid; - grid-row-gap: var(--spacingVerticalXXS); - margin-top: var(--spacingVerticalMNudge); - padding: var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge); + grid-row-gap: var(--spacing-vertical-xxs); + margin-top: var(--spacing-vertical-m-nudge); + padding: var(--spacing-vertical-m-nudge) var(--spacing-horizontal-m-nudge); } .filledLighter { diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css index b072d3b508e573..6830b85b0ebb2d 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css @@ -4,11 +4,11 @@ .invertedWrapper { background: var(--colorNeutralBackground1); display: flex; - padding: var(--spacingHorizontalXL); + padding: var(--spacing-horizontal-xl); } .row { display: grid; - gap: var(--spacingHorizontalL); + gap: var(--spacing-horizontal-l); grid-template-columns: 1fr 150px 1fr; } diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css index 331d78a3ba8604..b8e6b174eab1a3 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css @@ -5,13 +5,13 @@ display: flex; background: var(--colorNeutralBackground1); flex-direction: column; - padding: var(--spacingHorizontalXL); - gap: var(--spacingVerticalL); + padding: var(--spacing-horizontal-xl); + gap: var(--spacing-vertical-l); } .innerWrapper { display: grid; align-items: center; grid-template-columns: 25px 1fr; - grid-gap: var(--spacingHorizontalS); + grid-gap: var(--spacing-horizontal-s); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css index a83d64040ea48d..8d439c2437f0e9 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css @@ -9,9 +9,9 @@ .field { display: grid; - grid-row-gap: var(--spacingVerticalXXS); - margin-top: var(--spacingVerticalMNudge); - padding: var(--spacingHorizontalMNudge); + grid-row-gap: var(--spacing-vertical-xxs); + margin-top: var(--spacing-vertical-m-nudge); + padding: var(--spacing-horizontal-m-nudge); } .filledLighter { diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBounds.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBounds.module.css index 42f2d8902e01bc..5ae75a73a910a0 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBounds.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBounds.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonControlled.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonControlled.module.css index 6114b02be0f453..d5beee0741e478 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonControlled.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonControlled.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDefault.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDefault.module.css index cae21c626adcb6..c6209c346cd052 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDefault.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDefault.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisabled.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisabled.module.css index 542d24ecf8f383..c206bf25f6859a 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisabled.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisabled.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisplayValue.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisplayValue.module.css index 05e3c5f6f80621..c056a0324a9e95 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisplayValue.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonDisplayValue.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonReadOnly.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonReadOnly.module.css index 2a289845667446..3441533be9ce23 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonReadOnly.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonReadOnly.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonSize.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonSize.module.css index 73156b59565b71..22d0a9d2c1b90d 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonSize.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonSize.module.css @@ -10,7 +10,7 @@ .base > div { display: flex; flex-direction: column; - margin-top: var(--spacingHorizontalMNudge); + margin-top: var(--spacing-horizontal-m-nudge); } .base > div:first-child { @@ -18,5 +18,5 @@ } .base > div label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonStep.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonStep.module.css index 6ca976cdb5c21c..90a12d67ee3e76 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonStep.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonStep.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonUncontrolled.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonUncontrolled.module.css index a286cf4ddf40da..b3432a93984ebf 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonUncontrolled.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonUncontrolled.module.css @@ -8,5 +8,5 @@ } .base > label { - margin-bottom: var(--spacingVerticalXXS); + margin-bottom: var(--spacing-vertical-xxs); } diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css index 4e6d2066092593..b37c06a868f251 100644 --- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css +++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .menuItem { - padding: var(--spacingVerticalSNudge) var(--spacingHorizontalXS); + padding: var(--spacing-vertical-s-nudge) var(--spacing-horizontal-xs); } /* Tag's public identity class is its Tailwind named-group marker, `group/fui-tag` diff --git a/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css b/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css index 89333fd33e23cd..8679845e80ab9c 100644 --- a/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css +++ b/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css @@ -4,7 +4,7 @@ .base { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalMNudge); + row-gap: var(--spacing-vertical-m-nudge); } .inverted { @@ -16,5 +16,5 @@ } .fieldWrapper { - padding: var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge); + padding: var(--spacing-vertical-m-nudge) var(--spacing-horizontal-m-nudge); } diff --git a/packages/react-components/react-textarea/stories/src/Textarea/TextareaResize.module.css b/packages/react-components/react-textarea/stories/src/Textarea/TextareaResize.module.css index c19b0b9016bf5b..2c5dd085d06d76 100644 --- a/packages/react-components/react-textarea/stories/src/Textarea/TextareaResize.module.css +++ b/packages/react-components/react-textarea/stories/src/Textarea/TextareaResize.module.css @@ -4,5 +4,5 @@ .base { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalMNudge); + row-gap: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-textarea/stories/src/Textarea/TextareaSize.module.css b/packages/react-components/react-textarea/stories/src/Textarea/TextareaSize.module.css index 60096ab30ac30a..b8b14ade712de8 100644 --- a/packages/react-components/react-textarea/stories/src/Textarea/TextareaSize.module.css +++ b/packages/react-components/react-textarea/stories/src/Textarea/TextareaSize.module.css @@ -4,5 +4,5 @@ .base { display: flex; flex-direction: column; - row-gap: var(--spacingVerticalMNudge); + row-gap: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css b/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css index 25cf1a186f0996..f9fce81092ba40 100644 --- a/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css +++ b/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css @@ -4,9 +4,9 @@ .controls { display: flex; flex-direction: column; - gap: var(--spacingVerticalS); - margin-bottom: var(--spacingVerticalL); - padding: var(--spacingVerticalM); - border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3); + gap: var(--spacing-vertical-s); + margin-bottom: var(--spacing-vertical-l); + padding: var(--spacing-vertical-m); + border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); border-radius: var(--borderRadiusMedium); } From a6868ec088f9f84bcd367a524da01d7138382126 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:14:54 -0700 Subject: [PATCH 591/640] docs(migration): D4 superseding amendment (theming Phase 1, option B + stroke rename) + theming-css-native report MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Records the user-settled theming Phase-1 decision: numeric-axis spacing aliases with --spacing as the single density knob; public --stroke-width-* canonicals (density-decoupled by design) with private --spacing- hooks; old camelCase CSS variables removed (option B — documented major break) with tokens.* repointed as the read path; interim-state semantics (FluentProvider runtime tag emissions are harmless orphans until Phase 2); open question recorded for Phase 2: full-token-set kebab rename. Report carries the full gate evidence: arithmetic identity, 15/15 behavior probes, zero-reference sweep, 76/76 VR at zero tolerance (incl. the 9 drift sets re-diffed against control-sourced baselines), perf E-cells within noise, and the aborted-sweep root cause. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../griffel-to-tailwind/reports/DECISIONS.md | 95 ++++++++ .../reports/theming-css-native.md | 219 ++++++++++++++++++ 2 files changed, 314 insertions(+) create mode 100644 migration/griffel-to-tailwind/reports/theming-css-native.md diff --git a/migration/griffel-to-tailwind/reports/DECISIONS.md b/migration/griffel-to-tailwind/reports/DECISIONS.md index 66d5dc6ef0274c..5b905a0dca0581 100644 --- a/migration/griffel-to-tailwind/reports/DECISIONS.md +++ b/migration/griffel-to-tailwind/reports/DECISIONS.md @@ -758,6 +758,101 @@ the sweep validates against the existing zero-tolerance VR pass. Like the spacin deliberately NOT bundled here; schedule it per package alongside the 176-declaration spacing sweep, which touches an overlapping file set. +## D4 superseding amendment — spacing tokens become numeric-axis aliases; old camelCase names removed, `tokens.*` repointed (theming Phase 1, option B + stroke rename, settled with user 2026-07-29) + +**Supersedes the value form recorded in the two 2026-07-27 amendments above** (and the +review-item-18 line of discussion — the user's theming-architecture decision overrides that +reviewer finding). An earlier draft of this amendment kept the old camelCase names as CSS +read-aliases; the user then chose **option B** — drop the aliases entirely and repoint the +JS constants — plus the **stroke rename** below. Behavior at the default 16px root is +UNCHANGED (arithmetic identity gated, below); what changes is the structure: + +1. **The 22 spacing tokens register AND emit as aliases of the numeric axis**: + `--spacing-horizontal-m: calc(var(--spacing) * 12)` instead of + `calc(12px * var(--base-scale))`. `--spacing` (`calc(1px * var(--base-scale))`, + css/index.css — already the numeric utilities' base, unchanged) is now the **single + density knob**: it was verified (probe, `.scratch/phase1-theming/`) that `@theme inline` + carries the `var(--spacing)` reference VERBATIM into utilities, so `p-horizontal-m` + compiles to `padding: calc(var(--spacing) * 12)` — the same shape as `p-12` — and both + respond identically to a `--spacing` override on any subtree. Under the old literal + form that override reached numeric utilities and missed named ones (probe-demonstrated + red: 24px vs 12px). Multipliers are the canonical px value over the 1px base (multiplier = + px; exactness asserted by the generator, which throws on any px the base cannot express + exactly). +2. **Stroke rename + deliberate density exception**: the PUBLIC stroke variables are + **`--stroke-width-thin/thick/thicker/thickest`**, emitted with the literal + `calc( * var(--base-scale))` values — NOT `--spacing`-coupled: `--spacing` is the + layout density knob, and borders must not thin when layout density changes. A subtree + `--spacing` override rescales padding/gap and leaves `var(--stroke-width-thin)` at 1px + (browser-asserted in the behavior probe). The spacing-namespace `--spacing-thin/…` + names become **PRIVATE internal hooks** (`--spacing-thin: var(--stroke-width-thin)`) + that exist only to feed Tailwind's spacing-consuming utility families (`w-thin`, + `p-thick`, …) and the sanctioned module authoring form `var(--spacing-thin)` for + border/outline widths (border-family properties do not consume the namespace — the + probe-measured constraint stands). `--stroke-width-*` is deliberately NOT registered + in `@theme`: Tailwind's `--stroke-width-*` namespace drives SVG `stroke-width` + utilities, the wrong property. +3. **The old camelCase CSS variables are GONE (option B)** — no + `--spacingHorizontalM`, no `--strokeWidthThin`, no read-aliases. Single vocabulary; + hand-written consumer CSS against the old names is a **documented major break**. + Instead, the READ path moved to JS: the 26 `tokens.*` constants in + `packages/tokens/src/tokens.ts` now emit the canonical var strings + (`tokens.spacingHorizontalM === 'var(--spacing-horizontal-m)'`, + `tokens.strokeWidthThin === 'var(--stroke-width-thin)'`), covered by an exact-string + unit test (`packages/tokens/src/tokens.test.ts`) AND asserted from the other side by + the generator on every run (it throws if tokens.ts and the emitted canonicals drift). + The `react-theme-sass` bridge (`$spacingHorizontalM` etc.) repoints identically. A + repo-wide sweep repointed every raw old-name `var()` reference in react-domain source + (651 replacements / 197 files: converted `*.module.css`, stories, docsite, vr-tests; + `packages/web-components/**` excluded — it is a separate system whose own + design-tokens.ts defines the camelCase variables it reads). +4. All spacing-namespace names plus the 4 `--stroke-width-*` canonicals are emitted as + real custom properties in the generated `@layer fui.theme { :root, :host }` block + (dist/styles.css 1,410 → 2,810 bytes). + +**Interim-state semantics (until theming Phase 2 removes the JS theming path):** +FluentProvider's runtime theme tag (`createCSSRuleFromTheme`) still writes ALL old +camelCase names as literals on `.fui-FluentProviderN` (unlayered, element-scoped). With +the aliases dropped and every shipped reader repointed, those declarations are now +**harmless orphans** — nothing in shipped CSS or in the `tokens.*` strings reads them. +(Exception: the docsite's `createCSSRuleFromTheme` usage examples demo that util's own +output; their module CSS was repointed to canonical names like everything else.) A custom +FluentProvider `theme` spacing/strokeWidth override therefore no longer reaches ANY +shipped reader — the priced-in cost the 2026-07-27 amendments already accepted for +utilities now extends to `tokens.*` readers; all 7 shipped themes carry byte-identical +values, so no shipped theme changes behavior. + +**Known CSS-inheritance nuance, priced in:** the emitted custom properties resolve their +`var(--spacing)` at `:root` (custom-property substitution happens at the declaring +element), so a _subtree_ `--spacing` override reaches UTILITIES (which carry the calc +inline per element) but not `var(--spacing-horizontal-m)` _custom-property readers_ +(`tokens.*` inline styles), which keep the root-level density. Document-level density +changes (set `--spacing`/`--base-scale` at `:root`) reach everything. + +Gates run for this amendment (evidence `.scratch/phase1-theming/`, +`reports/theming-css-native.md`): + +- Arithmetic identity: 26/26 token defaults exact old-vs-new; canonical strokes literal + + hooks aliased; tokens.ts lockstep 26/26; 20 named utilities string-identical to their + numeric twins in compiled output. +- Behavior probes (`scripts/probe-spacing-behavior.mjs`, headless Chromium, committed as a + package test, npm script `test-spacing-behavior`): 15/15 PASS, including density knob, + stroke decoupling, canonical reads, and old-names-removed assertions. +- Zero-reference sweep: no exact old name remains in react-domain source or emitted CSS + (comment prose documenting the removal excepted). +- `packages/tokens` unit tests green (exact-string repoint test added). +- Full VR sweep at zero tolerance (all baseline sets, fresh `--skip-nx-cache` build) — see + `reports/theming-css-native.md` Phase 1 for totals. +- D13 re-verified: `@reference` modules emit zero theme declarations. + +**Follow-on: theming Phase 2** — remove the FluentProvider runtime theme tag / JS theming +path so the CSS-native names are the sole contract end to end. + +**OPEN QUESTION (recorded, NOT implemented — user to decide in Phase 2):** full-token-set +kebab rename — the remaining ~440 tokens (colors, fonts, radii, shadows, durations, +curves, z-index) still use camelCase CSS variables (`--colorNeutralBackground1`). A +uniform kebab vocabulary across the whole token set is under consideration. + ## D15 — Named groups + all-lowercase generated idents (settled with user 2026-07-28) Source analysis: `reports/named-groups-design.md`. **Naming below is the user's amendment and diff --git a/migration/griffel-to-tailwind/reports/theming-css-native.md b/migration/griffel-to-tailwind/reports/theming-css-native.md new file mode 100644 index 00000000000000..915a7d9c16f46c --- /dev/null +++ b/migration/griffel-to-tailwind/reports/theming-css-native.md @@ -0,0 +1,219 @@ +# Theming, CSS-native — the staged removal of the JS theming path + +This file accumulates the theming-architecture work settled with the user 2026-07-29 +(supersedes review item #18's line of discussion): Phase 1 restructures the spacing token +values so the CSS custom-property graph is the contract; Phase 2 (future) removes the +FluentProvider runtime theme tag / JS theming path. + +## Phase 1 — numeric-axis spacing aliases; old camelCase names removed (option B); stroke rename + +Date: 2026-08-05 · Branch: `styling/tailwind-css-modules` · Change surface: +`packages/react-components/react-tailwind-theme/` (generator +`scripts/generate-tokens-css.js`, regenerated `css/tokens.css`, comment updates in +`css/index.css` / `css/emit.css` / `package.json`, new committed browser test +`scripts/probe-spacing-behavior.mjs`), `packages/tokens/src/tokens.ts` (+ exact-string +unit test), `packages/react-components/react-theme-sass/sass/*.scss`, and a 651-replacement +/ 197-file repo sweep of raw old-name `var()` references. Decision record: DECISIONS.md +"D4 superseding amendment" (option B + stroke rename). + +> An earlier same-day draft kept the old camelCase names as CSS read-aliases. The user +> then chose **option B**: no CSS aliases — the old names cease to exist in emitted CSS +> (documented major break for hand-written consumer CSS), and the JS `tokens.*` constants +> repoint to the canonical names instead. Plus the **stroke rename** (public +> `--stroke-width-*`, private `--spacing-` hooks). + +### The structure + +- **Recorded base (verified, unchanged):** `--spacing: calc(1px * var(--base-scale))` + (`css/index.css`), with `--base-scale: calc(1rem / 16px)`. The base is 1px-scaled — NOT + the 4px Tailwind default — so token multipliers equal their canonical px values + (integers, not 0.5 steps). +- **22 spacing tokens** register in `@theme inline` AND emit at `:root, :host` as + `calc(var(--spacing) * )` (None stays `0`). `--spacing` is the single density knob. +- **4 stroke widths**: public `--stroke-width-thin/thick/thicker/thickest` emitted as + literal `calc( * var(--base-scale))` — deliberately NOT `--spacing`-coupled + (borders must not thin when layout density changes). The `--spacing-thin/…` names are + PRIVATE hooks (`--spacing-thin: var(--stroke-width-thin)`) feeding Tailwind utility + generation (`w-thin` compiles to `width: var(--stroke-width-thin)`) and the sanctioned + module authoring form `var(--spacing-thin)` for border/outline widths. Not registering + `--stroke-width-*` in `@theme` is deliberate — that Tailwind namespace drives SVG + `stroke-width` utilities, the wrong property. +- **Old camelCase names removed** from all emitted CSS. Read path = JS: + `tokens.spacingHorizontalM === 'var(--spacing-horizontal-m)'`, + `tokens.strokeWidthThin === 'var(--stroke-width-thin)'` (all 26; exact-string unit test + in `packages/tokens/src/tokens.test.ts`; the generator asserts the same lockstep from + the CSS side on every run and throws on drift). `react-theme-sass` `$`-variables + repoint identically (SCSS names stay camelCase — they are a JS-like read API). + +### Multiplier table (token → old literal → new value; default resolution exact for all 26) + +| Token (both axes) | old literal | new value | default | +| -------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------ | --------- | +| …None | `0` | `0` (unchanged) | 0px | +| …XXS | `calc(2px * var(--base-scale))` | `calc(var(--spacing) * 2)` | 2px | +| …XS | `calc(4px * var(--base-scale))` | `calc(var(--spacing) * 4)` | 4px | +| …SNudge | `calc(6px * var(--base-scale))` | `calc(var(--spacing) * 6)` | 6px | +| …S | `calc(8px * var(--base-scale))` | `calc(var(--spacing) * 8)` | 8px | +| …MNudge | `calc(10px * var(--base-scale))` | `calc(var(--spacing) * 10)` | 10px | +| …M | `calc(12px * var(--base-scale))` | `calc(var(--spacing) * 12)` | 12px | +| …L | `calc(16px * var(--base-scale))` | `calc(var(--spacing) * 16)` | 16px | +| …XL | `calc(20px * var(--base-scale))` | `calc(var(--spacing) * 20)` | 20px | +| …XXL | `calc(24px * var(--base-scale))` | `calc(var(--spacing) * 24)` | 24px | +| …XXXL | `calc(32px * var(--base-scale))` | `calc(var(--spacing) * 32)` | 32px | +| strokeWidthThin/Thick/Thicker/Thickest | `--spacing-: calc(<1/2/3/4>px * var(--base-scale))` | `--stroke-width-` same literal; `--spacing-: var(--stroke-width-)` | 1/2/3/4px | + +(Applies identically to `spacingHorizontal*` and `spacingVertical*`; full 26-row dump with +per-token old/new strings in the gate output, `.scratch/phase1-theming/arith-identity.mjs`.) + +### Gates + +1. **Arithmetic identity (PASS)** — `.scratch/phase1-theming/arith-identity.mjs`: 26/26 + token defaults exact old (git HEAD) vs new; 4 canonical strokes literal + hooks + aliased; no old camelCase name outside removal-documenting comments; tokens.ts + lockstep 26/26; compiled-utility identity `p-horizontal-` === `p-` + (string-identical declaration values) for all 20 non-zero named utilities. +2. **Behavior probes (PASS 15/15; committed test)** — + `scripts/probe-spacing-behavior.mjs` (headless Chromium via playwright; jsdom cannot + resolve var()/calc() chains, so this is a browser test by necessity; npm script + `test-spacing-behavior`): + - Density knob: subtree `--spacing: calc(2px * var(--base-scale))` → `.p-12` AND + `.p-horizontal-m` both compute 24px (identical response); `.p-24` / + `.p-horizontal-xxl` both 48px. + - Canonical reads at `:root` scope (no FluentProvider on the page): + `var(--spacing-horizontal-m)` 12px; `var(--stroke-width-thin)` 1px; private hook + `var(--spacing-thin)` 1px; `.w-thin` width 1px. + - Stroke decoupling: the same subtree override leaves `var(--stroke-width-thin)` / + `var(--spacing-thin)` borders at 1px. + - Removal: `var(--spacingHorizontalM)` does not resolve (padding falls to 0px); + `var(--strokeWidthThin)` border does not compute to the canonical 1px (browser + default `medium` = 3px observed); plus a hard artifact-level assertion that no old + name appears in emitted CSS. + - **Red under the pre-phase-1 structure (probe-demonstrated on the alias-draft run, + `.scratch/phase1-theming/probe-old-structure.log`):** named utilities ignored the + subtree override (12px vs numeric's 24px) — the density-knob property is what the + restructure buys. +3. **Zero-reference sweep (PASS)** — `.scratch/phase1-theming/repoint-oldnames.mjs`: 651 + replacements across 197 react-domain files (library `*.module.css`, stories, docsite + MDX/css, vr-tests utils, charts react libs, react-theme-sass); residual check finds no + exact old name outside comment prose documenting the removal. **Excluded:** + `packages/web-components/**` and `packages/charts/chart-web-components/**` — a + separate component system whose own `design-tokens.ts` DEFINES the camelCase variables + it reads (self-consistent; not governed by the react theme artifact). +4. **`packages/tokens` unit tests green** — 4/4 (format test amended with the 26-entry + canonical map; new exact-string repoint test; a no-old-names regex over every token + value). +5. **D13 re-verified (PASS)** — a module compiled through `@reference '#theme'` emits zero + theme declarations while `@apply w-thin` inlines `width: var(--stroke-width-thin)`, + `@apply p-horizontal-m` inlines `padding: calc(var(--spacing) * 12)`, and direct + `var(--spacing-thin)` / `var(--stroke-width-thick)` authoring is untouched. +6. **Full VR sweep at zero tolerance — 76/76 canonical sets PASS, failing: none.** Fresh + `--skip-nx-cache` `vr-tests-react-components:build-storybook` (bundle staleness-guarded + and marker-verified: numeric-axis utility output present, canonical stroke emission + present, zero old-name declarations); driver `.scratch/phase1b-sweep-driver.mjs` + (S-G/int1 shape; the 26 `review36513-*` scratch probe dirs excluded as non-canonical), + results `.scratch/phase1b-sweep-results.json`. + + - First pass: 67/76 clean; the 9 failures were ALL extras-only story-inventory drift — + **2,292/2,292 matched pairs pixel-identical, 0 failed, 0 missing** across `button` + (141 pairs, 20 extras), `button-family` (351/12), `harness-se` (1438/36), + `react-card` (148/8), `react-carousel` (0 pairs — empty baseline, 9 extras), + `react-checkbox` (36/8), `react-radio` (52/8), `react-slider` (39/8), + `react-switch` (87/8). Every extra shot traces to stories committed AFTER the last + full sweep (Focus stories `40ef24502f` 2026-08-04; S-J swap stories 2026-08-01; + CarouselAutoplayButton `c9b6a14156` 2026-08-05) — pre-existing drift, not a Phase-1 + effect (a CSS-value change cannot add stories). + - Drift resolution WITHOUT adjudication: the 9 sets' filters were captured from a + CONTROL storybook (all Phase-1 changes stashed; control bundle verified pre-change — + 266 literal-form utility occurrences, zero canonical names), 117 control shots folded + into the baselines with manifest `additions` provenance (sj-batch1 precedent), the + candidate rebuilt fresh, and the 9 sets re-run: **all 9 PASS at zero tolerance**, + i.e. control and candidate render the drift stories pixel-identically too. + - Final: **76/76 sets, zero pixel diffs anywhere.** Arithmetic neutrality holds + end-to-end, including the charts sets whose inline styles exercise the repointed + `tokens.*` strings. + - (An earlier aborted run and its root cause — a mid-sweep `git stash` tripping the + capture staleness guard, zero pixel evidence involved — is documented in the section + below.) + + _Aborted first attempt, root-caused (no pixel evidence of any defect):_ the initial + sweep (`.scratch/phase1-sweep-results.json`) recorded 0/102 — but **all 102 failures + were CAPTURE-stage, zero diff-stage**. Cause: a `git stash push/pop` was run mid-sweep + (to prove an unrelated accordion snapshot failure pre-existed on the branch); the pop + rewrote ~200 tracked files with fresh mtimes, and capture.mjs's staleness guard + (component sources newer than the built bundle → refuse to capture) then correctly + fast-failed every remaining set. Not a generation defect and not an amendment design + flaw: the arithmetic-identity gate, the 15/15 behavior probe, and a byte-level + inspection of the REBUILT VR bundle (one `@layer fui.theme { :root, :host }` block + carrying `--base-scale`, `--spacing`, the 4 canonical `--stroke-width-*` literals, the + 4 hooks, and the 22 spacing canonicals; zero old-name declarations) all pass against + the current artifacts. The only diff-stage record in that aborted run (`button`, taken + before the stash) was the known pre-existing Focus-stories baseline drift: 141/141 + matched pairs pixel-identical, 20 extra shots from stories committed 2026-08-04 after + the last full sweep. That file also enumerated 26 `review36513-*` scratch baseline + dirs from the review session — non-canonical, excluded from phase1b and from all + verdict math (canonical set count: 76). + +7. **Perf spot-check — within noise.** E-cell rig (scenario E, 100 instances/flip), + control (git HEAD theme + tokens, stashed build) vs restructured, both `PERF_LEG=after` + bundles of the same source; pooled-window methodology per + `reports/perf-consumer-dynamic-class.md` (31 windows + 5 warmups per visit, 3 reps, + legs shuffled per cell per rep, seed 20260805, pooled n = 93/cell; headless Chromium + 141.0.7390.37; per-leg liveness asserted: control bundle 41 literal-form / 0 axis-form + occurrences, new bundle 33 axis-form + canonical stroke emission). Medians: + | Cell | control (ms) | new (ms) | delta | + | ---- | -----------: | -------: | ----: | + | Button E | 3.500 | 3.500 | +0.0% | + | Switch E | 5.400 | 5.500 | +1.9% | + | Divider E | 1.300 | 1.300 | +0.0% | + Switch's +0.1 ms median shift sits inside the overlapping IQRs (control [5.30, 5.60], + new [5.30, 5.80]) — below the series' within-leg spread; Button and Switch anchors + reproduce the post-remedy series values (3.4–3.5 / 5.3–5.5). The one added var() hop + on ~18 spacing values does not register above noise. Raw: + `.scratch/perf-eval/phase1-theming/results/raw-e-cells.json`. + +### Tailwind mechanics that make this work (probe-verified, `.scratch/phase1-theming/`) + +`@theme inline` carries a `var()` reference in a theme value VERBATIM into the compiled +utility — `.p-horizontal-m { padding: calc(var(--spacing) * 12) }` (byte-identical in +shape to `.p-12`) and `.w-thin { width: var(--stroke-width-thin) }`. That is the property +the restructure buys: one density knob rescales both spacing vocabularies, while stroke +widths resolve through their density-decoupled canonical. dist/styles.css: 1,410 → 2,810 +bytes (30 emitted declarations). + +### Interim-state semantics (honest statement, until Phase 2) + +FluentProvider's runtime theme tag (`createCSSRuleFromTheme` → one rule on +`.fui-FluentProviderN`, unlayered) still writes ALL old camelCase names as literal values +on every provider element. With option B there is no CSS alias and no shipped reader of +those names left — they are **harmless orphans** until Phase 2 removes the tag. The tag +never sets the canonical `--spacing-*` / `--stroke-width-*` names, so utilities, the +density knob, and `tokens.*` readers are provider-independent. + +Consequence extended (was already priced in for utilities by the 2026-07-27 amendments): +a custom FluentProvider `theme` override of `spacingHorizontal*` / `strokeWidth*` no +longer reaches ANY shipped reader — `tokens.*` inline styles now resolve the `:root` +canonicals. All 7 shipped themes carry byte-identical spacing/strokeWidth values +(previously asserted, zero divergence), so no shipped theme changes behavior. + +Docsite note: the `createCSSRuleFromTheme` usage examples demo a util whose output is the +old camelCase names; their module CSS was repointed to canonical names (they render under +the docsite's provider either way). The util itself is Phase-2 scope. + +One CSS-inheritance nuance, priced in: the emitted custom properties substitute their +`var(--spacing)` at `:root`, so a SUBTREE `--spacing` override reaches utilities (calc +inlined per element) but not custom-property readers (`var(--spacing-horizontal-m)` / +`tokens.*` inline styles), which keep root-level density. Document-level density (set +`--spacing` at `:root`) reaches everything. + +### Open question (recorded for the user — NOT implemented) + +Full-token-set kebab rename: the remaining ~440 tokens (colors, fonts, radii, shadows, +durations, curves, z-index) still use camelCase CSS variables +(`--colorNeutralBackground1`). Under consideration for Phase 2 alongside the runtime-tag +removal; nothing in Phase 1 depends on it either way. + +### Phase 2 (queued) + +Remove the FluentProvider runtime theme style tag / JS theming path; the CSS-native +variable graph (canonical `--spacing-*` / `--stroke-width-*` + Fluent color/typography +vars) becomes the sole contract. Decide the full-token-set kebab rename question above. From a289a5a61b6bd9c681dbfd793caddafd2255b7ed Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 15:35:15 -0700 Subject: [PATCH 592/640] chore(deps): upgrade prettier 2.8.8 -> 3.9.6 - root devDep 2.8.8 -> 3.9.6; drop the repo-wide "prettier" resolution so babel-plugin-tester@10 keeps its own prettier 2 (sync API) - drop @types/prettier (prettier 3 ships its own types) - add @prettier/sync 0.6.1 (root devDep + babel-preset-storybook-full-source dependency) for the two sync-only call sites: babel visitor in fullsource.ts and the Jest VM (no dynamic import) in FluentProvider-node.test.tsx - await prettier.format in scripts/test-ssr generateEntryPoints - storybook preview.mjs (web-components, chart-web-components): v3 standalone imports (prettier/standalone + prettier/plugins/html.mjs) and async docs.source.transform (supported by Storybook 9) - prettier-helpers.js: --loglevel renamed to --log-level in v3 Verified: FluentProvider-node jest suite green with byte-identical snapshots; nano-staged pre-commit prettier task green on probe commit. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- package.json | 5 +-- .../.storybook/preview.mjs | 8 ++-- .../package.json | 3 +- .../src/fullsource.ts | 4 +- .../FluentProvider-node.test.tsx | 4 +- .../web-components/.storybook/preview.mjs | 8 ++-- scripts/prettier/src/prettier-helpers.js | 3 +- .../test-ssr/src/utils/generateEntryPoints.ts | 4 +- .../split-library-in-two/generator.ts | 2 +- yarn.lock | 38 ++++++++++++++++--- 10 files changed, 56 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 65e153ef4f45ef..a9b682c0cd699c 100644 --- a/package.json +++ b/package.json @@ -91,6 +91,7 @@ "@oddbird/css-anchor-positioning": "0.4.0", "@phenomnomnominal/tsquery": "6.1.3", "@playwright/test": "1.56.1", + "@prettier/sync": "0.6.1", "@react-native/babel-preset": "0.73.21", "@rnx-kit/eslint-plugin": "0.8.6", "@rollup/plugin-node-resolve": "13.3.0", @@ -142,7 +143,6 @@ "@types/markdown-table": "2.0.0", "@types/micromatch": "4.0.2", "@types/node": "^22.0.0", - "@types/prettier": "2.7.2", "@types/progress": "2.0.5", "@types/react": "19.2.2", "@types/react-dom": "19.2.2", @@ -267,7 +267,7 @@ "postcss": "8.5.10", "postcss-loader": "4.1.0", "postcss-modules": "4.1.3", - "prettier": "2.8.8", + "prettier": "3.9.6", "progress": "2.0.3", "puppeteer": "24.42.0", "raw-loader": "4.0.2", @@ -374,7 +374,6 @@ "micromatch/braces": "^3.0.3", "nx/minimatch": "^9.0.7", "playwright": "1.56.1", - "prettier": "2.8.8", "prismjs": "1.30.0", "puppeteer": "24.42.0", "shell-quote": "^1.8.2", diff --git a/packages/charts/chart-web-components/.storybook/preview.mjs b/packages/charts/chart-web-components/.storybook/preview.mjs index 960958b4760105..671915a1ab511f 100644 --- a/packages/charts/chart-web-components/.storybook/preview.mjs +++ b/packages/charts/chart-web-components/.storybook/preview.mjs @@ -1,6 +1,6 @@ import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens'; -import * as prettier from 'prettier'; -import prettierPluginHTML from 'prettier/parser-html.js'; +import * as prettier from 'prettier/standalone'; +import * as prettierPluginHTML from 'prettier/plugins/html.mjs'; import { setTheme } from '@fluentui/web-components'; import webcomponentsTheme from './theme.mjs'; @@ -42,7 +42,7 @@ export const parameters = { source: { // To get around the inability to change Prettier options in the source addon, this transform function // imports the standalone Prettier and uses it to format the source with the desired options. - transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) { + async transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) { if (!src) { const fragment = storyContext.originalStoryFn(storyContext.allArgs, storyContext); if (!(fragment instanceof DocumentFragment) && !(fragment instanceof HTMLElement)) { @@ -56,7 +56,7 @@ export const parameters = { src = src.replace(FAST_EXPRESSION_COMMENTS, ''); // remove comments src = src.replace(/=""/g, ''); // remove values for boolean attributes - src = prettier.format(src, { + src = await prettier.format(src, { htmlWhitespaceSensitivity: 'ignore', parser: 'html', plugins: [prettierPluginHTML], diff --git a/packages/react-components/babel-preset-storybook-full-source/package.json b/packages/react-components/babel-preset-storybook-full-source/package.json index 2312c43f524dd0..136e62735dfac7 100644 --- a/packages/react-components/babel-preset-storybook-full-source/package.json +++ b/packages/react-components/babel-preset-storybook-full-source/package.json @@ -11,9 +11,10 @@ "license": "MIT", "dependencies": { "@babel/core": "^7.10.4", + "@prettier/sync": "^0.6.1", "@swc/helpers": "^0.5.1", "pkg-up": "^3.1.0", - "prettier": "^2.8.8" + "prettier": "^3.9.6" }, "exports": { ".": { diff --git a/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts b/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts index b9e3046fac49fa..6dc88e6e5b53f1 100644 --- a/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts +++ b/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts @@ -1,5 +1,7 @@ import * as Babel from '@babel/core'; -import * as prettier from 'prettier'; +// Babel visitors are synchronous, but prettier 3's `format` is async — use the official +// synchronous wrapper (runs prettier in a worker thread under the hood). +import * as prettier from '@prettier/sync'; import * as fs from 'fs'; import * as nodePath from 'path'; diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx index f82ecc4cce5f15..99f26dc28fdbd7 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx @@ -8,7 +8,9 @@ import * as React from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; import { resetIdsForTests } from '@fluentui/react-utilities'; import { FluentProvider } from './FluentProvider'; -import * as prettier from 'prettier'; +// prettier 3's async `format` relies on dynamic import, which Jest's VM forbids without +// --experimental-vm-modules; the synchronous worker-thread wrapper avoids both problems. +import * as prettier from '@prettier/sync'; import type { PartialTheme } from '@fluentui/react-theme'; jest.mock('@fluentui/react-utilities', () => ({ diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.mjs index 785e03891c6e2c..47c25963073189 100644 --- a/packages/web-components/.storybook/preview.mjs +++ b/packages/web-components/.storybook/preview.mjs @@ -1,6 +1,6 @@ import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens'; -import * as prettier from 'prettier'; -import prettierPluginHTML from 'prettier/parser-html.js'; +import * as prettier from 'prettier/standalone'; +import * as prettierPluginHTML from 'prettier/plugins/html.mjs'; import webcomponentsTheme from './theme.mjs'; import { setStorybookHelpersConfig } from './wc-toolkit-helpers.js'; @@ -106,7 +106,7 @@ export const parameters = { source: { // To get around the inability to change Prettier options in the source addon, this transform function // imports the standalone Prettier and uses it to format the source with the desired options. - transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) { + async transform(/** @type {string} */ src, /** @type {import('@storybook/html').StoryContext} */ storyContext) { if (!src) { const fragment = storyContext.originalStoryFn(storyContext.allArgs, storyContext); if (!(fragment instanceof DocumentFragment) && !(fragment instanceof HTMLElement)) { @@ -120,7 +120,7 @@ export const parameters = { src = src.replace(FAST_EXPRESSION_COMMENTS, ''); // remove comments src = src.replace(/=""/g, ''); // remove values for boolean attributes - src = prettier.format(src, { + src = await prettier.format(src, { htmlWhitespaceSensitivity: 'ignore', parser: 'html', plugins: [prettierPluginHTML], diff --git a/scripts/prettier/src/prettier-helpers.js b/scripts/prettier/src/prettier-helpers.js index 861b57e15fbdd6..faeced1c275de2 100644 --- a/scripts/prettier/src/prettier-helpers.js +++ b/scripts/prettier/src/prettier-helpers.js @@ -75,7 +75,8 @@ function runPrettier(files, config = {}) { prettierRulesConfig, '--ignore-path', `"${prettierIgnorePath}"`, - ...(logErrorsOnly ? ['--loglevel', 'warn'] : []), + // `--loglevel` was renamed to `--log-level` in prettier 3 + ...(logErrorsOnly ? ['--log-level', 'warn'] : []), check ? '--check' : '--write', ...prettierSupportedFiles, ].join(' '); diff --git a/scripts/test-ssr/src/utils/generateEntryPoints.ts b/scripts/test-ssr/src/utils/generateEntryPoints.ts index 659f720f907ec6..bcb702601b5811 100644 --- a/scripts/test-ssr/src/utils/generateEntryPoints.ts +++ b/scripts/test-ssr/src/utils/generateEntryPoints.ts @@ -44,6 +44,6 @@ export async function generateEntryPoints(config: GenerateEntryPointsConfig): Pr ) `; - fs.writeFileSync(config.esmEntryPoint, prettier.format(appTemplate, { parser: 'typescript' })); - fs.writeFileSync(config.cjsEntryPoint, prettier.format(storiesTemplate, { parser: 'typescript' })); + fs.writeFileSync(config.esmEntryPoint, await prettier.format(appTemplate, { parser: 'typescript' })); + fs.writeFileSync(config.cjsEntryPoint, await prettier.format(storiesTemplate, { parser: 'typescript' })); } diff --git a/tools/workspace-plugin/src/generators/split-library-in-two/generator.ts b/tools/workspace-plugin/src/generators/split-library-in-two/generator.ts index 3896e93b3bceb0..8566353906dad2 100644 --- a/tools/workspace-plugin/src/generators/split-library-in-two/generator.ts +++ b/tools/workspace-plugin/src/generators/split-library-in-two/generator.ts @@ -91,7 +91,7 @@ export async function splitLibraryInTwoGenerator(tree: Tree, options: SplitLibra await tsConfigBaseAllGenerator(tree, { verify: false, skipFormat: true }); // TODO: we don't wanna fail master build because formatting failed - // - Nx is using await `prettier.format` under the hood which is for prettier v3, but we use prettier v2 ATM, while that unnecessary await should not cause harm it seems it does + // - Nx is using await `prettier.format` under the hood which matches prettier v3 (the version this repo now uses) try { if (!options.skipFormat) { await formatFiles(tree); diff --git a/yarn.lock b/yarn.lock index 8a8acbf4c1740e..44927c2ccfc5d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2574,9 +2574,10 @@ __metadata: resolution: "@fluentui/babel-preset-storybook-full-source@workspace:packages/react-components/babel-preset-storybook-full-source" dependencies: "@babel/core": "npm:^7.10.4" + "@prettier/sync": "npm:^0.6.1" "@swc/helpers": "npm:^0.5.1" pkg-up: "npm:^3.1.0" - prettier: "npm:^2.8.8" + prettier: "npm:^3.9.6" languageName: unknown linkType: soft @@ -2831,6 +2832,7 @@ __metadata: "@oddbird/css-anchor-positioning": "npm:0.4.0" "@phenomnomnominal/tsquery": "npm:6.1.3" "@playwright/test": "npm:1.56.1" + "@prettier/sync": "npm:0.6.1" "@react-native/babel-preset": "npm:0.73.21" "@rnx-kit/eslint-plugin": "npm:0.8.6" "@rollup/plugin-node-resolve": "npm:13.3.0" @@ -2882,7 +2884,6 @@ __metadata: "@types/markdown-table": "npm:2.0.0" "@types/micromatch": "npm:4.0.2" "@types/node": "npm:^22.0.0" - "@types/prettier": "npm:2.7.2" "@types/progress": "npm:2.0.5" "@types/react": "npm:19.2.2" "@types/react-dom": "npm:19.2.2" @@ -3008,7 +3009,7 @@ __metadata: postcss: "npm:8.5.10" postcss-loader: "npm:4.1.0" postcss-modules: "npm:4.1.3" - prettier: "npm:2.8.8" + prettier: "npm:3.9.6" progress: "npm:2.0.3" puppeteer: "npm:24.42.0" raw-loader: "npm:4.0.2" @@ -8798,6 +8799,17 @@ __metadata: languageName: node linkType: hard +"@prettier/sync@npm:0.6.1, @prettier/sync@npm:^0.6.1": + version: 0.6.1 + resolution: "@prettier/sync@npm:0.6.1" + dependencies: + make-synchronized: "npm:^0.8.0" + peerDependencies: + prettier: "*" + checksum: 10c0/4cf6dd8c27f6425924ac749ca980693b447d39162b530e103f4613df470c1ec877f691d10796556b748ce8c954cc76e0f2a73e18e02b125d295168012c25df71 + languageName: node + linkType: hard + "@puppeteer/browsers@npm:2.13.0": version: 2.13.0 resolution: "@puppeteer/browsers@npm:2.13.0" @@ -10918,7 +10930,7 @@ __metadata: languageName: node linkType: hard -"@types/prettier@npm:*, @types/prettier@npm:2.7.2": +"@types/prettier@npm:*": version: 2.7.2 resolution: "@types/prettier@npm:2.7.2" checksum: 10c0/16ffbd1135c10027f118517d3b12aaaf3936be1f3c6e4c6c9c03d26d82077c2d86bf0dcad545417896f29e7d90faf058aae5c9db2e868be64298c644492ea29e @@ -23651,6 +23663,13 @@ __metadata: languageName: node linkType: hard +"make-synchronized@npm:^0.8.0": + version: 0.8.0 + resolution: "make-synchronized@npm:0.8.0" + checksum: 10c0/b8293d79e8752840a8103034866296b781c754286bf54864f4014b01f4b46710c5eaa04ffdabd7167513a4e72e7fec4396b36fb5aef16222fd5a268d1b4c041e + languageName: node + linkType: hard + "makeerror@npm:1.0.12": version: 1.0.12 resolution: "makeerror@npm:1.0.12" @@ -27021,7 +27040,16 @@ __metadata: languageName: node linkType: hard -"prettier@npm:2.8.8": +"prettier@npm:3.9.6, prettier@npm:^3.9.6": + version: 3.9.6 + resolution: "prettier@npm:3.9.6" + bin: + prettier: bin/prettier.cjs + checksum: 10c0/9f7ddae234035868f3daab3dc34e6de7e54622185afb017378029f0c09a9c023248ccf6f34def0b17a0538e18c47aa1b3188bab72965d1bf735919baa0747e99 + languageName: node + linkType: hard + +"prettier@npm:^2.0.1": version: 2.8.8 resolution: "prettier@npm:2.8.8" bin: From 57d3f8c29f08c8190145883532463662d7f93365 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 16:06:51 -0700 Subject: [PATCH 593/640] style: prettier 3 repo-wide format (1/9, no semantic change) Mechanical output of prettier 3.9.6 with the long-pinned config (defaults unchanged: trailingComma already pinned). 448 of 18247 tracked prettier- supported files drifted, 440 of them v3-only (dominated by the 3.x multi-value CSS wrapping and TS/MD printer refinements); excluded: CLAUDE.md (locally modified), babel-preset-global-context fake_node_modules fixtures. react-tailwind-theme + react-button builds verified green post-format. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .storybook/preview-head-template.html | 78 +++++++++---------- apps/perf-test-react-components/index.html | 2 +- apps/perf-test/index.html | 2 +- apps/perf-test/src/scenarios/GroupedList.tsx | 14 ++-- .../perf-test/src/scenarios/GroupedListV2.tsx | 14 ++-- apps/pr-deploy-site/chiclet-test.html | 2 +- apps/pr-deploy-site/index.html | 2 +- apps/pr-deploy-site/pr-deploy-site.css | 8 +- apps/pr-deploy-site/pr-deploy-site.js | 4 +- .../.storybook/manager-head.html | 9 ++- .../.storybook/manager-head.html | 15 ++-- .../Checkbox.stories.tsx | 4 +- .../Accessibility/ComponentLabelling.mdx | 4 +- .../src/Concepts/Slots/Slots.mdx | 3 +- apps/theming-designer/index.html | 2 +- .../convergence/make-styles-no-functions.md | 3 +- .../convergence/event-handlers-event-type.md | 3 +- .../convergence/motion-definition-n-apis.md | 40 +++------- .../convergence/native-element-props.md | 12 +-- .../convergence/simplify-prop-merging.md | 4 +- .../slot-children-render-function.md | 5 +- .../convergence/slot-null-rendering.md | 8 +- .../positioning-customizations.md | 4 +- .../rfcs/react-components/styles-handbook.md | 16 +--- .../02-solution-style-ts-configs.md | 34 ++++---- .../08-type-checking-perf-improvements.md | 8 +- .../react-wiki-archive/Advanced-auto-merge.md | 2 +- docs/react-wiki-archive/Component-Styling.md | 4 +- .../Conducting-Meetings-Style-Guide.md | 1 - .../Development-Workflow.md | 2 +- .../Fluent-UI-React-Roadmap-Q2-2021.md | 6 +- .../Fluent-UI-React-Roadmap.md | 8 +- .../griffel-to-tailwind/CONVERSION_GUIDE.md | 4 +- .../reports/build-metrics.md | 2 +- .../reports/griffel-elimination-evaluation.md | 4 +- .../reports/nyt-games-conventions.md | 6 +- .../reports/perf-will-change.md | 8 +- .../phase15-conformance-tokens-monosize.md | 35 +++++---- .../reports/phase2-batch1.md | 30 +++---- .../reports/phase2-batch2.md | 11 +-- .../reports/phase3-worklist.md | 24 +++--- .../reports/pilot-button.md | 7 +- .../reports/s5-docs-projects-decision.md | 2 +- .../reports/specials-triage.md | 4 +- .../reports/statics-removal-design.md | 24 +++--- .../reports/theming-css-native.md | 20 ++--- .../reports/theming-system.md | 18 ++--- .../reports/transition-audit.md | 11 ++- .../src/facades/ComponentTestFacade.tsx | 5 +- .../chart-utilities/src/PlotlySchema.ts | 54 +++++-------- 50 files changed, 274 insertions(+), 318 deletions(-) diff --git a/.storybook/preview-head-template.html b/.storybook/preview-head-template.html index 9f813c11b2ee63..00194ffee5a7f5 100644 --- a/.storybook/preview-head-template.html +++ b/.storybook/preview-head-template.html @@ -55,10 +55,10 @@ H = function () {}, W = { height: function () { - return re('Custom height calculation function not defined'), document.documentElement.offsetHeight; + return (re('Custom height calculation function not defined'), document.documentElement.offsetHeight); }, width: function () { - return re('Custom width calculation function not defined'), document.body.scrollWidth; + return (re('Custom width calculation function not defined'), document.body.scrollWidth); }, }, B = {}, @@ -74,7 +74,7 @@ }, } ); - window.addEventListener('test', ee, U), window.removeEventListener('test', ee, U); + (window.addEventListener('test', ee, U), window.removeEventListener('test', ee, U)); } catch (e) {} var V, X, @@ -165,16 +165,16 @@ K ); }); - te(window, 'message', function (t) { + (te(window, 'message', function (t) { var n = { init: function () { - (y = t.data), + ((y = t.data), (z = t.source), ae(), (h = !1), setTimeout(function () { v = !1; - }, m); + }, m)); }, reset: function () { v ? ie('Page reset ignored by init') : (ie('Page size reset by host page'), Me('resetPage')); @@ -190,11 +190,11 @@ }, pageInfo: function () { var e = i(); - ie('PageInfoFromParent called from parent: ' + e), H(JSON.parse(e)), ie(' --'); + (ie('PageInfoFromParent called from parent: ' + e), H(JSON.parse(e)), ie(' --')); }, message: function () { var e = i(); - ie('onMessage called from parent: ' + e), j(JSON.parse(e)), ie(' --'); + (ie('onMessage called from parent: ' + e), j(JSON.parse(e)), ie(' --')); }, }; function o() { @@ -219,11 +219,11 @@ (!1 === h ? e() : r() - ? n.init() - : ie('Ignored message of type "' + o() + '". Received before initialization.')); + ? n.init() + : ie('Ignored message of type "' + o() + '". Received before initialization.')); }), te(window, 'readystatechange', Ae), - Ae(); + Ae()); } function ee() {} function te(e, t, n, o) { @@ -250,9 +250,9 @@ Ne(0, 0, e.type, e.screenY + ':' + e.screenX); } function o(e, t) { - ie('Add event listener: ' + t), te(window.document, e, n); + (ie('Add event listener: ' + t), te(window.document, e, n)); } - (t = y.substr(M).split(':')), + ((t = y.substr(M).split(':')), (I = t[0]), (a = c !== t[1] ? Number(t[1]) : a), (l = c !== t[2] ? e(t[2]) : l), @@ -271,19 +271,19 @@ ie('Initialising iFrame (' + window.location.href + ')'), (function () { function e(e, t) { - return 'function' == typeof e && (ie('Setup custom ' + t + 'CalcMethod'), (W[t] = e), (e = 'custom')), e; + return ('function' == typeof e && (ie('Setup custom ' + t + 'CalcMethod'), (W[t] = e), (e = 'custom')), e); } 'iFrameResizer' in window && Object === window.iFrameResizer.constructor && ((function () { var e = window.iFrameResizer; - ie('Reading data from page: ' + JSON.stringify(e)), + (ie('Reading data from page: ' + JSON.stringify(e)), Object.keys(e).forEach(ue, e), (j = 'onMessage' in e ? e.onMessage : j), (q = 'onReady' in e ? e.onReady : q), (k = 'targetOrigin' in e ? e.targetOrigin : k), (p = 'heightCalculationMethod' in e ? e.heightCalculationMethod : p), - (P = 'widthCalculationMethod' in e ? e.widthCalculationMethod : P); + (P = 'widthCalculationMethod' in e ? e.widthCalculationMethod : P)); })(), (p = e(p, 'height')), (P = e(P, 'width'))); @@ -346,13 +346,13 @@ Ne(0, 0, 'message', JSON.stringify(e), t); }, setHeightCalculationMethod: function (e) { - (p = e), fe(); + ((p = e), fe()); }, setWidthCalculationMethod: function (e) { - (P = e), me(); + ((P = e), me()); }, setTargetOrigin: function (e) { - ie('Set targetOrigin: ' + e), (k = e); + (ie('Set targetOrigin: ' + e), (k = e)); }, size: function (e, t) { Oe('size', 'parentIFrame.size(' + ((e || '') + (t ? ',' + t : '')) + ')', e, t); @@ -390,7 +390,7 @@ Array.prototype.forEach.call(document.querySelectorAll('a[href^="#"]'), function (e) { '#' !== e.getAttribute('href') && te(e, 'click', function (e) { - e.preventDefault(), n(this.getAttribute('href')); + (e.preventDefault(), n(this.getAttribute('href'))); }); }); } @@ -403,7 +403,7 @@ return { findTarget: n }; })()), Oe('init', 'Init message from host page'), - q(); + q()); } function ue(e) { var t = e.split('Callback'); @@ -427,21 +427,21 @@ function t() { Oe(n.eventName, n.eventType); } - (B[e] = t), te(window, e, t, { passive: !0 }); + ((B[e] = t), te(window, e, t, { passive: !0 })); }, remove: function (e) { var t, n = B[e]; - delete B[e], (t = window), (e = e), (n = n), t.removeEventListener(e, n, !1); + (delete B[e], (t = window), (e = e), (n = n), t.removeEventListener(e, n, !1)); }, }; - n.eventNames && Array.prototype.map + (n.eventNames && Array.prototype.map ? ((n.eventName = n.eventNames[0]), n.eventNames.map(e[n.method])) : e[n.method](n.eventName), - ie(ne(n.method) + ' event listener: ' + n.eventType); + ie(ne(n.method) + ' event listener: ' + n.eventType)); } function de(e) { - se({ method: e, eventType: 'Animation Start', eventNames: ['animationstart', 'webkitAnimationStart'] }), + (se({ method: e, eventType: 'Animation Start', eventNames: ['animationstart', 'webkitAnimationStart'] }), se({ method: e, eventType: 'Animation Iteration', @@ -484,7 +484,7 @@ eventType: 'Transition End', eventNames: ['transitionend', 'webkitTransitionEnd', 'MSTransitionEnd', 'oTransitionEnd', 'otransitionend'], }), - 'child' === A && se({ method: e, eventType: 'IFrame Resized', eventName: 'resize' }); + 'child' === A && se({ method: e, eventType: 'IFrame Resized', eventName: 'resize' })); } function le(e, t, n, o) { return ( @@ -522,14 +522,14 @@ : 'childList' === e.type && Array.prototype.forEach.call(e.target.querySelectorAll('img'), t); } function o(e) { - ie('Remove listeners from ' + e.src), + (ie('Remove listeners from ' + e.src), e.removeEventListener('load', i, !1), e.removeEventListener('error', r, !1), (e = e), - u.splice(u.indexOf(e), 1); + u.splice(u.indexOf(e), 1)); } function n(e, t, n) { - o(e.target), Oe(t, n + ': ' + e.target.src); + (o(e.target), Oe(t, n + ': ' + e.target.src)); } function i(e) { n(e, 'imageLoad', 'Image loaded'); @@ -538,7 +538,7 @@ n(e, 'imageLoadFailed', 'Image load failed'); } function a(e) { - Oe('mutationObserver', 'mutationObserver: ' + e[0].target + ' ' + e[0].type), e.forEach(t); + (Oe('mutationObserver', 'mutationObserver: ' + e[0].target + ' ' + e[0].type), e.forEach(t)); } var u = [], c = window.MutationObserver || window.WebKitMutationObserver, @@ -616,12 +616,12 @@ function u(e, t) { return !(Math.abs(e - t) <= R); } - (r = c !== n ? n : Z[p]()), + ((r = c !== n ? n : Z[p]()), (a = c !== o ? o : $[P]()), - u(g, r) || (l && u(F, a)) || 'init' === e ? (Se(), Ne((g = r), (F = a), e)) : i(); + u(g, r) || (l && u(F, a)) || 'init' === e ? (Se(), Ne((g = r), (F = a), e)) : i()); } function Ee() { - (G = Date.now()), (Q = null), (K = V.apply(X, Y)), Q || (X = Y = null); + ((G = Date.now()), (Q = null), (K = V.apply(X, Y)), Q || (X = Y = null)); } function Oe(e, t, n, o) { x && e in f @@ -629,18 +629,18 @@ : (e in { reset: 1, resetPage: 1, init: 1 } || ie('Trigger event: ' + t), ('init' === e ? Te : _)(e, t, n, o)); } function Se() { - x || ((x = !0), ie('Trigger event lock on')), + (x || ((x = !0), ie('Trigger event lock on')), clearTimeout(e), (e = setTimeout(function () { - (x = !1), ie('Trigger event lock off'), ie('--'); - }, m)); + ((x = !1), ie('Trigger event lock off'), ie('--')); + }, m))); } function Me(e) { - (g = Z[p]()), (F = $[P]()), Ne(g, F, e); + ((g = Z[p]()), (F = $[P]()), Ne(g, F, e)); } function Ie(e) { var t = p; - (p = n), ie('Reset trigger event: ' + e), Se(), Me('reset'), (p = t); + ((p = n), ie('Reset trigger event: ' + e), Se(), Me('reset'), (p = t)); } function Ne(e, t, n, o, i) { var r; diff --git a/apps/perf-test-react-components/index.html b/apps/perf-test-react-components/index.html index 8b76e973d1fd9f..2747a5ce484c34 100644 --- a/apps/perf-test-react-components/index.html +++ b/apps/perf-test-react-components/index.html @@ -1,4 +1,4 @@ - + diff --git a/apps/perf-test/index.html b/apps/perf-test/index.html index 8b76e973d1fd9f..2747a5ce484c34 100644 --- a/apps/perf-test/index.html +++ b/apps/perf-test/index.html @@ -1,4 +1,4 @@ - + diff --git a/apps/perf-test/src/scenarios/GroupedList.tsx b/apps/perf-test/src/scenarios/GroupedList.tsx index 7c2ab01c04f28b..8aef5334186131 100644 --- a/apps/perf-test/src/scenarios/GroupedList.tsx +++ b/apps/perf-test/src/scenarios/GroupedList.tsx @@ -9,14 +9,12 @@ const groups = createGroups(groupCount, groupDepth, 0, groupCount); const columns = Object.keys(items[0]) .slice(0, 3) - .map( - (key: string): IColumn => ({ - key, - name: key, - fieldName: key, - minWidth: 300, - }), - ); + .map((key: string): IColumn => ({ + key, + name: key, + fieldName: key, + minWidth: 300, + })); const selection = new Selection(); selection.setItems(items); diff --git a/apps/perf-test/src/scenarios/GroupedListV2.tsx b/apps/perf-test/src/scenarios/GroupedListV2.tsx index 51d1b7a4e18b5e..418718e35e3d14 100644 --- a/apps/perf-test/src/scenarios/GroupedListV2.tsx +++ b/apps/perf-test/src/scenarios/GroupedListV2.tsx @@ -16,14 +16,12 @@ const groups = createGroups(groupCount, groupDepth, 0, groupCount); const columns = Object.keys(items[0]) .slice(0, 3) - .map( - (key: string): IColumn => ({ - key, - name: key, - fieldName: key, - minWidth: 300, - }), - ); + .map((key: string): IColumn => ({ + key, + name: key, + fieldName: key, + minWidth: 300, + })); const selection = new Selection(); selection.setItems(items); diff --git a/apps/pr-deploy-site/chiclet-test.html b/apps/pr-deploy-site/chiclet-test.html index 8d4c379d0202ad..b17c24288c9665 100644 --- a/apps/pr-deploy-site/chiclet-test.html +++ b/apps/pr-deploy-site/chiclet-test.html @@ -1,4 +1,4 @@ - + diff --git a/apps/pr-deploy-site/index.html b/apps/pr-deploy-site/index.html index 31def61dc74de4..a3ed6b26b3824e 100644 --- a/apps/pr-deploy-site/index.html +++ b/apps/pr-deploy-site/index.html @@ -1,4 +1,4 @@ - + diff --git a/apps/pr-deploy-site/pr-deploy-site.css b/apps/pr-deploy-site/pr-deploy-site.css index 65d02e1239e819..ce6abf77267d90 100644 --- a/apps/pr-deploy-site/pr-deploy-site.css +++ b/apps/pr-deploy-site/pr-deploy-site.css @@ -33,14 +33,18 @@ body { .Tile { background-color: white; border-radius: 2px; - box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); + box-shadow: + 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), + 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108); margin: 0 12px 12px 0; opacity: 0.96; transition: all 0.15s linear; } .Tile:not(.Tile--intro):hover { - box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); + box-shadow: + 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), + 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); opacity: 1; } diff --git a/apps/pr-deploy-site/pr-deploy-site.js b/apps/pr-deploy-site/pr-deploy-site.js index eb75f70ce03649..f08ebc90ac2341 100644 --- a/apps/pr-deploy-site/pr-deploy-site.js +++ b/apps/pr-deploy-site/pr-deploy-site.js @@ -10,9 +10,7 @@ function main() { * NOTE: A build step will replace this with the list of actual built packages * @type {string[]} */ - var packages = [ - /* __PACKAGES_LIST_PLACEHOLDER__ */ - ]; + var packages = [/* __PACKAGES_LIST_PLACEHOLDER__ */]; /** * @type {SiteInfo[]} diff --git a/apps/public-docsite-v9-headless/.storybook/manager-head.html b/apps/public-docsite-v9-headless/.storybook/manager-head.html index 730b487ec19bf7..30562832d95b47 100644 --- a/apps/public-docsite-v9-headless/.storybook/manager-head.html +++ b/apps/public-docsite-v9-headless/.storybook/manager-head.html @@ -27,7 +27,14 @@

" @@ -84,7 +86,9 @@ describe('FluentProvider (node)', () => {
" diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.module.css b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.module.css index a7c835e8979d06..555a979f713d85 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.module.css +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.module.css @@ -46,13 +46,13 @@ */ @apply text-start; - color: var(--colorNeutralForeground1); - background-color: var(--colorNeutralBackground1); + color: var(--color-neutral-foreground-1); + background-color: var(--color-neutral-background-1); /* from `...typographyStyles.body1` (@fluentui/react-theme) */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts index 37649092f68609..91a4e4e31ce7a9 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts @@ -13,7 +13,7 @@ describe('createCSSRuleFromTheme', () => { }; expect(createCSSRuleFromTheme('.selector', theme)).toMatchInlineSnapshot( - `".selector { --borderRadiusLarge: 10px; --colorBackgroundOverlay: rgba(0, 0, 0, 0.4); }"`, + `".selector { --borderRadiusLarge: 10px; --radius-large: 10px; --colorBackgroundOverlay: rgba(0, 0, 0, 0.4); --color-background-overlay: rgba(0, 0, 0, 0.4); }"`, ); }); @@ -26,7 +26,7 @@ describe('createCSSRuleFromTheme', () => { expect(result).not.toContain('<'); expect(result).not.toContain('>'); expect(result).toMatchInlineSnapshot( - `".selector { --colorBrandBackground: \\\\3C /style\\\\3E \\\\3C script\\\\3E alert(\\"xss\\")\\\\3C /script\\\\3E ; }"`, + `".selector { --colorBrandBackground: \\\\3C /style\\\\3E \\\\3C script\\\\3E alert(\\"xss\\")\\\\3C /script\\\\3E ; --color-brand-background: \\\\3C /style\\\\3E \\\\3C script\\\\3E alert(\\"xss\\")\\\\3C /script\\\\3E ; }"`, ); }); }); diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts index 41a15a91ae8914..d3ae7703556ea4 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts @@ -1,3 +1,4 @@ +import { tokens } from '@fluentui/react-theme'; import type { PartialTheme } from '@fluentui/react-theme'; const CSS_ESCAPE_MAP = { @@ -16,15 +17,42 @@ function escapeForStyleTag(value: string): string { return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]); } +/** + * Extracts the canonical kebab-case CSS variable for a theme key from the `tokens.*` + * read-path strings (`tokens.colorNeutralBackground1 === 'var(--color-neutral-background-1)'`, + * zIndex entries carry a fallback: `'var(--z-index-popup, 2000)'`). + * + * Deriving the name from `tokens` (instead of re-implementing the kebab algorithm here) + * keeps this file in guaranteed lockstep with @fluentui/tokens and the + * react-tailwind-theme generator, which assert the same mapping from their sides. + */ +const CANONICAL_NAME = /^var\((--[^,)]+)/; +function canonicalVariableFor(themeKey: string): string | undefined { + const read = (tokens as Record)[themeKey]; + const match = read === undefined ? null : CANONICAL_NAME.exec(read); + return match ? match[1] : undefined; +} + /** * Creates a CSS rule from a theme object. * * Useful for scenarios when you want to apply theming statically to a top level elements like `body`. + * + * THEMING PHASE 2a: every token value is written under BOTH vocabularies — the legacy + * camelCase name (`--colorNeutralBackground1`) and the canonical kebab-case name + * (`--color-neutral-background-1`) that all shipped CSS (Tailwind-generated utilities, + * module HCM blocks) and the `tokens.*` JS constants now read. The camelCase half feeds + * no shipped reader anymore; it remains as unbroken-interim insurance for hand-written + * consumer CSS until theming Phase 2b removes this runtime path entirely. */ export function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string { if (theme) { const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => { - return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `; + const value = theme[cssVar]; + const canonical = canonicalVariableFor(cssVar); + const canonicalDeclaration = canonical === undefined ? '' : `${canonical}: ${value}; `; + + return `${cssVarRule}--${cssVar}: ${value}; ${canonicalDeclaration}`; }, ''); return `${selector} { ${escapeForStyleTag(cssVarsAsString)} }`; diff --git a/packages/react-components/react-provider/stories/src/Provider/FluentProviderApplyStylesToPortals.module.css b/packages/react-components/react-provider/stories/src/Provider/FluentProviderApplyStylesToPortals.module.css index 5cdc6285515b83..bc6d1fe06c1c45 100644 --- a/packages/react-components/react-provider/stories/src/Provider/FluentProviderApplyStylesToPortals.module.css +++ b/packages/react-components/react-provider/stories/src/Provider/FluentProviderApplyStylesToPortals.module.css @@ -2,16 +2,16 @@ * Token references are the Fluent theme's CSS variables. */ .provider { - border: 3px solid var(--colorBrandForeground2); + border: 3px solid var(--color-brand-foreground-2); border-radius: 5px; padding: 5px; - background-color: var(--colorBrandBackground2); + background-color: var(--color-brand-background-2); margin-bottom: 20px; } .portal { /* '3x' is an invalid length shipped in the original story; browsers drop the whole * border declaration. Preserved verbatim — behavior-identical to what was emitted before. */ - border: 3x dotted var(--colorPaletteDarkOrangeBorder2); + border: 3x dotted var(--color-palette-dark-orange-border-2); padding: 5px; } diff --git a/packages/react-components/react-provider/stories/src/Provider/FluentProviderDefault.module.css b/packages/react-components/react-provider/stories/src/Provider/FluentProviderDefault.module.css index f4423944688fc5..bb848780e56226 100644 --- a/packages/react-components/react-provider/stories/src/Provider/FluentProviderDefault.module.css +++ b/packages/react-components/react-provider/stories/src/Provider/FluentProviderDefault.module.css @@ -12,8 +12,8 @@ } .text { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); font-size: 20px; border: 1px; border-radius: 5px; diff --git a/packages/react-components/react-provider/stories/src/Provider/FluentProviderDir.module.css b/packages/react-components/react-provider/stories/src/Provider/FluentProviderDir.module.css index f787c6468c8798..8764355d995e1b 100644 --- a/packages/react-components/react-provider/stories/src/Provider/FluentProviderDir.module.css +++ b/packages/react-components/react-provider/stories/src/Provider/FluentProviderDir.module.css @@ -9,8 +9,8 @@ } .text { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); font-size: 18px; border: 1px; border-radius: 5px; diff --git a/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.module.css b/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.module.css index 08b67e0c179d01..c7163cdc378123 100644 --- a/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.module.css +++ b/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.module.css @@ -6,8 +6,8 @@ } .text { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); font-size: 20px; border: 1px; border-radius: 5px; diff --git a/packages/react-components/react-provider/stories/src/Provider/FluentProviderNested.module.css b/packages/react-components/react-provider/stories/src/Provider/FluentProviderNested.module.css index b53ddf82ec2bd1..c2354b949ddbde 100644 --- a/packages/react-components/react-provider/stories/src/Provider/FluentProviderNested.module.css +++ b/packages/react-components/react-provider/stories/src/Provider/FluentProviderNested.module.css @@ -2,9 +2,9 @@ * Token references are the Fluent theme's CSS variables. */ .example { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); - border: 5px solid var(--colorBrandStroke1); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); + border: 5px solid var(--color-brand-stroke-1); border-radius: 5px; margin: 5px; } From f868a077d7589162e29ac4ee914828ae4ba1e0d7 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:37:30 -0700 Subject: [PATCH 611/640] refactor(react-theme-sass): repoint all 433 $-token values to canonical kebab variables (theming Phase 2a) SCSS variable NAMES stay camelCase (a JS-like read API, as in Phase 1); only the emitted var() references change. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../sass/borderRadiusTokens.scss | 22 +- .../sass/colorPaletteTokens.scss | 438 +++++++++--------- .../react-theme-sass/sass/colorTokens.scss | 368 +++++++-------- .../react-theme-sass/sass/curveTokens.scss | 18 +- .../react-theme-sass/sass/durationTokens.scss | 16 +- .../react-theme-sass/sass/fontTokens.scss | 54 +-- .../react-theme-sass/sass/shadowTokens.scss | 24 +- 7 files changed, 470 insertions(+), 470 deletions(-) diff --git a/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss b/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss index c4ed0e346bfa23..400d053d9a61de 100644 --- a/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss +++ b/packages/react-components/react-theme-sass/sass/borderRadiusTokens.scss @@ -1,11 +1,11 @@ -$borderRadiusNone: var(--borderRadiusNone); -$borderRadiusSmall: var(--borderRadiusSmall); -$borderRadiusMedium: var(--borderRadiusMedium); -$borderRadiusLarge: var(--borderRadiusLarge); -$borderRadiusXLarge: var(--borderRadiusXLarge); -$borderRadius2XLarge: var(--borderRadius2XLarge); -$borderRadius3XLarge: var(--borderRadius3XLarge); -$borderRadius4XLarge: var(--borderRadius4XLarge); -$borderRadius5XLarge: var(--borderRadius5XLarge); -$borderRadius6XLarge: var(--borderRadius6XLarge); -$borderRadiusCircular: var(--borderRadiusCircular); +$borderRadiusNone: var(--radius-none); +$borderRadiusSmall: var(--radius-small); +$borderRadiusMedium: var(--radius-medium); +$borderRadiusLarge: var(--radius-large); +$borderRadiusXLarge: var(--radius-x-large); +$borderRadius2XLarge: var(--radius-2-x-large); +$borderRadius3XLarge: var(--radius-3-x-large); +$borderRadius4XLarge: var(--radius-4-x-large); +$borderRadius5XLarge: var(--radius-5-x-large); +$borderRadius6XLarge: var(--radius-6-x-large); +$borderRadiusCircular: var(--radius-circular); diff --git a/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss b/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss index 6a0603be10d5e3..df01fed4094f7a 100644 --- a/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorPaletteTokens.scss @@ -1,219 +1,219 @@ -$colorPaletteRedBackground1: var(--colorPaletteRedBackground1); -$colorPaletteRedBackground2: var(--colorPaletteRedBackground2); -$colorPaletteRedBackground3: var(--colorPaletteRedBackground3); -$colorPaletteRedForeground1: var(--colorPaletteRedForeground1); -$colorPaletteRedForeground2: var(--colorPaletteRedForeground2); -$colorPaletteRedForeground3: var(--colorPaletteRedForeground3); -$colorPaletteRedForegroundInverted: var(--colorPaletteRedForegroundInverted); -$colorPaletteRedBorderActive: var(--colorPaletteRedBorderActive); -$colorPaletteRedBorder1: var(--colorPaletteRedBorder1); -$colorPaletteRedBorder2: var(--colorPaletteRedBorder2); - -$colorPaletteGreenBackground1: var(--colorPaletteGreenBackground1); -$colorPaletteGreenBackground2: var(--colorPaletteGreenBackground2); -$colorPaletteGreenBackground3: var(--colorPaletteGreenBackground3); -$colorPaletteGreenForeground1: var(--colorPaletteGreenForeground1); -$colorPaletteGreenForeground2: var(--colorPaletteGreenForeground2); -$colorPaletteGreenForeground3: var(--colorPaletteGreenForeground3); -$colorPaletteGreenForegroundInverted: var(--colorPaletteGreenForegroundInverted); -$colorPaletteGreenBorderActive: var(--colorPaletteGreenBorderActive); -$colorPaletteGreenBorder1: var(--colorPaletteGreenBorder1); -$colorPaletteGreenBorder2: var(--colorPaletteGreenBorder2); - -$colorPaletteDarkOrangeBackground1: var(--colorPaletteDarkOrangeBackground1); -$colorPaletteDarkOrangeBackground2: var(--colorPaletteDarkOrangeBackground2); -$colorPaletteDarkOrangeBackground3: var(--colorPaletteDarkOrangeBackground3); -$colorPaletteDarkOrangeForeground1: var(--colorPaletteDarkOrangeForeground1); -$colorPaletteDarkOrangeForeground2: var(--colorPaletteDarkOrangeForeground2); -$colorPaletteDarkOrangeForeground3: var(--colorPaletteDarkOrangeForeground3); -$colorPaletteDarkOrangeBorderActive: var(--colorPaletteDarkOrangeBorderActive); -$colorPaletteDarkOrangeBorder1: var(--colorPaletteDarkOrangeBorder1); -$colorPaletteDarkOrangeBorder2: var(--colorPaletteDarkOrangeBorder2); - -$colorPaletteYellowBackground1: var(--colorPaletteYellowBackground1); -$colorPaletteYellowBackground2: var(--colorPaletteYellowBackground2); -$colorPaletteYellowBackground3: var(--colorPaletteYellowBackground3); -$colorPaletteYellowForeground1: var(--colorPaletteYellowForeground1); -$colorPaletteYellowForeground2: var(--colorPaletteYellowForeground2); -$colorPaletteYellowForeground3: var(--colorPaletteYellowForeground3); -$colorPaletteYellowForegroundInverted: var(--colorPaletteYellowForegroundInverted); -$colorPaletteYellowBorderActive: var(--colorPaletteYellowBorderActive); -$colorPaletteYellowBorder1: var(--colorPaletteYellowBorder1); -$colorPaletteYellowBorder2: var(--colorPaletteYellowBorder2); - -$colorPaletteBerryBackground1: var(--colorPaletteBerryBackground1); -$colorPaletteBerryBackground2: var(--colorPaletteBerryBackground2); -$colorPaletteBerryBackground3: var(--colorPaletteBerryBackground3); -$colorPaletteBerryForeground1: var(--colorPaletteBerryForeground1); -$colorPaletteBerryForeground2: var(--colorPaletteBerryForeground2); -$colorPaletteBerryForeground3: var(--colorPaletteBerryForeground3); -$colorPaletteBerryBorderActive: var(--colorPaletteBerryBorderActive); -$colorPaletteBerryBorder1: var(--colorPaletteBerryBorder1); -$colorPaletteBerryBorder2: var(--colorPaletteBerryBorder2); - -$colorPaletteMarigoldBackground1: var(--colorPaletteMarigoldBackground1); -$colorPaletteMarigoldBackground2: var(--colorPaletteMarigoldBackground2); -$colorPaletteMarigoldBackground3: var(--colorPaletteMarigoldBackground3); -$colorPaletteMarigoldForeground1: var(--colorPaletteMarigoldForeground1); -$colorPaletteMarigoldForeground2: var(--colorPaletteMarigoldForeground2); -$colorPaletteMarigoldForeground3: var(--colorPaletteMarigoldForeground3); -$colorPaletteMarigoldBorderActive: var(--colorPaletteMarigoldBorderActive); -$colorPaletteMarigoldBorder1: var(--colorPaletteMarigoldBorder1); -$colorPaletteMarigoldBorder2: var(--colorPaletteMarigoldBorder2); - -$colorPaletteLightGreenBackground1: var(--colorPaletteLightGreenBackground1); -$colorPaletteLightGreenBackground2: var(--colorPaletteLightGreenBackground2); -$colorPaletteLightGreenBackground3: var(--colorPaletteLightGreenBackground3); -$colorPaletteLightGreenForeground1: var(--colorPaletteLightGreenForeground1); -$colorPaletteLightGreenForeground2: var(--colorPaletteLightGreenForeground2); -$colorPaletteLightGreenForeground3: var(--colorPaletteLightGreenForeground3); -$colorPaletteLightGreenBorderActive: var(--colorPaletteLightGreenBorderActive); -$colorPaletteLightGreenBorder1: var(--colorPaletteLightGreenBorder1); -$colorPaletteLightGreenBorder2: var(--colorPaletteLightGreenBorder2); - -$colorPaletteDarkRedBackground2: var(--colorPaletteDarkRedBackground2); -$colorPaletteDarkRedForeground2: var(--colorPaletteDarkRedForeground2); -$colorPaletteDarkRedBorderActive: var(--colorPaletteDarkRedBorderActive); - -$colorPaletteCranberryBackground2: var(--colorPaletteCranberryBackground2); -$colorPaletteCranberryForeground2: var(--colorPaletteCranberryForeground2); -$colorPaletteCranberryBorderActive: var(--colorPaletteCranberryBorderActive); - -$colorPalettePumpkinBackground2: var(--colorPalettePumpkinBackground2); -$colorPalettePumpkinForeground2: var(--colorPalettePumpkinForeground2); -$colorPalettePumpkinBorderActive: var(--colorPalettePumpkinBorderActive); - -$colorPalettePeachBackground2: var(--colorPalettePeachBackground2); -$colorPalettePeachForeground2: var(--colorPalettePeachForeground2); -$colorPalettePeachBorderActive: var(--colorPalettePeachBorderActive); - -$colorPaletteGoldBackground2: var(--colorPaletteGoldBackground2); -$colorPaletteGoldForeground2: var(--colorPaletteGoldForeground2); -$colorPaletteGoldBorderActive: var(--colorPaletteGoldBorderActive); - -$colorPaletteBrassBackground2: var(--colorPaletteBrassBackground2); -$colorPaletteBrassForeground2: var(--colorPaletteBrassForeground2); -$colorPaletteBrassBorderActive: var(--colorPaletteBrassBorderActive); - -$colorPaletteBrownBackground2: var(--colorPaletteBrownBackground2); -$colorPaletteBrownForeground2: var(--colorPaletteBrownForeground2); -$colorPaletteBrownBorderActive: var(--colorPaletteBrownBorderActive); - -$colorPaletteForestBackground2: var(--colorPaletteForestBackground2); -$colorPaletteForestForeground2: var(--colorPaletteForestForeground2); -$colorPaletteForestBorderActive: var(--colorPaletteForestBorderActive); - -$colorPaletteSeafoamBackground2: var(--colorPaletteSeafoamBackground2); -$colorPaletteSeafoamForeground2: var(--colorPaletteSeafoamForeground2); -$colorPaletteSeafoamBorderActive: var(--colorPaletteSeafoamBorderActive); - -$colorPaletteDarkGreenBackground2: var(--colorPaletteDarkGreenBackground2); -$colorPaletteDarkGreenForeground2: var(--colorPaletteDarkGreenForeground2); -$colorPaletteDarkGreenBorderActive: var(--colorPaletteDarkGreenBorderActive); - -$colorPaletteLightTealBackground2: var(--colorPaletteLightTealBackground2); -$colorPaletteLightTealForeground2: var(--colorPaletteLightTealForeground2); -$colorPaletteLightTealBorderActive: var(--colorPaletteLightTealBorderActive); - -$colorPaletteTealBackground2: var(--colorPaletteTealBackground2); -$colorPaletteTealForeground2: var(--colorPaletteTealForeground2); -$colorPaletteTealBorderActive: var(--colorPaletteTealBorderActive); - -$colorPaletteSteelBackground2: var(--colorPaletteSteelBackground2); -$colorPaletteSteelForeground2: var(--colorPaletteSteelForeground2); -$colorPaletteSteelBorderActive: var(--colorPaletteSteelBorderActive); - -$colorPaletteBlueBackground2: var(--colorPaletteBlueBackground2); -$colorPaletteBlueForeground2: var(--colorPaletteBlueForeground2); -$colorPaletteBlueBorderActive: var(--colorPaletteBlueBorderActive); - -$colorPaletteRoyalBlueBackground2: var(--colorPaletteRoyalBlueBackground2); -$colorPaletteRoyalBlueForeground2: var(--colorPaletteRoyalBlueForeground2); -$colorPaletteRoyalBlueBorderActive: var(--colorPaletteRoyalBlueBorderActive); - -$colorPaletteCornflowerBackground2: var(--colorPaletteCornflowerBackground2); -$colorPaletteCornflowerForeground2: var(--colorPaletteCornflowerForeground2); -$colorPaletteCornflowerBorderActive: var(--colorPaletteCornflowerBorderActive); - -$colorPaletteNavyBackground2: var(--colorPaletteNavyBackground2); -$colorPaletteNavyForeground2: var(--colorPaletteNavyForeground2); -$colorPaletteNavyBorderActive: var(--colorPaletteNavyBorderActive); - -$colorPaletteLavenderBackground2: var(--colorPaletteLavenderBackground2); -$colorPaletteLavenderForeground2: var(--colorPaletteLavenderForeground2); -$colorPaletteLavenderBorderActive: var(--colorPaletteLavenderBorderActive); - -$colorPalettePurpleBackground2: var(--colorPalettePurpleBackground2); -$colorPalettePurpleForeground2: var(--colorPalettePurpleForeground2); -$colorPalettePurpleBorderActive: var(--colorPalettePurpleBorderActive); - -$colorPaletteGrapeBackground2: var(--colorPaletteGrapeBackground2); -$colorPaletteGrapeForeground2: var(--colorPaletteGrapeForeground2); -$colorPaletteGrapeBorderActive: var(--colorPaletteGrapeBorderActive); - -$colorPaletteLilacBackground2: var(--colorPaletteLilacBackground2); -$colorPaletteLilacForeground2: var(--colorPaletteLilacForeground2); -$colorPaletteLilacBorderActive: var(--colorPaletteLilacBorderActive); - -$colorPalettePinkBackground2: var(--colorPalettePinkBackground2); -$colorPalettePinkForeground2: var(--colorPalettePinkForeground2); -$colorPalettePinkBorderActive: var(--colorPalettePinkBorderActive); - -$colorPaletteMagentaBackground2: var(--colorPaletteMagentaBackground2); -$colorPaletteMagentaForeground2: var(--colorPaletteMagentaForeground2); -$colorPaletteMagentaBorderActive: var(--colorPaletteMagentaBorderActive); - -$colorPalettePlumBackground2: var(--colorPalettePlumBackground2); -$colorPalettePlumForeground2: var(--colorPalettePlumForeground2); -$colorPalettePlumBorderActive: var(--colorPalettePlumBorderActive); - -$colorPaletteBeigeBackground2: var(--colorPaletteBeigeBackground2); -$colorPaletteBeigeForeground2: var(--colorPaletteBeigeForeground2); -$colorPaletteBeigeBorderActive: var(--colorPaletteBeigeBorderActive); - -$colorPaletteMinkBackground2: var(--colorPaletteMinkBackground2); -$colorPaletteMinkForeground2: var(--colorPaletteMinkForeground2); -$colorPaletteMinkBorderActive: var(--colorPaletteMinkBorderActive); - -$colorPalettePlatinumBackground2: var(--colorPalettePlatinumBackground2); -$colorPalettePlatinumForeground2: var(--colorPalettePlatinumForeground2); -$colorPalettePlatinumBorderActive: var(--colorPalettePlatinumBorderActive); - -$colorPaletteAnchorBackground2: var(--colorPaletteAnchorBackground2); -$colorPaletteAnchorForeground2: var(--colorPaletteAnchorForeground2); -$colorPaletteAnchorBorderActive: var(--colorPaletteAnchorBorderActive); - -$colorStatusSuccessBackground1: var(--colorStatusSuccessBackground1); -$colorStatusSuccessBackground2: var(--colorStatusSuccessBackground2); -$colorStatusSuccessBackground3: var(--colorStatusSuccessBackground3); -$colorStatusSuccessForeground1: var(--colorStatusSuccessForeground1); -$colorStatusSuccessForeground2: var(--colorStatusSuccessForeground2); -$colorStatusSuccessForeground3: var(--colorStatusSuccessForeground3); -$colorStatusSuccessForegroundInverted: var(--colorStatusSuccessForegroundInverted); -$colorStatusSuccessBorderActive: var(--colorStatusSuccessBorderActive); -$colorStatusSuccessBorder1: var(--colorStatusSuccessBorder1); -$colorStatusSuccessBorder2: var(--colorStatusSuccessBorder2); - -$colorStatusWarningBackground1: var(--colorStatusWarningBackground1); -$colorStatusWarningBackground2: var(--colorStatusWarningBackground2); -$colorStatusWarningBackground3: var(--colorStatusWarningBackground3); -$colorStatusWarningForeground1: var(--colorStatusWarningForeground1); -$colorStatusWarningForeground2: var(--colorStatusWarningForeground2); -$colorStatusWarningForeground3: var(--colorStatusWarningForeground3); -$colorStatusWarningForegroundInverted: var(--colorStatusWarningForegroundInverted); -$colorStatusWarningBorderActive: var(--colorStatusWarningBorderActive); -$colorStatusWarningBorder1: var(--colorStatusWarningBorder1); -$colorStatusWarningBorder2: var(--colorStatusWarningBorder2); - -$colorStatusDangerBackground1: var(--colorStatusDangerBackground1); -$colorStatusDangerBackground2: var(--colorStatusDangerBackground2); -$colorStatusDangerBackground3: var(--colorStatusDangerBackground3); -$colorStatusDangerBackground3Hover: var(--colorStatusDangerBackground3Hover); -$colorStatusDangerBackground3Pressed: var(--colorStatusDangerBackground3Pressed); -$colorStatusDangerForeground1: var(--colorStatusDangerForeground1); -$colorStatusDangerForeground2: var(--colorStatusDangerForeground2); -$colorStatusDangerForeground3: var(--colorStatusDangerForeground3); -$colorStatusDangerForegroundInverted: var(--colorStatusDangerForegroundInverted); -$colorStatusDangerBorderActive: var(--colorStatusDangerBorderActive); -$colorStatusDangerBorder1: var(--colorStatusDangerBorder1); -$colorStatusDangerBorder2: var(--colorStatusDangerBorder2); +$colorPaletteRedBackground1: var(--color-palette-red-background-1); +$colorPaletteRedBackground2: var(--color-palette-red-background-2); +$colorPaletteRedBackground3: var(--color-palette-red-background-3); +$colorPaletteRedForeground1: var(--color-palette-red-foreground-1); +$colorPaletteRedForeground2: var(--color-palette-red-foreground-2); +$colorPaletteRedForeground3: var(--color-palette-red-foreground-3); +$colorPaletteRedForegroundInverted: var(--color-palette-red-foreground-inverted); +$colorPaletteRedBorderActive: var(--color-palette-red-border-active); +$colorPaletteRedBorder1: var(--color-palette-red-border-1); +$colorPaletteRedBorder2: var(--color-palette-red-border-2); + +$colorPaletteGreenBackground1: var(--color-palette-green-background-1); +$colorPaletteGreenBackground2: var(--color-palette-green-background-2); +$colorPaletteGreenBackground3: var(--color-palette-green-background-3); +$colorPaletteGreenForeground1: var(--color-palette-green-foreground-1); +$colorPaletteGreenForeground2: var(--color-palette-green-foreground-2); +$colorPaletteGreenForeground3: var(--color-palette-green-foreground-3); +$colorPaletteGreenForegroundInverted: var(--color-palette-green-foreground-inverted); +$colorPaletteGreenBorderActive: var(--color-palette-green-border-active); +$colorPaletteGreenBorder1: var(--color-palette-green-border-1); +$colorPaletteGreenBorder2: var(--color-palette-green-border-2); + +$colorPaletteDarkOrangeBackground1: var(--color-palette-dark-orange-background-1); +$colorPaletteDarkOrangeBackground2: var(--color-palette-dark-orange-background-2); +$colorPaletteDarkOrangeBackground3: var(--color-palette-dark-orange-background-3); +$colorPaletteDarkOrangeForeground1: var(--color-palette-dark-orange-foreground-1); +$colorPaletteDarkOrangeForeground2: var(--color-palette-dark-orange-foreground-2); +$colorPaletteDarkOrangeForeground3: var(--color-palette-dark-orange-foreground-3); +$colorPaletteDarkOrangeBorderActive: var(--color-palette-dark-orange-border-active); +$colorPaletteDarkOrangeBorder1: var(--color-palette-dark-orange-border-1); +$colorPaletteDarkOrangeBorder2: var(--color-palette-dark-orange-border-2); + +$colorPaletteYellowBackground1: var(--color-palette-yellow-background-1); +$colorPaletteYellowBackground2: var(--color-palette-yellow-background-2); +$colorPaletteYellowBackground3: var(--color-palette-yellow-background-3); +$colorPaletteYellowForeground1: var(--color-palette-yellow-foreground-1); +$colorPaletteYellowForeground2: var(--color-palette-yellow-foreground-2); +$colorPaletteYellowForeground3: var(--color-palette-yellow-foreground-3); +$colorPaletteYellowForegroundInverted: var(--color-palette-yellow-foreground-inverted); +$colorPaletteYellowBorderActive: var(--color-palette-yellow-border-active); +$colorPaletteYellowBorder1: var(--color-palette-yellow-border-1); +$colorPaletteYellowBorder2: var(--color-palette-yellow-border-2); + +$colorPaletteBerryBackground1: var(--color-palette-berry-background-1); +$colorPaletteBerryBackground2: var(--color-palette-berry-background-2); +$colorPaletteBerryBackground3: var(--color-palette-berry-background-3); +$colorPaletteBerryForeground1: var(--color-palette-berry-foreground-1); +$colorPaletteBerryForeground2: var(--color-palette-berry-foreground-2); +$colorPaletteBerryForeground3: var(--color-palette-berry-foreground-3); +$colorPaletteBerryBorderActive: var(--color-palette-berry-border-active); +$colorPaletteBerryBorder1: var(--color-palette-berry-border-1); +$colorPaletteBerryBorder2: var(--color-palette-berry-border-2); + +$colorPaletteMarigoldBackground1: var(--color-palette-marigold-background-1); +$colorPaletteMarigoldBackground2: var(--color-palette-marigold-background-2); +$colorPaletteMarigoldBackground3: var(--color-palette-marigold-background-3); +$colorPaletteMarigoldForeground1: var(--color-palette-marigold-foreground-1); +$colorPaletteMarigoldForeground2: var(--color-palette-marigold-foreground-2); +$colorPaletteMarigoldForeground3: var(--color-palette-marigold-foreground-3); +$colorPaletteMarigoldBorderActive: var(--color-palette-marigold-border-active); +$colorPaletteMarigoldBorder1: var(--color-palette-marigold-border-1); +$colorPaletteMarigoldBorder2: var(--color-palette-marigold-border-2); + +$colorPaletteLightGreenBackground1: var(--color-palette-light-green-background-1); +$colorPaletteLightGreenBackground2: var(--color-palette-light-green-background-2); +$colorPaletteLightGreenBackground3: var(--color-palette-light-green-background-3); +$colorPaletteLightGreenForeground1: var(--color-palette-light-green-foreground-1); +$colorPaletteLightGreenForeground2: var(--color-palette-light-green-foreground-2); +$colorPaletteLightGreenForeground3: var(--color-palette-light-green-foreground-3); +$colorPaletteLightGreenBorderActive: var(--color-palette-light-green-border-active); +$colorPaletteLightGreenBorder1: var(--color-palette-light-green-border-1); +$colorPaletteLightGreenBorder2: var(--color-palette-light-green-border-2); + +$colorPaletteDarkRedBackground2: var(--color-palette-dark-red-background-2); +$colorPaletteDarkRedForeground2: var(--color-palette-dark-red-foreground-2); +$colorPaletteDarkRedBorderActive: var(--color-palette-dark-red-border-active); + +$colorPaletteCranberryBackground2: var(--color-palette-cranberry-background-2); +$colorPaletteCranberryForeground2: var(--color-palette-cranberry-foreground-2); +$colorPaletteCranberryBorderActive: var(--color-palette-cranberry-border-active); + +$colorPalettePumpkinBackground2: var(--color-palette-pumpkin-background-2); +$colorPalettePumpkinForeground2: var(--color-palette-pumpkin-foreground-2); +$colorPalettePumpkinBorderActive: var(--color-palette-pumpkin-border-active); + +$colorPalettePeachBackground2: var(--color-palette-peach-background-2); +$colorPalettePeachForeground2: var(--color-palette-peach-foreground-2); +$colorPalettePeachBorderActive: var(--color-palette-peach-border-active); + +$colorPaletteGoldBackground2: var(--color-palette-gold-background-2); +$colorPaletteGoldForeground2: var(--color-palette-gold-foreground-2); +$colorPaletteGoldBorderActive: var(--color-palette-gold-border-active); + +$colorPaletteBrassBackground2: var(--color-palette-brass-background-2); +$colorPaletteBrassForeground2: var(--color-palette-brass-foreground-2); +$colorPaletteBrassBorderActive: var(--color-palette-brass-border-active); + +$colorPaletteBrownBackground2: var(--color-palette-brown-background-2); +$colorPaletteBrownForeground2: var(--color-palette-brown-foreground-2); +$colorPaletteBrownBorderActive: var(--color-palette-brown-border-active); + +$colorPaletteForestBackground2: var(--color-palette-forest-background-2); +$colorPaletteForestForeground2: var(--color-palette-forest-foreground-2); +$colorPaletteForestBorderActive: var(--color-palette-forest-border-active); + +$colorPaletteSeafoamBackground2: var(--color-palette-seafoam-background-2); +$colorPaletteSeafoamForeground2: var(--color-palette-seafoam-foreground-2); +$colorPaletteSeafoamBorderActive: var(--color-palette-seafoam-border-active); + +$colorPaletteDarkGreenBackground2: var(--color-palette-dark-green-background-2); +$colorPaletteDarkGreenForeground2: var(--color-palette-dark-green-foreground-2); +$colorPaletteDarkGreenBorderActive: var(--color-palette-dark-green-border-active); + +$colorPaletteLightTealBackground2: var(--color-palette-light-teal-background-2); +$colorPaletteLightTealForeground2: var(--color-palette-light-teal-foreground-2); +$colorPaletteLightTealBorderActive: var(--color-palette-light-teal-border-active); + +$colorPaletteTealBackground2: var(--color-palette-teal-background-2); +$colorPaletteTealForeground2: var(--color-palette-teal-foreground-2); +$colorPaletteTealBorderActive: var(--color-palette-teal-border-active); + +$colorPaletteSteelBackground2: var(--color-palette-steel-background-2); +$colorPaletteSteelForeground2: var(--color-palette-steel-foreground-2); +$colorPaletteSteelBorderActive: var(--color-palette-steel-border-active); + +$colorPaletteBlueBackground2: var(--color-palette-blue-background-2); +$colorPaletteBlueForeground2: var(--color-palette-blue-foreground-2); +$colorPaletteBlueBorderActive: var(--color-palette-blue-border-active); + +$colorPaletteRoyalBlueBackground2: var(--color-palette-royal-blue-background-2); +$colorPaletteRoyalBlueForeground2: var(--color-palette-royal-blue-foreground-2); +$colorPaletteRoyalBlueBorderActive: var(--color-palette-royal-blue-border-active); + +$colorPaletteCornflowerBackground2: var(--color-palette-cornflower-background-2); +$colorPaletteCornflowerForeground2: var(--color-palette-cornflower-foreground-2); +$colorPaletteCornflowerBorderActive: var(--color-palette-cornflower-border-active); + +$colorPaletteNavyBackground2: var(--color-palette-navy-background-2); +$colorPaletteNavyForeground2: var(--color-palette-navy-foreground-2); +$colorPaletteNavyBorderActive: var(--color-palette-navy-border-active); + +$colorPaletteLavenderBackground2: var(--color-palette-lavender-background-2); +$colorPaletteLavenderForeground2: var(--color-palette-lavender-foreground-2); +$colorPaletteLavenderBorderActive: var(--color-palette-lavender-border-active); + +$colorPalettePurpleBackground2: var(--color-palette-purple-background-2); +$colorPalettePurpleForeground2: var(--color-palette-purple-foreground-2); +$colorPalettePurpleBorderActive: var(--color-palette-purple-border-active); + +$colorPaletteGrapeBackground2: var(--color-palette-grape-background-2); +$colorPaletteGrapeForeground2: var(--color-palette-grape-foreground-2); +$colorPaletteGrapeBorderActive: var(--color-palette-grape-border-active); + +$colorPaletteLilacBackground2: var(--color-palette-lilac-background-2); +$colorPaletteLilacForeground2: var(--color-palette-lilac-foreground-2); +$colorPaletteLilacBorderActive: var(--color-palette-lilac-border-active); + +$colorPalettePinkBackground2: var(--color-palette-pink-background-2); +$colorPalettePinkForeground2: var(--color-palette-pink-foreground-2); +$colorPalettePinkBorderActive: var(--color-palette-pink-border-active); + +$colorPaletteMagentaBackground2: var(--color-palette-magenta-background-2); +$colorPaletteMagentaForeground2: var(--color-palette-magenta-foreground-2); +$colorPaletteMagentaBorderActive: var(--color-palette-magenta-border-active); + +$colorPalettePlumBackground2: var(--color-palette-plum-background-2); +$colorPalettePlumForeground2: var(--color-palette-plum-foreground-2); +$colorPalettePlumBorderActive: var(--color-palette-plum-border-active); + +$colorPaletteBeigeBackground2: var(--color-palette-beige-background-2); +$colorPaletteBeigeForeground2: var(--color-palette-beige-foreground-2); +$colorPaletteBeigeBorderActive: var(--color-palette-beige-border-active); + +$colorPaletteMinkBackground2: var(--color-palette-mink-background-2); +$colorPaletteMinkForeground2: var(--color-palette-mink-foreground-2); +$colorPaletteMinkBorderActive: var(--color-palette-mink-border-active); + +$colorPalettePlatinumBackground2: var(--color-palette-platinum-background-2); +$colorPalettePlatinumForeground2: var(--color-palette-platinum-foreground-2); +$colorPalettePlatinumBorderActive: var(--color-palette-platinum-border-active); + +$colorPaletteAnchorBackground2: var(--color-palette-anchor-background-2); +$colorPaletteAnchorForeground2: var(--color-palette-anchor-foreground-2); +$colorPaletteAnchorBorderActive: var(--color-palette-anchor-border-active); + +$colorStatusSuccessBackground1: var(--color-status-success-background-1); +$colorStatusSuccessBackground2: var(--color-status-success-background-2); +$colorStatusSuccessBackground3: var(--color-status-success-background-3); +$colorStatusSuccessForeground1: var(--color-status-success-foreground-1); +$colorStatusSuccessForeground2: var(--color-status-success-foreground-2); +$colorStatusSuccessForeground3: var(--color-status-success-foreground-3); +$colorStatusSuccessForegroundInverted: var(--color-status-success-foreground-inverted); +$colorStatusSuccessBorderActive: var(--color-status-success-border-active); +$colorStatusSuccessBorder1: var(--color-status-success-border-1); +$colorStatusSuccessBorder2: var(--color-status-success-border-2); + +$colorStatusWarningBackground1: var(--color-status-warning-background-1); +$colorStatusWarningBackground2: var(--color-status-warning-background-2); +$colorStatusWarningBackground3: var(--color-status-warning-background-3); +$colorStatusWarningForeground1: var(--color-status-warning-foreground-1); +$colorStatusWarningForeground2: var(--color-status-warning-foreground-2); +$colorStatusWarningForeground3: var(--color-status-warning-foreground-3); +$colorStatusWarningForegroundInverted: var(--color-status-warning-foreground-inverted); +$colorStatusWarningBorderActive: var(--color-status-warning-border-active); +$colorStatusWarningBorder1: var(--color-status-warning-border-1); +$colorStatusWarningBorder2: var(--color-status-warning-border-2); + +$colorStatusDangerBackground1: var(--color-status-danger-background-1); +$colorStatusDangerBackground2: var(--color-status-danger-background-2); +$colorStatusDangerBackground3: var(--color-status-danger-background-3); +$colorStatusDangerBackground3Hover: var(--color-status-danger-background-3-hover); +$colorStatusDangerBackground3Pressed: var(--color-status-danger-background-3-pressed); +$colorStatusDangerForeground1: var(--color-status-danger-foreground-1); +$colorStatusDangerForeground2: var(--color-status-danger-foreground-2); +$colorStatusDangerForeground3: var(--color-status-danger-foreground-3); +$colorStatusDangerForegroundInverted: var(--color-status-danger-foreground-inverted); +$colorStatusDangerBorderActive: var(--color-status-danger-border-active); +$colorStatusDangerBorder1: var(--color-status-danger-border-1); +$colorStatusDangerBorder2: var(--color-status-danger-border-2); diff --git a/packages/react-components/react-theme-sass/sass/colorTokens.scss b/packages/react-components/react-theme-sass/sass/colorTokens.scss index 5159f44203102d..9a3a9d254eb4bc 100644 --- a/packages/react-components/react-theme-sass/sass/colorTokens.scss +++ b/packages/react-components/react-theme-sass/sass/colorTokens.scss @@ -1,184 +1,184 @@ -$colorNeutralForeground1: var(--colorNeutralForeground1); -$colorNeutralForeground1Hover: var(--colorNeutralForeground1Hover); -$colorNeutralForeground1Pressed: var(--colorNeutralForeground1Pressed); -$colorNeutralForeground1Selected: var(--colorNeutralForeground1Selected); -$colorNeutralForeground2: var(--colorNeutralForeground2); -$colorNeutralForeground2Hover: var(--colorNeutralForeground2Hover); -$colorNeutralForeground2Pressed: var(--colorNeutralForeground2Pressed); -$colorNeutralForeground2Selected: var(--colorNeutralForeground2Selected); -$colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover); -$colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed); -$colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected); -$colorNeutralForeground3: var(--colorNeutralForeground3); -$colorNeutralForeground3Hover: var(--colorNeutralForeground3Hover); -$colorNeutralForeground3Pressed: var(--colorNeutralForeground3Pressed); -$colorNeutralForeground3Selected: var(--colorNeutralForeground3Selected); -$colorNeutralForeground3BrandHover: var(--colorNeutralForeground3BrandHover); -$colorNeutralForeground3BrandPressed: var(--colorNeutralForeground3BrandPressed); -$colorNeutralForeground3BrandSelected: var(--colorNeutralForeground3BrandSelected); -$colorNeutralForeground4: var(--colorNeutralForeground4); -$colorNeutralForeground5: var(--colorNeutralForeground5); -$colorNeutralForeground5Hover: var(--colorNeutralForeground5Hover); -$colorNeutralForeground5Pressed: var(--colorNeutralForeground5Pressed); -$colorNeutralForeground5Selected: var(--colorNeutralForeground5Selected); -$colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled); -$colorNeutralForegroundInvertedDisabled: var(--colorNeutralForegroundInvertedDisabled); -$colorBrandForegroundLink: var(--colorBrandForegroundLink); -$colorBrandForegroundLinkHover: var(--colorBrandForegroundLinkHover); -$colorBrandForegroundLinkPressed: var(--colorBrandForegroundLinkPressed); -$colorBrandForegroundLinkSelected: var(--colorBrandForegroundLinkSelected); -$colorNeutralForeground2Link: var(--colorNeutralForeground2Link); -$colorNeutralForeground2LinkHover: var(--colorNeutralForeground2LinkHover); -$colorNeutralForeground2LinkPressed: var(--colorNeutralForeground2LinkPressed); -$colorNeutralForeground2LinkSelected: var(--colorNeutralForeground2LinkSelected); -$colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1); -$colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover); -$colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed); -$colorBrandForeground1: var(--colorBrandForeground1); -$colorBrandForeground2: var(--colorBrandForeground2); -$colorBrandForeground2Hover: var(--colorBrandForeground2Hover); -$colorBrandForeground2Pressed: var(--colorBrandForeground2Pressed); -$colorNeutralForeground1Static: var(--colorNeutralForeground1Static); -$colorNeutralForegroundInverted: var(--colorNeutralForegroundInverted); -$colorNeutralForegroundInvertedHover: var(--colorNeutralForegroundInvertedHover); -$colorNeutralForegroundInvertedPressed: var(--colorNeutralForegroundInvertedPressed); -$colorNeutralForegroundInvertedSelected: var(--colorNeutralForegroundInvertedSelected); -$colorNeutralForegroundInverted2: var(--colorNeutralForegroundInverted2); -$colorNeutralForegroundOnBrand: var(--colorNeutralForegroundOnBrand); -$colorNeutralForegroundStaticInverted: var(--colorNeutralForegroundStaticInverted); -$colorNeutralForegroundInvertedLink: var(--colorNeutralForegroundInvertedLink); -$colorNeutralForegroundInvertedLinkHover: var(--colorNeutralForegroundInvertedLinkHover); -$colorNeutralForegroundInvertedLinkPressed: var(--colorNeutralForegroundInvertedLinkPressed); -$colorNeutralForegroundInvertedLinkSelected: var(--colorNeutralForegroundInvertedLinkSelected); -$colorBrandForegroundInverted: var(--colorBrandForegroundInverted); -$colorBrandForegroundInvertedHover: var(--colorBrandForegroundInvertedHover); -$colorBrandForegroundInvertedPressed: var(--colorBrandForegroundInvertedPressed); -$colorBrandForegroundOnLight: var(--colorBrandForegroundOnLight); -$colorBrandForegroundOnLightHover: var(--colorBrandForegroundOnLightHover); -$colorBrandForegroundOnLightPressed: var(--colorBrandForegroundOnLightPressed); -$colorBrandForegroundOnLightSelected: var(--colorBrandForegroundOnLightSelected); -$colorNeutralBackground1: var(--colorNeutralBackground1); -$colorNeutralBackground1Hover: var(--colorNeutralBackground1Hover); -$colorNeutralBackground1Pressed: var(--colorNeutralBackground1Pressed); -$colorNeutralBackground1Selected: var(--colorNeutralBackground1Selected); -$colorNeutralBackground2: var(--colorNeutralBackground2); -$colorNeutralBackground2Hover: var(--colorNeutralBackground2Hover); -$colorNeutralBackground2Pressed: var(--colorNeutralBackground2Pressed); -$colorNeutralBackground2Selected: var(--colorNeutralBackground2Selected); -$colorNeutralBackground3: var(--colorNeutralBackground3); -$colorNeutralBackground3Hover: var(--colorNeutralBackground3Hover); -$colorNeutralBackground3Pressed: var(--colorNeutralBackground3Pressed); -$colorNeutralBackground3Selected: var(--colorNeutralBackground3Selected); -$colorNeutralBackground4: var(--colorNeutralBackground4); -$colorNeutralBackground4Hover: var(--colorNeutralBackground4Hover); -$colorNeutralBackground4Pressed: var(--colorNeutralBackground4Pressed); -$colorNeutralBackground4Selected: var(--colorNeutralBackground4Selected); -$colorNeutralBackground5: var(--colorNeutralBackground5); -$colorNeutralBackground5Hover: var(--colorNeutralBackground5Hover); -$colorNeutralBackground5Pressed: var(--colorNeutralBackground5Pressed); -$colorNeutralBackground5Selected: var(--colorNeutralBackground5Selected); -$colorNeutralBackground6: var(--colorNeutralBackground6); -$colorNeutralBackground7: var(--colorNeutralBackground7); -$colorNeutralBackground7Hover: var(--colorNeutralBackground7Hover); -$colorNeutralBackground7Pressed: var(--colorNeutralBackground7Pressed); -$colorNeutralBackground7Selected: var(--colorNeutralBackground7Selected); -$colorNeutralBackground8: var(--colorNeutralBackground8); -$colorNeutralBackgroundInverted: var(--colorNeutralBackgroundInverted); -$colorNeutralBackgroundInvertedHover: var(--colorNeutralBackgroundInvertedHover); -$colorNeutralBackgroundInvertedPressed: var(--colorNeutralBackgroundInvertedPressed); -$colorNeutralBackgroundInvertedSelected: var(--colorNeutralBackgroundInvertedSelected); -$colorNeutralBackgroundStatic: var(--colorNeutralBackgroundStatic); -$colorNeutralBackgroundAlpha: var(--colorNeutralBackgroundAlpha); -$colorNeutralBackgroundAlpha2: var(--colorNeutralBackgroundAlpha2); -$colorSubtleBackground: var(--colorSubtleBackground); -$colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover); -$colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed); -$colorSubtleBackgroundSelected: var(--colorSubtleBackgroundSelected); -$colorSubtleBackgroundLightAlphaHover: var(--colorSubtleBackgroundLightAlphaHover); -$colorSubtleBackgroundLightAlphaPressed: var(--colorSubtleBackgroundLightAlphaPressed); -$colorSubtleBackgroundLightAlphaSelected: var(--colorSubtleBackgroundLightAlphaSelected); -$colorSubtleBackgroundInverted: var(--colorSubtleBackgroundInverted); -$colorSubtleBackgroundInvertedHover: var(--colorSubtleBackgroundInvertedHover); -$colorSubtleBackgroundInvertedPressed: var(--colorSubtleBackgroundInvertedPressed); -$colorSubtleBackgroundInvertedSelected: var(--colorSubtleBackgroundInvertedSelected); -$colorTransparentBackground: var(--colorTransparentBackground); -$colorTransparentBackgroundHover: var(--colorTransparentBackgroundHover); -$colorTransparentBackgroundPressed: var(--colorTransparentBackgroundPressed); -$colorTransparentBackgroundSelected: var(--colorTransparentBackgroundSelected); -$colorNeutralBackgroundDisabled: var(--colorNeutralBackgroundDisabled); -$colorNeutralBackgroundDisabled2: var(--colorNeutralBackgroundDisabled2); -$colorNeutralBackgroundInvertedDisabled: var(--colorNeutralBackgroundInvertedDisabled); -$colorNeutralStencil1: var(--colorNeutralStencil1); -$colorNeutralStencil2: var(--colorNeutralStencil2); -$colorNeutralStencil1Alpha: var(--colorNeutralStencil1Alpha); -$colorNeutralStencil2Alpha: var(--colorNeutralStencil2Alpha); -$colorBackgroundOverlay: var(--colorBackgroundOverlay); -$colorScrollbarOverlay: var(--colorScrollbarOverlay); -$colorBrandBackground: var(--colorBrandBackground); -$colorBrandBackgroundHover: var(--colorBrandBackgroundHover); -$colorBrandBackgroundPressed: var(--colorBrandBackgroundPressed); -$colorBrandBackgroundSelected: var(--colorBrandBackgroundSelected); -$colorCompoundBrandBackground: var(--colorCompoundBrandBackground); -$colorCompoundBrandBackgroundHover: var(--colorCompoundBrandBackgroundHover); -$colorCompoundBrandBackgroundPressed: var(--colorCompoundBrandBackgroundPressed); -$colorBrandBackgroundStatic: var(--colorBrandBackgroundStatic); -$colorBrandBackground2: var(--colorBrandBackground2); -$colorBrandBackground2Hover: var(--colorBrandBackground2Hover); -$colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed); -$colorBrandBackground3Static: var(--colorBrandBackground3Static); -$colorBrandBackground4Static: var(--colorBrandBackground4Static); -$colorBrandBackgroundInverted: var(--colorBrandBackgroundInverted); -$colorBrandBackgroundInvertedHover: var(--colorBrandBackgroundInvertedHover); -$colorBrandBackgroundInvertedPressed: var(--colorBrandBackgroundInvertedPressed); -$colorBrandBackgroundInvertedSelected: var(--colorBrandBackgroundInvertedSelected); -$colorNeutralCardBackground: var(--colorNeutralCardBackground); -$colorNeutralCardBackgroundHover: var(--colorNeutralCardBackgroundHover); -$colorNeutralCardBackgroundPressed: var(--colorNeutralCardBackgroundPressed); -$colorNeutralCardBackgroundSelected: var(--colorNeutralCardBackgroundSelected); -$colorNeutralCardBackgroundDisabled: var(--colorNeutralCardBackgroundDisabled); -$colorNeutralStrokeAccessible: var(--colorNeutralStrokeAccessible); -$colorNeutralStrokeAccessibleHover: var(--colorNeutralStrokeAccessibleHover); -$colorNeutralStrokeAccessiblePressed: var(--colorNeutralStrokeAccessiblePressed); -$colorNeutralStrokeAccessibleSelected: var(--colorNeutralStrokeAccessibleSelected); -$colorNeutralStroke1: var(--colorNeutralStroke1); -$colorNeutralStroke1Hover: var(--colorNeutralStroke1Hover); -$colorNeutralStroke1Pressed: var(--colorNeutralStroke1Pressed); -$colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected); -$colorNeutralStroke2: var(--colorNeutralStroke2); -$colorNeutralStroke3: var(--colorNeutralStroke3); -$colorNeutralStroke4: var(--colorNeutralStroke4); -$colorNeutralStroke4Hover: var(--colorNeutralStroke4Hover); -$colorNeutralStroke4Pressed: var(--colorNeutralStroke4Pressed); -$colorNeutralStroke4Selected: var(--colorNeutralStroke4Selected); -$colorNeutralStrokeSubtle: var(--colorNeutralStrokeSubtle); -$colorNeutralStrokeOnBrand: var(--colorNeutralStrokeOnBrand); -$colorNeutralStrokeOnBrand2: var(--colorNeutralStrokeOnBrand2); -$colorNeutralStrokeOnBrand2Hover: var(--colorNeutralStrokeOnBrand2Hover); -$colorNeutralStrokeOnBrand2Pressed: var(--colorNeutralStrokeOnBrand2Pressed); -$colorNeutralStrokeOnBrand2Selected: var(--colorNeutralStrokeOnBrand2Selected); -$colorBrandStroke1: var(--colorBrandStroke1); -$colorBrandStroke2: var(--colorBrandStroke2); -$colorBrandStroke2Hover: var(--colorBrandStroke2Hover); -$colorBrandStroke2Pressed: var(--colorBrandStroke2Pressed); -$colorBrandStroke2Contrast: var(--colorBrandStroke2Contrast); -$colorCompoundBrandStroke: var(--colorCompoundBrandStroke); -$colorCompoundBrandStrokeHover: var(--colorCompoundBrandStrokeHover); -$colorCompoundBrandStrokePressed: var(--colorCompoundBrandStrokePressed); -$colorNeutralStrokeDisabled: var(--colorNeutralStrokeDisabled); -$colorNeutralStrokeDisabled2: var(--colorNeutralStrokeDisabled2); -$colorNeutralStrokeInvertedDisabled: var(--colorNeutralStrokeInvertedDisabled); -$colorTransparentStroke: var(--colorTransparentStroke); -$colorTransparentStrokeInteractive: var(--colorTransparentStrokeInteractive); -$colorTransparentStrokeDisabled: var(--colorTransparentStrokeDisabled); -$colorNeutralStrokeAlpha: var(--colorNeutralStrokeAlpha); -$colorNeutralStrokeAlpha2: var(--colorNeutralStrokeAlpha2); -$colorStrokeFocus1: var(--colorStrokeFocus1); -$colorStrokeFocus2: var(--colorStrokeFocus2); -$colorNeutralShadowAmbient: var(--colorNeutralShadowAmbient); -$colorNeutralShadowKey: var(--colorNeutralShadowKey); -$colorNeutralShadowAmbientLighter: var(--colorNeutralShadowAmbientLighter); -$colorNeutralShadowKeyLighter: var(--colorNeutralShadowKeyLighter); -$colorNeutralShadowAmbientDarker: var(--colorNeutralShadowAmbientDarker); -$colorNeutralShadowKeyDarker: var(--colorNeutralShadowKeyDarker); -$colorBrandShadowAmbient: var(--colorBrandShadowAmbient); -$colorBrandShadowKey: var(--colorBrandShadowKey); +$colorNeutralForeground1: var(--color-neutral-foreground-1); +$colorNeutralForeground1Hover: var(--color-neutral-foreground-1-hover); +$colorNeutralForeground1Pressed: var(--color-neutral-foreground-1-pressed); +$colorNeutralForeground1Selected: var(--color-neutral-foreground-1-selected); +$colorNeutralForeground2: var(--color-neutral-foreground-2); +$colorNeutralForeground2Hover: var(--color-neutral-foreground-2-hover); +$colorNeutralForeground2Pressed: var(--color-neutral-foreground-2-pressed); +$colorNeutralForeground2Selected: var(--color-neutral-foreground-2-selected); +$colorNeutralForeground2BrandHover: var(--color-neutral-foreground-2-brand-hover); +$colorNeutralForeground2BrandPressed: var(--color-neutral-foreground-2-brand-pressed); +$colorNeutralForeground2BrandSelected: var(--color-neutral-foreground-2-brand-selected); +$colorNeutralForeground3: var(--color-neutral-foreground-3); +$colorNeutralForeground3Hover: var(--color-neutral-foreground-3-hover); +$colorNeutralForeground3Pressed: var(--color-neutral-foreground-3-pressed); +$colorNeutralForeground3Selected: var(--color-neutral-foreground-3-selected); +$colorNeutralForeground3BrandHover: var(--color-neutral-foreground-3-brand-hover); +$colorNeutralForeground3BrandPressed: var(--color-neutral-foreground-3-brand-pressed); +$colorNeutralForeground3BrandSelected: var(--color-neutral-foreground-3-brand-selected); +$colorNeutralForeground4: var(--color-neutral-foreground-4); +$colorNeutralForeground5: var(--color-neutral-foreground-5); +$colorNeutralForeground5Hover: var(--color-neutral-foreground-5-hover); +$colorNeutralForeground5Pressed: var(--color-neutral-foreground-5-pressed); +$colorNeutralForeground5Selected: var(--color-neutral-foreground-5-selected); +$colorNeutralForegroundDisabled: var(--color-neutral-foreground-disabled); +$colorNeutralForegroundInvertedDisabled: var(--color-neutral-foreground-inverted-disabled); +$colorBrandForegroundLink: var(--color-brand-foreground-link); +$colorBrandForegroundLinkHover: var(--color-brand-foreground-link-hover); +$colorBrandForegroundLinkPressed: var(--color-brand-foreground-link-pressed); +$colorBrandForegroundLinkSelected: var(--color-brand-foreground-link-selected); +$colorNeutralForeground2Link: var(--color-neutral-foreground-2-link); +$colorNeutralForeground2LinkHover: var(--color-neutral-foreground-2-link-hover); +$colorNeutralForeground2LinkPressed: var(--color-neutral-foreground-2-link-pressed); +$colorNeutralForeground2LinkSelected: var(--color-neutral-foreground-2-link-selected); +$colorCompoundBrandForeground1: var(--color-compound-brand-foreground-1); +$colorCompoundBrandForeground1Hover: var(--color-compound-brand-foreground-1-hover); +$colorCompoundBrandForeground1Pressed: var(--color-compound-brand-foreground-1-pressed); +$colorBrandForeground1: var(--color-brand-foreground-1); +$colorBrandForeground2: var(--color-brand-foreground-2); +$colorBrandForeground2Hover: var(--color-brand-foreground-2-hover); +$colorBrandForeground2Pressed: var(--color-brand-foreground-2-pressed); +$colorNeutralForeground1Static: var(--color-neutral-foreground-1-static); +$colorNeutralForegroundInverted: var(--color-neutral-foreground-inverted); +$colorNeutralForegroundInvertedHover: var(--color-neutral-foreground-inverted-hover); +$colorNeutralForegroundInvertedPressed: var(--color-neutral-foreground-inverted-pressed); +$colorNeutralForegroundInvertedSelected: var(--color-neutral-foreground-inverted-selected); +$colorNeutralForegroundInverted2: var(--color-neutral-foreground-inverted-2); +$colorNeutralForegroundOnBrand: var(--color-neutral-foreground-on-brand); +$colorNeutralForegroundStaticInverted: var(--color-neutral-foreground-static-inverted); +$colorNeutralForegroundInvertedLink: var(--color-neutral-foreground-inverted-link); +$colorNeutralForegroundInvertedLinkHover: var(--color-neutral-foreground-inverted-link-hover); +$colorNeutralForegroundInvertedLinkPressed: var(--color-neutral-foreground-inverted-link-pressed); +$colorNeutralForegroundInvertedLinkSelected: var(--color-neutral-foreground-inverted-link-selected); +$colorBrandForegroundInverted: var(--color-brand-foreground-inverted); +$colorBrandForegroundInvertedHover: var(--color-brand-foreground-inverted-hover); +$colorBrandForegroundInvertedPressed: var(--color-brand-foreground-inverted-pressed); +$colorBrandForegroundOnLight: var(--color-brand-foreground-on-light); +$colorBrandForegroundOnLightHover: var(--color-brand-foreground-on-light-hover); +$colorBrandForegroundOnLightPressed: var(--color-brand-foreground-on-light-pressed); +$colorBrandForegroundOnLightSelected: var(--color-brand-foreground-on-light-selected); +$colorNeutralBackground1: var(--color-neutral-background-1); +$colorNeutralBackground1Hover: var(--color-neutral-background-1-hover); +$colorNeutralBackground1Pressed: var(--color-neutral-background-1-pressed); +$colorNeutralBackground1Selected: var(--color-neutral-background-1-selected); +$colorNeutralBackground2: var(--color-neutral-background-2); +$colorNeutralBackground2Hover: var(--color-neutral-background-2-hover); +$colorNeutralBackground2Pressed: var(--color-neutral-background-2-pressed); +$colorNeutralBackground2Selected: var(--color-neutral-background-2-selected); +$colorNeutralBackground3: var(--color-neutral-background-3); +$colorNeutralBackground3Hover: var(--color-neutral-background-3-hover); +$colorNeutralBackground3Pressed: var(--color-neutral-background-3-pressed); +$colorNeutralBackground3Selected: var(--color-neutral-background-3-selected); +$colorNeutralBackground4: var(--color-neutral-background-4); +$colorNeutralBackground4Hover: var(--color-neutral-background-4-hover); +$colorNeutralBackground4Pressed: var(--color-neutral-background-4-pressed); +$colorNeutralBackground4Selected: var(--color-neutral-background-4-selected); +$colorNeutralBackground5: var(--color-neutral-background-5); +$colorNeutralBackground5Hover: var(--color-neutral-background-5-hover); +$colorNeutralBackground5Pressed: var(--color-neutral-background-5-pressed); +$colorNeutralBackground5Selected: var(--color-neutral-background-5-selected); +$colorNeutralBackground6: var(--color-neutral-background-6); +$colorNeutralBackground7: var(--color-neutral-background-7); +$colorNeutralBackground7Hover: var(--color-neutral-background-7-hover); +$colorNeutralBackground7Pressed: var(--color-neutral-background-7-pressed); +$colorNeutralBackground7Selected: var(--color-neutral-background-7-selected); +$colorNeutralBackground8: var(--color-neutral-background-8); +$colorNeutralBackgroundInverted: var(--color-neutral-background-inverted); +$colorNeutralBackgroundInvertedHover: var(--color-neutral-background-inverted-hover); +$colorNeutralBackgroundInvertedPressed: var(--color-neutral-background-inverted-pressed); +$colorNeutralBackgroundInvertedSelected: var(--color-neutral-background-inverted-selected); +$colorNeutralBackgroundStatic: var(--color-neutral-background-static); +$colorNeutralBackgroundAlpha: var(--color-neutral-background-alpha); +$colorNeutralBackgroundAlpha2: var(--color-neutral-background-alpha-2); +$colorSubtleBackground: var(--color-subtle-background); +$colorSubtleBackgroundHover: var(--color-subtle-background-hover); +$colorSubtleBackgroundPressed: var(--color-subtle-background-pressed); +$colorSubtleBackgroundSelected: var(--color-subtle-background-selected); +$colorSubtleBackgroundLightAlphaHover: var(--color-subtle-background-light-alpha-hover); +$colorSubtleBackgroundLightAlphaPressed: var(--color-subtle-background-light-alpha-pressed); +$colorSubtleBackgroundLightAlphaSelected: var(--color-subtle-background-light-alpha-selected); +$colorSubtleBackgroundInverted: var(--color-subtle-background-inverted); +$colorSubtleBackgroundInvertedHover: var(--color-subtle-background-inverted-hover); +$colorSubtleBackgroundInvertedPressed: var(--color-subtle-background-inverted-pressed); +$colorSubtleBackgroundInvertedSelected: var(--color-subtle-background-inverted-selected); +$colorTransparentBackground: var(--color-transparent-background); +$colorTransparentBackgroundHover: var(--color-transparent-background-hover); +$colorTransparentBackgroundPressed: var(--color-transparent-background-pressed); +$colorTransparentBackgroundSelected: var(--color-transparent-background-selected); +$colorNeutralBackgroundDisabled: var(--color-neutral-background-disabled); +$colorNeutralBackgroundDisabled2: var(--color-neutral-background-disabled-2); +$colorNeutralBackgroundInvertedDisabled: var(--color-neutral-background-inverted-disabled); +$colorNeutralStencil1: var(--color-neutral-stencil-1); +$colorNeutralStencil2: var(--color-neutral-stencil-2); +$colorNeutralStencil1Alpha: var(--color-neutral-stencil-1-alpha); +$colorNeutralStencil2Alpha: var(--color-neutral-stencil-2-alpha); +$colorBackgroundOverlay: var(--color-background-overlay); +$colorScrollbarOverlay: var(--color-scrollbar-overlay); +$colorBrandBackground: var(--color-brand-background); +$colorBrandBackgroundHover: var(--color-brand-background-hover); +$colorBrandBackgroundPressed: var(--color-brand-background-pressed); +$colorBrandBackgroundSelected: var(--color-brand-background-selected); +$colorCompoundBrandBackground: var(--color-compound-brand-background); +$colorCompoundBrandBackgroundHover: var(--color-compound-brand-background-hover); +$colorCompoundBrandBackgroundPressed: var(--color-compound-brand-background-pressed); +$colorBrandBackgroundStatic: var(--color-brand-background-static); +$colorBrandBackground2: var(--color-brand-background-2); +$colorBrandBackground2Hover: var(--color-brand-background-2-hover); +$colorBrandBackground2Pressed: var(--color-brand-background-2-pressed); +$colorBrandBackground3Static: var(--color-brand-background-3-static); +$colorBrandBackground4Static: var(--color-brand-background-4-static); +$colorBrandBackgroundInverted: var(--color-brand-background-inverted); +$colorBrandBackgroundInvertedHover: var(--color-brand-background-inverted-hover); +$colorBrandBackgroundInvertedPressed: var(--color-brand-background-inverted-pressed); +$colorBrandBackgroundInvertedSelected: var(--color-brand-background-inverted-selected); +$colorNeutralCardBackground: var(--color-neutral-card-background); +$colorNeutralCardBackgroundHover: var(--color-neutral-card-background-hover); +$colorNeutralCardBackgroundPressed: var(--color-neutral-card-background-pressed); +$colorNeutralCardBackgroundSelected: var(--color-neutral-card-background-selected); +$colorNeutralCardBackgroundDisabled: var(--color-neutral-card-background-disabled); +$colorNeutralStrokeAccessible: var(--color-neutral-stroke-accessible); +$colorNeutralStrokeAccessibleHover: var(--color-neutral-stroke-accessible-hover); +$colorNeutralStrokeAccessiblePressed: var(--color-neutral-stroke-accessible-pressed); +$colorNeutralStrokeAccessibleSelected: var(--color-neutral-stroke-accessible-selected); +$colorNeutralStroke1: var(--color-neutral-stroke-1); +$colorNeutralStroke1Hover: var(--color-neutral-stroke-1-hover); +$colorNeutralStroke1Pressed: var(--color-neutral-stroke-1-pressed); +$colorNeutralStroke1Selected: var(--color-neutral-stroke-1-selected); +$colorNeutralStroke2: var(--color-neutral-stroke-2); +$colorNeutralStroke3: var(--color-neutral-stroke-3); +$colorNeutralStroke4: var(--color-neutral-stroke-4); +$colorNeutralStroke4Hover: var(--color-neutral-stroke-4-hover); +$colorNeutralStroke4Pressed: var(--color-neutral-stroke-4-pressed); +$colorNeutralStroke4Selected: var(--color-neutral-stroke-4-selected); +$colorNeutralStrokeSubtle: var(--color-neutral-stroke-subtle); +$colorNeutralStrokeOnBrand: var(--color-neutral-stroke-on-brand); +$colorNeutralStrokeOnBrand2: var(--color-neutral-stroke-on-brand-2); +$colorNeutralStrokeOnBrand2Hover: var(--color-neutral-stroke-on-brand-2-hover); +$colorNeutralStrokeOnBrand2Pressed: var(--color-neutral-stroke-on-brand-2-pressed); +$colorNeutralStrokeOnBrand2Selected: var(--color-neutral-stroke-on-brand-2-selected); +$colorBrandStroke1: var(--color-brand-stroke-1); +$colorBrandStroke2: var(--color-brand-stroke-2); +$colorBrandStroke2Hover: var(--color-brand-stroke-2-hover); +$colorBrandStroke2Pressed: var(--color-brand-stroke-2-pressed); +$colorBrandStroke2Contrast: var(--color-brand-stroke-2-contrast); +$colorCompoundBrandStroke: var(--color-compound-brand-stroke); +$colorCompoundBrandStrokeHover: var(--color-compound-brand-stroke-hover); +$colorCompoundBrandStrokePressed: var(--color-compound-brand-stroke-pressed); +$colorNeutralStrokeDisabled: var(--color-neutral-stroke-disabled); +$colorNeutralStrokeDisabled2: var(--color-neutral-stroke-disabled-2); +$colorNeutralStrokeInvertedDisabled: var(--color-neutral-stroke-inverted-disabled); +$colorTransparentStroke: var(--color-transparent-stroke); +$colorTransparentStrokeInteractive: var(--color-transparent-stroke-interactive); +$colorTransparentStrokeDisabled: var(--color-transparent-stroke-disabled); +$colorNeutralStrokeAlpha: var(--color-neutral-stroke-alpha); +$colorNeutralStrokeAlpha2: var(--color-neutral-stroke-alpha-2); +$colorStrokeFocus1: var(--color-stroke-focus-1); +$colorStrokeFocus2: var(--color-stroke-focus-2); +$colorNeutralShadowAmbient: var(--color-neutral-shadow-ambient); +$colorNeutralShadowKey: var(--color-neutral-shadow-key); +$colorNeutralShadowAmbientLighter: var(--color-neutral-shadow-ambient-lighter); +$colorNeutralShadowKeyLighter: var(--color-neutral-shadow-key-lighter); +$colorNeutralShadowAmbientDarker: var(--color-neutral-shadow-ambient-darker); +$colorNeutralShadowKeyDarker: var(--color-neutral-shadow-key-darker); +$colorBrandShadowAmbient: var(--color-brand-shadow-ambient); +$colorBrandShadowKey: var(--color-brand-shadow-key); diff --git a/packages/react-components/react-theme-sass/sass/curveTokens.scss b/packages/react-components/react-theme-sass/sass/curveTokens.scss index f6b8ce81e63a72..eb1486a246a264 100644 --- a/packages/react-components/react-theme-sass/sass/curveTokens.scss +++ b/packages/react-components/react-theme-sass/sass/curveTokens.scss @@ -1,9 +1,9 @@ -$curveAccelerateMax: var(--curveAccelerateMax); -$curveAccelerateMid: var(--curveAccelerateMid); -$curveAccelerateMin: var(--curveAccelerateMin); -$curveDecelerateMax: var(--curveDecelerateMax); -$curveDecelerateMid: var(--curveDecelerateMid); -$curveDecelerateMin: var(--curveDecelerateMin); -$curveEasyEaseMax: var(--curveEasyEaseMax); -$curveEasyEase: var(--curveEasyEase); -$curveLinear: var(--curveLinear); +$curveAccelerateMax: var(--ease-accelerate-max); +$curveAccelerateMid: var(--ease-accelerate-mid); +$curveAccelerateMin: var(--ease-accelerate-min); +$curveDecelerateMax: var(--ease-decelerate-max); +$curveDecelerateMid: var(--ease-decelerate-mid); +$curveDecelerateMin: var(--ease-decelerate-min); +$curveEasyEaseMax: var(--ease-easy-ease-max); +$curveEasyEase: var(--ease-easy-ease); +$curveLinear: var(--ease-linear); diff --git a/packages/react-components/react-theme-sass/sass/durationTokens.scss b/packages/react-components/react-theme-sass/sass/durationTokens.scss index 911c88d4548db6..9abd1b984ff222 100644 --- a/packages/react-components/react-theme-sass/sass/durationTokens.scss +++ b/packages/react-components/react-theme-sass/sass/durationTokens.scss @@ -1,8 +1,8 @@ -$durationUltraFast: var(--durationUltraFast); -$durationFaster: var(--durationFaster); -$durationFast: var(--durationFast); -$durationNormal: var(--durationNormal); -$durationGentle: var(--durationGentle); -$durationSlow: var(--durationSlow); -$durationSlower: var(--durationSlower); -$durationUltraSlow: var(--durationUltraSlow); +$durationUltraFast: var(--duration-ultra-fast); +$durationFaster: var(--duration-faster); +$durationFast: var(--duration-fast); +$durationNormal: var(--duration-normal); +$durationGentle: var(--duration-gentle); +$durationSlow: var(--duration-slow); +$durationSlower: var(--duration-slower); +$durationUltraSlow: var(--duration-ultra-slow); diff --git a/packages/react-components/react-theme-sass/sass/fontTokens.scss b/packages/react-components/react-theme-sass/sass/fontTokens.scss index d34398f681297c..ece4b5edf683d9 100644 --- a/packages/react-components/react-theme-sass/sass/fontTokens.scss +++ b/packages/react-components/react-theme-sass/sass/fontTokens.scss @@ -1,30 +1,30 @@ -$fontSizeBase100: var(--fontSizeBase100); -$fontSizeBase200: var(--fontSizeBase200); -$fontSizeBase300: var(--fontSizeBase300); -$fontSizeBase400: var(--fontSizeBase400); -$fontSizeBase500: var(--fontSizeBase500); -$fontSizeBase600: var(--fontSizeBase600); -$fontSizeHero700: var(--fontSizeHero700); -$fontSizeHero800: var(--fontSizeHero800); -$fontSizeHero900: var(--fontSizeHero900); -$fontSizeHero1000: var(--fontSizeHero1000); +$fontSizeBase100: var(--text-base-100); +$fontSizeBase200: var(--text-base-200); +$fontSizeBase300: var(--text-base-300); +$fontSizeBase400: var(--text-base-400); +$fontSizeBase500: var(--text-base-500); +$fontSizeBase600: var(--text-base-600); +$fontSizeHero700: var(--text-hero-700); +$fontSizeHero800: var(--text-hero-800); +$fontSizeHero900: var(--text-hero-900); +$fontSizeHero1000: var(--text-hero-1000); -$lineHeightBase100: var(--lineHeightBase100); -$lineHeightBase200: var(--lineHeightBase200); -$lineHeightBase300: var(--lineHeightBase300); -$lineHeightBase400: var(--lineHeightBase400); -$lineHeightBase500: var(--lineHeightBase500); -$lineHeightBase600: var(--lineHeightBase600); -$lineHeightHero700: var(--lineHeightHero700); -$lineHeightHero800: var(--lineHeightHero800); -$lineHeightHero900: var(--lineHeightHero900); -$lineHeightHero1000: var(--lineHeightHero1000); +$lineHeightBase100: var(--leading-base-100); +$lineHeightBase200: var(--leading-base-200); +$lineHeightBase300: var(--leading-base-300); +$lineHeightBase400: var(--leading-base-400); +$lineHeightBase500: var(--leading-base-500); +$lineHeightBase600: var(--leading-base-600); +$lineHeightHero700: var(--leading-hero-700); +$lineHeightHero800: var(--leading-hero-800); +$lineHeightHero900: var(--leading-hero-900); +$lineHeightHero1000: var(--leading-hero-1000); -$fontWeightRegular: var(--fontWeightRegular); -$fontWeightMedium: var(--fontWeightMedium); -$fontWeightSemibold: var(--fontWeightSemibold); -$fontWeightBold: var(--fontWeightBold); +$fontWeightRegular: var(--font-weight-regular); +$fontWeightMedium: var(--font-weight-medium); +$fontWeightSemibold: var(--font-weight-semibold); +$fontWeightBold: var(--font-weight-bold); -$fontFamilyBase: var(--fontFamilyBase); -$fontFamilyMonospace: var(--fontFamilyMonospace); -$fontFamilyNumeric: var(--fontFamilyNumeric); +$fontFamilyBase: var(--font-base); +$fontFamilyMonospace: var(--font-monospace); +$fontFamilyNumeric: var(--font-numeric); diff --git a/packages/react-components/react-theme-sass/sass/shadowTokens.scss b/packages/react-components/react-theme-sass/sass/shadowTokens.scss index c559b622316471..4a6f5160e85365 100644 --- a/packages/react-components/react-theme-sass/sass/shadowTokens.scss +++ b/packages/react-components/react-theme-sass/sass/shadowTokens.scss @@ -1,13 +1,13 @@ -$shadow2: var(--shadow2); -$shadow4: var(--shadow4); -$shadow8: var(--shadow8); -$shadow16: var(--shadow16); -$shadow28: var(--shadow28); -$shadow64: var(--shadow64); +$shadow2: var(--shadow-2); +$shadow4: var(--shadow-4); +$shadow8: var(--shadow-8); +$shadow16: var(--shadow-16); +$shadow28: var(--shadow-28); +$shadow64: var(--shadow-64); -$shadow2Brand: var(--shadow2Brand); -$shadow4Brand: var(--shadow4Brand); -$shadow8Brand: var(--shadow8Brand); -$shadow16Brand: var(--shadow16Brand); -$shadow28Brand: var(--shadow28Brand); -$shadow64Brand: var(--shadow64Brand); +$shadow2Brand: var(--shadow-2-brand); +$shadow4Brand: var(--shadow-4-brand); +$shadow8Brand: var(--shadow-8-brand); +$shadow16Brand: var(--shadow-16-brand); +$shadow28Brand: var(--shadow-28-brand); +$shadow64Brand: var(--shadow-64-brand); From cc6e4089a19a2dccf8d9aa159bfe88283a5c4e88 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:37:45 -0700 Subject: [PATCH 612/640] refactor(charts): old->canonical token var sweep (theming Phase 2a) Mechanical rename of raw var(--camelCaseToken) references (inline styles, .styles.ts, stories, module css) to the canonical kebab names from token-rename-map.json. chart-web-components excluded (separate system). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../AnnotationOnlyChart.module.css | 8 +- .../components/AreaChart/AreaChart.module.css | 14 +- .../__snapshots__/AreaChart.test.tsx.snap | 36 +- .../ChartTable/ChartTable.module.css | 38 +- .../ChartAnnotationLayer.module.css | 20 +- .../CartesianChart.module.css | 60 +- .../CommonComponents/ChartPopover.module.css | 80 +- .../DeclarativeChartRTL.test.tsx.snap | 930 +++++++++--------- .../components/DonutChart/Arc/Arc.module.css | 14 +- .../DonutChart/DonutChart.module.css | 32 +- .../components/DonutChart/Pie/Pie.module.css | 10 +- .../__snapshots__/DonutChart.test.tsx.snap | 20 +- .../FunnelChart/FunnelChart.module.css | 26 +- .../__snapshots__/GanttChart.test.tsx.snap | 4 +- .../GaugeChart/GaugeChart.module.css | 86 +- .../__snapshots__/GaugeChart.test.tsx.snap | 16 +- .../GroupedVerticalBarChart.module.css | 24 +- .../GroupedVerticalBarChart.test.tsx.snap | 2 +- .../HeatMapChart/HeatMapChart.module.css | 8 +- .../__snapshots__/HeatMapChart.test.tsx.snap | 128 +-- .../HorizontalBarChart.module.css | 42 +- .../HorizontalBarChart.test.tsx | 6 +- .../HorizontalBarChart.test.tsx.snap | 30 +- .../HorizontalBarChartWithAxis.module.css | 10 +- .../src/components/Legends/Legends.module.css | 10 +- .../components/LineChart/LineChart.module.css | 26 +- .../__snapshots__/LineChart.test.tsx.snap | 4 +- .../PolarChart/PolarChart.module.css | 20 +- .../SankeyChart/SankeyChart.module.css | 36 +- .../__snapshots__/SankeyChart.test.tsx.snap | 306 +++--- .../ScatterChart/ScatterChart.module.css | 24 +- .../ScatterChart/ScatterChart.test.tsx | 2 +- .../components/Sparkline/Sparkline.module.css | 10 +- .../VegaDeclarativeChart.test.tsx.snap | 128 +-- .../VerticalBarChart.module.css | 26 +- .../VerticalBarChart.test.tsx | 6 +- .../VerticalBarChart.test.tsx.snap | 2 +- .../VerticalStackedBarChart.module.css | 24 +- .../VerticalStackedBarChart.test.tsx.snap | 20 +- .../src/AreaChart/AreaChartDefault.module.css | 2 +- .../AreaChart/AreaChartNegative..module.css | 2 +- .../AreaChartSecondaryYAxis.module.css | 2 +- .../LineChart/LineChartAllNegative.module.css | 2 +- .../LineChart/LineChartAnnotations.module.css | 2 +- .../src/LineChart/LineChartDefault.module.css | 2 +- .../LineChart/LineChartNegative.module.css | 2 +- .../ScatterChart/ScatterChartDate.module.css | 2 +- .../ScatterChartDefault.module.css | 2 +- .../ScatterChartString.module.css | 2 +- .../VerticalBarChartAllNegative.module.css | 2 +- .../VerticalBarChartDefault.module.css | 2 +- .../VerticalBarChartNegative.module.css | 2 +- .../VerticalBarChartSecondaryYAxis.module.css | 2 +- .../VerticalStackedBarChartDefault.module.css | 2 +- ...VerticalStackedBarChartNegative.module.css | 2 +- ...alStackedBarChartSecondaryYAxis.module.css | 2 +- 56 files changed, 1161 insertions(+), 1161 deletions(-) diff --git a/packages/charts/react-charts/library/src/components/AnnotationOnlyChart/AnnotationOnlyChart.module.css b/packages/charts/react-charts/library/src/components/AnnotationOnlyChart/AnnotationOnlyChart.module.css index 1c3b48dd1e5c36..b4c45265689fef 100644 --- a/packages/charts/react-charts/library/src/components/AnnotationOnlyChart/AnnotationOnlyChart.module.css +++ b/packages/charts/react-charts/library/src/components/AnnotationOnlyChart/AnnotationOnlyChart.module.css @@ -54,9 +54,9 @@ .root { @apply relative flex flex-col gap-y-vertical-s; - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); - font-family: var(--fontFamilyBase); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); + font-family: var(--font-base); } /* from useStyles.content */ @@ -64,7 +64,7 @@ @apply relative box-border grow; background-color: transparent; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } /* from useStyles.title */ diff --git a/packages/charts/react-charts/library/src/components/AreaChart/AreaChart.module.css b/packages/charts/react-charts/library/src/components/AreaChart/AreaChart.module.css index fafa953a2b06d7..2f42734ba6d072 100644 --- a/packages/charts/react-charts/library/src/components/AreaChart/AreaChart.module.css +++ b/packages/charts/react-charts/library/src/components/AreaChart/AreaChart.module.css @@ -56,13 +56,13 @@ .tooltip { @apply pointer-events-none absolute flex flex-col p-horizontal-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusSmall); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-small); + color: var(--color-neutral-foreground-1); } } diff --git a/packages/charts/react-charts/library/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap index aca810bc949626..951980a0aae49e 100644 --- a/packages/charts/react-charts/library/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap @@ -4508,7 +4508,7 @@ Object { aria-label="20. legend1, 9." cx="40" cy="250.10135135135135" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7d__0" r="8" role="img" @@ -4634,7 +4634,7 @@ Object { aria-label="20. legend2, 21." cx="40" cy="215.33783783783784" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7d__10" r="8" role="img" @@ -4760,7 +4760,7 @@ Object { aria-label="20. legend3, 30." cx="40" cy="165.67567567567565" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7d__20" r="8" role="img" @@ -5367,7 +5367,7 @@ Object { aria-label="20. legend1, 9." cx="40" cy="250.10135135135135" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7d__0" r="8" role="img" @@ -5493,7 +5493,7 @@ Object { aria-label="20. legend2, 21." cx="40" cy="215.33783783783784" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7d__10" r="8" role="img" @@ -5619,7 +5619,7 @@ Object { aria-label="20. legend3, 30." cx="40" cy="165.67567567567565" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7d__20" r="8" role="img" @@ -6285,7 +6285,7 @@ Object { aria-label="20. legend1, 9." cx="40" cy="250.10135135135135" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7k__0" r="8" role="img" @@ -6411,7 +6411,7 @@ Object { aria-label="20. legend2, 21." cx="40" cy="215.33783783783784" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7k__10" r="8" role="img" @@ -6537,7 +6537,7 @@ Object { aria-label="20. legend3, 30." cx="40" cy="165.67567567567565" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7k__20" r="8" role="img" @@ -7144,7 +7144,7 @@ Object { aria-label="20. legend1, 9." cx="40" cy="250.10135135135135" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7k__0" r="8" role="img" @@ -7270,7 +7270,7 @@ Object { aria-label="20. legend2, 21." cx="40" cy="215.33783783783784" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7k__10" r="8" role="img" @@ -7396,7 +7396,7 @@ Object { aria-label="20. legend3, 30." cx="40" cy="165.67567567567565" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7k__20" r="8" role="img" @@ -8062,7 +8062,7 @@ Object { aria-label="20. legend1, 9." cx="40" cy="250.10135135135135" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7r__0" r="8" role="img" @@ -8188,7 +8188,7 @@ Object { aria-label="20. legend2, 21." cx="40" cy="215.33783783783784" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7r__10" r="8" role="img" @@ -8314,7 +8314,7 @@ Object { aria-label="20. legend3, 30." cx="40" cy="165.67567567567565" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7r__20" r="8" role="img" @@ -8921,7 +8921,7 @@ Object { aria-label="20. legend1, 9." cx="40" cy="250.10135135135135" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7r__0" r="8" role="img" @@ -9047,7 +9047,7 @@ Object { aria-label="20. legend2, 21." cx="40" cy="215.33783783783784" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7r__10" r="8" role="img" @@ -9173,7 +9173,7 @@ Object { aria-label="20. legend3, 30." cx="40" cy="165.67567567567565" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" id="circle_r_7r__20" r="8" role="img" diff --git a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css index 921a28a744101e..c6da5eee9c155a 100644 --- a/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css +++ b/packages/charts/react-charts/library/src/components/ChartTable/ChartTable.module.css @@ -73,13 +73,13 @@ .header-cell { @apply p-horizontal-s text-start; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); - background-color: var(--colorNeutralBackground3); - color: var(--colorNeutralForeground1); - border: var(--spacing-thick) solid var(--colorNeutralStroke2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); + background-color: var(--color-neutral-background-3); + color: var(--color-neutral-foreground-1); + border: var(--spacing-thick) solid var(--color-neutral-stroke-2); @variant forced-colors { background-color: Window; @@ -91,12 +91,12 @@ .body-cell { @apply p-horizontal-s text-start; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground1); - border: var(--spacing-thick) solid var(--colorNeutralStroke2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-1); + border: var(--spacing-thick) solid var(--color-neutral-stroke-2); @variant forced-colors { color: WindowText; @@ -112,17 +112,17 @@ .chart-title { @apply mb-vertical-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } /* from useStyles.svgTooltip — the background SVGTooltipText draws behind the title */ .svg-tooltip { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); @variant forced-colors { fill: Canvas; diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/Annotations/ChartAnnotationLayer.module.css b/packages/charts/react-charts/library/src/components/CommonComponents/Annotations/ChartAnnotationLayer.module.css index b457c724ae644f..e080a1d00d7da0 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/Annotations/ChartAnnotationLayer.module.css +++ b/packages/charts/react-charts/library/src/components/CommonComponents/Annotations/ChartAnnotationLayer.module.css @@ -79,8 +79,8 @@ * 4px → vertical-XS step, 8px → horizontal-S step. * * ── Shorthands ────────────────────────────────────────────────────────────────────────── - * `border-radius: var(--borderRadiusMedium)` and `border: 1px solid - * var(--colorNeutralStroke1)` kept as compiled shorthands (react-tooltip/PopoverSurface + * `border-radius: var(--radius-medium)` and `border: 1px solid + * var(--color-neutral-stroke-1)` kept as compiled shorthands (react-tooltip/PopoverSurface * precedent) — no rule in this module sets any of their longhands, so no Griffel priority * machinery survives to get wrong. The border `1px` is a frozen literal (not a * strokeWidth token in the source), so the D4-addendum `var(--spacing-*)` mapping does @@ -101,19 +101,19 @@ .annotation-no-defaults { @apply pointer-events-none absolute flex items-center justify-center px-horizontal-s py-vertical-xs text-center whitespace-pre-wrap; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground1); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-1); + border-radius: var(--radius-medium); z-index: 2; } /* from useStyles.annotation — the default chrome `hideDefaultStyles` removes */ .annotation { - box-shadow: var(--shadow16); - border: 1px solid var(--colorNeutralStroke1); + box-shadow: var(--shadow-16); + border: 1px solid var(--color-neutral-stroke-1); } /* from useStyles.connectorLayer */ diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.module.css b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.module.css index b6c03d1fb4c7df..95b17c035d9e0e 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.module.css +++ b/packages/charts/react-charts/library/src/components/CommonComponents/CartesianChart.module.css @@ -85,10 +85,10 @@ .root { @apply relative flex h-full w-full flex-col overflow-hidden text-start; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useStyles.chartWrapper */ @@ -134,12 +134,12 @@ .axis-annotation { @apply text-center not-italic; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - color: var(--colorNeutralForeground2); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + color: var(--color-neutral-foreground-2); + fill: var(--color-neutral-foreground-1); @variant forced-colors { fill: CanvasText; @@ -153,17 +153,17 @@ */ .x-axis { & text { - fill: var(--colorNeutralForeground1); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); + fill: var(--color-neutral-foreground-1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); forced-color-adjust: auto; } & line { opacity: 0.2; - stroke: var(--colorNeutralForeground1); + stroke: var(--color-neutral-foreground-1); /* * Reproduced verbatim from `.f1myyn02 line{width:1px;}`. `width` is a geometry property @@ -185,17 +185,17 @@ /* from useStyles.yAxis + useStyles.rtl (the `_useRtl ? rtl : ltr` branch) */ .y-axis { & text { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } & line { opacity: 0.2; - stroke: var(--colorNeutralForeground1); + stroke: var(--color-neutral-foreground-1); forced-color-adjust: auto; } @@ -230,7 +230,7 @@ /* from useStyles.svgTooltip — the background SVGTooltipText draws behind axis titles */ .svg-tooltip { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); @variant forced-colors { fill: Canvas; @@ -247,13 +247,13 @@ .tooltip { @apply pointer-events-none absolute flex flex-col p-horizontal-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusSmall); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-small); + color: var(--color-neutral-foreground-1); } } diff --git a/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.module.css b/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.module.css index 084a52f902e2c4..ae9493a6f0a4b1 100644 --- a/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.module.css +++ b/packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.module.css @@ -79,7 +79,7 @@ .callout-content-root { @apply grid overflow-hidden; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); background-blend-mode: normal, luminosity; } @@ -90,19 +90,19 @@ /* from useStyles.calloutContentX — typographyStyles.caption1 + opacity/color */ .callout-content-x { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); opacity: 0.8; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } /* from useStyles.calloutBlockContainer — textAlign 'left' → logical `start` */ .callout-block-container { @apply text-start; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } /* @@ -112,15 +112,15 @@ * token), carried verbatim. */ .callout-block-container-cartesian { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); forced-color-adjust: none; } .callout-block-container-non-cartesian { - font-size: var(--fontSizeHero700); + font-size: var(--text-hero-700); line-height: 22px; forced-color-adjust: none; } @@ -146,11 +146,11 @@ .callout-legend-text { @apply mb-vertical-xs; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-2); forced-color-adjust: auto; } @@ -164,17 +164,17 @@ * title2 respectively; authored AFTER the base because they are the later argument. */ .callout-content-y-cartesian { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-400); } .callout-content-y-non-cartesian { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } /* @@ -185,33 +185,33 @@ .description-message { @apply mt-vertical-m-nudge pt-vertical-m-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground2); - border-top: 1px solid var(--colorNeutralStroke2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-2); + border-top: 1px solid var(--color-neutral-stroke-2); } /* from useStyles.ratio — typographyStyles.caption2 + marginLeft → logical start */ .ratio { @apply ms-horizontal-s-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase100); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-100); + color: var(--color-neutral-foreground-1); } /* from useStyles.numerator and useStyles.denominator — both typographyStyles.caption2Strong, * identical atomic sets, so one rule emits both locals. */ .numerator, .denominator { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); } /* from useStyles.calloutInfoContainer — paddingLeft → logical start */ diff --git a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap index 682124abb7cf4d..418a37ca97a617 100644 --- a/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap @@ -1058,12 +1058,12 @@ exports[`DeclarativeChart Should render areachart in DeclarativeChart 1`] = ` class="fui-Button fui-legend__legend" data-overflow-item="" role="option" - style="--rect-height: 12px; --rect-backgroundColor: var(--colorNeutralBackground1); --rect-borderColor: #2aa0a4;" + style="--rect-height: 12px; --rect-backgroundColor: var(--color-neutral-background-1); --rect-borderColor: #2aa0a4;" type="button" >
@@ -2898,7 +2898,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -2920,7 +2920,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -2942,7 +2942,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -2964,7 +2964,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -2986,7 +2986,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3008,7 +3008,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3030,7 +3030,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3052,7 +3052,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3074,7 +3074,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3096,7 +3096,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3118,7 +3118,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3140,7 +3140,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3162,7 +3162,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3184,7 +3184,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3206,7 +3206,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3228,7 +3228,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3250,7 +3250,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3272,7 +3272,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3294,7 +3294,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3316,7 +3316,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3338,7 +3338,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3360,7 +3360,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3382,7 +3382,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3404,7 +3404,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3426,7 +3426,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3448,7 +3448,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3470,7 +3470,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3492,7 +3492,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3514,7 +3514,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3536,7 +3536,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3558,7 +3558,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3580,7 +3580,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3602,7 +3602,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3624,7 +3624,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3646,7 +3646,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3668,7 +3668,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3690,7 +3690,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3712,7 +3712,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3734,7 +3734,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3756,7 +3756,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3778,7 +3778,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3800,7 +3800,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3822,7 +3822,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3844,7 +3844,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3866,7 +3866,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3888,7 +3888,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3910,7 +3910,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3932,7 +3932,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3954,7 +3954,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3976,7 +3976,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -3998,7 +3998,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4020,7 +4020,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4042,7 +4042,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4064,7 +4064,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4086,7 +4086,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4108,7 +4108,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4130,7 +4130,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4152,7 +4152,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4174,7 +4174,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4196,7 +4196,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4218,7 +4218,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4240,7 +4240,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4262,7 +4262,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4284,7 +4284,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4306,7 +4306,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4328,7 +4328,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4350,7 +4350,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4372,7 +4372,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4394,7 +4394,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4416,7 +4416,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4438,7 +4438,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4460,7 +4460,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4482,7 +4482,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4504,7 +4504,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4526,7 +4526,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4548,7 +4548,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4570,7 +4570,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4592,7 +4592,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4614,7 +4614,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4636,7 +4636,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4658,7 +4658,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4680,7 +4680,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4702,7 +4702,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4724,7 +4724,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4746,7 +4746,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4768,7 +4768,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4790,7 +4790,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4812,7 +4812,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4834,7 +4834,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4856,7 +4856,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4878,7 +4878,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4900,7 +4900,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4922,7 +4922,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4944,7 +4944,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4966,7 +4966,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -4988,7 +4988,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5010,7 +5010,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5032,7 +5032,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5054,7 +5054,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5076,7 +5076,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5098,7 +5098,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5120,7 +5120,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5142,7 +5142,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5164,7 +5164,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5186,7 +5186,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5208,7 +5208,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5230,7 +5230,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5252,7 +5252,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5274,7 +5274,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5296,7 +5296,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5318,7 +5318,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5340,7 +5340,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5362,7 +5362,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5384,7 +5384,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5406,7 +5406,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5428,7 +5428,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5450,7 +5450,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5472,7 +5472,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5494,7 +5494,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5516,7 +5516,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5538,7 +5538,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5560,7 +5560,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5582,7 +5582,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5604,7 +5604,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5626,7 +5626,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5648,7 +5648,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5670,7 +5670,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5692,7 +5692,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5714,7 +5714,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5736,7 +5736,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5758,7 +5758,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5780,7 +5780,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5802,7 +5802,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5824,7 +5824,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5846,7 +5846,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5868,7 +5868,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5890,7 +5890,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5912,7 +5912,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5934,7 +5934,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5956,7 +5956,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -5978,7 +5978,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6000,7 +6000,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6022,7 +6022,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6044,7 +6044,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6066,7 +6066,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6088,7 +6088,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6110,7 +6110,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6132,7 +6132,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6154,7 +6154,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6176,7 +6176,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6198,7 +6198,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6220,7 +6220,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6242,7 +6242,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6264,7 +6264,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6286,7 +6286,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6308,7 +6308,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6330,7 +6330,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6352,7 +6352,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6374,7 +6374,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6396,7 +6396,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6418,7 +6418,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6440,7 +6440,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6462,7 +6462,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6484,7 +6484,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6506,7 +6506,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6528,7 +6528,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6550,7 +6550,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6572,7 +6572,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6594,7 +6594,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6616,7 +6616,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6638,7 +6638,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6660,7 +6660,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6682,7 +6682,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6704,7 +6704,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6726,7 +6726,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6748,7 +6748,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6770,7 +6770,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6792,7 +6792,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6814,7 +6814,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6836,7 +6836,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6858,7 +6858,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6880,7 +6880,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6902,7 +6902,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6924,7 +6924,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6946,7 +6946,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6968,7 +6968,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -6990,7 +6990,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7012,7 +7012,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7034,7 +7034,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7056,7 +7056,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7078,7 +7078,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7100,7 +7100,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7122,7 +7122,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7144,7 +7144,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7166,7 +7166,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7188,7 +7188,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7210,7 +7210,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7232,7 +7232,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7254,7 +7254,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7276,7 +7276,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7298,7 +7298,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7320,7 +7320,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7342,7 +7342,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7364,7 +7364,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7386,7 +7386,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7408,7 +7408,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7430,7 +7430,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7452,7 +7452,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7474,7 +7474,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7496,7 +7496,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7518,7 +7518,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7540,7 +7540,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7562,7 +7562,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7584,7 +7584,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7606,7 +7606,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7628,7 +7628,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7650,7 +7650,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7672,7 +7672,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7694,7 +7694,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7716,7 +7716,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7738,7 +7738,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7760,7 +7760,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7782,7 +7782,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7804,7 +7804,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7826,7 +7826,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7848,7 +7848,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7870,7 +7870,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7892,7 +7892,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7914,7 +7914,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7936,7 +7936,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7958,7 +7958,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -7980,7 +7980,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8002,7 +8002,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8024,7 +8024,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8046,7 +8046,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8068,7 +8068,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8090,7 +8090,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8112,7 +8112,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8134,7 +8134,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8156,7 +8156,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8178,7 +8178,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8200,7 +8200,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8222,7 +8222,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8244,7 +8244,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8266,7 +8266,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8288,7 +8288,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8310,7 +8310,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8332,7 +8332,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8354,7 +8354,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8376,7 +8376,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8398,7 +8398,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8420,7 +8420,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8442,7 +8442,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8464,7 +8464,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8486,7 +8486,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8508,7 +8508,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8530,7 +8530,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8552,7 +8552,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8574,7 +8574,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8596,7 +8596,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8618,7 +8618,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8640,7 +8640,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8662,7 +8662,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8684,7 +8684,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8706,7 +8706,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8728,7 +8728,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8750,7 +8750,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8772,7 +8772,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8794,7 +8794,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8816,7 +8816,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8838,7 +8838,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8860,7 +8860,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8882,7 +8882,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8904,7 +8904,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8926,7 +8926,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8948,7 +8948,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8970,7 +8970,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -8992,7 +8992,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9014,7 +9014,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9036,7 +9036,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9058,7 +9058,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9080,7 +9080,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9102,7 +9102,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9124,7 +9124,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9146,7 +9146,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9168,7 +9168,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9190,7 +9190,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9212,7 +9212,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9234,7 +9234,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9256,7 +9256,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9278,7 +9278,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9300,7 +9300,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9322,7 +9322,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9344,7 +9344,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9366,7 +9366,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9388,7 +9388,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9410,7 +9410,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9432,7 +9432,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9454,7 +9454,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9476,7 +9476,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9498,7 +9498,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9520,7 +9520,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9542,7 +9542,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9564,7 +9564,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9586,7 +9586,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9608,7 +9608,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9630,7 +9630,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9652,7 +9652,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9674,7 +9674,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9696,7 +9696,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9718,7 +9718,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9740,7 +9740,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9762,7 +9762,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9784,7 +9784,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9806,7 +9806,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9828,7 +9828,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9850,7 +9850,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9872,7 +9872,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9894,7 +9894,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9916,7 +9916,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9938,7 +9938,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9960,7 +9960,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -9982,7 +9982,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10004,7 +10004,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10026,7 +10026,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10048,7 +10048,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10070,7 +10070,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10092,7 +10092,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10114,7 +10114,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10136,7 +10136,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10158,7 +10158,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10180,7 +10180,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10202,7 +10202,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10224,7 +10224,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10246,7 +10246,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10268,7 +10268,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10290,7 +10290,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10312,7 +10312,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10334,7 +10334,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10356,7 +10356,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10378,7 +10378,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10400,7 +10400,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10422,7 +10422,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10444,7 +10444,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10466,7 +10466,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10488,7 +10488,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10510,7 +10510,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10532,7 +10532,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10554,7 +10554,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10576,7 +10576,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10598,7 +10598,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10620,7 +10620,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10642,7 +10642,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10664,7 +10664,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10686,7 +10686,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10708,7 +10708,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10730,7 +10730,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10752,7 +10752,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10774,7 +10774,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10796,7 +10796,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10818,7 +10818,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10840,7 +10840,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10862,7 +10862,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10884,7 +10884,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10906,7 +10906,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10928,7 +10928,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10950,7 +10950,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10972,7 +10972,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -10994,7 +10994,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11016,7 +11016,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11038,7 +11038,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11060,7 +11060,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11082,7 +11082,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11104,7 +11104,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11126,7 +11126,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11148,7 +11148,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11170,7 +11170,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11192,7 +11192,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11214,7 +11214,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11236,7 +11236,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11258,7 +11258,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11280,7 +11280,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11302,7 +11302,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11324,7 +11324,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11346,7 +11346,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11368,7 +11368,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11390,7 +11390,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11412,7 +11412,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11434,7 +11434,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11456,7 +11456,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11478,7 +11478,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11500,7 +11500,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11522,7 +11522,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11544,7 +11544,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11566,7 +11566,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11588,7 +11588,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11610,7 +11610,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11632,7 +11632,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -11654,7 +11654,7 @@ exports[`DeclarativeChart Should render heatmapchart in DeclarativeChart 1`] = ` @@ -20242,12 +20242,12 @@ exports[`DeclarativeChart Should render linechart in DeclarativeChart 1`] = ` class="fui-Button fui-legend__legend" data-overflow-item="" role="option" - style="--rect-height: 12px; --rect-backgroundColor: var(--colorNeutralBackground1); --rect-borderColor: #9373c0;" + style="--rect-height: 12px; --rect-backgroundColor: var(--color-neutral-background-1); --rect-borderColor: #9373c0;" type="button" >
@@ -20811,7 +20811,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -20848,7 +20848,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -20885,7 +20885,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -20922,7 +20922,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -20959,7 +20959,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -20996,7 +20996,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21033,7 +21033,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21070,7 +21070,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21107,7 +21107,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21144,7 +21144,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21181,7 +21181,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21218,7 +21218,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21255,7 +21255,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` @@ -21292,7 +21292,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = ` diff --git a/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css b/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css index bbd47879b70a15..596284c6603240 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css +++ b/packages/charts/react-charts/library/src/components/DonutChart/Arc/Arc.module.css @@ -48,7 +48,7 @@ outline-color: transparent; outline-style: none; outline-width: medium; - stroke: var(--colorNeutralBackground1); + stroke: var(--color-neutral-background-1); } /* @@ -63,17 +63,17 @@ */ .focus-ring { fill: transparent; - stroke: var(--colorStrokeFocus2); + stroke: var(--color-stroke-focus-2); stroke-width: var(--spacing-thickest); } /* from useStyles.arcLabel — typographyStyles.caption1Strong + fill */ .arc-label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); + fill: var(--color-neutral-foreground-1); @variant forced-colors { stroke: CanvasText; diff --git a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.module.css b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.module.css index 090a6aa1a82247..fa34123328292a 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.module.css +++ b/packages/charts/react-charts/library/src/components/DonutChart/DonutChart.module.css @@ -61,10 +61,10 @@ .root { @apply flex h-full w-full flex-col text-start; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useStyles.chart */ @@ -97,12 +97,12 @@ .axis-annotation { @apply text-center not-italic; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - color: var(--colorNeutralForeground2); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + color: var(--color-neutral-foreground-2); + fill: var(--color-neutral-foreground-1); @variant forced-colors { fill: CanvasText; @@ -118,17 +118,17 @@ .chart-title { @apply mb-vertical-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } /* from useStyles.svgTooltip — the background SVGTooltipText draws behind the title */ .svg-tooltip { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); @variant forced-colors { fill: Canvas; diff --git a/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.module.css b/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.module.css index 93c29fee4763bd..4d8c107034fd8f 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.module.css +++ b/packages/charts/react-charts/library/src/components/DonutChart/Pie/Pie.module.css @@ -50,11 +50,11 @@ /* from useStyles.insideDonutString — typographyStyles.title2 + fill/forced-color-adjust */ .inside-donut-string { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } } diff --git a/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap index 552970668ef278..eda62a6b854482 100644 --- a/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap @@ -457,7 +457,7 @@ Object {
20,000
@@ -682,7 +682,7 @@ Object {
20,000
@@ -947,7 +947,7 @@ Object {
20,000
@@ -1172,7 +1172,7 @@ Object {
20,000
@@ -2131,12 +2131,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color data-overflow-item="" data-size="small" role="option" - style="--rect-height: 12px; --rect-borderColor: var(--colorNeutralStroke1);" + style="--rect-height: 12px; --rect-borderColor: var(--color-neutral-stroke-1);" type="button" >
SVGTooltipText draws behind the title */ .svg-tooltip { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); @variant forced-colors { fill: Canvas; diff --git a/packages/charts/react-charts/library/src/components/GanttChart/__snapshots__/GanttChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/GanttChart/__snapshots__/GanttChart.test.tsx.snap index e60dc89e0af51a..b15685cd046beb 100644 --- a/packages/charts/react-charts/library/src/components/GanttChart/__snapshots__/GanttChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/GanttChart/__snapshots__/GanttChart.test.tsx.snap @@ -461,7 +461,7 @@ exports[`GanttChart interaction and accessibility tests should render custom cal
01/01/2017 - 02/02/2017
@@ -4819,7 +4819,7 @@ exports[`GanttChart rendering and behavior tests should render callout correctly
01/01/2017 - 02/02/2017
diff --git a/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.module.css b/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.module.css index c2174f5a83e54d..c9ad5f6979b314 100644 --- a/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.module.css +++ b/packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.module.css @@ -85,10 +85,10 @@ .root { @apply flex h-full w-full flex-col items-center text-start; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useStyles.chart */ @@ -103,31 +103,31 @@ */ .limits, .sublabel { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } /* from useStyles.chartValue — fontWeight only; the size comes from a `fontSize` ATTRIBUTE * the component computes per breakpoint (BREAKPOINTS), not from CSS */ .chart-value { - font-weight: var(--fontWeightSemibold); - fill: var(--colorNeutralForeground1); + font-weight: var(--font-weight-semibold); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } /* from useStyles.needle */ .needle { - fill: var(--colorNeutralForeground1); - stroke: var(--colorNeutralBackground1); + fill: var(--color-neutral-foreground-1); + stroke: var(--color-neutral-background-1); } /* from useStyles.svgTooltip — the background SVGTooltipText draws behind the title */ .svg-tooltip { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); @variant forced-colors { fill: Canvas; @@ -144,11 +144,11 @@ .chart-title { @apply mb-vertical-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } @@ -156,7 +156,7 @@ * indicator (strokeWidth flips 0 → ARC_PADDING on focus, in JS) */ .segment { outline: none; - stroke: var(--colorStrokeFocus2); + stroke: var(--color-stroke-focus-2); } /* from useStyles.gradientSegment */ @@ -168,7 +168,7 @@ .callout-content-root { @apply grid overflow-hidden; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); background-blend-mode: normal, luminosity; } @@ -180,9 +180,9 @@ /* from useStyles.calloutContentX — typographyStyles.caption1 with its lineHeight * overridden by a frozen 16px literal, + opacity */ .callout-content-x { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); line-height: 16px; opacity: 0.85; } @@ -193,11 +193,11 @@ .callout-block-container { @apply mt-13 block ps-horizontal-s; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); + color: var(--color-neutral-foreground-1); forced-color-adjust: none; } @@ -208,20 +208,20 @@ /* from useStyles.calloutlegendText — typographyStyles.caption1 + color */ .callout-legend-text { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-2); forced-color-adjust: auto; } /* from useStyles.calloutContentY — typographyStyles.body1Strong with its lineHeight * overridden by a frozen 22px literal */ .callout-content-y { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); line-height: 22px; forced-color-adjust: auto; } @@ -231,12 +231,12 @@ .description-message { @apply mt-vertical-m-nudge pt-vertical-m-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground1); - border-top: 1px solid var(--colorNeutralStroke1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-1); + border-top: 1px solid var(--color-neutral-stroke-1); } /* from useStyles.legendsContainer */ diff --git a/packages/charts/react-charts/library/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap index 46ec0bdf7f0403..3a84e23b63ad6a 100644 --- a/packages/charts/react-charts/library/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap @@ -451,12 +451,12 @@ exports[`Gauge chart - Subcomponent Legend Should reduce the opacity of the othe data-overflow-item="" data-size="small" role="option" - style="--rect-height: 12px; --rect-backgroundColor: var(--colorNeutralBackground1); --rect-borderColor: #f7630c;" + style="--rect-height: 12px; --rect-backgroundColor: var(--color-neutral-background-1); --rect-borderColor: #f7630c;" type="button" >
33%
diff --git a/packages/charts/react-charts/library/src/components/HeatMapChart/HeatMapChart.module.css b/packages/charts/react-charts/library/src/components/HeatMapChart/HeatMapChart.module.css index f297276376eedc..200ff0228ed920 100644 --- a/packages/charts/react-charts/library/src/components/HeatMapChart/HeatMapChart.module.css +++ b/packages/charts/react-charts/library/src/components/HeatMapChart/HeatMapChart.module.css @@ -51,10 +51,10 @@ .text { @apply pointer-events-none; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } } diff --git a/packages/charts/react-charts/library/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap index 37b1000b6649d4..bad627e54ddd4c 100644 --- a/packages/charts/react-charts/library/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap @@ -143,7 +143,7 @@ Object { @@ -166,7 +166,7 @@ Object { @@ -188,7 +188,7 @@ Object { @@ -211,7 +211,7 @@ Object { @@ -418,7 +418,7 @@ Object { @@ -441,7 +441,7 @@ Object { @@ -463,7 +463,7 @@ Object { @@ -486,7 +486,7 @@ Object { @@ -752,7 +752,7 @@ Object { @@ -774,7 +774,7 @@ Object { @@ -796,7 +796,7 @@ Object { @@ -818,7 +818,7 @@ Object { @@ -1025,7 +1025,7 @@ Object { @@ -1047,7 +1047,7 @@ Object { @@ -1069,7 +1069,7 @@ Object { @@ -1091,7 +1091,7 @@ Object { @@ -1357,7 +1357,7 @@ Object { @@ -1380,7 +1380,7 @@ Object { @@ -1402,7 +1402,7 @@ Object { @@ -1425,7 +1425,7 @@ Object { @@ -1575,7 +1575,7 @@ Object { @@ -1598,7 +1598,7 @@ Object { @@ -1620,7 +1620,7 @@ Object { @@ -1643,7 +1643,7 @@ Object { @@ -1852,7 +1852,7 @@ Object { @@ -1875,7 +1875,7 @@ Object { @@ -1897,7 +1897,7 @@ Object { @@ -1920,7 +1920,7 @@ Object { @@ -2127,7 +2127,7 @@ Object { @@ -2150,7 +2150,7 @@ Object { @@ -2172,7 +2172,7 @@ Object { @@ -2195,7 +2195,7 @@ Object { @@ -2461,7 +2461,7 @@ Object { @@ -2484,7 +2484,7 @@ Object { @@ -2506,7 +2506,7 @@ Object { @@ -2529,7 +2529,7 @@ Object { @@ -2736,7 +2736,7 @@ Object { @@ -2759,7 +2759,7 @@ Object { @@ -2781,7 +2781,7 @@ Object { @@ -2804,7 +2804,7 @@ Object { @@ -3074,7 +3074,7 @@ Object { @@ -3097,7 +3097,7 @@ Object { @@ -3119,7 +3119,7 @@ Object { @@ -3142,7 +3142,7 @@ Object { @@ -3354,7 +3354,7 @@ Object { @@ -3377,7 +3377,7 @@ Object { @@ -3399,7 +3399,7 @@ Object { @@ -3422,7 +3422,7 @@ Object { @@ -3692,7 +3692,7 @@ Object { @@ -3715,7 +3715,7 @@ Object { @@ -3737,7 +3737,7 @@ Object { @@ -3760,7 +3760,7 @@ Object { @@ -3971,7 +3971,7 @@ Object { @@ -3994,7 +3994,7 @@ Object { @@ -4016,7 +4016,7 @@ Object { @@ -4039,7 +4039,7 @@ Object { @@ -4301,7 +4301,7 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n @@ -4321,7 +4321,7 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n @@ -4341,7 +4341,7 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n @@ -4361,7 +4361,7 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n @@ -4568,7 +4568,7 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu @@ -4590,7 +4590,7 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu @@ -4612,7 +4612,7 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu @@ -4634,7 +4634,7 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.module.css b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.module.css index 781a63e61c542e..f87fbf734ef652 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.module.css +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.module.css @@ -97,17 +97,17 @@ .chart-title { @apply flex justify-between; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } /* from useStyles.chartTitleLeft */ .chart-title-left { @apply block overflow-hidden text-ellipsis whitespace-nowrap; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } /* from useStyles.chartTitleLeft4pMargin — 4px is the vertical XS step */ @@ -122,20 +122,20 @@ /* from useStyles.chartTitleRight — typographyStyles.body1Strong expanded */ .chart-title-right { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); + color: var(--color-neutral-foreground-1); } /* from useStyles.chartDataTextDenominator — typographyStyles.body1 expanded */ .chart-data-text-denominator { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + color: var(--color-neutral-foreground-1); } /* from useStyles.benchmarkContainer — 7px/3px/1px match no spacing step */ @@ -161,7 +161,7 @@ */ border-top-width: 7px; border-top-style: solid; - border-top-color: var(--colorPaletteBlueBorderActive); + border-top-color: var(--color-palette-blue-border-active); } /* @@ -169,11 +169,11 @@ * expanded, plus the SVG presentation properties as ordinary CSS. */ .bar-label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); + fill: var(--color-neutral-foreground-1); /* from useStyles.barLabel[HighContrastSelector] — `-ms-high-contrast` is dropped, the shared `forced-colors` variant is `@media (forced-colors: active)` only */ diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx index fbc1761d81ba52..2fbb3b0ad350c5 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx @@ -165,11 +165,11 @@ describe('Horizontal bar chart - Subcomponent bar', () => { // Assert const bars = getByClass(container, /bar-wrapper/); expect(bars[0].getAttribute('fill')).toEqual('#004b50'); - expect(bars[1].getAttribute('fill')).toEqual('var(--colorBackgroundOverlay)'); + expect(bars[1].getAttribute('fill')).toEqual('var(--color-background-overlay)'); expect(bars[2].getAttribute('fill')).toEqual('#5c2d91'); - expect(bars[3].getAttribute('fill')).toEqual('var(--colorBackgroundOverlay)'); + expect(bars[3].getAttribute('fill')).toEqual('var(--color-background-overlay)'); expect(bars[4].getAttribute('fill')).toEqual('#a4262c'); - expect(bars[5].getAttribute('fill')).toEqual('var(--colorBackgroundOverlay)'); + expect(bars[5].getAttribute('fill')).toEqual('var(--color-background-overlay)'); }, ); diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap index ff6609fc72f09e..fdd44497a3d9d9 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap @@ -57,7 +57,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo /> `s; stroke-width 3px is a frozen literal */ .links { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); stroke-width: 3px; @variant forced-colors { @@ -113,13 +113,13 @@ .tool-tip { @apply pointer-events-none absolute flex flex-col p-horizontal-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusSmall); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-small); + color: var(--color-neutral-foreground-1); } /* from useStyles.nodeTextContainer — margins on the text ``; the HC slice is a @@ -153,17 +153,17 @@ .chart-title { @apply mb-vertical-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } /* from useStyles.svgTooltip — the background SVGTooltipText draws behind the title */ .svg-tooltip { - fill: var(--colorNeutralBackground1); + fill: var(--color-neutral-background-1); @variant forced-colors { fill: Canvas; diff --git a/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap index 6dbf2d8cce6a57..fd1aba78a715b5 100644 --- a/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap @@ -101,7 +101,7 @@ Object { @@ -138,7 +138,7 @@ Object { @@ -175,7 +175,7 @@ Object { @@ -212,7 +212,7 @@ Object { @@ -363,7 +363,7 @@ Object { @@ -400,7 +400,7 @@ Object { @@ -437,7 +437,7 @@ Object { @@ -474,7 +474,7 @@ Object { @@ -791,7 +791,7 @@ Object { @@ -828,7 +828,7 @@ Object { @@ -865,7 +865,7 @@ Object { @@ -902,7 +902,7 @@ Object { @@ -1053,7 +1053,7 @@ Object { @@ -1090,7 +1090,7 @@ Object { @@ -1127,7 +1127,7 @@ Object { @@ -1164,7 +1164,7 @@ Object { @@ -1521,7 +1521,7 @@ Object { @@ -1558,7 +1558,7 @@ Object { @@ -1709,7 +1709,7 @@ Object { @@ -1746,7 +1746,7 @@ Object { @@ -1783,7 +1783,7 @@ Object { @@ -1820,7 +1820,7 @@ Object { @@ -2093,7 +2093,7 @@ Object { @@ -2130,7 +2130,7 @@ Object { @@ -2281,7 +2281,7 @@ Object { @@ -2318,7 +2318,7 @@ Object { @@ -2355,7 +2355,7 @@ Object { @@ -2392,7 +2392,7 @@ Object { @@ -2885,7 +2885,7 @@ Object { @@ -2922,7 +2922,7 @@ Object { @@ -2959,7 +2959,7 @@ Object { @@ -2996,7 +2996,7 @@ Object { @@ -3033,7 +3033,7 @@ Object { @@ -3070,7 +3070,7 @@ Object { @@ -3107,7 +3107,7 @@ Object { @@ -3144,7 +3144,7 @@ Object { @@ -3352,7 +3352,7 @@ Object { @@ -3389,7 +3389,7 @@ Object { @@ -3426,7 +3426,7 @@ Object { @@ -3463,7 +3463,7 @@ Object { @@ -3973,7 +3973,7 @@ Object { @@ -4010,7 +4010,7 @@ Object { @@ -4047,7 +4047,7 @@ Object { @@ -4084,7 +4084,7 @@ Object { @@ -4121,7 +4121,7 @@ Object { @@ -4158,7 +4158,7 @@ Object { @@ -4195,7 +4195,7 @@ Object { @@ -4232,7 +4232,7 @@ Object { @@ -4440,7 +4440,7 @@ Object { @@ -4477,7 +4477,7 @@ Object { @@ -4514,7 +4514,7 @@ Object { @@ -4551,7 +4551,7 @@ Object { @@ -5100,7 +5100,7 @@ Object { @@ -5137,7 +5137,7 @@ Object { @@ -5174,7 +5174,7 @@ Object { @@ -5211,7 +5211,7 @@ Object { @@ -5248,7 +5248,7 @@ Object { @@ -5285,7 +5285,7 @@ Object { @@ -5322,7 +5322,7 @@ Object { @@ -5359,7 +5359,7 @@ Object { @@ -5566,7 +5566,7 @@ Object { @@ -5603,7 +5603,7 @@ Object { @@ -5640,7 +5640,7 @@ Object { @@ -5677,7 +5677,7 @@ Object { @@ -6185,7 +6185,7 @@ Object { @@ -6222,7 +6222,7 @@ Object { @@ -6259,7 +6259,7 @@ Object { @@ -6296,7 +6296,7 @@ Object { @@ -6333,7 +6333,7 @@ Object { @@ -6370,7 +6370,7 @@ Object { @@ -6407,7 +6407,7 @@ Object { @@ -6444,7 +6444,7 @@ Object { @@ -6651,7 +6651,7 @@ Object { @@ -6688,7 +6688,7 @@ Object { @@ -6725,7 +6725,7 @@ Object { @@ -6762,7 +6762,7 @@ Object { @@ -7131,7 +7131,7 @@ Object { @@ -7347,7 +7347,7 @@ Object { @@ -7655,7 +7655,7 @@ exports[`Sankey bar chart rendering Should render the Sankey chart with string n @@ -7692,7 +7692,7 @@ exports[`Sankey bar chart rendering Should render the Sankey chart with string n @@ -8009,7 +8009,7 @@ exports[`Sankey chart - Theme Should reflect theme change 1`] = ` @@ -8046,7 +8046,7 @@ exports[`Sankey chart - Theme Should reflect theme change 1`] = ` @@ -8372,7 +8372,7 @@ exports[`Sankey chart rendering Should re-render the Sankey chart with data 2`] @@ -8409,7 +8409,7 @@ exports[`Sankey chart rendering Should re-render the Sankey chart with data 2`] @@ -8815,7 +8815,7 @@ Object { @@ -8852,7 +8852,7 @@ Object { @@ -8889,7 +8889,7 @@ Object { @@ -8926,7 +8926,7 @@ Object { @@ -8963,7 +8963,7 @@ Object { @@ -9000,7 +9000,7 @@ Object { @@ -9383,7 +9383,7 @@ Object { @@ -9420,7 +9420,7 @@ Object { @@ -9457,7 +9457,7 @@ Object { @@ -9494,7 +9494,7 @@ Object { @@ -9531,7 +9531,7 @@ Object { @@ -9568,7 +9568,7 @@ Object { @@ -9868,7 +9868,7 @@ Object { @@ -9905,7 +9905,7 @@ Object { @@ -9942,7 +9942,7 @@ Object { @@ -9979,7 +9979,7 @@ Object { @@ -10239,7 +10239,7 @@ Object { @@ -10276,7 +10276,7 @@ Object { @@ -10313,7 +10313,7 @@ Object { @@ -10350,7 +10350,7 @@ Object { @@ -10803,7 +10803,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -10840,7 +10840,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -10877,7 +10877,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -10914,7 +10914,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -10951,7 +10951,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -10988,7 +10988,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11025,7 +11025,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11062,7 +11062,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11270,7 +11270,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11307,7 +11307,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11344,7 +11344,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11381,7 +11381,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover @@ -11626,7 +11626,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover />
14
@@ -11925,7 +11925,7 @@ Object { @@ -11962,7 +11962,7 @@ Object { @@ -11999,7 +11999,7 @@ Object { @@ -12036,7 +12036,7 @@ Object { @@ -12073,7 +12073,7 @@ Object { @@ -12110,7 +12110,7 @@ Object { @@ -12147,7 +12147,7 @@ Object { @@ -12184,7 +12184,7 @@ Object { @@ -12392,7 +12392,7 @@ Object { @@ -12429,7 +12429,7 @@ Object { @@ -12466,7 +12466,7 @@ Object { @@ -12503,7 +12503,7 @@ Object { @@ -13013,7 +13013,7 @@ Object { @@ -13050,7 +13050,7 @@ Object { @@ -13087,7 +13087,7 @@ Object { @@ -13124,7 +13124,7 @@ Object { @@ -13161,7 +13161,7 @@ Object { @@ -13198,7 +13198,7 @@ Object { @@ -13235,7 +13235,7 @@ Object { @@ -13272,7 +13272,7 @@ Object { @@ -13480,7 +13480,7 @@ Object { @@ -13517,7 +13517,7 @@ Object { @@ -13554,7 +13554,7 @@ Object { @@ -13591,7 +13591,7 @@ Object { @@ -14136,7 +14136,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14173,7 +14173,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14210,7 +14210,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14247,7 +14247,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14284,7 +14284,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14321,7 +14321,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14358,7 +14358,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14395,7 +14395,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14603,7 +14603,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14640,7 +14640,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14677,7 +14677,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover @@ -14714,7 +14714,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.module.css b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.module.css index 69c354e59c2471..f70cb7dba8de23 100644 --- a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.module.css +++ b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.module.css @@ -70,13 +70,13 @@ .tooltip { @apply pointer-events-none absolute flex flex-col p-horizontal-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusSmall); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-small); + color: var(--color-neutral-foreground-1); } /* @@ -86,11 +86,11 @@ * the correct form for a token value. */ .marker-label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + fill: var(--color-neutral-foreground-1); text-anchor: middle; /* Griffel `m` bucket — emitted after the flat bucket; nesting reproduces that order. */ diff --git a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx index eeb8a897cc0ac3..e8b35d67366dec 100644 --- a/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx +++ b/packages/charts/react-charts/library/src/components/ScatterChart/ScatterChart.test.tsx @@ -223,7 +223,7 @@ describe('ScatterChart- Subcomponent Legends', () => { await new Promise(resolve => setTimeout(resolve)); // Assert expect(circles).toHaveLength(10); - expect(circles[0]).toHaveAttribute('fill', 'var(--colorNeutralBackground1)'); + expect(circles[0]).toHaveAttribute('fill', 'var(--color-neutral-background-1)'); expect(circles[1]).toHaveAttribute('fill', '#00bcf2'); expect(circles[2]).toHaveAttribute('fill', '#00bcf2'); expect(circles[3]).toHaveAttribute('fill', '#00bcf2'); diff --git a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.module.css b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.module.css index 3cd2361cb91d38..0defc697e82fdc 100644 --- a/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.module.css +++ b/packages/charts/react-charts/library/src/components/Sparkline/Sparkline.module.css @@ -44,11 +44,11 @@ /* from useStyles.valueText — typographyStyles.caption1 + fill/forced-color-adjust */ .value-text { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } } diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap index 2a31090e42d26e..9457a1740e0e4b 100644 --- a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap @@ -417,7 +417,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="Jan. Line 1, 120." cx="37.14285714285714" cy="130.66037735849056" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -430,7 +430,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="Jan. Line 1, 120." cx="37.14285714285714" cy="130.66037735849056" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -443,7 +443,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="Feb. Line 1, 130." cx="4.571428571428569" cy="118.63207547169813" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -456,7 +456,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="Feb. Line 1, 130." cx="4.571428571428569" cy="118.63207547169813" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -469,7 +469,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="Mar. Line 1, 125." cx="-28" cy="124.64622641509433" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -482,7 +482,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="Mar. Line 1, 125." cx="-28" cy="124.64622641509433" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -927,7 +927,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-01-01. Line 1, 30." cx="37.14285714285714" cy="211.25" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -940,7 +940,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-01-02. Line 1, 35." cx="4.571428571428569" cy="200.625" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -953,7 +953,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-01-03. Line 1, 32." cx="-28" cy="207.00000000000003" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -1378,7 +1378,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="A. Line 1, 15." cx="37.14285714285714" cy="83.75" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -1391,7 +1391,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="B. Line 1, 18." cx="4.571428571428569" cy="45.49999999999999" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -1404,7 +1404,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="C. Line 1, 22." cx="-28" cy="-5.500000000000025" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2008,7 +2008,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-01. Line 1, 12000." cx="65.75" cy="212.91044776119404" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2021,7 +2021,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-02. Line 1, 15000." cx="47" cy="202.38805970149255" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2034,7 +2034,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-03. Line 1, 13500." cx="28.25" cy="207.6492537313433" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2047,7 +2047,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-04. Line 1, 18000." cx="9.5" cy="191.86567164179107" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2060,7 +2060,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-05. Line 1, 16500." cx="-9.25" cy="197.1268656716418" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2073,7 +2073,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations aria-label="2024-06. Line 1, 20000." cx="-28" cy="184.8507462686567" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2664,7 +2664,7 @@ exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type De @@ -2686,7 +2686,7 @@ exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type De @@ -2890,7 +2890,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -2912,7 +2912,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -2934,7 +2934,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -2956,7 +2956,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -2978,7 +2978,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3000,7 +3000,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3022,7 +3022,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3044,7 +3044,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3066,7 +3066,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3088,7 +3088,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3110,7 +3110,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3132,7 +3132,7 @@ exports[`VegaDeclarativeChart - Financial Ratios Heatmap should render financial @@ -3269,7 +3269,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 1: Heatmap Chart Not Rendering @@ -3291,7 +3291,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 1: Heatmap Chart Not Rendering @@ -3622,7 +3622,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support aria-label="A. Line 1, 20." cx="28.999999999999993" cy="-43.75" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -3635,7 +3635,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support aria-label="B. Line 1, 25." cx="-28" cy="-123.4375" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -3904,7 +3904,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -3926,7 +3926,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -3948,7 +3948,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -3970,7 +3970,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -3992,7 +3992,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4014,7 +4014,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4036,7 +4036,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4058,7 +4058,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4080,7 +4080,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4102,7 +4102,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4124,7 +4124,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4146,7 +4146,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4372,7 +4372,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4394,7 +4394,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4416,7 +4416,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4438,7 +4438,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4460,7 +4460,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4482,7 +4482,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4504,7 +4504,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4526,7 +4526,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4548,7 +4548,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4570,7 +4570,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4592,7 +4592,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4614,7 +4614,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap from a @@ -4774,7 +4774,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap with r @@ -4796,7 +4796,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap with r @@ -4818,7 +4818,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap with r @@ -4840,7 +4840,7 @@ exports[`VegaDeclarativeChart - More Heatmap Charts should render heatmap with r diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.module.css b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.module.css index d16fea18b42c48..a43e10a20ace1e 100644 --- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.module.css +++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.module.css @@ -78,13 +78,13 @@ .tooltip { @apply pointer-events-none absolute flex flex-col p-horizontal-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusSmall); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-small); + color: var(--color-neutral-foreground-1); } /* @@ -95,17 +95,17 @@ * a plain declaration. */ .bar-label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } /* from useStyles.lineBorder */ .line-border { - stroke: var(--colorNeutralBackground1); + stroke: var(--color-neutral-background-1); /* Griffel `m` bucket — emitted after the flat bucket; nesting reproduces that order. */ @variant forced-colors { diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx index 09a25733c5582f..bc7dbdcb3712c6 100644 --- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx +++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.test.tsx @@ -519,9 +519,9 @@ describe('Vertical bar chart - Subcomponent bar', () => { container => { // Assert const bars = getById(container, /_VBC_bar/i); - expect(bars[0].getAttribute('fill')).toEqual('var(--colorPaletteBlueBackground2)'); - expect(bars[1].getAttribute('fill')).toEqual('var(--colorPaletteBlueBackground2)'); - expect(bars[2].getAttribute('fill')).toEqual('var(--colorPaletteBlueBackground2)'); + expect(bars[0].getAttribute('fill')).toEqual('var(--color-palette-blue-background-2)'); + expect(bars[1].getAttribute('fill')).toEqual('var(--color-palette-blue-background-2)'); + expect(bars[2].getAttribute('fill')).toEqual('var(--color-palette-blue-background-2)'); }, ); diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap index d89abf5746e15c..0502ebb662f9b2 100644 --- a/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap @@ -5031,7 +5031,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
50,000
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.module.css b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.module.css index 18313db00fa2ac..65e1ce28f7839f 100644 --- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.module.css +++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.module.css @@ -73,13 +73,13 @@ .tooltip { @apply pointer-events-none absolute flex flex-col p-horizontal-s text-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusSmall); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-small); + color: var(--color-neutral-foreground-1); } /* @@ -90,11 +90,11 @@ * a plain declaration. */ .bar-label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); - fill: var(--colorNeutralForeground1); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); + fill: var(--color-neutral-foreground-1); forced-color-adjust: auto; } } diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap index 9ee0a9af449773..6814d1bae4c438 100644 --- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap +++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap @@ -415,7 +415,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged aria-label="January. Supported Builds, 42." cx="279" cy="141.8" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -428,7 +428,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged aria-label="February. Supported Builds, 41." cx="327" cy="143.9" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -441,7 +441,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged aria-label="March. Supported Builds, 100." cx="375" cy="20" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -970,7 +970,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged aria-label="January. Supported Builds, 42." cx="279" cy="141.8" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -983,7 +983,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged aria-label="February. Supported Builds, 41." cx="327" cy="143.9" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -996,7 +996,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged aria-label="March. Supported Builds, 100." cx="375" cy="20" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -2192,7 +2192,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
40%
@@ -3233,7 +3233,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout aria-label="0. Line1, 15." cx="56" cy="194.3269230769231" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -3246,7 +3246,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout aria-label="20. Line1, 30." cx="614" cy="123.65384615384616" - fill="var(--colorNeutralBackground1)" + fill="var(--color-neutral-background-1)" opacity="0" r="8" role="option" @@ -3385,7 +3385,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
40%
diff --git a/packages/charts/react-charts/stories/src/AreaChart/AreaChartDefault.module.css b/packages/charts/react-charts/stories/src/AreaChart/AreaChartDefault.module.css index 962c461d7aa1a8..abd434f1d7389f 100644 --- a/packages/charts/react-charts/stories/src/AreaChart/AreaChartDefault.module.css +++ b/packages/charts/react-charts/stories/src/AreaChart/AreaChartDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..module.css b/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..module.css index 15a67cd8a95dc2..2123c0114b8678 100644 --- a/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..module.css +++ b/packages/charts/react-charts/stories/src/AreaChart/AreaChartNegative..module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.module.css b/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.module.css index 87429bf78f1686..27767590302d7e 100644 --- a/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.module.css +++ b/packages/charts/react-charts/stories/src/AreaChart/AreaChartSecondaryYAxis.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.module.css b/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.module.css index bf874b85b0a897..147c70d14c1652 100644 --- a/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.module.css +++ b/packages/charts/react-charts/stories/src/LineChart/LineChartAllNegative.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.module.css b/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.module.css index 354555b4a590bd..51d38b7a9e7f1e 100644 --- a/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.module.css +++ b/packages/charts/react-charts/stories/src/LineChart/LineChartAnnotations.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.module.css b/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.module.css index 9e5db43a84abba..b642b363cfd27c 100644 --- a/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.module.css +++ b/packages/charts/react-charts/stories/src/LineChart/LineChartDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.module.css b/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.module.css index 6246d0b8fcbfa7..68dec5e6d041b7 100644 --- a/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.module.css +++ b/packages/charts/react-charts/stories/src/LineChart/LineChartNegative.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.module.css b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.module.css index 0a8ab3e9d94fc0..76e1871825f774 100644 --- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.module.css +++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDate.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.module.css b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.module.css index 67334853250bf9..2a6d77207e0bfa 100644 --- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.module.css +++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.module.css b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.module.css index b433be58f5e28c..35f90b6f47c10e 100644 --- a/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.module.css +++ b/packages/charts/react-charts/stories/src/ScatterChart/ScatterChartString.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.module.css b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.module.css index 2132ae14601be9..bf4f26e1f0d0bd 100644 --- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.module.css +++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartAllNegative.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.module.css b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.module.css index 85e2c5174ddb9c..a805cfe0a425d8 100644 --- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.module.css +++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.module.css b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.module.css index a84645bf7119b4..303103c380c976 100644 --- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.module.css +++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartNegative.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.module.css b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.module.css index 6a9006bbee7d16..47c6ea55684f84 100644 --- a/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.module.css +++ b/packages/charts/react-charts/stories/src/VerticalBarChart/VerticalBarChartSecondaryYAxis.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.module.css b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.module.css index a7c6b60bbc55f0..ca3da2fc9035ad 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.module.css +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.module.css b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.module.css index ac78c036708d45..4d08aebaa1ed21 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.module.css +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartNegative.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } diff --git a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.module.css b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.module.css index 433d5a6b71cece..82f795067f51fe 100644 --- a/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.module.css +++ b/packages/charts/react-charts/stories/src/VerticalStackedBarChart/VerticalStackedBarChartSecondaryYAxis.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .svgTooltip { - fill: var(--colorNeutralBackground2); + fill: var(--color-neutral-background-2); } From caac27d11278ce092a0257a1dded789918cc9fdc Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:41:02 -0700 Subject: [PATCH 613/640] refactor(react-motion): old->canonical token var sweep, stories (theming Phase 2a) Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../CreateMotionComponentArrays.module.css | 16 ++++---- .../CreateMotionComponentDefault.module.css | 10 ++--- .../CreateMotionComponentFactory.module.css | 16 ++++---- ...teMotionComponentFunctionParams.module.css | 22 +++++----- .../CreateMotionComponentFunctions.module.css | 14 +++---- ...ComponentImperativeRefPlayState.module.css | 16 ++++---- ...tionComponentLifecycleCallbacks.module.css | 28 ++++++------- .../CreateMotionComponentReplayKey.module.css | 6 +-- ...reateMotionComponentTokensUsage.module.css | 16 ++++---- ...teMotionComponentVariantDefault.module.css | 18 ++++----- .../CreatePresenceComponentAppear.module.css | 16 ++++---- .../CreatePresenceComponentArrays.module.css | 16 ++++---- .../CreatePresenceComponentDefault.module.css | 16 ++++---- .../CreatePresenceComponentFactory.module.css | 16 ++++---- ...PresenceComponentFunctionParams.module.css | 22 +++++----- ...reatePresenceComponentFunctions.module.css | 20 +++++----- ...CreatePresenceComponentInAndOut.module.css | 10 ++--- ...enceComponentLifecycleCallbacks.module.css | 28 ++++++------- ...ePresenceComponentReducedMotion.module.css | 16 ++++---- ...ePresenceComponentUnmountOnExit.module.css | 16 ++++---- .../Introduction/MotionIntroDemo.module.css | 4 +- .../MotionVsPresenceDemo.module.css | 34 ++++++++-------- .../src/Motion/CustomMotion.module.css | 14 +++---- .../src/Motion/DirectParams.module.css | 16 ++++---- .../src/Motion/DisableMotion.module.css | 14 +++---- .../MotionSlotCustomize.module.css | 14 +++---- .../MotionSlotDefault.module.css | 8 ++-- .../MotionSlotDisable.module.css | 12 +++--- .../PresenceGroupDefault.module.css | 14 +++---- .../PresenceMotionSlotCustomize.module.css | 24 +++++------ .../PresenceMotionSlotDefault.module.css | 18 ++++----- .../PresenceMotionSlotDisable.module.css | 18 ++++----- .../stories/src/Tokens/Cards.module.css | 40 +++++++++---------- .../react-motion/stories/src/Tokens/index.mdx | 4 +- 34 files changed, 286 insertions(+), 286 deletions(-) diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css index 1be16e95317d75..c60e1fd6acc551 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -45,7 +45,7 @@ display: inline-block; width: 80px; height: 100px; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 80%; position: relative; box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); @@ -56,7 +56,7 @@ .balloon::before { content: '▲'; font-size: 20px; - color: var(--colorCompoundBrandBackgroundPressed); + color: var(--color-compound-brand-background-pressed); display: block; text-align: center; width: 100%; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css index caac02731bb835..04c8590e3117c3 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.module.css @@ -13,15 +13,15 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css index 2dd73f1bb48db7..bab0e0a8ba1412 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFactory.module.css @@ -13,24 +13,24 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; padding-top: 120px; } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); width: 100px; height: 100px; } .description { - font-family: var(--fontFamilyMonospace); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-monospace); + border-radius: var(--radius-medium); margin-top: 10px; padding: 5px 10px; - background-color: var(--colorNeutralBackground1Pressed); + background-color: var(--color-neutral-background-1-pressed); } diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css index faa492f1fe6960..ccc5e2c2c10e49 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.module.css @@ -12,9 +12,9 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -22,9 +22,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -49,17 +49,17 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; } .description { - font-family: var(--fontFamilyMonospace); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-monospace); + border-radius: var(--radius-medium); margin-top: 10px; padding: 5px 10px; - background-color: var(--colorNeutralBackground1Pressed); + background-color: var(--color-neutral-background-1-pressed); } diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css index fc927a1f5b1923..03efe2566285c3 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-height: 180px; } @@ -24,9 +24,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -43,7 +43,7 @@ } .item { - border: var(--stroke-width-thicker) solid var(--colorBrandBackground); + border: var(--stroke-width-thicker) solid var(--color-brand-background); padding: 8px; width: 300px; overflow: hidden; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css index 89d3aac3af8037..d984bec83fd596 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -42,8 +42,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css index 0604215b4841b9..01ba97db409ceb 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -42,8 +42,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; @@ -56,21 +56,21 @@ } .logLabel { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-neutral-foreground-3); width: fit-content; align-self: end; - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); padding: 2px 12px; - border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0; + border-radius: var(--radius-medium) var(--radius-medium) 0 0; } .log { overflow-y: auto; position: relative; height: 200px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); border-top-right-radius: 0; padding: 10px; } diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentReplayKey.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentReplayKey.module.css index 2ac1fa7def4bf2..245ebf3fe162eb 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentReplayKey.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentReplayKey.module.css @@ -33,8 +33,8 @@ } .counter { - color: var(--colorBrandForeground1); - font-size: var(--fontSizeHero900); - font-weight: var(--fontWeightBold); + color: var(--color-brand-foreground-1); + font-size: var(--text-hero-900); + font-weight: var(--font-weight-bold); line-height: 1; } diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css index 63a397406fe1e1..11d2ed529c639d 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentTokensUsage.module.css @@ -13,24 +13,24 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } .item { - background-color: var(--colorBrandBackground); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-brand-background); + border-radius: var(--radius-circular); width: 100px; height: 100px; forced-color-adjust: none; } .description { - font-family: var(--fontFamilyMonospace); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-monospace); + border-radius: var(--radius-medium); margin-top: 10px; padding: 5px 10px; - background-color: var(--colorNeutralBackground1Pressed); + background-color: var(--color-neutral-background-1-pressed); } diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css b/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css index a6fa5439b0a8c4..ca3a441c832d54 100644 --- a/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css +++ b/packages/react-components/react-motion/stories/src/CreateMotionComponentVariant/CreateMotionComponentVariantDefault.module.css @@ -20,9 +20,9 @@ align-items: center; justify-content: center; flex: 1; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 20px; min-height: 200px; } @@ -31,9 +31,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -50,8 +50,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; @@ -59,5 +59,5 @@ .cardTitle { margin-bottom: 50px; - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css index 0b837a4a5a247f..fe6065d6de0358 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -42,8 +42,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css index 46a78b8432a6aa..82b926384612ef 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -45,7 +45,7 @@ display: inline-block; width: 80px; height: 100px; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 80%; position: relative; box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.07); @@ -56,7 +56,7 @@ .balloon::before { content: '▲'; font-size: 20px; - color: var(--colorCompoundBrandBackgroundPressed); + color: var(--color-compound-brand-background-pressed); display: block; text-align: center; width: 100%; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css index c64d53c4f47af6..4c51cd35f55cb6 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentDefault.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; padding-top: 100px; } @@ -24,9 +24,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -35,8 +35,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css index 128424e8422602..7b185c89a4d9d2 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; padding-top: 100px; } @@ -24,9 +24,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -35,8 +35,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css index 8c7ffe32630935..6e0c58b5bd4c58 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.module.css @@ -12,9 +12,9 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -22,9 +22,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -49,17 +49,17 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; } .description { - font-family: var(--fontFamilyMonospace); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-monospace); + border-radius: var(--radius-medium); margin-top: 10px; padding: 5px 10px; - background-color: var(--colorNeutralBackground1Pressed); + background-color: var(--color-neutral-background-1-pressed); } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css index 220e80ff134fd2..7c98056e041fab 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.module.css @@ -12,9 +12,9 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-height: 230px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -50,15 +50,15 @@ } .item { - border: var(--stroke-width-thicker) solid var(--colorBrandBackground); + border: var(--stroke-width-thicker) solid var(--color-brand-background); padding: 8px; width: 300px; } .description { - font-family: var(--fontFamilyMonospace); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-monospace); + border-radius: var(--radius-medium); margin-top: 10px; padding: 5px 10px; - background-color: var(--colorNeutralBackground1Pressed); + background-color: var(--color-neutral-background-1-pressed); } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css index 9a88ccde8d4a17..cb828d474c2d08 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentInAndOut.module.css @@ -13,9 +13,9 @@ justify-content: center; gap: 10px; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,8 +23,8 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css index 06b90041d4214a..17efc5c4139279 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -42,8 +42,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; @@ -56,21 +56,21 @@ } .logLabel { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-neutral-foreground-3); width: fit-content; align-self: end; - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); padding: 2px 12px; - border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0; + border-radius: var(--radius-medium) var(--radius-medium) 0 0; } .log { overflow-y: auto; position: relative; height: 200px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); border-top-right-radius: 0; padding: 10px; } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css index b7fb455f92eeab..37fca5f41fbe33 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -42,8 +42,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); width: 100px; height: 100px; } diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css index 305a213141fe8b..4af6111b05ab7d 100644 --- a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css +++ b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: end; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -23,9 +23,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -42,8 +42,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css b/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css index e55b9382ae73c2..8cce8403c0025b 100644 --- a/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css +++ b/packages/react-components/react-motion/stories/src/Introduction/MotionIntroDemo.module.css @@ -11,7 +11,7 @@ .card { padding: var(--spacing-vertical-l) var(--spacing-horizontal-xxl); - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase300); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-300); text-align: center; } diff --git a/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css b/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css index cabe3ec0d37ba6..4cdda732bd1e23 100644 --- a/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css +++ b/packages/react-components/react-motion/stories/src/Introduction/MotionVsPresenceDemo.module.css @@ -18,8 +18,8 @@ .panel { display: flex; flex-direction: column; - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); overflow: hidden; } @@ -29,19 +29,19 @@ align-items: center; gap: var(--spacing-vertical-xs); padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl) var(--spacing-vertical-m); - background-color: var(--colorNeutralBackground2); + background-color: var(--color-neutral-background-2); } .title { margin: 0; - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); } .subtitle { margin: 0; - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); text-align: center; } @@ -51,7 +51,7 @@ justify-items: center; height: 80px; padding: var(--spacing-vertical-l); - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .motionWrapper { @@ -62,25 +62,25 @@ align-items: center; justify-content: center; padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl); - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase300); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-300); } .codeArea { margin: 0; padding: var(--spacing-vertical-m) var(--spacing-horizontal-l); - background-color: var(--colorNeutralBackground3); - border-top: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-3); + border-top: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); overflow: auto; - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase100); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground1); + font-family: var(--font-monospace); + font-size: var(--text-base-100); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-1); } .buttonRow { display: flex; justify-content: center; padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl) var(--spacing-vertical-l); - background-color: var(--colorNeutralBackground2); + background-color: var(--color-neutral-background-2); } diff --git a/packages/react-components/react-motion/stories/src/Motion/CustomMotion.module.css b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.module.css index 6657023528b163..0eb58e4553c40d 100644 --- a/packages/react-components/react-motion/stories/src/Motion/CustomMotion.module.css +++ b/packages/react-components/react-motion/stories/src/Motion/CustomMotion.module.css @@ -14,14 +14,14 @@ } .sectionTitle { - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); margin: 0; } .sectionDescription { - font-size: var(--fontSizeBase300); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-300); + color: var(--color-neutral-foreground-3); margin: 0; } @@ -31,13 +31,13 @@ } .drawerContainer { - border: 2px solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); overflow: hidden; display: flex; flex-direction: column-reverse; height: 300px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .drawerContent { diff --git a/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css b/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css index 0fa34de2744850..9805295950924d 100644 --- a/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css +++ b/packages/react-components/react-motion/stories/src/Motion/DirectParams.module.css @@ -15,8 +15,8 @@ flex-direction: column; gap: var(--spacing-vertical-s); padding: var(--spacing-vertical-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); } .row { @@ -38,8 +38,8 @@ flex-direction: column; gap: var(--spacing-vertical-s); padding: var(--spacing-vertical-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); overflow: hidden; overflow-wrap: break-word; word-break: break-word; @@ -48,10 +48,10 @@ } .codeBlock { - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase200); - background-color: var(--colorNeutralBackground1Pressed); - border-radius: var(--borderRadiusMedium); + font-family: var(--font-monospace); + font-size: var(--text-base-200); + background-color: var(--color-neutral-background-1-pressed); + border-radius: var(--radius-medium); padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); white-space: pre; overflow: auto; diff --git a/packages/react-components/react-motion/stories/src/Motion/DisableMotion.module.css b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.module.css index a884101f26ff9f..84130bc135f6c4 100644 --- a/packages/react-components/react-motion/stories/src/Motion/DisableMotion.module.css +++ b/packages/react-components/react-motion/stories/src/Motion/DisableMotion.module.css @@ -14,14 +14,14 @@ } .sectionTitle { - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); margin: 0; } .sectionDescription { - font-size: var(--fontSizeBase300); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-300); + color: var(--color-neutral-foreground-3); margin: 0; } @@ -31,12 +31,12 @@ } .drawerContainer { - border: 2px solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); overflow: hidden; display: flex; height: 300px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .drawerContent { diff --git a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css index f3f1b1b09d9fd6..2e95b3be9accd5 100644 --- a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css +++ b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotCustomize.module.css @@ -13,26 +13,26 @@ align-items: center; justify-content: center; gap: 10px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 20px; } .label { - color: var(--colorNeutralForeground3); - font-size: var(--fontSizeBase200); + color: var(--color-neutral-foreground-3); + font-size: var(--text-base-200); text-align: center; } .indicator { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); font-size: 24px; } diff --git a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css index 1a598a7586b7a6..86e61e0b4e99e3 100644 --- a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css +++ b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDefault.module.css @@ -13,14 +13,14 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 20px; } .indicator { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 50%; width: 80px; height: 80px; diff --git a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css index 13b40fc383dbcb..1f2be1df052699 100644 --- a/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css +++ b/packages/react-components/react-motion/stories/src/MotionSlotAPI/MotionSlotDisable.module.css @@ -13,19 +13,19 @@ align-items: center; justify-content: center; gap: 10px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 20px; } .label { - color: var(--colorNeutralForeground3); - font-size: var(--fontSizeBase200); + color: var(--color-neutral-foreground-3); + font-size: var(--text-base-200); } .indicator { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 50%; width: 80px; height: 80px; diff --git a/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css b/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css index 6519d92a474e0f..0da626b7609949 100644 --- a/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceGroup/PresenceGroupDefault.module.css @@ -10,21 +10,21 @@ display: flex; flex-direction: column; gap: 10px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); border-top-right-radius: 0; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding: 10px; } .controls { display: flex; gap: 10px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); border-bottom: none; - border-top-left-radius: var(--borderRadiusMedium); - border-top-right-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border-top-left-radius: var(--radius-medium); + border-top-right-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; align-self: end; } diff --git a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css index 2f4ccff0e714e3..75ed6407382fea 100644 --- a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotCustomize.module.css @@ -12,9 +12,9 @@ flex-direction: column; align-items: center; justify-content: center; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-height: 140px; } @@ -23,24 +23,24 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } .panel { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); + border-radius: var(--radius-medium); padding: 16px; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); text-align: center; } .label { - color: var(--colorNeutralForeground3); - font-size: var(--fontSizeBase200); + color: var(--color-neutral-foreground-3); + font-size: var(--text-base-200); text-align: center; margin-top: 8px; } diff --git a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css index 3436400e022134..9d1100575a2405 100644 --- a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDefault.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-height: 120px; } @@ -24,15 +24,15 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } .panel { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); + border-radius: var(--radius-medium); padding: 20px; } diff --git a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css index aa4dc8f9a00e09..27aa06454b1c0a 100644 --- a/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css +++ b/packages/react-components/react-motion/stories/src/PresenceMotionSlotAPI/PresenceMotionSlotDisable.module.css @@ -13,9 +13,9 @@ align-items: center; justify-content: center; grid-area: card; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-height: 120px; } @@ -24,15 +24,15 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } .panel { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); + border-radius: var(--radius-medium); padding: 20px; } diff --git a/packages/react-components/react-motion/stories/src/Tokens/Cards.module.css b/packages/react-components/react-motion/stories/src/Tokens/Cards.module.css index b5a41a622abfc3..b4bd5111b92911 100644 --- a/packages/react-components/react-motion/stories/src/Tokens/Cards.module.css +++ b/packages/react-components/react-motion/stories/src/Tokens/Cards.module.css @@ -8,26 +8,26 @@ .controls { align-self: end; - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-medium); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 6px 10px; - border: 2px solid var(--colorNeutralStroke1); + border: 2px solid var(--color-neutral-stroke-1); border-bottom: none; width: fit-content; } .card { - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-medium); border-top-right-radius: 0; padding: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px 50px; place-items: center; - border: 2px solid var(--colorNeutralStroke1); + border: 2px solid var(--color-neutral-stroke-1); } .cardClassesContainer { @@ -44,7 +44,7 @@ grid-area: point; width: var(--point-size); height: var(--point-size); - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%); animation-name: point-kf; animation-duration: 2s; @@ -75,21 +75,21 @@ .graphP { grid-area: graphP; - color: var(--colorNeutralStroke1); - font-family: var(--fontFamilyMonospace); + color: var(--color-neutral-stroke-1); + font-family: var(--font-monospace); } .graphT { grid-area: graphT; justify-self: end; - color: var(--colorNeutralStroke1); - font-family: var(--fontFamilyMonospace); + color: var(--color-neutral-stroke-1); + font-family: var(--font-monospace); } .svg { grid-area: svg; - border-left: 1px solid var(--colorNeutralStroke1); - border-bottom: 1px solid var(--colorNeutralStroke1); + border-left: 1px solid var(--color-neutral-stroke-1); + border-bottom: 1px solid var(--color-neutral-stroke-1); overflow: visible; height: var(--container-size); width: var(--container-size); @@ -97,7 +97,7 @@ .path { fill: none; - stroke: var(--colorNeutralStrokeAccessible); + stroke: var(--color-neutral-stroke-accessible); stroke-width: 2; } @@ -112,7 +112,7 @@ width: 128px; height: 4px; margin: 64px auto; - background-color: var(--colorNeutralForeground3); + background-color: var(--color-neutral-foreground-3); animation-name: duration-kf; animation-iteration-count: infinite; } @@ -134,11 +134,11 @@ display: flex; flex-direction: column; gap: 5px; - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase400); + font-family: var(--font-monospace); + font-size: var(--text-base-400); padding: 5px 10px; - background-color: var(--colorNeutralBackground3); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-neutral-background-3); + border-radius: var(--radius-medium); } .name { @@ -146,7 +146,7 @@ } .value { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); font-style: italic; white-space: nowrap; text-align: center; diff --git a/packages/react-components/react-motion/stories/src/Tokens/index.mdx b/packages/react-components/react-motion/stories/src/Tokens/index.mdx index 52ea78049a625a..3d63d1d6b704ff 100644 --- a/packages/react-components/react-motion/stories/src/Tokens/index.mdx +++ b/packages/react-components/react-motion/stories/src/Tokens/index.mdx @@ -10,7 +10,7 @@ Fluent UI React v9 offers predefined tokens for creating custom motions. These t ```css /* 💡 In CSS, reference the token's custom property directly */ .root { - animation-duration: var(--curveAccelerateMid); + animation-duration: var(--ease-accelerate-mid); } ``` @@ -24,7 +24,7 @@ const Motion = createMotionComponent({ ``` The `tokens` object from `@fluentui/react-components` is the TypeScript-side equivalent of the CSS -form — `tokens.curveAccelerateMid` is the string `'var(--curveAccelerateMid)'`. +form — `tokens.curveAccelerateMid` is the string `'var(--ease-accelerate-mid)'`. ## Curves From 72d25e668ab30c4d1d593c517320b653baae73c3 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:41:38 -0700 Subject: [PATCH 614/640] refactor(react-motion-components-preview): token var sweep, stories (theming Phase 2a) Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../stories/src/Atoms/AtomsDemo.module.css | 34 +++++++-------- .../src/Atoms/ComposingAtomsDemo.module.css | 42 +++++++++---------- .../stories/src/Atoms/ComposingAtomsDemo.tsx | 4 +- .../stories/src/Blur/BlurDefault.module.css | 6 +-- .../stories/src/Blur/BlurDemo.module.css | 20 ++++----- .../stories/src/Blur/BlurDuration.module.css | 8 ++-- .../stories/src/Blur/BlurOpacity.module.css | 16 +++---- .../stories/src/Blur/BlurRadius.module.css | 4 +- .../Collapse/CollapseCustomization.module.css | 10 ++--- .../src/Collapse/CollapseDefault.module.css | 6 +-- .../src/Collapse/CollapseDelayed.module.css | 6 +-- .../Collapse/CollapseHorizontal.module.css | 6 +-- .../src/Collapse/CollapseRelaxed.module.css | 6 +-- .../src/Collapse/CollapseSnappy.module.css | 6 +-- .../src/Fade/FadeCustomization.module.css | 10 ++--- .../stories/src/Fade/FadeDefault.module.css | 6 +-- .../stories/src/Fade/FadeRelaxed.module.css | 6 +-- .../stories/src/Fade/FadeSnappy.module.css | 6 +-- .../Introduction/ComponentsGrid.module.css | 22 +++++----- .../src/Introduction/InOutDemo.module.css | 34 +++++++-------- .../src/Introduction/VariantsDemo.module.css | 28 ++++++------- .../src/Rotate/RotateCardFlip.module.css | 12 +++--- .../src/Rotate/RotateDefault.module.css | 26 ++++++------ .../src/Scale/ScaleCustomization.module.css | 10 ++--- .../stories/src/Scale/ScaleDefault.module.css | 6 +-- .../stories/src/Scale/ScaleRelaxed.module.css | 6 +-- .../stories/src/Scale/ScaleSnappy.module.css | 6 +-- .../src/Slide/SlideCardsDemo.module.css | 2 +- .../stories/src/Slide/SlideDefault.module.css | 6 +-- .../src/Slide/SlideDirections.module.css | 24 +++++------ .../stories/src/Slide/SlideRelaxed.module.css | 6 +-- .../stories/src/Slide/SlideSnappy.module.css | 6 +-- .../Stagger/StaggerBouncingDots.module.css | 22 +++++----- .../Stagger/StaggerDelayMode.module.css | 30 ++++++------- .../StaggerExpandableContainer.module.css | 12 +++--- .../Stagger/StaggerHideMode.module.css | 30 ++++++------- .../Stagger/StaggerItemDelay.module.css | 10 ++--- .../Stagger/StaggerPlainElements.module.css | 10 ++--- .../Stagger/StaggerPresence.module.css | 10 ++--- .../Stagger/StaggerReversed.module.css | 10 ++--- .../Stagger/StaggerSpinners.module.css | 38 ++++++++--------- .../Stagger/StaggerStaggerIn.module.css | 8 ++-- .../Stagger/StaggerStaggerOut.module.css | 8 ++-- .../Stagger/StaggerText.module.css | 8 ++-- 44 files changed, 296 insertions(+), 296 deletions(-) diff --git a/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css index 3ef097137f8355..4039aa9d73f458 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Atoms/AtomsDemo.module.css @@ -4,8 +4,8 @@ .container { display: flex; flex-direction: column; - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); margin-top: var(--spacing-vertical-xxl); margin-bottom: var(--spacing-vertical-xxl); overflow: hidden; @@ -17,8 +17,8 @@ gap: var(--spacing-horizontal-l); flex-wrap: wrap; padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl); - background-color: var(--colorNeutralBackground2); - border-bottom: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-2); + border-bottom: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); } .body { @@ -37,21 +37,21 @@ justify-content: center; min-height: 120px; flex: 0 0 200px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); padding: var(--spacing-vertical-xl); } .demoBox { width: 100px; height: 80px; - background-color: var(--colorNeutralBackground3); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-neutral-background-3); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); display: flex; align-items: center; justify-content: center; - color: var(--colorNeutralForeground1); - font-weight: var(--fontWeightSemibold); + color: var(--color-neutral-foreground-1); + font-weight: var(--font-weight-semibold); } .codeArea { @@ -59,18 +59,18 @@ min-width: 0; margin: 0; padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl); - background-color: var(--colorNeutralBackground3); - border-left: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-3); + border-left: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); overflow: auto; - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase100); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground1); + font-family: var(--font-monospace); + font-size: var(--text-base-100); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-1); } @media (max-width: 600px) { .codeArea { border-left: none; - border-top: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + border-top: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); } } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css index 60d92ca69df210..6f07c6752d980e 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.module.css @@ -2,8 +2,8 @@ * Token references are the Fluent theme's CSS variables. */ .wrapper { - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); overflow: hidden; margin-top: var(--spacing-vertical-xxl); margin-bottom: var(--spacing-vertical-xxl); @@ -14,14 +14,14 @@ align-items: center; justify-content: space-between; padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl); - background-color: var(--colorNeutralBackground2); - border-bottom: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-2); + border-bottom: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); } .title { margin: 0; - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase300); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-300); } .body { @@ -41,7 +41,7 @@ flex: 1 1 auto; min-height: 120px; padding: var(--spacing-vertical-xl); - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .demoPane { @@ -54,17 +54,17 @@ display: flex; justify-content: center; padding: var(--spacing-vertical-m) var(--spacing-horizontal-xl) var(--spacing-vertical-l); - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .demoBox { padding: var(--spacing-vertical-l) var(--spacing-horizontal-xxl); - background-color: var(--colorNeutralBackground3); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground1); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + background-color: var(--color-neutral-background-3); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); text-align: center; } @@ -72,23 +72,23 @@ flex: 1 1 auto; min-width: 0; padding: var(--spacing-vertical-l) var(--spacing-horizontal-xl); - background-color: var(--colorNeutralBackground1); - border-left: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-1); + border-left: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); overflow: auto; } @media (max-width: 600px) { .codeArea { border-left: none; - border-top: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + border-top: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); } } .code { - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase100); - line-height: var(--lineHeightBase200); - color: var(--colorNeutralForeground1); + font-family: var(--font-monospace); + font-size: var(--text-base-100); + line-height: var(--leading-base-200); + color: var(--color-neutral-foreground-1); white-space: pre; margin: 0; display: block; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.tsx b/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.tsx index 73de64a502ce43..e0c876b8180503 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.tsx +++ b/packages/react-components/react-motion-components-preview/stories/src/Atoms/ComposingAtomsDemo.tsx @@ -103,8 +103,8 @@ const stackblitzExampleCss = `.container { .box { padding: 24px 32px; - background-color: var(--colorNeutralBackground3); - border: 1px solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-3); + border: 1px solid var(--color-neutral-stroke-1); border-radius: 8px; font-size: 18px; font-weight: 600; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css index 187cd8c17e78ec..b786ee5e4e1419 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDefault.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.module.css index 9359266f28e99d..3c8aff20116593 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDemo.module.css @@ -19,14 +19,14 @@ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; - background-color: var(--colorNeutralBackground2); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-neutral-background-2); + border-radius: var(--radius-medium); } .imageCard { position: relative; aspect-ratio: 4/3; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); overflow: hidden; cursor: pointer; } @@ -49,18 +49,18 @@ left: 0; right: 0; bottom: 0; - background-color: var(--colorBackgroundOverlay); + background-color: var(--color-background-overlay); display: flex; align-items: center; justify-content: center; - color: var(--colorNeutralForegroundInverted); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + color: var(--color-neutral-foreground-inverted); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); } .overlayButton { - background-color: var(--colorSubtleBackgroundInverted); + background-color: var(--color-subtle-background-inverted); padding: 8px 16px; - border-radius: var(--borderRadiusMedium); - border: 1px solid var(--colorNeutralStrokeAlpha2); + border-radius: var(--radius-medium); + border: 1px solid var(--color-neutral-stroke-alpha-2); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css index e5f22be326e62b..c9716a7494d0fe 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurDuration.module.css @@ -19,13 +19,13 @@ width: 200px; height: 120px; padding: 20px; - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); display: flex; align-items: center; justify-content: center; - font-size: var(--fontSizeBase300); + font-size: var(--text-base-300); text-align: center; } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css index e31a926199a2a5..df1683dd35eb58 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurOpacity.module.css @@ -19,28 +19,28 @@ width: 250px; height: 180px; padding: 20px; - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); display: flex; align-items: center; justify-content: center; - font-size: var(--fontSizeBase400); + font-size: var(--text-base-400); text-align: center; background-image: linear-gradient( 45deg, - var(--colorNeutralBackground3) 25%, + var(--color-neutral-background-3) 25%, transparent 25%, transparent 75%, - var(--colorNeutralBackground3) 75% + var(--color-neutral-background-3) 75% ), linear-gradient( 45deg, - var(--colorNeutralBackground3) 25%, + var(--color-neutral-background-3) 25%, transparent 25%, transparent 75%, - var(--colorNeutralBackground3) 75% + var(--color-neutral-background-3) 75% ); background-size: 20px 20px; background-position: diff --git a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css index 1f23f9b3adf63f..3d4b1f02d52da2 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Blur/BlurRadius.module.css @@ -18,11 +18,11 @@ } .cellNormal { - font-weight: var(--fontWeightRegular); + font-weight: var(--font-weight-regular); } .cellBold { - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); } .controls { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css index 58f2b5a3084180..ed955b2c1cc5f0 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.module.css @@ -25,9 +25,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } @@ -44,8 +44,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css index fc3e1128fa2eb0..f4f4ebcda140c6 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDefault.module.css @@ -21,9 +21,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css index be5fde9141e877..0b8e7d83aae6d6 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseDelayed.module.css @@ -21,9 +21,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css index 1af486e7e4c5ac..4994c468de77b0 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseHorizontal.module.css @@ -25,9 +25,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css index 82f4e710d1d575..a617f790dd8dc1 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.module.css @@ -21,9 +21,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css index 90a44b5bd4404d..aa18fbb6f63212 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseSnappy.module.css @@ -21,9 +21,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css index 77cd01082baa8b..d577a4186348ba 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.module.css @@ -22,9 +22,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } @@ -41,8 +41,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css index 4507bad8069525..ae50cf51688f2d 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeDefault.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css index c18d702b0abf87..3e1f2482445f67 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeRelaxed.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css index 415109a47694eb..74cba8e1f60c41 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeSnappy.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css b/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css index 55addce2d80201..b93807e1a54f29 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Introduction/ComponentsGrid.module.css @@ -15,15 +15,15 @@ align-items: center; gap: var(--spacing-vertical-m); padding: var(--spacing-vertical-xl); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); } .name { margin: 0; - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase400); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-400); } .demoArea { @@ -37,13 +37,13 @@ .demoBox { width: 50px; height: 50px; - background-color: var(--colorNeutralBackground3); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusSmall); + background-color: var(--color-neutral-background-3); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; - color: var(--colorNeutralForeground1); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); + color: var(--color-neutral-foreground-1); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css index a5ccd3a5d98d98..ddb521d87ae562 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Introduction/InOutDemo.module.css @@ -21,30 +21,30 @@ align-items: center; gap: var(--spacing-vertical-m); padding: var(--spacing-vertical-xl); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); } .title { margin: 0; - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase300); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-300); } .subtitle { margin: 0; - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); text-align: center; } .code { - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase200); - background-color: var(--colorNeutralBackground4); + font-family: var(--font-monospace); + font-size: var(--text-base-200); + background-color: var(--color-neutral-background-4); padding: var(--spacing-vertical-xxs) var(--spacing-horizontal-s-nudge); - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } .demoArea { @@ -58,18 +58,18 @@ .demoBox { width: 80px; height: 50px; - background-color: var(--colorBrandBackground); - border-radius: var(--borderRadiusSmall); + background-color: var(--color-brand-background); + border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; - color: var(--colorNeutralForegroundOnBrand); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); + color: var(--color-neutral-foreground-on-brand); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); } .button { min-width: auto; padding: var(--spacing-vertical-xs) var(--spacing-horizontal-m); - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css index 2203cb139b2cf6..d2bd9587ff1518 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Introduction/VariantsDemo.module.css @@ -26,22 +26,22 @@ align-items: center; gap: var(--spacing-vertical-m); padding: var(--spacing-vertical-xl); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); } .title { margin: 0; - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase300); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-300); } .duration { margin: 0; - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); - font-family: var(--fontFamilyMonospace); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); + font-family: var(--font-monospace); } .demoArea { @@ -55,18 +55,18 @@ .demoBox { width: 80px; height: 50px; - background-color: var(--colorBrandBackground); - border-radius: var(--borderRadiusSmall); + background-color: var(--color-brand-background); + border-radius: var(--radius-small); display: flex; align-items: center; justify-content: center; - color: var(--colorNeutralForegroundOnBrand); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); + color: var(--color-neutral-foreground-on-brand); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); } .button { min-width: auto; padding: var(--spacing-vertical-xs) var(--spacing-horizontal-m); - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css index c7a2a603c7111a..245d830cdbd9ed 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.module.css @@ -30,7 +30,7 @@ perspective-origin: center center; height: 140px; cursor: pointer; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); transition: scale 300ms cubic-bezier(0, 0, 0, 1); } @@ -41,24 +41,24 @@ .patternCard { height: 100%; width: 100%; - border: 2px solid var(--colorNeutralStroke1); + border: 2px solid var(--color-neutral-stroke-1); /* Override transparent background from outline appearance */ - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .patternCard:hover { /* Override transparent hover background */ - background-color: var(--colorNeutralBackground1Hover); + background-color: var(--color-neutral-background-1-hover); } .demoIcon { width: 48px; height: 48px; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css index 62836e0ba07879..e72f783d92ea8e 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateDefault.module.css @@ -20,9 +20,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-horizontal-l); gap: var(--spacing-vertical-l); } @@ -34,11 +34,11 @@ } .sectionHeader { - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - color: var(--colorNeutralForeground2); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + color: var(--color-neutral-foreground-2); margin-bottom: var(--spacing-vertical-xs); - border-bottom: var(--stroke-width-thin) solid var(--colorNeutralStroke2); + border-bottom: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); padding-bottom: var(--spacing-vertical-xs); } @@ -71,15 +71,15 @@ } .sliderLabel { - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightMedium); - color: var(--colorNeutralForeground1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-medium); + color: var(--color-neutral-foreground-1); } .valueDisplay { - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground2); - font-family: var(--fontFamilyMonospace); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-2); + font-family: var(--font-monospace); } .sliderHeader { diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css index 7877cc67e0702a..c7f6cbb60246e2 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.module.css @@ -22,9 +22,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } @@ -41,8 +41,8 @@ } .item { - background-color: var(--colorBrandBackground); - border: var(--stroke-width-thicker) solid var(--colorTransparentStroke); + background-color: var(--color-brand-background); + border: var(--stroke-width-thicker) solid var(--color-transparent-stroke); border-radius: 50%; width: 100px; height: 100px; diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css index e371a1a973054b..0b7f6921f06b19 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleDefault.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css index 1a6eaa97897656..afdc9d44e9c9e1 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleRelaxed.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css index bf5485ddc383b1..b9790eaf1cb11f 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleSnappy.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.module.css index 22ebcfc2fc6576..332ca27ba8fdf9 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideCardsDemo.module.css @@ -31,5 +31,5 @@ display: flex; align-items: center; justify-content: center; - font-size: var(--fontSizeBase600); + font-size: var(--text-base-600); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css index be0d586d88b609..509a02959ee93c 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDefault.module.css @@ -18,9 +18,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css index 29916068b5a38a..3a0eda85ba8920 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideDirections.module.css @@ -15,8 +15,8 @@ align-items: center; justify-content: center; gap: 15px; - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 20px; flex: 0 0 auto; } @@ -30,7 +30,7 @@ .directionButton { height: 44px; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); min-width: 44px; } @@ -38,19 +38,19 @@ display: flex; align-items: center; justify-content: center; - font-size: var(--fontSizeBase100); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-100); + color: var(--color-neutral-foreground-3); } .demo { - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); + border-radius: var(--radius-medium); padding: 20px; position: relative; display: flex; align-items: center; justify-content: center; - background-color: var(--colorNeutralBackground2); + background-color: var(--color-neutral-background-2); min-width: 300px; min-height: 200px; flex: 1 1 300px; @@ -59,10 +59,10 @@ .card { padding: 20px; - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow8); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-8); max-width: 300px; text-align: center; } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css index b9b40418c05da7..1f5862ac6f71c7 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideRelaxed.module.css @@ -22,9 +22,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css index 634d99ab37aeba..a145bdb0cbfe60 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/Slide/SlideSnappy.module.css @@ -22,9 +22,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: var(--spacing-vertical-m-nudge); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css index 3053c45bbf9f73..22eefa986c81bf 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerBouncingDots.module.css @@ -13,10 +13,10 @@ flex-direction: column; gap: var(--spacing-vertical-m); padding: var(--spacing-horizontal-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow8); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-8); } .controlsRow { @@ -39,15 +39,15 @@ flex-direction: column; gap: var(--spacing-vertical-m); padding: var(--spacing-horizontal-l); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); } .spinnerTitle { - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - color: var(--colorNeutralForeground1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + color: var(--color-neutral-foreground-1); margin: 0; } @@ -69,5 +69,5 @@ width: 12px; height: 12px; border-radius: 50%; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css index 1bbf9e6bb0f920..972f59a85368aa 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerDelayMode.module.css @@ -12,9 +12,9 @@ gap: var(--spacing-horizontal-m); align-items: center; padding: var(--spacing-vertical-m); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); - border-radius: var(--borderRadiusSmall); - background-color: var(--colorNeutralBackground2); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); + border-radius: var(--radius-small); + background-color: var(--color-neutral-background-2); } .comparison { @@ -30,9 +30,9 @@ } .sectionTitle { - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - color: var(--colorNeutralForeground1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + color: var(--color-neutral-foreground-1); margin-bottom: var(--spacing-vertical-xs); } @@ -49,25 +49,25 @@ align-items: flex-start; gap: var(--spacing-horizontal-s); padding: var(--spacing-vertical-m); - border: var(--stroke-width-thin) dashed var(--colorNeutralStroke2); - border-radius: var(--borderRadiusSmall); + border: var(--stroke-width-thin) dashed var(--color-neutral-stroke-2); + border-radius: var(--radius-small); min-height: 80px; position: relative; } .description { - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); margin-top: var(--spacing-vertical-xs); } .badge { - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightMedium); - color: var(--colorBrandForeground1); - background-color: var(--colorBrandBackground2); + font-size: var(--text-base-100); + font-weight: var(--font-weight-medium); + color: var(--color-brand-foreground-1); + background-color: var(--color-brand-background-2); padding: var(--spacing-vertical-xxs) var(--spacing-horizontal-xs); - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); position: absolute; top: var(--spacing-vertical-xs); right: var(--spacing-horizontal-xs); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css index 28edc89dc316ae..fdbe2140ff782e 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerExpandableContainer.module.css @@ -24,8 +24,8 @@ } .sliderLabel { - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); min-width: 90px; flex-shrink: 0; } @@ -35,9 +35,9 @@ } .listContainer { - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); } .list { @@ -50,7 +50,7 @@ .item { display: flex; align-items: center; - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); min-height: 36px; justify-content: flex-start; } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css index dc03effb879eef..b98f4896bb0a2d 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerHideMode.module.css @@ -12,9 +12,9 @@ gap: var(--spacing-horizontal-m); align-items: center; padding: var(--spacing-vertical-m); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); - border-radius: var(--borderRadiusSmall); - background-color: var(--colorNeutralBackground2); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); + border-radius: var(--radius-small); + background-color: var(--color-neutral-background-2); } .comparison { @@ -30,9 +30,9 @@ } .sectionTitle { - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - color: var(--colorNeutralForeground1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + color: var(--color-neutral-foreground-1); margin-bottom: var(--spacing-vertical-xs); } @@ -42,25 +42,25 @@ align-items: flex-start; gap: var(--spacing-horizontal-s); padding: var(--spacing-vertical-m); - border: var(--stroke-width-thin) dashed var(--colorNeutralStroke2); - border-radius: var(--borderRadiusSmall); + border: var(--stroke-width-thin) dashed var(--color-neutral-stroke-2); + border-radius: var(--radius-small); min-height: 80px; position: relative; } .description { - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); margin-top: var(--spacing-vertical-xs); } .badge { - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightMedium); - color: var(--colorBrandForeground1); - background-color: var(--colorBrandBackground2); + font-size: var(--text-base-100); + font-weight: var(--font-weight-medium); + color: var(--color-brand-foreground-1); + background-color: var(--color-brand-background-2); padding: var(--spacing-vertical-xxs) var(--spacing-horizontal-xs); - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); position: absolute; top: var(--spacing-vertical-xs); right: var(--spacing-horizontal-xs); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css index b88a44456098e0..7a5f1558048776 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerItemDelay.module.css @@ -13,9 +13,9 @@ flex-direction: column; grid-area: controls; gap: var(--spacing-vertical-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-width: 300px; } @@ -40,8 +40,8 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundInverted); + background-color: var(--color-neutral-background-static); + color: var(--color-neutral-foreground-inverted); width: 40px; height: 100px; margin: var(--spacing-horizontal-xxs); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css index fd6e6a846be8ba..e64fc0f8112626 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPlainElements.module.css @@ -12,9 +12,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -32,8 +32,8 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundInverted); + background-color: var(--color-neutral-background-static); + color: var(--color-neutral-foreground-inverted); width: 40px; height: 100px; margin: var(--spacing-horizontal-xxs); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css index 5815722a193320..f8ff82d037621f 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerPresence.module.css @@ -12,9 +12,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -32,8 +32,8 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundInverted); + background-color: var(--color-neutral-background-static); + color: var(--color-neutral-foreground-inverted); width: 40px; height: 100px; margin: var(--spacing-horizontal-xxs); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css index 2a6d8ed5d60d90..8586f074674751 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerReversed.module.css @@ -12,9 +12,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -32,8 +32,8 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundInverted); + background-color: var(--color-neutral-background-static); + color: var(--color-neutral-foreground-inverted); width: 40px; height: 100px; margin: var(--spacing-horizontal-xxs); diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css index 508f831d9a6004..ad3b2d873afb94 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerSpinners.module.css @@ -13,10 +13,10 @@ flex-direction: column; gap: var(--spacing-vertical-m); padding: var(--spacing-horizontal-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow8); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-8); } .spinnerSection { @@ -24,15 +24,15 @@ flex-direction: column; gap: var(--spacing-vertical-m); padding: var(--spacing-horizontal-l); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); } .spinnerTitle { - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - color: var(--colorNeutralForeground1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + color: var(--color-neutral-foreground-1); margin: 0; } @@ -69,8 +69,8 @@ .arc { position: absolute; border-radius: 50%; - border-top-color: var(--colorBrandBackground); - border-bottom-color: var(--colorBrandBackground); + border-top-color: var(--color-brand-background); + border-bottom-color: var(--color-brand-background); } .arc1 { @@ -83,14 +83,14 @@ width: 45px; height: 45px; border: 4px solid transparent; - border-top-color: var(--colorBrandBackground); + border-top-color: var(--color-brand-background); } .arc3 { width: 30px; height: 30px; border: 4px solid transparent; - border-top-color: var(--colorBrandBackground); + border-top-color: var(--color-brand-background); } .dotOrbitSpinner { @@ -107,7 +107,7 @@ width: 12px; height: 12px; border-radius: 50%; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); transform: translate(-50%, -50%) translateY(-22px); transform-origin: center center; will-change: transform; @@ -123,8 +123,8 @@ .growingBar { width: 6px; height: 100%; - background-color: var(--colorBrandBackground); - border-radius: var(--borderRadiusSmall); + background-color: var(--color-brand-background); + border-radius: var(--radius-small); } .slidingBlocksSpinner { @@ -136,6 +136,6 @@ .slidingBlock { width: 16px; height: 16px; - background-color: var(--colorBrandBackground); - border-radius: var(--borderRadiusSmall); + background-color: var(--color-brand-background); + border-radius: var(--radius-small); } diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css index df514deb4de5d0..50fe180ade55ee 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerIn.module.css @@ -14,10 +14,10 @@ flex-direction: column; gap: 12px; padding: 16px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow8); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-8); } .userCard { diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css index 4ee504719e6b54..ff2b425d9e84b3 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerStaggerOut.module.css @@ -14,10 +14,10 @@ flex-direction: column; gap: 12px; padding: 16px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow8); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-8); } .userCard { diff --git a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css index b4440ce30d0905..80c9723dd951ef 100644 --- a/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css +++ b/packages/react-components/react-motion-components-preview/stories/src/choreography/Stagger/StaggerText.module.css @@ -13,9 +13,9 @@ display: flex; flex-direction: column; grid-area: controls; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -39,7 +39,7 @@ font-size: 100px; color: transparent; margin: var(--spacing-horizontal-xxs); - -webkit-text-stroke: 4px var(--tokens-colorBrandStroke2, var(--colorBrandStroke2)); + -webkit-text-stroke: 4px var(--tokens-colorBrandStroke2, var(--color-brand-stroke-2)); -webkit-filter: blur(1.2px); filter: blur(1.2px); } From 7397ee5732542f60ca0f7351b5cdebc82adde2a3 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:43:56 -0700 Subject: [PATCH 615/640] refactor(theming): old->canonical token var sweep 1/8 (Phase 2a) Areas: apps/public-docsite-v9 Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../TabListOverflow.module.css | 2 +- .../Concepts/Accessibility/FocusIndicator.mdx | 6 +-- .../Migration/FromV0/Components/Avatar.mdx | 2 +- .../Migration/FromV0/Components/Button.mdx | 2 +- .../Migration/FromV0/Components/Card/Card.mdx | 2 +- .../Migration/FromV0/Components/Header.mdx | 2 +- .../IconCatalog/ComparisonTile.module.css | 8 ++-- .../Migration/FromV0/Components/Loader.mdx | 2 +- .../Migration/FromV0/Components/Popup.mdx | 2 +- .../Migration/FromV0/Components/Slider.mdx | 2 +- .../FromV0/Components/SplitButton.mdx | 2 +- .../Migration/FromV0/Components/Tooltip.mdx | 2 +- .../Migration/FromV0/migrate-styles.mdx | 2 +- .../Image/FitDifferences.module.css | 4 +- .../FromV8/Components/Image/Image.mdx | 2 +- .../Migration/FromV8/Components/Theme.mdx | 2 +- .../Migration/KeepingDesignConsistent.mdx | 2 +- .../PositioningListenToUpdates.module.css | 10 ++-- ...PositioningOverflowBoundaryRect.module.css | 12 ++--- .../src/Concepts/SSR/Nextjs.mdx | 4 +- .../src/Concepts/Slots/SlotSketch.module.css | 46 +++++++++---------- .../src/Concepts/Slots/Slots.mdx | 2 +- .../src/Concepts/StylingComponents.mdx | 8 ++-- .../src/Concepts/Theming.mdx | 6 +-- .../components/WhatsNewBoxes.module.css | 2 +- .../useFocusFinders/Default.module.css | 14 +++--- .../useFocusFinders/FindAllWhere.module.css | 14 +++--- .../useFocusFinders/FindFirst.module.css | 4 +- .../useFocusFinders/FindLast.module.css | 4 +- .../useFocusFinders/FindNext.module.css | 4 +- .../useFocusFinders/FindPrevious.module.css | 4 +- .../focusableGroup.module.css | 4 +- .../useModalAttributes/Default.module.css | 4 +- .../InertFocusTrap.module.css | 4 +- .../useObservedElement/Default.module.css | 4 +- .../MultipleNames.module.css | 4 +- .../useUncontrolledFocus/Default.module.css | 6 +-- .../createCSSRuleFromThemeDefault.module.css | 8 ++-- ...createCSSRuleFromThemeSwitching.module.css | 8 ++-- 39 files changed, 111 insertions(+), 111 deletions(-) diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/TabListOverflow.module.css b/apps/public-docsite-v9/src/AccessibilityScenarios/TabListOverflow.module.css index 635fb129aff7bb..e32b574a5421b6 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/TabListOverflow.module.css +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/TabListOverflow.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .settings { - background-color: var(--colorNeutralBackground2); + background-color: var(--color-neutral-background-2); overflow: hidden; padding: 5px; z-index: 0; diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx index 169020d41ca837..cac4fc35338241 100644 --- a/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx +++ b/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.mdx @@ -95,8 +95,8 @@ same rule to customize width, colour, radius or offset: ```css .focus-indicator { --fui-focus-outline-width: 2px; - --fui-focus-outline-color: var(--colorStrokeFocus2); - --fui-focus-outline-radius: var(--borderRadiusMedium); + --fui-focus-outline-color: var(--color-stroke-focus-2); + --fui-focus-outline-radius: var(--radius-medium); --fui-focus-outline-offset: 0px; } ``` @@ -136,7 +136,7 @@ not apply `fui-focus-outline`: @variant focus-visible-fui { border-bottom-color: transparent; - text-decoration-color: var(--colorStrokeFocus2); + text-decoration-color: var(--color-stroke-focus-2); text-decoration-line: underline; text-decoration-style: double; } diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.mdx index af3c9a5e60b100..8f5af3b3efbf50 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Avatar.mdx @@ -75,7 +75,7 @@ After: @layer fui.components.l4 { .custom-avatar:focus { - outline-color: var(--colorNeutralBackground3Pressed); + outline-color: var(--color-neutral-background-3-pressed); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.mdx index 7263a49a5c7282..a0b60fb8510dc2 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Button.mdx @@ -101,7 +101,7 @@ After: @layer fui.components.l4 { .action-button { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.mdx index 45691be692d1b6..c6a976ad15aa6d 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.mdx @@ -71,7 +71,7 @@ After: @layer fui.components.l4 { .action-card { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.mdx index 629b356e749c78..ed03c0aafd3a6f 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Header.mdx @@ -128,7 +128,7 @@ After: @layer fui.components.l4 { .main-header { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css index c4e1c5950bbb8d..51de134d7a1793 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/IconCatalog/ComparisonTile.module.css @@ -9,13 +9,13 @@ max-height: 105px; padding: 5px 0px; gap: 10px; - border-color: var(--colorNeutralStroke1); + border-color: var(--color-neutral-stroke-1); border-style: solid; border-width: var(--stroke-width-thin); } .root:hover { - background-color: var(--colorNeutralBackground2Hover); + background-color: var(--color-neutral-background-2-hover); } .badge { @@ -25,11 +25,11 @@ } .warning { - color: var(--colorPaletteDarkOrangeBackground3); + color: var(--color-palette-dark-orange-background-3); } .success { - color: var(--colorPaletteGreenBackground3); + color: var(--color-palette-green-background-3); } .v0 { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx index 64e49bb18309a1..511f8c6cb4093e 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Loader.mdx @@ -134,6 +134,6 @@ const Component = () => { /* Component.module.css */ .v0SpinnerLabel :global(.group\/fui-label) { font-size: 14px; - font-weight: var(--fontWeightMedium); + font-weight: var(--font-weight-medium); } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.mdx index 6f7ae68928d699..3c886b9461aa2a 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Popup.mdx @@ -106,7 +106,7 @@ After: @layer fui.components.l4 { .custom-popup { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.mdx index 7d7cbabdc4673b..ba7177df85821e 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Slider.mdx @@ -80,7 +80,7 @@ After: @layer fui.components.l4 { .is-volume-control { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.mdx index 00dd5d01ee783e..886adda0e0ab32 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/SplitButton.mdx @@ -136,7 +136,7 @@ After: @layer fui.components.l4 { .action-button { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.mdx index 042a8815cb30dd..cbf32d7088d611 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Tooltip.mdx @@ -98,7 +98,7 @@ After: @layer fui.components.l4 { .custom-tooltip { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx index 84611948c1b316..09379abb835a10 100755 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/migrate-styles.mdx @@ -12,7 +12,7 @@ React-northstar provides a flexible styling and theming infrastructure and diffe Create or modify a _COMPONENT_NAME.module.css_ file next to your component and move your custom styles into it as plain CSS rules, referencing theme tokens as custom properties such as -`var(--colorNeutralForeground1)`. Then import the generated class map and pass the class names +`var(--color-neutral-foreground-1)`. Then import the generated class map and pass the class names through the `className` prop, which is available on the component itself and on each of its slots. If this is your first time styling a v9 component, please check [this guide on how to style components](http://aka.ms/fluentui-storybook/?path=/docs/concepts-developer-styling-components--docs) on fluentui docmentation site. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/FitDifferences.module.css b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/FitDifferences.module.css index 21ac002c1d810d..ad5e9905b1db14 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/FitDifferences.module.css +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/FitDifferences.module.css @@ -40,7 +40,7 @@ .imageV8 { display: block; position: absolute; - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); left: 50%; top: 50%; transform: translate(-50%, -50%); @@ -59,7 +59,7 @@ .caption { font-size: 12px !important; - line-height: var(--lineHeightBase200); + line-height: var(--leading-base-200); margin-top: 8px !important; text-align: center; } diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx index 05bdc132ab7393..a26e5406d9840e 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Image/Image.mdx @@ -151,7 +151,7 @@ const Component = () => { @layer fui.components.l4 { .bordered { - border: var(--stroke-width-thin) solid var(--colorNeutralStroke2); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-2); } } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.mdx index d2c5dd94917f62..f9539d310ba6fb 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Theme.mdx @@ -56,7 +56,7 @@ Style objects could be built by parameterized functions taking theme object or o In v9, styles are just CSS. Write them wherever your application already writes CSS — a stylesheet, a CSS Module, Tailwind — and reference theme values as custom properties -(`var(--colorNeutralBackground1Hover)`). Nothing is computed at render time. +(`var(--color-neutral-background-1-hover)`). Nothing is computed at render time. ### mergeStyles -> the cascade diff --git a/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.mdx b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.mdx index a2452ae377b0b6..5fdc6c4efcdb5a 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.mdx @@ -129,7 +129,7 @@ A new style hook is substituted for `useButtonStyle`. ```css /* MyButton.module.css */ .root { - background: var(--colorNeutralBackground2); + background: var(--color-neutral-background-2); /* ... */ } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Positioning/PositioningListenToUpdates.module.css b/apps/public-docsite-v9/src/Concepts/Positioning/PositioningListenToUpdates.module.css index 15a4be638bed43..1996c70a236514 100644 --- a/apps/public-docsite-v9/src/Concepts/Positioning/PositioningListenToUpdates.module.css +++ b/apps/public-docsite-v9/src/Concepts/Positioning/PositioningListenToUpdates.module.css @@ -17,19 +17,19 @@ } .logLabel { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); width: fit-content; - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); padding: 2px 12px; } .log { overflow-y: auto; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); position: relative; min-width: 200px; height: 200px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 12px; } diff --git a/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css b/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css index a75a92a5b83a6f..dbc8f96e67475a 100644 --- a/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css +++ b/apps/public-docsite-v9/src/Concepts/Positioning/PositioningOverflowBoundaryRect.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .area { - border: 2px solid var(--colorStatusDangerBackground3); + border: 2px solid var(--color-status-danger-background-3); padding: 60px 20px 20px 20px; width: 300px; height: 300px; @@ -19,14 +19,14 @@ padding: var(--spacing-horizontal-m-nudge) var(--spacing-horizontal-s); top: 0; left: 0; - color: var(--colorStatusDangerBackground1); - background-color: var(--colorStatusDangerBackground3); + color: var(--color-status-danger-background-1); + background-color: var(--color-status-danger-background-3); } .boundary { width: 320px; height: 320px; - outline: 2px solid var(--colorBrandBackground); + outline: 2px solid var(--color-brand-background); position: absolute; top: 50px; left: 10px; @@ -39,6 +39,6 @@ padding: var(--spacing-horizontal-m-nudge) var(--spacing-horizontal-s); top: 0; left: 0; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.mdx b/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.mdx index 9dcd4486f3701d..a9a2a045c183fb 100644 --- a/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.mdx +++ b/apps/public-docsite-v9/src/Concepts/SSR/Nextjs.mdx @@ -56,8 +56,8 @@ export default MyApp; display: flex; flex-direction: column; width: 200px; - border: 2px dashed var(--colorPaletteBerryBorder2); - border-radius: var(--borderRadiusMedium); + border: 2px dashed var(--color-palette-berry-border-2); + border-radius: var(--radius-medium); gap: 5px; padding: 10px; } diff --git a/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.module.css b/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.module.css index e92569bbc88783..4075324a7d1b54 100644 --- a/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.module.css +++ b/apps/public-docsite-v9/src/Concepts/Slots/SlotSketch.module.css @@ -19,7 +19,7 @@ display: flex; align-items: center; justify-items: space-between; - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); padding: 5px 20px; } @@ -30,7 +30,7 @@ justify-content: center; justify-items: center; margin: 5px; - border-color: var(--colorNeutralStroke2); + border-color: var(--color-neutral-stroke-2); border-style: dotted; border-width: 3px; } @@ -46,10 +46,10 @@ } .title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } .content { @@ -57,10 +57,10 @@ align-items: center; justify-items: space-between; flex-grow: 1; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); padding: 20px; } @@ -68,8 +68,8 @@ display: flex; align-items: center; justify-items: center; - border-radius: var(--borderRadiusMedium); - border-color: var(--colorNeutralStroke2); + border-radius: var(--radius-medium); + border-color: var(--color-neutral-stroke-2); border-style: solid; border-width: 1px; } @@ -80,7 +80,7 @@ .contentSlot { display: block; - border-color: var(--colorNeutralStroke2); + border-color: var(--color-neutral-stroke-2); border-style: dotted; border-width: 3px; } @@ -92,19 +92,19 @@ } .urlBefore { - background-color: var(--colorNeutralBackground3); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + background-color: var(--color-neutral-background-3); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); padding: 10px 5px; } .urlAfter { - background-color: var(--colorNeutralBackground3); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + background-color: var(--color-neutral-background-3); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); padding: 10px 5px; } diff --git a/apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx b/apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx index 38e4c87c0d39d4..74ddf9d494d63f 100644 --- a/apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx +++ b/apps/public-docsite-v9/src/Concepts/Slots/Slots.mdx @@ -141,7 +141,7 @@ The `Avatar` badge slot supports a `className`, allowing the badge style to be c ```css /* BusyBrandAvatar.module.css */ .badge { - color: var(--colorBrandStroke1); + color: var(--color-brand-stroke-1); } ``` diff --git a/apps/public-docsite-v9/src/Concepts/StylingComponents.mdx b/apps/public-docsite-v9/src/Concepts/StylingComponents.mdx index 132197ce9501f9..4cf959bdc669fb 100644 --- a/apps/public-docsite-v9/src/Concepts/StylingComponents.mdx +++ b/apps/public-docsite-v9/src/Concepts/StylingComponents.mdx @@ -28,7 +28,7 @@ to the component: ```css /* MyForm.module.css */ .submit { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 9999px; } ``` @@ -162,7 +162,7 @@ styling globally is through theme tokens, which are CSS custom properties. Refer ```css .root { display: flex; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } ``` @@ -176,7 +176,7 @@ them: ```js import { tokens } from '@fluentui/react-components'; -const style = { color: tokens.colorNeutralForeground3 }; // → 'var(--colorNeutralForeground3)' +const style = { color: tokens.colorNeutralForeground3 }; // → 'var(--color-neutral-foreground-3)' ``` For more details, see [Theming](?path=/docs/concepts-developer-theming--docs). @@ -210,7 +210,7 @@ Token-taking APIs (`classList.contains`, `getElementsByClassName`) need no escap /* ✅ */ .root { - color: var(--colorPaletteRedForeground1); + color: var(--color-palette-red-foreground-1); } ``` diff --git a/apps/public-docsite-v9/src/Concepts/Theming.mdx b/apps/public-docsite-v9/src/Concepts/Theming.mdx index 5c23b8db734a32..ab5f766436e8b8 100644 --- a/apps/public-docsite-v9/src/Concepts/Theming.mdx +++ b/apps/public-docsite-v9/src/Concepts/Theming.mdx @@ -43,7 +43,7 @@ A theme is delivered as CSS custom properties, so a stylesheet references them d } .root-primary { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } ``` @@ -62,14 +62,14 @@ reference: ```jsx import { tokens } from '@fluentui/react-components'; -tokens.colorNeutralForeground3; // === 'var(--colorNeutralForeground3)' +tokens.colorNeutralForeground3; // === 'var(--color-neutral-foreground-3)' ``` For more details, see [Styling components](?path=/docs/concepts-developer-styling-components--docs). ### Token names are the public contract -Token custom-property names (`--colorNeutralForeground3`, `--spacing-horizontal-m`, …) are a supported +Token custom-property names (`--color-neutral-foreground-3`, `--spacing-horizontal-m`, …) are a supported public surface: Fluent's own component CSS references them, and so should yours. What is _not_ public is anything below that — the hashed class names on component internals, and the exact rules inside a component's stylesheet. diff --git a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.module.css b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.module.css index 09dc5bd08b25d6..68d068e892d732 100644 --- a/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.module.css +++ b/apps/public-docsite-v9/src/Concepts/components/WhatsNewBoxes.module.css @@ -42,7 +42,7 @@ .box { margin-bottom: 16px; - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); border-radius: 16px; } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/Default.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/Default.module.css index 6d5946d6be9447..8db32eb3de2dc6 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/Default.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/Default.module.css @@ -5,16 +5,16 @@ display: flex; gap: 5px; padding: 10px; - border: 2px solid var(--colorBrandStroke1); - border-bottom-left-radius: var(--borderRadiusMedium); - border-bottom-right-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-brand-stroke-1); + border-bottom-left-radius: var(--radius-medium); + border-bottom-right-radius: var(--radius-medium); } .note { display: block; - background-color: var(--colorBrandStroke1); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-stroke-1); + color: var(--color-neutral-foreground-on-brand); padding: 4px; - border-top-left-radius: var(--borderRadiusMedium); - border-top-right-radius: var(--borderRadiusMedium); + border-top-left-radius: var(--radius-medium); + border-top-right-radius: var(--radius-medium); } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindAllWhere.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindAllWhere.module.css index 5024045b7d1805..dc669b50724900 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindAllWhere.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindAllWhere.module.css @@ -5,16 +5,16 @@ display: flex; gap: 5px; padding: 10px; - border: 2px solid var(--colorBrandStroke1); - border-bottom-left-radius: var(--borderRadiusMedium); - border-bottom-right-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-brand-stroke-1); + border-bottom-left-radius: var(--radius-medium); + border-bottom-right-radius: var(--radius-medium); } .note { display: block; - background-color: var(--colorBrandStroke1); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-stroke-1); + color: var(--color-neutral-foreground-on-brand); padding: 4px; - border-top-left-radius: var(--borderRadiusMedium); - border-top-right-radius: var(--borderRadiusMedium); + border-top-left-radius: var(--radius-medium); + border-top-right-radius: var(--radius-medium); } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindFirst.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindFirst.module.css index ece6ed43b17c24..9d47597a47a46c 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindFirst.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindFirst.module.css @@ -6,6 +6,6 @@ display: flex; gap: 5px; padding: 10px; - border: 2px solid var(--colorBrandStroke1); - border-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-brand-stroke-1); + border-radius: var(--radius-medium); } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindLast.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindLast.module.css index 6637471518dab6..83cd5e2712d005 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindLast.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindLast.module.css @@ -6,6 +6,6 @@ display: flex; gap: 5px; padding: 10px; - border: 2px solid var(--colorBrandStroke1); - border-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-brand-stroke-1); + border-radius: var(--radius-medium); } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindNext.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindNext.module.css index 5a6c3706de7a3c..f3250277af3b5c 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindNext.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindNext.module.css @@ -6,6 +6,6 @@ display: flex; gap: 5px; padding: 10px; - border: 2px solid var(--colorBrandStroke1); - border-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-brand-stroke-1); + border-radius: var(--radius-medium); } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindPrevious.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindPrevious.module.css index e200b32664d421..c736349b3f6aa0 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindPrevious.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusFinders/FindPrevious.module.css @@ -6,6 +6,6 @@ display: flex; gap: 5px; padding: 10px; - border: 2px solid var(--colorBrandStroke1); - border-radius: var(--borderRadiusMedium); + border: 2px solid var(--color-brand-stroke-1); + border-radius: var(--radius-medium); } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusableGroup/focusableGroup.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusableGroup/focusableGroup.module.css index 4d67c439b02e4e..e7db343a103c4b 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusableGroup/focusableGroup.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useFocusableGroup/focusableGroup.module.css @@ -30,8 +30,8 @@ .container { @apply relative flex gap-5 p-10; - background-color: var(--colorBrandBackground2); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background-2); + border-radius: var(--radius-medium); /* * from `...createFocusOutlineStyle()`. diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/Default.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/Default.module.css index 047a3c7ae8bf95..af89cb993073c1 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/Default.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/Default.module.css @@ -3,13 +3,13 @@ .dialog { position: fixed; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); inset: 0; padding: 10px; margin: auto; border: none; overflow: unset; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); width: 450px; height: 200px; display: flex; diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/InertFocusTrap.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/InertFocusTrap.module.css index 48fac92a37f683..765e75396d5023 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/InertFocusTrap.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useModalAttributes/InertFocusTrap.module.css @@ -3,13 +3,13 @@ .dialog { position: fixed; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); inset: 0; padding: 10px; margin: auto; border: none; overflow: unset; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); width: 450px; height: 200px; display: flex; diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/Default.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/Default.module.css index 5ad8636a357c6d..47100a8f0cfee8 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/Default.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/Default.module.css @@ -11,7 +11,7 @@ display: flex; flex-direction: column; gap: 10px; - background-color: var(--colorBrandBackground2); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background-2); + border-radius: var(--radius-medium); padding: 10px; } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/MultipleNames.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/MultipleNames.module.css index 57b25d4eab6179..fa33da70b9fd36 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/MultipleNames.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useObservedElement/MultipleNames.module.css @@ -11,7 +11,7 @@ display: flex; flex-direction: column; gap: 10px; - background-color: var(--colorBrandBackground2); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background-2); + border-radius: var(--radius-medium); padding: 10px; } diff --git a/apps/public-docsite-v9/src/Utilities/FocusManagement/useUncontrolledFocus/Default.module.css b/apps/public-docsite-v9/src/Utilities/FocusManagement/useUncontrolledFocus/Default.module.css index d9703f968c6615..bf14ee21dc44d4 100644 --- a/apps/public-docsite-v9/src/Utilities/FocusManagement/useUncontrolledFocus/Default.module.css +++ b/apps/public-docsite-v9/src/Utilities/FocusManagement/useUncontrolledFocus/Default.module.css @@ -14,7 +14,7 @@ padding: 20px 10px 10px 10px; position: relative; width: 400px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); } .focusTrapZone::after { @@ -28,8 +28,8 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } .controls { diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css index b7aeb82e6f90f9..980c2e6e7df3a2 100644 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css +++ b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css @@ -2,13 +2,13 @@ * Token references are the Fluent theme's CSS variables. */ .colorBrandBackground { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); } .colorBrandBackground2 { - background-color: var(--colorBrandBackground2); - color: var(--colorNeutralForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-neutral-foreground-2); } .box { diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css index eb701bd005c918..477ca5558d5e70 100644 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css +++ b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css @@ -2,13 +2,13 @@ * Token references are the Fluent theme's CSS variables. */ .colorBrandBackground { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); } .colorBrandBackground2 { - background-color: var(--colorBrandBackground2); - color: var(--colorNeutralForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-neutral-foreground-2); } .box { From aa4d63ddb3d645b740a67b3574c20e5297a47b61 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:43:58 -0700 Subject: [PATCH 616/640] refactor(theming): old->canonical token var sweep 2/8 (Phase 2a) Areas: apps/vr-tests-react-components, migration, packages/react-components/react-accordion, packages/react-components/react-aria, packages/react-components/react-avatar, packages/react-components/react-badge, packages/react-components/react-breadcrumb, packages/react-components/react-button, packages/react-components/react-calendar-compat, packages/react-components/react-card Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../src/stories/Badge/utils.module.css | 10 +- .../src/stories/Card/Card.module.css | 2 +- .../src/stories/Link/utils.module.css | 4 +- .../src/stories/Portal.module.css | 4 +- .../src/stories/Positioning/utils.module.css | 10 +- .../src/stories/TagPicker.module.css | 6 +- .../src/stories/Tooltip/utils.module.css | 8 +- .../griffel-to-tailwind/CONVERSION_GUIDE.md | 6 +- .../griffel-to-tailwind/reports/DECISIONS.md | 59 ++++ .../AccordionHeader.module.css | 34 +- .../AccordionMotionCustom.module.css | 4 +- .../AriaLiveAnnouncerDefault.module.css | 2 +- ...seTypingAnnounceContentEditable.module.css | 2 +- .../UseTypingAnnounceFiltering.module.css | 4 +- .../src/components/Avatar/Avatar.module.css | 238 +++++++------- .../AvatarGroup/AvatarGroup.module.css | 2 +- .../AvatarGroupItem.module.css | 18 +- .../AvatarGroupPopover.module.css | 90 +++--- .../src/components/Badge/Badge.module.css | 224 ++++++------- .../PresenceBadge/PresenceBadge.module.css | 26 +- .../__snapshots__/PresenceBadge.test.tsx.snap | 5 +- .../Badge/BadgeColorVsAppearance.module.css | 2 +- .../BreadcrumbButton.module.css | 64 ++-- .../BreadcrumbItem/BreadcrumbItem.module.css | 2 +- .../BreadcrumbWithOverflow.module.css | 2 +- .../src/components/Button/Button.module.css | 208 ++++++------- .../CompoundButton/CompoundButton.module.css | 50 +-- .../MenuButton/MenuButton.module.css | 38 +-- .../SplitButton/SplitButton.module.css | 24 +- .../ToggleButton/ToggleButton.module.css | 162 +++++----- .../src/Button/ButtonLoading.module.css | 8 +- .../components/Calendar/Calendar.module.css | 20 +- .../CalendarDay/CalendarDay.module.css | 42 +-- .../CalendarDayGrid.module.css | 86 ++--- .../CalendarPicker/CalendarPicker.module.css | 82 ++--- .../src/components/Card/Card.module.css | 294 +++++++++--------- .../stories/src/Card/CardAction.module.css | 4 +- .../src/Card/CardAppearance.module.css | 2 +- .../src/Card/CardOrientation.module.css | 2 +- .../src/Card/CardSelectable.module.css | 8 +- .../Card/CardSelectableIndicator.module.css | 8 +- .../stories/src/Card/CardSize.module.css | 2 +- .../stories/src/Card/CardTemplates.module.css | 2 +- 43 files changed, 965 insertions(+), 905 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Badge/utils.module.css b/apps/vr-tests-react-components/src/stories/Badge/utils.module.css index 2c5139d107a03e..9b76123a9abac4 100644 --- a/apps/vr-tests-react-components/src/stories/Badge/utils.module.css +++ b/apps/vr-tests-react-components/src/stories/Badge/utils.module.css @@ -21,7 +21,7 @@ } .brandContainer { - background-color: var(--colorBrandBackgroundStatic); + background-color: var(--color-brand-background-static); } .groupSet { @@ -39,10 +39,10 @@ } .groupLabel { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-400); } .row { diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.module.css b/apps/vr-tests-react-components/src/stories/Card/Card.module.css index 4322ce8e5e321b..723038922b4229 100644 --- a/apps/vr-tests-react-components/src/stories/Card/Card.module.css +++ b/apps/vr-tests-react-components/src/stories/Card/Card.module.css @@ -14,5 +14,5 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } diff --git a/apps/vr-tests-react-components/src/stories/Link/utils.module.css b/apps/vr-tests-react-components/src/stories/Link/utils.module.css index 47a6dc8eb32cc6..dc6fe968ea372a 100644 --- a/apps/vr-tests-react-components/src/stories/Link/utils.module.css +++ b/apps/vr-tests-react-components/src/stories/Link/utils.module.css @@ -3,10 +3,10 @@ .invertedBackground { padding: 14px; - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .brandBackground { padding: 14px; - background-color: var(--colorBrandBackgroundStatic); + background-color: var(--color-brand-background-static); } diff --git a/apps/vr-tests-react-components/src/stories/Portal.module.css b/apps/vr-tests-react-components/src/stories/Portal.module.css index 5245a051fc5ec9..33359778e8adea 100644 --- a/apps/vr-tests-react-components/src/stories/Portal.module.css +++ b/apps/vr-tests-react-components/src/stories/Portal.module.css @@ -4,9 +4,9 @@ * leave the border un-colored in the snapshot. */ .canary { - border-color: var(--colorPaletteGreenBackground2); + border-color: var(--color-palette-green-background-2); border-width: 5px; transition-duration: 1000s; transition-property: border; - transition-timing-function: var(--curveEasyEase); + transition-timing-function: var(--ease-easy-ease); } diff --git a/apps/vr-tests-react-components/src/stories/Positioning/utils.module.css b/apps/vr-tests-react-components/src/stories/Positioning/utils.module.css index 92072404035356..3c656be9e99476 100644 --- a/apps/vr-tests-react-components/src/stories/Positioning/utils.module.css +++ b/apps/vr-tests-react-components/src/stories/Positioning/utils.module.css @@ -12,12 +12,12 @@ .wrapper { display: flex; gap: 5px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .wrapper :global(.target) { - color: var(--colorNeutralForeground1); - background-color: var(--colorNeutralBackground1); + color: var(--color-neutral-foreground-1); + background-color: var(--color-neutral-background-1); border: 2px dashed green; width: 400px; height: 200px; @@ -57,7 +57,7 @@ background-color: inherit; background-clip: content-box; - border-bottom-left-radius: var(--borderRadiusSmall); + border-bottom-left-radius: var(--radius-small); transform: rotate(var(--fui-positioning-arrow-angle)); height: var(--fui-positioning-arrow-height); @@ -74,7 +74,7 @@ height: 100%; border: 3px solid blue; - border-bottom-left-radius: var(--borderRadiusSmall); + border-bottom-left-radius: var(--radius-small); clip-path: polygon(0% 0%, 100% 100%, 0% 100%); } diff --git a/apps/vr-tests-react-components/src/stories/TagPicker.module.css b/apps/vr-tests-react-components/src/stories/TagPicker.module.css index e09c6e68c79ebe..e409c6abdce15c 100644 --- a/apps/vr-tests-react-components/src/stories/TagPicker.module.css +++ b/apps/vr-tests-react-components/src/stories/TagPicker.module.css @@ -6,8 +6,8 @@ } .darkBG { - background-color: var(--colorNeutralBackgroundInverted); - color: var(--colorNeutralForegroundInverted2); + background-color: var(--color-neutral-background-inverted); + color: var(--color-neutral-foreground-inverted-2); margin-block: 10px; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } diff --git a/apps/vr-tests-react-components/src/stories/Tooltip/utils.module.css b/apps/vr-tests-react-components/src/stories/Tooltip/utils.module.css index adbbda8755c36d..11110881b614cb 100644 --- a/apps/vr-tests-react-components/src/stories/Tooltip/utils.module.css +++ b/apps/vr-tests-react-components/src/stories/Tooltip/utils.module.css @@ -6,14 +6,14 @@ display: flex; gap: 5px; padding: 50px 120px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .wrapper button, .wrapper :global(.target) { - color: var(--colorNeutralForeground1); - background-color: var(--colorNeutralBackground1); - border: 1px solid var(--colorNeutralStroke1); + color: var(--color-neutral-foreground-1); + background-color: var(--color-neutral-background-1); + border: 1px solid var(--color-neutral-stroke-1); } .wrapperBordered { diff --git a/migration/griffel-to-tailwind/CONVERSION_GUIDE.md b/migration/griffel-to-tailwind/CONVERSION_GUIDE.md index f642821e948bcd..6599d89bcc5994 100644 --- a/migration/griffel-to-tailwind/CONVERSION_GUIDE.md +++ b/migration/griffel-to-tailwind/CONVERSION_GUIDE.md @@ -65,7 +65,7 @@ COMPILED values, not your reading of the source. @layer fui.components.l1 { .root { @apply flex items-center; /* Tailwind utilities where 1:1 */ - font-family: var(--fontFamilyBase); /* tokens stay literal var() */ + font-family: var(--font-base); /* tokens stay literal var() */ &::before { … } @@ -75,7 +75,7 @@ COMPILED values, not your reading of the source. } @layer fui.components.l1 { - .brand { color: var(--colorBrandForeground1); } + .brand { color: var(--color-brand-foreground-1); } .subtle { … } } ``` @@ -386,7 +386,7 @@ another component's output, same rule as D2 amendment 2: } @variant group-hover/fui-switch { @variant group-disabled-control/fui-switch { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } diff --git a/migration/griffel-to-tailwind/reports/DECISIONS.md b/migration/griffel-to-tailwind/reports/DECISIONS.md index 5b905a0dca0581..c3fb1e40b10482 100644 --- a/migration/griffel-to-tailwind/reports/DECISIONS.md +++ b/migration/griffel-to-tailwind/reports/DECISIONS.md @@ -853,6 +853,65 @@ kebab rename — the remaining ~440 tokens (colors, fonts, radii, shadows, durat curves, z-index) still use camelCase CSS variables (`--colorNeutralBackground1`). A uniform kebab vocabulary across the whole token set is under consideration. +## D4 Phase-2a amendment — FULL-token-set kebab rename (closes the open question above; theming Phase 2a, 2026-08-06) + +**Closes the D4 open question.** The remaining 441 camelCase token CSS variables (colors +incl. palette, font families/sizes/weights, line heights, radii, shadows, curves, +durations, z-index) are renamed to canonical kebab-case names, option-B style: the old +names cease to exist in every shipped read path; `tokens.*` JS constants repoint (all +467 now canonical). Committed mapping: `reports/token-rename-map.md` / `.json`. + +1. **Naming = the Tailwind v4 theme key** for every family except durations: + `--color-neutral-background-1`, `--color-palette-red-background-1`, `--font-base` + (families), `--text-base-300` (sizes), `--font-weight-semibold`, `--leading-base-300`, + `--radius-medium`, `--shadow-2-brand`, `--ease-easy-ease`, `--z-index-popup` (tokens.* + keeps the value fallback: `var(--z-index-popup, 2000)`). **Durations split** (user + intent: family-consistent custom namespaces where no native namespace is worth + occupying): canonical runtime variable `--duration-fast`; `@theme` key stays what the + installed v4.3.3 utility registry reads, `--transition-duration-fast`, registered as + `var(--duration-fast)`. +2. **Utility class names: ZERO change** — the `@theme` keys were already these kebab + names; byte-compared HEAD vs new, the 467 registered keys are identical. Only the + registered VALUES changed (`var(--colorX)` → `var(--color-x)`). No module.css class + sweep needed. +3. **Task-premise correction, recorded:** unlike Phase 1's spacing/stroke (theme-invariant + and `:root`-emitted), the 441 renamed tokens are THEME-VARIANT and had NO static value + emission — FluentProvider's runtime tag was their sole value source. A rename of all + readers with a camelCase-only tag would have unstyled everything. **Resolution: + `createCSSRuleFromTheme` writes every theme entry under BOTH vocabularies** (legacy + camelCase + canonical kebab, canonical derived from the repointed `tokens.*` strings — + guaranteed lockstep, no second kebab implementation). All shipped readers use the + canonical names; the camelCase half feeds nothing shipped (interim insurance for + hand-written consumer CSS; removed with the whole tag in Phase 2b). Per-provider rule: + 459 → 918 declarations (19,215 → 39,873 chars, webLightTheme), once per provider. +4. **`@theme inline reference` adopted** (supersedes the pre-Phase-2a rejection recorded + in the generator): with runtime names equal to theme keys, every registration is + self-named; plain `inline` would emit 400+ self-referential aliases at `:root, :host` + (cycle-invalid, ~19KB dead weight — probe `.scratch/phase2a-theming/probe/`). + `reference` suppresses exactly that emission, probed byte-identical utility output; + its old rejection reason (variables nothing defines) is retired because the tag now + defines the canonical names. `dist/styles.css` is byte-stable (2,810 bytes, zero old + names, Phase-1 emission block unchanged). +5. **Sweep:** tokens.ts 441 values (scripted; unit test rewritten as an independent + canonical-derivation exact-string test over all 467 + no-camelCase regex + uniqueness; + generator drift-throw extended to the full set), react-theme-sass 433, theme package + css 12 + regenerated tokens.css, repo-wide 5,331 replacements / 438 files, residuals + zero. **Exemptions (verified):** web-components + chart-web-components + + vr-tests-web-components' WCThemeDecorator (separate system defining its own camelCase + vars); `deprecated/**` — ZERO raw references, consumes tokens only via `tokens.*` JS + (follows the repoint automatically, resolves against the dual tag); migration history + reports; the two dual-emission SSR snapshots (legacy names correct there until 2b); + removal-documenting comments. Docsite residual `--colorPaletteSilverForeground1` is + NOT a token (v0-migration doc example, dead before and after). +6. Gates: browser identity probe 2,237 checks (441 tokens × 5 assertions: canonical=theme + literal under light provider, legacy=same (dual), dark switch, HC switch, no + resolution outside providers; + Phase-1 root-resolution + 6 end-to-end utility spot + checks) — ALL PASS; full VR sweep at zero tolerance + perf E-cell — totals recorded in + `reports/theming-css-native.md` Phase 2a. + +**Follow-on: theming Phase 2b** — remove the FluentProvider runtime theme tag / JS +theming path entirely; the canonical kebab variable graph becomes the sole contract. + ## D15 — Named groups + all-lowercase generated idents (settled with user 2026-07-28) Source analysis: `reports/named-groups-design.md`. **Naming below is the user's amendment and diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css b/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css index 0f0ef810386788..8374259bf309aa 100644 --- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css +++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.module.css @@ -105,15 +105,15 @@ @layer fui.components.l1 { .root { /* from useStyles.root — root arg #2 */ - color: var(--colorNeutralForeground1); - background-color: var(--colorTransparentBackground); + color: var(--color-neutral-foreground-1); + background-color: var(--color-transparent-background); /* `margin: '0'` — nothing in this component overrides a single margin side, so the compiled shorthand is kept (CONVERSION_GUIDE §2 expands shorthands only where a longhand competes; the button's padding below is the case that does). */ @apply m-0; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* * from useStyles.rootInline — root arg #3. @@ -128,7 +128,7 @@ /* from useStyles.rootDisabled — root arg #4; re-sets `color` from arg #2 above */ @variant disabled { background-image: none; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -181,10 +181,10 @@ @apply cursor-pointer; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @apply box-border; @@ -253,23 +253,23 @@ /* 32px matches no spacing step → numeric utility (D4) */ @apply min-h-32; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } } /* from useStyles.buttonLarge — button arg #9 */ @variant size-large { & .button { - line-height: var(--lineHeightBase400); - font-size: var(--fontSizeBase400); + line-height: var(--leading-base-400); + font-size: var(--text-base-400); } } /* from useStyles.buttonExtraLarge — button arg #10 */ @variant size-extra-large { & .button { - line-height: var(--lineHeightBase500); - font-size: var(--fontSizeBase500); + line-height: var(--leading-base-500); + font-size: var(--text-base-500); } } @@ -287,8 +287,8 @@ .expand-icon { @apply flex h-full items-center; - line-height: var(--lineHeightBase500); - font-size: var(--fontSizeBase500); + line-height: var(--leading-base-500); + font-size: var(--text-base-500); } .root { @@ -317,7 +317,7 @@ .icon { @apply flex h-full items-center pe-horizontal-s; - line-height: var(--lineHeightBase500); - font-size: var(--fontSizeBase500); + line-height: var(--leading-base-500); + font-size: var(--text-base-500); } } diff --git a/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css b/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css index 67bc5c281ebaaf..9b96c2b89a8588 100644 --- a/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css +++ b/packages/react-components/react-accordion/stories/src/Accordion/AccordionMotionCustom.module.css @@ -7,8 +7,8 @@ gap: var(--spacing-vertical-s); margin-bottom: var(--spacing-vertical-l); padding: var(--spacing-vertical-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); } .list { diff --git a/packages/react-components/react-aria/stories/src/AriaLiveAnnouncer/AriaLiveAnnouncerDefault.module.css b/packages/react-components/react-aria/stories/src/AriaLiveAnnouncer/AriaLiveAnnouncerDefault.module.css index 277c79d66d4557..88b92a105ebda1 100644 --- a/packages/react-components/react-aria/stories/src/AriaLiveAnnouncer/AriaLiveAnnouncerDefault.module.css +++ b/packages/react-components/react-aria/stories/src/AriaLiveAnnouncer/AriaLiveAnnouncerDefault.module.css @@ -6,6 +6,6 @@ flex-direction: column; gap: 8px; padding: 8px; - border: 1px solid var(--colorNeutralStroke1); + border: 1px solid var(--color-neutral-stroke-1); border-radius: 4px; } diff --git a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.module.css b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.module.css index 65637a2a2fd6de..59010d849206f8 100644 --- a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.module.css +++ b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceContentEditable.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .contentEditable { - border: 1px solid var(--colorNeutralStroke1); + border: 1px solid var(--color-neutral-stroke-1); border-radius: 4px; padding: 0.5em; } diff --git a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css index f1465e4c899e5b..60705500d118b9 100644 --- a/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css +++ b/packages/react-components/react-aria/stories/src/UseTypingAnnounce/UseTypingAnnounceFiltering.module.css @@ -2,8 +2,8 @@ * Token references are the Fluent theme's CSS variables. */ .results { - background-color: var(--colorNeutralBackground1); - border: 1px solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-1); + border: 1px solid var(--color-neutral-stroke-1); list-style-type: none; padding: 0; margin: 0; diff --git a/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.module.css b/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.module.css index bdc5b2b5e588b8..e882b2b930adcc 100644 --- a/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.module.css +++ b/packages/react-components/react-avatar/library/src/components/Avatar/Avatar.module.css @@ -84,10 +84,10 @@ .root { @apply relative inline-block size-32 shrink-0 align-middle; - border-radius: var(--borderRadiusCircular); - font-family: var(--fontFamilyBase); - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase300); + border-radius: var(--radius-circular); + font-family: var(--font-base); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-300); &::before, &::after { @@ -103,8 +103,8 @@ margin: calc(-2 * var(--fui-Avatar-ringWidth, 0px)); border-radius: inherit; transition-property: margin, opacity; - transition-timing-function: var(--curveEasyEaseMax), var(--curveLinear); - transition-duration: var(--durationUltraSlow), var(--durationSlower); + transition-timing-function: var(--ease-easy-ease-max), var(--ease-linear); + transition-duration: var(--duration-ultra-slow), var(--duration-slower); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -137,7 +137,7 @@ inset-block-start: 0; inset-inline-start: 0; line-height: 1; - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); border-radius: inherit; /* `vertical-align: center` is not a valid value and is dropped by every browser. @@ -270,23 +270,23 @@ * rule: 32/36/40 keep `fontSizeBase300` from the reset. */ &:where([data-size='16'], [data-size='20'], [data-size='24']) { - font-size: var(--fontSizeBase100); + font-size: var(--text-base-100); } &:where([data-size='28']) { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } &:where([data-size='48'], [data-size='56']) { - font-size: var(--fontSizeBase400); + font-size: var(--text-base-400); } &:where([data-size='64'], [data-size='72'], [data-size='96']) { - font-size: var(--fontSizeBase500); + font-size: var(--text-base-500); } &:where([data-size='120'], [data-size='128']) { - font-size: var(--fontSizeBase600); + font-size: var(--text-base-600); } /* @@ -330,19 +330,19 @@ */ .square { &:where([data-size='16'], [data-size='20'], [data-size='24']) { - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } &:where([data-size='28'], [data-size='32'], [data-size='36'], [data-size='40'], [data-size='48']) { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } &:where([data-size='56'], [data-size='64'], [data-size='72']) { - border-radius: var(--borderRadiusLarge); + border-radius: var(--radius-large); } &:where([data-size='96'], [data-size='120'], [data-size='128']) { - border-radius: var(--borderRadiusXLarge); + border-radius: var(--radius-x-large); } } } @@ -358,8 +358,8 @@ /* work-around for text pixel snapping at the end of the animation */ transform: perspective(1px); transition-property: transform, opacity; - transition-duration: var(--durationUltraSlow), var(--durationFaster); - transition-timing-function: var(--curveEasyEaseMax), var(--curveLinear); + transition-duration: var(--duration-ultra-slow), var(--duration-faster); + transition-timing-function: var(--ease-easy-ease-max), var(--ease-linear); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -407,19 +407,19 @@ /* arg 13 — from useStyles.shadow4 / .shadow8 / .shadow16 / .shadow28. */ @variant active-appearance-shadow-or-ring-shadow { &:where([data-size='16'], [data-size='20'], [data-size='24'], [data-size='28'])::after { - box-shadow: var(--shadow4); + box-shadow: var(--shadow-4); } &:where([data-size='32'], [data-size='36'], [data-size='40'], [data-size='48'])::after { - box-shadow: var(--shadow8); + box-shadow: var(--shadow-8); } &:where([data-size='56'], [data-size='64'])::after { - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); } &:where([data-size='72'], [data-size='96'], [data-size='120'], [data-size='128'])::after { - box-shadow: var(--shadow28); + box-shadow: var(--shadow-28); } } } @@ -432,127 +432,127 @@ */ .ring-neutral::before, .ring-brand::before { - color: var(--colorBrandStroke1); + color: var(--color-brand-stroke-1); } .ring-dark-red::before { - color: var(--colorPaletteDarkRedBorderActive); + color: var(--color-palette-dark-red-border-active); } .ring-cranberry::before { - color: var(--colorPaletteCranberryBorderActive); + color: var(--color-palette-cranberry-border-active); } .ring-red::before { - color: var(--colorPaletteRedBorderActive); + color: var(--color-palette-red-border-active); } .ring-pumpkin::before { - color: var(--colorPalettePumpkinBorderActive); + color: var(--color-palette-pumpkin-border-active); } .ring-peach::before { - color: var(--colorPalettePeachBorderActive); + color: var(--color-palette-peach-border-active); } .ring-marigold::before { - color: var(--colorPaletteMarigoldBorderActive); + color: var(--color-palette-marigold-border-active); } .ring-gold::before { - color: var(--colorPaletteGoldBorderActive); + color: var(--color-palette-gold-border-active); } .ring-brass::before { - color: var(--colorPaletteBrassBorderActive); + color: var(--color-palette-brass-border-active); } .ring-brown::before { - color: var(--colorPaletteBrownBorderActive); + color: var(--color-palette-brown-border-active); } .ring-forest::before { - color: var(--colorPaletteForestBorderActive); + color: var(--color-palette-forest-border-active); } .ring-seafoam::before { - color: var(--colorPaletteSeafoamBorderActive); + color: var(--color-palette-seafoam-border-active); } .ring-dark-green::before { - color: var(--colorPaletteDarkGreenBorderActive); + color: var(--color-palette-dark-green-border-active); } .ring-light-teal::before { - color: var(--colorPaletteLightTealBorderActive); + color: var(--color-palette-light-teal-border-active); } .ring-teal::before { - color: var(--colorPaletteTealBorderActive); + color: var(--color-palette-teal-border-active); } .ring-steel::before { - color: var(--colorPaletteSteelBorderActive); + color: var(--color-palette-steel-border-active); } .ring-blue::before { - color: var(--colorPaletteBlueBorderActive); + color: var(--color-palette-blue-border-active); } .ring-royal-blue::before { - color: var(--colorPaletteRoyalBlueBorderActive); + color: var(--color-palette-royal-blue-border-active); } .ring-cornflower::before { - color: var(--colorPaletteCornflowerBorderActive); + color: var(--color-palette-cornflower-border-active); } .ring-navy::before { - color: var(--colorPaletteNavyBorderActive); + color: var(--color-palette-navy-border-active); } .ring-lavender::before { - color: var(--colorPaletteLavenderBorderActive); + color: var(--color-palette-lavender-border-active); } .ring-purple::before { - color: var(--colorPalettePurpleBorderActive); + color: var(--color-palette-purple-border-active); } .ring-grape::before { - color: var(--colorPaletteGrapeBorderActive); + color: var(--color-palette-grape-border-active); } .ring-lilac::before { - color: var(--colorPaletteLilacBorderActive); + color: var(--color-palette-lilac-border-active); } .ring-pink::before { - color: var(--colorPalettePinkBorderActive); + color: var(--color-palette-pink-border-active); } .ring-magenta::before { - color: var(--colorPaletteMagentaBorderActive); + color: var(--color-palette-magenta-border-active); } .ring-plum::before { - color: var(--colorPalettePlumBorderActive); + color: var(--color-palette-plum-border-active); } .ring-beige::before { - color: var(--colorPaletteBeigeBorderActive); + color: var(--color-palette-beige-border-active); } .ring-mink::before { - color: var(--colorPaletteMinkBorderActive); + color: var(--color-palette-mink-border-active); } .ring-platinum::before { - color: var(--colorPalettePlatinumBorderActive); + color: var(--color-palette-platinum-border-active); } .ring-anchor::before { - color: var(--colorPaletteAnchorBorderActive); + color: var(--color-palette-anchor-border-active); } /* @@ -586,13 +586,13 @@ @variant active-inactive { opacity: 0.8; transform: scale(0.875); - transition-timing-function: var(--curveDecelerateMin), var(--curveLinear); + transition-timing-function: var(--ease-decelerate-min), var(--ease-linear); &::before, &::after { margin: 0; opacity: 0; - transition-timing-function: var(--curveDecelerateMin), var(--curveLinear); + transition-timing-function: var(--ease-decelerate-min), var(--ease-linear); } } } @@ -605,163 +605,163 @@ * the argument order on all three slots. */ .neutral { - color: var(--colorNeutralForeground3); - background-color: var(--colorNeutralBackground6); + color: var(--color-neutral-foreground-3); + background-color: var(--color-neutral-background-6); } .brand { - color: var(--colorNeutralForegroundStaticInverted); - background-color: var(--colorBrandBackgroundStatic); + color: var(--color-neutral-foreground-static-inverted); + background-color: var(--color-brand-background-static); } .dark-red { - color: var(--colorPaletteDarkRedForeground2); - background-color: var(--colorPaletteDarkRedBackground2); + color: var(--color-palette-dark-red-foreground-2); + background-color: var(--color-palette-dark-red-background-2); } .cranberry { - color: var(--colorPaletteCranberryForeground2); - background-color: var(--colorPaletteCranberryBackground2); + color: var(--color-palette-cranberry-foreground-2); + background-color: var(--color-palette-cranberry-background-2); } .red { - color: var(--colorPaletteRedForeground2); - background-color: var(--colorPaletteRedBackground2); + color: var(--color-palette-red-foreground-2); + background-color: var(--color-palette-red-background-2); } .pumpkin { - color: var(--colorPalettePumpkinForeground2); - background-color: var(--colorPalettePumpkinBackground2); + color: var(--color-palette-pumpkin-foreground-2); + background-color: var(--color-palette-pumpkin-background-2); } .peach { - color: var(--colorPalettePeachForeground2); - background-color: var(--colorPalettePeachBackground2); + color: var(--color-palette-peach-foreground-2); + background-color: var(--color-palette-peach-background-2); } .marigold { - color: var(--colorPaletteMarigoldForeground2); - background-color: var(--colorPaletteMarigoldBackground2); + color: var(--color-palette-marigold-foreground-2); + background-color: var(--color-palette-marigold-background-2); } .gold { - color: var(--colorPaletteGoldForeground2); - background-color: var(--colorPaletteGoldBackground2); + color: var(--color-palette-gold-foreground-2); + background-color: var(--color-palette-gold-background-2); } .brass { - color: var(--colorPaletteBrassForeground2); - background-color: var(--colorPaletteBrassBackground2); + color: var(--color-palette-brass-foreground-2); + background-color: var(--color-palette-brass-background-2); } .brown { - color: var(--colorPaletteBrownForeground2); - background-color: var(--colorPaletteBrownBackground2); + color: var(--color-palette-brown-foreground-2); + background-color: var(--color-palette-brown-background-2); } .forest { - color: var(--colorPaletteForestForeground2); - background-color: var(--colorPaletteForestBackground2); + color: var(--color-palette-forest-foreground-2); + background-color: var(--color-palette-forest-background-2); } .seafoam { - color: var(--colorPaletteSeafoamForeground2); - background-color: var(--colorPaletteSeafoamBackground2); + color: var(--color-palette-seafoam-foreground-2); + background-color: var(--color-palette-seafoam-background-2); } .dark-green { - color: var(--colorPaletteDarkGreenForeground2); - background-color: var(--colorPaletteDarkGreenBackground2); + color: var(--color-palette-dark-green-foreground-2); + background-color: var(--color-palette-dark-green-background-2); } .light-teal { - color: var(--colorPaletteLightTealForeground2); - background-color: var(--colorPaletteLightTealBackground2); + color: var(--color-palette-light-teal-foreground-2); + background-color: var(--color-palette-light-teal-background-2); } .teal { - color: var(--colorPaletteTealForeground2); - background-color: var(--colorPaletteTealBackground2); + color: var(--color-palette-teal-foreground-2); + background-color: var(--color-palette-teal-background-2); } .steel { - color: var(--colorPaletteSteelForeground2); - background-color: var(--colorPaletteSteelBackground2); + color: var(--color-palette-steel-foreground-2); + background-color: var(--color-palette-steel-background-2); } .blue { - color: var(--colorPaletteBlueForeground2); - background-color: var(--colorPaletteBlueBackground2); + color: var(--color-palette-blue-foreground-2); + background-color: var(--color-palette-blue-background-2); } .royal-blue { - color: var(--colorPaletteRoyalBlueForeground2); - background-color: var(--colorPaletteRoyalBlueBackground2); + color: var(--color-palette-royal-blue-foreground-2); + background-color: var(--color-palette-royal-blue-background-2); } .cornflower { - color: var(--colorPaletteCornflowerForeground2); - background-color: var(--colorPaletteCornflowerBackground2); + color: var(--color-palette-cornflower-foreground-2); + background-color: var(--color-palette-cornflower-background-2); } .navy { - color: var(--colorPaletteNavyForeground2); - background-color: var(--colorPaletteNavyBackground2); + color: var(--color-palette-navy-foreground-2); + background-color: var(--color-palette-navy-background-2); } .lavender { - color: var(--colorPaletteLavenderForeground2); - background-color: var(--colorPaletteLavenderBackground2); + color: var(--color-palette-lavender-foreground-2); + background-color: var(--color-palette-lavender-background-2); } .purple { - color: var(--colorPalettePurpleForeground2); - background-color: var(--colorPalettePurpleBackground2); + color: var(--color-palette-purple-foreground-2); + background-color: var(--color-palette-purple-background-2); } .grape { - color: var(--colorPaletteGrapeForeground2); - background-color: var(--colorPaletteGrapeBackground2); + color: var(--color-palette-grape-foreground-2); + background-color: var(--color-palette-grape-background-2); } .lilac { - color: var(--colorPaletteLilacForeground2); - background-color: var(--colorPaletteLilacBackground2); + color: var(--color-palette-lilac-foreground-2); + background-color: var(--color-palette-lilac-background-2); } .pink { - color: var(--colorPalettePinkForeground2); - background-color: var(--colorPalettePinkBackground2); + color: var(--color-palette-pink-foreground-2); + background-color: var(--color-palette-pink-background-2); } .magenta { - color: var(--colorPaletteMagentaForeground2); - background-color: var(--colorPaletteMagentaBackground2); + color: var(--color-palette-magenta-foreground-2); + background-color: var(--color-palette-magenta-background-2); } .plum { - color: var(--colorPalettePlumForeground2); - background-color: var(--colorPalettePlumBackground2); + color: var(--color-palette-plum-foreground-2); + background-color: var(--color-palette-plum-background-2); } .beige { - color: var(--colorPaletteBeigeForeground2); - background-color: var(--colorPaletteBeigeBackground2); + color: var(--color-palette-beige-foreground-2); + background-color: var(--color-palette-beige-background-2); } .mink { - color: var(--colorPaletteMinkForeground2); - background-color: var(--colorPaletteMinkBackground2); + color: var(--color-palette-mink-foreground-2); + background-color: var(--color-palette-mink-background-2); } .platinum { - color: var(--colorPalettePlatinumForeground2); - background-color: var(--colorPalettePlatinumBackground2); + color: var(--color-palette-platinum-foreground-2); + background-color: var(--color-palette-platinum-background-2); } .anchor { - color: var(--colorPaletteAnchorForeground2); - background-color: var(--colorPaletteAnchorBackground2); + color: var(--color-palette-anchor-foreground-2); + background-color: var(--color-palette-anchor-background-2); } /* diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroup/AvatarGroup.module.css b/packages/react-components/react-avatar/library/src/components/AvatarGroup/AvatarGroup.module.css index 1f9c53255c2619..a2300b6de21307 100644 --- a/packages/react-components/react-avatar/library/src/components/AvatarGroup/AvatarGroup.module.css +++ b/packages/react-components/react-avatar/library/src/components/AvatarGroup/AvatarGroup.module.css @@ -45,7 +45,7 @@ * it inside the rule reproduces that order. */ .pie { - background-color: var(--colorTransparentStroke); + background-color: var(--color-transparent-stroke); clip-path: circle(50%); @variant forced-colors { diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css index 937cdf56fc48bf..5302cdc5f79205 100644 --- a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css +++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.module.css @@ -78,7 +78,7 @@ /* arg 3a — from useRootStyles.nonOverflowItem */ .non-overflow-item { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } /* @@ -106,15 +106,15 @@ * the Griffel trigger button stamps no attributes. */ .stack-thick { - box-shadow: 0 0 0 var(--spacing-thick) var(--colorNeutralBackground2); + box-shadow: 0 0 0 var(--spacing-thick) var(--color-neutral-background-2); } .stack-thicker { - box-shadow: 0 0 0 var(--spacing-thicker) var(--colorNeutralBackground2); + box-shadow: 0 0 0 var(--spacing-thicker) var(--color-neutral-background-2); } .stack-thickest { - box-shadow: 0 0 0 var(--spacing-thickest) var(--colorNeutralBackground2); + box-shadow: 0 0 0 var(--spacing-thickest) var(--color-neutral-background-2); } /* @@ -270,11 +270,11 @@ .overflow-label { @apply ms-horizontal-s; - color: var(--colorNeutralForeground1); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + color: var(--color-neutral-foreground-1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css index 6f9274f191ebaf..097c4d0fc107e8 100644 --- a/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css +++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/AvatarGroupPopover.module.css @@ -88,14 +88,14 @@ .trigger-button { @apply relative inline-flex shrink-0 items-center justify-center p-0; - color: var(--colorNeutralForeground1); - background-color: var(--colorNeutralBackground1); - border-radius: var(--borderRadiusCircular); + color: var(--color-neutral-foreground-1); + background-color: var(--color-neutral-background-1); + border-radius: var(--radius-circular); - border-block-start-color: var(--colorNeutralStroke1); - border-inline-end-color: var(--colorNeutralStroke1); - border-block-end-color: var(--colorNeutralStroke1); - border-inline-start-color: var(--colorNeutralStroke1); + border-block-start-color: var(--color-neutral-stroke-1); + border-inline-end-color: var(--color-neutral-stroke-1); + border-block-end-color: var(--color-neutral-stroke-1); + border-inline-start-color: var(--color-neutral-stroke-1); border-block-start-style: solid; border-inline-end-style: solid; @@ -150,23 +150,23 @@ */ .trigger-button-pie { color: transparent; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); - border-block-start-color: var(--colorTransparentStroke); - border-inline-end-color: var(--colorTransparentStroke); - border-block-end-color: var(--colorTransparentStroke); - border-inline-start-color: var(--colorTransparentStroke); + border-block-start-color: var(--color-transparent-stroke); + border-inline-end-color: var(--color-transparent-stroke); + border-block-end-color: var(--color-transparent-stroke); + border-inline-start-color: var(--color-transparent-stroke); } /* arg 7 — from useTriggerButtonStyles.selected */ .trigger-button-selected { - color: var(--colorNeutralForeground1Selected); - background-color: var(--colorNeutralBackground1Selected); + color: var(--color-neutral-foreground-1-selected); + background-color: var(--color-neutral-background-1-selected); - border-block-start-color: var(--colorNeutralStroke1Selected); - border-inline-end-color: var(--colorNeutralStroke1Selected); - border-block-end-color: var(--colorNeutralStroke1Selected); - border-inline-start-color: var(--colorNeutralStroke1Selected); + border-block-start-color: var(--color-neutral-stroke-1-selected); + border-inline-end-color: var(--color-neutral-stroke-1-selected); + border-block-end-color: var(--color-neutral-stroke-1-selected); + border-inline-start-color: var(--color-neutral-stroke-1-selected); } } @@ -210,7 +210,7 @@ */ .trigger-button { @variant focus-visible-fui { - border: var(--spacing-thick) solid var(--colorStrokeFocus2); + border: var(--spacing-thick) solid var(--color-stroke-focus-2); outline-style: none; } } @@ -227,23 +227,23 @@ */ .trigger-button-interactive { @variant hover { - color: var(--colorNeutralForeground1Hover); - background-color: var(--colorNeutralBackground1Hover); + color: var(--color-neutral-foreground-1-hover); + background-color: var(--color-neutral-background-1-hover); - border-block-start-color: var(--colorNeutralStroke1Hover); - border-inline-end-color: var(--colorNeutralStroke1Hover); - border-block-end-color: var(--colorNeutralStroke1Hover); - border-inline-start-color: var(--colorNeutralStroke1Hover); + border-block-start-color: var(--color-neutral-stroke-1-hover); + border-inline-end-color: var(--color-neutral-stroke-1-hover); + border-block-end-color: var(--color-neutral-stroke-1-hover); + border-inline-start-color: var(--color-neutral-stroke-1-hover); } @variant active { - color: var(--colorNeutralForeground1Pressed); - background-color: var(--colorNeutralBackground1Pressed); + color: var(--color-neutral-foreground-1-pressed); + background-color: var(--color-neutral-background-1-pressed); - border-block-start-color: var(--colorNeutralStroke1Pressed); - border-inline-end-color: var(--colorNeutralStroke1Pressed); - border-block-end-color: var(--colorNeutralStroke1Pressed); - border-inline-start-color: var(--colorNeutralStroke1Pressed); + border-block-start-color: var(--color-neutral-stroke-1-pressed); + border-inline-end-color: var(--color-neutral-stroke-1-pressed); + border-block-end-color: var(--color-neutral-stroke-1-pressed); + border-inline-start-color: var(--color-neutral-stroke-1-pressed); } } } @@ -263,43 +263,43 @@ * hoisted onto the class itself and only size/line-height vary per bucket. */ .indicator-count { - font-family: var(--fontFamilyBase); - font-weight: var(--fontWeightSemibold); + font-family: var(--font-base); + font-weight: var(--font-weight-semibold); /* size <= 24 — typographyStyles.caption2Strong */ &:where([data-size='16'], [data-size='20'], [data-size='24']) { - font-size: var(--fontSizeBase100); - line-height: var(--lineHeightBase100); + font-size: var(--text-base-100); + line-height: var(--leading-base-100); } /* size <= 28 — typographyStyles.caption1Strong */ &:where([data-size='28']) { - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); } /* size <= 40 — typographyStyles.body1Strong */ &:where([data-size='32'], [data-size='36'], [data-size='40']) { - font-size: var(--fontSizeBase300); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + line-height: var(--leading-base-300); } /* size <= 56 — typographyStyles.subtitle2 */ &:where([data-size='48'], [data-size='56']) { - font-size: var(--fontSizeBase400); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + line-height: var(--leading-base-400); } /* size <= 96 — typographyStyles.subtitle1 */ &:where([data-size='64'], [data-size='72'], [data-size='96']) { - font-size: var(--fontSizeBase500); - line-height: var(--lineHeightBase500); + font-size: var(--text-base-500); + line-height: var(--leading-base-500); } /* else — typographyStyles.title3 */ &:where([data-size='120'], [data-size='128']) { - font-size: var(--fontSizeBase600); - line-height: var(--lineHeightBase600); + font-size: var(--text-base-600); + line-height: var(--leading-base-600); } } diff --git a/packages/react-components/react-badge/library/src/components/Badge/Badge.module.css b/packages/react-components/react-badge/library/src/components/Badge/Badge.module.css index 39c88f8b225a17..4f00dff22e052f 100644 --- a/packages/react-components/react-badge/library/src/components/Badge/Badge.module.css +++ b/packages/react-components/react-badge/library/src/components/Badge/Badge.module.css @@ -63,10 +63,10 @@ .root { @apply relative box-border inline-flex h-20 min-w-20 items-center justify-center; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); /* * `padding: 0 calc(tokens.spacingHorizontalXS + textPadding)` where @@ -76,13 +76,13 @@ */ @apply ps-horizontal-s-nudge pe-horizontal-s-nudge pt-vertical-none pb-vertical-none; - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); /* transparent stroke rather than no border, so the edge survives high contrast */ - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); /* * The border lives on ::after so it never affects layout — padding and size stay @@ -131,10 +131,10 @@ * arg #4 below. */ @variant size-small-or-below { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); } /* arg #4 — from useRootStyles[size]. `medium` is `{}` (all of it set by the reset). */ @@ -190,11 +190,11 @@ /* arg #5 — from useRootStyles[shape]. `circular` is `{}` (set by the reset). */ .square { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* * arg #6 — from useRootStyles.roundedSmallToTiny (`shape === 'rounded' && smallToTiny`). @@ -203,7 +203,7 @@ * produced. */ @variant size-small-or-below { - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } } } @@ -242,195 +242,195 @@ /* arg #9 — from useRootStyles[`${appearance}-${color}`]; beats arg #8's border colors. */ .filled-brand { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); } .filled-danger { - background-color: var(--colorPaletteRedBackground3); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-palette-red-background-3); + color: var(--color-neutral-foreground-on-brand); } .filled-important { - background-color: var(--colorNeutralForeground1); - color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-foreground-1); + color: var(--color-neutral-background-1); } .filled-informative { - background-color: var(--colorNeutralBackground5); - color: var(--colorNeutralForeground3); + background-color: var(--color-neutral-background-5); + color: var(--color-neutral-foreground-3); } .filled-severe { - background-color: var(--colorPaletteDarkOrangeBackground3); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-palette-dark-orange-background-3); + color: var(--color-neutral-foreground-on-brand); } .filled-subtle { - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); } .filled-success { - background-color: var(--colorPaletteGreenBackground3); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-palette-green-background-3); + color: var(--color-neutral-foreground-on-brand); } .filled-warning { - background-color: var(--colorPaletteYellowBackground3); - color: var(--colorNeutralForeground1Static); + background-color: var(--color-palette-yellow-background-3); + color: var(--color-neutral-foreground-1-static); } .ghost-brand { - color: var(--colorBrandForeground1); + color: var(--color-brand-foreground-1); } .ghost-danger { - color: var(--colorPaletteRedForeground3); + color: var(--color-palette-red-foreground-3); } .ghost-important { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } .ghost-informative { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .ghost-severe { - color: var(--colorPaletteDarkOrangeForeground3); + color: var(--color-palette-dark-orange-foreground-3); } .ghost-subtle { - color: var(--colorNeutralForegroundStaticInverted); + color: var(--color-neutral-foreground-static-inverted); } .ghost-success { - color: var(--colorPaletteGreenForeground3); + color: var(--color-palette-green-foreground-3); } .ghost-warning { - color: var(--colorPaletteYellowForeground2); + color: var(--color-palette-yellow-foreground-2); } .outline-brand { - color: var(--colorBrandForeground1); + color: var(--color-brand-foreground-1); } .outline-danger { - color: var(--colorPaletteRedForeground3); - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + color: var(--color-palette-red-foreground-3); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } .outline-important { - color: var(--colorNeutralForeground3); - border-top-color: var(--colorNeutralStrokeAccessible); - border-right-color: var(--colorNeutralStrokeAccessible); - border-bottom-color: var(--colorNeutralStrokeAccessible); - border-left-color: var(--colorNeutralStrokeAccessible); + color: var(--color-neutral-foreground-3); + border-top-color: var(--color-neutral-stroke-accessible); + border-right-color: var(--color-neutral-stroke-accessible); + border-bottom-color: var(--color-neutral-stroke-accessible); + border-left-color: var(--color-neutral-stroke-accessible); } .outline-informative { - color: var(--colorNeutralForeground3); - border-top-color: var(--colorNeutralStroke2); - border-right-color: var(--colorNeutralStroke2); - border-bottom-color: var(--colorNeutralStroke2); - border-left-color: var(--colorNeutralStroke2); + color: var(--color-neutral-foreground-3); + border-top-color: var(--color-neutral-stroke-2); + border-right-color: var(--color-neutral-stroke-2); + border-bottom-color: var(--color-neutral-stroke-2); + border-left-color: var(--color-neutral-stroke-2); } .outline-severe { - color: var(--colorPaletteDarkOrangeForeground3); + color: var(--color-palette-dark-orange-foreground-3); } .outline-subtle { - color: var(--colorNeutralForegroundStaticInverted); + color: var(--color-neutral-foreground-static-inverted); } .outline-success { - color: var(--colorPaletteGreenForeground3); - border-top-color: var(--colorPaletteGreenBorder2); - border-right-color: var(--colorPaletteGreenBorder2); - border-bottom-color: var(--colorPaletteGreenBorder2); - border-left-color: var(--colorPaletteGreenBorder2); + color: var(--color-palette-green-foreground-3); + border-top-color: var(--color-palette-green-border-2); + border-right-color: var(--color-palette-green-border-2); + border-bottom-color: var(--color-palette-green-border-2); + border-left-color: var(--color-palette-green-border-2); } .outline-warning { - color: var(--colorPaletteYellowForeground2); + color: var(--color-palette-yellow-foreground-2); } .tint-brand { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); - border-top-color: var(--colorBrandStroke2); - border-right-color: var(--colorBrandStroke2); - border-bottom-color: var(--colorBrandStroke2); - border-left-color: var(--colorBrandStroke2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); + border-top-color: var(--color-brand-stroke-2); + border-right-color: var(--color-brand-stroke-2); + border-bottom-color: var(--color-brand-stroke-2); + border-left-color: var(--color-brand-stroke-2); } .tint-danger { - background-color: var(--colorPaletteRedBackground1); - color: var(--colorPaletteRedForeground1); - border-top-color: var(--colorPaletteRedBorder1); - border-right-color: var(--colorPaletteRedBorder1); - border-bottom-color: var(--colorPaletteRedBorder1); - border-left-color: var(--colorPaletteRedBorder1); + background-color: var(--color-palette-red-background-1); + color: var(--color-palette-red-foreground-1); + border-top-color: var(--color-palette-red-border-1); + border-right-color: var(--color-palette-red-border-1); + border-bottom-color: var(--color-palette-red-border-1); + border-left-color: var(--color-palette-red-border-1); } .tint-important { - background-color: var(--colorNeutralForeground3); - color: var(--colorNeutralBackground1); - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + background-color: var(--color-neutral-foreground-3); + color: var(--color-neutral-background-1); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } .tint-informative { - background-color: var(--colorNeutralBackground4); - color: var(--colorNeutralForeground3); - border-top-color: var(--colorNeutralStroke2); - border-right-color: var(--colorNeutralStroke2); - border-bottom-color: var(--colorNeutralStroke2); - border-left-color: var(--colorNeutralStroke2); + background-color: var(--color-neutral-background-4); + color: var(--color-neutral-foreground-3); + border-top-color: var(--color-neutral-stroke-2); + border-right-color: var(--color-neutral-stroke-2); + border-bottom-color: var(--color-neutral-stroke-2); + border-left-color: var(--color-neutral-stroke-2); } .tint-severe { - background-color: var(--colorPaletteDarkOrangeBackground1); - color: var(--colorPaletteDarkOrangeForeground1); - border-top-color: var(--colorPaletteDarkOrangeBorder1); - border-right-color: var(--colorPaletteDarkOrangeBorder1); - border-bottom-color: var(--colorPaletteDarkOrangeBorder1); - border-left-color: var(--colorPaletteDarkOrangeBorder1); + background-color: var(--color-palette-dark-orange-background-1); + color: var(--color-palette-dark-orange-foreground-1); + border-top-color: var(--color-palette-dark-orange-border-1); + border-right-color: var(--color-palette-dark-orange-border-1); + border-bottom-color: var(--color-palette-dark-orange-border-1); + border-left-color: var(--color-palette-dark-orange-border-1); } .tint-subtle { - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground3); - border-top-color: var(--colorNeutralStroke2); - border-right-color: var(--colorNeutralStroke2); - border-bottom-color: var(--colorNeutralStroke2); - border-left-color: var(--colorNeutralStroke2); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-3); + border-top-color: var(--color-neutral-stroke-2); + border-right-color: var(--color-neutral-stroke-2); + border-bottom-color: var(--color-neutral-stroke-2); + border-left-color: var(--color-neutral-stroke-2); } .tint-success { - background-color: var(--colorPaletteGreenBackground1); - color: var(--colorPaletteGreenForeground1); - border-top-color: var(--colorPaletteGreenBorder1); - border-right-color: var(--colorPaletteGreenBorder1); - border-bottom-color: var(--colorPaletteGreenBorder1); - border-left-color: var(--colorPaletteGreenBorder1); + background-color: var(--color-palette-green-background-1); + color: var(--color-palette-green-foreground-1); + border-top-color: var(--color-palette-green-border-1); + border-right-color: var(--color-palette-green-border-1); + border-bottom-color: var(--color-palette-green-border-1); + border-left-color: var(--color-palette-green-border-1); } .tint-warning { - background-color: var(--colorPaletteYellowBackground1); - color: var(--colorPaletteYellowForeground1); - border-top-color: var(--colorPaletteYellowBorder1); - border-right-color: var(--colorPaletteYellowBorder1); - border-bottom-color: var(--colorPaletteYellowBorder1); - border-left-color: var(--colorPaletteYellowBorder1); + background-color: var(--color-palette-yellow-background-1); + color: var(--color-palette-yellow-foreground-1); + border-top-color: var(--color-palette-yellow-border-1); + border-right-color: var(--color-palette-yellow-border-1); + border-bottom-color: var(--color-palette-yellow-border-1); + border-left-color: var(--color-palette-yellow-border-1); } } diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.module.css b/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.module.css index 0c8d3b677aa39b..d597b3c816b2bd 100644 --- a/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.module.css +++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/PresenceBadge.module.css @@ -105,8 +105,8 @@ .root { @apply box-border inline-flex items-center justify-center ps-1 pe-1 pt-1 pb-1; - border-radius: var(--borderRadiusCircular); - background-color: var(--colorNeutralBackground1); + border-radius: var(--radius-circular); + background-color: var(--color-neutral-background-1); background-clip: content-box; } @@ -121,47 +121,47 @@ /* arg 3 — busy | do-not-disturb | blocked */ .status-busy { - color: var(--colorPaletteRedBackground3); + color: var(--color-palette-red-background-3); } /* arg 4 */ .status-away { - color: var(--colorPaletteMarigoldBackground3); + color: var(--color-palette-marigold-background-3); } /* arg 5 */ .status-available { - color: var(--colorPaletteLightGreenForeground3); + color: var(--color-palette-light-green-foreground-3); } /* arg 6 */ .status-offline { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } /* arg 7 */ .status-out-of-office { - color: var(--colorPaletteBerryForeground3); + color: var(--color-palette-berry-foreground-3); } /* arg 8 */ .status-unknown { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } /* arg 9 — overridden by args 10–13 in every reachable combination (see header) */ .out-of-office { - color: var(--colorNeutralBackground1); + color: var(--color-neutral-background-1); } /* arg 10 */ .out-of-office-available { - color: var(--colorPaletteLightGreenForeground3); + color: var(--color-palette-light-green-foreground-3); } /* arg 11 */ .out-of-office-busy { - color: var(--colorPaletteRedBackground3); + color: var(--color-palette-red-background-3); } /* @@ -169,12 +169,12 @@ * header). Identical declaration to `.status-out-of-office`; only its file position differs. */ .out-of-office-status { - color: var(--colorPaletteBerryForeground3); + color: var(--color-palette-berry-foreground-3); } /* arg 13 */ .out-of-office-unknown { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } } diff --git a/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap b/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap index 2b3af299cbb196..818c83d06452d3 100644 --- a/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap +++ b/packages/react-components/react-badge/library/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap @@ -12,7 +12,8 @@ exports[`PresenceBadge renders a default state 1`] = ` > diff --git a/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css b/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css index edd44491257131..d35dc1af6066e4 100644 --- a/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css +++ b/packages/react-components/react-badge/stories/src/Badge/BadgeColorVsAppearance.module.css @@ -14,6 +14,6 @@ .brand { display: flex; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); padding: var(--spacing-horizontal-xxs); } diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.module.css b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.module.css index 2408502b0e58e0..caebd681d4cb5d 100644 --- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.module.css +++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.module.css @@ -103,35 +103,35 @@ * * `typographyStyles.caption1` / `.body1` / `.body2` expand to the four `font-*` / * `line-height` declarations the compiler emitted; all three carry - * `font-weight: var(--fontWeightRegular)` (`figsok6`), including `large` — `body2` is NOT + * `font-weight: var(--font-weight-regular)` (`figsok6`), including `large` — `body2` is NOT * semibold. The `current` overrides below are the only semibold path. */ .root { @variant size-small { @apply h-24 ps-horizontal-s-nudge pe-horizontal-s-nudge pt-horizontal-s-nudge pb-horizontal-s-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } @variant size-medium { @apply h-32 ps-horizontal-s-nudge pe-horizontal-s-nudge pt-horizontal-s-nudge pb-horizontal-s-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } @variant size-large { @apply h-40 ps-horizontal-s pe-horizontal-s pt-horizontal-s pb-horizontal-s; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); } } } @@ -165,24 +165,24 @@ .root { @variant current { @variant size-small { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); } @variant size-medium { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } @variant size-large { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } } @@ -229,8 +229,8 @@ .root { @variant current { @variant hover { - background-color: var(--colorTransparentBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-transparent-background); + color: var(--color-neutral-foreground-2); cursor: auto; & .icon { @@ -239,8 +239,8 @@ } @variant disabled { - background-color: var(--colorTransparentBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-transparent-background); + color: var(--color-neutral-foreground-2); cursor: auto; & .icon { @@ -284,21 +284,21 @@ @variant size-small { & .icon { --fui-Breadcrumb--icon-size: calc(12px * var(--base-scale)); - --fui-Breadcrumb--icon-line-height: var(--lineHeightBase200); + --fui-Breadcrumb--icon-line-height: var(--leading-base-200); } } @variant size-medium { & .icon { --fui-Breadcrumb--icon-size: calc(16px * var(--base-scale)); - --fui-Breadcrumb--icon-line-height: var(--lineHeightBase400); + --fui-Breadcrumb--icon-line-height: var(--leading-base-400); } } @variant size-large { & .icon { --fui-Breadcrumb--icon-size: calc(20px * var(--base-scale)); - --fui-Breadcrumb--icon-line-height: var(--lineHeightBase600); + --fui-Breadcrumb--icon-line-height: var(--leading-base-600); } } } diff --git a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.module.css b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.module.css index e2c2336bd749bc..593a8789d67ecd 100644 --- a/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.module.css +++ b/packages/react-components/react-breadcrumb/library/src/components/BreadcrumbItem/BreadcrumbItem.module.css @@ -41,6 +41,6 @@ .root { @apply box-border flex items-center text-nowrap; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } } diff --git a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.module.css b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.module.css index e216e105577e7b..b0b5e6895a8fa8 100644 --- a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.module.css +++ b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/BreadcrumbWithOverflow.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .example { - background-color: var(--colorNeutralBackground2); + background-color: var(--color-neutral-background-2); overflow: hidden; padding: 5px; z-index: 0; diff --git a/packages/react-components/react-button/library/src/components/Button/Button.module.css b/packages/react-components/react-button/library/src/components/Button/Button.module.css index 2be11ecd97920d..d7517413be8ddf 100644 --- a/packages/react-components/react-button/library/src/components/Button/Button.module.css +++ b/packages/react-components/react-button/library/src/components/Button/Button.module.css @@ -101,19 +101,19 @@ */ @apply min-w-96 px-horizontal-m py-5; - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); - border: var(--spacing-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); + border: var(--spacing-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); outline-style: none; - transition-duration: var(--durationFaster); + transition-duration: var(--duration-faster); /* * Longhands only. The Griffel source declared `background, border, color`, which is not * 3 properties: per CSS Transitions L1 a shorthand in `transition-property` expands to @@ -131,20 +131,20 @@ */ transition-property: background-color, border-top-color, border-right-color, border-bottom-color, border-left-color, color; - transition-timing-function: var(--curveEasyEase); + transition-timing-function: var(--ease-easy-ease); @variant hover { - background-color: var(--colorNeutralBackground1Hover); - border-color: var(--colorNeutralStroke1Hover); - color: var(--colorNeutralForeground1Hover); + background-color: var(--color-neutral-background-1-hover); + border-color: var(--color-neutral-stroke-1-hover); + color: var(--color-neutral-foreground-1-hover); cursor: pointer; } @variant hover-active { - background-color: var(--colorNeutralBackground1Pressed); - border-color: var(--colorNeutralStroke1Pressed); - color: var(--colorNeutralForeground1Pressed); + background-color: var(--color-neutral-background-1-pressed); + border-color: var(--color-neutral-stroke-1-pressed); + color: var(--color-neutral-foreground-1-pressed); outline-style: none; } @@ -186,7 +186,7 @@ /* BUGFIX: Mozilla specific styles (Mozilla BugID: 1857642) */ @supports (-moz-appearance: button) { @variant focus-visible-fui { - box-shadow: 0 0 0 calc(var(--spacing-thin) + 0.25px) var(--colorStrokeFocus2) inset; + box-shadow: 0 0 0 calc(var(--spacing-thin) + 0.25px) var(--color-stroke-focus-2) inset; } } } @@ -248,42 +248,42 @@ /* from useRootStyles.outline */ .outline { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); } @variant hover-active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); } } /* from useRootStyles.primary */ .primary { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); @variant hover { - background-color: var(--colorBrandBackgroundHover); + background-color: var(--color-brand-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } @variant hover-active { - background-color: var(--colorBrandBackgroundPressed); + background-color: var(--color-brand-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } @variant forced-colors { @@ -317,43 +317,43 @@ /* from useRootStyles.subtle */ .subtle { - background-color: var(--colorSubtleBackground); + background-color: var(--color-subtle-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); @variant hover { - background-color: var(--colorSubtleBackgroundHover); + background-color: var(--color-subtle-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); /* The `.fui-Icon-filled` / `.fui-Icon-regular` swap that belongs here lives in the l1 icon-swap block at the bottom of this file (D27 / S-J batch 1). `.icon` below is this module's own local on react-button's icon slot, so its colour rule stays here. */ & .icon { - color: var(--colorNeutralForeground2BrandHover); + color: var(--color-neutral-foreground-2-brand-hover); } } @variant hover-active { - background-color: var(--colorSubtleBackgroundPressed); + background-color: var(--color-subtle-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); /* Icon swap in the l1 block at the bottom of this file (D27 / S-J batch 1). `.icon` is this module's own local and its colour rule stays here. */ & .icon { - color: var(--colorNeutralForeground2BrandPressed); + color: var(--color-neutral-foreground-2-brand-pressed); } } @@ -378,43 +378,43 @@ /* from useRootStyles.transparent */ .transparent { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2BrandHover); + color: var(--color-neutral-foreground-2-brand-hover); /* Icon swap in the l1 block at the bottom of this file (D27 / S-J batch 1). */ } @variant hover-active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2BrandPressed); + color: var(--color-neutral-foreground-2-brand-pressed); /* Icon swap in the l1 block at the bottom of this file (D27 / S-J batch 1). */ } @variant forced-colors { @variant hover { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); color: Highlight; } @variant hover-active { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); color: Highlight; } } @@ -435,11 +435,11 @@ /* `padding: buttonSpacingSmall(3px) tokens.spacingHorizontalS`; 3px and 64px match no step */ @apply min-w-64 px-horizontal-s py-3; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } /* from useRootStyles.large */ @@ -451,11 +451,11 @@ */ @apply min-w-96 px-horizontal-l py-vertical-s; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } /* from useIconStyles.small — icon slot arg #4, keyed off the root's data-size */ @@ -488,26 +488,26 @@ * alone is not enough. */ @variant disabled-any { - background-color: var(--colorNeutralBackgroundDisabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } @variant hover { - background-color: var(--colorNeutralBackgroundDisabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; @@ -516,17 +516,17 @@ batch 1). */ & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @variant hover-active { - background-color: var(--colorNeutralBackgroundDisabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; @@ -535,7 +535,7 @@ batch 1). */ & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @@ -590,11 +590,11 @@ /* from useRootFocusStyles.small / .large — arg #12 */ @variant focus-visible-fui { @variant size-small { - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } @variant size-large { - border-radius: var(--borderRadiusLarge); + border-radius: var(--radius-large); } } } @@ -608,14 +608,14 @@ /* from useRootDisabledStyles.outline */ .outline { @variant disabled-any { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); @variant hover { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); } @variant hover-active { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); } } } @@ -648,23 +648,23 @@ * `appearance === 'primary'`, i.e. exactly when this class is on the element. */ @variant focus-visible-fui { - border-top-color: var(--colorStrokeFocus2); - border-right-color: var(--colorStrokeFocus2); - border-bottom-color: var(--colorStrokeFocus2); - border-left-color: var(--colorStrokeFocus2); + border-top-color: var(--color-stroke-focus-2); + border-right-color: var(--color-stroke-focus-2); + border-bottom-color: var(--color-stroke-focus-2); + border-left-color: var(--color-stroke-focus-2); box-shadow: - var(--shadow2), - 0 0 0 var(--spacing-thin) var(--colorStrokeFocus2) inset, - 0 0 0 var(--spacing-thick) var(--colorNeutralForegroundOnBrand) inset; + var(--shadow-2), + 0 0 0 var(--spacing-thin) var(--color-stroke-focus-2) inset, + 0 0 0 var(--spacing-thick) var(--color-neutral-foreground-on-brand) inset; @variant hover { - border-top-color: var(--colorStrokeFocus2); - border-right-color: var(--colorStrokeFocus2); - border-bottom-color: var(--colorStrokeFocus2); - border-left-color: var(--colorStrokeFocus2); + border-top-color: var(--color-stroke-focus-2); + border-right-color: var(--color-stroke-focus-2); + border-bottom-color: var(--color-stroke-focus-2); + border-left-color: var(--color-stroke-focus-2); box-shadow: - var(--shadow2), - 0 0 0 var(--spacing-thin) var(--colorStrokeFocus2) inset; + var(--shadow-2), + 0 0 0 var(--spacing-thin) var(--color-stroke-focus-2) inset; } } @@ -672,14 +672,14 @@ @supports (-moz-appearance: button) { @variant focus-visible-fui { box-shadow: - var(--shadow2), - 0 0 0 calc(var(--spacing-thin) + 0.25px) var(--colorStrokeFocus2) inset, - 0 0 0 var(--spacing-thick) var(--colorNeutralForegroundOnBrand) inset; + var(--shadow-2), + 0 0 0 calc(var(--spacing-thin) + 0.25px) var(--color-stroke-focus-2) inset, + 0 0 0 var(--spacing-thick) var(--color-neutral-foreground-on-brand) inset; @variant hover { box-shadow: - var(--shadow2), - 0 0 0 calc(var(--spacing-thin) + 0.25px) var(--colorStrokeFocus2) inset; + var(--shadow-2), + 0 0 0 calc(var(--spacing-thin) + 0.25px) var(--color-stroke-focus-2) inset; } } } @@ -688,14 +688,14 @@ /* from useRootDisabledStyles.subtle */ .subtle { @variant disabled-any { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; @variant hover { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -703,7 +703,7 @@ } @variant hover-active { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -715,14 +715,14 @@ /* from useRootDisabledStyles.transparent */ .transparent { @variant disabled-any { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; @variant hover { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -730,7 +730,7 @@ } @variant hover-active { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -768,19 +768,19 @@ /* from useRootStyles.circular + useRootFocusStyles.circular */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); @variant focus-visible-fui { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } } /* from useRootStyles.square + useRootFocusStyles.square */ .square { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); @variant focus-visible-fui { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } } diff --git a/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.module.css b/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.module.css index da86341378508f..f59374597e2b62 100644 --- a/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.module.css +++ b/packages/react-components/react-button/library/src/components/CompoundButton/CompoundButton.module.css @@ -78,28 +78,28 @@ height: auto; & .secondary-content { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } } /* from useRootStyles.primary — arg #4 */ .primary { & .secondary-content { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } /* from useRootStyles.subtle — arg #4 */ .subtle { & .secondary-content { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } } /* from useRootStyles.transparent — arg #4 */ .transparent { & .secondary-content { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } } @@ -116,30 +116,30 @@ .small { @apply px-horizontal-s pt-horizontal-s pb-horizontal-m-nudge; - font-size: var(--fontSizeBase300); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + line-height: var(--leading-base-300); } /* from useRootStyles.medium */ .medium { @apply px-horizontal-m pt-14 pb-horizontal-l; - font-size: var(--fontSizeBase300); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + line-height: var(--leading-base-300); } /* from useRootStyles.large */ .large { @apply px-horizontal-l pt-18 pb-horizontal-xl; - font-size: var(--fontSizeBase400); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + line-height: var(--leading-base-400); } /* from useRootStyles.disabled — arg #6 */ .disabled { & .secondary-content { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @@ -173,7 +173,7 @@ .root { @variant hover { & .secondary-content { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } } } @@ -182,7 +182,7 @@ .primary { @variant hover { & .secondary-content { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } } @@ -191,7 +191,7 @@ .subtle { @variant hover { & .secondary-content { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } } } @@ -200,7 +200,7 @@ .transparent { @variant hover { & .secondary-content { - color: var(--colorNeutralForeground2BrandHover); + color: var(--color-neutral-foreground-2-brand-hover); } } } @@ -209,7 +209,7 @@ .disabled { @variant hover { & .secondary-content { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -223,7 +223,7 @@ .root { @variant hover-active { & .secondary-content { - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } } } @@ -232,7 +232,7 @@ .primary { @variant hover-active { & .secondary-content { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } } @@ -241,7 +241,7 @@ .subtle { @variant hover-active { & .secondary-content { - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } } } @@ -250,7 +250,7 @@ .transparent { @variant hover-active { & .secondary-content { - color: var(--colorNeutralForeground2BrandPressed); + color: var(--color-neutral-foreground-2-brand-pressed); } } } @@ -259,7 +259,7 @@ .disabled { @variant hover-active { & .secondary-content { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -281,20 +281,20 @@ /* from useSecondaryContentStyles.base */ .secondary-content { line-height: 100%; - font-weight: var(--fontWeightRegular); + font-weight: var(--font-weight-regular); } /* from useSecondaryContentStyles.small / .medium / .large */ .secondary-content-small { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } .secondary-content-medium { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } .secondary-content-large { - font-size: var(--fontSizeBase300); + font-size: var(--text-base-300); } } diff --git a/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.module.css b/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.module.css index 735753dabb2a94..6c74056867af16 100644 --- a/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.module.css +++ b/packages/react-components/react-button/library/src/components/MenuButton/MenuButton.module.css @@ -69,10 +69,10 @@ /* from useRootExpandedStyles.outline */ .expanded-outline { - border-top-color: var(--colorNeutralStroke1Selected); - border-right-color: var(--colorNeutralStroke1Selected); - border-bottom-color: var(--colorNeutralStroke1Selected); - border-left-color: var(--colorNeutralStroke1Selected); + border-top-color: var(--color-neutral-stroke-1-selected); + border-right-color: var(--color-neutral-stroke-1-selected); + border-bottom-color: var(--color-neutral-stroke-1-selected); + border-left-color: var(--color-neutral-stroke-1-selected); /* Border widths are not spacing-powered utilities, so the D4 addendum's direct `var(--spacing-*)` form (`strokeWidthThicker`). */ @@ -81,34 +81,34 @@ border-bottom-width: var(--spacing-thicker); border-left-width: var(--spacing-thicker); - color: var(--colorNeutralForeground1Selected); + color: var(--color-neutral-foreground-1-selected); } /* from useRootExpandedStyles.primary */ .expanded-primary { - background-color: var(--colorBrandBackgroundSelected); + background-color: var(--color-brand-background-selected); } /* from useRootExpandedStyles.secondary */ .expanded-secondary { - background-color: var(--colorNeutralBackground1Selected); - border-top-color: var(--colorNeutralStroke1Selected); - border-right-color: var(--colorNeutralStroke1Selected); - border-bottom-color: var(--colorNeutralStroke1Selected); - border-left-color: var(--colorNeutralStroke1Selected); - color: var(--colorNeutralForeground1Selected); + background-color: var(--color-neutral-background-1-selected); + border-top-color: var(--color-neutral-stroke-1-selected); + border-right-color: var(--color-neutral-stroke-1-selected); + border-bottom-color: var(--color-neutral-stroke-1-selected); + border-left-color: var(--color-neutral-stroke-1-selected); + color: var(--color-neutral-foreground-1-selected); } /* from useRootExpandedStyles.subtle */ .expanded-subtle { - background-color: var(--colorSubtleBackgroundSelected); - color: var(--colorNeutralForeground2Selected); + background-color: var(--color-subtle-background-selected); + color: var(--color-neutral-foreground-2-selected); } /* from useRootExpandedStyles.transparent */ .expanded-transparent { - background-color: var(--colorTransparentBackgroundSelected); - color: var(--colorNeutralForeground2BrandSelected); + background-color: var(--color-transparent-background-selected); + color: var(--color-neutral-foreground-2-brand-selected); } } @@ -146,7 +146,7 @@ @apply size-12; font-size: calc(12px * var(--base-scale)); - line-height: var(--lineHeightBase200); + line-height: var(--leading-base-200); } /* from useMenuIconStyles.medium */ @@ -154,7 +154,7 @@ @apply size-12; font-size: calc(12px * var(--base-scale)); - line-height: var(--lineHeightBase200); + line-height: var(--leading-base-200); } /* from useMenuIconStyles.large */ @@ -162,7 +162,7 @@ @apply size-16; font-size: calc(16px * var(--base-scale)); - line-height: var(--lineHeightBase400); + line-height: var(--leading-base-400); } /* diff --git a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.module.css b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.module.css index 676771cb2beeea..73fb0fe8ddc703 100644 --- a/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.module.css +++ b/packages/react-components/react-button/library/src/components/SplitButton/SplitButton.module.css @@ -94,28 +94,28 @@ /* from useRootStyles.primary — arg #3 */ .primary { & .primary-action-button { - border-inline-end-color: var(--colorNeutralStrokeOnBrand); + border-inline-end-color: var(--color-neutral-stroke-on-brand); } } /* from useRootStyles.subtle — arg #3 */ .subtle { & .primary-action-button { - border-inline-end-color: var(--colorTransparentBackground); + border-inline-end-color: var(--color-transparent-background); } } /* from useRootStyles.transparent — arg #3 */ .transparent { & .primary-action-button { - border-inline-end-color: var(--colorTransparentBackground); + border-inline-end-color: var(--color-transparent-background); } } /* from useRootStyles.disabled — arg #4 */ .disabled { & .primary-action-button { - border-inline-end-color: var(--colorNeutralStrokeDisabled); + border-inline-end-color: var(--color-neutral-stroke-disabled); } } } @@ -128,7 +128,7 @@ .primary { @variant hover { & .primary-action-button { - border-inline-end-color: var(--colorNeutralStrokeOnBrand); + border-inline-end-color: var(--color-neutral-stroke-on-brand); } } } @@ -137,7 +137,7 @@ .subtle { @variant hover { & .primary-action-button { - border-inline-end-color: var(--colorTransparentBackgroundHover); + border-inline-end-color: var(--color-transparent-background-hover); } } } @@ -146,7 +146,7 @@ .transparent { @variant hover { & .primary-action-button { - border-inline-end-color: var(--colorTransparentBackgroundHover); + border-inline-end-color: var(--color-transparent-background-hover); } } } @@ -155,7 +155,7 @@ .disabled { @variant hover { & .primary-action-button { - border-inline-end-color: var(--colorNeutralStrokeDisabled); + border-inline-end-color: var(--color-neutral-stroke-disabled); } } } @@ -169,7 +169,7 @@ .primary { @variant hover-active { & .primary-action-button { - border-inline-end-color: var(--colorNeutralStrokeOnBrand); + border-inline-end-color: var(--color-neutral-stroke-on-brand); } } } @@ -178,7 +178,7 @@ .subtle { @variant hover-active { & .primary-action-button { - border-inline-end-color: var(--colorTransparentBackgroundPressed); + border-inline-end-color: var(--color-transparent-background-pressed); } } } @@ -187,7 +187,7 @@ .transparent { @variant hover-active { & .primary-action-button { - border-inline-end-color: var(--colorTransparentBackgroundPressed); + border-inline-end-color: var(--color-transparent-background-pressed); } } } @@ -196,7 +196,7 @@ .disabled { @variant hover-active { & .primary-action-button { - border-inline-end-color: var(--colorNeutralStrokeDisabled); + border-inline-end-color: var(--color-neutral-stroke-disabled); } } } diff --git a/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.module.css b/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.module.css index 71d758c0ce8d2e..5b940f42a811c1 100644 --- a/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.module.css +++ b/packages/react-components/react-button/library/src/components/ToggleButton/ToggleButton.module.css @@ -106,12 +106,12 @@ /* from useRootCheckedStyles.base — arg #4 */ .checked { - background-color: var(--colorNeutralBackground1Selected); - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); - color: var(--colorNeutralForeground1Selected); + background-color: var(--color-neutral-background-1-selected); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); + color: var(--color-neutral-foreground-1-selected); /* `shorthands.borderWidth(tokens.strokeWidthThin)`. Border widths are not spacing-powered utilities, so the D4 addendum's direct `var(--spacing-*)` form. */ @@ -126,11 +126,11 @@ /* from useRootCheckedStyles.outline — arg #6 */ .checked-outline { - background-color: var(--colorTransparentBackgroundSelected); - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); + background-color: var(--color-transparent-background-selected); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); border-top-width: var(--spacing-thicker); border-right-width: var(--spacing-thicker); border-bottom-width: var(--spacing-thicker); @@ -139,42 +139,42 @@ /* from useRootCheckedStyles.primary — arg #6 */ .checked-primary { - background-color: var(--colorBrandBackgroundSelected); + background-color: var(--color-brand-background-selected); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } /* from useRootCheckedStyles.subtle — arg #6 */ .checked-subtle { - background-color: var(--colorSubtleBackgroundSelected); + background-color: var(--color-subtle-background-selected); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2Selected); + color: var(--color-neutral-foreground-2-selected); } /* from useRootCheckedStyles.transparent — arg #6 */ .checked-transparent { - background-color: var(--colorTransparentBackgroundSelected); + background-color: var(--color-transparent-background-selected); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } /* from useCheckedAccessibleStyles.base — arg #7 */ .accessible-checked { - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } /* from useCheckedAccessibleStyles.outline — arg #8 @@ -188,18 +188,18 @@ /* from useCheckedAccessibleStyles.primary — arg #8; primary has an inner stroke when checked */ .accessible-checked-primary { - outline: var(--spacing-thin) solid var(--colorNeutralForegroundOnBrand); + outline: var(--spacing-thin) solid var(--color-neutral-foreground-on-brand); outline-offset: calc(var(--spacing-thicker) * -1); } /* from useRootDisabledStyles.base — arg #9 */ .disabled { - background-color: var(--colorNeutralBackgroundDisabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); } /* from useRootDisabledStyles.primary — arg #10 */ @@ -212,7 +212,7 @@ /* from useRootDisabledStyles.subtle — arg #10 */ .disabled-subtle { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -221,7 +221,7 @@ /* from useRootDisabledStyles.transparent — arg #10 */ .disabled-transparent { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -238,10 +238,10 @@ /* from useRootCheckedStyles.outline — arg #6, createCustomFocusIndicatorStyle({ borderColor }) */ .checked-outline { @variant focus-visible-fui { - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); } } @@ -251,7 +251,7 @@ */ .accessible-checked-primary { @variant focus-visible-fui { - outline: var(--spacing-thin) solid var(--colorNeutralForegroundOnBrand); + outline: var(--spacing-thin) solid var(--color-neutral-foreground-on-brand); outline-offset: calc(var(--spacing-thickest) * -1); } } @@ -264,67 +264,67 @@ /* from useRootCheckedStyles.base — arg #4 */ .checked { @variant hover { - background-color: var(--colorNeutralBackground1Hover); - border-top-color: var(--colorNeutralStroke1Hover); - border-right-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStroke1Hover); - border-left-color: var(--colorNeutralStroke1Hover); - color: var(--colorNeutralForeground1Hover); + background-color: var(--color-neutral-background-1-hover); + border-top-color: var(--color-neutral-stroke-1-hover); + border-right-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-1-hover); + border-left-color: var(--color-neutral-stroke-1-hover); + color: var(--color-neutral-foreground-1-hover); } } /* from useRootCheckedStyles.outline — arg #6 */ .checked-outline { @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); } } /* from useRootCheckedStyles.primary — arg #6 */ .checked-primary { @variant hover { - background-color: var(--colorBrandBackgroundHover); + background-color: var(--color-brand-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } /* from useRootCheckedStyles.subtle — arg #6 */ .checked-subtle { @variant hover { - background-color: var(--colorSubtleBackgroundHover); + background-color: var(--color-subtle-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } } /* from useRootCheckedStyles.transparent — arg #6 */ .checked-transparent { @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2BrandHover); + color: var(--color-neutral-foreground-2-brand-hover); } } /* from useCheckedAccessibleStyles.base — arg #7 */ .accessible-checked { @variant hover { - background-color: var(--colorBrandBackgroundHover); + background-color: var(--color-brand-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } @@ -338,7 +338,7 @@ .accessible-checked-subtle { @variant hover { & .icon { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } } @@ -346,12 +346,12 @@ /* from useRootDisabledStyles.base — arg #9 */ .disabled { @variant hover { - background-color: var(--colorNeutralBackgroundDisabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); } } @@ -368,7 +368,7 @@ /* from useRootDisabledStyles.subtle — arg #10 */ .disabled-subtle { @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -379,7 +379,7 @@ /* from useRootDisabledStyles.transparent — arg #10 */ .disabled-transparent { @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -396,79 +396,79 @@ /* from useRootCheckedStyles.base — arg #4 */ .checked { @variant hover-active { - background-color: var(--colorNeutralBackground1Pressed); - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); - color: var(--colorNeutralForeground1Pressed); + background-color: var(--color-neutral-background-1-pressed); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); + color: var(--color-neutral-foreground-1-pressed); } } /* from useRootCheckedStyles.outline — arg #6 */ .checked-outline { @variant hover-active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); } } /* from useRootCheckedStyles.primary — arg #6 */ .checked-primary { @variant hover-active { - background-color: var(--colorBrandBackgroundPressed); + background-color: var(--color-brand-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } /* from useRootCheckedStyles.subtle — arg #6 */ .checked-subtle { @variant hover-active { - background-color: var(--colorSubtleBackgroundPressed); + background-color: var(--color-subtle-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } } /* from useRootCheckedStyles.transparent — arg #6 */ .checked-transparent { @variant hover-active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForeground2BrandPressed); + color: var(--color-neutral-foreground-2-brand-pressed); } } /* from useCheckedAccessibleStyles.base — arg #7 */ .accessible-checked { @variant hover-active { - background-color: var(--colorBrandBackgroundPressed); + background-color: var(--color-brand-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } /* from useRootDisabledStyles.base — arg #9 */ .disabled { @variant hover-active { - background-color: var(--colorNeutralBackgroundDisabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); } } @@ -485,7 +485,7 @@ /* from useRootDisabledStyles.subtle — arg #10 */ .disabled-subtle { @variant hover-active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -496,7 +496,7 @@ /* from useRootDisabledStyles.transparent — arg #10 */ .disabled-transparent { @variant hover-active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; @@ -525,7 +525,7 @@ /* from useIconCheckedStyles.subtleOrTransparent — icon arg #2 */ .checked-icon { - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } } diff --git a/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css b/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css index c819291c448075..fb86855112af64 100644 --- a/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css +++ b/packages/react-components/react-button/stories/src/Button/ButtonLoading.module.css @@ -7,13 +7,13 @@ } .buttonNonInteractive { - background-color: var(--colorNeutralBackground1); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-background-1); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + color: var(--color-neutral-foreground-1); cursor: default; pointer-events: none; } .icon { - color: var(--colorStatusSuccessForeground1); + color: var(--color-status-success-foreground-1); } diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.module.css b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.module.css index d461d44c1f740e..b77b6a2965ff15 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.module.css +++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.module.css @@ -112,7 +112,7 @@ .divider { border-inline-end-width: calc(1px * var(--base-scale)); border-inline-end-style: solid; - border-inline-end-color: var(--colorNeutralStroke2); + border-inline-end-color: var(--color-neutral-stroke-2); /* inert on a statically-positioned element, reproduced from the compiled atomic */ top: 0; @@ -127,15 +127,15 @@ .go-today-button { @apply box-content self-end overflow-visible; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `shorthands.borderStyle('none')` — the four style longhands, i.e. `border-style` */ border-style: none; bottom: 0; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); font-family: inherit; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); @apply h-30; @@ -152,12 +152,12 @@ @apply px-horizontal-xs py-0; & div { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } @variant hover { - background-color: var(--colorTransparentBackground); - color: var(--colorBrandForeground1); + background-color: var(--color-transparent-background); + color: var(--color-brand-foreground-1); @apply cursor-pointer; @@ -166,7 +166,7 @@ reproduced verbatim. `outline-width` is NOT spacing-powered, so the stroke width is referenced directly as `var(--spacing-thin)` (D4 addendum, case 2). */ outline: var(--spacing-thin); - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } } @@ -176,12 +176,12 @@ component's Griffel source never emitted. */ @variant hover { @variant active { - color: var(--colorBrandForeground2); + color: var(--color-brand-foreground-2); } } @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @apply pointer-events-none; } diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.module.css b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.module.css index 0a56d1365a04c6..27b0c4175309b8 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.module.css +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/CalendarDay.module.css @@ -90,16 +90,16 @@ .month-and-year { @apply inline-block grow items-center overflow-hidden text-ellipsis whitespace-nowrap; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `shorthands.borderStyle('none')` — the four style longhands, i.e. `border-style` */ border-style: none; - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground1); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-1); font-family: inherit; - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); line-height: calc(28px * var(--base-scale)); /* `padding: '0 4px 0 10px'` → block 0, inline-start 10px (MNudge), inline-end 4px (XS). @@ -118,12 +118,12 @@ */ .header-is-clickable { @variant hover { - background-color: var(--colorBrandBackgroundInvertedHover); - color: var(--colorBrandForegroundOnLightHover); + background-color: var(--color-brand-background-inverted-hover); + color: var(--color-brand-foreground-on-light-hover); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); } /* `&:hover:active` — an INTERSECTION, written as nested variants so the compiled @@ -132,12 +132,12 @@ component's Griffel source never emitted. */ @variant hover { @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); - color: var(--colorBrandForegroundOnLightPressed); + background-color: var(--color-brand-background-inverted-pressed); + color: var(--color-brand-foreground-on-light-pressed); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); } } } @@ -149,33 +149,33 @@ /* from useHeaderIconButtonStyles.base */ .header-icon-button { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `shorthands.borderStyle('none')` — the four style longhands */ border-style: none; - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground3); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-3); @apply relative block h-28 w-28 overflow-visible p-0 text-center; font-family: inherit; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); line-height: calc(28px * var(--base-scale)); @variant hover { - background-color: var(--colorBrandBackgroundInvertedHover); - color: var(--colorBrandForegroundOnLightHover); + background-color: var(--color-brand-background-inverted-hover); + color: var(--color-brand-foreground-on-light-hover); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); } @variant hover { @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); - color: var(--colorBrandForegroundOnLightPressed); + background-color: var(--color-brand-background-inverted-pressed); + color: var(--color-brand-foreground-on-light-pressed); } } } @@ -196,7 +196,7 @@ &, &:where(:disabled), & button { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @apply pointer-events-none; diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.module.css b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.module.css index 8a721e665d11c7..c0469574a77bd3 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.module.css +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDayGrid/CalendarDayGrid.module.css @@ -100,12 +100,12 @@ @layer fui.components.l1 { /* from useDayCellStyles.base — dayCell arg #2 */ .day-cell { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); @apply relative m-0 cursor-pointer p-horizontal-xxs; - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); @variant forced-colors { background-color: Window; @@ -113,8 +113,8 @@ } &.hover-style { - color: var(--colorNeutralForeground1Static); - background-color: var(--colorBrandBackgroundInvertedHover); + color: var(--color-neutral-foreground-1-static); + background-color: var(--color-brand-background-inverted-hover); @variant forced-colors { outline: calc(1px * var(--base-scale)) solid Highlight; @@ -127,8 +127,8 @@ } &.pressed-style { - color: var(--colorNeutralForeground1Static); - background-color: var(--colorBrandBackgroundInvertedPressed); + color: var(--color-neutral-foreground-1-static); + background-color: var(--color-brand-background-inverted-pressed); @variant forced-colors { background-color: Window; @@ -152,8 +152,8 @@ * `outlineRadius` / `outlineColor` / `outlineWidth` from the option object, so the * `shorthands.borderWidth(tokens.strokeWidthThick)` spread in the Griffel source is * inert and is NOT reproduced (react-tabster/src/focus/createFocusOutlineStyle.ts:55-80). - * Radius and color therefore stay at the utility's defaults (`--borderRadiusMedium`, - * `--colorStrokeFocus2`), and with no `outlineOffset` the utility's + * Radius and color therefore stay at the utility's defaults (`--radius-medium`, + * `--color-stroke-focus-2`), and with no `outlineOffset` the utility's * `calc(0px - - 0px)` reproduces `calc( * -1)` exactly. * * The knob is set on `&::after`, not on the element: the `fui-focus-outline` utility @@ -187,8 +187,8 @@ /* from useDaySelectedStyles.base — dayCell arg #5 */ .day-selected { - background-color: var(--colorBrandBackgroundInvertedSelected); - color: var(--colorNeutralForeground1Static); + background-color: var(--color-brand-background-inverted-selected); + color: var(--color-neutral-foreground-1-static); @variant forced-colors { background-color: Highlight; @@ -208,8 +208,8 @@ &:where(:hover), &.hover-style, &.pressed-style { - color: var(--colorNeutralForeground1Static); - background-color: var(--colorBrandBackgroundInvertedSelected); + color: var(--color-neutral-foreground-1-static); + background-color: var(--color-brand-background-inverted-selected); @variant forced-colors { background-color: Highlight; @@ -226,7 +226,7 @@ /* from useDaySingleSelectedStyles.base — dayCell arg #6 */ .day-single-selected { - color: var(--colorNeutralForeground1Static); + color: var(--color-neutral-foreground-1-static); & > .day-marker { @variant forced-colors { @@ -235,7 +235,7 @@ } & > .day-button { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* `border: '1px solid '` expanded to longhands: `.day-button` below resets `border-style` and the forced-colors block re-sets all four colors, so the @@ -248,10 +248,10 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorBrandStroke1); - border-right-color: var(--colorBrandStroke1); - border-bottom-color: var(--colorBrandStroke1); - border-left-color: var(--colorBrandStroke1); + border-top-color: var(--color-brand-stroke-1); + border-right-color: var(--color-brand-stroke-1); + border-bottom-color: var(--color-brand-stroke-1); + border-left-color: var(--color-brand-stroke-1); /* * ⚠ REST-STATE RESTRICTION — the one place in this package where `:where()` @@ -272,7 +272,7 @@ * this component's competitors are plain `:hover` and plain `:active`. */ &:where(:not(:hover, :active)) { - background-color: var(--colorBrandBackgroundInvertedSelected); + background-color: var(--color-brand-background-inverted-selected); } /* forced-colors is Griffel bucket `m`, which is inserted after `h`/`a`, so this half @@ -308,19 +308,19 @@ /* from useWeekNumberCellStyles.base */ .week-number-cell { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `borderRight: '1px solid '` — rtl-css-js swaps borderRight↔borderLeft, a pure PROPERTY flip, so it becomes the `border-inline-end-*` longhands */ border-inline-end-width: calc(1px * var(--base-scale)); border-inline-end-style: solid; - border-inline-end-color: var(--colorNeutralStroke2); + border-inline-end-color: var(--color-neutral-stroke-2); @apply m-0 box-border h-28 w-28 p-0; - color: var(--colorNeutralForeground4); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); + color: var(--color-neutral-foreground-4); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); } /* @@ -338,8 +338,8 @@ & button, &.hover-style, &.pressed-style { - background-color: var(--colorTransparentBackground); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-transparent-background); + color: var(--color-neutral-foreground-disabled); @apply pointer-events-none; } @@ -356,8 +356,8 @@ * (it used to be the bare `fui-CalendarDayGrid__dayOutsideNavigatedMonth` static). */ .lighten-days-outside-navigated-month { - color: var(--colorNeutralForeground4); - font-weight: var(--fontWeightRegular); + color: var(--color-neutral-foreground-4); + font-weight: var(--font-weight-regular); @variant forced-colors { color: GrayText; @@ -374,7 +374,7 @@ * `line-height: inherit`) never applied to anything. */ .day-button { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `border: 'none'` — the style longhands are the half that carries it for layout and paint (react-drawer/InlineDrawer precedent) */ @@ -384,17 +384,17 @@ @apply h-24 w-24 cursor-pointer overflow-visible p-0; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); font-weight: inherit; line-height: calc(24px * var(--base-scale)); @variant hover { - background-color: var(--colorBrandBackgroundInvertedHover); - border-radius: var(--borderRadiusMedium); + background-color: var(--color-brand-background-inverted-hover); + border-radius: var(--radius-medium); } @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); + background-color: var(--color-brand-background-inverted-pressed); } } @@ -402,11 +402,11 @@ .day-is-today { @apply flex items-center justify-center; - color: var(--colorNeutralForegroundOnBrand); - font-weight: var(--fontWeightSemibold); + color: var(--color-neutral-foreground-on-brand); + font-weight: var(--font-weight-semibold); & > .day-marker { - background-color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-neutral-foreground-on-brand); @variant forced-colors { background-color: Window; @@ -430,7 +430,7 @@ /* from useDayMarkerStyles.base */ .day-marker { - background-color: var(--colorBrandForeground2); + background-color: var(--color-brand-foreground-2); border-radius: 100%; @apply absolute bottom-1 m-auto h-4 w-4; @@ -457,19 +457,19 @@ */ .corners { &.top-left-corner-date { - border-start-start-radius: var(--borderRadiusMedium); + border-start-start-radius: var(--radius-medium); } &.top-right-corner-date { - border-start-end-radius: var(--borderRadiusMedium); + border-start-end-radius: var(--radius-medium); } &.bottom-left-corner-date { - border-end-start-radius: var(--borderRadiusMedium); + border-end-start-radius: var(--radius-medium); } &.bottom-right-corner-date { - border-end-end-radius: var(--borderRadiusMedium); + border-end-end-radius: var(--radius-medium); } } @@ -477,7 +477,7 @@ .day-today-marker { @apply flex h-20 w-20 items-center justify-center; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); border-radius: 100%; line-height: calc(20px * var(--base-scale)); diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.module.css b/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.module.css index c0f0e298693572..7148e9e745e852 100644 --- a/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.module.css +++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarPicker/CalendarPicker.module.css @@ -88,19 +88,19 @@ /* from useCurrentItemButtonStyles.base — currentItemButton arg #2 */ .current-item-button { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `shorthands.borderStyle('none')` — the four style longhands, i.e. `border-style` */ border-style: none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); color: inherit; @apply grow overflow-visible; font-family: inherit; - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); /* `padding: '0 4px 0 10px'` → block 0, inline-start 10px (MNudge), inline-end 4px (XS) */ @apply py-0 ps-horizontal-m-nudge pe-horizontal-xs; @@ -117,12 +117,12 @@ */ .has-header-click-callback { @variant hover { - background-color: var(--colorBrandBackgroundInvertedHover); - color: var(--colorBrandForegroundOnLightHover); + background-color: var(--color-brand-background-inverted-hover); + color: var(--color-brand-foreground-on-light-hover); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); } /* `&:hover:active` — an INTERSECTION, written as nested variants so the compiled @@ -131,12 +131,12 @@ component's Griffel source never emitted. */ @variant hover { @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); - color: var(--colorBrandForegroundOnLightPressed); + background-color: var(--color-brand-background-inverted-pressed); + color: var(--color-brand-foreground-on-light-pressed); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); } } } @@ -148,34 +148,34 @@ /* from useNavigationButtonStyles.base */ .navigation-button { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `border: 'none'` — the style longhands are the half that carries it for layout and paint (react-drawer/InlineDrawer precedent) */ border-style: none; - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground1); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-1); @apply relative block h-28 min-h-28 w-28 min-w-28 overflow-visible p-0 text-center; font-family: inherit; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); line-height: calc(28px * var(--base-scale)); @variant hover { - background-color: var(--colorBrandBackgroundInvertedHover); - color: var(--colorBrandForegroundOnLightHover); + background-color: var(--color-brand-background-inverted-hover); + color: var(--color-brand-foreground-on-light-hover); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); } @variant hover { @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); - color: var(--colorBrandForegroundOnLightPressed); + background-color: var(--color-brand-background-inverted-pressed); + color: var(--color-brand-foreground-on-light-pressed); } } } @@ -197,18 +197,18 @@ /* from useItemButtonStyles.base — itemButton arg #2 */ .item-button { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* `border: 'none'` — style longhands */ border-style: none; - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground3); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-3); @apply h-40 min-h-40 w-40 min-w-40 overflow-visible p-0; font-family: inherit; - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); line-height: calc(40px * var(--base-scale)); /* `margin: '0 12px 0 0'` → block 0, inline-end 12px (the M step), inline-start 0. @@ -226,16 +226,16 @@ } & div { - font-weight: var(--fontWeightRegular); + font-weight: var(--font-weight-regular); } @variant hover { - background-color: var(--colorBrandBackgroundInvertedHover); - color: var(--colorNeutralForeground1Static); + background-color: var(--color-brand-background-inverted-hover); + color: var(--color-neutral-foreground-1-static); @apply cursor-pointer; - outline: calc(1px * var(--base-scale)) solid var(--colorTransparentStroke); + outline: calc(1px * var(--base-scale)) solid var(--color-transparent-stroke); @variant forced-colors { background-color: Window; @@ -247,7 +247,7 @@ @variant hover { @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); + background-color: var(--color-brand-background-inverted-pressed); @variant forced-colors { background-color: Window; @@ -260,9 +260,9 @@ /* from useCurrentStyles.highlightCurrent — itemButton arg #3 (highlightCurrent) */ .highlight-current { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); - font-weight: var(--fontWeightSemibold); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); + font-weight: var(--font-weight-semibold); @variant forced-colors { background-color: WindowText; @@ -277,8 +277,8 @@ */ &:where(:hover), &:where(:hover):where(:active) { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); @variant forced-colors { background-color: WindowText; @@ -290,9 +290,9 @@ /* from useSelectedStyles.highlightSelected — itemButton arg #4 (highlightSelected) */ .highlight-selected { - background-color: var(--colorBrandBackgroundInvertedSelected); - color: var(--colorNeutralForeground1Static); - font-weight: var(--fontWeightSemibold); + background-color: var(--color-brand-background-inverted-selected); + color: var(--color-neutral-foreground-1-static); + font-weight: var(--font-weight-semibold); @variant forced-colors { background-color: Highlight; @@ -301,12 +301,12 @@ } & div { - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } @variant hover { - background-color: var(--colorBrandBackgroundInvertedSelected); - color: var(--colorNeutralForeground1Static); + background-color: var(--color-brand-background-inverted-selected); + color: var(--color-neutral-foreground-1-static); @variant forced-colors { background-color: Highlight; @@ -317,7 +317,7 @@ @variant hover { @variant active { - background-color: var(--colorBrandBackgroundInvertedPressed); + background-color: var(--color-brand-background-inverted-pressed); } } } @@ -336,7 +336,7 @@ &, &:where(:disabled), & button { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @apply pointer-events-none; } diff --git a/packages/react-components/react-card/library/src/components/Card/Card.module.css b/packages/react-components/react-card/library/src/components/Card/Card.module.css index 40df6278e9dcbf..6e1c572bb0ef43 100644 --- a/packages/react-components/react-card/library/src/components/Card/Card.module.css +++ b/packages/react-components/react-card/library/src/components/Card/Card.module.css @@ -146,7 +146,7 @@ padding: var(--fui-Card--size); gap: var(--fui-Card--size); - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); /* Border set on an ::after pseudo-element so CardPreview can render behind it. */ &::after { @@ -211,17 +211,17 @@ .root { @variant size-small { --fui-Card--size: calc(8px * var(--base-scale)); - --fui-Card--border-radius: var(--borderRadiusSmall); + --fui-Card--border-radius: var(--radius-small); } @variant size-medium { --fui-Card--size: calc(12px * var(--base-scale)); - --fui-Card--border-radius: var(--borderRadiusMedium); + --fui-Card--border-radius: var(--radius-medium); } @variant size-large { --fui-Card--size: calc(16px * var(--base-scale)); - --fui-Card--border-radius: var(--borderRadiusLarge); + --fui-Card--border-radius: var(--radius-large); } } } @@ -234,50 +234,50 @@ * `shorthands.borderColor()` expanded to four physical longhands (cookbook §2). */ .filled { - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow4); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-4); &::after { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } } .filled-alternative { - background-color: var(--colorNeutralBackground2); - box-shadow: var(--shadow4); + background-color: var(--color-neutral-background-2); + box-shadow: var(--shadow-4); &::after { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } } .outline { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); box-shadow: none; &::after { - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); } } .subtle { - background-color: var(--colorSubtleBackground); + background-color: var(--color-subtle-background); box-shadow: none; &::after { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } } } @@ -297,24 +297,24 @@ @variant interactive { @apply cursor-pointer; - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow4); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-4); &::after { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } @variant hover { - color: var(--colorNeutralForeground1Hover); - background-color: var(--colorNeutralBackground1Hover); - box-shadow: var(--shadow8); + color: var(--color-neutral-foreground-1-hover); + background-color: var(--color-neutral-background-1-hover); + box-shadow: var(--shadow-8); } @variant active { - background-color: var(--colorNeutralBackground1Pressed); + background-color: var(--color-neutral-background-1-pressed); } } } @@ -323,24 +323,24 @@ @variant interactive { @apply cursor-pointer; - background-color: var(--colorNeutralBackground2); - box-shadow: var(--shadow4); + background-color: var(--color-neutral-background-2); + box-shadow: var(--shadow-4); &::after { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } @variant hover { - color: var(--colorNeutralForeground2Hover); - background-color: var(--colorNeutralBackground2Hover); - box-shadow: var(--shadow8); + color: var(--color-neutral-foreground-2-hover); + background-color: var(--color-neutral-background-2-hover); + box-shadow: var(--shadow-8); } @variant active { - background-color: var(--colorNeutralBackground2Pressed); + background-color: var(--color-neutral-background-2-pressed); } } } @@ -349,36 +349,36 @@ @variant interactive { @apply cursor-pointer; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); box-shadow: none; &::after { - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); } @variant hover { - color: var(--colorNeutralForeground1Hover); - background-color: var(--colorTransparentBackgroundHover); + color: var(--color-neutral-foreground-1-hover); + background-color: var(--color-transparent-background-hover); &::after { - border-top-color: var(--colorNeutralStroke1Hover); - border-right-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStroke1Hover); - border-left-color: var(--colorNeutralStroke1Hover); + border-top-color: var(--color-neutral-stroke-1-hover); + border-right-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-1-hover); + border-left-color: var(--color-neutral-stroke-1-hover); } } @variant active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); &::after { - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); } } } @@ -388,23 +388,23 @@ @variant interactive { @apply cursor-pointer; - background-color: var(--colorSubtleBackground); + background-color: var(--color-subtle-background); box-shadow: none; &::after { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } @variant hover { - color: var(--colorNeutralForeground1Hover); - background-color: var(--colorSubtleBackgroundHover); + color: var(--color-neutral-foreground-1-hover); + background-color: var(--color-subtle-background-hover); } @variant active { - background-color: var(--colorSubtleBackgroundPressed); + background-color: var(--color-subtle-background-pressed); } } } @@ -419,72 +419,72 @@ */ .filled { @variant selected { - background-color: var(--colorNeutralBackground1Selected); + background-color: var(--color-neutral-background-1-selected); &::after { - border-top-color: var(--colorNeutralStroke1Selected); - border-right-color: var(--colorNeutralStroke1Selected); - border-bottom-color: var(--colorNeutralStroke1Selected); - border-left-color: var(--colorNeutralStroke1Selected); + border-top-color: var(--color-neutral-stroke-1-selected); + border-right-color: var(--color-neutral-stroke-1-selected); + border-bottom-color: var(--color-neutral-stroke-1-selected); + border-left-color: var(--color-neutral-stroke-1-selected); } @variant hover { - color: var(--colorNeutralForeground1Selected); - background-color: var(--colorNeutralBackground1Selected); + color: var(--color-neutral-foreground-1-selected); + background-color: var(--color-neutral-background-1-selected); } } } .filled-alternative { @variant selected { - background-color: var(--colorNeutralBackground2Selected); + background-color: var(--color-neutral-background-2-selected); &::after { - border-top-color: var(--colorNeutralStroke1Selected); - border-right-color: var(--colorNeutralStroke1Selected); - border-bottom-color: var(--colorNeutralStroke1Selected); - border-left-color: var(--colorNeutralStroke1Selected); + border-top-color: var(--color-neutral-stroke-1-selected); + border-right-color: var(--color-neutral-stroke-1-selected); + border-bottom-color: var(--color-neutral-stroke-1-selected); + border-left-color: var(--color-neutral-stroke-1-selected); } @variant hover { - color: var(--colorNeutralForeground2Selected); - background-color: var(--colorNeutralBackground2Selected); + color: var(--color-neutral-foreground-2-selected); + background-color: var(--color-neutral-background-2-selected); } } } .outline { @variant selected { - background-color: var(--colorTransparentBackgroundSelected); + background-color: var(--color-transparent-background-selected); &::after { - border-top-color: var(--colorNeutralStroke1Selected); - border-right-color: var(--colorNeutralStroke1Selected); - border-bottom-color: var(--colorNeutralStroke1Selected); - border-left-color: var(--colorNeutralStroke1Selected); + border-top-color: var(--color-neutral-stroke-1-selected); + border-right-color: var(--color-neutral-stroke-1-selected); + border-bottom-color: var(--color-neutral-stroke-1-selected); + border-left-color: var(--color-neutral-stroke-1-selected); } @variant hover { - color: var(--colorNeutralForeground1Selected); - background-color: var(--colorTransparentBackgroundSelected); + color: var(--color-neutral-foreground-1-selected); + background-color: var(--color-transparent-background-selected); } } } .subtle { @variant selected { - background-color: var(--colorSubtleBackgroundSelected); + background-color: var(--color-subtle-background-selected); &::after { - border-top-color: var(--colorNeutralStroke1Selected); - border-right-color: var(--colorNeutralStroke1Selected); - border-bottom-color: var(--colorNeutralStroke1Selected); - border-left-color: var(--colorNeutralStroke1Selected); + border-top-color: var(--color-neutral-stroke-1-selected); + border-right-color: var(--color-neutral-stroke-1-selected); + border-bottom-color: var(--color-neutral-stroke-1-selected); + border-left-color: var(--color-neutral-stroke-1-selected); } @variant hover { - color: var(--colorNeutralForeground1Selected); - background-color: var(--colorSubtleBackgroundSelected); + color: var(--color-neutral-foreground-1-selected); + background-color: var(--color-subtle-background-selected); } } } @@ -517,7 +517,7 @@ * into `::after` normally — the reset above already relies on that. * * Byte-check against the compiled atomics: - * .fpqizxz[…]::after{border:var(--stroke-width-thick) solid var(--colorStrokeFocus2)} + * .fpqizxz[…]::after{border:var(--stroke-width-thick) solid var(--color-stroke-focus-2)} * .fnd8nzh[…]::after{border-radius:var(--fui-Card--border-radius)} * .f15fr7a0[…]::after{top:calc(0px - var(--stroke-width-thick) - -2px)} (×4 sides) * The utility's `calc(0px - var(--fui-focus-outline-width, 2px) - @@ -648,84 +648,84 @@ @variant disabled { @apply cursor-not-allowed select-none; - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorNeutralBackgroundDisabled); - box-shadow: var(--shadow2); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-neutral-background-disabled); + box-shadow: var(--shadow-2); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); &::before { @apply absolute; content: ''; inset: 0; - z-index: calc(var(--zIndexContent, 1) + 1); + z-index: calc(var(--z-index-content, 1) + 1); } &::after { - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); } /* the `'&:hover, &:active': disabledStyles` restatement */ @variant hover { @apply cursor-not-allowed select-none; - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorNeutralBackgroundDisabled); - box-shadow: var(--shadow2); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-neutral-background-disabled); + box-shadow: var(--shadow-2); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); &::before { @apply absolute; content: ''; inset: 0; - z-index: calc(var(--zIndexContent, 1) + 1); + z-index: calc(var(--z-index-content, 1) + 1); } &::after { - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); } } @variant active { @apply cursor-not-allowed select-none; - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorNeutralBackgroundDisabled); - box-shadow: var(--shadow2); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-neutral-background-disabled); + box-shadow: var(--shadow-2); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); &::before { @apply absolute; content: ''; inset: 0; - z-index: calc(var(--zIndexContent, 1) + 1); + z-index: calc(var(--z-index-content, 1) + 1); } &::after { - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); } } } @@ -741,29 +741,29 @@ */ .outline { @variant disabled { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); box-shadow: none; - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); @variant hover { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); box-shadow: none; } @variant active { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); box-shadow: none; } &::after { - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); } } } @@ -774,7 +774,7 @@ .floating-action { @apply absolute end-4 top-4; - z-index: var(--zIndexContent, 1); + z-index: var(--z-index-content, 1); } /* from useCardStyles.hiddenCheckbox — checkbox slot arg #2 */ diff --git a/packages/react-components/react-card/stories/src/Card/CardAction.module.css b/packages/react-components/react-card/stories/src/Card/CardAction.module.css index 4dad16bd755ec5..c3e8ca27c00891 100644 --- a/packages/react-components/react-card/stories/src/Card/CardAction.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardAction.module.css @@ -24,11 +24,11 @@ } .link { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } .link:hover { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); text-decoration: none; } diff --git a/packages/react-components/react-card/stories/src/Card/CardAppearance.module.css b/packages/react-components/react-card/stories/src/Card/CardAppearance.module.css index c933ad2d8a5b14..075f3050bef787 100644 --- a/packages/react-components/react-card/stories/src/Card/CardAppearance.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardAppearance.module.css @@ -23,7 +23,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .logo { diff --git a/packages/react-components/react-card/stories/src/Card/CardOrientation.module.css b/packages/react-components/react-card/stories/src/Card/CardOrientation.module.css index 7a11be00676c1c..31a1e1433b2ba1 100644 --- a/packages/react-components/react-card/stories/src/Card/CardOrientation.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardOrientation.module.css @@ -34,7 +34,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .text { diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectable.module.css b/packages/react-components/react-card/stories/src/Card/CardSelectable.module.css index 9e82ba1fb2377f..a5d973cf84fdd6 100644 --- a/packages/react-components/react-card/stories/src/Card/CardSelectable.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardSelectable.module.css @@ -14,20 +14,20 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .smallRadius { - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } .grayBackground { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } .logoBadge { padding: 5px; - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); background-color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), diff --git a/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.module.css b/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.module.css index a21abf58203e24..e37e9aed8bd623 100644 --- a/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardSelectableIndicator.module.css @@ -21,20 +21,20 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .smallRadius { - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } .grayBackground { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } .logoBadge { padding: 5px; - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); background-color: #fff; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), diff --git a/packages/react-components/react-card/stories/src/Card/CardSize.module.css b/packages/react-components/react-card/stories/src/Card/CardSize.module.css index 0ae1edb2209cd3..1a15213a72b2e0 100644 --- a/packages/react-components/react-card/stories/src/Card/CardSize.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardSize.module.css @@ -32,7 +32,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .cardFooter { diff --git a/packages/react-components/react-card/stories/src/Card/CardTemplates.module.css b/packages/react-components/react-card/stories/src/Card/CardTemplates.module.css index aae07271279cc4..443ab3f2d07da6 100644 --- a/packages/react-components/react-card/stories/src/Card/CardTemplates.module.css +++ b/packages/react-components/react-card/stories/src/Card/CardTemplates.module.css @@ -29,7 +29,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .taskCheckbox { From be509f6361ce4de092fae24b385df4855634a355 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:44:00 -0700 Subject: [PATCH 617/640] refactor(theming): old->canonical token var sweep 3/8 (Phase 2a) Areas: packages/react-components/react-carousel, packages/react-components/react-checkbox, packages/react-components/react-color-picker, packages/react-components/react-combobox, packages/react-components/react-datepicker-compat, packages/react-components/react-dialog, packages/react-components/react-divider Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../CarouselAutoplayButton.module.css | 12 +- .../CarouselCard/CarouselCard.module.css | 4 +- .../CarouselNav/CarouselNav.module.css | 12 +- .../CarouselNavButton.module.css | 22 +-- .../CarouselNavImageButton.module.css | 12 +- .../Carousel/CarouselActionCards.module.css | 14 +- .../Carousel/CarouselAppearance.module.css | 18 +- .../src/Carousel/CarouselAutoplay.module.css | 30 ++-- .../Carousel/CarouselControlled.module.css | 28 ++-- .../src/Carousel/CarouselDefault.module.css | 18 +- .../src/Carousel/CarouselEventing.module.css | 36 ++-- .../CarouselFirstRunExperience.module.css | 16 +- .../Carousel/CarouselResponsive.module.css | 14 +- .../Carousel/CarouselTopNavigation.module.css | 30 ++-- .../CarouselNav/CarouselNavDefault.module.css | 10 +- .../components/Checkbox/Checkbox.module.css | 64 +++---- .../AlphaSlider/AlphaSlider.module.css | 4 +- .../components/ColorArea/ColorArea.module.css | 22 +-- .../ColorSlider/ColorSlider.module.css | 22 +-- .../ColorAndSwatchPicker.module.css | 4 +- .../ColorPicker/ColorAreaDefault.module.css | 2 +- .../components/Combobox/Combobox.module.css | 158 +++++++++--------- .../components/Dropdown/Dropdown.module.css | 144 ++++++++-------- .../src/components/Listbox/Listbox.module.css | 4 +- .../src/components/Option/Option.module.css | 74 ++++---- .../OptionGroup/OptionGroup.module.css | 12 +- .../Combobox/ComboboxAppearance.module.css | 8 +- .../Combobox/ComboboxMultiselect.module.css | 8 +- .../Dropdown/DropdownAppearance.module.css | 12 +- .../DatePicker/DatePicker.module.css | 30 ++-- .../DialogContent/DialogContent.module.css | 8 +- .../DialogSurface/DialogSurface.module.css | 22 +-- .../DialogTitle/DialogTitle.module.css | 8 +- .../src/Dialog/DialogMotionCustom.module.css | 4 +- .../src/components/Divider/Divider.module.css | 48 +++--- .../Divider/DividerAlignContent.module.css | 2 +- .../src/Divider/DividerAppearance.module.css | 2 +- .../Divider/DividerCustomStyles.module.css | 6 +- .../Divider/DividerCustomStyles.stories.tsx | 2 +- .../src/Divider/DividerDefault.module.css | 2 +- .../src/Divider/DividerInset.module.css | 2 +- .../src/Divider/DividerVertical.module.css | 2 +- 42 files changed, 476 insertions(+), 476 deletions(-) diff --git a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.module.css b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.module.css index 9c5fc8d4159ead..f54d48accb2c76 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.module.css @@ -120,17 +120,17 @@ */ .rest-background { @variant at-rest { - background-color: var(--colorNeutralBackgroundAlpha); + background-color: var(--color-neutral-background-alpha); } } .rest-stroke-foreground { @variant at-rest { - border-block-start-color: var(--colorTransparentStroke); - border-inline-end-color: var(--colorTransparentStroke); - border-inline-start-color: var(--colorTransparentStroke); - border-block-end-color: var(--colorTransparentStroke); - color: var(--colorNeutralForeground2); + border-block-start-color: var(--color-transparent-stroke); + border-inline-end-color: var(--color-transparent-stroke); + border-inline-start-color: var(--color-transparent-stroke); + border-block-end-color: var(--color-transparent-stroke); + color: var(--color-neutral-foreground-2); } } } diff --git a/packages/react-components/react-carousel/library/src/components/CarouselCard/CarouselCard.module.css b/packages/react-components/react-carousel/library/src/components/CarouselCard/CarouselCard.module.css index 4451d90017a01f..7fec1e69f25ac2 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselCard/CarouselCard.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselCard/CarouselCard.module.css @@ -66,8 +66,8 @@ .elevated { @apply overflow-hidden; - border-radius: var(--borderRadiusXLarge); - box-shadow: var(--shadow16); + border-radius: var(--radius-x-large); + box-shadow: var(--shadow-16); } } diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css b/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css index 31a6ae12b0e35e..9fd5faf7fa0926 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselNav/CarouselNav.module.css @@ -31,8 +31,8 @@ * shared utility to `@apply` — the declarations are the component's own and are written * under the catalog `focus-visible-fui` variant. Compiled selectors reproduced 1:1: * - * .f89hs3r[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid var(--colorStrokeFocus2)} - * .f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium)} + * .f89hs3r[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid var(--color-stroke-focus-2)} + * .f2krc9w[data-fui-focus-visible]{border-radius:var(--radius-medium)} * .f8hki3x/.f1d2448m/.ffh67wi/.f1bjia2o[data-fui-focus-visible]{border-*-color:transparent} * * ── ORDERING IS LOAD-BEARING inside this one rule ─────────────────────────────────── @@ -73,13 +73,13 @@ hit-testing inside CarouselNavContainer's `pointer-events: none` overlay. */ pointer-events: all; - background-color: var(--colorNeutralBackgroundAlpha); - border-radius: var(--borderRadiusXLarge); + background-color: var(--color-neutral-background-alpha); + border-radius: var(--radius-x-large); /* MUST stay last — see "ORDERING IS LOAD-BEARING" in the header. */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); border-block-start-color: transparent; border-inline-end-color: transparent; border-inline-start-color: transparent; diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.module.css b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.module.css index bea868fe700d7a..b09bfbfd8aceba 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselNavButton/CarouselNavButton.module.css @@ -137,7 +137,7 @@ hit-testing inside CarouselNavContainer's `pointer-events: none` overlay. */ pointer-events: all; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-block-start-width: 0; border-inline-end-width: 0; border-inline-start-width: 0; @@ -150,8 +150,8 @@ content: ''; border: none; border-radius: 50%; - background-color: var(--colorNeutralForeground1); - color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-foreground-1); + color: var(--color-neutral-foreground-1); } } } @@ -194,8 +194,8 @@ @variant focus-visible-fui { @apply -m-thick; - border: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + border: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } @@ -226,8 +226,8 @@ @variant focus-visible-fui { @apply -m-thick; - border: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + border: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } @@ -237,7 +237,7 @@ /* from useStyles.brand — arg #4, REST half (see reason (c) in the header). */ .brand { &::after { - background-color: var(--colorCompoundBrandBackground); + background-color: var(--color-compound-brand-background); opacity: 1; } } @@ -253,7 +253,7 @@ @variant not-selected { &::after { opacity: 0.6; - background-color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-foreground-1); } } } @@ -288,14 +288,14 @@ .brand { @variant hover { &::after { - background-color: var(--colorCompoundBrandBackgroundHover); + background-color: var(--color-compound-brand-background-hover); opacity: 1; } } @variant active { &::after { - background-color: var(--colorCompoundBrandBackgroundPressed); + background-color: var(--color-compound-brand-background-pressed); opacity: 1; } } diff --git a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css index 7494d3ff092e38..cdf05609889fc4 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css +++ b/packages/react-components/react-carousel/library/src/components/CarouselNavImageButton/CarouselNavImageButton.module.css @@ -79,11 +79,11 @@ @apply ms-horizontal-xs me-horizontal-xs mt-0 mb-0; @apply h-40 w-40; - border-block-start-color: var(--colorTransparentStroke); - border-inline-end-color: var(--colorTransparentStroke); - border-inline-start-color: var(--colorTransparentStroke); - border-block-end-color: var(--colorTransparentStroke); - border-radius: var(--borderRadiusSmall); + border-block-start-color: var(--color-transparent-stroke); + border-inline-end-color: var(--color-transparent-stroke); + border-inline-start-color: var(--color-transparent-stroke); + border-block-end-color: var(--color-transparent-stroke); + border-radius: var(--radius-small); @variant hover { @apply cursor-pointer; @@ -105,7 +105,7 @@ .image { @apply h-40 w-40; - border-radius: var(--borderRadiusSmall); + border-radius: var(--radius-small); } } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css index 787a0ffc1cc50e..0d887eea0a438c 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselActionCards.module.css @@ -5,14 +5,14 @@ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); } .card { display: flex; flex-direction: column; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); border-top-left-radius: 0; border-top-right-radius: 0; padding: 10px; @@ -28,9 +28,9 @@ display: flex; flex-direction: column; gap: 6px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); border-bottom: none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 10px; @@ -47,12 +47,12 @@ } .actionCard { - border-radius: var(--borderRadiusLarge); + border-radius: var(--radius-large); overflow: hidden; text-align: center; max-width: 350px; margin: 0px 6px; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); } .imageContainer { diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.module.css index 89bf12caefff0e..014d7892e922ad 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAppearance.module.css @@ -15,22 +15,22 @@ position: absolute; left: 10%; top: 25%; - background: var(--colorNeutralBackground1); + background: var(--color-neutral-background-1); padding: 18px; max-width: 270px; width: 50%; } .title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero800); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero800); + font-family: var(--font-base); + font-size: var(--text-hero-800); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-800); } .subtext { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css index b16d5d655d6f20..ea1ba2091ed2d7 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselAutoplay.module.css @@ -3,7 +3,7 @@ .bannerCard { align-content: center; - border-radius: var(--borderRadiusLarge); + border-radius: var(--radius-large); height: 450px; text-align: left; position: relative; @@ -16,38 +16,38 @@ position: absolute; left: 10%; top: 25%; - background: var(--colorNeutralBackground1); + background: var(--color-neutral-background-1); padding: 18px; max-width: 270px; width: 50%; } .title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero800); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero800); + font-family: var(--font-base); + font-size: var(--text-hero-800); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-800); } .subtext { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } .container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); } .card { display: flex; flex-direction: column; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); border-top-left-radius: 0; border-top-right-radius: 0; padding: 10px; @@ -63,9 +63,9 @@ display: flex; flex-direction: column; gap: 6px; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); border-bottom: none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 10px; diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css index 7f8b1d80725081..f62e7c0913c9fb 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselControlled.module.css @@ -25,9 +25,9 @@ align-self: center; justify-self: center; width: max-content; - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -43,15 +43,15 @@ display: flex; place-items: center; padding: 4px 8px; - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); } .wireframe { - background-color: var(--colorNeutralBackground3); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-3); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); display: flex; flex-direction: column; gap: 12px; @@ -62,16 +62,16 @@ } .wireframeEven { - background-color: var(--colorBrandBackground2); - border: var(--stroke-width-thin) solid var(--colorBrandStroke1); + background-color: var(--color-brand-background-2); + border: var(--stroke-width-thin) solid var(--color-brand-stroke-1); } .wireframeInfo { position: absolute; right: 12px; top: 12px; - background-color: var(--colorPaletteRedBackground2); - border: var(--stroke-width-thin) dotted var(--colorPaletteRedBorder2); - font-size: var(--fontSizeBase200); + background-color: var(--color-palette-red-background-2); + border: var(--stroke-width-thin) dotted var(--color-palette-red-border-2); + font-size: var(--text-base-200); padding: 4px 8px; } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.module.css index bddc2034f62df7..7ec0d42f9fc538 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselDefault.module.css @@ -15,22 +15,22 @@ position: absolute; left: 10%; top: 25%; - background: var(--colorNeutralBackground1); + background: var(--color-neutral-background-1); padding: 18px; max-width: 270px; width: 50%; } .title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero800); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero800); + font-family: var(--font-base); + font-size: var(--text-hero-800); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-800); } .subtext { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css index ff4affb67ac545..47e0d64b9ff68f 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselEventing.module.css @@ -7,9 +7,9 @@ } .carousel { - border: 2px solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: 2px solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 20px 0; margin-top: 24px; } @@ -20,21 +20,21 @@ .logLabel { align-self: end; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); width: fit-content; - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); padding: 2px 12px; - border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0; + border-radius: var(--radius-medium) var(--radius-medium) 0 0; } .log { overflow-y: auto; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); min-width: 240px; flex: 1; - border: 2px solid var(--colorBrandBackground); - border-radius: var(--borderRadiusMedium) 0 var(--borderRadiusMedium) var(--borderRadiusMedium); + border: 2px solid var(--color-brand-background); + border-radius: var(--radius-medium) 0 var(--radius-medium) var(--radius-medium); padding: 12px; max-height: 250px; } @@ -43,12 +43,12 @@ display: flex; flex-direction: column; height: 100%; - filter: drop-shadow(0 0 4px var(--colorNeutralStroke1)); + filter: drop-shadow(0 0 4px var(--color-neutral-stroke-1)); } .wireframe { - background-color: var(--colorNeutralBackground3); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-3); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); display: flex; flex-direction: column; gap: 12px; @@ -59,17 +59,17 @@ } .wireframeEven { - background-color: var(--colorBrandBackground2); - border: var(--stroke-width-thin) solid var(--colorBrandStroke1); + background-color: var(--color-brand-background-2); + border: var(--stroke-width-thin) solid var(--color-brand-stroke-1); } .wireframeInfo { position: absolute; right: 12px; top: 12px; - background-color: var(--colorPaletteRedBackground2); - border: var(--stroke-width-thin) dotted var(--colorPaletteRedBorder2); - font-size: var(--fontSizeBase200); + background-color: var(--color-palette-red-background-2); + border: var(--stroke-width-thin) dotted var(--color-palette-red-border-2); + font-size: var(--text-base-200); padding: 4px 8px; } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css index 199e6d7f1ac74e..a7c4303767caf2 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselFirstRunExperience.module.css @@ -25,17 +25,17 @@ .header { display: block; margin: var(--spacing-vertical-xxl) var(--spacing-vertical-xxl) var(--spacing-vertical-s) var(--spacing-vertical-xxl); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase500); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase500); + font-family: var(--font-base); + font-size: var(--text-base-500); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-500); } .text { display: block; padding: var(--spacing-vertical-s) var(--spacing-vertical-xxl); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css index 56aa81d5719b0b..2af3e45e753b5d 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselResponsive.module.css @@ -6,8 +6,8 @@ } .wireframe { - background-color: var(--colorNeutralBackground3); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + background-color: var(--color-neutral-background-3); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); display: flex; flex-direction: column; gap: 12px; @@ -18,17 +18,17 @@ } .wireframeEven { - background-color: var(--colorBrandBackground2); - border: var(--stroke-width-thin) solid var(--colorBrandStroke1); + background-color: var(--color-brand-background-2); + border: var(--stroke-width-thin) solid var(--color-brand-stroke-1); } .wireframeInfo { position: absolute; right: 12px; top: 12px; - background-color: var(--colorPaletteRedBackground2); - border: var(--stroke-width-thin) dotted var(--colorPaletteRedBorder2); - font-size: var(--fontSizeBase200); + background-color: var(--color-palette-red-background-2); + border: var(--stroke-width-thin) dotted var(--color-palette-red-border-2); + font-size: var(--text-base-200); padding: 4px 8px; } diff --git a/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css b/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css index a2922a63051244..e277373cd46414 100644 --- a/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css +++ b/packages/react-components/react-carousel/stories/src/Carousel/CarouselTopNavigation.module.css @@ -3,8 +3,8 @@ .bannerCard { align-content: center; - border-radius: var(--borderRadiusXLarge); - box-shadow: var(--shadow16); + border-radius: var(--radius-x-large); + box-shadow: var(--shadow-16); height: 450px; text-align: left; position: relative; @@ -21,27 +21,27 @@ position: absolute; left: 10%; top: 25%; - border-radius: var(--borderRadiusLarge); - box-shadow: var(--shadow8); - background: var(--colorNeutralBackground1); + border-radius: var(--radius-large); + box-shadow: var(--shadow-8); + background: var(--color-neutral-background-1); padding: var(--spacing-horizontal-xxl) var(--spacing-vertical-xxxl); max-width: 270px; width: 50%; } .title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase600); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase600); + font-family: var(--font-base); + font-size: var(--text-base-600); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-600); } .subtext { margin-bottom: var(--spacing-vertical-m); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } .container { @@ -86,8 +86,8 @@ .carouselHeaderTitle { flex: 1; margin: 0; - font-size: var(--fontSizeBase600); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-600); + font-weight: var(--font-weight-semibold); } .carouselNavigation { diff --git a/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css index dfb41599e7bfdc..57a51a90fa6640 100644 --- a/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css +++ b/packages/react-components/react-carousel/stories/src/CarouselNav/CarouselNavDefault.module.css @@ -5,7 +5,7 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); } .card { @@ -13,8 +13,8 @@ flex-direction: column; align-items: center; justify-content: end; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); border-top-left-radius: 0; border-top-right-radius: 0; padding: 10px; @@ -24,9 +24,9 @@ .controls { display: flex; flex-direction: column; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); border-bottom: none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 10px; diff --git a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css index 2d655d03bf3ac2..2ebb6b8ac49805 100644 --- a/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css +++ b/packages/react-components/react-checkbox/library/src/components/Checkbox/Checkbox.module.css @@ -52,7 +52,7 @@ * component's hook output belongs in `fui.components.l2`, never l1 — in l1 the winner * between Checkbox and Label would be decided by stylesheet load order. * - * Load-bearing, not bookkeeping: Label's own rules set `color: var(--colorNeutralForeground1)` + * Load-bearing, not bookkeeping: Label's own rules set `color: var(--color-neutral-foreground-1)` * while `labelStyles.base` must win with `color: inherit` (the root's state colour is what * the label shows, including the disabled grey). mergeClasses produced that winner because * Checkbox's classes arrive as `className` on
- Custom line color (var(--colorPaletteRedBorder2)) + Custom line color (var(--color-palette-red-border-2))
diff --git a/packages/react-components/react-divider/stories/src/Divider/DividerDefault.module.css b/packages/react-components/react-divider/stories/src/Divider/DividerDefault.module.css index 37e82997793850..8c3fc269f04ab4 100644 --- a/packages/react-components/react-divider/stories/src/Divider/DividerDefault.module.css +++ b/packages/react-components/react-divider/stories/src/Divider/DividerDefault.module.css @@ -13,5 +13,5 @@ align-items: center; justify-items: center; min-height: 96px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } diff --git a/packages/react-components/react-divider/stories/src/Divider/DividerInset.module.css b/packages/react-components/react-divider/stories/src/Divider/DividerInset.module.css index c0c8ba16b83a48..43f1e44eec0457 100644 --- a/packages/react-components/react-divider/stories/src/Divider/DividerInset.module.css +++ b/packages/react-components/react-divider/stories/src/Divider/DividerInset.module.css @@ -13,5 +13,5 @@ align-items: center; justify-items: center; min-height: 96px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } diff --git a/packages/react-components/react-divider/stories/src/Divider/DividerVertical.module.css b/packages/react-components/react-divider/stories/src/Divider/DividerVertical.module.css index 66f82e6bfff3a7..39294a9023222c 100644 --- a/packages/react-components/react-divider/stories/src/Divider/DividerVertical.module.css +++ b/packages/react-components/react-divider/stories/src/Divider/DividerVertical.module.css @@ -13,5 +13,5 @@ align-items: center; justify-items: center; min-height: 96px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } From 4fd33a05f69479ef2a154e7d9d856fded05de777 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:44:02 -0700 Subject: [PATCH 618/640] refactor(theming): old->canonical token var sweep 4/8 (Phase 2a) Areas: packages/react-components/react-drawer, packages/react-components/react-field, packages/react-components/react-image, packages/react-components/react-infolabel, packages/react-components/react-input, packages/react-components/react-label, packages/react-components/react-link, packages/react-components/react-list, packages/react-components/react-menu, packages/react-components/react-menu-grid-preview Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../DrawerFooter/DrawerFooter.module.css | 6 +- .../DrawerHeader/DrawerHeader.module.css | 6 +- .../InlineDrawer/InlineDrawer.module.css | 14 +- .../OverlayDrawer/OverlayDrawer.module.css | 14 +- .../OverlayDrawerSurface.module.css | 4 +- .../src/Drawer/DrawerMotionCustom.module.css | 6 +- .../src/Drawer/DrawerResizable.module.css | 10 +- .../src/Drawer/InlineDrawer.module.css | 2 +- .../Drawer/OverlayInsideContainer.module.css | 4 +- .../src/components/Field/Field.module.css | 18 +-- .../react-image/library/docs/MIGRATION.md | 4 +- .../src/components/Image/Image.module.css | 22 +-- .../InfoButton/InfoButton.module.css | 42 ++--- .../components/InfoLabel/InfoLabel.module.css | 2 +- .../src/components/Input/Input.module.css | 148 +++++++++--------- .../src/Input/InputAppearance.module.css | 8 +- .../src/Input/InputDisabled.module.css | 8 +- .../src/components/Label/Label.module.css | 28 ++-- .../src/components/Link/Link.module.css | 38 ++--- .../components/ListItem/ListItem.module.css | 6 +- .../src/List/ListActiveElement.module.css | 2 +- .../stories/src/List/ListDefault.module.css | 2 +- ...MultipleActionsDifferentPrimary.module.css | 4 +- .../List/MultipleActionsSelection.module.css | 4 +- .../MultipleActionsWithPrimary.module.css | 4 +- .../src/List/VirtualizedList.module.css | 2 +- ...tualizedListWithActionableItems.module.css | 2 +- .../MenuGridGroupHeader.module.css | 6 +- .../MenuGridRow/MenuGridRow.module.css | 16 +- .../MenuDivider/MenuDivider.module.css | 2 +- .../MenuGroupHeader.module.css | 6 +- .../components/MenuItem/MenuItem.module.css | 74 ++++----- .../MenuItemSwitch/MenuItemSwitch.module.css | 58 +++---- .../MenuPopover/MenuPopover.module.css | 20 +-- .../MenuSplitGroup/MenuSplitGroup.module.css | 2 +- .../NestedSubmenusResponsiveness.module.css | 8 +- .../MenuList/MenuListCheckboxItems.module.css | 4 +- ...MenuListControlledCheckboxItems.module.css | 4 +- .../MenuListControlledRadioItems.module.css | 4 +- .../src/MenuList/MenuListDefault.module.css | 4 +- .../MenuListNestedSubmenus.module.css | 4 +- .../MenuList/MenuListRadioItems.module.css | 4 +- 42 files changed, 313 insertions(+), 313 deletions(-) diff --git a/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.module.css b/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.module.css index 2b5aba48fce7a1..b93cbd83211771 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.module.css +++ b/packages/react-components/react-drawer/library/src/components/DrawerFooter/DrawerFooter.module.css @@ -90,10 +90,10 @@ inset-inline-end: 0; top: 0; opacity: 0; - background-color: var(--colorNeutralStroke1); - transition-duration: var(--durationNormal); + background-color: var(--color-neutral-stroke-1); + transition-duration: var(--duration-normal); transition-property: opacity; - transition-timing-function: var(--curveEasyEase); + transition-timing-function: var(--ease-easy-ease); } } } diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.module.css b/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.module.css index 301d51af7ae9ad..a89b291cfc1841 100644 --- a/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.module.css +++ b/packages/react-components/react-drawer/library/src/components/DrawerHeader/DrawerHeader.module.css @@ -86,10 +86,10 @@ inset-inline-end: 0; bottom: 0; opacity: 0; - background-color: var(--colorNeutralStroke1); - transition-duration: var(--durationNormal); + background-color: var(--color-neutral-stroke-1); + transition-duration: var(--duration-normal); transition-property: opacity; - transition-timing-function: var(--curveEasyEase); + transition-timing-function: var(--ease-easy-ease); } } } diff --git a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css index 5856efca0e14ff..104c7b0778b169 100644 --- a/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css +++ b/packages/react-components/react-drawer/library/src/components/InlineDrawer/InlineDrawer.module.css @@ -96,8 +96,8 @@ max-width: 100vw; height: auto; max-height: 100vh; - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); } } @@ -107,7 +107,7 @@ @variant position-start { border-inline-end-width: var(--spacing-thin); border-inline-end-style: solid; - border-inline-end-color: var(--colorTransparentStroke); + border-inline-end-color: var(--color-transparent-stroke); inset-inline-start: 0; inset-inline-end: auto; @@ -116,7 +116,7 @@ @variant position-end { border-inline-start-width: var(--spacing-thin); border-inline-start-style: solid; - border-inline-start-color: var(--colorTransparentStroke); + border-inline-start-color: var(--color-transparent-stroke); inset-inline-end: 0; inset-inline-start: auto; @@ -174,19 +174,19 @@ @variant position-start { border-inline-end-width: calc(1px * var(--base-scale)); border-inline-end-style: solid; - border-inline-end-color: var(--colorNeutralBackground3); + border-inline-end-color: var(--color-neutral-background-3); } @variant position-end { border-inline-start-width: calc(1px * var(--base-scale)); border-inline-start-style: solid; - border-inline-start-color: var(--colorNeutralBackground3); + border-inline-start-color: var(--color-neutral-background-3); } @variant position-bottom { border-block-start-width: calc(1px * var(--base-scale)); border-block-start-style: solid; - border-block-start-color: var(--colorNeutralBackground3); + border-block-start-color: var(--color-neutral-background-3); } } } diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css index cefd1e153c4f2e..ac056dfc8bcf6b 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.module.css @@ -49,7 +49,7 @@ * `useDrawerResetStyles` spreads `createFocusOutlineStyle()`, whose focus-visible half * compiles to `.r7dfyj8[data-fui-focus-visible]{border-*-color:transparent}` — 0-2-0. It * beat arg #2a's `.f1xteiwb{border-right:var(--stroke-width-thin) solid - * var(--colorTransparentStroke)}` (0-1-0) on SPECIFICITY even though the reset bucket sorts + * var(--color-transparent-stroke)}` (0-1-0) on SPECIFICITY even though the reset bucket sorts * first. `:where()`-flat selectors erase that, so leaving the focus block in `fui.base` * would let the position border colour survive a focus ring. That is observable: in the * high-contrast theme `colorTransparentStroke` is `CanvasText`, not `transparent` @@ -120,8 +120,8 @@ max-width: 100vw; height: auto; max-height: 100vh; - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); top: 0; bottom: 0; @@ -141,7 +141,7 @@ @variant position-start { border-inline-end-width: var(--spacing-thin); border-inline-end-style: solid; - border-inline-end-color: var(--colorTransparentStroke); + border-inline-end-color: var(--color-transparent-stroke); inset-inline-start: 0; inset-inline-end: auto; @@ -150,7 +150,7 @@ @variant position-end { border-inline-start-width: var(--spacing-thin); border-inline-start-style: solid; - border-inline-start-color: var(--colorTransparentStroke); + border-inline-start-color: var(--color-transparent-stroke); inset-inline-end: 0; inset-inline-start: auto; @@ -232,8 +232,8 @@ * * .r7dfyj8[data-fui-focus-visible]{border-{top,right,bottom,left}-color:transparent} * .r7dfyj8[data-fui-focus-visible]::after{content:"";position:absolute; - * pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2); - * border-radius:var(--borderRadiusMedium); + * pointer-events:none;z-index:1;border:2px solid var(--color-stroke-focus-2); + * border-radius:var(--radius-medium); * top|right|bottom|left:calc(2px * -1)} * @media (forced-colors: active){…::after{border-*-color:Highlight}} * diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.module.css b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.module.css index 9ff2d736f97d38..4416bf076cee01 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.module.css +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.module.css @@ -62,14 +62,14 @@ right: 0; bottom: 0; left: 0; - background-color: var(--colorBackgroundOverlay); + background-color: var(--color-background-overlay); } } @layer fui.components.l1 { /* arg #2 — from useBackdropStyles.nested */ .nested { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); } /* arg #3 — from useBackdropStyles.drawerHidden */ diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css index 45da673d4804ee..27f37ae7fbab31 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerMotionCustom.module.css @@ -10,7 +10,7 @@ position: relative; display: flex; height: 480px; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .drawer { @@ -29,6 +29,6 @@ box-sizing: border-box; position: absolute; inset: 0; - background-color: var(--colorNeutralBackground1); - border: 1px solid var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); + border: 1px solid var(--color-neutral-background-1); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css index 8b830994df8616..9550456e8b7899 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/DrawerResizable.module.css @@ -34,13 +34,13 @@ cursor: col-resize; border: none; min-width: unset; - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } .resizer:before { content: ''; position: absolute; - border-right: 1px solid var(--colorNeutralBackground5); + border-right: 1px solid var(--color-neutral-background-5); width: 1px; height: 100%; transform: translateX(-50%); @@ -60,7 +60,7 @@ .resizerActive { border-right-width: 4px; - border-right-color: var(--colorNeutralBackground5Pressed); + border-right-color: var(--color-neutral-background-5-pressed); } .content { @@ -74,9 +74,9 @@ } .errorMessage { - color: var(--colorPaletteRedForeground1); + color: var(--color-palette-red-foreground-1); } .invalidInput { - border-color: var(--colorPaletteRedBorder2); + border-color: var(--color-palette-red-border-2); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css index e123389cdb03b5..01b639e035f9d5 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/InlineDrawer.module.css @@ -33,5 +33,5 @@ align-items: flex-start; column-gap: var(--spacing-horizontal-xs); background-color: #fff; - transition-duration: var(--durationFast); + transition-duration: var(--duration-fast); } diff --git a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css index a82a21d37f6dd3..4fa275ba2b3dcf 100644 --- a/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css +++ b/packages/react-components/react-drawer/stories/src/Drawer/OverlayInsideContainer.module.css @@ -13,6 +13,6 @@ padding: var(--spacing-vertical-l) var(--spacing-horizontal-l); position: relative; overflow: hidden; - border: var(--stroke-width-thicker) solid var(--colorNeutralStroke1); - background-color: var(--colorBrandBackground2); + border: var(--stroke-width-thicker) solid var(--color-neutral-stroke-1); + background-color: var(--color-brand-background-2); } diff --git a/packages/react-components/react-field/library/src/components/Field/Field.module.css b/packages/react-components/react-field/library/src/components/Field/Field.module.css index 0468c1aaf55721..892303ec87af75 100644 --- a/packages/react-components/react-field/library/src/components/Field/Field.module.css +++ b/packages/react-components/react-field/library/src/components/Field/Field.module.css @@ -125,11 +125,11 @@ /* tokens.spacingVerticalXXS → named spacing utility (D4 amendment) */ @apply mt-vertical-xxs; - color: var(--colorNeutralForeground3); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + color: var(--color-neutral-foreground-3); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } /* from useValidationMessageIconBaseClassName (makeResetStyles) */ @@ -202,22 +202,22 @@ * `color` prop, so it rides module classes rather than a data-attribute (D3). */ .validation-message-icon-error { - color: var(--colorPaletteRedForeground1); + color: var(--color-palette-red-foreground-1); } .validation-message-icon-warning { - color: var(--colorPaletteDarkOrangeForeground1); + color: var(--color-palette-dark-orange-foreground-1); } .validation-message-icon-success { - color: var(--colorPaletteGreenForeground1); + color: var(--color-palette-green-foreground-1); } } @layer fui.components.l1 { /* from useSecondaryTextStyles.error — validationMessage arg #3 */ .secondary-text-error { - color: var(--colorPaletteRedForeground1); + color: var(--color-palette-red-foreground-1); } /* diff --git a/packages/react-components/react-image/library/docs/MIGRATION.md b/packages/react-components/react-image/library/docs/MIGRATION.md index 9c9cc578b7782d..6ac4bcf091d995 100644 --- a/packages/react-components/react-image/library/docs/MIGRATION.md +++ b/packages/react-components/react-image/library/docs/MIGRATION.md @@ -9,7 +9,7 @@ This guide is a reference for upgrading the `Image` component from v8 or v0 to v > `@fluentui/react-components` (add `@griffel/react` as a dependency to run them verbatim), and v9 > no longer authors its own styles that way. The shipped > equivalent is ordinary CSS (a stylesheet, a CSS Module, Tailwind) passed through `className`, with -> theme values referenced as custom properties such as `var(--colorNeutralForeground2)`. See +> theme values referenced as custom properties such as `var(--color-neutral-foreground-2)`. See > [Styling components](https://react.fluentui.dev/?path=/docs/concepts-developer-styling-components--docs). ## Migration from v8 @@ -140,7 +140,7 @@ For v9, you should do style customizations with your own CSS through the `classN ### theme -For v9, you should reference the theme's CSS variables (e.g. `var(--colorNeutralForeground1)`) in your CSS, with `FluentProvider` supplying the token values. +For v9, you should reference the theme's CSS variables (e.g. `var(--color-neutral-foreground-1)`) in your CSS, with `FluentProvider` supplying the token values. ## Migration from v0 diff --git a/packages/react-components/react-image/library/src/components/Image/Image.module.css b/packages/react-components/react-image/library/src/components/Image/Image.module.css index ffa181a5e44fd0..80ea17de9bc2c6 100644 --- a/packages/react-components/react-image/library/src/components/Image/Image.module.css +++ b/packages/react-components/react-image/library/src/components/Image/Image.module.css @@ -43,7 +43,7 @@ * them, which is exactly what Griffel's empty slices did. * * ── Ordering that IS load-bearing ────────────────────────────────────────────────── - * #8 shape's `border-radius` must beat #2 base's `border-radius:var(--borderRadiusNone)`. + * #8 shape's `border-radius` must beat #2 base's `border-radius:var(--radius-none)`. * Declaration order in the Griffel source agrees with argument order here (base L14 * before circular L29 / rounded L30), so this is not an inversion — but the winner is * now encoded purely in file position, so `.circular` / `.rounded` must stay LAST. @@ -67,7 +67,7 @@ * `borderWidth` expand to four longhands whose right/left members are swapped but * identical in value), so the physical longhands below render byte-identical in both * directions — the same treatment the react-divider pilot gave `shorthands.borderColor`. - * `box-shadow: var(--shadow4)` is likewise unflipped by Griffel (single atomic): the + * `box-shadow: var(--shadow-4)` is likewise unflipped by Griffel (single atomic): the * token value is opaque to rtl-css-js. */ @@ -77,19 +77,19 @@ @apply box-border inline-block; /* shorthands.borderColor() — expanded to the four longhands Griffel compiled */ - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); /* * Kept as the `border-radius` shorthand because that is what Griffel compiled - * (`.f1fabniw{border-radius:var(--borderRadiusNone);}`) and because no rule anywhere + * (`.f1fabniw{border-radius:var(--radius-none);}`) and because no rule anywhere * in this component sets a corner longhand — so there is no shorthand-vs-longhand * priority for the cascade to get wrong. `.circular` / `.rounded` below override it * by file position. */ - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } /* from useStyles.block */ @@ -112,7 +112,7 @@ /* from useStyles.shadow */ .shadow { - box-shadow: var(--shadow4); + box-shadow: var(--shadow-4); } /* @@ -157,10 +157,10 @@ * Griffel slice and is intentionally absent (see header). */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } } diff --git a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css index b52c38682dea27..6450bef97cc854 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css +++ b/packages/react-components/react-infolabel/library/src/components/InfoButton/InfoButton.module.css @@ -50,8 +50,8 @@ * — which is exactly where mergeClasses used to give them the win. `fui.components.l2` makes * that win guaranteed rather than argument-order-dependent (D2 amendment 2). The collision that * matters is typography: PopoverSurface's own `root` slice applies `typographyStyles.body1` - * (`--fontSizeBase300` / `--lineHeightBase300`) at l1, while this component's `smallMedium` - * slice applies `caption1` (`--fontSizeBase200` / `--lineHeightBase200`). + * (`--text-base-300` / `--leading-base-300`) at l1, while this component's `smallMedium` + * slice applies `caption1` (`--text-base-200` / `--leading-base-200`). * * It stays LAYERED because `@fluentui/react-popover` is now CONVERTED (ledger: validated, * batch 4) — every rule in `PopoverSurface.module.css` sits in `fui.components.l1`, so l2 @@ -108,15 +108,15 @@ .root { @apply relative box-border inline-flex items-center justify-center align-middle no-underline; - background-color: var(--colorTransparentBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-transparent-background); + color: var(--color-neutral-foreground-2); /* shorthands.borderStyle('none') → the four physical longhands the compiler emits */ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* `margin: '0'` expanded to longhands (cookbook §2 — no shorthand priority in CSS). Left as literal `0`, NOT `mt-vertical-none` etc.: zero has nothing for `--base-scale` @@ -153,8 +153,8 @@ * .f15bsgw9[data-fui-focus-visible]::after{content:""} * .f14e48fq …::after{position:absolute} .f18yb2kv …::after{pointer-events:none} * .fd6o370 …::after{z-index:1} - * .ffwy5si …::after{border:2px solid var(--colorStrokeFocus2)} - * .f3znvyf …::after{border-radius:var(--borderRadiusMedium)} + * .ffwy5si …::after{border:2px solid var(--color-stroke-focus-2)} + * .f3znvyf …::after{border-radius:var(--radius-medium)} * .f57olzd/.f4stah7/.fs1por5/.f480a47 …::after{top|right|left|bottom:calc(2px * -1)} * @media (forced-colors: active){…::after{border-*-color:Highlight}} * @@ -191,8 +191,8 @@ */ .root { @variant open { - background-color: var(--colorTransparentBackgroundSelected); - color: var(--colorNeutralForeground2BrandSelected); + background-color: var(--color-transparent-background-selected); + color: var(--color-neutral-foreground-2-brand-selected); } } } @@ -227,13 +227,13 @@ */ .root { @variant hover { - background-color: var(--colorTransparentBackgroundHover); - color: var(--colorNeutralForeground2BrandHover); + background-color: var(--color-transparent-background-hover); + color: var(--color-neutral-foreground-2-brand-hover); cursor: pointer; @variant active { - background-color: var(--colorTransparentBackgroundPressed); - color: var(--colorNeutralForeground2BrandPressed); + background-color: var(--color-transparent-background-pressed); + color: var(--color-neutral-foreground-2-brand-pressed); } } } @@ -306,17 +306,17 @@ } .info-small-medium { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } .info-large { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } diff --git a/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.module.css b/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.module.css index 70fa9226e2ca15..351ca9f614c9fc 100644 --- a/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.module.css +++ b/packages/react-components/react-infolabel/library/src/components/InfoLabel/InfoLabel.module.css @@ -44,7 +44,7 @@ * * This is load-bearing in both directions, not bookkeeping: * - `.label { color: inherit }` must beat Label's own - * `.root { color: var(--colorNeutralForeground1) }`; + * `.root { color: var(--color-neutral-foreground-1) }`; * - `.info-button { vertical-align: top }` must beat InfoButton's * `vertical-align: middle`, and the negative margins must beat its `margin: 0` * (expanded to four longhands there). diff --git a/packages/react-components/react-input/library/src/components/Input/Input.module.css b/packages/react-components/react-input/library/src/components/Input/Input.module.css index 38465f1500aa84..092a84b020c4b8 100644 --- a/packages/react-components/react-input/library/src/components/Input/Input.module.css +++ b/packages/react-components/react-input/library/src/components/Input/Input.module.css @@ -101,15 +101,15 @@ @apply gap-horizontal-xxs; /* used for all but the underline appearance */ - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); /* appearance: outline (default) */ - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); border-top-width: 1px; border-right-width: 1px; @@ -119,10 +119,10 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-accessible); /* * The bottom focus underline. Flat 2px all the way across, matching the radius of @@ -130,10 +130,10 @@ * * The three `2px` literals below are ONE measurement expressed three ways and must * stay in lockstep: the `max()` floor keeps the underline visible even if a theme - * sets `--borderRadiusMedium` to 0; `border-bottom-width` draws it; `clip-path` + * sets `--radius-medium` to 0; `border-bottom-width` draws it; `clip-path` * trims the "horns" `border-bottom` would otherwise leave on the ends. They stay * unscaled literals (no `--base-scale`) precisely because they must agree with each - * other and with `--borderRadiusMedium`, which is an unscaled token. + * other and with `--radius-medium`, which is an unscaled token. */ &::after { @apply absolute box-border; @@ -146,24 +146,24 @@ /* Use the whole border-radius as the height and only put radii on the bottom corners, otherwise the radius is auto-reduced to fit the available space. */ - height: max(2px, var(--borderRadiusMedium)); - border-end-start-radius: var(--borderRadiusMedium); - border-end-end-radius: var(--borderRadiusMedium); + height: max(2px, var(--radius-medium)); + border-end-start-radius: var(--radius-medium); + border-end-end-radius: var(--radius-medium); /* longhands: `:focus-within:active` below overrides the color alone */ border-bottom-width: 2px; border-bottom-style: solid; - border-bottom-color: var(--colorCompoundBrandStroke); + border-bottom-color: var(--color-compound-brand-stroke); clip-path: inset(calc(100% - 2px) 0 0 0); /* Animation for focus OUT */ transform: scaleX(0); transition-property: transform; - transition-duration: var(--durationUltraFast); + transition-duration: var(--duration-ultra-fast); /* Curve token used as a delay — reproduced from the compiled output verbatim. */ - transition-delay: var(--curveAccelerateMid); + transition-delay: var(--ease-accelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -176,8 +176,8 @@ &::after { transform: scaleX(1); transition-property: transform; - transition-duration: var(--durationNormal); - transition-delay: var(--curveDecelerateMid); + transition-duration: var(--duration-normal); + transition-delay: var(--ease-decelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -188,7 +188,7 @@ /* clicking the field again while it is already focused */ @variant active { &::after { - border-bottom-color: var(--colorCompoundBrandStrokePressed); + border-bottom-color: var(--color-compound-brand-stroke-pressed); } } @@ -210,7 +210,7 @@ MNudge + XXS = 12px, i.e. exactly M). */ @apply px-horizontal-m py-vertical-none; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); /* literal `transparent` (not a theme token) so the root's color always shows through */ background-color: transparent; @@ -231,7 +231,7 @@ * invalidate the whole rule if they were merged into one selector list. */ &::placeholder { - color: var(--colorNeutralForeground4); + color: var(--color-neutral-foreground-4); opacity: 1; /* browser style override */ } } @@ -240,7 +240,7 @@ .content { @apply box-border flex; - color: var(--colorNeutralForeground3); /* "icon color" in the design spec */ + color: var(--color-neutral-foreground-3); /* "icon color" in the design spec */ /* * Special case for icons (the common case) so they centre vertically. size: medium. @@ -260,20 +260,20 @@ @variant size-small { @apply min-h-24; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } /* from useRootStyles.large — arg #3 */ @variant size-large { @apply min-h-40; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); /* `gap: tokens.spacingHorizontalSNudge` */ @apply gap-horizontal-s-nudge; @@ -331,7 +331,7 @@ /* from useRootStyles.underline */ .underline { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* corners look strange if rounded */ border-radius: 0; @@ -351,24 +351,24 @@ /* from useRootStyles['filled-darker'] */ .filled-darker { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } /* from useRootStyles['filled-lighter'] */ .filled-lighter { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } /* from useRootStyles['filled-darker-shadow'] — deprecated appearance */ .filled-darker-shadow { - background-color: var(--colorNeutralBackground3); - box-shadow: var(--shadow2); + background-color: var(--color-neutral-background-3); + box-shadow: var(--shadow-2); } /* from useRootStyles['filled-lighter-shadow'] — deprecated appearance */ .filled-lighter-shadow { - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow2); + background-color: var(--color-neutral-background-1); + box-shadow: var(--shadow-2); } /* @@ -376,10 +376,10 @@ * `shorthands.borderColor()` expanded to the four longhands the compiler emits. */ .filled { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } .root { @@ -395,10 +395,10 @@ @variant enabled { @variant invalid { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -406,12 +406,12 @@ /* from useRootStyles.disabled — arg #12, the last style argument. */ @variant disabled { cursor: not-allowed; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); /* remove the focus underline */ &::after { @@ -450,17 +450,17 @@ .outline { @variant enabled { @variant hover { - border-top-color: var(--colorNeutralStroke1Hover); - border-right-color: var(--colorNeutralStroke1Hover); - border-left-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStrokeAccessibleHover); + border-top-color: var(--color-neutral-stroke-1-hover); + border-right-color: var(--color-neutral-stroke-1-hover); + border-left-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-accessible-hover); } @variant active-or-focus-within { - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } } } @@ -469,11 +469,11 @@ .underline { @variant enabled { @variant hover { - border-bottom-color: var(--colorNeutralStrokeAccessibleHover); + border-bottom-color: var(--color-neutral-stroke-accessible-hover); } @variant active-or-focus-within { - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } /* remove the rounded corners from the focus underline. This one declaration is @@ -491,10 +491,10 @@ /* also handles the pressed border color (`:active` is a subset of `:focus-within` here, since the field always contains a focusable input) */ @variant hover-or-focus-within { - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } } } @@ -525,10 +525,10 @@ @variant invalid { @variant hover { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -628,12 +628,12 @@ .root { @variant disabled { & .input { - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorTransparentBackground); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-transparent-background); cursor: not-allowed; &::placeholder { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -650,7 +650,7 @@ /* from useContentStyles.disabled */ @variant disabled { & .content { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } diff --git a/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css b/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css index afb7bcb304fa32..a321d7ec0d5938 100644 --- a/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css +++ b/packages/react-components/react-input/stories/src/Input/InputAppearance.module.css @@ -15,17 +15,17 @@ } .filledLighter { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledLighter > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .filledDarker { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledDarker > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } diff --git a/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css b/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css index a890bd307e76f3..160f2d656c5823 100644 --- a/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css +++ b/packages/react-components/react-input/stories/src/Input/InputDisabled.module.css @@ -15,19 +15,19 @@ } .filledLighter { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledLighter > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .filledDarker { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledDarker > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .toggle { diff --git a/packages/react-components/react-label/library/src/components/Label/Label.module.css b/packages/react-components/react-label/library/src/components/Label/Label.module.css index d60f272ea0e76d..a4fc110bbd2053 100644 --- a/packages/react-components/react-label/library/src/components/Label/Label.module.css +++ b/packages/react-components/react-label/library/src/components/Label/Label.module.css @@ -38,7 +38,7 @@ * its block must (and does) follow both base blocks in file order. * * No inversions: `useStyles.large` (arg #4) and `useStyles.semibold` (arg #5) both set - * `font-weight: var(--fontWeightSemibold)` and compile to the SAME Griffel atomic + * `font-weight: var(--font-weight-semibold)` and compile to the SAME Griffel atomic * (`fl43uef`), so their relative order cannot change a rendered value. * * Verified against the compiled Griffel atomics in @@ -48,8 +48,8 @@ @layer fui.components.l1 { /* from useStyles.root */ .root { - font-family: var(--fontFamilyBase); - color: var(--colorNeutralForeground1); + font-family: var(--font-base); + color: var(--color-neutral-foreground-1); } /* from useStyles.required — paddingLeft → padding-inline-start (the file's only RTL flip) */ @@ -57,7 +57,7 @@ /* tokens.spacingHorizontalXS → named spacing utility (D4 amendment) */ @apply ps-horizontal-xs; - color: var(--colorPaletteRedForeground3); + color: var(--color-palette-red-foreground-3); } } @@ -65,7 +65,7 @@ /* from useStyles.disabled — the same slice mergeClasses applies to both slots */ .root { @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @variant forced-colors { color: GrayText; @@ -76,7 +76,7 @@ /* from useStyles.disabled — required slot */ .required { @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @variant forced-colors { color: GrayText; @@ -89,21 +89,21 @@ .root { /* from useStyles.small */ @variant size-small { - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); } /* from useStyles.medium */ @variant size-medium { - font-size: var(--fontSizeBase300); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + line-height: var(--leading-base-300); } /* from useStyles.large */ @variant size-large { - font-size: var(--fontSizeBase400); - line-height: var(--lineHeightBase400); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-400); + line-height: var(--leading-base-400); + font-weight: var(--font-weight-semibold); } } } @@ -111,6 +111,6 @@ @layer fui.components.l1 { /* from useStyles.semibold */ .semibold { - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } } diff --git a/packages/react-components/react-link/library/src/components/Link/Link.module.css b/packages/react-components/react-link/library/src/components/Link/Link.module.css index c4e426c13074ae..fee97dc727d636 100644 --- a/packages/react-components/react-link/library/src/components/Link/Link.module.css +++ b/packages/react-components/react-link/library/src/components/Link/Link.module.css @@ -92,14 +92,14 @@ display: inline; background-color: transparent; - color: var(--colorBrandForegroundLink); + color: var(--color-brand-foreground-link); cursor: pointer; overflow: inherit; text-overflow: inherit; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); text-decoration-line: none; text-decoration-thickness: var(--spacing-thin); @@ -112,12 +112,12 @@ @variant hover { text-decoration-line: underline; - color: var(--colorBrandForegroundLinkHover); + color: var(--color-brand-foreground-link-hover); } @variant active { text-decoration-line: underline; - color: var(--colorBrandForegroundLinkPressed); + color: var(--color-brand-foreground-link-pressed); } } } @@ -138,16 +138,16 @@ /* from useStyles.subtle — arg #6 */ .subtle { - color: var(--colorNeutralForeground2Link); + color: var(--color-neutral-foreground-2-link); @variant hover { text-decoration-line: underline; - color: var(--colorNeutralForeground2LinkHover); + color: var(--color-neutral-foreground-2-link-hover); } @variant active { text-decoration-line: underline; - color: var(--colorNeutralForeground2LinkPressed); + color: var(--color-neutral-foreground-2-link-pressed); } } @@ -156,27 +156,27 @@ * this slice and `.brand` below; that is the Griffel source verbatim, not a typo. */ .inverted { - color: var(--colorBrandForegroundInverted); + color: var(--color-brand-foreground-inverted); @variant hover { - color: var(--colorBrandForegroundInverted); + color: var(--color-brand-foreground-inverted); } @variant active { - color: var(--colorBrandForegroundInverted); + color: var(--color-brand-foreground-inverted); } } /* from useStyles.brand — arg #8 */ .brand { - color: var(--colorNeutralForegroundInvertedLink); + color: var(--color-neutral-foreground-inverted-link); @variant hover { - color: var(--colorNeutralForegroundInvertedLinkHover); + color: var(--color-neutral-foreground-inverted-link-hover); } @variant active { - color: var(--colorNeutralForegroundInvertedLinkPressed); + color: var(--color-neutral-foreground-inverted-link-pressed); } } } @@ -196,7 +196,7 @@ */ @variant disabled { text-decoration-line: none; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; } } @@ -213,7 +213,7 @@ */ .root { @variant focus-visible-fui { - text-decoration-color: var(--colorStrokeFocus2); + text-decoration-color: var(--color-stroke-focus-2); text-decoration-line: underline; text-decoration-style: double; outline-style: none; @@ -234,12 +234,12 @@ @variant disabled { @variant hover { text-decoration-line: none; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } @variant active { text-decoration-line: none; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } @variant forced-colors { diff --git a/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css b/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css index 6fc0184b6fc41a..6ccd1c558127a6 100644 --- a/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css +++ b/packages/react-components/react-list/library/src/components/ListItem/ListItem.module.css @@ -66,7 +66,7 @@ * (lib-commonjs/components/ListItem/useListItemStyles.styles.js:25-65): * .rikgcmv{padding:0;margin:0;text-indent:0;list-style-type:none;} * .rikgcmv[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid - * var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);} + * var(--color-stroke-focus-2);border-radius:var(--radius-medium);} * .f7nlbp4{align-self:center;} * .f1bgo3o3 .fui-Checkbox__indicator{margin:4px;} * .f22iagw{display:flex;} @@ -102,8 +102,8 @@ list-style-type: none; @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } diff --git a/packages/react-components/react-list/stories/src/List/ListActiveElement.module.css b/packages/react-components/react-list/stories/src/List/ListActiveElement.module.css index f486f25160089d..1fd8a0e693b031 100644 --- a/packages/react-components/react-list/stories/src/List/ListActiveElement.module.css +++ b/packages/react-components/react-list/stories/src/List/ListActiveElement.module.css @@ -16,7 +16,7 @@ } .itemSelected { - background-color: var(--colorSubtleBackgroundSelected); + background-color: var(--color-subtle-background-selected); } @media (forced-colors: active) { diff --git a/packages/react-components/react-list/stories/src/List/ListDefault.module.css b/packages/react-components/react-list/stories/src/List/ListDefault.module.css index 26452055236aac..dc9978174c8b2d 100644 --- a/packages/react-components/react-list/stories/src/List/ListDefault.module.css +++ b/packages/react-components/react-list/stories/src/List/ListDefault.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .text { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } diff --git a/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.module.css b/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.module.css index 7c0dd196bf84dd..4acafdebdeeecb 100644 --- a/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.module.css +++ b/packages/react-components/react-list/stories/src/List/MultipleActionsDifferentPrimary.module.css @@ -26,7 +26,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .image { @@ -36,7 +36,7 @@ } .title { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); font-weight: 600; display: block; } diff --git a/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.module.css b/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.module.css index e8f5960139df63..f09d494cc9ea07 100644 --- a/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.module.css +++ b/packages/react-components/react-list/stories/src/List/MultipleActionsSelection.module.css @@ -26,7 +26,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .image { @@ -36,7 +36,7 @@ } .title { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); font-weight: 600; display: block; } diff --git a/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.module.css b/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.module.css index a9998c76d7b855..b2e468d62ee498 100644 --- a/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.module.css +++ b/packages/react-components/react-list/stories/src/List/MultipleActionsWithPrimary.module.css @@ -26,7 +26,7 @@ } .caption { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .image { @@ -36,7 +36,7 @@ } .title { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); font-weight: 600; display: block; } diff --git a/packages/react-components/react-list/stories/src/List/VirtualizedList.module.css b/packages/react-components/react-list/stories/src/List/VirtualizedList.module.css index f905f1755fafb3..3d57430c240d1d 100644 --- a/packages/react-components/react-list/stories/src/List/VirtualizedList.module.css +++ b/packages/react-components/react-list/stories/src/List/VirtualizedList.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .text { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } diff --git a/packages/react-components/react-list/stories/src/List/VirtualizedListWithActionableItems.module.css b/packages/react-components/react-list/stories/src/List/VirtualizedListWithActionableItems.module.css index 729cd9e002bbae..9575379bf7d832 100644 --- a/packages/react-components/react-list/stories/src/List/VirtualizedListWithActionableItems.module.css +++ b/packages/react-components/react-list/stories/src/List/VirtualizedListWithActionableItems.module.css @@ -2,5 +2,5 @@ * Token references are the Fluent theme's CSS variables. */ .text { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.module.css b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.module.css index 3075b5a072948e..4d5bd40fe9e9c6 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.module.css +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridGroupHeader/MenuGridGroupHeader.module.css @@ -57,8 +57,8 @@ .root { @apply flex h-32 items-center px-horizontal-s; - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); + font-weight: var(--font-weight-semibold); } } diff --git a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.module.css b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.module.css index 4e861ea9e2a394..6cb74dd372d68b 100644 --- a/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.module.css +++ b/packages/react-components/react-menu-grid-preview/library/src/components/MenuGridRow/MenuGridRow.module.css @@ -80,10 +80,10 @@ byte comparison against the compiled output stays exact. */ align-items: start; - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); - background-color: var(--colorNeutralBackground1); - font-size: var(--fontSizeBase300); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); + background-color: var(--color-neutral-background-1); + font-size: var(--text-base-300); /* from createFocusOutlineStyle() — the default ring. `fui-focus-outline` carries the compiled declarations; the selector stays here (D6, including its hardcoded 2px). */ @@ -100,8 +100,8 @@ } @variant hover { - background-color: var(--colorNeutralBackground1Hover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-neutral-background-1-hover); + color: var(--color-neutral-foreground-2-hover); /* the `.fui-Icon-filled` / `.fui-Icon-regular` swap that belongs here is NOT in this block — see the S-J/D27 l1 section at the bottom of this file. */ @@ -118,8 +118,8 @@ */ @variant hover { @variant active { - background-color: var(--colorNeutralBackground1Pressed); - color: var(--colorNeutralForeground2Pressed); + background-color: var(--color-neutral-background-1-pressed); + color: var(--color-neutral-foreground-2-pressed); } } diff --git a/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css b/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css index e7610481274c9d..ed189980f909da 100644 --- a/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuDivider/MenuDivider.module.css @@ -51,6 +51,6 @@ /* `border-bottom: solid ` expanded to longhands */ border-block-end-width: var(--spacing-thin); border-block-end-style: solid; - border-block-end-color: var(--colorNeutralStroke2); + border-block-end-color: var(--color-neutral-stroke-2); } } diff --git a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.module.css b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.module.css index 478aa1faf1cae8..ee96e0ac08ff3c 100644 --- a/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuGroupHeader/MenuGroupHeader.module.css @@ -40,8 +40,8 @@ .root { @apply flex h-32 items-center px-horizontal-s; - font-size: var(--fontSizeBase200); - color: var(--colorNeutralForeground3); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-200); + color: var(--color-neutral-foreground-3); + font-weight: var(--font-weight-semibold); } } diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.module.css b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.module.css index 453264aa473686..17d326b0fc830b 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.module.css @@ -131,24 +131,24 @@ byte comparison against the compiled output stays exact. */ align-items: start; - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); - background-color: var(--colorNeutralBackground1); - font-size: var(--fontSizeBase300); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); + background-color: var(--color-neutral-background-1); + font-size: var(--text-base-300); @variant hover { - background-color: var(--colorNeutralBackground1Hover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-neutral-background-1-hover); + color: var(--color-neutral-foreground-2-hover); /* the `.fui-Icon-filled` / `.fui-Icon-regular` swap that belongs here is NOT in this block — see the S-J/D27 l1 section at the bottom of this file. */ & .icon { - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } & .sub-text { - color: var(--colorNeutralForeground3Hover); + color: var(--color-neutral-foreground-3-hover); } } @@ -163,11 +163,11 @@ */ @variant hover { @variant active { - background-color: var(--colorNeutralBackground1Pressed); - color: var(--colorNeutralForeground2Pressed); + background-color: var(--color-neutral-background-1-pressed); + color: var(--color-neutral-foreground-2-pressed); & .sub-text { - color: var(--colorNeutralForeground3Pressed); + color: var(--color-neutral-foreground-3-pressed); } } } @@ -230,18 +230,18 @@ .secondary-content { @apply px-horizontal-xxs; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - color: var(--colorNeutralForeground3); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + color: var(--color-neutral-foreground-3); @variant hover { - color: var(--colorNeutralForeground3Hover); + color: var(--color-neutral-foreground-3-hover); } @variant focus { - color: var(--colorNeutralForeground3Hover); + color: var(--color-neutral-foreground-3-hover); } } @@ -266,11 +266,11 @@ /* from useSubtextBaseStyles (makeResetStyles) — typographyStyles.caption2 */ .sub-text { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase100); - color: var(--colorNeutralForeground3); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-100); + color: var(--color-neutral-foreground-3); } } @@ -282,18 +282,18 @@ /* from useStyles.submenuOpen — root arg #3 */ .submenu-open { - background-color: var(--colorNeutralBackground1Hover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-neutral-background-1-hover); + color: var(--color-neutral-foreground-2-hover); /* the `.fui-Icon-filled` / `.fui-Icon-regular` swap that belongs here is NOT in this block — see the S-J/D27 l1 section at the bottom of this file. */ & .icon { - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } & .sub-text { - color: var(--colorNeutralForeground3Hover); + color: var(--color-neutral-foreground-3-hover); } @variant forced-colors { @@ -307,38 +307,38 @@ * both elements, see the header). */ .disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @variant hover { - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorNeutralBackground1); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-neutral-background-1); cursor: not-allowed; /* the `.fui-Icon-filled` / `.fui-Icon-regular` swap-BACK that belongs here is NOT in this block — see the S-J/D27 l1 section at the bottom of this file. */ & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } & .sub-text { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @variant hover { @variant active { - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorNeutralBackground1); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-neutral-background-1); & .sub-text { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @variant focus { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } /* compiled `m`-bucket order: bare, then :hover (+ its two descendants), then @@ -380,7 +380,7 @@ /* from useSubTextStyles.disabled — `subText` arg #2 */ .sub-text-disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @variant forced-colors { color: GrayText; diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.module.css b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.module.css index 70c85484d4cc05..233d77c7d6c9cf 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/MenuItemSwitch.module.css @@ -80,14 +80,14 @@ .switch-indicator { @apply me-horizontal-xs box-border h-20 w-40 shrink-0; - border-radius: var(--borderRadiusCircular); - border: var(--spacing-thin) solid var(--colorNeutralStrokeAccessible); + border-radius: var(--radius-circular); + border: var(--spacing-thin) solid var(--color-neutral-stroke-accessible); line-height: 0; fill: currentColor; font-size: calc(18px * var(--base-scale)); - transition-duration: var(--durationNormal); - transition-timing-function: var(--curveEasyEase); + transition-duration: var(--duration-normal); + transition-timing-function: var(--ease-easy-ease); /* * Longhands only. `background, border, color` is not 3 properties: per CSS Transitions * L1 a shorthand in `transition-property` expands to every longhand it covers, so that @@ -107,11 +107,11 @@ transition-duration: 0.01ms; } - color: var(--colorNeutralStrokeAccessible); + color: var(--color-neutral-stroke-accessible); @variant hover { - color: var(--colorNeutralStrokeAccessibleHover); - border-color: var(--colorNeutralStrokeAccessibleHover); + color: var(--color-neutral-stroke-accessible-hover); + border-color: var(--color-neutral-stroke-accessible-hover); } /* @@ -122,15 +122,15 @@ */ @variant hover { @variant active { - color: var(--colorNeutralStrokeAccessiblePressed); - border-color: var(--colorNeutralStrokeAccessiblePressed); + color: var(--color-neutral-stroke-accessible-pressed); + border-color: var(--color-neutral-stroke-accessible-pressed); } } /* the thumb — `` by default, see "Reaching the thumb" in the header */ & .circle-filled { - transition-duration: var(--durationNormal); - transition-timing-function: var(--curveEasyEase); + transition-duration: var(--duration-normal); + transition-timing-function: var(--ease-easy-ease); transition-property: transform; @media screen and (prefers-reduced-motion: reduce) { @@ -171,32 +171,32 @@ } } - background-color: var(--colorCompoundBrandBackground); - color: var(--colorNeutralForegroundInverted); + background-color: var(--color-compound-brand-background); + color: var(--color-neutral-foreground-inverted); /* `shorthands.borderColor(...)` expanded to the four longhands it compiled to */ - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); @variant hover { - color: var(--colorNeutralForegroundInverted); - background-color: var(--colorCompoundBrandBackgroundHover); - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + color: var(--color-neutral-foreground-inverted); + background-color: var(--color-compound-brand-background-hover); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } @variant hover { @variant active { - color: var(--colorNeutralForegroundInverted); - background-color: var(--colorCompoundBrandBackgroundPressed); - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + color: var(--color-neutral-foreground-inverted); + background-color: var(--color-compound-brand-background-pressed); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } } } diff --git a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.module.css b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.module.css index a45364f86e85a6..a28d2c8a99f730 100644 --- a/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuPopover/MenuPopover.module.css @@ -52,18 +52,18 @@ @apply box-border w-max max-w-300 min-w-138 overflow-x-hidden; @apply px-horizontal-xs py-vertical-xs; - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); - box-shadow: var(--shadow16); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); + box-shadow: var(--shadow-16); - /* kept as the compiled shorthand (`border:1px solid var(--colorTransparentStroke)`) — + /* kept as the compiled shorthand (`border:1px solid var(--color-transparent-stroke)`) — nothing in this package re-declares any border longhand on this element. */ - border: 1px solid var(--colorTransparentStroke); + border: 1px solid var(--color-transparent-stroke); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } diff --git a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.module.css b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.module.css index bc553a4d638fc3..cdf93ce4a5d2b1 100644 --- a/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.module.css +++ b/packages/react-components/react-menu/library/src/components/MenuSplitGroup/MenuSplitGroup.module.css @@ -117,7 +117,7 @@ @apply h-20 w-thin; content: ''; - background-color: var(--colorNeutralStroke1); + background-color: var(--color-neutral-stroke-1); } } } diff --git a/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.module.css b/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.module.css index 34588abe16a350..b0e321cfc647ce 100644 --- a/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.module.css +++ b/packages/react-components/react-menu/stories/src/Menu/NestedSubmenusResponsiveness.module.css @@ -10,10 +10,10 @@ width: 500px; height: 400px; position: relative; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; resize: both; - background-image: linear-gradient(-45deg, var(--colorBrandBackground) 20px, transparent 20px); + background-image: linear-gradient(-45deg, var(--color-brand-background) 20px, transparent 20px); overflow: hidden; } @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-menu/stories/src/MenuList/MenuListCheckboxItems.module.css b/packages/react-components/react-menu/stories/src/MenuList/MenuListCheckboxItems.module.css index 0704af662d25e1..e10dd04a921b99 100644 --- a/packages/react-components/react-menu/stories/src/MenuList/MenuListCheckboxItems.module.css +++ b/packages/react-components/react-menu/stories/src/MenuList/MenuListCheckboxItems.module.css @@ -2,12 +2,12 @@ * Token references are the Fluent theme's CSS variables. */ .container { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); min-width: 128px; min-height: 48px; max-width: 300px; width: max-content; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding-top: 4px; padding-bottom: 4px; } diff --git a/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledCheckboxItems.module.css b/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledCheckboxItems.module.css index 1a01dbaf3d33ce..b44296a090ed29 100644 --- a/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledCheckboxItems.module.css +++ b/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledCheckboxItems.module.css @@ -2,12 +2,12 @@ * Token references are the Fluent theme's CSS variables. */ .container { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); min-width: 128px; min-height: 48px; max-width: 300px; width: max-content; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding-top: 4px; padding-bottom: 4px; } diff --git a/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledRadioItems.module.css b/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledRadioItems.module.css index 38a2da83b1e4e9..50c3911697122a 100644 --- a/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledRadioItems.module.css +++ b/packages/react-components/react-menu/stories/src/MenuList/MenuListControlledRadioItems.module.css @@ -2,12 +2,12 @@ * Token references are the Fluent theme's CSS variables. */ .container { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); min-width: 128px; min-height: 48px; max-width: 300px; width: max-content; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding-top: 4px; padding-bottom: 4px; } diff --git a/packages/react-components/react-menu/stories/src/MenuList/MenuListDefault.module.css b/packages/react-components/react-menu/stories/src/MenuList/MenuListDefault.module.css index 923c9ace7077a5..6f14480f158122 100644 --- a/packages/react-components/react-menu/stories/src/MenuList/MenuListDefault.module.css +++ b/packages/react-components/react-menu/stories/src/MenuList/MenuListDefault.module.css @@ -2,12 +2,12 @@ * Token references are the Fluent theme's CSS variables. */ .container { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); min-width: 128px; min-height: 48px; max-width: 300px; width: max-content; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding-top: 4px; padding-bottom: 4px; } diff --git a/packages/react-components/react-menu/stories/src/MenuList/MenuListNestedSubmenus.module.css b/packages/react-components/react-menu/stories/src/MenuList/MenuListNestedSubmenus.module.css index 00f56b848c544a..2cf4a633fa03d2 100644 --- a/packages/react-components/react-menu/stories/src/MenuList/MenuListNestedSubmenus.module.css +++ b/packages/react-components/react-menu/stories/src/MenuList/MenuListNestedSubmenus.module.css @@ -2,12 +2,12 @@ * Token references are the Fluent theme's CSS variables. */ .container { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); min-width: 128px; min-height: 48px; max-width: 300px; width: max-content; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding-top: 4px; padding-bottom: 4px; } diff --git a/packages/react-components/react-menu/stories/src/MenuList/MenuListRadioItems.module.css b/packages/react-components/react-menu/stories/src/MenuList/MenuListRadioItems.module.css index 69a8b81811dae2..0af56db1b02f52 100644 --- a/packages/react-components/react-menu/stories/src/MenuList/MenuListRadioItems.module.css +++ b/packages/react-components/react-menu/stories/src/MenuList/MenuListRadioItems.module.css @@ -2,12 +2,12 @@ * Token references are the Fluent theme's CSS variables. */ .container { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); min-width: 128px; min-height: 48px; max-width: 300px; width: max-content; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); padding-top: 4px; padding-bottom: 4px; } From b7129fcfaf4bc9ea712f7ddd7936f79f5a1a7f5e Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:44:04 -0700 Subject: [PATCH 619/640] refactor(theming): old->canonical token var sweep 5/8 (Phase 2a) Areas: packages/react-components/react-message-bar, packages/react-components/react-migration-v0-v9, packages/react-components/react-migration-v8-v9, packages/react-components/react-nav, packages/react-components/react-overflow, packages/react-components/react-persona, packages/react-components/react-popover, packages/react-components/react-portal Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../MessageBar/MessageBar.module.css | 48 ++++++++--------- .../MessageBarBody/MessageBarBody.module.css | 8 +-- .../MessageBarTitle.module.css | 8 +-- .../src/MessageBar/Animation.module.css | 2 +- .../stories/src/MessageBar/Dismiss.module.css | 2 +- .../stories/src/MessageBar/Reflow.module.css | 6 +-- .../Attachment/Attachment.module.css | 16 +++--- .../AttachmentDescription.module.css | 4 +- .../Attachment/AttachmentHeader.module.css | 4 +- .../List/ListItem/ListItem.module.css | 10 ++-- .../src/components/Segment/Segment.module.css | 4 +- .../StyledText/StyledText.module.css | 42 +++++++-------- .../components/StyledText/StyledText.test.tsx | 2 +- .../ThemeShim/createV8Theme/index.module.css | 2 +- .../ThemeShim/createV9Theme/index.module.css | 2 +- .../src/components/AppItem/AppItem.module.css | 30 +++++------ .../AppItemStatic/AppItemStatic.module.css | 32 +++++------ .../components/Hamburger/Hamburger.module.css | 6 +-- .../NavCategoryItem.module.css | 54 +++++++++---------- .../components/NavDrawer/NavDrawer.module.css | 2 +- .../src/components/NavItem/NavItem.module.css | 54 +++++++++---------- .../NavSectionHeader.module.css | 8 +-- .../NavSubItem/NavSubItem.module.css | 42 +++++++-------- .../SplitNavItem/SplitNavItem.module.css | 32 +++++------ .../stories/src/Nav/CustomMotion.module.css | 2 +- .../src/Overflow/CustomComponent.module.css | 6 +-- .../stories/src/Overflow/Default.module.css | 6 +-- .../stories/src/Overflow/Dividers.module.css | 6 +-- .../src/Overflow/LargerDividers.module.css | 6 +-- .../src/Overflow/ListenToChanges.module.css | 6 +-- .../src/Overflow/MinimumVisible.module.css | 6 +-- .../Overflow/OverflowByPriority.module.css | 6 +-- .../stories/src/Overflow/Pinned.module.css | 6 +-- .../Overflow/PriorityWithDividers.module.css | 6 +-- .../src/Overflow/ReorderObserver.module.css | 6 +-- .../src/Overflow/ReverseDomOrder.module.css | 6 +-- .../stories/src/Overflow/Vertical.module.css | 6 +-- .../stories/src/Overflow/Wrapped.module.css | 6 +-- .../src/components/Persona/Persona.module.css | 44 +++++++-------- ...PersonaPresencePreviousBehavior.module.css | 4 +- .../PopoverSurface/PopoverSurface.module.css | 35 ++++++------ .../react-portal/library/docs/Spec.md | 2 +- .../src/Portal/PortalDefault.module.css | 32 +++++------ .../src/toMountNodeProps/Default.module.css | 6 +-- 44 files changed, 312 insertions(+), 311 deletions(-) diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.module.css b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.module.css index b675761cb5f3ce..6739d2ddedee0e 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.module.css +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/MessageBar.module.css @@ -52,7 +52,7 @@ * border colors). The blocks are still written in mergeClasses argument order so a later * refactor cannot silently invert a winner. Across layers the two real overrides are * `rootMultiline`'s grid template + `align-items` over the reset, and `square`'s - * `border-radius: 0` over the reset's `--borderRadiusMedium` — both l1-over-base. + * `border-radius: 0` over the reset's `--radius-medium` — both l1-over-base. * * ── Enum props → in-module attribute selectors ────────────────────────────────────── * `data-layout` and `data-intent` are the names the in-repo headless preview already @@ -112,9 +112,9 @@ /* kept as the compiled `border` shorthand (the atomic is one declaration); the intent slices below replace only its colour, from a higher layer. */ - border: var(--spacing-thin) solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - background-color: var(--colorNeutralBackground3); + border: var(--spacing-thin) solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + background-color: var(--color-neutral-background-3); } /* from useIconBaseStyles (makeResetStyles) */ @@ -122,8 +122,8 @@ @apply me-horizontal-s flex items-center; grid-area: icon; - font-size: var(--fontSizeBase500); - color: var(--colorNeutralForeground3); + font-size: var(--text-base-500); + color: var(--color-neutral-foreground-3); } /* from useReflowSpacerBaseStyles (makeResetStyles) */ @@ -175,27 +175,27 @@ */ .root { @variant intent-error { - background-color: var(--colorStatusDangerBackground1); - border-top-color: var(--colorStatusDangerBorder1); - border-right-color: var(--colorStatusDangerBorder1); - border-bottom-color: var(--colorStatusDangerBorder1); - border-left-color: var(--colorStatusDangerBorder1); + background-color: var(--color-status-danger-background-1); + border-top-color: var(--color-status-danger-border-1); + border-right-color: var(--color-status-danger-border-1); + border-bottom-color: var(--color-status-danger-border-1); + border-left-color: var(--color-status-danger-border-1); } @variant intent-warning { - background-color: var(--colorStatusWarningBackground1); - border-top-color: var(--colorStatusWarningBorder1); - border-right-color: var(--colorStatusWarningBorder1); - border-bottom-color: var(--colorStatusWarningBorder1); - border-left-color: var(--colorStatusWarningBorder1); + background-color: var(--color-status-warning-background-1); + border-top-color: var(--color-status-warning-border-1); + border-right-color: var(--color-status-warning-border-1); + border-bottom-color: var(--color-status-warning-border-1); + border-left-color: var(--color-status-warning-border-1); } @variant intent-success { - background-color: var(--colorStatusSuccessBackground1); - border-top-color: var(--colorStatusSuccessBorder1); - border-right-color: var(--colorStatusSuccessBorder1); - border-bottom-color: var(--colorStatusSuccessBorder1); - border-left-color: var(--colorStatusSuccessBorder1); + background-color: var(--color-status-success-background-1); + border-top-color: var(--color-status-success-border-1); + border-right-color: var(--color-status-success-border-1); + border-bottom-color: var(--color-status-success-border-1); + border-left-color: var(--color-status-success-border-1); } } } @@ -209,19 +209,19 @@ .root { @variant intent-error { & .icon { - color: var(--colorStatusDangerForeground1); + color: var(--color-status-danger-foreground-1); } } @variant intent-warning { & .icon { - color: var(--colorStatusWarningForeground3); + color: var(--color-status-warning-foreground-3); } } @variant intent-success { & .icon { - color: var(--colorStatusSuccessForeground1); + color: var(--color-status-success-foreground-1); } } } diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.module.css b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.module.css index e5d2f10e1faf53..1f5ea49bef40b5 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.module.css +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarBody/MessageBarBody.module.css @@ -41,10 +41,10 @@ @apply pe-horizontal-m; /* from typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); grid-area: body; } diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.module.css b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.module.css index 7572bf2fd1e877..62088c73b21da1 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.module.css +++ b/packages/react-components/react-message-bar/library/src/components/MessageBarTitle/MessageBarTitle.module.css @@ -40,10 +40,10 @@ /* from useRootBaseStyles (makeResetStyles) */ .root { /* from typographyStyles.body1Strong */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); &::after { content: ' '; diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css b/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css index e60b75af413c67..86c57e66ed32cc 100644 --- a/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css +++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Animation.module.css @@ -14,7 +14,7 @@ gap: 10px; height: 300px; overflow: auto; - border: 2px solid var(--colorBrandForeground1); + border: 2px solid var(--color-brand-foreground-1); } .field { diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css b/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css index 6cde2ed38c24b6..25210b6b89d331 100644 --- a/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css +++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Dismiss.module.css @@ -9,7 +9,7 @@ gap: 10px; height: 300px; overflow: auto; - border: 2px solid var(--colorBrandForeground1); + border: 2px solid var(--color-brand-foreground-1); } .buttonGroup { diff --git a/packages/react-components/react-message-bar/stories/src/MessageBar/Reflow.module.css b/packages/react-components/react-message-bar/stories/src/MessageBar/Reflow.module.css index 800ba9411ccdcf..55328281d926c7 100644 --- a/packages/react-components/react-message-bar/stories/src/MessageBar/Reflow.module.css +++ b/packages/react-components/react-message-bar/stories/src/MessageBar/Reflow.module.css @@ -10,7 +10,7 @@ flex-direction: column; padding: 30px 10px; gap: 10px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); position: relative; overflow: hidden; } @@ -26,6 +26,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/Attachment.module.css b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/Attachment.module.css index 7da0dba8fc0962..d4d1de54b9769c 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/Attachment.module.css +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/Attachment.module.css @@ -50,21 +50,21 @@ .root { @apply relative me-2 mb-2 inline-flex min-h-32 w-full max-w-424 items-center ps-11 pe-3 pt-7 pb-7; - background-color: var(--colorNeutralBackground6); - color: var(--colorNeutralForeground1); - box-shadow: 0 0.2rem 0.4rem -0.075rem var(--colorNeutralShadowAmbient); + background-color: var(--color-neutral-background-6); + color: var(--color-neutral-foreground-1); + box-shadow: 0 0.2rem 0.4rem -0.075rem var(--color-neutral-shadow-ambient); /* Raw px literals, not `strokeWidthThin` / a radius token — written as the base-scale product a numeric utility would emit, so they scale with every other length (CONVERSION_GUIDE §2 "Pixel literals"; precedent: CarouselNavButton.module.css). */ - border: calc(1px * var(--base-scale)) solid var(--colorNeutralStroke3); + border: calc(1px * var(--base-scale)) solid var(--color-neutral-stroke-3); border-radius: calc(4px * var(--base-scale)); /* from createCustomFocusIndicatorStyle(…, { selector: 'focus' }) — the keyborg attribute pair, never the native :focus-visible (CONVERSION_GUIDE §2 pseudo-states). */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } @@ -75,7 +75,7 @@ @apply cursor-pointer; @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } } @@ -93,7 +93,7 @@ .progress-bar { @apply h-full max-w-full; - background-color: var(--colorPaletteLightGreenBackground3); + background-color: var(--color-palette-light-green-background-3); /* `transition: 'width 0.2s'` expanded to longhands. `width` is already a longhand property name, so the transition set is exactly one property (transition-audit.md). */ diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentDescription.module.css b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentDescription.module.css index 27b793828a6e13..82a25f9ec0f92f 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentDescription.module.css +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentDescription.module.css @@ -15,8 +15,8 @@ .root { @apply block; - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); /* unitless ratio, not a length — no base-scale product */ line-height: 1; } diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentHeader.module.css b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentHeader.module.css index 34fedb62c26eeb..c5ebc9ee62ad5c 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentHeader.module.css +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Attachment/AttachmentHeader.module.css @@ -15,8 +15,8 @@ .root { @apply block; - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); /* unitless ratio, not a length — no base-scale product */ line-height: 1.4286; } diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.module.css b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.module.css index 5361de4db92ee5..de11589e325aea 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.module.css +++ b/packages/react-components/react-migration-v0-v9/library/src/components/List/ListItem/ListItem.module.css @@ -51,8 +51,8 @@ /* from createCustomFocusIndicatorStyle(…, { selector: 'focus' }) — the keyborg attribute, never the native :focus-visible (CONVERSION_GUIDE §2 pseudo-states). */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } @@ -63,20 +63,20 @@ @apply cursor-pointer; @variant hover { - background-color: var(--colorNeutralBackground1Hover); + background-color: var(--color-neutral-background-1-hover); } } /* from useStyles.rootSelected */ .root-selected { - background-color: var(--colorNeutralBackground1Selected); + background-color: var(--color-neutral-background-1-selected); } } @layer fui.components.l2 { /* from useStyles.contentWrapper — applied over ItemLayout's `.content-wrapper` */ .content-wrapper { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } /* from useStyles.truncate — applied over ItemLayout's `.header` and `.content-wrapper` */ diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/Segment/Segment.module.css b/packages/react-components/react-migration-v0-v9/library/src/components/Segment/Segment.module.css index dd566b62c102fd..66328d90c80aa1 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/Segment/Segment.module.css +++ b/packages/react-components/react-migration-v0-v9/library/src/components/Segment/Segment.module.css @@ -39,7 +39,7 @@ border-block-end-style: solid; border-inline-start-style: solid; - background-color: var(--colorNeutralBackground1); - box-shadow: 0 1px 1px 1px var(--colorNeutralShadowKey); + background-color: var(--color-neutral-background-1); + box-shadow: 0 1px 1px 1px var(--color-neutral-shadow-key); } } diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.module.css b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.module.css index 95e42c63c852ab..da8071c7695c3c 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.module.css +++ b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.module.css @@ -66,38 +66,38 @@ /* from useSizeStyles.* */ .base100 { - font-size: var(--fontSizeBase100); - line-height: var(--lineHeightBase100); + font-size: var(--text-base-100); + line-height: var(--leading-base-100); } .base200 { - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); } .base300 { - font-size: var(--fontSizeBase300); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + line-height: var(--leading-base-300); } .base400 { - font-size: var(--fontSizeBase400); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + line-height: var(--leading-base-400); } .base500 { - font-size: var(--fontSizeBase500); - line-height: var(--lineHeightBase500); + font-size: var(--text-base-500); + line-height: var(--leading-base-500); } .base600 { - font-size: var(--fontSizeBase600); - line-height: var(--lineHeightBase600); + font-size: var(--text-base-600); + line-height: var(--leading-base-600); } .hero700 { - font-size: var(--fontSizeHero700); - line-height: var(--lineHeightHero700); + font-size: var(--text-hero-700); + line-height: var(--leading-hero-700); } /* from useWeightStyles.* — raw numeric weights, not the Fluent fontWeight* tokens, so @@ -152,34 +152,34 @@ /* from useStyles.mention */ .mention { - color: var(--colorBrandForegroundLink); + color: var(--color-brand-foreground-link); } /* from useStyles.mentionMe */ .mention-me { - color: var(--colorPalettePumpkinBorderActive); + color: var(--color-palette-pumpkin-border-active); font-weight: 700; } /* from useStyles.disabled */ .disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } /* from useStyles.error */ .error { - color: var(--colorPaletteRedForeground3); + color: var(--color-palette-red-foreground-3); } /* from useStyles.important */ .important { - color: var(--colorPaletteDarkOrangeForeground3); + color: var(--color-palette-dark-orange-foreground-3); font-weight: 700; } /* from useStyles.success */ .success { - color: var(--colorPaletteGreenForeground3); + color: var(--color-palette-green-foreground-3); } /* from useStyles.temporary */ @@ -189,6 +189,6 @@ /* from useStyles.timestamp */ .timestamp { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } } diff --git a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx index bb61ed52857ae3..35748cbe89bed9 100644 --- a/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx +++ b/packages/react-components/react-migration-v0-v9/library/src/components/StyledText/StyledText.test.tsx @@ -22,7 +22,7 @@ import styles from './StyledText.module.css'; * key the component uses, so a renamed or dropped slice fails. * - WHAT declarations that class carries → asserted against the build-emitted * `dist/styles.css` by the conversion report's computed-style probe. The `size` cases in - * particular used to assert `line-height: var(--lineHeightBase400)` etc.; that token + * particular used to assert `line-height: var(--leading-base-400)` etc.; that token * mapping is now pinned in StyledText.module.css and covered by the probe. * * Same split react-text made for its 30 equivalent assertions (reports/phase2-batch2.md). diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.module.css b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.module.css index 1c773c2aa808dd..4be48fe16eab8a 100644 --- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.module.css +++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV8Theme/index.module.css @@ -11,7 +11,7 @@ } .instructions { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } .editor { diff --git a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.module.css b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.module.css index f8892fe632594f..97884556005183 100644 --- a/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.module.css +++ b/packages/react-components/react-migration-v8-v9/stories/src/ThemeShim/createV9Theme/index.module.css @@ -11,7 +11,7 @@ } .instructions { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } .editor { diff --git a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.module.css b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.module.css index c4b797786b0c15..e8f817cd00a49d 100644 --- a/packages/react-components/react-nav/library/src/components/AppItem/AppItem.module.css +++ b/packages/react-components/react-nav/library/src/components/AppItem/AppItem.module.css @@ -77,9 +77,9 @@ /* `start`, not `flex-start`: `justify-start` would emit the other keyword */ justify-content: start; - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); /* from `border: 'none'` */ border-block-start-style: none; @@ -87,25 +87,25 @@ border-inline-start-style: none; border-inline-end-style: none; - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } /* the component's own insert focus indicator — not the shared focus-ring utility */ @variant focus-visible { outline-width: var(--spacing-thick); outline-style: solid; - outline-color: var(--colorStrokeFocus2); + outline-color: var(--color-stroke-focus-2); outline-offset: calc(var(--spacing-thick) * -1); } } @@ -124,10 +124,10 @@ width: revert; /* typographyStyles.subtitle2 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } diff --git a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.module.css b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.module.css index 0b532f063e7685..47e8812c2a852a 100644 --- a/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.module.css +++ b/packages/react-components/react-nav/library/src/components/AppItemStatic/AppItemStatic.module.css @@ -47,7 +47,7 @@ * blocks; it is the faithful form, not a DRY regression. * * ── `background-color: unset` on hover is not a no-op ─────────────────────────────── - * The reset paints `--colorNeutralBackground4` unconditionally, so arg #4's `unset` (= + * The reset paints `--color-neutral-background-4` unconditionally, so arg #4's `unset` (= * `initial` = transparent) makes a hovered AppItemStatic go TRANSPARENT rather than fall * back to the rest colour. Griffel produced exactly that: `.fmaajru:hover` at 0-2-0 beat the * reset's plain `.rdi7s9k` at 0-1-0. Here `fui.components.l1` beats `fui.base` before @@ -71,9 +71,9 @@ /* `start`, not `flex-start`: `justify-start` would emit the other keyword */ justify-content: start; - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); /* from `border: 'none'` */ border-block-start-style: none; @@ -81,25 +81,25 @@ border-inline-start-style: none; border-inline-end-style: none; - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } /* the component's own insert focus indicator — not the shared focus-ring utility */ @variant focus-visible { outline-width: var(--spacing-thick); outline-style: solid; - outline-color: var(--colorStrokeFocus2); + outline-color: var(--color-stroke-focus-2); outline-offset: calc(var(--spacing-thick) * -1); } } @@ -118,10 +118,10 @@ width: revert; /* typographyStyles.subtitle2 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } diff --git a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.module.css b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.module.css index 82cc144924d526..b21cf7289ce4c8 100644 --- a/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.module.css +++ b/packages/react-components/react-nav/library/src/components/Hamburger/Hamburger.module.css @@ -57,7 +57,7 @@ .root { @apply no-underline; - background-color: var(--colorNeutralBackground4); + background-color: var(--color-neutral-background-4); /* from `border: 'none'` — see the header */ border-block-start-style: none; @@ -66,11 +66,11 @@ border-inline-end-style: none; @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } @variant active { - background-color: var(--colorNeutralBackground4Pressed); + background-color: var(--color-neutral-background-4-pressed); } } } diff --git a/packages/react-components/react-nav/library/src/components/NavCategoryItem/NavCategoryItem.module.css b/packages/react-components/react-nav/library/src/components/NavCategoryItem/NavCategoryItem.module.css index b70982d511c07f..8c78e6e25d9005 100644 --- a/packages/react-components/react-nav/library/src/components/NavCategoryItem/NavCategoryItem.module.css +++ b/packages/react-components/react-nav/library/src/components/NavCategoryItem/NavCategoryItem.module.css @@ -64,7 +64,7 @@ } 100% { - background-color: var(--colorCompoundBrandForeground1); + background-color: var(--color-compound-brand-foreground-1); } } @@ -77,7 +77,7 @@ 100% { opacity: 1; - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } } @@ -85,7 +85,7 @@ @keyframes nav-category-item-icon-regular-exit { 0% { opacity: 1; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } 100% { @@ -103,9 +103,9 @@ /* `start`, not `flex-start`: `justify-start` would emit the other keyword */ justify-content: start; - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); /* from `border: 'none'` */ border-block-start-style: none; @@ -113,25 +113,25 @@ border-inline-start-style: none; border-inline-end-style: none; - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } /* the component's own insert focus indicator — not the shared focus-ring utility */ @variant focus-visible { outline-width: var(--spacing-thick); outline-style: solid; - outline-color: var(--colorStrokeFocus2); + outline-color: var(--color-stroke-focus-2); outline-offset: calc(var(--spacing-thick) * -1); } } @@ -162,13 +162,13 @@ @apply absolute -ms-horizontal-l h-vertical-xl w-horizontal-xs; content: ''; - background-color: var(--colorCompoundBrandForeground1); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-compound-brand-foreground-1); + border-radius: var(--radius-circular); animation-name: nav-category-item-indicator-enter; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } @variant forced-colors { @@ -176,7 +176,7 @@ /* D6: the hardcoded 2px is upstream's, not a stroke-width token */ outline-width: 2px; outline-style: solid; - outline-color: var(--colorTransparentStroke); + outline-color: var(--color-transparent-stroke); outline-offset: -2px; } } @@ -186,10 +186,10 @@ @layer fui.components.l1 { /* arg #6 — from the shared useContentStyles.selected (typographyStyles.body1Strong) */ .selected { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } } @@ -251,16 +251,16 @@ display: inline; animation-name: nav-category-item-icon-filled-enter; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } & :global(.fui-Icon-regular) { animation-name: nav-category-item-icon-regular-exit; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } } } diff --git a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.module.css b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.module.css index 8b27545ab207e5..c06aae83c23e7a 100644 --- a/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.module.css +++ b/packages/react-components/react-nav/library/src/components/NavDrawer/NavDrawer.module.css @@ -48,7 +48,7 @@ @layer fui.components.l2 { /* arg #2 — from useStyles.root */ .root { - background-color: var(--colorNeutralBackground4); + background-color: var(--color-neutral-background-4); align-items: unset; } } diff --git a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.module.css b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.module.css index 52a7ddc4789539..2b37d7b8988463 100644 --- a/packages/react-components/react-nav/library/src/components/NavItem/NavItem.module.css +++ b/packages/react-components/react-nav/library/src/components/NavItem/NavItem.module.css @@ -81,7 +81,7 @@ } 100% { - background-color: var(--colorCompoundBrandForeground1); + background-color: var(--color-compound-brand-foreground-1); } } @@ -94,7 +94,7 @@ 100% { opacity: 1; - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } } @@ -102,7 +102,7 @@ @keyframes nav-item-icon-regular-exit { 0% { opacity: 1; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } 100% { @@ -120,9 +120,9 @@ /* `start`, not `flex-start`: `justify-start` would emit the other keyword */ justify-content: start; - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); /* from `border: 'none'` — see the header */ border-block-start-style: none; @@ -130,25 +130,25 @@ border-inline-start-style: none; border-inline-end-style: none; - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } /* the component's own insert focus indicator — not the shared focus-ring utility */ @variant focus-visible { outline-width: var(--spacing-thick); outline-style: solid; - outline-color: var(--colorStrokeFocus2); + outline-color: var(--color-stroke-focus-2); outline-offset: calc(var(--spacing-thick) * -1); } } @@ -168,13 +168,13 @@ @apply absolute -ms-horizontal-l h-vertical-xl w-horizontal-xs; content: ''; - background-color: var(--colorCompoundBrandForeground1); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-compound-brand-foreground-1); + border-radius: var(--radius-circular); animation-name: nav-item-indicator-enter; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } @variant forced-colors { @@ -182,7 +182,7 @@ /* D6: the hardcoded 2px is upstream's, not a stroke-width token */ outline-width: 2px; outline-style: solid; - outline-color: var(--colorTransparentStroke); + outline-color: var(--color-transparent-stroke); outline-offset: -2px; } } @@ -192,10 +192,10 @@ @layer fui.components.l1 { /* arg #5 — from the shared useContentStyles.selected (typographyStyles.body1Strong) */ .selected { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } } @@ -271,16 +271,16 @@ display: inline; animation-name: nav-item-icon-filled-enter; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } & :global(.fui-Icon-regular) { animation-name: nav-item-icon-regular-exit; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } } } diff --git a/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.module.css b/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.module.css index 0aef4f05c78127..dfd0a12def366a 100644 --- a/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.module.css +++ b/packages/react-components/react-nav/library/src/components/NavSectionHeader/NavSectionHeader.module.css @@ -43,9 +43,9 @@ @apply my-vertical-s ms-horizontal-m-nudge; /* typographyStyles.caption1Strong */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); } } diff --git a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.module.css b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.module.css index cf31fcb3a17755..b42683a623f3b7 100644 --- a/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.module.css +++ b/packages/react-components/react-nav/library/src/components/NavSubItem/NavSubItem.module.css @@ -75,7 +75,7 @@ } 100% { - background-color: var(--colorCompoundBrandForeground1); + background-color: var(--color-compound-brand-foreground-1); } } @@ -88,9 +88,9 @@ /* `start`, not `flex-start`: `justify-start` would emit the other keyword */ justify-content: start; - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); /* from `border: 'none'` */ border-block-start-style: none; @@ -98,25 +98,25 @@ border-inline-start-style: none; border-inline-end-style: none; - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } /* the component's own insert focus indicator — not the shared focus-ring utility */ @variant focus-visible { outline-width: var(--spacing-thick); outline-style: solid; - outline-color: var(--colorStrokeFocus2); + outline-color: var(--color-stroke-focus-2); outline-offset: calc(var(--spacing-thick) * -1); } } @@ -150,13 +150,13 @@ @apply absolute -ms-horizontal-l h-vertical-xl w-horizontal-xs; content: ''; - background-color: var(--colorCompoundBrandForeground1); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-compound-brand-foreground-1); + border-radius: var(--radius-circular); animation-name: nav-sub-item-indicator-enter; - animation-duration: var(--durationFaster); + animation-duration: var(--duration-faster); animation-fill-mode: both; - animation-timing-function: var(--curveLinear); + animation-timing-function: var(--ease-linear); } @variant forced-colors { @@ -164,7 +164,7 @@ /* D6: the hardcoded 2px is upstream's, not a stroke-width token */ outline-width: 2px; outline-style: solid; - outline-color: var(--colorTransparentStroke); + outline-color: var(--color-transparent-stroke); outline-offset: -2px; } } @@ -174,10 +174,10 @@ @layer fui.components.l1 { /* arg #7 — from the shared useContentStyles.selected (typographyStyles.body1Strong) */ .selected { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } } diff --git a/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.module.css b/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.module.css index ee65013ddb6abe..2fde5ea80d3256 100644 --- a/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.module.css +++ b/packages/react-components/react-nav/library/src/components/SplitNavItem/SplitNavItem.module.css @@ -103,9 +103,9 @@ /* `start`, not `flex-start`: `justify-start` would emit the other keyword */ justify-content: start; - background-color: var(--colorNeutralBackground4); - border-radius: var(--borderRadiusMedium); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-4); + border-radius: var(--radius-medium); + color: var(--color-neutral-foreground-2); /* from `border: 'none'` */ border-block-start-style: none; @@ -113,25 +113,25 @@ border-inline-start-style: none; border-inline-end-style: none; - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; /* typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } /* the component's own insert focus indicator — not the shared focus-ring utility */ @variant focus-visible { outline-width: var(--spacing-thick); outline-style: solid; - outline-color: var(--colorStrokeFocus2); + outline-color: var(--color-stroke-focus-2); outline-offset: calc(var(--spacing-thick) * -1); } } @@ -157,17 +157,17 @@ text-align: unset; - background-color: var(--colorNeutralBackground4); - transition-duration: var(--durationFaster); - transition-timing-function: var(--curveLinear); + background-color: var(--color-neutral-background-4); + transition-duration: var(--duration-faster); + transition-timing-function: var(--ease-linear); transition-property: background-color; @variant hover { - background-color: var(--colorNeutralBackground4Hover); + background-color: var(--color-neutral-background-4-hover); } @variant active { - background-color: var(--colorNeutralBackground4Pressed); + background-color: var(--color-neutral-background-4-pressed); } } } diff --git a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css index 8a738eb552c8a6..b1f2afb135bba1 100644 --- a/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css +++ b/packages/react-components/react-nav/stories/src/Nav/CustomMotion.module.css @@ -8,7 +8,7 @@ height: 600px; position: relative; display: flex; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .nav { diff --git a/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.module.css b/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.module.css index 86d49740dae93c..0fc08c830a163f 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/CustomComponent.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Default.module.css b/packages/react-components/react-overflow/stories/src/Overflow/Default.module.css index 0209b7c078c542..20aa5a1f16b60d 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/Default.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/Default.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Dividers.module.css b/packages/react-components/react-overflow/stories/src/Overflow/Dividers.module.css index 24c2a12f74e092..200690fff2c06a 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/Dividers.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/Dividers.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.module.css b/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.module.css index 944e37decefea5..429fe3876ca115 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/LargerDividers.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.module.css b/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.module.css index ac2a843b0a0dcf..408ff4e0894360 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/ListenToChanges.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.module.css b/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.module.css index 6c69b3ea673229..05695cf838a820 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/MinimumVisible.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.module.css b/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.module.css index d918c20ae76fcd..b395b9d9b1f36d 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/OverflowByPriority.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Pinned.module.css b/packages/react-components/react-overflow/stories/src/Overflow/Pinned.module.css index 2ac4bf64a52597..22884621186249 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/Pinned.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/Pinned.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/PriorityWithDividers.module.css b/packages/react-components/react-overflow/stories/src/Overflow/PriorityWithDividers.module.css index d8bd0f17114d76..da2d8c0ba6ca46 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/PriorityWithDividers.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/PriorityWithDividers.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/ReorderObserver.module.css b/packages/react-components/react-overflow/stories/src/Overflow/ReorderObserver.module.css index f4a77f8ab8b7eb..39136e92cee56e 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/ReorderObserver.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/ReorderObserver.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,8 +28,8 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } .controls { diff --git a/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.module.css b/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.module.css index dbc9995ebcadf9..67d8bd28d42163 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/ReverseDomOrder.module.css @@ -11,7 +11,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: horizontal; @@ -28,6 +28,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Vertical.module.css b/packages/react-components/react-overflow/stories/src/Overflow/Vertical.module.css index 154e0b386af07d..115d9427a25466 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/Vertical.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/Vertical.module.css @@ -13,7 +13,7 @@ .resizableArea { min-width: 200px; max-width: 800px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; position: relative; resize: vertical; @@ -30,6 +30,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.module.css b/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.module.css index b45c8a86896b70..44bcdebc8e177c 100644 --- a/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.module.css +++ b/packages/react-components/react-overflow/stories/src/Overflow/Wrapped.module.css @@ -21,7 +21,7 @@ flex-wrap: nowrap; min-width: 200px; max-width: 1000px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 20px 10px 10px 10px; overflow: hidden; position: relative; @@ -39,6 +39,6 @@ font-weight: 900; line-height: 1; letter-spacing: 1px; - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); } diff --git a/packages/react-components/react-persona/library/src/components/Persona/Persona.module.css b/packages/react-components/react-persona/library/src/components/Persona/Persona.module.css index 617c683b4d7f31..0b35efb726b844 100644 --- a/packages/react-components/react-persona/library/src/components/Persona/Persona.module.css +++ b/packages/react-components/react-persona/library/src/components/Persona/Persona.module.css @@ -107,11 +107,11 @@ .primary-text-base { @apply block; - color: var(--colorNeutralForeground1); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + color: var(--color-neutral-foreground-1); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useOptionalTextBaseClassName (makeResetStyles) — compiled `.rp1pf9e`, @@ -119,11 +119,11 @@ .optional-text-base { @apply block; - color: var(--colorNeutralForeground2); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + color: var(--color-neutral-foreground-2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } @@ -229,24 +229,24 @@ /* from useTextStyles.caption1/.subtitle2/.body1 — typographyStyles expanded to longhands. These beat the two `fui.base` text resets, reproducing Griffel's d-beats-r buckets. */ .caption1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } .subtitle2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } .body1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* diff --git a/packages/react-components/react-persona/stories/src/Persona/PersonaPresencePreviousBehavior.module.css b/packages/react-components/react-persona/stories/src/Persona/PersonaPresencePreviousBehavior.module.css index 38fe406e424add..d77107e7155a64 100644 --- a/packages/react-components/react-persona/stories/src/Persona/PersonaPresencePreviousBehavior.module.css +++ b/packages/react-components/react-persona/stories/src/Persona/PersonaPresencePreviousBehavior.module.css @@ -2,11 +2,11 @@ * Token references are the Fluent theme's CSS variables. */ .statusAway { - color: var(--colorPaletteMarigoldBackground3); + color: var(--color-palette-marigold-background-3); } .statusOffline { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .root { diff --git a/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.module.css b/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.module.css index 71ee14101dabdf..067b976cd60f93 100644 --- a/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.module.css +++ b/packages/react-components/react-popover/library/src/components/PopoverSurface/PopoverSurface.module.css @@ -86,28 +86,29 @@ @layer fui.components.l1 { /* from useStyles.root — root arg #2 */ .root { - color: var(--colorNeutralForeground1); - background-color: var(--colorNeutralBackground1); + color: var(--color-neutral-foreground-1); + background-color: var(--color-neutral-background-1); /* Kept as the compiled shorthands (`.ft85np5{border-radius:…}`, `.f9ggezi{border:1px solid …}`): no rule in this module sets any of their longhands, so there is no Griffel shorthand-vs-longhand priority left for the cascade to get wrong. Same call as react-tooltip, whose root slice is the same pair of declarations. */ - border-radius: var(--borderRadiusMedium); - border: 1px solid var(--colorTransparentStroke); + border-radius: var(--radius-medium); + border: 1px solid var(--color-transparent-stroke); /* ...typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); /* TODO carried verbatim from the Griffel source: need versions of tokens.alias.shadow.shadow16 etc. that work with filter. - The px lengths stay literal — they are this filter's stand-in for the `--shadow16` + The px lengths stay literal — they are this filter's stand-in for the `--shadow-16` TOKEN, and tokens never ride `--base-scale` (D4), so rescaling them would make the two forms of the same shadow drift apart at a non-default root font size. */ - filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey)); + filter: drop-shadow(0 0 2px var(--color-neutral-shadow-ambient)) + drop-shadow(0 8px 16px var(--color-neutral-shadow-key)); /* * from useStyles.inline — root arg #3. @@ -152,13 +153,13 @@ * and react-button made for their own `appearance`. */ .inverted { - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundStaticInverted); + background-color: var(--color-neutral-background-static); + color: var(--color-neutral-foreground-static-inverted); } .brand { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); } } @@ -188,7 +189,7 @@ background-color: inherit; background-clip: content-box; - border-bottom-left-radius: var(--borderRadiusSmall); /* @noflip */ + border-bottom-left-radius: var(--radius-small); /* @noflip */ transform: rotate(var(--fui-positioning-arrow-angle)); /* @noflip */ height: var(--fui-positioning-arrow-height); @@ -206,9 +207,9 @@ spacing utilities are --base-scale rem, so both are written literally here to keep them from drifting apart at a non-default root font size. */ margin: -1px; - border: 1px solid var(--colorTransparentStroke); + border: 1px solid var(--color-transparent-stroke); - border-bottom-left-radius: var(--borderRadiusSmall); /* @noflip */ + border-bottom-left-radius: var(--radius-small); /* @noflip */ clip-path: polygon(0% 0%, 100% 100%, 0% 100%); } diff --git a/packages/react-components/react-portal/library/docs/Spec.md b/packages/react-components/react-portal/library/docs/Spec.md index 404d0fbe7cdaa0..303695ab3649ad 100644 --- a/packages/react-components/react-portal/library/docs/Spec.md +++ b/packages/react-components/react-portal/library/docs/Spec.md @@ -82,7 +82,7 @@ const customElement = document.createElement('div'); ```css /* PortalContent.module.css */ .portal-content { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } ``` diff --git a/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css b/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css index 988862e5d4a3e4..80a25b92694963 100644 --- a/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css +++ b/packages/react-components/react-portal/stories/src/Portal/PortalDefault.module.css @@ -14,31 +14,31 @@ } .state { - font-family: var(--fontFamilyMonospace); - border: var(--stroke-width-thin) solid var(--colorNeutralStroke1); + font-family: var(--font-monospace); + border: var(--stroke-width-thin) solid var(--color-neutral-stroke-1); padding: 4px; text-align: center; } .clippingContainer { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); - border: var(--stroke-width-thick) solid var(--colorNeutralStroke1); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); + border: var(--stroke-width-thick) solid var(--color-neutral-stroke-1); padding: 24px 8px; overflow: hidden; } .portalContent { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase500); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase500); - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); - border: var(--stroke-width-thick) dashed var(--colorBrandStroke2); + font-family: var(--font-base); + font-size: var(--text-base-500); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-500); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); + border: var(--stroke-width-thick) dashed var(--color-brand-stroke-2); padding: 12px 6px; } diff --git a/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css b/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css index 5bf2b21f73ab7f..2988648980347f 100644 --- a/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css +++ b/packages/react-components/react-portal/stories/src/toMountNodeProps/Default.module.css @@ -2,10 +2,10 @@ * Token references are the Fluent theme's CSS variables. */ .message { - background-color: var(--colorNeutralBackground1); - border: var(--stroke-width-thick) solid var(--colorStatusSuccessBorder1); + background-color: var(--color-neutral-background-1); + border: var(--stroke-width-thick) solid var(--color-status-success-border-1); padding: 20px; - font-size: var(--fontSizeBase600); + font-size: var(--text-base-600); position: fixed; top: 0; left: 0; From e0ae021f0d679e2be634abbfcdaeba8800cba9f0 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:44:06 -0700 Subject: [PATCH 620/640] refactor(theming): old->canonical token var sweep 6/8 (Phase 2a) Areas: packages/react-components/react-positioning, packages/react-components/react-progress, packages/react-components/react-radio, packages/react-components/react-rating, packages/react-components/react-search, packages/react-components/react-select, packages/react-components/react-skeleton, packages/react-components/react-slider, packages/react-components/react-spinbutton, packages/react-components/react-spinner, packages/react-components/react-storybook-addon, packages/react-components/react-swatch-picker, packages/react-components/react-switch, packages/react-components/react-table, packages/react-components/react-tabs Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../useSafeZoneArea/SafeZoneArea.module.css | 8 +- .../UseSafeZoneAreaDefault.module.css | 30 +-- .../ProgressBar/ProgressBar.module.css | 26 +-- .../src/components/Radio/Radio.module.css | 40 ++-- .../RatingDisplay/RatingDisplay.module.css | 20 +- .../RatingItem/RatingItem.module.css | 20 +- .../components/SearchBox/SearchBox.module.css | 6 +- .../SearchBox/SearchBoxAppearance.module.css | 8 +- .../SearchBox/SearchBoxTypeahead.module.css | 16 +- .../src/components/Select/Select.module.css | 128 +++++----- .../src/Select/SelectAppearance.module.css | 8 +- .../SkeletonItem/SkeletonItem.module.css | 24 +- .../src/Skeleton/SkeletonAnimation.module.css | 2 +- .../Skeleton/SkeletonAppearance.module.css | 2 +- .../src/Skeleton/SkeletonItemShape.module.css | 2 +- .../src/Skeleton/SkeletonItemSize.module.css | 2 +- .../src/Skeleton/SkeletonRow.module.css | 2 +- .../src/components/Slider/Slider.module.css | 44 ++-- .../SpinButton/SpinButton.module.css | 194 +++++++-------- .../SpinButtonAppearance.module.css | 8 +- .../src/components/Spinner/Spinner.module.css | 76 +++--- .../src/Spinner/SpinnerAppearance.module.css | 2 +- .../react-storybook-addon/src/docs-chrome.css | 4 +- .../src/docs/DirSwitch.module.css | 8 +- .../src/docs/FluentDocsPage.module.css | 12 +- .../ColorSwatch/ColorSwatch.module.css | 78 +++---- .../ColorSwatch/ColorSwatch.test.tsx | 2 +- .../EmptySwatch/EmptySwatch.module.css | 16 +- .../ImageSwatch/ImageSwatch.module.css | 54 ++--- .../SwatchPicker/SwatchPicker.test.tsx | 4 +- .../__snapshots__/renderUtils.test.tsx.snap | 36 +-- .../src/components/Switch/Switch.module.css | 62 ++--- .../src/components/Table/Table.module.css | 2 +- .../components/TableCell/TableCell.module.css | 4 +- .../TableCellLayout.module.css | 12 +- .../TableHeaderCell.module.css | 14 +- .../TableResizeHandle.module.css | 2 +- .../components/TableRow/TableRow.module.css | 48 ++-- .../TableSelectionCell.module.css | 4 +- .../library/src/components/Tab/Tab.module.css | 220 +++++++++--------- .../src/Tabs/TabListWithOverflow.module.css | 4 +- .../src/Tabs/TabListWithPanels.module.css | 2 +- 42 files changed, 628 insertions(+), 628 deletions(-) diff --git a/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/SafeZoneArea.module.css b/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/SafeZoneArea.module.css index 94b004f6f7bb80..0c9ec04e1d5c1e 100644 --- a/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/SafeZoneArea.module.css +++ b/packages/react-components/react-positioning/library/src/hooks/useSafeZoneArea/SafeZoneArea.module.css @@ -110,19 +110,19 @@ * arg #2 (g) — from useStyles.triangleDebug. Debug-only affordance. * Compiled AOT output: * .f7116n6{cursor:crosshair} - * .f1xab38x{fill:color-mix(in srgb, var(--colorPaletteGreenBackground3) 20%, transparent)} + * .f1xab38x{fill:color-mix(in srgb, var(--color-palette-green-background-3) 20%, transparent)} */ .triangle-debug { cursor: crosshair; - fill: color-mix(in srgb, var(--colorPaletteGreenBackground3) 20%, transparent); + fill: color-mix(in srgb, var(--color-palette-green-background-3) 20%, transparent); } /* * arg #1 (path) — from useStyles.rectDebug. Debug-only affordance. * Compiled AOT output: - * .fyegryc{fill:color-mix(in srgb, var(--colorPaletteRedBackground3) 20%, transparent)} + * .fyegryc{fill:color-mix(in srgb, var(--color-palette-red-background-3) 20%, transparent)} */ .rect-debug { - fill: color-mix(in srgb, var(--colorPaletteRedBackground3) 20%, transparent); + fill: color-mix(in srgb, var(--color-palette-red-background-3) 20%, transparent); } } diff --git a/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css b/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css index a4582a87256634..52cf6a4673df08 100644 --- a/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css +++ b/packages/react-components/react-positioning/stories/src/UseSafeZoneArea/UseSafeZoneAreaDefault.module.css @@ -11,9 +11,9 @@ display: grid; grid-template-columns: 1fr auto; align-items: center; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; } @@ -22,9 +22,9 @@ flex-direction: column; align-items: center; justify-content: center; - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); padding: 10px; min-height: 400px; } @@ -41,28 +41,28 @@ display: flex; align-items: center; justify-content: center; - font-size: var(--fontSizeBase400); + font-size: var(--text-base-400); width: 300px; height: 300px; - color: var(--colorPaletteBerryForeground2); - border: var(--stroke-width-thicker) solid var(--colorPaletteBerryBorderActive); - background-color: var(--colorPaletteBerryBackground2); + color: var(--color-palette-berry-foreground-2); + border: var(--stroke-width-thicker) solid var(--color-palette-berry-border-active); + background-color: var(--color-palette-berry-background-2); } .target { display: flex; align-items: center; justify-content: center; - font-size: var(--fontSizeBase400); + font-size: var(--text-base-400); width: 300px; height: 50px; - color: var(--colorPaletteBlueForeground2); - border: var(--stroke-width-thicker) solid var(--colorPaletteBlueBorderActive); - background-color: var(--colorPaletteBlueBackground2); + color: var(--color-palette-blue-foreground-2); + border: var(--stroke-width-thicker) solid var(--color-palette-blue-border-active); + background-color: var(--color-palette-blue-background-2); } .targetSmall { - font-size: var(--fontSizeBase100); + font-size: var(--text-base-100); width: 100px; } diff --git a/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.module.css b/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.module.css index 6c329f533c9f21..c2543b7431502b 100644 --- a/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.module.css +++ b/packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.module.css @@ -74,7 +74,7 @@ .root { @apply block w-full overflow-hidden; - background-color: var(--colorNeutralBackground6); + background-color: var(--color-neutral-background-6); /* Griffel bucket `m` wins over `d` — beats the background-color above. */ @variant forced-colors { @@ -84,11 +84,11 @@ /* from useRootStyles.rounded / .square — `shape` is a look prop → module class (D3) */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } .square { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } /* from useRootStyles.medium / .large — `thickness` is a scale prop → data-attribute (D3) */ @@ -118,9 +118,9 @@ background-image: linear-gradient( to right, - var(--colorNeutralBackground6) 0%, - var(--colorTransparentBackground) 50%, - var(--colorNeutralBackground6) 100% + var(--color-neutral-background-6) 0%, + var(--color-transparent-background) 50%, + var(--color-neutral-background-6) 100% ); /* Value-level RTL flip (D5): a gradient direction cannot be expressed logically. @@ -128,9 +128,9 @@ @variant rtl { background-image: linear-gradient( to left, - var(--colorNeutralBackground6) 0%, - var(--colorTransparentBackground) 50%, - var(--colorNeutralBackground6) 100% + var(--color-neutral-background-6) 0%, + var(--color-transparent-background) 50%, + var(--color-neutral-background-6) 100% ); } @@ -153,19 +153,19 @@ @layer fui.components.l1 { /* from useBarStyles.brand / .error / .warning / .success — `color` is a look prop (D3) */ .brand { - background-color: var(--colorCompoundBrandBackground); + background-color: var(--color-compound-brand-background); } .error { - background-color: var(--colorPaletteRedBackground3); + background-color: var(--color-palette-red-background-3); } .warning { - background-color: var(--colorPaletteDarkOrangeBackground3); + background-color: var(--color-palette-dark-orange-background-3); } .success { - background-color: var(--colorPaletteGreenBackground3); + background-color: var(--color-palette-green-background-3); } } diff --git a/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css b/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css index 2ae9d455784a72..3f2ff4113b9095 100644 --- a/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css +++ b/packages/react-components/react-radio/library/src/components/Radio/Radio.module.css @@ -147,7 +147,7 @@ `border-color: currentcolor` is what the `.input ~ .indicator` colour rules below replace (they outrank it on specificity inside this same layer). */ border: var(--spacing-thin) solid; - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); /* `margin: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands and then to the named spacing utilities (D4 amendment); no rtl class was compiled, so the @@ -160,7 +160,7 @@ &::after { @apply absolute h-16 w-16; - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); /* Use a transform to avoid pixel rounding errors at 125% DPI https://github.com/microsoft/fluentui/issues/30025 */ @@ -200,7 +200,7 @@ @variant enabled { @variant not-checked { & ~ .indicator { - border-color: var(--colorNeutralStrokeAccessible); + border-color: var(--color-neutral-stroke-accessible); } } } @@ -219,14 +219,14 @@ @variant not-checked { @variant hover { & ~ .indicator { - border-color: var(--colorNeutralStrokeAccessibleHover); + border-color: var(--color-neutral-stroke-accessible-hover); } } @variant hover { @variant active { & ~ .indicator { - border-color: var(--colorNeutralStrokeAccessiblePressed); + border-color: var(--color-neutral-stroke-accessible-pressed); } } } @@ -237,8 +237,8 @@ @variant enabled { @variant checked { & ~ .indicator { - border-color: var(--colorCompoundBrandStroke); - color: var(--colorCompoundBrandForeground1); + border-color: var(--color-compound-brand-stroke); + color: var(--color-compound-brand-foreground-1); } } } @@ -262,16 +262,16 @@ @variant checked { @variant hover { & ~ .indicator { - border-color: var(--colorCompoundBrandStrokeHover); - color: var(--colorCompoundBrandForeground1Hover); + border-color: var(--color-compound-brand-stroke-hover); + color: var(--color-compound-brand-foreground-1-hover); } } @variant hover { @variant active { & ~ .indicator { - border-color: var(--colorCompoundBrandStrokePressed); - color: var(--colorCompoundBrandForeground1Pressed); + border-color: var(--color-compound-brand-stroke-pressed); + color: var(--color-compound-brand-foreground-1-pressed); } } } @@ -281,8 +281,8 @@ /* Colors for the disabled state */ @variant disabled { & ~ .indicator { - border-color: var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + border-color: var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); } } @@ -397,8 +397,8 @@ /* Use a (negative) margin to account for the difference between the indicator's height and the label's line height. This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps. */ - margin-top: calc((16px * var(--base-scale) - var(--lineHeightBase300)) / 2); - margin-bottom: calc((16px * var(--base-scale) - var(--lineHeightBase300)) / 2); + margin-top: calc((16px * var(--base-scale) - var(--leading-base-300)) / 2); + margin-bottom: calc((16px * var(--base-scale) - var(--leading-base-300)) / 2); } } @@ -427,19 +427,19 @@ @variant enabled { @variant not-checked { & ~ .label { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } @variant hover { & ~ .label { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } } @variant hover { @variant active { & ~ .label { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } } @@ -447,7 +447,7 @@ @variant checked { & ~ .label { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } } @@ -456,7 +456,7 @@ & ~ .label { @apply cursor-default; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } diff --git a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css index f4087c2d184969..213204838fde0d 100644 --- a/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css +++ b/packages/react-components/react-rating/library/src/components/RatingDisplay/RatingDisplay.module.css @@ -90,21 +90,21 @@ * and becomes logical. */ .label { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); @apply ms-horizontal-xs; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } @layer fui.components.l1 { /* from useLabelStyles.strong — valueText arg #3, applied unconditionally to that slot */ .strong { - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } } @@ -113,8 +113,8 @@ /* from useLabelStyles.large — valueText arg #4 / countText arg #3 */ @variant size-large { & .label { - font-size: var(--fontSizeBase300); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + line-height: var(--leading-base-300); @apply ms-horizontal-s-nudge; } @@ -123,8 +123,8 @@ /* from useLabelStyles.extraLarge — valueText arg #5 / countText arg #4 */ @variant size-extra-large { & .label { - font-size: var(--fontSizeBase400); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + line-height: var(--leading-base-400); @apply ms-horizontal-s; } diff --git a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.module.css b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.module.css index 95563120a720ab..c7e00ac22bae6f 100644 --- a/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.module.css +++ b/packages/react-components/react-rating/library/src/components/RatingItem/RatingItem.module.css @@ -73,7 +73,7 @@ * react-rating). Same call as react-input's layered `.content > svg { font-size }`. * * ── Ordering that IS load-bearing ─────────────────────────────────────────────────── - * • `.filled` sets `color: var(--colorNeutralBackground6)` and must LOSE to + * • `.filled` sets `color: var(--color-neutral-background-6)` and must LOSE to * `.brand-filled` / `.marigold-filled` (unselectedIcon args #4/#5), so its block is * written first. * • …but `.filled`'s forced-colors declarations must WIN over those same two. Griffel @@ -81,7 +81,7 @@ * (@griffel/core/renderer/getStyleSheetForBucket) is * ['r','d','l','v','w','f','i','h','a','s','k','t','m'] — `m` sorts after `d`, so the * compiled sheet emits `@media (forced-colors: active){.f1205bnn{color:Canvas}}` AFTER - * `.f1kdv6iu{color:var(--colorBrandBackground2)}` at equal 0-1-0 specificity. CSS gives + * `.f1kdv6iu{color:var(--color-brand-background-2)}` at equal 0-1-0 specificity. CSS gives * a media block no priority of its own, so the ONLY way to reproduce that is file * position: `.filled`'s `@variant forced-colors` block is SPLIT off from its plain * declarations and re-stated after the colour blocks. Collapsing the two halves back @@ -137,7 +137,7 @@ .icon { @apply pointer-events-none absolute flex overflow-hidden; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); fill: currentColor; inset-inline-start: 0; inset-inline-end: 0; @@ -158,7 +158,7 @@ * (lib-commonjs/components/RatingItem/useRatingItemStyles.styles.js): the four * `[data-fui-focus-within]:focus-within{border-*-color:transparent}` rules, the * ::after content/position/pointer-events/z-index, `border:2px solid - * var(--colorStrokeFocus2)`, `border-radius:var(--borderRadiusMedium)`, the four + * var(--color-stroke-focus-2)`, `border-radius:var(--radius-medium)`, the four * `calc(2px * -1)` offsets (the utility's `calc(0px - 2px - 0px)` computes to the * same) and the forced-colors `Highlight` border colours all match. * @@ -246,28 +246,28 @@ * data-attributes (DECISIONS.md D3). */ .filled { - color: var(--colorNeutralBackground6); - stroke: var(--colorTransparentStroke); + color: var(--color-neutral-background-6); + stroke: var(--color-transparent-stroke); } /* from useIndicatorStyles.brand — unselectedIcon arg #4 / selectedIcon arg #3 */ .brand { - color: var(--colorBrandForeground1); + color: var(--color-brand-foreground-1); } /* from useIndicatorStyles.brandFilled — unselectedIcon arg #4, filled branch */ .brand-filled { - color: var(--colorBrandBackground2); + color: var(--color-brand-background-2); } /* from useIndicatorStyles.marigold — unselectedIcon arg #5 / selectedIcon arg #4 */ .marigold { - color: var(--colorPaletteMarigoldBorderActive); + color: var(--color-palette-marigold-border-active); } /* from useIndicatorStyles.marigoldFilled — unselectedIcon arg #5, filled branch */ .marigold-filled { - color: var(--colorPaletteMarigoldBackground2); + color: var(--color-palette-marigold-background-2); } /* diff --git a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.module.css b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.module.css index 76e431f2011f1c..127c4411fd7dd9 100644 --- a/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.module.css +++ b/packages/react-components/react-search/library/src/components/SearchBox/SearchBox.module.css @@ -119,13 +119,13 @@ @layer fui.base { /* * from useDismissClassName (makeResetStyles) — - * `.r1pvzcuu{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex; + * `.r1pvzcuu{box-sizing:border-box;color:var(--color-neutral-foreground-3);display:flex; * cursor:pointer;}` + `.r1pvzcuu>svg{font-size:20px;}` */ .dismiss { @apply box-border flex; - color: var(--colorNeutralForeground3); /* "icon color" in the design spec */ + color: var(--color-neutral-foreground-3); /* "icon color" in the design spec */ cursor: pointer; /* @@ -160,7 +160,7 @@ */ .dismiss { @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css index c2b7f67a448795..345fa1d691299b 100644 --- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css +++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxAppearance.module.css @@ -7,19 +7,19 @@ } .filledLighter { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledLighterLabel { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .filledDarker { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledDarkerLabel { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .fieldWrapper { diff --git a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css index fa77ac10ddf725..a2d486070da0ec 100644 --- a/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css +++ b/packages/react-components/react-search/stories/src/SearchBox/SearchBoxTypeahead.module.css @@ -7,10 +7,10 @@ } .listbox { - background-color: var(--colorNeutralBackground1); - border: 1px solid var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow16); + background-color: var(--color-neutral-background-1); + border: 1px solid var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-16); box-sizing: border-box; list-style-type: none; margin: 0; @@ -33,11 +33,11 @@ } .option:hover { - background-color: var(--colorNeutralBackground1Hover); + background-color: var(--color-neutral-background-1-hover); } .optionFocused { - background-color: var(--colorNeutralBackground1Selected); + background-color: var(--color-neutral-background-1-selected); outline: none; } @@ -46,10 +46,10 @@ display: flex; gap: var(--spacing-horizontal-s); padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); } .noResults { - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); padding: var(--spacing-vertical-s) var(--spacing-horizontal-m); } diff --git a/packages/react-components/react-select/library/src/components/Select/Select.module.css b/packages/react-components/react-select/library/src/components/Select/Select.module.css index 32dae96ecbdc98..09745901be7a8a 100644 --- a/packages/react-components/react-select/library/src/components/Select/Select.module.css +++ b/packages/react-components/react-select/library/src/components/Select/Select.module.css @@ -120,7 +120,7 @@ .root { @apply relative box-border flex flex-nowrap items-center; - font-family: var(--fontFamilyBase); + font-family: var(--font-base); &::after { @apply absolute box-border; @@ -129,8 +129,8 @@ background-image: linear-gradient( 0deg, - var(--colorCompoundBrandStroke) 0%, - var(--colorCompoundBrandStroke) 50%, + var(--color-compound-brand-stroke) 0%, + var(--color-compound-brand-stroke) 50%, transparent 50%, transparent 100% ); @@ -140,23 +140,23 @@ already symmetric), so the logical corners are exact. */ border-start-start-radius: 0; border-start-end-radius: 0; - border-end-end-radius: var(--borderRadiusMedium); - border-end-start-radius: var(--borderRadiusMedium); + border-end-end-radius: var(--radius-medium); + border-end-start-radius: var(--radius-medium); /* the corner radius doubles as the bar height */ - height: var(--borderRadiusMedium); + height: var(--radius-medium); bottom: 0; /* compiled: ltr `left:0`, rtl `right:0` — equal values, so `inset-inline` is exact */ inset-inline: 0; - /* Animation for focus OUT. `transition-delay: var(--curveAccelerateMid)` is a curve + /* Animation for focus OUT. `transition-delay: var(--ease-accelerate-mid)` is a curve token used as a delay — reproduced from the compiled output verbatim. */ transform: scaleX(0); transition-property: transform; - transition-duration: var(--durationUltraFast); - transition-delay: var(--curveAccelerateMid); + transition-duration: var(--duration-ultra-fast); + transition-delay: var(--ease-accelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -169,8 +169,8 @@ &::after { transform: scaleX(1); transition-property: transform; - transition-duration: var(--durationNormal); - transition-delay: var(--curveDecelerateMid); + transition-duration: var(--duration-normal); + transition-delay: var(--ease-decelerate-mid); /* Repeated rather than inherited from the block above: Griffel's `m` bucket sorts last, so BOTH reduced-motion atomics outrank the focus-in durations. In file @@ -215,9 +215,9 @@ border-bottom-color: transparent; border-left-color: transparent; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); box-shadow: none; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); /* `padding-bottom: 0` + `padding-top: 0`; the size slices own the inline axis */ padding-block: 0; @@ -263,10 +263,10 @@ /* spacingHorizontalSNudge (6px) + icon width (16px) + spacingHorizontalXXS (2px) ×2 */ padding-inline-end: calc((6px + 16px + 2px + 2px) * var(--base-scale)); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } @@ -280,10 +280,10 @@ /* spacingHorizontalMNudge (10px) + icon width (20px) + spacingHorizontalXXS (2px) ×2 */ padding-inline-end: calc((10px + 20px + 2px + 2px) * var(--base-scale)); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } @@ -297,10 +297,10 @@ /* spacingHorizontalM (12px) + icon width (24px) + spacingHorizontalSNudge (6px) ×2 */ padding-inline-end: calc((12px + 24px + 6px + 6px) * var(--base-scale)); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); } } } @@ -314,7 +314,7 @@ * here (same property key), so all twelve longhands are restated. */ .outline { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); border-top-width: 1px; border-right-width: 1px; @@ -324,10 +324,10 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-accessible); } /* @@ -335,11 +335,11 @@ * the bottom edge is redrawn — so the top/inline edges stay `1px solid transparent`. */ .underline { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-bottom-width: 1px; border-bottom-style: solid; - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-bottom-color: var(--color-neutral-stroke-accessible); /* corners look strange if rounded */ border-radius: 0; @@ -347,18 +347,18 @@ /* The transparent select background means the option background must be set so the text stays visible in dark themes. */ & option { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } } /* from useSelectStyles['filled-lighter'] */ .filled-lighter { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } /* from useSelectStyles['filled-darker'] */ .filled-darker { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } } @@ -382,10 +382,10 @@ @variant invalid { & .select:where(:not(.underline)) { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } @@ -396,7 +396,7 @@ */ & .underline { @variant not-focus-within { - border-bottom-color: var(--colorPaletteRedBorder2); + border-bottom-color: var(--color-palette-red-border-2); } } } @@ -419,26 +419,26 @@ .root { @variant disabled { & .select { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* shorthands.borderColor(x) expanded to the four longhands the compiler emits; the `[ltr, rtl]` pair only swaps left↔right and carries the same value. */ - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; } /* from useSelectStyles.disabledUnderline — the 3-argument shorthands.borderColor(top, inline, bottom) form. */ & .underline { - border-top-color: var(--colorTransparentStrokeDisabled); - border-right-color: var(--colorTransparentStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorTransparentStrokeDisabled); + border-top-color: var(--color-transparent-stroke-disabled); + border-right-color: var(--color-transparent-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-transparent-stroke-disabled); } } } @@ -454,17 +454,17 @@ @variant enabled { & .outline { @variant hover { - border-top-color: var(--colorNeutralStroke1Hover); - border-right-color: var(--colorNeutralStroke1Hover); - border-left-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-top-color: var(--color-neutral-stroke-1-hover); + border-right-color: var(--color-neutral-stroke-1-hover); + border-left-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-accessible); } @variant active { - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-accessible); } } } @@ -487,10 +487,10 @@ & .select:where(:not(.underline)) { @variant hover { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -525,7 +525,7 @@ .icon { @apply pointer-events-none absolute box-border block; - color: var(--colorNeutralStrokeAccessible); + color: var(--color-neutral-stroke-accessible); /* the SVG must have display: block for accurate positioning, otherwise an extra inline space is inserted after the svg element */ @@ -538,7 +538,7 @@ /* from useIconStyles.disabled — arg #3 */ @variant disabled { & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); @variant forced-colors { color: GrayText; diff --git a/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css b/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css index 5c4647630dc001..943650539986ff 100644 --- a/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css +++ b/packages/react-components/react-select/stories/src/Select/SelectAppearance.module.css @@ -15,17 +15,17 @@ } .filledLighter { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledLighter > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .filledDarker { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledDarker > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } diff --git a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.module.css b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.module.css index 2165d371b45c1a..d39ddceb1890f8 100644 --- a/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.module.css +++ b/packages/react-components/react-skeleton/library/src/components/SkeletonItem/SkeletonItem.module.css @@ -150,15 +150,15 @@ * on-screen rather than off it if only the keyframes were flipped. */ .wave { - background-color: var(--colorNeutralStencil1); + background-color: var(--color-neutral-stencil-1); &::after { animation-name: skeleton-wave; background-image: linear-gradient( to right, - var(--colorNeutralStencil1) 0%, - var(--colorNeutralStencil2) 50%, - var(--colorNeutralStencil1) 100% + var(--color-neutral-stencil-1) 0%, + var(--color-neutral-stencil-2) 50%, + var(--color-neutral-stencil-1) 100% ); transform: translate(-100%); } @@ -170,9 +170,9 @@ animation-name: skeleton-wave-rtl; background-image: linear-gradient( to left, - var(--colorNeutralStencil1) 0%, - var(--colorNeutralStencil2) 50%, - var(--colorNeutralStencil1) 100% + var(--color-neutral-stencil-1) 0%, + var(--color-neutral-stencil-2) 50%, + var(--color-neutral-stencil-1) 100% ); transform: translate(100%); } @@ -188,7 +188,7 @@ &::after { animation-name: skeleton-pulse; animation-duration: 1s; - background-color: var(--colorNeutralStencil1); + background-color: var(--color-neutral-stencil-1); } } @@ -198,13 +198,13 @@ * class for that property and the later block here reproduces the same winner. */ .translucent { - background-color: var(--colorNeutralStencil1Alpha); + background-color: var(--color-neutral-stencil-1-alpha); &::after { background-image: linear-gradient( to right, transparent 0%, - var(--colorNeutralStencil1Alpha) 50%, + var(--color-neutral-stencil-1-alpha) 50%, transparent 100% ); } @@ -214,7 +214,7 @@ background-image: linear-gradient( to left, transparent 0%, - var(--colorNeutralStencil1Alpha) 50%, + var(--color-neutral-stencil-1-alpha) 50%, transparent 100% ); } @@ -241,7 +241,7 @@ background-color: transparent; &::after { - background-color: var(--colorNeutralStencil1Alpha); + background-color: var(--color-neutral-stencil-1-alpha); } } } diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.module.css index 7736be4e4399b9..d804971500f723 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .invertedWrapper { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); padding-top: 50px; padding-bottom: 50px; } diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.module.css index c709626cb4d2a1..9eba66636f2739 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .invertedWrapper { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); padding-top: 50px; padding-bottom: 50px; } diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css index 6830b85b0ebb2d..853347a0165363 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .invertedWrapper { - background: var(--colorNeutralBackground1); + background: var(--color-neutral-background-1); display: flex; padding: var(--spacing-horizontal-xl); } diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css index b8e6b174eab1a3..69cb916eadf3cd 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.module.css @@ -3,7 +3,7 @@ .wrapper { display: flex; - background: var(--colorNeutralBackground1); + background: var(--color-neutral-background-1); flex-direction: column; padding: var(--spacing-horizontal-xl); gap: var(--spacing-vertical-l); diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.module.css b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.module.css index 2d0e4f9e88d9e2..c73636909a8d40 100644 --- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.module.css +++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .invertedWrapper { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .firstRow { diff --git a/packages/react-components/react-slider/library/src/components/Slider/Slider.module.css b/packages/react-components/react-slider/library/src/components/Slider/Slider.module.css index 50549c3ba6fac4..292c69c1254782 100644 --- a/packages/react-components/react-slider/library/src/components/Slider/Slider.module.css +++ b/packages/react-components/react-slider/library/src/components/Slider/Slider.module.css @@ -98,8 +98,8 @@ * wins and a vertical Slider is 120px tall. Both compile to `.root:where([data-…])`, * i.e. equal specificity, so the winner is now file position: the orientation block is * written AFTER the size block and must stay there. - * • `.thumb`'s `::before` border colour: base (arg #2) → `--colorNeutralStroke1`, - * disabled (arg #4) → `--colorNeutralForegroundDisabled`. The disabled rule is reached + * • `.thumb`'s `::before` border colour: base (arg #2) → `--color-neutral-stroke-1`, + * disabled (arg #4) → `--color-neutral-foreground-disabled`. The disabled rule is reached * through the root (`.root:where([data-disabled]) .thumb::before`, 0-2-0) so it beats * the 0-1-0 base rule on specificity, not only on order. * • Inside the root's `enabled` block the order is base vars → `:hover` → `:active`. @@ -259,25 +259,25 @@ * declared on the root so ordinary custom-property inheritance carries them down. */ @variant enabled { - --fui-Slider__rail--color: var(--colorNeutralStrokeAccessible); - --fui-Slider__progress--color: var(--colorCompoundBrandBackground); - --fui-Slider__thumb--color: var(--colorCompoundBrandBackground); + --fui-Slider__rail--color: var(--color-neutral-stroke-accessible); + --fui-Slider__progress--color: var(--color-compound-brand-background); + --fui-Slider__thumb--color: var(--color-compound-brand-background); @variant hover { - --fui-Slider__thumb--color: var(--colorCompoundBrandBackgroundHover); - --fui-Slider__progress--color: var(--colorCompoundBrandBackgroundHover); + --fui-Slider__thumb--color: var(--color-compound-brand-background-hover); + --fui-Slider__progress--color: var(--color-compound-brand-background-hover); } @variant active { - --fui-Slider__thumb--color: var(--colorCompoundBrandBackgroundPressed); - --fui-Slider__progress--color: var(--colorCompoundBrandBackgroundPressed); + --fui-Slider__thumb--color: var(--color-compound-brand-background-pressed); + --fui-Slider__progress--color: var(--color-compound-brand-background-pressed); } } @variant disabled { - --fui-Slider__thumb--color: var(--colorNeutralForegroundDisabled); - --fui-Slider__rail--color: var(--colorNeutralBackgroundDisabled); - --fui-Slider__progress--color: var(--colorNeutralForegroundDisabled); + --fui-Slider__thumb--color: var(--color-neutral-foreground-disabled); + --fui-Slider__rail--color: var(--color-neutral-background-disabled); + --fui-Slider__progress--color: var(--color-neutral-foreground-disabled); } /* @@ -312,7 +312,7 @@ .rail { @apply pointer-events-none relative; - border-radius: var(--borderRadiusXLarge); + border-radius: var(--radius-x-large); /* grid line NUMBERS, not design values — written literally, as in every other converted module (react-card, react-dialog). */ @@ -335,7 +335,7 @@ outline-width: calc(1px * var(--base-scale)); outline-style: solid; - outline-color: var(--colorTransparentStroke); + outline-color: var(--color-transparent-stroke); &::before { @apply absolute; @@ -349,8 +349,8 @@ var(--fui-Slider--direction), #0000 0%, #0000 calc(var(--fui-Slider--steps-percent) - 1px * var(--base-scale)), - var(--colorNeutralBackground1) calc(var(--fui-Slider--steps-percent) - 1px * var(--base-scale)), - var(--colorNeutralBackground1) var(--fui-Slider--steps-percent) + var(--color-neutral-background-1) calc(var(--fui-Slider--steps-percent) - 1px * var(--base-scale)), + var(--color-neutral-background-1) var(--fui-Slider--steps-percent) ); /* force steps to use HighlightText for high contrast mode */ @@ -431,8 +431,8 @@ outline-style: none; forced-color-adjust: none; - border-radius: var(--borderRadiusCircular); - box-shadow: 0 0 0 calc(var(--fui-Slider__thumb--size) * 0.2) var(--colorNeutralBackground1) inset; + border-radius: var(--radius-circular); + box-shadow: 0 0 0 calc(var(--fui-Slider__thumb--size) * 0.2) var(--color-neutral-background-1) inset; background-color: var(--fui-Slider__thumb--color); &::before { @@ -446,13 +446,13 @@ inset-inline-start: 0px; inset-inline-end: 0px; - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); /* Kept as the `border` shorthand because that is what Griffel compiled - (`.f1fsco4d::before{border:calc(…) solid var(--colorNeutralStroke1)}`) and because + (`.f1fsco4d::before{border:calc(…) solid var(--color-neutral-stroke-1)}`) and because the only other rule that touches this pseudo-element's border — the disabled one below — is the same shorthand, so no shorthand/longhand priority can go wrong. */ - border: calc(var(--fui-Slider__thumb--size) * 0.05) solid var(--colorNeutralStroke1); + border: calc(var(--fui-Slider__thumb--size) * 0.05) solid var(--color-neutral-stroke-1); } } @@ -488,7 +488,7 @@ /* from useThumbStyles.disabled — thumb arg #4 */ @variant disabled { & .thumb::before { - border: calc(var(--fui-Slider__thumb--size) * 0.05) solid var(--colorNeutralForegroundDisabled); + border: calc(var(--fui-Slider__thumb--size) * 0.05) solid var(--color-neutral-foreground-disabled); } } } diff --git a/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.module.css b/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.module.css index f0df13d8e989b5..dd2765e256e98b 100644 --- a/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.module.css +++ b/packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.module.css @@ -149,13 +149,13 @@ horizontal axis for the column gap, so the utility does too. */ @apply gap-x-horizontal-xs gap-y-vertical-none; - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); /* `padding: 0 0 0 tokens.spacingHorizontalMNudge` expanded to longhands. The compiled pair is `padding-left` (ltr) / `padding-right` (rtl) — a pure property flip. */ @apply py-vertical-none ps-horizontal-m-nudge pe-horizontal-none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* * Border styles live on the ::before pseudo-element rather than the root. @@ -180,12 +180,12 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-accessible); - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } /* @@ -194,10 +194,10 @@ * * The three `2px` literals below are ONE measurement expressed three ways and must * stay in lockstep: the `max()` floor keeps the underline visible even if a theme sets - * `--borderRadiusMedium` to 0; `border-bottom-width` draws it; `clip-path` trims the + * `--radius-medium` to 0; `border-bottom-width` draws it; `clip-path` trims the * "horns" `border-bottom` would otherwise leave on the ends. They stay unscaled * literals (no `--base-scale`) precisely because they must agree with each other and - * with `--borderRadiusMedium`, which is an unscaled token. + * with `--radius-medium`, which is an unscaled token. */ &::after { @apply absolute box-border; @@ -212,24 +212,24 @@ /* Use the whole border-radius as the height and only put radii on the bottom corners, otherwise the radius is auto-reduced to fit the available space. */ - height: max(2px, var(--borderRadiusMedium)); - border-end-start-radius: var(--borderRadiusMedium); - border-end-end-radius: var(--borderRadiusMedium); + height: max(2px, var(--radius-medium)); + border-end-start-radius: var(--radius-medium); + border-end-end-radius: var(--radius-medium); /* longhands: `:focus-within:active` below overrides the colour alone */ border-bottom-width: 2px; border-bottom-style: solid; - border-bottom-color: var(--colorCompoundBrandStroke); + border-bottom-color: var(--color-compound-brand-stroke); clip-path: inset(calc(100% - 2px) 0 0 0); /* Animation for focus OUT */ transform: scaleX(0); transition-property: transform; - transition-duration: var(--durationUltraFast); + transition-duration: var(--duration-ultra-fast); /* Curve token used as a delay — reproduced from the compiled output verbatim. */ - transition-delay: var(--curveAccelerateMid); + transition-delay: var(--ease-accelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -242,8 +242,8 @@ &::after { transform: scaleX(1); transition-property: transform; - transition-duration: var(--durationNormal); - transition-delay: var(--curveDecelerateMid); + transition-duration: var(--duration-normal); + transition-delay: var(--ease-decelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -254,7 +254,7 @@ /* clicking the field again while it is already focused */ @variant active { &::after { - border-bottom-color: var(--colorCompoundBrandStrokePressed); + border-bottom-color: var(--color-compound-brand-stroke-pressed); } } @@ -284,7 +284,7 @@ @apply px-horizontal-none py-vertical-none; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); /* literal `transparent` (not a theme token) so the colour from the root always shows through */ @@ -303,7 +303,7 @@ * invalidate the whole rule if they were merged into one selector list. */ &::placeholder { - color: var(--colorNeutralForeground4); + color: var(--color-neutral-foreground-4); opacity: 1; /* browser style override */ } } @@ -328,7 +328,7 @@ /* literal `transparent` (not a theme token) so the colour from the root shows through */ background-color: transparent; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); /* common button layout */ grid-column-start: 2; @@ -346,13 +346,13 @@ @variant hover { @apply cursor-pointer; - color: var(--colorNeutralForeground3Hover); - background-color: var(--colorSubtleBackgroundHover); + color: var(--color-neutral-foreground-3-hover); + background-color: var(--color-subtle-background-hover); } @variant active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-subtle-background-pressed); } /* @@ -371,14 +371,14 @@ * `@variant enabled`. */ @variant spin-active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-subtle-background-pressed); } } @variant disabled { cursor: not-allowed; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -393,10 +393,10 @@ @variant size-small { @apply min-h-24; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); /* `paddingLeft: tokens.spacingHorizontalS` — an [ltr, rtl] property flip */ @apply ps-horizontal-s; @@ -422,24 +422,24 @@ border-left-width: 0; /* corners look strange if rounded */ - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } } /* from useRootStyles['filled-darker'] */ .filled-darker { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } /* from useRootStyles['filled-lighter'] */ .filled-lighter { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } /* * from useRootStyles.filled — root arg #5, applied for every `filled-*` appearance. * The compiled atomic is the `border` SHORTHAND (`.f1kc0wz4::before{border:1px solid - * var(--colorTransparentStroke)}`, priority `p: -2`), i.e. first inside bucket `d`. + * var(--color-transparent-stroke)}`, priority `p: -2`), i.e. first inside bucket `d`. * Only the four colours are reproduced: the width/style half of the shorthand restates * what the reset already sets, and `filled` never co-occurs with `underline` (the one * slice that changes those widths). Its block sits BEFORE `invalid`/`disabled` so those @@ -447,10 +447,10 @@ */ .filled { &::before { - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } } @@ -468,10 +468,10 @@ @variant invalid { @variant not-focus-within { &::before { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -480,13 +480,13 @@ /* from useRootStyles.disabled — root arg #10, the last style argument. */ @variant disabled { cursor: not-allowed; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); &::before { - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); } @variant forced-colors { @@ -519,19 +519,19 @@ @variant enabled { @variant hover { &::before { - border-top-color: var(--colorNeutralStroke1Hover); - border-right-color: var(--colorNeutralStroke1Hover); - border-left-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStrokeAccessibleHover); + border-top-color: var(--color-neutral-stroke-1-hover); + border-right-color: var(--color-neutral-stroke-1-hover); + border-left-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-accessible-hover); } } @variant active-or-focus-within { &::before { - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } } } @@ -542,13 +542,13 @@ @variant enabled { @variant hover { &::before { - border-bottom-color: var(--colorNeutralStrokeAccessibleHover); + border-bottom-color: var(--color-neutral-stroke-accessible-hover); } } @variant active-or-focus-within { &::before { - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } } @@ -556,7 +556,7 @@ bucket `d`, but only the reset (fui.base) sets those corners, so its position among the interactive rules is inert. */ &::after { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } } } @@ -568,10 +568,10 @@ here, since the field always contains a focusable input) */ @variant hover-or-focus-within { &::before { - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } } } @@ -592,10 +592,10 @@ @variant hover { @variant not-focus-within { &::before { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -618,12 +618,12 @@ .root { @variant disabled { & .input { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); &::placeholder { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -646,7 +646,7 @@ grid-row-start: 1; /* compiled pair: `border-top-right-radius` (ltr) / `border-top-left-radius` (rtl) */ - border-start-end-radius: var(--borderRadiusMedium); + border-start-end-radius: var(--radius-medium); /* 4px = the XS step; 1px matches no step, so the numeric fallback */ @apply pt-vertical-xs pb-1; @@ -657,7 +657,7 @@ grid-row-start: 2; /* compiled pair: `border-bottom-right-radius` (ltr) / `border-bottom-left-radius` (rtl) */ - border-end-end-radius: var(--borderRadiusMedium); + border-end-end-radius: var(--radius-medium); @apply pt-1 pb-vertical-xs; } @@ -671,27 +671,27 @@ .underline { & .button { background-color: transparent; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); @variant enabled { @variant hover { - color: var(--colorNeutralForeground3Hover); - background-color: var(--colorSubtleBackgroundHover); + color: var(--color-neutral-foreground-3-hover); + background-color: var(--color-subtle-background-hover); } @variant active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-subtle-background-pressed); } @variant spin-active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-subtle-background-pressed); } } @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -700,27 +700,27 @@ .filled-darker { & .button { background-color: transparent; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); @variant enabled { @variant hover { - color: var(--colorNeutralForeground3Hover); - background-color: var(--colorNeutralBackground3Hover); + color: var(--color-neutral-foreground-3-hover); + background-color: var(--color-neutral-background-3-hover); } @variant active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorNeutralBackground3Pressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-neutral-background-3-pressed); } @variant spin-active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorNeutralBackground3Pressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-neutral-background-3-pressed); } } @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } @@ -736,27 +736,27 @@ .filled-lighter { & .button { background-color: transparent; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); @variant enabled { @variant hover { - color: var(--colorNeutralForeground3Hover); - background-color: var(--colorNeutralBackground1Hover); + color: var(--color-neutral-foreground-3-hover); + background-color: var(--color-neutral-background-1-hover); } @variant active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorNeutralBackground1Pressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-neutral-background-1-pressed); } @variant spin-active { - color: var(--colorNeutralForeground3Pressed); - background-color: var(--colorNeutralBackground1Pressed); + color: var(--color-neutral-foreground-3-pressed); + background-color: var(--color-neutral-background-1-pressed); } } @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } diff --git a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css index 8d439c2437f0e9..0cc892eacbd46b 100644 --- a/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css +++ b/packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonAppearance.module.css @@ -15,17 +15,17 @@ } .filledLighter { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledLighter > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .filledDarker { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .filledDarker > label { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } diff --git a/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.module.css b/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.module.css index d9177e54c549d4..bb2671fcb56a6a 100644 --- a/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.module.css +++ b/packages/react-components/react-spinner/library/src/components/Spinner/Spinner.module.css @@ -240,8 +240,8 @@ transparent 100% ); - background-color: var(--colorBrandStroke2Contrast); - color: var(--colorBrandStroke1); + background-color: var(--color-brand-stroke-2-contrast); + color: var(--color-brand-stroke-1); animation-duration: 1.5s; animation-iteration-count: infinite; @@ -285,7 +285,7 @@ animation-duration: 1.5s; animation-iteration-count: infinite; - animation-timing-function: var(--curveEasyEase); + animation-timing-function: var(--ease-easy-ease); animation-name: spinner-tail-spin; &::before, @@ -437,8 +437,8 @@ * deliberately no `.spinner-primary` / `.label-primary` rule. */ .spinner-inverted { - background-color: var(--colorNeutralStrokeAlpha2); - color: var(--colorNeutralStrokeOnBrand2); + background-color: var(--color-neutral-stroke-alpha-2); + color: var(--color-neutral-stroke-on-brand-2); } } @@ -478,80 +478,80 @@ /* from useLabelStyles['extra-tiny'] — typographyStyles.body1 */ @variant size-extra-tiny { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } /* from useLabelStyles.tiny — typographyStyles.body1 */ @variant size-tiny { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } /* from useLabelStyles['extra-small'] — typographyStyles.body1 */ @variant size-extra-small { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } /* from useLabelStyles.small — typographyStyles.body1 */ @variant size-small { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } } /* from useLabelStyles.medium — typographyStyles.subtitle2 */ @variant size-medium { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } /* from useLabelStyles.large — typographyStyles.subtitle2 */ @variant size-large { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } /* from useLabelStyles['extra-large'] — typographyStyles.subtitle2 */ @variant size-extra-large { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } /* from useLabelStyles.huge — typographyStyles.subtitle1 */ @variant size-huge { & .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase500); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase500); + font-family: var(--font-base); + font-size: var(--text-base-500); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-500); } } } @@ -560,6 +560,6 @@ @layer fui.components.l2 { /* from useLabelStyles.inverted — arg #3 on the label slot */ .label-inverted { - color: var(--colorNeutralForegroundStaticInverted); + color: var(--color-neutral-foreground-static-inverted); } } diff --git a/packages/react-components/react-spinner/stories/src/Spinner/SpinnerAppearance.module.css b/packages/react-components/react-spinner/stories/src/Spinner/SpinnerAppearance.module.css index 9cacb15c61479f..8a8bb9a486b902 100644 --- a/packages/react-components/react-spinner/stories/src/Spinner/SpinnerAppearance.module.css +++ b/packages/react-components/react-spinner/stories/src/Spinner/SpinnerAppearance.module.css @@ -6,5 +6,5 @@ } .invertedWrapper { - background-color: var(--colorBrandBackgroundStatic); + background-color: var(--color-brand-background-static); } diff --git a/packages/react-components/react-storybook-addon/src/docs-chrome.css b/packages/react-components/react-storybook-addon/src/docs-chrome.css index 9cbc9f8ac30893..959fd70b02bfa6 100644 --- a/packages/react-components/react-storybook-addon/src/docs-chrome.css +++ b/packages/react-components/react-storybook-addon/src/docs-chrome.css @@ -178,11 +178,11 @@ #storybook-docs .sbdocs-preview { border-radius: 16px; - background: var(--colorBrandBackgroundInverted, #fff); + background: var(--color-brand-background-inverted, #fff); /* This makes Canvas Toolbar un-usable, we are already forcing padding via '#storybook-docs .innerZoomElementWrapper' */ /* padding: 0; */ box-shadow: none; - border: 1px solid var(--colorNeutralStroke1, #e1dfdd); + border: 1px solid var(--color-neutral-stroke-1, #e1dfdd); } #storybook-docs .sbdocs .docs-story div[scale] { diff --git a/packages/react-components/react-storybook-addon/src/docs/DirSwitch.module.css b/packages/react-components/react-storybook-addon/src/docs/DirSwitch.module.css index f9eac0ad95f9fa..838e74c2edd2c1 100644 --- a/packages/react-components/react-storybook-addon/src/docs/DirSwitch.module.css +++ b/packages/react-components/react-storybook-addon/src/docs/DirSwitch.module.css @@ -18,10 +18,10 @@ * declarations exactly as react-text's presets.module.css does for the same preset. */ .label { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } } diff --git a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.module.css b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.module.css index cedd887e1a0e4b..5f1dd5469f1b47 100644 --- a/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.module.css +++ b/packages/react-components/react-storybook-addon/src/docs/FluentDocsPage.module.css @@ -35,11 +35,11 @@ .video-preview { @apply flex flex-col gap-horizontal-m px-horizontal-m py-vertical-m; - border-radius: var(--borderRadiusSmall); - background-color: var(--colorNeutralBackground2); + border-radius: var(--radius-small); + background-color: var(--color-neutral-background-2); &:hover { - background-color: var(--colorNeutralBackground2Hover); + background-color: var(--color-neutral-background-2-hover); } } } @@ -104,8 +104,8 @@ border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStroke1); - border-radius: var(--borderRadiusMedium); + border-color: var(--color-neutral-stroke-1); + border-radius: var(--radius-medium); } /* from useStyles.additionalInfoMessage */ @@ -136,6 +136,6 @@ .additional-info-icon { @apply me-horizontal-m self-center; - color: var(--colorBrandForeground1); + color: var(--color-brand-foreground-1); font-size: 24px; } diff --git a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.module.css b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.module.css index f1032ea7e98773..dfb450fa41ceb8 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.module.css +++ b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.module.css @@ -114,8 +114,8 @@ border: none; box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorBrandStroke1), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-brand-stroke-1), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); /* `:hover:active` — NOT the shared `hover-active` variant, which is Griffel's authored `:hover:active, :active:focus-visible` compound (Button family). This @@ -124,8 +124,8 @@ @variant active { border: none; box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 var(--spacing-thickest) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 var(--spacing-thickest) var(--color-stroke-focus-1); } } @@ -146,8 +146,8 @@ border: none; outline: none; box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorStrokeFocus2), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-stroke-focus-2), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); } } } @@ -160,14 +160,14 @@ @variant hover { box-shadow: - inset 0 0 0 var(--spacing-thin) var(--colorBrandStroke1), - inset 0 0 0 var(--spacing-thick) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thin) var(--color-brand-stroke-1), + inset 0 0 0 var(--spacing-thick) var(--color-stroke-focus-1); @variant active { border: none; box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); } } } @@ -179,8 +179,8 @@ @variant active { border: none; box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); } } } @@ -204,28 +204,28 @@ /* from useShapeStyles.rounded */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); @variant focus-visible-fui { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } } /* from useShapeStyles.circular */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); @variant focus-visible-fui { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } } /* from useShapeStyles.square */ .square { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); @variant focus-visible-fui { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } } } @@ -241,50 +241,50 @@ .selected { border: none; box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorBrandStroke1), - inset 0 0 0 calc(5px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-brand-stroke-1), + inset 0 0 0 calc(5px * var(--base-scale)) var(--color-stroke-focus-1); /* arg #6 rest — same 0-1-0 as the rule above, later argument, so it wins */ @variant size-small-or-below { box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorBrandStroke1), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-brand-stroke-1), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); } /* `m` bucket, 0-1-0 — beats both rest rules in forced colors, but still loses to the 0-2-0 focus/hover rules below, exactly as Griffel had it. */ @variant forced-colors { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorBrandStroke2Pressed), - inset 0 0 0 calc(5px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-brand-stroke-2-pressed), + inset 0 0 0 calc(5px * var(--base-scale)) var(--color-stroke-focus-1); } @variant focus-visible-fui { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus2), - inset 0 0 0 calc(5px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-2), + inset 0 0 0 calc(5px * var(--base-scale)) var(--color-stroke-focus-1); } @variant hover { box-shadow: - inset 0 0 0 var(--spacing-thickest) var(--colorCompoundBrandStrokeHover), - inset 0 0 0 calc(6px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thickest) var(--color-compound-brand-stroke-hover), + inset 0 0 0 calc(6px * var(--base-scale)) var(--color-stroke-focus-1); @variant size-small-or-below { box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorCompoundBrandStrokeHover), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-compound-brand-stroke-hover), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); } @variant active { box-shadow: - inset 0 0 0 var(--spacing-thickest) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 calc(7px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thickest) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 calc(7px * var(--base-scale)) var(--color-stroke-focus-1); @variant size-small-or-below { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 var(--spacing-thickest) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 var(--spacing-thickest) var(--color-stroke-focus-1); } } } @@ -312,13 +312,13 @@ @variant hover { box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorBrandStroke2Hover), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-brand-stroke-2-hover), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); @variant active { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorBrandStroke2Pressed), - inset 0 0 0 var(--spacing-thickest) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-brand-stroke-2-pressed), + inset 0 0 0 var(--spacing-thickest) var(--color-stroke-focus-1); } } } @@ -395,7 +395,7 @@ /* from useIconStyles.disabledIcon */ .disabled-icon { - color: var(--colorNeutralForegroundInverted); + color: var(--color-neutral-foreground-inverted); /* Literals kept verbatim: `filter: drop-shadow(...)` has no spacing-powered utility and the PopoverSurface / Tooltip conversions keep their drop-shadow px as authored. */ diff --git a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx index 401fd82d7084fe..8dda23ffdea216 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/ColorSwatch/ColorSwatch.test.tsx @@ -32,7 +32,7 @@ describe('ColorSwatch', () => { class="group/fui-color-swatch" data-size="medium" role="radio" - style="--fui-SwatchPicker--color: #f09; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #f09; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
diff --git a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.module.css b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.module.css index 3e4446577a4c99..46ed3ce3f58c18 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.module.css +++ b/packages/react-components/react-swatch-picker/library/src/components/EmptySwatch/EmptySwatch.module.css @@ -49,12 +49,12 @@ @layer fui.base { /* from useStyles (makeResetStyles) */ .root { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* Kept as the `border` shorthand the source wrote — it is this module's ONLY border-width/style declaration and no other slice competes for a border longhand (CONVERSION_GUIDE §2 expands shorthands only where a longhand competes). */ - border: var(--spacing-thin) dashed var(--colorNeutralForeground4); + border: var(--spacing-thin) dashed var(--color-neutral-foreground-4); } } @@ -90,28 +90,28 @@ /* from useShapeStyles.rounded */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); @variant focus-visible-fui { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } } /* from useShapeStyles.circular */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); @variant focus-visible-fui { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } } /* from useShapeStyles.square */ .square { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); @variant focus-visible-fui { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } } } diff --git a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.module.css b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.module.css index 62a782831c665f..9273efc1ca5308 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.module.css +++ b/packages/react-components/react-swatch-picker/library/src/components/ImageSwatch/ImageSwatch.module.css @@ -76,15 +76,15 @@ /* Kept as the `border` shorthand the source wrote; every other border declaration in this component is also a shorthand (`border: none`), so no longhand competes. */ - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); @variant hover { @apply cursor-pointer; border: none; box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorBrandStroke1), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-brand-stroke-1), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); /* `:hover:active` — NOT the shared `hover-active` variant, which is Griffel's authored `:hover:active, :active:focus-visible` compound (Button family). This @@ -93,8 +93,8 @@ @variant active { border: none; box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 var(--spacing-thickest) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 var(--spacing-thickest) var(--color-stroke-focus-1); } } @@ -115,8 +115,8 @@ border: none; outline: none; box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorStrokeFocus2), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-stroke-focus-2), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); } } } @@ -151,28 +151,28 @@ /* from useShapeStyles.rounded */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); @variant focus-visible-fui { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } } /* from useShapeStyles.circular */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); @variant focus-visible-fui { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } } /* from useShapeStyles.square */ .square { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); @variant focus-visible-fui { - border-radius: var(--borderRadiusNone); + border-radius: var(--radius-none); } } } @@ -182,32 +182,32 @@ .selected { border: none; box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorBrandStroke1), - inset 0 0 0 calc(5px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-brand-stroke-1), + inset 0 0 0 calc(5px * var(--base-scale)) var(--color-stroke-focus-1); /* `m` bucket, same 0-1-0 as the rest rule above — so it wins at rest in forced colors, but still loses to the 0-2-0 focus/hover rules below exactly as Griffel had it. */ @variant forced-colors { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorBrandStroke2Pressed), - inset 0 0 0 calc(5px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-brand-stroke-2-pressed), + inset 0 0 0 calc(5px * var(--base-scale)) var(--color-stroke-focus-1); } @variant focus-visible-fui { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus2), - inset 0 0 0 calc(5px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-2), + inset 0 0 0 calc(5px * var(--base-scale)) var(--color-stroke-focus-1); } @variant hover { box-shadow: - inset 0 0 0 var(--spacing-thickest) var(--colorCompoundBrandStrokeHover), - inset 0 0 0 calc(6px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thickest) var(--color-compound-brand-stroke-hover), + inset 0 0 0 calc(6px * var(--base-scale)) var(--color-stroke-focus-1); @variant active { box-shadow: - inset 0 0 0 var(--spacing-thickest) var(--colorCompoundBrandStrokePressed), - inset 0 0 0 calc(7px * var(--base-scale)) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thickest) var(--color-compound-brand-stroke-pressed), + inset 0 0 0 calc(7px * var(--base-scale)) var(--color-stroke-focus-1); } } } @@ -234,13 +234,13 @@ @variant hover { box-shadow: - inset 0 0 0 var(--spacing-thick) var(--colorBrandStroke2Hover), - inset 0 0 0 var(--spacing-thicker) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thick) var(--color-brand-stroke-2-hover), + inset 0 0 0 var(--spacing-thicker) var(--color-stroke-focus-1); @variant active { box-shadow: - inset 0 0 0 var(--spacing-thicker) var(--colorBrandStroke2Pressed), - inset 0 0 0 var(--spacing-thickest) var(--colorStrokeFocus1); + inset 0 0 0 var(--spacing-thicker) var(--color-brand-stroke-2-pressed), + inset 0 0 0 var(--spacing-thickest) var(--color-stroke-focus-1); } } } diff --git a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx index 4075c621444c59..060942aef86795 100644 --- a/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx +++ b/packages/react-components/react-swatch-picker/library/src/components/SwatchPicker/SwatchPicker.test.tsx @@ -41,7 +41,7 @@ describe('SwatchPicker', () => { class="group/fui-color-swatch" data-size="medium" role="radio" - style="--fui-SwatchPicker--color: #f09; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #f09; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
@@ -50,7 +50,7 @@ exports[`Render utils of SwatchPicker renders custom row 1`] = ` class="group/fui-color-swatch" data-size="medium" role="gridcell" - style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
@@ -123,7 +123,7 @@ exports[`Render utils of SwatchPicker renders custom swatch 1`] = ` class="group/fui-color-swatch custom-swatch" data-size="medium" role="gridcell" - style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
@@ -155,7 +155,7 @@ exports[`Render utils of SwatchPicker renders custom swatch 1`] = ` class="group/fui-color-swatch custom-swatch" data-size="medium" role="gridcell" - style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
@@ -199,7 +199,7 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = ` class="group/fui-color-swatch" data-size="medium" role="gridcell" - style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #FF1921; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
@@ -231,7 +231,7 @@ exports[`Render utils of SwatchPicker renders default grid layout 1`] = ` class="group/fui-color-swatch" data-size="medium" role="gridcell" - style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--colorTransparentStroke);" + style="--fui-SwatchPicker--color: #00B053; --fui-SwatchPicker--borderColor: var(--color-transparent-stroke);" type="button" />
diff --git a/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css b/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css index 0e1271b3c6a294..ef301b1012ddbb 100644 --- a/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css +++ b/packages/react-components/react-switch/library/src/components/Switch/Switch.module.css @@ -52,7 +52,7 @@ * between Switch and Label would be decided by stylesheet load order. * * This is load-bearing, not bookkeeping: Label's `size` slot default is `medium`, so its - * own rules set `font-size: var(--fontSizeBase300)` / `line-height: var(--lineHeightBase300)`, + * own rules set `font-size: var(--text-base-300)` / `line-height: var(--leading-base-300)`, * while `labelStyles.sizeSmall` must win with the Base200 pair on ``. * mergeClasses produced that winner because Switch's classes were its LAST arguments * (`useLabelStyles_unstable` merges the incoming className last, i.e. after its own); l2 @@ -142,7 +142,7 @@ .indicator { @apply pointer-events-none box-border h-20 w-40 shrink-0; - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); /* `border: 1px solid` — kept as the compiled shorthand; its implied `border-color: currentcolor` is what the `.input ~ .indicator` colour rules below replace (they outrank it on specificity inside this same layer). */ @@ -157,8 +157,8 @@ inline sides stay physical. */ @apply mt-vertical-s mr-horizontal-s mb-vertical-s ml-horizontal-s; - transition-duration: var(--durationNormal); - transition-timing-function: var(--curveEasyEase); + transition-duration: var(--duration-normal); + transition-timing-function: var(--ease-easy-ease); /* * Longhands only. `background, border, color` is not 3 properties: per CSS Transitions * L1 a shorthand in `transition-property` expands to every longhand it covers, so that @@ -190,8 +190,8 @@ /* the thumb — `> *` in the Griffel source, the `` in practice */ & > * { - transition-duration: var(--durationNormal); - transition-timing-function: var(--curveEasyEase); + transition-duration: var(--duration-normal); + transition-timing-function: var(--ease-easy-ease); transition-property: transform; @media screen and (prefers-reduced-motion: reduce) { @@ -241,7 +241,7 @@ @apply cursor-default; & ~ .indicator { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @@ -249,22 +249,22 @@ @variant enabled-control { @variant not-checked { & ~ .indicator { - color: var(--colorNeutralStrokeAccessible); - border-color: var(--colorNeutralStrokeAccessible); + color: var(--color-neutral-stroke-accessible); + border-color: var(--color-neutral-stroke-accessible); } @variant hover { & ~ .indicator { - color: var(--colorNeutralStrokeAccessibleHover); - border-color: var(--colorNeutralStrokeAccessibleHover); + color: var(--color-neutral-stroke-accessible-hover); + border-color: var(--color-neutral-stroke-accessible-hover); } } @variant hover { @variant active { & ~ .indicator { - color: var(--colorNeutralStrokeAccessiblePressed); - border-color: var(--colorNeutralStrokeAccessiblePressed); + color: var(--color-neutral-stroke-accessible-pressed); + border-color: var(--color-neutral-stroke-accessible-pressed); } } } @@ -273,23 +273,23 @@ /* Enabled and checked */ @variant checked { & ~ .indicator { - background-color: var(--colorCompoundBrandBackground); - color: var(--colorNeutralForegroundInverted); - border-color: var(--colorTransparentStroke); + background-color: var(--color-compound-brand-background); + color: var(--color-neutral-foreground-inverted); + border-color: var(--color-transparent-stroke); } @variant hover { & ~ .indicator { - background-color: var(--colorCompoundBrandBackgroundHover); - border-color: var(--colorTransparentStrokeInteractive); + background-color: var(--color-compound-brand-background-hover); + border-color: var(--color-transparent-stroke-interactive); } } @variant hover { @variant active { & ~ .indicator { - background-color: var(--colorCompoundBrandBackgroundPressed); - border-color: var(--colorTransparentStrokeInteractive); + background-color: var(--color-compound-brand-background-pressed); + border-color: var(--color-transparent-stroke-interactive); } } } @@ -300,7 +300,7 @@ @variant disabled-control { @variant not-checked { & ~ .indicator { - border-color: var(--colorNeutralStrokeDisabled); + border-color: var(--color-neutral-stroke-disabled); } } } @@ -309,8 +309,8 @@ @variant disabled-control { @variant checked { & ~ .indicator { - background-color: var(--colorNeutralBackgroundDisabled); - border-color: var(--colorTransparentStrokeDisabled); + background-color: var(--color-neutral-background-disabled); + border-color: var(--color-transparent-stroke-disabled); } } } @@ -474,8 +474,8 @@ /* Negative margin absorbs the difference between the track height and the label's line height: the label must not grow the switch, but a wrapped label keeps its line height. */ - margin-bottom: calc((20px * var(--base-scale) - var(--lineHeightBase300)) / 2); - margin-top: calc((20px * var(--base-scale) - var(--lineHeightBase300)) / 2); + margin-bottom: calc((20px * var(--base-scale) - var(--leading-base-300)) / 2); + margin-top: calc((20px * var(--base-scale) - var(--leading-base-300)) / 2); /* `padding: var(--spacing-vertical-s) var(--spacing-horizontal-s)` expanded to longhands (CONVERSION_GUIDE §2): the position slices below override single sides inside this @@ -508,10 +508,10 @@ /* from useLabelStyles.sizeSmall — label arg #4; re-sets the two margins above */ @variant size-small { & .label { - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); - margin-bottom: calc((16px * var(--base-scale) - var(--lineHeightBase200)) / 2); - margin-top: calc((16px * var(--base-scale) - var(--lineHeightBase200)) / 2); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); + margin-bottom: calc((16px * var(--base-scale) - var(--leading-base-200)) / 2); + margin-top: calc((16px * var(--base-scale) - var(--leading-base-200)) / 2); } } } @@ -527,14 +527,14 @@ & ~ .label { @apply cursor-default; - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @variant enabled-control { @variant not-checked { & ~ .label { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } } } diff --git a/packages/react-components/react-table/library/src/components/Table/Table.module.css b/packages/react-components/react-table/library/src/components/Table/Table.module.css index 862732ccb5a49f..f48b12328097d8 100644 --- a/packages/react-components/react-table/library/src/components/Table/Table.module.css +++ b/packages/react-components/react-table/library/src/components/Table/Table.module.css @@ -43,7 +43,7 @@ .root { @apply border-collapse; - background-color: var(--colorSubtleBackground); + background-color: var(--color-subtle-background); } } diff --git a/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css b/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css index 0763a618f2a98f..b75d2eb552049b 100644 --- a/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css +++ b/packages/react-components/react-table/library/src/components/TableCell/TableCell.module.css @@ -125,8 +125,8 @@ this sits after the layout/size blocks and why the `2px` stays literal. */ .root { @variant focus-visible-fui { - outline: 2px solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: 2px solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css index d93e5dcb6c0f82..4b8919fe2bde76 100644 --- a/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css +++ b/packages/react-components/react-table/library/src/components/TableCellLayout/TableCellLayout.module.css @@ -121,7 +121,7 @@ /* from useStyles.mainPrimary — `main` arg #3 */ .main-primary { - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } } @@ -129,11 +129,11 @@ /* from useStyles.description — `description` arg #2. `...typographyStyles.caption1` expanded exactly as the compiler emitted it. */ .description { - color: var(--colorNeutralForeground2); - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + color: var(--color-neutral-foreground-2); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } diff --git a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.module.css b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.module.css index fcfe829376648a..ecc828075497b3 100644 --- a/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.module.css +++ b/packages/react-components/react-table/library/src/components/TableHeaderCell/TableHeaderCell.module.css @@ -90,7 +90,7 @@ .root { @apply relative ps-horizontal-s pe-horizontal-s pt-0 pb-0; - font-weight: var(--fontWeightRegular); + font-weight: var(--font-weight-regular); } /* from useTableLayoutStyles.root — arg #4, native-table branch */ @@ -115,8 +115,8 @@ /* from useStyles.root — arg #2, focus half */ .root { @variant focus-within-fui { - outline: 2px solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: 2px solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } @@ -128,8 +128,8 @@ /* from useStyles.rootInteractive[':hover'] — arg #3 */ .root-interactive { @variant hover { - color: var(--colorNeutralForeground1Hover); - background-color: var(--colorSubtleBackgroundHover); + color: var(--color-neutral-foreground-1-hover); + background-color: var(--color-subtle-background-hover); } } } @@ -141,8 +141,8 @@ /* from useStyles.rootInteractive[':active'] — arg #3 */ .root-interactive { @variant active { - color: var(--colorNeutralForeground1Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-1-pressed); + background-color: var(--color-subtle-background-pressed); } } } diff --git a/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.module.css b/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.module.css index 49cba4a3c116e1..76124e1b19dd43 100644 --- a/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.module.css +++ b/packages/react-components/react-table/library/src/components/TableResizeHandle/TableResizeHandle.module.css @@ -82,7 +82,7 @@ inset-inline-start: 50%; top: 0; bottom: 0; - background-color: var(--colorNeutralStroke1); + background-color: var(--color-neutral-stroke-1); } /* diff --git a/packages/react-components/react-table/library/src/components/TableRow/TableRow.module.css b/packages/react-components/react-table/library/src/components/TableRow/TableRow.module.css index c20fdf5e85969b..d0d360ba34f965 100644 --- a/packages/react-components/react-table/library/src/components/TableRow/TableRow.module.css +++ b/packages/react-components/react-table/library/src/components/TableRow/TableRow.module.css @@ -110,7 +110,7 @@ .root { @apply box-border; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } /* @@ -123,12 +123,12 @@ .small { border-bottom-width: var(--spacing-thin); border-bottom-style: solid; - border-bottom-color: var(--colorNeutralStroke2); + border-bottom-color: var(--color-neutral-stroke-2); } /* from useStyles['extra-small'] — arg #4 */ .extra-small { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } /* from useTableLayoutStyles.root — arg #5, native-table branch */ @@ -143,25 +143,25 @@ /* from useStyles.brand — arg #6, flat half */ .brand { - background-color: var(--colorBrandBackground2); + background-color: var(--color-brand-background-2); /* `...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)` */ - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } /* from useStyles.neutral — arg #6, flat half */ .neutral { - background-color: var(--colorSubtleBackgroundSelected); - color: var(--colorNeutralForeground1Hover); + background-color: var(--color-subtle-background-selected); + color: var(--color-neutral-foreground-1-hover); /* `...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand)` */ - border-top-color: var(--colorNeutralStrokeOnBrand); - border-right-color: var(--colorNeutralStrokeOnBrand); - border-bottom-color: var(--colorNeutralStrokeOnBrand); - border-left-color: var(--colorNeutralStrokeOnBrand); + border-top-color: var(--color-neutral-stroke-on-brand); + border-right-color: var(--color-neutral-stroke-on-brand); + border-bottom-color: var(--color-neutral-stroke-on-brand); + border-left-color: var(--color-neutral-stroke-on-brand); } } @@ -173,8 +173,8 @@ /* from useStyles.root — arg #2, focus half */ .root { @variant focus-visible-fui { - outline: 2px solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: 2px solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } } @@ -186,8 +186,8 @@ /* from useStyles.rootInteractive[':hover'] — arg #3 */ .root-interactive { @variant hover { - background-color: var(--colorSubtleBackgroundHover); - color: var(--colorNeutralForeground1Hover); + background-color: var(--color-subtle-background-hover); + color: var(--color-neutral-foreground-1-hover); } } } @@ -199,23 +199,23 @@ /* from useStyles.rootInteractive[':active'] — arg #3 */ .root-interactive { @variant active { - background-color: var(--colorSubtleBackgroundPressed); - color: var(--colorNeutralForeground1Pressed); + background-color: var(--color-subtle-background-pressed); + color: var(--color-neutral-foreground-1-pressed); } } /* from useStyles.brand[':active'] — arg #6 */ .brand { @variant active { - background-color: var(--colorBrandBackground2); - color: var(--colorNeutralForeground1); + background-color: var(--color-brand-background-2); + color: var(--color-neutral-foreground-1); } } /* from useStyles.neutral[':active'] — arg #6 */ .neutral { @variant active { - background-color: var(--colorSubtleBackgroundSelected); + background-color: var(--color-subtle-background-selected); } } } @@ -253,7 +253,7 @@ border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* NATIVE `:focus-visible` — this is what Griffel emitted (`.f1kvufhq:focus-visible`), not keyborg's `[data-fui-focus-visible]`. */ diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.module.css b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.module.css index 6d985cece775a8..188ffe24f42def 100644 --- a/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.module.css +++ b/packages/react-components/react-table/library/src/components/TableSelectionCell/TableSelectionCell.module.css @@ -119,8 +119,8 @@ /* from useStyles.root — arg #2, focus half */ .root { @variant focus-visible-fui { - outline: 2px solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: 2px solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); } } diff --git a/packages/react-components/react-tabs/library/src/components/Tab/Tab.module.css b/packages/react-components/react-tabs/library/src/components/Tab/Tab.module.css index 863307a36f9e4b..f11533b0e3c96e 100644 --- a/packages/react-components/react-tabs/library/src/components/Tab/Tab.module.css +++ b/packages/react-components/react-tabs/library/src/components/Tab/Tab.module.css @@ -191,11 +191,11 @@ are other full shorthands (`.circular*`) plus the focus indicator's four `border-*-color` longhands, which are written after them. */ border: none; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); cursor: pointer; - font-family: var(--fontFamilyBase); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + line-height: var(--leading-base-300); outline-style: none; /* from useRootStyles.horizontal / .vertical — arg b2 */ @@ -250,8 +250,8 @@ /* from useCircularAppearanceStyles.base — arg b4 */ .circular { - border-radius: var(--borderRadiusCircular); - border: solid var(--spacing-thin) var(--colorTransparentStroke); + border-radius: var(--radius-circular); + border: solid var(--spacing-thin) var(--color-transparent-stroke); & .icon { color: inherit; @@ -281,20 +281,20 @@ /* from useCircularAppearanceStyles.subtle — arg b7 */ .circular-subtle { - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-2); @variant enabled { @variant hover { - background-color: var(--colorSubtleBackgroundHover); - border: solid var(--spacing-thin) var(--colorNeutralStroke1Hover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-subtle-background-hover); + border: solid var(--spacing-thin) var(--color-neutral-stroke-1-hover); + color: var(--color-neutral-foreground-2-hover); } @variant active { - background-color: var(--colorSubtleBackgroundPressed); - border: solid var(--spacing-thin) var(--colorNeutralStroke1Pressed); - color: var(--colorNeutralForeground2Pressed); + background-color: var(--color-subtle-background-pressed); + border: solid var(--spacing-thin) var(--color-neutral-stroke-1-pressed); + color: var(--color-neutral-foreground-2-pressed); } } @@ -305,21 +305,21 @@ /* from useCircularAppearanceStyles.subtleSelected — arg b7 */ .circular-subtle-selected { - background-color: var(--colorBrandBackground2); - border: solid var(--spacing-thin) var(--colorCompoundBrandStroke); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + border: solid var(--spacing-thin) var(--color-compound-brand-stroke); + color: var(--color-brand-foreground-2); @variant enabled { @variant hover { - background-color: var(--colorBrandBackground2Hover); - border: solid var(--spacing-thin) var(--colorCompoundBrandStrokeHover); - color: var(--colorBrandForeground2Hover); + background-color: var(--color-brand-background-2-hover); + border: solid var(--spacing-thin) var(--color-compound-brand-stroke-hover); + color: var(--color-brand-foreground-2-hover); } @variant active { - background-color: var(--colorBrandBackground2Pressed); - border: solid var(--spacing-thin) var(--colorCompoundBrandStrokePressed); - color: var(--colorBrandForeground2Pressed); + background-color: var(--color-brand-background-2-pressed); + border: solid var(--spacing-thin) var(--color-compound-brand-stroke-pressed); + color: var(--color-brand-foreground-2-pressed); } } @@ -330,31 +330,31 @@ /* from useCircularAppearanceStyles.subtleDisabled — arg b7 */ .circular-subtle-disabled { - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-disabled); } /* from useCircularAppearanceStyles.subtleDisabledSelected — arg b7 */ .circular-subtle-disabled-selected { - background-color: var(--colorNeutralBackgroundDisabled); - border: solid var(--spacing-thin) var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border: solid var(--spacing-thin) var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); } /* from useCircularAppearanceStyles.filled — arg b8 */ .circular-filled { - background-color: var(--colorNeutralBackground3); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-3); + color: var(--color-neutral-foreground-2); @variant enabled { @variant hover { - background-color: var(--colorNeutralBackground3Hover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-neutral-background-3-hover); + color: var(--color-neutral-foreground-2-hover); } @variant active { - background-color: var(--colorNeutralBackground3Pressed); - color: var(--colorNeutralForeground2Pressed); + background-color: var(--color-neutral-background-3-pressed); + color: var(--color-neutral-foreground-2-pressed); } } @@ -380,18 +380,18 @@ /* from useCircularAppearanceStyles.filledSelected — arg b8 */ .circular-filled-selected { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); @variant enabled { @variant hover { - background-color: var(--colorBrandBackgroundHover); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background-hover); + color: var(--color-neutral-foreground-on-brand); } @variant active { - background-color: var(--colorBrandBackgroundPressed); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background-pressed); + color: var(--color-neutral-foreground-on-brand); } } @@ -413,15 +413,15 @@ /* from useCircularAppearanceStyles.filledDisabled — arg b8 */ .circular-filled-disabled { - background-color: var(--colorNeutralBackgroundDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + color: var(--color-neutral-foreground-disabled); } /* from useCircularAppearanceStyles.filledDisabledSelected — arg b8 */ .circular-filled-disabled-selected { - background-color: var(--colorNeutralBackgroundDisabled); - border: solid var(--spacing-thin) var(--colorNeutralStrokeDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + border: solid var(--spacing-thin) var(--color-neutral-stroke-disabled); + color: var(--color-neutral-foreground-disabled); } /* ── regular appearances (`transparent`, `subtle`) ───────────────────────────────── */ @@ -434,38 +434,38 @@ * not, so the narrower condition has to come later in the file. */ .subtle { - background-color: var(--colorSubtleBackground); + background-color: var(--color-subtle-background); & .icon { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } & .content { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } @variant enabled { @variant hover { - background-color: var(--colorSubtleBackgroundHover); + background-color: var(--color-subtle-background-hover); & .icon { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } & .content { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } } @variant active { - background-color: var(--colorSubtleBackgroundPressed); + background-color: var(--color-subtle-background-pressed); & .icon { - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } & .content { - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } } } @@ -473,38 +473,38 @@ /* from useRootStyles.transparent — arg r7 */ .transparent { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); & .icon { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } & .content { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } @variant enabled { @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); & .icon { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } & .content { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } } @variant active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); & .icon { - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } & .content { - color: var(--colorNeutralForeground2Pressed); + color: var(--color-neutral-foreground-2-pressed); } } } @@ -517,31 +517,31 @@ */ .selected { & .icon { - color: var(--colorCompoundBrandForeground1); + color: var(--color-compound-brand-foreground-1); } & .content { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } @variant enabled { @variant hover { & .icon { - color: var(--colorCompoundBrandForeground1Hover); + color: var(--color-compound-brand-foreground-1-hover); } & .content { - color: var(--colorNeutralForeground1Hover); + color: var(--color-neutral-foreground-1-hover); } } @variant active { & .icon { - color: var(--colorCompoundBrandForeground1Pressed); + color: var(--color-compound-brand-foreground-1-pressed); } & .content { - color: var(--colorNeutralForeground1Pressed); + color: var(--color-neutral-foreground-1-pressed); } } } @@ -549,14 +549,14 @@ /* from useRootStyles.disabled — arg r9 (mutually exclusive with `.selected` above) */ .disabled { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } & .content { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } @@ -598,8 +598,8 @@ @apply absolute; content: ''; - background-color: var(--colorNeutralStroke1Hover); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-neutral-stroke-1-hover); + border-radius: var(--radius-circular); } } @@ -608,8 +608,8 @@ @apply absolute; content: ''; - background-color: var(--colorNeutralStroke1Pressed); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-neutral-stroke-1-pressed); + border-radius: var(--radius-circular); } } @@ -674,13 +674,13 @@ @variant disabled { @variant hover { &::before { - background-color: var(--colorTransparentStroke); + background-color: var(--color-transparent-stroke); } } @variant active { &::before { - background-color: var(--colorTransparentStroke); + background-color: var(--color-transparent-stroke); } } } @@ -717,25 +717,25 @@ @apply absolute; content: ''; - background-color: var(--colorTransparentStroke); - border-radius: var(--borderRadiusCircular); + background-color: var(--color-transparent-stroke); + border-radius: var(--radius-circular); } /* from useActiveIndicatorStyles.selected — arg i7 (applied when `selected && !disabled`) */ @variant enabled { &::after { - background-color: var(--colorCompoundBrandStroke); + background-color: var(--color-compound-brand-stroke); } @variant hover { &::after { - background-color: var(--colorCompoundBrandStrokeHover); + background-color: var(--color-compound-brand-stroke-hover); } } @variant active { &::after { - background-color: var(--colorCompoundBrandStrokePressed); + background-color: var(--color-compound-brand-stroke-pressed); } } } @@ -806,7 +806,7 @@ /* from useActiveIndicatorStyles.disabled — arg i9 (applied when `selected && disabled`) */ @variant disabled { &::after { - background-color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-foreground-disabled); } } } @@ -860,8 +860,8 @@ .indicator-animated { &::after { transition-property: transform; - transition-duration: var(--durationSlow); - transition-timing-function: var(--curveDecelerateMax); + transition-duration: var(--duration-slow); + transition-timing-function: var(--ease-decelerate-max); } @media (prefers-reduced-motion: reduce) { @@ -901,8 +901,8 @@ outline-color: transparent; outline-style: solid; box-shadow: - var(--shadow4), - 0 0 0 var(--spacing-thick) var(--colorStrokeFocus2); + var(--shadow-4), + 0 0 0 var(--spacing-thick) var(--color-stroke-focus-2); z-index: 1; } } @@ -917,9 +917,9 @@ outline-color: transparent; outline-style: solid; box-shadow: - var(--shadow4), - 0 0 0 var(--spacing-thick) var(--colorStrokeFocus2), - 0 0 0 var(--spacing-thin) var(--colorNeutralStrokeOnBrand) inset; + var(--shadow-4), + 0 0 0 var(--spacing-thick) var(--color-stroke-focus-2), + 0 0 0 var(--spacing-thin) var(--color-neutral-stroke-on-brand) inset; z-index: 1; } } @@ -945,11 +945,11 @@ .circular-subtle { @variant enabled { @variant hover { - border: solid var(--spacing-thin) var(--colorNeutralStroke1Hover); + border: solid var(--spacing-thin) var(--color-neutral-stroke-1-hover); } @variant active { - border: solid var(--spacing-thin) var(--colorNeutralStroke1Pressed); + border: solid var(--spacing-thin) var(--color-neutral-stroke-1-pressed); } } } @@ -957,11 +957,11 @@ .circular-subtle-selected { @variant enabled { @variant hover { - border: solid var(--spacing-thin) var(--colorCompoundBrandStrokeHover); + border: solid var(--spacing-thin) var(--color-compound-brand-stroke-hover); } @variant active { - border: solid var(--spacing-thin) var(--colorCompoundBrandStrokePressed); + border: solid var(--spacing-thin) var(--color-compound-brand-stroke-pressed); } } } @@ -1024,34 +1024,34 @@ .content { @apply overflow-hidden px-horizontal-xxs py-vertical-none; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useContentStyles.large — typographyStyles.body2 */ .content-large { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); } /* from useContentStyles.selected — typographyStyles.body1Strong */ .content-selected { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } /* from useContentStyles.largeSelected — typographyStyles.subtitle2 */ .content-large-selected { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } /* from useContentStyles.noIconBefore / .iconBefore — grid line NUMBERS, written literally */ diff --git a/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.module.css b/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.module.css index a278db564c3b8b..6588855bc4e405 100644 --- a/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.module.css +++ b/packages/react-components/react-tabs/stories/src/Tabs/TabListWithOverflow.module.css @@ -2,7 +2,7 @@ * Token references are the Fluent theme's CSS variables. */ .menu { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } .menuButton { @@ -10,7 +10,7 @@ } .example { - background-color: var(--colorNeutralBackground2); + background-color: var(--color-neutral-background-2); overflow: hidden; padding: 5px; z-index: 0; diff --git a/packages/react-components/react-tabs/stories/src/Tabs/TabListWithPanels.module.css b/packages/react-components/react-tabs/stories/src/Tabs/TabListWithPanels.module.css index 902d24d1dea781..a5d7d142811086 100644 --- a/packages/react-components/react-tabs/stories/src/Tabs/TabListWithPanels.module.css +++ b/packages/react-components/react-tabs/stories/src/Tabs/TabListWithPanels.module.css @@ -20,7 +20,7 @@ } .propsTable td:first-child { - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } .propsTable td { From 4fad40ff4c5808f4f0e5caa50c7b8010c174fd64 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:44:08 -0700 Subject: [PATCH 621/640] refactor(theming): old->canonical token var sweep 7/8 (Phase 2a) Areas: packages/react-components/react-tag-picker, packages/react-components/react-tags, packages/react-components/react-teaching-popover, packages/react-components/react-text, packages/react-components/react-textarea, packages/react-components/react-theme, packages/react-components/react-toast, packages/react-components/react-toolbar, packages/react-components/react-tooltip, packages/react-components/react-tree, packages/react-components/recipes Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../TagPickerButton.module.css | 24 +-- .../TagPickerControl.module.css | 118 +++++++-------- .../TagPickerInput/TagPickerInput.module.css | 38 ++--- .../TagPickerList/TagPickerList.module.css | 4 +- .../TagPickerOption.module.css | 8 +- .../TagPicker/TagPickerAppearance.module.css | 6 +- .../InteractionTag/InteractionTag.module.css | 4 +- .../InteractionTagPrimary.module.css | 124 ++++++++-------- .../InteractionTagSecondary.module.css | 108 +++++++------- .../library/src/components/Tag/Tag.module.css | 124 ++++++++-------- .../src/TagGroup/TagGroupOverflow.module.css | 2 +- ...hingPopoverCarouselFooterButton.module.css | 56 +++---- .../TeachingPopoverCarouselNav.module.css | 4 +- ...eachingPopoverCarouselNavButton.module.css | 18 +-- .../TeachingPopoverFooter.module.css | 20 +-- .../TeachingPopoverHeader.module.css | 48 +++--- .../TeachingPopoverSurface.module.css | 2 +- .../TeachingPopoverTitle.module.css | 32 ++-- .../react-text/library/docs/MIGRATION.md | 4 +- .../react-text/library/docs/Spec.md | 16 +- .../src/components/Text/Text.module.css | 54 +++---- .../src/components/presets/presets.module.css | 138 +++++++++--------- .../components/Textarea/Textarea.module.css | 124 ++++++++-------- .../Textarea/TextareaAppearance.module.css | 4 +- .../react-theme/library/README.md | 4 +- .../src/Theme/typography/Composing.module.css | 8 +- .../src/Theme/typography/Example.module.css | 8 +- .../Theme/typography/MixedStyles.module.css | 16 +- .../typography/ThemeTypography.module.css | 136 ++++++++--------- .../stories/src/Theme/typography/index.mdx | 32 ++-- .../src/components/Toast/Toast.module.css | 18 +-- .../components/ToastBody/ToastBody.module.css | 24 +-- .../ToastContainer/ToastContainer.module.css | 6 +- .../ToastTitle/ToastTitle.module.css | 28 ++-- .../src/Toast/ToastLifecycle.module.css | 10 +- .../ToolbarRadioButton.module.css | 6 +- .../ToolbarToggleButton.module.css | 6 +- .../src/components/Tooltip/Tooltip.module.css | 27 ++-- .../src/Tooltip/TooltipStyled.module.css | 4 +- .../components/TreeItem/TreeItem.module.css | 10 +- .../TreeItemLayout/TreeItemLayout.module.css | 46 +++--- .../TreeItemPersonaLayout.module.css | 56 +++---- .../src/Tree/TreeMotionCustom.module.css | 4 +- .../recipes/src/templates/Example.module.css | 2 +- 44 files changed, 766 insertions(+), 765 deletions(-) diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.module.css b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.module.css index f2045c2a9c58dc..8fbf408cfa4ac2 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.module.css +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerButton/TagPickerButton.module.css @@ -51,12 +51,12 @@ .root { @apply box-border flex min-h-32 grow items-center; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); /* compiled `border:none` — TagPickerControl draws the field's border */ border-style: none; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); cursor: pointer; /* @@ -64,7 +64,7 @@ * `typographyStyles.*` spread; all four are the same token, so Griffel deduplicated them * onto one atomic (`.fk6fouc`). Declared once here for the same reason. */ - font-family: var(--fontFamilyBase); + font-family: var(--font-base); /* `columnGap: tokens.spacingHorizontalXXS` — `extra-large` overrides it below */ @apply gap-x-horizontal-xxs; @@ -92,9 +92,9 @@ .root { @variant size-medium { /* typographyStyles.caption1 */ - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); /* SNudge (6) + XXS (2) = 8px, exactly the S step */ @apply py-3 ps-horizontal-s pe-horizontal-s-nudge; @@ -102,9 +102,9 @@ @variant size-large { /* typographyStyles.body1 */ - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); /* MNudge (10) + XXS (2) = 12px, exactly the M step */ @apply py-5 ps-horizontal-m pe-horizontal-m-nudge; @@ -115,9 +115,9 @@ @apply gap-x-horizontal-s-nudge; /* typographyStyles.body2 */ - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); /* M (12) + SNudge (6) = 18px, which matches NO spacing step, so the numeric utility is the sanctioned fallback (D4 amendment) — same scale, `ps-18` === `calc(18px * var(--base-scale))`. */ diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css index 730738f16d5fd5..bd6b2750be470c 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerControl/TagPickerControl.module.css @@ -106,7 +106,7 @@ .root { @apply relative box-border flex min-w-250 flex-wrap items-center; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* `columnGap: tokens.spacingHorizontalXXS` */ @apply gap-x-horizontal-xxs; @@ -132,7 +132,7 @@ * * The `max()` floor and the `clip-path` inset are LITERAL `2px` in this component's source * and are reproduced literally: they must agree with each other and with - * `--borderRadiusMedium`, which is an unscaled token. `border-bottom-width` DOES read + * `--radius-medium`, which is an unscaled token. `border-bottom-width` DOES read * `strokeWidthThick`, so it takes the `--spacing-thick` form (D4 addendum). */ &::after { @@ -144,24 +144,24 @@ inset-inline: -1px; bottom: -1px; - height: max(2px, var(--borderRadiusMedium)); - border-end-start-radius: var(--borderRadiusMedium); - border-end-end-radius: var(--borderRadiusMedium); + height: max(2px, var(--radius-medium)); + border-end-start-radius: var(--radius-medium); + border-end-end-radius: var(--radius-medium); /* longhands: `:focus-within:active` below overrides the color alone */ border-bottom-width: var(--spacing-thick); border-bottom-style: solid; - border-bottom-color: var(--colorCompoundBrandStroke); + border-bottom-color: var(--color-compound-brand-stroke); clip-path: inset(calc(100% - 2px) 0 0 0); /* Animation for focus OUT */ transform: scaleX(0); transition-property: transform; - transition-duration: var(--durationUltraFast); + transition-duration: var(--duration-ultra-fast); /* Curve token used as a delay — reproduced from the compiled output verbatim. */ - transition-delay: var(--curveAccelerateMid); + transition-delay: var(--ease-accelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -179,8 +179,8 @@ &::after { transform: scaleX(1); transition-property: transform; - transition-duration: var(--durationNormal); - transition-delay: var(--curveDecelerateMid); + transition-duration: var(--duration-normal); + transition-delay: var(--ease-decelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -191,7 +191,7 @@ /* clicking the field again while it is already focused */ @variant active { &::after { - border-bottom-color: var(--colorCompoundBrandStrokePressed); + border-bottom-color: var(--color-compound-brand-stroke-pressed); } } } @@ -232,7 +232,7 @@ /* from useStyles.outline (the default appearance) */ .outline { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); border-top-width: var(--spacing-thin); border-right-width: var(--spacing-thin); @@ -242,21 +242,21 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorNeutralStroke1); - border-right-color: var(--colorNeutralStroke1); - border-left-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-top-color: var(--color-neutral-stroke-1); + border-right-color: var(--color-neutral-stroke-1); + border-left-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-accessible); } /* from useStyles.underline — only the bottom border is drawn; the other three sides keep the initial `border-style: none`, so they render nothing. `border-radius: 0` overrides the - root's `--borderRadiusMedium` by file position, the way the later `d` atomic did. */ + root's `--radius-medium` by file position, the way the later `d` atomic did. */ .underline { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-bottom-width: var(--spacing-thin); border-bottom-style: solid; - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-bottom-color: var(--color-neutral-stroke-accessible); /* corners look strange if rounded */ border-radius: 0; @@ -264,7 +264,7 @@ /* from useStyles['filled-lighter'] */ .filled-lighter { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); border-top-width: var(--spacing-thin); border-right-width: var(--spacing-thin); @@ -274,15 +274,15 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } /* from useStyles['filled-darker'] */ .filled-darker { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); border-top-width: var(--spacing-thin); border-right-width: var(--spacing-thin); @@ -292,10 +292,10 @@ border-right-style: solid; border-bottom-style: solid; border-left-style: solid; - border-top-color: var(--colorTransparentStroke); - border-right-color: var(--colorTransparentStroke); - border-bottom-color: var(--colorTransparentStroke); - border-left-color: var(--colorTransparentStroke); + border-top-color: var(--color-transparent-stroke); + border-right-color: var(--color-transparent-stroke); + border-bottom-color: var(--color-transparent-stroke); + border-left-color: var(--color-transparent-stroke); } } @@ -310,12 +310,12 @@ .root { @variant disabled { cursor: not-allowed; - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); - border-top-color: var(--colorNeutralStrokeDisabled); - border-right-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-left-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-right-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-left-color: var(--color-neutral-stroke-disabled); @variant forced-colors { border-top-color: GrayText; @@ -345,10 +345,10 @@ .filled-darker { @variant invalid { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -356,7 +356,7 @@ .underline { @variant invalid { @variant not-focus-within { - border-bottom-color: var(--colorPaletteRedBorder2); + border-bottom-color: var(--color-palette-red-border-2); } } } @@ -379,24 +379,24 @@ .outline { @variant enabled { @variant focus-within { - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } @variant hover { - border-top-color: var(--colorNeutralStroke1Hover); - border-right-color: var(--colorNeutralStroke1Hover); - border-left-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStrokeAccessibleHover); + border-top-color: var(--color-neutral-stroke-1-hover); + border-right-color: var(--color-neutral-stroke-1-hover); + border-left-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-accessible-hover); } @variant active { - border-top-color: var(--colorNeutralStroke1Pressed); - border-right-color: var(--colorNeutralStroke1Pressed); - border-left-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-top-color: var(--color-neutral-stroke-1-pressed); + border-right-color: var(--color-neutral-stroke-1-pressed); + border-left-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } } } @@ -424,10 +424,10 @@ @variant invalid { @variant hover { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -437,7 +437,7 @@ @variant invalid { @variant hover { @variant not-focus-within { - border-bottom-color: var(--colorPaletteRedBorder2); + border-bottom-color: var(--color-palette-red-border-2); } } } @@ -499,9 +499,9 @@ & .icon { @apply box-border flex items-center justify-center self-start; - color: var(--colorNeutralStrokeAccessible); + color: var(--color-neutral-stroke-accessible); cursor: pointer; - font-size: var(--fontSizeBase500); + font-size: var(--text-base-500); } /* @@ -537,7 +537,7 @@ /* from useIconStyles.disabled — arg #4 */ @variant disabled { & .icon { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; } } diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.module.css b/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.module.css index e14c38889444ec..8258769241548c 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.module.css +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerInput/TagPickerInput.module.css @@ -50,9 +50,9 @@ .root { @apply box-border max-w-full min-w-24 grow; - background-color: var(--colorTransparentBackground); - color: var(--colorNeutralForeground1); - font-family: var(--fontFamilyBase); + background-color: var(--color-transparent-background); + color: var(--color-neutral-foreground-1); + font-family: var(--font-base); /* compiled `border:none`; the field's border is drawn by TagPickerControl */ border-style: none; @@ -77,7 +77,7 @@ * react-combobox's `input` slot. */ &::placeholder { - color: var(--colorNeutralForeground4); + color: var(--color-neutral-foreground-4); opacity: 1; /* browser style override */ } @@ -99,28 +99,28 @@ */ .root { @variant size-medium { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @apply px-horizontal-none py-vertical-s-nudge; } @variant size-large { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @apply px-horizontal-none py-vertical-m-nudge; } @variant size-extra-large { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); @apply px-horizontal-none py-vertical-m; } @@ -138,12 +138,12 @@ */ .root { @variant disabled { - color: var(--colorNeutralForegroundDisabled); - background-color: var(--colorTransparentBackground); + color: var(--color-neutral-foreground-disabled); + background-color: var(--color-transparent-background); cursor: not-allowed; &::placeholder { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.module.css b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.module.css index 0405e706c264f7..208fc998838834 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.module.css +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerList/TagPickerList.module.css @@ -49,8 +49,8 @@ .root { @apply box-border; - box-shadow: var(--shadow16); - border-radius: var(--borderRadiusMedium); + box-shadow: var(--shadow-16); + border-radius: var(--radius-medium); max-height: 80vh; } diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.module.css b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.module.css index 00ed89a2778d02..f3af3b32dc5070 100644 --- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.module.css +++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/TagPickerOption.module.css @@ -78,10 +78,10 @@ grid-column-start: 2; grid-row-start: 2; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } diff --git a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.module.css b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.module.css index 6943ec80739c77..0c6792b487c68d 100644 --- a/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.module.css +++ b/packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.module.css @@ -2,9 +2,9 @@ * Token references are the Fluent theme's CSS variables. */ .darkBG { - background-color: var(--colorNeutralBackgroundInverted); - color: var(--colorNeutralForegroundInverted2); + background-color: var(--color-neutral-background-inverted); + color: var(--color-neutral-foreground-inverted-2); padding: 20px; margin-block: 10px; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } diff --git a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.module.css b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.module.css index 972be69f64c712..cf64326579ecb4 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.module.css +++ b/packages/react-components/react-tags/library/src/components/InteractionTag/InteractionTag.module.css @@ -60,11 +60,11 @@ * is reproduced as-is. */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); } .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } } diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.module.css b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.module.css index 906a89cc741d7b..a046fe9b98722f 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.module.css +++ b/packages/react-components/react-tags/library/src/components/InteractionTagPrimary/InteractionTagPrimary.module.css @@ -126,21 +126,21 @@ /* the `border` shorthand comes AFTER `border-style: none` in the compiled reset and re-establishes `solid` — declaration order preserved */ - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); /* from createCustomFocusIndicatorStyle({ outline, zIndex }) — neither shared focus utility applies: this call passes only those two options, so the compiled rule is just `[data-fui-focus-visible]{outline:…;z-index:1}` (no border/box-shadow ring, no ::after pseudo-element). Reproduced literally. */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); z-index: 1; } } /* from useRootRoundedBaseClassName — the rounded-only half of arg #2 */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* * Pseudo element to draw the border for windows high contrast mode — when the tag has @@ -155,15 +155,15 @@ position: absolute; /* px literal → `--base-scale` (D4); exactly -1px at the default 16px root */ inset: calc(-1px * var(--base-scale)); - border-start-start-radius: var(--borderRadiusMedium); - border-start-end-radius: var(--borderRadiusMedium); + border-start-start-radius: var(--radius-medium); + border-start-end-radius: var(--radius-medium); } } } /* from useRootCircularBaseClassName — the circular-only half of arg #2 */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); @media (forced-colors: active) { position: relative; @@ -174,8 +174,8 @@ border-inline-start: var(--spacing-thin) solid; position: absolute; inset: calc(-1px * var(--base-scale)); - border-start-start-radius: var(--borderRadiusCircular); - border-end-start-radius: var(--borderRadiusCircular); + border-start-start-radius: var(--radius-circular); + border-end-start-radius: var(--radius-circular); } } } @@ -193,8 +193,8 @@ &::before { border-inline-end: var(--spacing-thin) solid transparent; - border-start-end-radius: var(--borderRadiusCircular); - border-end-end-radius: var(--borderRadiusCircular); + border-start-end-radius: var(--radius-circular); + border-end-end-radius: var(--radius-circular); } } } @@ -204,18 +204,18 @@ /* from useRootStyles[appearance] — arg #4, the ENABLED branch. The `.fui-Icon-*` halves of `outline`'s hover/active are NOT here — see the S-J/D27 l1 section at the bottom. */ .filled { - background-color: var(--colorNeutralBackground3); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-3); + color: var(--color-neutral-foreground-2); @variant hover { cursor: pointer; - background-color: var(--colorNeutralBackground3Hover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-neutral-background-3-hover); + color: var(--color-neutral-foreground-2-hover); } @variant active { - background-color: var(--colorNeutralBackground3Pressed); - color: var(--colorNeutralForeground2Pressed); + background-color: var(--color-neutral-background-3-pressed); + color: var(--color-neutral-foreground-2-pressed); } @variant forced-colors { @@ -230,25 +230,25 @@ } .outline { - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-2); /* shorthands.borderColor(...) → the four longhands the compiler emits, in its order */ - border-top-color: var(--colorNeutralStroke1); - border-inline-end-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-inline-start-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-inline-end-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-inline-start-color: var(--color-neutral-stroke-1); @variant hover { cursor: pointer; - background-color: var(--colorSubtleBackgroundHover); - color: var(--colorNeutralForeground2Hover); + background-color: var(--color-subtle-background-hover); + color: var(--color-neutral-foreground-2-hover); /* the `.fui-Icon-filled` / `.fui-Icon-regular` swap sits in the S-J/D27 l1 section at the bottom */ } @variant active { - background-color: var(--colorSubtleBackgroundPressed); - color: var(--colorNeutralForeground2Pressed); + background-color: var(--color-subtle-background-pressed); + color: var(--color-neutral-foreground-2-pressed); /* idem */ } @@ -264,18 +264,18 @@ } .brand { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); @variant hover { cursor: pointer; - background-color: var(--colorBrandBackground2Hover); - color: var(--colorCompoundBrandForeground1Hover); + background-color: var(--color-brand-background-2-hover); + color: var(--color-compound-brand-foreground-1-hover); } @variant active { - background-color: var(--colorBrandBackground2Pressed); - color: var(--colorCompoundBrandForeground1Pressed); + background-color: var(--color-brand-background-2-pressed); + color: var(--color-compound-brand-foreground-1-pressed); } @variant forced-colors { @@ -296,24 +296,24 @@ .filled-disabled, .brand-disabled { cursor: not-allowed; - background-color: var(--colorNeutralBackgroundDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + color: var(--color-neutral-foreground-disabled); - border-top-color: var(--colorTransparentStrokeDisabled); - border-inline-end-color: var(--colorTransparentStrokeDisabled); - border-bottom-color: var(--colorTransparentStrokeDisabled); - border-inline-start-color: var(--colorTransparentStrokeDisabled); + border-top-color: var(--color-transparent-stroke-disabled); + border-inline-end-color: var(--color-transparent-stroke-disabled); + border-bottom-color: var(--color-transparent-stroke-disabled); + border-inline-start-color: var(--color-transparent-stroke-disabled); } .outline-disabled { cursor: not-allowed; - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-disabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-inline-end-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-inline-start-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-inline-end-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-inline-start-color: var(--color-neutral-stroke-disabled); } } @@ -322,22 +322,22 @@ `.fui-Icon-filled` colour halves sit in the S-J/D27 l1 section at the bottom of this file. */ .selected { /* compiled as the `background` SHORTHAND (Griffel priority -2), not background-color */ - background: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); - border-top-color: var(--colorBrandStroke1); - border-inline-end-color: var(--colorBrandStroke1); - border-bottom-color: var(--colorBrandStroke1); - border-inline-start-color: var(--colorBrandStroke1); + border-top-color: var(--color-brand-stroke-1); + border-inline-end-color: var(--color-brand-stroke-1); + border-bottom-color: var(--color-brand-stroke-1); + border-inline-start-color: var(--color-brand-stroke-1); @variant hover { - background-color: var(--colorBrandBackgroundHover); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background-hover); + color: var(--color-neutral-foreground-on-brand); } @variant active { - background-color: var(--colorBrandBackgroundPressed); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background-pressed); + color: var(--color-neutral-foreground-on-brand); } @variant forced-colors { @@ -427,13 +427,13 @@ .with-secondary-action { /* the trailing side butts up against the Secondary button: square it off and drop the shared edge */ - border-start-end-radius: var(--borderRadiusNone); - border-end-end-radius: var(--borderRadiusNone); + border-start-end-radius: var(--radius-none); + border-end-end-radius: var(--radius-none); border-inline-end-style: none; @variant focus-visible-fui { - border-start-end-radius: var(--borderRadiusNone); - border-end-end-radius: var(--borderRadiusNone); + border-start-end-radius: var(--radius-none); + border-end-end-radius: var(--radius-none); } @media (forced-colors: active) { @@ -496,7 +496,7 @@ @variant hover { & :global(.fui-Icon-filled) { display: inline; - color: var(--colorNeutralForeground2BrandHover); + color: var(--color-neutral-foreground-2-brand-hover); } & :global(.fui-Icon-regular) { @@ -507,7 +507,7 @@ @variant active { & :global(.fui-Icon-filled) { display: inline; - color: var(--colorNeutralForeground2BrandPressed); + color: var(--color-neutral-foreground-2-brand-pressed); } & :global(.fui-Icon-regular) { @@ -520,13 +520,13 @@ .selected { @variant hover { & :global(.fui-Icon-filled) { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } @variant active { & :global(.fui-Icon-filled) { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } } diff --git a/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.module.css b/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.module.css index 295a2ddfff8fef..5bf7844bb56ace 100644 --- a/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.module.css +++ b/packages/react-components/react-tags/library/src/components/InteractionTagSecondary/InteractionTagSecondary.module.css @@ -92,15 +92,15 @@ /* declaration order preserved from the compiled reset: the `border` shorthand comes AFTER `border-style: none` and re-establishes `solid`, then the divider colour and the two squared-off leading corners override single longhands. */ - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); /* divider between Primary and Secondary */ - border-inline-start-color: var(--colorNeutralStroke1); - border-start-start-radius: var(--borderRadiusNone); - border-end-start-radius: var(--borderRadiusNone); + border-inline-start-color: var(--color-neutral-stroke-1); + border-start-start-radius: var(--radius-none); + border-end-start-radius: var(--radius-none); @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); } } } @@ -108,20 +108,20 @@ @layer fui.components.l1 { /* from useRootStyles[appearance] — arg #3, the ENABLED branch */ .filled { - background-color: var(--colorNeutralBackground3); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-3); + color: var(--color-neutral-foreground-2); border-top-width: 0; border-bottom-width: 0; @variant hover { cursor: pointer; - background-color: var(--colorNeutralBackground3Hover); - color: var(--colorNeutralForeground2BrandHover); + background-color: var(--color-neutral-background-3-hover); + color: var(--color-neutral-foreground-2-brand-hover); } @variant active { - background-color: var(--colorNeutralBackground3Pressed); - color: var(--colorNeutralForeground2BrandPressed); + background-color: var(--color-neutral-background-3-pressed); + color: var(--color-neutral-foreground-2-brand-pressed); } @variant forced-colors { @@ -139,24 +139,24 @@ } .outline { - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-2); /* shorthands.borderColor(...) → the four longhands the compiler emits, in its order */ - border-top-color: var(--colorNeutralStroke1); - border-inline-end-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-inline-start-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-inline-end-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-inline-start-color: var(--color-neutral-stroke-1); @variant hover { cursor: pointer; - background-color: var(--colorSubtleBackgroundHover); - color: var(--colorNeutralForeground2BrandHover); + background-color: var(--color-subtle-background-hover); + color: var(--color-neutral-foreground-2-brand-hover); } @variant active { - background-color: var(--colorSubtleBackgroundPressed); - color: var(--colorNeutralForeground2BrandPressed); + background-color: var(--color-subtle-background-pressed); + color: var(--color-neutral-foreground-2-brand-pressed); } @variant forced-colors { @@ -171,22 +171,22 @@ } .brand { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); /* divider */ - border-inline-start-color: var(--colorBrandStroke2); + border-inline-start-color: var(--color-brand-stroke-2); border-top-width: 0; border-bottom-width: 0; @variant hover { cursor: pointer; - background-color: var(--colorBrandBackground2Hover); - color: var(--colorCompoundBrandForeground1Hover); + background-color: var(--color-brand-background-2-hover); + color: var(--color-compound-brand-foreground-1-hover); } @variant active { - background-color: var(--colorBrandBackground2Pressed); - color: var(--colorCompoundBrandForeground1Pressed); + background-color: var(--color-brand-background-2-pressed); + color: var(--color-compound-brand-foreground-1-pressed); } @variant forced-colors { @@ -210,25 +210,25 @@ .filled-disabled, .brand-disabled { cursor: not-allowed; - background-color: var(--colorNeutralBackgroundDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + color: var(--color-neutral-foreground-disabled); - border-top-color: var(--colorTransparentStrokeDisabled); - border-inline-end-color: var(--colorTransparentStrokeDisabled); - border-bottom-color: var(--colorTransparentStrokeDisabled); + border-top-color: var(--color-transparent-stroke-disabled); + border-inline-end-color: var(--color-transparent-stroke-disabled); + border-bottom-color: var(--color-transparent-stroke-disabled); /* divider — declared after the shorthand expansion in the Griffel source */ - border-inline-start-color: var(--colorNeutralStrokeDisabled); + border-inline-start-color: var(--color-neutral-stroke-disabled); } .outline-disabled { cursor: not-allowed; - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-disabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-inline-end-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-inline-start-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-inline-end-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-inline-start-color: var(--color-neutral-stroke-disabled); } } @@ -236,13 +236,13 @@ /* from useRootStyles[shape] — arg #4; only the TRAILING corners, the leading pair is squared off by the reset */ .rounded { - border-start-end-radius: var(--borderRadiusMedium); - border-end-end-radius: var(--borderRadiusMedium); + border-start-end-radius: var(--radius-medium); + border-end-end-radius: var(--radius-medium); } .circular { - border-start-end-radius: var(--borderRadiusCircular); - border-end-end-radius: var(--borderRadiusCircular); + border-start-end-radius: var(--radius-circular); + border-end-end-radius: var(--radius-circular); } } @@ -301,23 +301,23 @@ in both the plain and the forced-colors cascades */ .selected { /* compiled as the `background` SHORTHAND (Griffel priority -2), not background-color */ - background: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); - border-top-color: var(--colorBrandStroke1); - border-inline-end-color: var(--colorBrandStroke1); - border-bottom-color: var(--colorBrandStroke1); + border-top-color: var(--color-brand-stroke-1); + border-inline-end-color: var(--color-brand-stroke-1); + border-bottom-color: var(--color-brand-stroke-1); /* divider — declared last in the Griffel source, after shorthands.borderColor */ - border-inline-start-color: var(--colorNeutralStrokeOnBrand2); + border-inline-start-color: var(--color-neutral-stroke-on-brand-2); @variant hover { - background-color: var(--colorBrandBackgroundHover); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background-hover); + color: var(--color-neutral-foreground-on-brand); } @variant active { - background-color: var(--colorBrandBackgroundPressed); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background-pressed); + color: var(--color-neutral-foreground-on-brand); } @variant forced-colors { diff --git a/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css b/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css index 89f9e842abf264..bd40332e3711b3 100644 --- a/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css +++ b/packages/react-components/react-tags/library/src/components/Tag/Tag.module.css @@ -138,16 +138,16 @@ 'media primary dismissIcon' 'media secondary dismissIcon'; - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); } /* from useRootRoundedBaseClassName — the rounded-only half of arg #2 */ .rounded { - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); @variant focus-visible-fui { - border-radius: var(--borderRadiusMedium); - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); + border-radius: var(--radius-medium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); } /* @@ -163,19 +163,19 @@ position: absolute; /* px literal → `--base-scale` (D4); exactly -1px at the default 16px root */ inset: calc(-1px * var(--base-scale)); - border-start-start-radius: var(--borderRadiusMedium); - border-start-end-radius: var(--borderRadiusMedium); + border-start-start-radius: var(--radius-medium); + border-start-end-radius: var(--radius-medium); } } } /* from useRootCircularBaseClassName — the circular-only half of arg #2 */ .circular { - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); @variant focus-visible-fui { - border-radius: var(--borderRadiusCircular); - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); + border-radius: var(--radius-circular); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); } @media (forced-colors: active) { @@ -188,7 +188,7 @@ border-inline-end: var(--spacing-thin) solid; position: absolute; inset: calc(-1px * var(--base-scale)); - border-radius: var(--borderRadiusCircular); + border-radius: var(--radius-circular); } } } @@ -200,34 +200,34 @@ @apply px-horizontal-xxs whitespace-nowrap; /* typographyStyles.caption2 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-100); } } @layer fui.components.l1 { /* from useRootStyles[appearance] — root arg #3, the ENABLED branch */ .filled { - background-color: var(--colorNeutralBackground3); - color: var(--colorNeutralForeground2); + background-color: var(--color-neutral-background-3); + color: var(--color-neutral-foreground-2); } .outline { - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-2); /* shorthands.borderColor(...) → the four longhands the compiler emits, in its order */ - border-top-color: var(--colorNeutralStroke1); - border-inline-end-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStroke1); - border-inline-start-color: var(--colorNeutralStroke1); + border-top-color: var(--color-neutral-stroke-1); + border-inline-end-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-1); + border-inline-start-color: var(--color-neutral-stroke-1); } .brand { - background-color: var(--colorBrandBackground2); - color: var(--colorBrandForeground2); + background-color: var(--color-brand-background-2); + color: var(--color-brand-foreground-2); } /* @@ -238,37 +238,37 @@ .filled-disabled, .brand-disabled { cursor: not-allowed; - background-color: var(--colorNeutralBackgroundDisabled); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-neutral-background-disabled); + color: var(--color-neutral-foreground-disabled); - border-top-color: var(--colorTransparentStrokeDisabled); - border-inline-end-color: var(--colorTransparentStrokeDisabled); - border-bottom-color: var(--colorTransparentStrokeDisabled); - border-inline-start-color: var(--colorTransparentStrokeDisabled); + border-top-color: var(--color-transparent-stroke-disabled); + border-inline-end-color: var(--color-transparent-stroke-disabled); + border-bottom-color: var(--color-transparent-stroke-disabled); + border-inline-start-color: var(--color-transparent-stroke-disabled); } .outline-disabled { cursor: not-allowed; - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForegroundDisabled); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-disabled); - border-top-color: var(--colorNeutralStrokeDisabled); - border-inline-end-color: var(--colorNeutralStrokeDisabled); - border-bottom-color: var(--colorNeutralStrokeDisabled); - border-inline-start-color: var(--colorNeutralStrokeDisabled); + border-top-color: var(--color-neutral-stroke-disabled); + border-inline-end-color: var(--color-neutral-stroke-disabled); + border-bottom-color: var(--color-neutral-stroke-disabled); + border-inline-start-color: var(--color-neutral-stroke-disabled); } } @layer fui.components.l1 { /* from useRootStyles.selected — root arg #4, written after the appearance blocks */ .selected { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-on-brand); - border-top-color: var(--colorBrandStroke1); - border-inline-end-color: var(--colorBrandStroke1); - border-bottom-color: var(--colorBrandStroke1); - border-inline-start-color: var(--colorBrandStroke1); + border-top-color: var(--color-brand-stroke-1); + border-inline-end-color: var(--color-brand-stroke-1); + border-bottom-color: var(--color-brand-stroke-1); + border-inline-start-color: var(--color-brand-stroke-1); @variant forced-colors { forced-color-adjust: none; @@ -414,25 +414,25 @@ /* typographyStyles.body1 */ @variant size-medium { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* typographyStyles.caption1 */ @variant size-small { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } @variant size-extra-small { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } @@ -456,10 +456,10 @@ grid-area: primary; /* typographyStyles.caption1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); /* compiled `margin-top:-2px`; the literal matches the XXS step, and the block axis takes the vertical token (react-persona precedent) */ @@ -504,22 +504,22 @@ .dismiss-icon-interactive { @variant hover { cursor: pointer; - color: var(--colorCompoundBrandForeground1Hover); + color: var(--color-compound-brand-foreground-1-hover); } @variant active { - color: var(--colorCompoundBrandForeground1Pressed); + color: var(--color-compound-brand-foreground-1-pressed); } } /* from useDismissIconStyles.selected — dismissIcon arg #5; beats the block above */ .dismiss-icon-selected { @variant hover { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } @variant active { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css index b37c06a868f251..40a12534af3a3a 100644 --- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css +++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.module.css @@ -10,7 +10,7 @@ * escaped because it is legal in a class TOKEN but terminates the name in selector * position. Original source nested this under the menu item's :hover. */ .menuItem:hover .group\/fui-tag { - color: var(--colorNeutralForeground2Hover); + color: var(--color-neutral-foreground-2-hover); } .tag { diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.module.css index 6ad60199b2a098..a1b9aec5579567 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.module.css @@ -103,31 +103,31 @@ * widening it would newly paint the pressed look on a keyboard-activated button. */ .brand-previous { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); - border-block-start-color: var(--colorNeutralForegroundOnBrand); - border-inline-end-color: var(--colorNeutralForegroundOnBrand); - border-block-end-color: var(--colorNeutralForegroundOnBrand); - border-inline-start-color: var(--colorNeutralForegroundOnBrand); + border-block-start-color: var(--color-neutral-foreground-on-brand); + border-inline-end-color: var(--color-neutral-foreground-on-brand); + border-block-end-color: var(--color-neutral-foreground-on-brand); + border-inline-start-color: var(--color-neutral-foreground-on-brand); @variant hover { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackgroundHover); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background-hover); - border-block-start-color: var(--colorNeutralForegroundOnBrand); - border-inline-end-color: var(--colorNeutralForegroundOnBrand); - border-block-end-color: var(--colorNeutralForegroundOnBrand); - border-inline-start-color: var(--colorNeutralForegroundOnBrand); + border-block-start-color: var(--color-neutral-foreground-on-brand); + border-inline-end-color: var(--color-neutral-foreground-on-brand); + border-block-end-color: var(--color-neutral-foreground-on-brand); + border-inline-start-color: var(--color-neutral-foreground-on-brand); @variant active { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackgroundPressed); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background-pressed); - border-block-start-color: var(--colorNeutralForegroundOnBrand); - border-inline-end-color: var(--colorNeutralForegroundOnBrand); - border-block-end-color: var(--colorNeutralForegroundOnBrand); - border-inline-start-color: var(--colorNeutralForegroundOnBrand); + border-block-start-color: var(--color-neutral-foreground-on-brand); + border-inline-end-color: var(--color-neutral-foreground-on-brand); + border-block-end-color: var(--color-neutral-foreground-on-brand); + border-inline-start-color: var(--color-neutral-foreground-on-brand); } } } @@ -139,21 +139,21 @@ * Mutually exclusive with `.brand-previous` above; see the header's inversion note. */ .brand-next { - color: var(--colorBrandForeground1); - background-color: var(--colorNeutralForegroundOnBrand); + color: var(--color-brand-foreground-1); + background-color: var(--color-neutral-foreground-on-brand); - border-block-start-color: var(--colorTransparentBackground); - border-inline-end-color: var(--colorTransparentBackground); - border-block-end-color: var(--colorTransparentBackground); - border-inline-start-color: var(--colorTransparentBackground); + border-block-start-color: var(--color-transparent-background); + border-inline-end-color: var(--color-transparent-background); + border-block-end-color: var(--color-transparent-background); + border-inline-start-color: var(--color-transparent-background); @variant hover { - color: var(--colorCompoundBrandForeground1Hover); - background-color: var(--colorNeutralForegroundOnBrand); + color: var(--color-compound-brand-foreground-1-hover); + background-color: var(--color-neutral-foreground-on-brand); @variant active { - color: var(--colorCompoundBrandForeground1Pressed); - background-color: var(--colorNeutralForegroundOnBrand); + color: var(--color-compound-brand-foreground-1-pressed); + background-color: var(--color-neutral-foreground-on-brand); } } } diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css index dd7e1576f58a95..0cc54ff5ee9ab9 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.module.css @@ -69,8 +69,8 @@ /* from createCustomFocusIndicatorStyle({ outline, borderRadius, borderColor('transparent') }) */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); border-block-start-color: transparent; border-inline-end-color: transparent; diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.module.css index dd0e1e65bb278f..97d1ebef1caf8c 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverCarouselNavButton/TeachingPopoverCarouselNavButton.module.css @@ -114,7 +114,7 @@ @apply box-border flex cursor-pointer; @apply h-vertical-s w-horizontal-s; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); } } @@ -142,11 +142,11 @@ padding: 0; outline: var(--spacing-thin) solid transparent; - background-color: color-mix(in srgb, var(--colorBrandBackground) 30%, transparent); + background-color: color-mix(in srgb, var(--color-brand-background) 30%, transparent); @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); border-block-start-color: transparent; border-inline-end-color: transparent; @@ -165,8 +165,8 @@ padding: 0; @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); border-block-start-color: transparent; border-inline-end-color: transparent; @@ -186,11 +186,11 @@ */ .brand { @variant selected { - background-color: var(--colorNeutralForegroundOnBrand); + background-color: var(--color-neutral-foreground-on-brand); } @variant not-selected { - background-color: color-mix(in srgb, var(--colorNeutralForegroundOnBrand) 30%, transparent); + background-color: color-mix(in srgb, var(--color-neutral-foreground-on-brand) 30%, transparent); } } } @@ -214,7 +214,7 @@ @variant not-selected { @supports not (color: color-mix(in lch, white, black)) { opacity: 0.3; - background-color: var(--colorBrandBackground); + background-color: var(--color-brand-background); } } } diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.module.css index 2ead513b516c21..9531001537001c 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverFooter/TeachingPopoverFooter.module.css @@ -139,10 +139,10 @@ * (cookbook), with the right/left pair written logically because Griffel flipped it in RTL. */ .brand-secondary { - border-block-start-color: var(--colorNeutralForegroundOnBrand); - border-inline-end-color: var(--colorNeutralForegroundOnBrand); - border-block-end-color: var(--colorNeutralForegroundOnBrand); - border-inline-start-color: var(--colorNeutralForegroundOnBrand); + border-block-start-color: var(--color-neutral-foreground-on-brand); + border-inline-end-color: var(--color-neutral-foreground-on-brand); + border-block-end-color: var(--color-neutral-foreground-on-brand); + border-inline-start-color: var(--color-neutral-foreground-on-brand); } } @@ -157,16 +157,16 @@ * and widening it would newly paint the pressed look on a keyboard-activated button. */ .brand-primary { - color: var(--colorBrandForeground1); - background-color: var(--colorNeutralForegroundOnBrand); + color: var(--color-brand-foreground-1); + background-color: var(--color-neutral-foreground-on-brand); @variant hover { - color: var(--colorCompoundBrandForeground1Hover); - background-color: var(--colorNeutralForegroundOnBrand); + color: var(--color-compound-brand-foreground-1-hover); + background-color: var(--color-neutral-foreground-on-brand); @variant active { - color: var(--colorCompoundBrandForeground1Pressed); - background-color: var(--colorNeutralForegroundOnBrand); + color: var(--color-compound-brand-foreground-1-pressed); + background-color: var(--color-neutral-foreground-on-brand); } } } diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.module.css index b864db69fa31a3..6032c2facf5d1a 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverHeader/TeachingPopoverHeader.module.css @@ -85,10 +85,10 @@ .root { @apply flex flex-row items-center; - color: var(--colorNeutralForeground3); - font-weight: var(--fontWeightSemibold); - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); + color: var(--color-neutral-foreground-3); + font-weight: var(--font-weight-semibold); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); @apply pb-vertical-xs; @apply mt-horizontal-none mb-horizontal-none; @@ -98,7 +98,7 @@ @layer fui.components.l1 { /* from useStyles.rootBrand — root arg #3 */ .brand { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } @@ -107,21 +107,21 @@ .dismiss-button { @apply box-border flex cursor-pointer items-center; - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); position: relative; - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); /* ...typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); - border-start-end-radius: var(--borderRadiusNone); - border-end-end-radius: var(--borderRadiusNone); + border-start-end-radius: var(--radius-none); + border-end-end-radius: var(--radius-none); border-inline-end-style: none; @apply ms-auto; @@ -129,8 +129,8 @@ /* from createCustomFocusIndicatorStyle({ outline, borderRadius, borderColor('transparent') }) */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); border-block-start-color: transparent; border-inline-end-color: transparent; @@ -143,7 +143,7 @@ @layer fui.components.l1 { /* from useStyles.dismissBrand — dismissButton arg #3 */ .dismiss-brand { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } @@ -152,17 +152,17 @@ .icon { @apply box-content inline-flex items-center justify-center; - height: var(--fontSizeBase200); - width: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); - font-size: var(--fontSizeBase200); + height: var(--text-base-200); + width: var(--text-base-200); + line-height: var(--leading-base-200); + font-size: var(--text-base-200); text-decoration-line: none; vertical-align: middle; position: relative; - background-color: var(--colorTransparentBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-transparent-background); + color: var(--color-neutral-foreground-2); @apply me-horizontal-xs; } @@ -171,6 +171,6 @@ @layer fui.components.l1 { /* from useStyles.iconBrand — icon arg #3 */ .icon-brand { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css index bd0b553bfffb6f..a84cbe3cfd3f67 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverSurface/TeachingPopoverSurface.module.css @@ -71,6 +71,6 @@ @apply p-vertical-l; @apply min-w-320; - border-radius: var(--borderRadiusXLarge); + border-radius: var(--radius-x-large); } } diff --git a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.module.css b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.module.css index 9b28b78d67cc7e..72269096fe836e 100644 --- a/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.module.css +++ b/packages/react-components/react-teaching-popover/library/src/components/TeachingPopoverTitle/TeachingPopoverTitle.module.css @@ -71,10 +71,10 @@ .root { @apply flex flex-row justify-between; - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - color: var(--colorNeutralForeground1); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + color: var(--color-neutral-foreground-1); + line-height: var(--leading-base-400); @apply pb-vertical-s; @apply mt-horizontal-none mb-horizontal-none; @@ -84,7 +84,7 @@ @layer fui.components.l1 { /* from useStyles.rootBrand — root arg #3 */ .brand { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } @@ -95,26 +95,26 @@ position: relative; - border: var(--spacing-thin) solid var(--colorTransparentStroke); + border: var(--spacing-thin) solid var(--color-transparent-stroke); /* ...typographyStyles.body1 */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); - border-start-end-radius: var(--borderRadiusNone); - border-end-end-radius: var(--borderRadiusNone); + border-start-end-radius: var(--radius-none); + border-end-end-radius: var(--radius-none); border-inline-end-style: none; @apply ms-auto; /* from createCustomFocusIndicatorStyle({ outline, borderRadius, borderColor('transparent') }) */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); - border-radius: var(--borderRadiusMedium); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); + border-radius: var(--radius-medium); border-block-start-color: transparent; border-inline-end-color: transparent; @@ -127,6 +127,6 @@ @layer fui.components.l1 { /* from useStyles.dismissBrand — dismissButton arg #3 */ .dismiss-brand { - color: var(--colorNeutralForegroundOnBrand); + color: var(--color-neutral-foreground-on-brand); } } diff --git a/packages/react-components/react-text/library/docs/MIGRATION.md b/packages/react-components/react-text/library/docs/MIGRATION.md index 211585889c4773..caee96be5f7be8 100644 --- a/packages/react-components/react-text/library/docs/MIGRATION.md +++ b/packages/react-components/react-text/library/docs/MIGRATION.md @@ -13,7 +13,7 @@ This guide is a reference for upgrading from v7 (Fabric) or v0 (Northstar) into > ```css > /* MyText.module.css */ > .text { -> color: var(--colorNeutralForeground2); +> color: var(--color-neutral-foreground-2); > } > ``` > @@ -24,7 +24,7 @@ This guide is a reference for upgrading from v7 (Fabric) or v0 (Northstar) into > ``` > > Token names are unchanged — `tokens.colorNeutralForeground2` in a snippet below is the same value -> as `var(--colorNeutralForeground2)` here. See +> as `var(--color-neutral-foreground-2)` here. See > [Styling components](https://react.fluentui.dev/?path=/docs/concepts-developer-styling-components--docs). ## Property mapping diff --git a/packages/react-components/react-text/library/docs/Spec.md b/packages/react-components/react-text/library/docs/Spec.md index cd6f15c5056f89..4731860b77a41a 100644 --- a/packages/react-components/react-text/library/docs/Spec.md +++ b/packages/react-components/react-text/library/docs/Spec.md @@ -116,17 +116,17 @@ do internally: ```css /* Test.module.css */ .root { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero800); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero800); + font-family: var(--font-base); + font-size: var(--text-hero-800); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-800); } .caption { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } ``` diff --git a/packages/react-components/react-text/library/src/components/Text/Text.module.css b/packages/react-components/react-text/library/src/components/Text/Text.module.css index ae2c00035902d3..1c5f885f80dcf3 100644 --- a/packages/react-components/react-text/library/src/components/Text/Text.module.css +++ b/packages/react-components/react-text/library/src/components/Text/Text.module.css @@ -78,10 +78,10 @@ */ display: inline; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* @@ -139,74 +139,74 @@ */ .root { @variant size-100 { - font-size: var(--fontSizeBase100); - line-height: var(--lineHeightBase100); + font-size: var(--text-base-100); + line-height: var(--leading-base-100); } @variant size-200 { - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); } @variant size-400 { - font-size: var(--fontSizeBase400); - line-height: var(--lineHeightBase400); + font-size: var(--text-base-400); + line-height: var(--leading-base-400); } @variant size-500 { - font-size: var(--fontSizeBase500); - line-height: var(--lineHeightBase500); + font-size: var(--text-base-500); + line-height: var(--leading-base-500); } @variant size-600 { - font-size: var(--fontSizeBase600); - line-height: var(--lineHeightBase600); + font-size: var(--text-base-600); + line-height: var(--leading-base-600); } @variant size-700 { - font-size: var(--fontSizeHero700); - line-height: var(--lineHeightHero700); + font-size: var(--text-hero-700); + line-height: var(--leading-hero-700); } @variant size-800 { - font-size: var(--fontSizeHero800); - line-height: var(--lineHeightHero800); + font-size: var(--text-hero-800); + line-height: var(--leading-hero-800); } @variant size-900 { - font-size: var(--fontSizeHero900); - line-height: var(--lineHeightHero900); + font-size: var(--text-hero-900); + line-height: var(--leading-hero-900); } @variant size-1000 { - font-size: var(--fontSizeHero1000); - line-height: var(--lineHeightHero1000); + font-size: var(--text-hero-1000); + line-height: var(--leading-hero-1000); } } /* from useStyles.monospace */ .monospace { - font-family: var(--fontFamilyMonospace); + font-family: var(--font-monospace); } /* from useStyles.numeric */ .numeric { - font-family: var(--fontFamilyNumeric); + font-family: var(--font-numeric); } /* from useStyles.weightMedium */ .medium { - font-weight: var(--fontWeightMedium); + font-weight: var(--font-weight-medium); } /* from useStyles.weightSemibold */ .semibold { - font-weight: var(--fontWeightSemibold); + font-weight: var(--font-weight-semibold); } /* from useStyles.weightBold */ .bold { - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); } /* from useStyles.alignCenter */ diff --git a/packages/react-components/react-text/library/src/components/presets/presets.module.css b/packages/react-components/react-text/library/src/components/presets/presets.module.css index bbfc2c26b28ad1..aee44389b729df 100644 --- a/packages/react-components/react-text/library/src/components/presets/presets.module.css +++ b/packages/react-components/react-text/library/src/components/presets/presets.module.css @@ -32,7 +32,7 @@ * ToggleButton-over-Button shape). That makes it a library COMPOSITION, so it belongs in * `fui.components.l2`, which beats all of `fui.components.l1` regardless of stylesheet * load order. In `fui.components.l1` the winner between `.root`'s `font-size: - * var(--fontSizeBase300)` and `.display`'s `var(--fontSizeHero1000)` would come down to + * var(--text-base-300)` and `.display`'s `var(--text-hero-1000)` would come down to * which file the aggregator emitted first — the exact nondeterminism l2 exists to remove. * * ── Local names ──────────────────────────────────────────────────────────────────── @@ -51,137 +51,137 @@ @layer fui.components.l2 { /* from useBody1Styles.root — typographyStyles.body1 */ .body1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useBody1StrongStyles.root — typographyStyles.body1Strong */ .body1-strong { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } /* from useBody1StrongerStyles.root — typographyStyles.body1Stronger */ .body1-stronger { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-300); } /* from useBody2Styles.root — typographyStyles.body2 */ .body2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); } /* from useCaption1Styles.root — typographyStyles.caption1 */ .caption1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } /* from useCaption1StrongStyles.root — typographyStyles.caption1Strong */ .caption1-strong { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); } /* from useCaption1StrongerStyles.root — typographyStyles.caption1Stronger */ .caption1-stronger { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-200); } /* from useCaption2Styles.root — typographyStyles.caption2 */ .caption2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-100); } /* from useCaption2StrongStyles.root — typographyStyles.caption2Strong */ .caption2-strong { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); } /* from useDisplayStyles.root — typographyStyles.display */ .display { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero1000); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero1000); + font-family: var(--font-base); + font-size: var(--text-hero-1000); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-1000); } /* from useLargeTitleStyles.root — typographyStyles.largeTitle */ .large-title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero900); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero900); + font-family: var(--font-base); + font-size: var(--text-hero-900); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-900); } /* from useSubtitle1Styles.root — typographyStyles.subtitle1 */ .subtitle1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase500); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase500); + font-family: var(--font-base); + font-size: var(--text-base-500); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-500); } /* from useSubtitle2Styles.root — typographyStyles.subtitle2 */ .subtitle2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } /* from useSubtitle2StrongerStyles.root — typographyStyles.subtitle2Stronger */ .subtitle2-stronger { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-400); } /* from useTitle1Styles.root — typographyStyles.title1 */ .title1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero800); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero800); + font-family: var(--font-base); + font-size: var(--text-hero-800); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-800); } /* from useTitle2Styles.root — typographyStyles.title2 */ .title2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } /* from useTitle3Styles.root — typographyStyles.title3 */ .title3 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase600); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase600); + font-family: var(--font-base); + font-size: var(--text-base-600); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-600); } } diff --git a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.module.css b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.module.css index e95958f49c399c..801c8edf24d797 100644 --- a/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.module.css +++ b/packages/react-components/react-textarea/library/src/components/Textarea/Textarea.module.css @@ -82,15 +82,15 @@ padding-block-start: 0; /* spacingVerticalNone */ padding-block-end: var(--spacing-thick); - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* from useRootStyles.disabled — arg #3 */ @variant disabled { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStrokeDisabled); + border-color: var(--color-neutral-stroke-disabled); /* shorthands.borderColor('GrayText') → four longhands; the compiled [ltr, rtl] pair only swaps left↔right and carries the same value, so the flip is a no-op. */ @@ -108,7 +108,7 @@ /* * from useRootStyles.filled — arg #4, applied for every `filled*` appearance. The two * `*-shadow` appearances re-set `border-color` in arg #5 below (to the SAME - * `--colorTransparentStrokeInteractive` these hover/focus rules use), which is why + * `--color-transparent-stroke-interactive` these hover/focus rules use), which is why * Griffel's arg-order override of the `border` shorthand is a visual no-op here. * * Griffel authors one compound rule (`:hover,:focus-within`); two variant blocks with @@ -117,20 +117,20 @@ .filled { border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorTransparentStroke); + border-color: var(--color-transparent-stroke); @variant hover { - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } @variant focus-within { - border-top-color: var(--colorTransparentStrokeInteractive); - border-right-color: var(--colorTransparentStrokeInteractive); - border-bottom-color: var(--colorTransparentStrokeInteractive); - border-left-color: var(--colorTransparentStrokeInteractive); + border-top-color: var(--color-transparent-stroke-interactive); + border-right-color: var(--color-transparent-stroke-interactive); + border-bottom-color: var(--color-transparent-stroke-interactive); + border-left-color: var(--color-transparent-stroke-interactive); } } } @@ -140,44 +140,44 @@ /* from useRootStyles['filled-darker'] */ .filled-darker { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } /* from useRootStyles['filled-lighter'] */ .filled-lighter { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); } /* from useRootStyles['filled-darker-shadow'] (deprecated appearance) */ .filled-darker-shadow { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorTransparentStrokeInteractive); + border-color: var(--color-transparent-stroke-interactive); - box-shadow: var(--shadow2); + box-shadow: var(--shadow-2); } /* from useRootStyles['filled-lighter-shadow'] (deprecated appearance) */ .filled-lighter-shadow { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorTransparentStrokeInteractive); + border-color: var(--color-transparent-stroke-interactive); - box-shadow: var(--shadow2); + box-shadow: var(--shadow-2); } /* from useRootStyles.outline */ .outline { - background-color: var(--colorNeutralBackground1); + background-color: var(--color-neutral-background-1); border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStroke1); - border-bottom-color: var(--colorNeutralStrokeAccessible); + border-color: var(--color-neutral-stroke-1); + border-bottom-color: var(--color-neutral-stroke-accessible); } } @@ -204,27 +204,27 @@ /* Maintaining the correct corner radius: the whole border-radius is used as the height and only the bottom corners get radii, so the radius is not reduced to - fit. max() keeps the bar visible even at --borderRadiusMedium: 0. */ - height: max(var(--spacing-thick), var(--borderRadiusMedium)); + fit. max() keeps the bar visible even at --radius-medium: 0. */ + height: max(var(--spacing-thick), var(--radius-medium)); /* borderBottomLeft/RightRadius → logical block-end corners (compiled [ltr, rtl] pair, same value both ways). */ - border-end-start-radius: var(--borderRadiusMedium); - border-end-end-radius: var(--borderRadiusMedium); + border-end-start-radius: var(--radius-medium); + border-end-end-radius: var(--radius-medium); /* Flat 2px border: borderBottom alone would leave little "horns" on the ends; the clipPath trims them. `inset()` right/left are both 0 → no RTL flip. */ border-bottom-width: var(--spacing-thick); border-bottom-style: solid; - border-bottom-color: var(--colorCompoundBrandStroke); + border-bottom-color: var(--color-compound-brand-stroke); clip-path: inset(calc(100% - var(--spacing-thick)) 0 0 0); - /* Animation for focus OUT. `transition-delay: var(--curveAccelerateMid)` is a + /* Animation for focus OUT. `transition-delay: var(--ease-accelerate-mid)` is a curve token used as a delay — reproduced verbatim from the compiled output. */ transform: scaleX(0); transition-property: transform; - transition-duration: var(--durationUltraFast); - transition-delay: var(--curveAccelerateMid); + transition-duration: var(--duration-ultra-fast); + transition-delay: var(--ease-accelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -241,8 +241,8 @@ &::after { transform: scaleX(1); transition-property: transform; - transition-duration: var(--durationNormal); - transition-delay: var(--curveDecelerateMid); + transition-duration: var(--duration-normal); + transition-delay: var(--ease-decelerate-mid); @media screen and (prefers-reduced-motion: reduce) { transition-duration: 0.01ms; @@ -253,7 +253,7 @@ /* The user clicks the field again while it is already focused */ @variant active { &::after { - border-bottom-color: var(--colorCompoundBrandStrokePressed); + border-bottom-color: var(--color-compound-brand-stroke-pressed); } } } @@ -275,22 +275,22 @@ @variant focus-within { border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorCompoundBrandStroke); + border-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-compound-brand-stroke); } @variant hover { border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStroke1Hover); - border-bottom-color: var(--colorNeutralStrokeAccessibleHover); + border-color: var(--color-neutral-stroke-1-hover); + border-bottom-color: var(--color-neutral-stroke-accessible-hover); } @variant active { border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStroke1Pressed); - border-bottom-color: var(--colorNeutralStrokeAccessiblePressed); + border-color: var(--color-neutral-stroke-1-pressed); + border-bottom-color: var(--color-neutral-stroke-accessible-pressed); } } } @@ -304,10 +304,10 @@ */ @variant invalid { @variant not-focus-within { - border-top-color: var(--colorPaletteRedBorder2); - border-right-color: var(--colorPaletteRedBorder2); - border-bottom-color: var(--colorPaletteRedBorder2); - border-left-color: var(--colorPaletteRedBorder2); + border-top-color: var(--color-palette-red-border-2); + border-right-color: var(--color-palette-red-border-2); + border-bottom-color: var(--color-palette-red-border-2); + border-left-color: var(--color-palette-red-border-2); } } } @@ -326,14 +326,14 @@ border-inline-start-style: none; background-color: transparent; - color: var(--colorNeutralForeground1); - font-family: var(--fontFamilyBase); + color: var(--color-neutral-foreground-1); + font-family: var(--font-base); /* disable the default browser outline */ outline-style: none; &::placeholder { - color: var(--colorNeutralForeground4); + color: var(--color-neutral-foreground-4); opacity: 1; } @@ -353,10 +353,10 @@ `horizontalPadding.combined.small`. */ @apply px-horizontal-s py-vertical-xs; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } /* from useTextareaStyles.medium + typographyStyles.body1 */ @@ -368,10 +368,10 @@ `horizontalPadding.combined.medium` records the same identity). */ @apply px-horizontal-m py-vertical-s-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } /* from useTextareaStyles.large + typographyStyles.body2 */ @@ -384,10 +384,10 @@ `calc(1px * var(--base-scale))`, so px-14 === calc(14px * var(--base-scale))). */ @apply px-14 py-vertical-s; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); } } } @@ -425,11 +425,11 @@ * `disabled` attribute the textarea slot already carries. */ @variant disabled { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); cursor: not-allowed; &::placeholder { - color: var(--colorNeutralForegroundDisabled); + color: var(--color-neutral-foreground-disabled); } } } diff --git a/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css b/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css index 8679845e80ab9c..72e75acf159eb2 100644 --- a/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css +++ b/packages/react-components/react-textarea/stories/src/Textarea/TextareaAppearance.module.css @@ -8,11 +8,11 @@ } .inverted { - background-color: var(--colorNeutralBackgroundInverted); + background-color: var(--color-neutral-background-inverted); } .invertedLabel { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .fieldWrapper { diff --git a/packages/react-components/react-theme/library/README.md b/packages/react-components/react-theme/library/README.md index ef757b89d54c2b..1222414b6155de 100644 --- a/packages/react-components/react-theme/library/README.md +++ b/packages/react-components/react-theme/library/README.md @@ -22,12 +22,12 @@ Tokens are emitted as CSS custom properties, so reference them directly in your ```css .root { - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } ``` The `tokens` object is the TypeScript-side equivalent, for when a value has to be read from code — -`tokens.colorNeutralForeground1 === 'var(--colorNeutralForeground1)'`. +`tokens.colorNeutralForeground1 === 'var(--color-neutral-foreground-1)'`. ### Using a custom brand ramp diff --git a/packages/react-components/react-theme/stories/src/Theme/typography/Composing.module.css b/packages/react-components/react-theme/stories/src/Theme/typography/Composing.module.css index 350ffe2561b5f9..1455b4f877f859 100644 --- a/packages/react-components/react-theme/stories/src/Theme/typography/Composing.module.css +++ b/packages/react-components/react-theme/stories/src/Theme/typography/Composing.module.css @@ -2,8 +2,8 @@ * Token references are the Fluent theme's CSS variables. */ .text { - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase600); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase600); + font-family: var(--font-monospace); + font-size: var(--text-base-600); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-600); } diff --git a/packages/react-components/react-theme/stories/src/Theme/typography/Example.module.css b/packages/react-components/react-theme/stories/src/Theme/typography/Example.module.css index be9804c6e276cb..413c116e3205b3 100644 --- a/packages/react-components/react-theme/stories/src/Theme/typography/Example.module.css +++ b/packages/react-components/react-theme/stories/src/Theme/typography/Example.module.css @@ -2,8 +2,8 @@ * Token references are the Fluent theme's CSS variables. */ .text { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } diff --git a/packages/react-components/react-theme/stories/src/Theme/typography/MixedStyles.module.css b/packages/react-components/react-theme/stories/src/Theme/typography/MixedStyles.module.css index 91ea638023d50f..6950ab1494518d 100644 --- a/packages/react-components/react-theme/stories/src/Theme/typography/MixedStyles.module.css +++ b/packages/react-components/react-theme/stories/src/Theme/typography/MixedStyles.module.css @@ -2,17 +2,17 @@ * Token references are the Fluent theme's CSS variables. */ .title { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } .paragraph { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); letter-spacing: 0.0675em; font-style: italic; } diff --git a/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.module.css b/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.module.css index 654498f0d44b3a..54020b54703fc7 100644 --- a/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.module.css +++ b/packages/react-components/react-theme/stories/src/Theme/typography/ThemeTypography.module.css @@ -17,120 +17,120 @@ } .body1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } .body1Strong { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-300); } .body1Stronger { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-300); } .body2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-400); } .caption1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } .caption1Strong { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-200); } .caption1Stronger { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-200); } .caption2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-100); } .caption2Strong { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase100); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase100); + font-family: var(--font-base); + font-size: var(--text-base-100); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-100); } .subtitle1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase500); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase500); + font-family: var(--font-base); + font-size: var(--text-base-500); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-500); } .subtitle2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-400); } .subtitle2Stronger { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase400); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase400); + font-family: var(--font-base); + font-size: var(--text-base-400); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-400); } .title1 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero800); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero800); + font-family: var(--font-base); + font-size: var(--text-hero-800); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-800); } .title2 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } .title3 { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase600); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase600); + font-family: var(--font-base); + font-size: var(--text-base-600); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-base-600); } .largeTitle { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero900); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero900); + font-family: var(--font-base); + font-size: var(--text-hero-900); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-900); } .display { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero1000); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero1000); + font-family: var(--font-base); + font-size: var(--text-hero-1000); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-1000); } diff --git a/packages/react-components/react-theme/stories/src/Theme/typography/index.mdx b/packages/react-components/react-theme/stories/src/Theme/typography/index.mdx index 64cd4ab26d9781..5ba42224367a15 100644 --- a/packages/react-components/react-theme/stories/src/Theme/typography/index.mdx +++ b/packages/react-components/react-theme/stories/src/Theme/typography/index.mdx @@ -28,10 +28,10 @@ do internally: ```css /* Example.module.css */ .text { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } ``` @@ -56,10 +56,10 @@ Besides using a full typography ramp, you can still compose individual typograph ```css /* Composing.module.css */ .text { - font-family: var(--fontFamilyMonospace); - font-size: var(--fontSizeBase600); - font-weight: var(--fontWeightBold); - line-height: var(--lineHeightBase600); + font-family: var(--font-monospace); + font-size: var(--text-base-600); + font-weight: var(--font-weight-bold); + line-height: var(--leading-base-600); } ``` @@ -84,18 +84,18 @@ CSS properties next to them: /* MixedStyles.module.css */ .title { /* Title 2 ramp */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeHero700); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightHero700); + font-family: var(--font-base); + font-size: var(--text-hero-700); + font-weight: var(--font-weight-semibold); + line-height: var(--leading-hero-700); } .paragraph { /* Body 1 ramp */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); /* custom additions */ letter-spacing: 0.0675em; font-style: italic; diff --git a/packages/react-components/react-toast/library/src/components/Toast/Toast.module.css b/packages/react-components/react-toast/library/src/components/Toast/Toast.module.css index 8a9e33f2a4fee8..f35c35c708e89d 100644 --- a/packages/react-components/react-toast/library/src/components/Toast/Toast.module.css +++ b/packages/react-components/react-toast/library/src/components/Toast/Toast.module.css @@ -67,16 +67,16 @@ grid-template-columns: auto 1fr auto; - border: var(--spacing-thin) solid var(--colorTransparentStroke); - border-radius: var(--borderRadiusMedium); - box-shadow: var(--shadow8); + border: var(--spacing-thin) solid var(--color-transparent-stroke); + border-radius: var(--radius-medium); + box-shadow: var(--shadow-8); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); + font-size: var(--text-base-300); + font-weight: var(--font-weight-semibold); line-height: calc(20px * var(--base-scale)); - color: var(--colorNeutralForeground1); - background-color: var(--colorNeutralBackground1); + color: var(--color-neutral-foreground-1); + background-color: var(--color-neutral-background-1); } } @@ -88,7 +88,7 @@ * keeps data attributes to the cases a class cannot express. */ .inverted { - color: var(--colorNeutralForegroundInverted2); - background-color: var(--colorNeutralBackgroundInverted); + color: var(--color-neutral-foreground-inverted-2); + background-color: var(--color-neutral-background-inverted); } } diff --git a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.module.css b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.module.css index b4f6fdb20fb121..5403c822cab9c7 100644 --- a/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.module.css +++ b/packages/react-components/react-toast/library/src/components/ToastBody/ToastBody.module.css @@ -55,9 +55,9 @@ * the `vertical` axis. * * ── Reproduced verbatim, including one oddity ─────────────────────────────────────── - * The subtitle's `line-height` reads `--fontSizeBase200`, NOT `--lineHeightBase200`. That is + * The subtitle's `line-height` reads `--text-base-200`, NOT `--leading-base-200`. That is * what the source declares and what the compiled atomic emits - * (`.rzjw1xk{…line-height:var(--fontSizeBase200);…}`); it is reproduced rather than + * (`.rzjw1xk{…line-height:var(--text-base-200);…}`); it is reproduced rather than * "corrected", per the cookbook's rule to reproduce the COMPILED values. * * Verified against the compiled Griffel atomics in @@ -72,10 +72,10 @@ grid-column-start: 2; grid-column-end: 3; - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); - color: var(--colorNeutralForeground1); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); + color: var(--color-neutral-foreground-1); /* Tailwind's `break-words` is `overflow-wrap: break-word`, a DIFFERENT property — the compiled atomic sets `word-break`, so this stays a literal declaration. */ @@ -89,11 +89,11 @@ grid-column-start: 2; grid-column-end: 3; - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); /* see the header note — the source really does use the FONT SIZE token here */ - line-height: var(--fontSizeBase200); - color: var(--colorNeutralForeground2); + line-height: var(--text-base-200); + color: var(--color-neutral-foreground-2); } } @@ -107,10 +107,10 @@ * separate Griffel slices (which happen to carry the same colour). */ .root-inverted { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } .subtitle-inverted { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } } diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css index 1379c21a0ff3f0..ac2e44288ce8c9 100644 --- a/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css +++ b/packages/react-components/react-toast/library/src/components/ToastContainer/ToastContainer.module.css @@ -49,7 +49,7 @@ * The source spreads `createCustomFocusIndicatorStyle({ outline: … })` into the reset. That * helper compiles to a plain `[data-fui-focus-visible]` rule — the AOT output is literally * - * .r98b696[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid var(--colorStrokeFocus2);} + * .r98b696[data-fui-focus-visible]{outline:var(--stroke-width-thick) solid var(--color-stroke-focus-2);} * * — i.e. a bespoke one-declaration outline, NOT `createFocusOutlineStyle` and NOT the * Button-family ring. So neither shared utility (`fui-focus-outline`, `fui-focus-ring`) @@ -80,7 +80,7 @@ .root { @apply mt-vertical-l box-border; - border-radius: var(--borderRadiusMedium); + border-radius: var(--radius-medium); /* Tailwind's `pointer-events-auto` emits `auto`, not `all` — the compiled atomic says `all`, so this stays a literal declaration. */ @@ -88,7 +88,7 @@ /* from the createCustomFocusIndicatorStyle spread inside the same reset — see header */ @variant focus-visible-fui { - outline: var(--spacing-thick) solid var(--colorStrokeFocus2); + outline: var(--spacing-thick) solid var(--color-stroke-focus-2); } } } diff --git a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.module.css b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.module.css index 0acd0ed1ea9bc4..ba74787ed358cf 100644 --- a/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.module.css +++ b/packages/react-components/react-toast/library/src/components/ToastTitle/ToastTitle.module.css @@ -97,7 +97,7 @@ grid-column-end: 3; - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); /* Tailwind's `break-words` is `overflow-wrap: break-word`, a DIFFERENT property — the compiled atomic sets `word-break`, so this stays a literal declaration. */ @@ -111,7 +111,7 @@ grid-column-end: 2; font-size: calc(16px * var(--base-scale)); - color: var(--colorNeutralForeground1); + color: var(--color-neutral-foreground-1); } /* from useActionBaseClassName (makeResetStyles) — action arg #2 */ @@ -126,36 +126,36 @@ grid-column-end: -1; - color: var(--colorBrandForeground1); + color: var(--color-brand-foreground-1); } } @layer fui.components.l1 { /* from useInvertedStyles.root — root arg #3 */ .root-inverted { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } /* from useInvertedStyles.media — media arg #3 */ .media-inverted { - color: var(--colorNeutralForegroundInverted); + color: var(--color-neutral-foreground-inverted); } /* from useIntentIconStyles[intent] — media arg #4. MUST stay after `.media-inverted`. */ .media-success { - color: var(--colorStatusSuccessForeground1); + color: var(--color-status-success-foreground-1); } .media-error { - color: var(--colorStatusDangerForeground1); + color: var(--color-status-danger-foreground-1); } .media-warning { - color: var(--colorStatusWarningForeground1); + color: var(--color-status-warning-foreground-1); } .media-info { - color: var(--colorNeutralForeground2); + color: var(--color-neutral-foreground-2); } /* @@ -164,23 +164,23 @@ * both classes are present whenever a toast is inverted AND carries an intent. */ .media-inverted-success { - color: var(--colorStatusSuccessForegroundInverted); + color: var(--color-status-success-foreground-inverted); } .media-inverted-error { - color: var(--colorStatusDangerForegroundInverted); + color: var(--color-status-danger-foreground-inverted); } .media-inverted-warning { - color: var(--colorStatusWarningForegroundInverted); + color: var(--color-status-warning-foreground-inverted); } .media-inverted-info { - color: var(--colorNeutralForegroundInverted2); + color: var(--color-neutral-foreground-inverted-2); } /* from useInvertedStyles.action — action arg #3 */ .action-inverted { - color: var(--colorBrandForegroundInverted); + color: var(--color-brand-foreground-inverted); } } diff --git a/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.module.css b/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.module.css index 4da69f273efd4f..0f28509ea65703 100644 --- a/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.module.css +++ b/packages/react-components/react-toast/stories/src/Toast/ToastLifecycle.module.css @@ -16,19 +16,19 @@ } .logLabel { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); + color: var(--color-neutral-foreground-on-brand); + background-color: var(--color-brand-background); width: fit-content; - font-weight: var(--fontWeightBold); + font-weight: var(--font-weight-bold); padding: 2px 12px; } .log { overflow-y: auto; - box-shadow: var(--shadow16); + box-shadow: var(--shadow-16); position: relative; min-width: 200px; height: 200px; - border: 2px solid var(--colorBrandBackground); + border: 2px solid var(--color-brand-background); padding: 12px; } diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.module.css b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.module.css index 90f61347dd866b..fbb767353e93f7 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.module.css +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/ToolbarRadioButton.module.css @@ -34,13 +34,13 @@ Radio selected state" */ .selected:global(.group\/fui-toggle-button) { @variant at-rest { - background-color: var(--colorSubtleBackgroundSelected); - color: var(--colorNeutralForeground2Selected); + background-color: var(--color-subtle-background-selected); + color: var(--color-neutral-foreground-2-selected); } } /* from useBaseStyles.iconSelected */ .icon-selected { - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } } diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.module.css b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.module.css index 43f9e4bfc0781b..0356812a323b2e 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.module.css +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/ToolbarToggleButton.module.css @@ -81,13 +81,13 @@ */ .selected:global(.group\/fui-toggle-button) { @variant at-rest { - background-color: var(--colorSubtleBackgroundSelected); - color: var(--colorNeutralForeground2Selected); + background-color: var(--color-subtle-background-selected); + color: var(--color-neutral-foreground-2-selected); } } /* from useBaseStyles.iconSelected */ .icon-selected { - color: var(--colorNeutralForeground2BrandSelected); + color: var(--color-neutral-foreground-2-brand-selected); } } diff --git a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.module.css b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.module.css index 34505275665641..72df2c2b9eec79 100644 --- a/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.module.css +++ b/packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.module.css @@ -63,30 +63,31 @@ are one system (`--spacing` is `calc(1px * var(--base-scale))`). */ @apply px-11 pt-vertical-xs pb-vertical-s-nudge; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + line-height: var(--leading-base-200); /* Kept as the compiled shorthands (`.ft85np5{border-radius:…}`, `.f9ggezi{border:1px solid …}`): no rule in this module sets any of their longhands, so there is no Griffel shorthand-vs-longhand priority left for the cascade to get wrong. */ - border-radius: var(--borderRadiusMedium); - border: 1px solid var(--colorTransparentStroke); + border-radius: var(--radius-medium); + border: 1px solid var(--color-transparent-stroke); - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); + background-color: var(--color-neutral-background-1); + color: var(--color-neutral-foreground-1); /* TODO carried verbatim from the Griffel source: need versions of tokens.alias.shadow.shadow8 etc. that work with filter. */ - filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey)); + filter: drop-shadow(0 0 2px var(--color-neutral-shadow-ambient)) + drop-shadow(0 4px 8px var(--color-neutral-shadow-key)); } } @layer fui.components.l1 { /* from useStyles.inverted — `appearance` is a LOOK prop, so it rides a module class (D3) */ .inverted { - background-color: var(--colorNeutralBackgroundStatic); - color: var(--colorNeutralForegroundStaticInverted); + background-color: var(--color-neutral-background-static); + color: var(--color-neutral-foreground-static-inverted); } } @@ -134,7 +135,7 @@ background-color: inherit; background-clip: content-box; - border-bottom-left-radius: var(--borderRadiusSmall); /* @noflip */ + border-bottom-left-radius: var(--radius-small); /* @noflip */ transform: rotate(var(--fui-positioning-arrow-angle)); /* @noflip */ height: var(--fui-positioning-arrow-height); @@ -152,9 +153,9 @@ while its spacing utilities are --base-scale rem, so both are written literally here to keep them from drifting apart at a non-default root font size. */ margin: -1px; - border: 1px solid var(--colorTransparentStroke); + border: 1px solid var(--color-transparent-stroke); - border-bottom-left-radius: var(--borderRadiusSmall); /* @noflip */ + border-bottom-left-radius: var(--radius-small); /* @noflip */ clip-path: polygon(0% 0%, 100% 100%, 0% 100%); } diff --git a/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipStyled.module.css b/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipStyled.module.css index 466bf46456c213..8930f8281bea66 100644 --- a/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipStyled.module.css +++ b/packages/react-components/react-tooltip/stories/src/Tooltip/TooltipStyled.module.css @@ -2,6 +2,6 @@ * Token references are the Fluent theme's CSS variables. */ .tooltip { - background-color: var(--colorBrandBackground); - color: var(--colorNeutralForegroundInverted); + background-color: var(--color-brand-background); + color: var(--color-neutral-foreground-inverted); } diff --git a/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.module.css b/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.module.css index 39c12190b7ddb9..ac8d025bce83fb 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.module.css +++ b/packages/react-components/react-tree/library/src/components/TreeItem/TreeItem.module.css @@ -97,8 +97,8 @@ .root { @apply relative box-border flex cursor-pointer flex-col pe-horizontal-none; - background-color: var(--colorSubtleBackground); - color: var(--colorNeutralForeground2); + background-color: var(--color-subtle-background); + color: var(--color-neutral-foreground-2); /* createCustomFocusIndicatorStyle draws its own ring, so the browser default is removed here. Both rules are reproduced even though `:focus-visible` is a strict @@ -179,15 +179,15 @@ @variant focus-visible-fui { & > :global(.group\/fui-tree-item-layout), & > :global(.group\/fui-tree-item-persona-layout) { - border-radius: var(--borderRadiusMedium); - outline-color: var(--colorStrokeFocus2); + border-radius: var(--radius-medium); + outline-color: var(--color-stroke-focus-2); /* `outline-radius` is not a real CSS property — react-tabster passes its `outlineRadius` option straight through and Griffel compiles it verbatim (see the compiled atomic). It has never had any effect; it is reproduced rather than silently dropped so this block stays a byte-for-byte mirror of the AOT output, and its removal belongs to the Phase 3 tabster cleanup. */ - outline-radius: var(--borderRadiusMedium); + outline-radius: var(--radius-medium); /* react-tabster's own FIXME ("tokens.strokeWidthThick causes some weird bugs") — reproduced verbatim, not "fixed" to a stroke width (DECISIONS.md D6). */ diff --git a/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css b/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css index 11336afd3f1e8f..32a3eb11396a54 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css +++ b/packages/react-components/react-tree/library/src/components/TreeItemLayout/TreeItemLayout.module.css @@ -109,20 +109,20 @@ grid-area: layout; @variant hover { - color: var(--colorNeutralForeground2Hover); - background-color: var(--colorSubtleBackgroundHover); + color: var(--color-neutral-foreground-2-hover); + background-color: var(--color-subtle-background-hover); & .expand-icon { - color: var(--colorNeutralForeground3Hover); + color: var(--color-neutral-foreground-3-hover); } } @variant active { - color: var(--colorNeutralForeground2Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-2-pressed); + background-color: var(--color-subtle-background-pressed); & .expand-icon { - color: var(--colorNeutralForeground3Pressed); + color: var(--color-neutral-foreground-3-pressed); } } } @@ -140,7 +140,7 @@ .expand-icon { @apply box-border flex min-w-24 items-center justify-center; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); /* literal, not `flex-none`: that utility compiles to `flex: none`, the compiled Griffel reset is `flex: 0 0 auto`. Same computed value, fewer questions. */ @@ -158,9 +158,9 @@ .icon { @apply flex items-center; - color: var(--colorNeutralForeground2); - line-height: var(--lineHeightBase500); - font-size: var(--fontSizeBase500); + color: var(--color-neutral-foreground-2); + line-height: var(--leading-base-500); + font-size: var(--text-base-500); } /* from useActionsBaseStyles (makeResetStyles) — actions arg #2 */ @@ -208,23 +208,23 @@ */ .subtle-alpha { @variant hover { - background-color: var(--colorSubtleBackgroundLightAlphaHover); + background-color: var(--color-subtle-background-light-alpha-hover); } @variant active { - background-color: var(--colorSubtleBackgroundLightAlphaPressed); + background-color: var(--color-subtle-background-light-alpha-pressed); } } .transparent { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); } @variant active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); } } } @@ -241,19 +241,19 @@ */ .root { @variant size-medium { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } @variant size-small { @apply min-h-24; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } } diff --git a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css index afcc8309415b7a..c6060292f25a06 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css +++ b/packages/react-components/react-tree/library/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.module.css @@ -114,27 +114,27 @@ 'expandIcon media description aside'; /* `...typographyStyles.body1` */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); /* `:active` FIRST, `:hover` SECOND — the compiled reset's order; see the header. */ @variant active { - color: var(--colorNeutralForeground2Pressed); - background-color: var(--colorSubtleBackgroundPressed); + color: var(--color-neutral-foreground-2-pressed); + background-color: var(--color-subtle-background-pressed); & .expand-icon { - color: var(--colorNeutralForeground3Pressed); + color: var(--color-neutral-foreground-3-pressed); } } @variant hover { - color: var(--colorNeutralForeground2Hover); - background-color: var(--colorSubtleBackgroundHover); + color: var(--color-neutral-foreground-2-hover); + background-color: var(--color-subtle-background-hover); & .expand-icon { - color: var(--colorNeutralForeground3Hover); + color: var(--color-neutral-foreground-3-hover); } } } @@ -168,10 +168,10 @@ grid-area: description; /* `...typographyStyles.caption1` */ - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); /* `padding: 0 ` expanded to longhands (cookbook §2) */ @@ -212,7 +212,7 @@ .expand-icon { @apply box-border flex min-w-24 items-center justify-center; - color: var(--colorNeutralForeground3); + color: var(--color-neutral-foreground-3); grid-area: expandIcon; /* literal, not `flex-none`: that utility compiles to `flex: none`, the compiled @@ -267,23 +267,23 @@ */ .subtle-alpha { @variant hover { - background-color: var(--colorSubtleBackgroundLightAlphaHover); + background-color: var(--color-subtle-background-light-alpha-hover); } @variant active { - background-color: var(--colorSubtleBackgroundLightAlphaPressed); + background-color: var(--color-subtle-background-light-alpha-pressed); } } .transparent { - background-color: var(--colorTransparentBackground); + background-color: var(--color-transparent-background); @variant hover { - background-color: var(--colorTransparentBackgroundHover); + background-color: var(--color-transparent-background-hover); } @variant active { - background-color: var(--colorTransparentBackgroundPressed); + background-color: var(--color-transparent-background-pressed); } } } @@ -301,19 +301,19 @@ */ .root { @variant size-medium { - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase300); + font-family: var(--font-base); + font-size: var(--text-base-300); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-300); } @variant size-small { @apply min-h-24; - font-family: var(--fontFamilyBase); - font-size: var(--fontSizeBase200); - font-weight: var(--fontWeightRegular); - line-height: var(--lineHeightBase200); + font-family: var(--font-base); + font-size: var(--text-base-200); + font-weight: var(--font-weight-regular); + line-height: var(--leading-base-200); } } } diff --git a/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css b/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css index f9fce81092ba40..f4d7567b4f9327 100644 --- a/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css +++ b/packages/react-components/react-tree/stories/src/Tree/TreeMotionCustom.module.css @@ -7,6 +7,6 @@ gap: var(--spacing-vertical-s); margin-bottom: var(--spacing-vertical-l); padding: var(--spacing-vertical-m); - border: var(--stroke-width-thicker) solid var(--colorNeutralForeground3); - border-radius: var(--borderRadiusMedium); + border: var(--stroke-width-thicker) solid var(--color-neutral-foreground-3); + border-radius: var(--radius-medium); } diff --git a/packages/react-components/recipes/src/templates/Example.module.css b/packages/react-components/recipes/src/templates/Example.module.css index 9311c99974af42..04ca0002e53d39 100644 --- a/packages/react-components/recipes/src/templates/Example.module.css +++ b/packages/react-components/recipes/src/templates/Example.module.css @@ -32,7 +32,7 @@ */ border-width: var(--spacing-thin); border-style: solid; - border-color: var(--colorNeutralStroke1); + border-color: var(--color-neutral-stroke-1); } /* From c31f4c88a2765e645b341045c1b4ba4679331c85 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:44:10 -0700 Subject: [PATCH 622/640] refactor(theming): old->canonical token var sweep 8/8 (Phase 2a) Areas: packages/react-components/theme-designer, packages/tokens, tools Mechanical rename per reports/token-rename-map.json. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../src/components/ColorTokens/TokenList.module.css | 4 ++-- .../theme-designer/src/components/Sidebar/Form.module.css | 4 ++-- .../theme-designer/src/components/Sidebar/Sidebar.module.css | 4 ++-- packages/tokens/etc/tokens.api.md | 2 +- .../files/component/__componentName__.module.css__tmpl__ | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/ColorTokens/TokenList.module.css b/packages/react-components/theme-designer/src/components/ColorTokens/TokenList.module.css index 3e777ae2f7da99..03e26f09acc373 100644 --- a/packages/react-components/theme-designer/src/components/ColorTokens/TokenList.module.css +++ b/packages/react-components/theme-designer/src/components/ColorTokens/TokenList.module.css @@ -42,7 +42,7 @@ @layer fui.components.l4 { /* from useStyles.colorLabel */ .color-label { - color: var(--colorBrandForeground1); + color: var(--color-brand-foreground-1); } /* from useStyles.selected */ @@ -74,6 +74,6 @@ /* from useStyles.output */ .output { - font-size: var(--fontSizeBase200); + font-size: var(--text-base-200); } } diff --git a/packages/react-components/theme-designer/src/components/Sidebar/Form.module.css b/packages/react-components/theme-designer/src/components/Sidebar/Form.module.css index fdd180b0050f65..bbbc4b7295772d 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/Form.module.css +++ b/packages/react-components/theme-designer/src/components/Sidebar/Form.module.css @@ -7,7 +7,7 @@ @layer fui.components.l4 { /* from useStyles.root */ .root { - background-color: var(--colorNeutralBackground3); + background-color: var(--color-neutral-background-3); } /* from useStyles.inputs */ @@ -40,7 +40,7 @@ border-width: 1px; border-style: solid; - border-color: var(--colorNeutralStroke1); + border-color: var(--color-neutral-stroke-1); border-radius: 25px; height: 30px; width: 30px; diff --git a/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.module.css b/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.module.css index 61fc9298ab4cc4..502af7b1b8ea69 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.module.css +++ b/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.module.css @@ -21,7 +21,7 @@ border-inline-end-width: 1px; border-inline-end-style: solid; - border-inline-end-color: var(--colorNeutralStroke1); - background-color: var(--colorNeutralBackground3); + border-inline-end-color: var(--color-neutral-stroke-1); + background-color: var(--color-neutral-background-3); } } diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index 964800d67e0469..b639fa6f41878e 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -483,7 +483,7 @@ export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & Str // @public export function themeToTokensObject(theme: TTheme): Record; -// @public (undocumented) +// @public export const tokens: Record; // @public (undocumented) diff --git a/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ index 8de625fcedf87b..8422db95e50c7b 100644 --- a/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ +++ b/tools/workspace-plugin/src/generators/react-component/files/component/__componentName__.module.css__tmpl__ @@ -1,5 +1,5 @@ /* Styles for <%= componentName %>. Reference theme values via the Fluent CSS variables, - * e.g. `color: var(--colorNeutralForeground1);`. Rules compile into the package's + * e.g. `color: var(--color-neutral-foreground-1);`. Rules compile into the package's * `dist/styles.css` inside the `@layer fui.*` cascade layers, so unlayered consumer CSS * always wins ties. */ From 4e90ba2a897814ccd23778093b95c0622c5f3b70 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 20:45:57 -0700 Subject: [PATCH 623/640] docs(migration): theming Phase 2a report + committed 467-token rename map (md + json) Full-token-set kebab rename recorded: namespace mapping decisions, zero utility-name impact (467 @theme keys byte-identical), the dual-vocabulary provider-tag correction to the task premise, inline-reference adoption, sweep counts (5,331 repl / 438 files + tokens/sass/theme), and all gate results (identity probe 2,237 checks; VR 76/76 at zero tolerance; jest/SSR/lint/tc green; perf E-cells flat). token-rename-map.json is the machine-readable find/replace source for consumer migration. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../reports/theming-css-native.md | 154 + .../reports/token-rename-map.json | 3743 +++++++++++++++++ .../reports/token-rename-map.md | 556 +++ 3 files changed, 4453 insertions(+) create mode 100644 migration/griffel-to-tailwind/reports/token-rename-map.json create mode 100644 migration/griffel-to-tailwind/reports/token-rename-map.md diff --git a/migration/griffel-to-tailwind/reports/theming-css-native.md b/migration/griffel-to-tailwind/reports/theming-css-native.md index 97606fadeac1c2..9b9eee96166cc2 100644 --- a/migration/griffel-to-tailwind/reports/theming-css-native.md +++ b/migration/griffel-to-tailwind/reports/theming-css-native.md @@ -217,3 +217,157 @@ removal; nothing in Phase 1 depends on it either way. Remove the FluentProvider runtime theme style tag / JS theming path; the CSS-native variable graph (canonical `--spacing-*` / `--stroke-width-*` + Fluent color/typography vars) becomes the sole contract. Decide the full-token-set kebab rename question above. + +## Phase 2a — full-token-set kebab rename (option B, Tailwind-namespace-aligned canonicals) + +Date: 2026-08-06 · Branch: `styling/tailwind-css-modules` · Closes the Phase-1 open +question: the remaining 441 camelCase token CSS variables (colors incl. palette, font +families/sizes/weights, line heights, radii, shadows, curves, durations, z-index) are +renamed to canonical kebab-case names aligned with the Tailwind v4 theme namespaces. +Single vocabulary, option B: the old names cease to exist in every shipped read path; +`tokens.*` repoints. Complete mapping committed as `reports/token-rename-map.md` + +`.json` (467 rows: 26 Phase 1 + 441 Phase 2a — the machine-readable find/replace source +for consumer migration). Decision record: DECISIONS.md "D4 Phase-2a amendment". + +### Namespace mapping (canonical = the token's Tailwind `@theme` key, except durations) + +Colors → `--color-*` (palette: `--color-palette-*`); font families → `--font-*`; font +sizes → `--text-*`; font weights → `--font-weight-*`; line heights → `--leading-*`; +radii → `--radius-*`; shadows → `--shadow-*`; curves → `--ease-*`; z-index → +`--z-index-*` (tokens.\* keeps the value fallback, e.g. `var(--z-index-popup, 2000)`). +**Durations split** (user intent — family-consistent custom namespace): canonical +runtime variable `--duration-fast`; the `@theme` key stays what the installed v4.3.3 +utility registry reads (`--transition-duration-fast`), registered as +`var(--duration-fast)` so utilities carry the canonical reference verbatim. All 467 +canonical names asserted unique. + +### Utility-name impact verdict: ZERO + +The `@theme` keys were already these kebab names. Byte-compared HEAD vs new: the 467 +registered keys are identical sets; only registered VALUES changed +(`var(--colorNeutralBackground1)` → `var(--color-neutral-background-1)`). No utility +class name changes; no module.css class-usage sweep. + +### Architectural correction to the task premise (recorded honestly) + +The task assumed the FluentProvider runtime tag's literals would "feed NOTHING" after +the rename (Phase-1 semantics). That held in Phase 1 only because spacing/stroke are +theme-INVARIANT and `:root`-emitted. The 441 renamed tokens are theme-VARIANT (7 shipped +themes differ; dark/HC VR stories resolve through per-provider values) with NO static +value emission — the tag is their sole value source (verified: zero static camelCase +value definitions in repo CSS). A camelCase-only tag would have unstyled everything. + +**Resolution — dual-vocabulary tag (interim until 2b):** `createCSSRuleFromTheme` writes +each theme entry under BOTH names, deriving the canonical from the repointed `tokens.*` +strings (guaranteed lockstep, no second kebab implementation). Shipped readers all use +canonical names; the camelCase half feeds nothing shipped — the task's stated interim +semantics, made true constructively — and doubles as unbroken-interim insurance for +hand-written consumer CSS. Cost: per-provider rule 459 → 918 declarations +(webLightTheme 19,215 → 39,873 chars), inserted once per provider mount. + +### `@theme inline reference` adopted (earlier rejection retired) + +With runtime names equal to theme keys, every registration is self-named +(`--color-x: var(--color-x)`); plain `inline` emits 400+ self-referential aliases at +`:root, :host` (cycle-invalid at `:root`, ~19KB — probe `.scratch/phase2a-theming/probe/`). +`reference` suppresses exactly that emission (probed byte-identical utility output); its +pre-2a rejection reason — "emits CSS against a variable nothing defines" — is retired +because the tag now defines the canonical names. `dist/styles.css` byte-stable: 2,810 +bytes, Phase-1 emission block unchanged, zero old names. + +### Sweep counts + +- `packages/tokens/src/tokens.ts`: 441 values repointed; test rewritten as an + INDEPENDENT canonical-derivation exact-string test (all 467) + no-camelCase-var regex + - uniqueness; generator drift-throw extended to every token (fallback only for + zIndex). +- `react-theme-sass`: 433 values across 8 scss files (SCSS `$` names stay camelCase). +- react-tailwind-theme: tokens.css regenerated (441 values); 12 hand-written refs in + css/utilities.css. +- Repo sweep: **5,331 replacements across 438 files** (module.css HCM blocks, stories, + docsite MDX/css, vr-tests utils, charts inline styles, motion token strings, + storybook-addon css, theme-designer, workspace-plugin template, calendar/datepicker + compat, migration-v0/v8 shims). Residuals: zero in sweep scope. +- Exemptions (verified): web-components / chart-web-components / + vr-tests-web-components' WCThemeDecorator (separate system defining its own camelCase + vars — 49 files / 2,424 occurrences untouched); `deprecated/**` — ZERO raw old-name + references (consumes tokens only via `tokens.*` JS inside Griffel makeStyles, e.g. + react-alert's `tokens.colorTransparentStroke` — follows the repoint automatically, + resolves against the dual tag; no exemption needed, nothing to sweep); migration + history reports/ledger; the two dual-emission SSR snapshot tests (legacy names are + CORRECT there until 2b); removal-documenting comments. Docsite residual + `--colorPaletteSilverForeground1` is NOT a token (v0-migration doc example, dead + before and after). + +### Gates + +1. **Browser identity probe — 2,237 checks, ALL PASS** (headless Chromium, rebuilt dist + - real `createCSSRuleFromTheme` rules from webLight/webDark/teamsHighContrast; script + `.scratch/phase2a-theming/identity-probe.mjs`): per Phase-2a token (441 × 5) — + canonical var == theme literal under a light provider; legacy var == same value (dual + emission); canonical switches under a nested dark provider; canonical carries HC + values; canonical does NOT resolve outside any provider (camelCase-era semantics + preserved). Plus 26 Phase-1 root-resolution checks and 6 end-to-end utility spot + checks (bg/shadow/duration/text/radius/ease computed == theme-literal reference + elements). +2. **Emitted-CSS verification — zero old names**: dist/styles.css (2,810 bytes, + byte-stable emission shape); fresh `--skip-nx-cache` VR storybook bundle — 247 + css/js files, 0 old-name occurrences, canonical forms present (172 + `var(--color-neutral-background-1)` refs); public-docsite-v9 storybook build green — + 354 files, 0 real old-token refs, 266 canonical refs. +3. **Full VR sweep at zero tolerance — 76/76 canonical sets PASS, failing: none.** + Fresh `--skip-nx-cache` `vr-tests-react-components:build-storybook` (bundle + marker-verified pre-sweep: zero old names, canonical present); driver + `.scratch/phase2a-sweep-driver.mjs` (phase1b shape, review36513-\* excluded), results + `.scratch/phase2a-sweep-results.json`. All matched pairs pixel-identical except two + documented flake classes, both within pre-adjudicated protocol: `property-remedy` + (2,772 shots) had 3 `CalendarCompat.multiDayView*` shots at 11–21 diff px — the + ledger-adjudicated bistable text-antialiasing flake (ceiling 26; diff image + inspected: single-glyph speckle, not a value change) — the react-calendar-compat + tolerance was mirrored onto this composite set that embeds the same shots; + `react-progress` passed on its protocol recapture (known ProgressBar HC flake). No + story-inventory drift: the phase1b-folded baselines were current, 0 extras / 0 + missing anywhere. +4. **jest**: tokens 3/3 (new full-set tests); react-provider (dual-emission snapshots + updated; suite green); react-button, react-avatar, react-motion, react-card green; + react-badge 66/66 after regenerating ONE pre-existing stale PresenceBadge snapshot + (icon `data-fui-icon` drift from committed S-J history — same root cause as the 3 + carousel snapshots regenerated in `944cccc0bc`; verified via `git log -S` that no + Phase-2a file touches icon rendering); charts react-charts 917 passed / 86 skipped. +5. **SSR run green**: `ssr-tests-v9:test-ssr` exit 0. +6. **lint/type-check** on touched-project sample: type-check tokens, react-provider, + react-button, react-motion, react-charts + `verify-tokens-css` all green; lint + tokens (after a JSDoc tag-name fix in the new comments), react-provider, + react-button, react-motion, react-charts all green. +7. **Perf E-cell spot-check — flat.** Same rig as Phase 1 (scenario E, pooled-window, + 31 windows + 5 warmups per visit, 6 reps, legs shuffled per cell per rep, seed + 20260806, n = 186/cell; Chromium 141.0.7390.37; per-leg liveness asserted: control + bundle carries `var(--colorNeutralBackground1)` forms and zero canonical forms, new + bundle the inverse). Medians: + | Cell | control (ms) | new (ms) | delta | + | ------------------------------------------------------------------------------------ | -----------: | -------: | ----: | + | Button E | 3.500 | 3.500 | +0.0% | + | Switch E | 5.600 | 5.550 | -0.9% | + | Divider E | 1.300 | 1.300 | +0.0% | + | IQRs overlap fully (Button [3.400, 3.700] both legs; Switch control [5.400, 5.900] / | + | new [5.400, 5.900]; Divider [1.300, 1.400] both). Raw: | + | `.scratch/perf-eval/phase2a-theming/results/`. The provider-rule doubling (dual | + | emission) is a once-per-provider-mount cost outside scenario E's re-render loop; its | + | size delta is recorded above and it disappears with the tag in Phase 2b. | + +### Interim-state semantics (until Phase 2b) + +FluentProvider's runtime tag now writes BOTH vocabularies per provider element. The +camelCase half feeds no shipped reader (all shipped CSS and `tokens.*` strings are +canonical); it keeps hand-written consumer reads of old names working under providers +during the interim. A custom provider `theme` override reaches every shipped reader +through the canonical half — unlike Phase 1's spacing (which froze at `:root`), color/ +font/etc. theming behavior through providers is fully preserved. Outside any provider, +canonical names do not resolve — exactly the camelCase-era semantics. + +### Phase 2b (queued) + +Remove the FluentProvider runtime theme tag / JS theming path. With Phase 2a done, the +tag is the ONLY remaining writer of both vocabularies; 2b must introduce the static +value emission / theme-application mechanism for the canonical names (the design +question deferred from this phase) and delete `createCSSRuleFromTheme`'s runtime role. diff --git a/migration/griffel-to-tailwind/reports/token-rename-map.json b/migration/griffel-to-tailwind/reports/token-rename-map.json new file mode 100644 index 00000000000000..d15627f50828d5 --- /dev/null +++ b/migration/griffel-to-tailwind/reports/token-rename-map.json @@ -0,0 +1,3743 @@ +{ + "$schema": "token-rename-map", + "description": "Complete old->new CSS custom property mapping for the Fluent design token set. Phase 1 (2026-08-05): spacing + strokeWidth (26 tokens). Phase 2a: everything else (441 tokens). Old names ceased to exist in emitted CSS (option B); tokens.* JS constants read the new names. This file is the machine-readable find/replace source for consumer migration: replace every occurrence of oldVar with newVar (longest-first, with a (?![A-Za-z0-9-]) boundary).", + "generatedBy": ".scratch/phase2a-theming/emit-mapping-artifacts.mjs (theming Phase 2a session)", + "tokens": [ + { + "token": "colorNeutralForeground1", + "oldVar": "--colorNeutralForeground1", + "newVar": "--color-neutral-foreground-1", + "themeKey": "--color-neutral-foreground-1", + "tokensJs": "var(--color-neutral-foreground-1)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground1Hover", + "oldVar": "--colorNeutralForeground1Hover", + "newVar": "--color-neutral-foreground-1-hover", + "themeKey": "--color-neutral-foreground-1-hover", + "tokensJs": "var(--color-neutral-foreground-1-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground1Pressed", + "oldVar": "--colorNeutralForeground1Pressed", + "newVar": "--color-neutral-foreground-1-pressed", + "themeKey": "--color-neutral-foreground-1-pressed", + "tokensJs": "var(--color-neutral-foreground-1-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground1Selected", + "oldVar": "--colorNeutralForeground1Selected", + "newVar": "--color-neutral-foreground-1-selected", + "themeKey": "--color-neutral-foreground-1-selected", + "tokensJs": "var(--color-neutral-foreground-1-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2", + "oldVar": "--colorNeutralForeground2", + "newVar": "--color-neutral-foreground-2", + "themeKey": "--color-neutral-foreground-2", + "tokensJs": "var(--color-neutral-foreground-2)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2Hover", + "oldVar": "--colorNeutralForeground2Hover", + "newVar": "--color-neutral-foreground-2-hover", + "themeKey": "--color-neutral-foreground-2-hover", + "tokensJs": "var(--color-neutral-foreground-2-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2Pressed", + "oldVar": "--colorNeutralForeground2Pressed", + "newVar": "--color-neutral-foreground-2-pressed", + "themeKey": "--color-neutral-foreground-2-pressed", + "tokensJs": "var(--color-neutral-foreground-2-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2Selected", + "oldVar": "--colorNeutralForeground2Selected", + "newVar": "--color-neutral-foreground-2-selected", + "themeKey": "--color-neutral-foreground-2-selected", + "tokensJs": "var(--color-neutral-foreground-2-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2BrandHover", + "oldVar": "--colorNeutralForeground2BrandHover", + "newVar": "--color-neutral-foreground-2-brand-hover", + "themeKey": "--color-neutral-foreground-2-brand-hover", + "tokensJs": "var(--color-neutral-foreground-2-brand-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2BrandPressed", + "oldVar": "--colorNeutralForeground2BrandPressed", + "newVar": "--color-neutral-foreground-2-brand-pressed", + "themeKey": "--color-neutral-foreground-2-brand-pressed", + "tokensJs": "var(--color-neutral-foreground-2-brand-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2BrandSelected", + "oldVar": "--colorNeutralForeground2BrandSelected", + "newVar": "--color-neutral-foreground-2-brand-selected", + "themeKey": "--color-neutral-foreground-2-brand-selected", + "tokensJs": "var(--color-neutral-foreground-2-brand-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3", + "oldVar": "--colorNeutralForeground3", + "newVar": "--color-neutral-foreground-3", + "themeKey": "--color-neutral-foreground-3", + "tokensJs": "var(--color-neutral-foreground-3)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3Hover", + "oldVar": "--colorNeutralForeground3Hover", + "newVar": "--color-neutral-foreground-3-hover", + "themeKey": "--color-neutral-foreground-3-hover", + "tokensJs": "var(--color-neutral-foreground-3-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3Pressed", + "oldVar": "--colorNeutralForeground3Pressed", + "newVar": "--color-neutral-foreground-3-pressed", + "themeKey": "--color-neutral-foreground-3-pressed", + "tokensJs": "var(--color-neutral-foreground-3-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3Selected", + "oldVar": "--colorNeutralForeground3Selected", + "newVar": "--color-neutral-foreground-3-selected", + "themeKey": "--color-neutral-foreground-3-selected", + "tokensJs": "var(--color-neutral-foreground-3-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3BrandHover", + "oldVar": "--colorNeutralForeground3BrandHover", + "newVar": "--color-neutral-foreground-3-brand-hover", + "themeKey": "--color-neutral-foreground-3-brand-hover", + "tokensJs": "var(--color-neutral-foreground-3-brand-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3BrandPressed", + "oldVar": "--colorNeutralForeground3BrandPressed", + "newVar": "--color-neutral-foreground-3-brand-pressed", + "themeKey": "--color-neutral-foreground-3-brand-pressed", + "tokensJs": "var(--color-neutral-foreground-3-brand-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground3BrandSelected", + "oldVar": "--colorNeutralForeground3BrandSelected", + "newVar": "--color-neutral-foreground-3-brand-selected", + "themeKey": "--color-neutral-foreground-3-brand-selected", + "tokensJs": "var(--color-neutral-foreground-3-brand-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground4", + "oldVar": "--colorNeutralForeground4", + "newVar": "--color-neutral-foreground-4", + "themeKey": "--color-neutral-foreground-4", + "tokensJs": "var(--color-neutral-foreground-4)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground5", + "oldVar": "--colorNeutralForeground5", + "newVar": "--color-neutral-foreground-5", + "themeKey": "--color-neutral-foreground-5", + "tokensJs": "var(--color-neutral-foreground-5)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground5Hover", + "oldVar": "--colorNeutralForeground5Hover", + "newVar": "--color-neutral-foreground-5-hover", + "themeKey": "--color-neutral-foreground-5-hover", + "tokensJs": "var(--color-neutral-foreground-5-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground5Pressed", + "oldVar": "--colorNeutralForeground5Pressed", + "newVar": "--color-neutral-foreground-5-pressed", + "themeKey": "--color-neutral-foreground-5-pressed", + "tokensJs": "var(--color-neutral-foreground-5-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground5Selected", + "oldVar": "--colorNeutralForeground5Selected", + "newVar": "--color-neutral-foreground-5-selected", + "themeKey": "--color-neutral-foreground-5-selected", + "tokensJs": "var(--color-neutral-foreground-5-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundDisabled", + "oldVar": "--colorNeutralForegroundDisabled", + "newVar": "--color-neutral-foreground-disabled", + "themeKey": "--color-neutral-foreground-disabled", + "tokensJs": "var(--color-neutral-foreground-disabled)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundLink", + "oldVar": "--colorBrandForegroundLink", + "newVar": "--color-brand-foreground-link", + "themeKey": "--color-brand-foreground-link", + "tokensJs": "var(--color-brand-foreground-link)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundLinkHover", + "oldVar": "--colorBrandForegroundLinkHover", + "newVar": "--color-brand-foreground-link-hover", + "themeKey": "--color-brand-foreground-link-hover", + "tokensJs": "var(--color-brand-foreground-link-hover)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundLinkPressed", + "oldVar": "--colorBrandForegroundLinkPressed", + "newVar": "--color-brand-foreground-link-pressed", + "themeKey": "--color-brand-foreground-link-pressed", + "tokensJs": "var(--color-brand-foreground-link-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundLinkSelected", + "oldVar": "--colorBrandForegroundLinkSelected", + "newVar": "--color-brand-foreground-link-selected", + "themeKey": "--color-brand-foreground-link-selected", + "tokensJs": "var(--color-brand-foreground-link-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2Link", + "oldVar": "--colorNeutralForeground2Link", + "newVar": "--color-neutral-foreground-2-link", + "themeKey": "--color-neutral-foreground-2-link", + "tokensJs": "var(--color-neutral-foreground-2-link)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2LinkHover", + "oldVar": "--colorNeutralForeground2LinkHover", + "newVar": "--color-neutral-foreground-2-link-hover", + "themeKey": "--color-neutral-foreground-2-link-hover", + "tokensJs": "var(--color-neutral-foreground-2-link-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2LinkPressed", + "oldVar": "--colorNeutralForeground2LinkPressed", + "newVar": "--color-neutral-foreground-2-link-pressed", + "themeKey": "--color-neutral-foreground-2-link-pressed", + "tokensJs": "var(--color-neutral-foreground-2-link-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground2LinkSelected", + "oldVar": "--colorNeutralForeground2LinkSelected", + "newVar": "--color-neutral-foreground-2-link-selected", + "themeKey": "--color-neutral-foreground-2-link-selected", + "tokensJs": "var(--color-neutral-foreground-2-link-selected)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandForeground1", + "oldVar": "--colorCompoundBrandForeground1", + "newVar": "--color-compound-brand-foreground-1", + "themeKey": "--color-compound-brand-foreground-1", + "tokensJs": "var(--color-compound-brand-foreground-1)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandForeground1Hover", + "oldVar": "--colorCompoundBrandForeground1Hover", + "newVar": "--color-compound-brand-foreground-1-hover", + "themeKey": "--color-compound-brand-foreground-1-hover", + "tokensJs": "var(--color-compound-brand-foreground-1-hover)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandForeground1Pressed", + "oldVar": "--colorCompoundBrandForeground1Pressed", + "newVar": "--color-compound-brand-foreground-1-pressed", + "themeKey": "--color-compound-brand-foreground-1-pressed", + "tokensJs": "var(--color-compound-brand-foreground-1-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundOnBrand", + "oldVar": "--colorNeutralForegroundOnBrand", + "newVar": "--color-neutral-foreground-on-brand", + "themeKey": "--color-neutral-foreground-on-brand", + "tokensJs": "var(--color-neutral-foreground-on-brand)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInverted", + "oldVar": "--colorNeutralForegroundInverted", + "newVar": "--color-neutral-foreground-inverted", + "themeKey": "--color-neutral-foreground-inverted", + "tokensJs": "var(--color-neutral-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedHover", + "oldVar": "--colorNeutralForegroundInvertedHover", + "newVar": "--color-neutral-foreground-inverted-hover", + "themeKey": "--color-neutral-foreground-inverted-hover", + "tokensJs": "var(--color-neutral-foreground-inverted-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedPressed", + "oldVar": "--colorNeutralForegroundInvertedPressed", + "newVar": "--color-neutral-foreground-inverted-pressed", + "themeKey": "--color-neutral-foreground-inverted-pressed", + "tokensJs": "var(--color-neutral-foreground-inverted-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedSelected", + "oldVar": "--colorNeutralForegroundInvertedSelected", + "newVar": "--color-neutral-foreground-inverted-selected", + "themeKey": "--color-neutral-foreground-inverted-selected", + "tokensJs": "var(--color-neutral-foreground-inverted-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInverted2", + "oldVar": "--colorNeutralForegroundInverted2", + "newVar": "--color-neutral-foreground-inverted-2", + "themeKey": "--color-neutral-foreground-inverted-2", + "tokensJs": "var(--color-neutral-foreground-inverted-2)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundStaticInverted", + "oldVar": "--colorNeutralForegroundStaticInverted", + "newVar": "--color-neutral-foreground-static-inverted", + "themeKey": "--color-neutral-foreground-static-inverted", + "tokensJs": "var(--color-neutral-foreground-static-inverted)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedLink", + "oldVar": "--colorNeutralForegroundInvertedLink", + "newVar": "--color-neutral-foreground-inverted-link", + "themeKey": "--color-neutral-foreground-inverted-link", + "tokensJs": "var(--color-neutral-foreground-inverted-link)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedLinkHover", + "oldVar": "--colorNeutralForegroundInvertedLinkHover", + "newVar": "--color-neutral-foreground-inverted-link-hover", + "themeKey": "--color-neutral-foreground-inverted-link-hover", + "tokensJs": "var(--color-neutral-foreground-inverted-link-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedLinkPressed", + "oldVar": "--colorNeutralForegroundInvertedLinkPressed", + "newVar": "--color-neutral-foreground-inverted-link-pressed", + "themeKey": "--color-neutral-foreground-inverted-link-pressed", + "tokensJs": "var(--color-neutral-foreground-inverted-link-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedLinkSelected", + "oldVar": "--colorNeutralForegroundInvertedLinkSelected", + "newVar": "--color-neutral-foreground-inverted-link-selected", + "themeKey": "--color-neutral-foreground-inverted-link-selected", + "tokensJs": "var(--color-neutral-foreground-inverted-link-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralForegroundInvertedDisabled", + "oldVar": "--colorNeutralForegroundInvertedDisabled", + "newVar": "--color-neutral-foreground-inverted-disabled", + "themeKey": "--color-neutral-foreground-inverted-disabled", + "tokensJs": "var(--color-neutral-foreground-inverted-disabled)", + "phase": "2a" + }, + { + "token": "colorBrandForeground1", + "oldVar": "--colorBrandForeground1", + "newVar": "--color-brand-foreground-1", + "themeKey": "--color-brand-foreground-1", + "tokensJs": "var(--color-brand-foreground-1)", + "phase": "2a" + }, + { + "token": "colorBrandForeground2", + "oldVar": "--colorBrandForeground2", + "newVar": "--color-brand-foreground-2", + "themeKey": "--color-brand-foreground-2", + "tokensJs": "var(--color-brand-foreground-2)", + "phase": "2a" + }, + { + "token": "colorBrandForeground2Hover", + "oldVar": "--colorBrandForeground2Hover", + "newVar": "--color-brand-foreground-2-hover", + "themeKey": "--color-brand-foreground-2-hover", + "tokensJs": "var(--color-brand-foreground-2-hover)", + "phase": "2a" + }, + { + "token": "colorBrandForeground2Pressed", + "oldVar": "--colorBrandForeground2Pressed", + "newVar": "--color-brand-foreground-2-pressed", + "themeKey": "--color-brand-foreground-2-pressed", + "tokensJs": "var(--color-brand-foreground-2-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralForeground1Static", + "oldVar": "--colorNeutralForeground1Static", + "newVar": "--color-neutral-foreground-1-static", + "themeKey": "--color-neutral-foreground-1-static", + "tokensJs": "var(--color-neutral-foreground-1-static)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundInverted", + "oldVar": "--colorBrandForegroundInverted", + "newVar": "--color-brand-foreground-inverted", + "themeKey": "--color-brand-foreground-inverted", + "tokensJs": "var(--color-brand-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundInvertedHover", + "oldVar": "--colorBrandForegroundInvertedHover", + "newVar": "--color-brand-foreground-inverted-hover", + "themeKey": "--color-brand-foreground-inverted-hover", + "tokensJs": "var(--color-brand-foreground-inverted-hover)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundInvertedPressed", + "oldVar": "--colorBrandForegroundInvertedPressed", + "newVar": "--color-brand-foreground-inverted-pressed", + "themeKey": "--color-brand-foreground-inverted-pressed", + "tokensJs": "var(--color-brand-foreground-inverted-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundOnLight", + "oldVar": "--colorBrandForegroundOnLight", + "newVar": "--color-brand-foreground-on-light", + "themeKey": "--color-brand-foreground-on-light", + "tokensJs": "var(--color-brand-foreground-on-light)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundOnLightHover", + "oldVar": "--colorBrandForegroundOnLightHover", + "newVar": "--color-brand-foreground-on-light-hover", + "themeKey": "--color-brand-foreground-on-light-hover", + "tokensJs": "var(--color-brand-foreground-on-light-hover)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundOnLightPressed", + "oldVar": "--colorBrandForegroundOnLightPressed", + "newVar": "--color-brand-foreground-on-light-pressed", + "themeKey": "--color-brand-foreground-on-light-pressed", + "tokensJs": "var(--color-brand-foreground-on-light-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandForegroundOnLightSelected", + "oldVar": "--colorBrandForegroundOnLightSelected", + "newVar": "--color-brand-foreground-on-light-selected", + "themeKey": "--color-brand-foreground-on-light-selected", + "tokensJs": "var(--color-brand-foreground-on-light-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground1", + "oldVar": "--colorNeutralBackground1", + "newVar": "--color-neutral-background-1", + "themeKey": "--color-neutral-background-1", + "tokensJs": "var(--color-neutral-background-1)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground1Hover", + "oldVar": "--colorNeutralBackground1Hover", + "newVar": "--color-neutral-background-1-hover", + "themeKey": "--color-neutral-background-1-hover", + "tokensJs": "var(--color-neutral-background-1-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground1Pressed", + "oldVar": "--colorNeutralBackground1Pressed", + "newVar": "--color-neutral-background-1-pressed", + "themeKey": "--color-neutral-background-1-pressed", + "tokensJs": "var(--color-neutral-background-1-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground1Selected", + "oldVar": "--colorNeutralBackground1Selected", + "newVar": "--color-neutral-background-1-selected", + "themeKey": "--color-neutral-background-1-selected", + "tokensJs": "var(--color-neutral-background-1-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground2", + "oldVar": "--colorNeutralBackground2", + "newVar": "--color-neutral-background-2", + "themeKey": "--color-neutral-background-2", + "tokensJs": "var(--color-neutral-background-2)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground2Hover", + "oldVar": "--colorNeutralBackground2Hover", + "newVar": "--color-neutral-background-2-hover", + "themeKey": "--color-neutral-background-2-hover", + "tokensJs": "var(--color-neutral-background-2-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground2Pressed", + "oldVar": "--colorNeutralBackground2Pressed", + "newVar": "--color-neutral-background-2-pressed", + "themeKey": "--color-neutral-background-2-pressed", + "tokensJs": "var(--color-neutral-background-2-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground2Selected", + "oldVar": "--colorNeutralBackground2Selected", + "newVar": "--color-neutral-background-2-selected", + "themeKey": "--color-neutral-background-2-selected", + "tokensJs": "var(--color-neutral-background-2-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground3", + "oldVar": "--colorNeutralBackground3", + "newVar": "--color-neutral-background-3", + "themeKey": "--color-neutral-background-3", + "tokensJs": "var(--color-neutral-background-3)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground3Hover", + "oldVar": "--colorNeutralBackground3Hover", + "newVar": "--color-neutral-background-3-hover", + "themeKey": "--color-neutral-background-3-hover", + "tokensJs": "var(--color-neutral-background-3-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground3Pressed", + "oldVar": "--colorNeutralBackground3Pressed", + "newVar": "--color-neutral-background-3-pressed", + "themeKey": "--color-neutral-background-3-pressed", + "tokensJs": "var(--color-neutral-background-3-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground3Selected", + "oldVar": "--colorNeutralBackground3Selected", + "newVar": "--color-neutral-background-3-selected", + "themeKey": "--color-neutral-background-3-selected", + "tokensJs": "var(--color-neutral-background-3-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground4", + "oldVar": "--colorNeutralBackground4", + "newVar": "--color-neutral-background-4", + "themeKey": "--color-neutral-background-4", + "tokensJs": "var(--color-neutral-background-4)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground4Hover", + "oldVar": "--colorNeutralBackground4Hover", + "newVar": "--color-neutral-background-4-hover", + "themeKey": "--color-neutral-background-4-hover", + "tokensJs": "var(--color-neutral-background-4-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground4Pressed", + "oldVar": "--colorNeutralBackground4Pressed", + "newVar": "--color-neutral-background-4-pressed", + "themeKey": "--color-neutral-background-4-pressed", + "tokensJs": "var(--color-neutral-background-4-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground4Selected", + "oldVar": "--colorNeutralBackground4Selected", + "newVar": "--color-neutral-background-4-selected", + "themeKey": "--color-neutral-background-4-selected", + "tokensJs": "var(--color-neutral-background-4-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground5", + "oldVar": "--colorNeutralBackground5", + "newVar": "--color-neutral-background-5", + "themeKey": "--color-neutral-background-5", + "tokensJs": "var(--color-neutral-background-5)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground5Hover", + "oldVar": "--colorNeutralBackground5Hover", + "newVar": "--color-neutral-background-5-hover", + "themeKey": "--color-neutral-background-5-hover", + "tokensJs": "var(--color-neutral-background-5-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground5Pressed", + "oldVar": "--colorNeutralBackground5Pressed", + "newVar": "--color-neutral-background-5-pressed", + "themeKey": "--color-neutral-background-5-pressed", + "tokensJs": "var(--color-neutral-background-5-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground5Selected", + "oldVar": "--colorNeutralBackground5Selected", + "newVar": "--color-neutral-background-5-selected", + "themeKey": "--color-neutral-background-5-selected", + "tokensJs": "var(--color-neutral-background-5-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground6", + "oldVar": "--colorNeutralBackground6", + "newVar": "--color-neutral-background-6", + "themeKey": "--color-neutral-background-6", + "tokensJs": "var(--color-neutral-background-6)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground7", + "oldVar": "--colorNeutralBackground7", + "newVar": "--color-neutral-background-7", + "themeKey": "--color-neutral-background-7", + "tokensJs": "var(--color-neutral-background-7)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground7Hover", + "oldVar": "--colorNeutralBackground7Hover", + "newVar": "--color-neutral-background-7-hover", + "themeKey": "--color-neutral-background-7-hover", + "tokensJs": "var(--color-neutral-background-7-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground7Pressed", + "oldVar": "--colorNeutralBackground7Pressed", + "newVar": "--color-neutral-background-7-pressed", + "themeKey": "--color-neutral-background-7-pressed", + "tokensJs": "var(--color-neutral-background-7-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground7Selected", + "oldVar": "--colorNeutralBackground7Selected", + "newVar": "--color-neutral-background-7-selected", + "themeKey": "--color-neutral-background-7-selected", + "tokensJs": "var(--color-neutral-background-7-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackground8", + "oldVar": "--colorNeutralBackground8", + "newVar": "--color-neutral-background-8", + "themeKey": "--color-neutral-background-8", + "tokensJs": "var(--color-neutral-background-8)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundInverted", + "oldVar": "--colorNeutralBackgroundInverted", + "newVar": "--color-neutral-background-inverted", + "themeKey": "--color-neutral-background-inverted", + "tokensJs": "var(--color-neutral-background-inverted)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundInvertedHover", + "oldVar": "--colorNeutralBackgroundInvertedHover", + "newVar": "--color-neutral-background-inverted-hover", + "themeKey": "--color-neutral-background-inverted-hover", + "tokensJs": "var(--color-neutral-background-inverted-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundInvertedPressed", + "oldVar": "--colorNeutralBackgroundInvertedPressed", + "newVar": "--color-neutral-background-inverted-pressed", + "themeKey": "--color-neutral-background-inverted-pressed", + "tokensJs": "var(--color-neutral-background-inverted-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundInvertedSelected", + "oldVar": "--colorNeutralBackgroundInvertedSelected", + "newVar": "--color-neutral-background-inverted-selected", + "themeKey": "--color-neutral-background-inverted-selected", + "tokensJs": "var(--color-neutral-background-inverted-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundStatic", + "oldVar": "--colorNeutralBackgroundStatic", + "newVar": "--color-neutral-background-static", + "themeKey": "--color-neutral-background-static", + "tokensJs": "var(--color-neutral-background-static)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundAlpha", + "oldVar": "--colorNeutralBackgroundAlpha", + "newVar": "--color-neutral-background-alpha", + "themeKey": "--color-neutral-background-alpha", + "tokensJs": "var(--color-neutral-background-alpha)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundAlpha2", + "oldVar": "--colorNeutralBackgroundAlpha2", + "newVar": "--color-neutral-background-alpha-2", + "themeKey": "--color-neutral-background-alpha-2", + "tokensJs": "var(--color-neutral-background-alpha-2)", + "phase": "2a" + }, + { + "token": "colorSubtleBackground", + "oldVar": "--colorSubtleBackground", + "newVar": "--color-subtle-background", + "themeKey": "--color-subtle-background", + "tokensJs": "var(--color-subtle-background)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundHover", + "oldVar": "--colorSubtleBackgroundHover", + "newVar": "--color-subtle-background-hover", + "themeKey": "--color-subtle-background-hover", + "tokensJs": "var(--color-subtle-background-hover)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundPressed", + "oldVar": "--colorSubtleBackgroundPressed", + "newVar": "--color-subtle-background-pressed", + "themeKey": "--color-subtle-background-pressed", + "tokensJs": "var(--color-subtle-background-pressed)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundSelected", + "oldVar": "--colorSubtleBackgroundSelected", + "newVar": "--color-subtle-background-selected", + "themeKey": "--color-subtle-background-selected", + "tokensJs": "var(--color-subtle-background-selected)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundLightAlphaHover", + "oldVar": "--colorSubtleBackgroundLightAlphaHover", + "newVar": "--color-subtle-background-light-alpha-hover", + "themeKey": "--color-subtle-background-light-alpha-hover", + "tokensJs": "var(--color-subtle-background-light-alpha-hover)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundLightAlphaPressed", + "oldVar": "--colorSubtleBackgroundLightAlphaPressed", + "newVar": "--color-subtle-background-light-alpha-pressed", + "themeKey": "--color-subtle-background-light-alpha-pressed", + "tokensJs": "var(--color-subtle-background-light-alpha-pressed)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundLightAlphaSelected", + "oldVar": "--colorSubtleBackgroundLightAlphaSelected", + "newVar": "--color-subtle-background-light-alpha-selected", + "themeKey": "--color-subtle-background-light-alpha-selected", + "tokensJs": "var(--color-subtle-background-light-alpha-selected)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundInverted", + "oldVar": "--colorSubtleBackgroundInverted", + "newVar": "--color-subtle-background-inverted", + "themeKey": "--color-subtle-background-inverted", + "tokensJs": "var(--color-subtle-background-inverted)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundInvertedHover", + "oldVar": "--colorSubtleBackgroundInvertedHover", + "newVar": "--color-subtle-background-inverted-hover", + "themeKey": "--color-subtle-background-inverted-hover", + "tokensJs": "var(--color-subtle-background-inverted-hover)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundInvertedPressed", + "oldVar": "--colorSubtleBackgroundInvertedPressed", + "newVar": "--color-subtle-background-inverted-pressed", + "themeKey": "--color-subtle-background-inverted-pressed", + "tokensJs": "var(--color-subtle-background-inverted-pressed)", + "phase": "2a" + }, + { + "token": "colorSubtleBackgroundInvertedSelected", + "oldVar": "--colorSubtleBackgroundInvertedSelected", + "newVar": "--color-subtle-background-inverted-selected", + "themeKey": "--color-subtle-background-inverted-selected", + "tokensJs": "var(--color-subtle-background-inverted-selected)", + "phase": "2a" + }, + { + "token": "colorTransparentBackground", + "oldVar": "--colorTransparentBackground", + "newVar": "--color-transparent-background", + "themeKey": "--color-transparent-background", + "tokensJs": "var(--color-transparent-background)", + "phase": "2a" + }, + { + "token": "colorTransparentBackgroundHover", + "oldVar": "--colorTransparentBackgroundHover", + "newVar": "--color-transparent-background-hover", + "themeKey": "--color-transparent-background-hover", + "tokensJs": "var(--color-transparent-background-hover)", + "phase": "2a" + }, + { + "token": "colorTransparentBackgroundPressed", + "oldVar": "--colorTransparentBackgroundPressed", + "newVar": "--color-transparent-background-pressed", + "themeKey": "--color-transparent-background-pressed", + "tokensJs": "var(--color-transparent-background-pressed)", + "phase": "2a" + }, + { + "token": "colorTransparentBackgroundSelected", + "oldVar": "--colorTransparentBackgroundSelected", + "newVar": "--color-transparent-background-selected", + "themeKey": "--color-transparent-background-selected", + "tokensJs": "var(--color-transparent-background-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundDisabled", + "oldVar": "--colorNeutralBackgroundDisabled", + "newVar": "--color-neutral-background-disabled", + "themeKey": "--color-neutral-background-disabled", + "tokensJs": "var(--color-neutral-background-disabled)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundDisabled2", + "oldVar": "--colorNeutralBackgroundDisabled2", + "newVar": "--color-neutral-background-disabled-2", + "themeKey": "--color-neutral-background-disabled-2", + "tokensJs": "var(--color-neutral-background-disabled-2)", + "phase": "2a" + }, + { + "token": "colorNeutralBackgroundInvertedDisabled", + "oldVar": "--colorNeutralBackgroundInvertedDisabled", + "newVar": "--color-neutral-background-inverted-disabled", + "themeKey": "--color-neutral-background-inverted-disabled", + "tokensJs": "var(--color-neutral-background-inverted-disabled)", + "phase": "2a" + }, + { + "token": "colorNeutralStencil1", + "oldVar": "--colorNeutralStencil1", + "newVar": "--color-neutral-stencil-1", + "themeKey": "--color-neutral-stencil-1", + "tokensJs": "var(--color-neutral-stencil-1)", + "phase": "2a" + }, + { + "token": "colorNeutralStencil2", + "oldVar": "--colorNeutralStencil2", + "newVar": "--color-neutral-stencil-2", + "themeKey": "--color-neutral-stencil-2", + "tokensJs": "var(--color-neutral-stencil-2)", + "phase": "2a" + }, + { + "token": "colorNeutralStencil1Alpha", + "oldVar": "--colorNeutralStencil1Alpha", + "newVar": "--color-neutral-stencil-1-alpha", + "themeKey": "--color-neutral-stencil-1-alpha", + "tokensJs": "var(--color-neutral-stencil-1-alpha)", + "phase": "2a" + }, + { + "token": "colorNeutralStencil2Alpha", + "oldVar": "--colorNeutralStencil2Alpha", + "newVar": "--color-neutral-stencil-2-alpha", + "themeKey": "--color-neutral-stencil-2-alpha", + "tokensJs": "var(--color-neutral-stencil-2-alpha)", + "phase": "2a" + }, + { + "token": "colorBackgroundOverlay", + "oldVar": "--colorBackgroundOverlay", + "newVar": "--color-background-overlay", + "themeKey": "--color-background-overlay", + "tokensJs": "var(--color-background-overlay)", + "phase": "2a" + }, + { + "token": "colorScrollbarOverlay", + "oldVar": "--colorScrollbarOverlay", + "newVar": "--color-scrollbar-overlay", + "themeKey": "--color-scrollbar-overlay", + "tokensJs": "var(--color-scrollbar-overlay)", + "phase": "2a" + }, + { + "token": "colorBrandBackground", + "oldVar": "--colorBrandBackground", + "newVar": "--color-brand-background", + "themeKey": "--color-brand-background", + "tokensJs": "var(--color-brand-background)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundHover", + "oldVar": "--colorBrandBackgroundHover", + "newVar": "--color-brand-background-hover", + "themeKey": "--color-brand-background-hover", + "tokensJs": "var(--color-brand-background-hover)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundPressed", + "oldVar": "--colorBrandBackgroundPressed", + "newVar": "--color-brand-background-pressed", + "themeKey": "--color-brand-background-pressed", + "tokensJs": "var(--color-brand-background-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundSelected", + "oldVar": "--colorBrandBackgroundSelected", + "newVar": "--color-brand-background-selected", + "themeKey": "--color-brand-background-selected", + "tokensJs": "var(--color-brand-background-selected)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandBackground", + "oldVar": "--colorCompoundBrandBackground", + "newVar": "--color-compound-brand-background", + "themeKey": "--color-compound-brand-background", + "tokensJs": "var(--color-compound-brand-background)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandBackgroundHover", + "oldVar": "--colorCompoundBrandBackgroundHover", + "newVar": "--color-compound-brand-background-hover", + "themeKey": "--color-compound-brand-background-hover", + "tokensJs": "var(--color-compound-brand-background-hover)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandBackgroundPressed", + "oldVar": "--colorCompoundBrandBackgroundPressed", + "newVar": "--color-compound-brand-background-pressed", + "themeKey": "--color-compound-brand-background-pressed", + "tokensJs": "var(--color-compound-brand-background-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundStatic", + "oldVar": "--colorBrandBackgroundStatic", + "newVar": "--color-brand-background-static", + "themeKey": "--color-brand-background-static", + "tokensJs": "var(--color-brand-background-static)", + "phase": "2a" + }, + { + "token": "colorBrandBackground2", + "oldVar": "--colorBrandBackground2", + "newVar": "--color-brand-background-2", + "themeKey": "--color-brand-background-2", + "tokensJs": "var(--color-brand-background-2)", + "phase": "2a" + }, + { + "token": "colorBrandBackground2Hover", + "oldVar": "--colorBrandBackground2Hover", + "newVar": "--color-brand-background-2-hover", + "themeKey": "--color-brand-background-2-hover", + "tokensJs": "var(--color-brand-background-2-hover)", + "phase": "2a" + }, + { + "token": "colorBrandBackground2Pressed", + "oldVar": "--colorBrandBackground2Pressed", + "newVar": "--color-brand-background-2-pressed", + "themeKey": "--color-brand-background-2-pressed", + "tokensJs": "var(--color-brand-background-2-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandBackground3Static", + "oldVar": "--colorBrandBackground3Static", + "newVar": "--color-brand-background-3-static", + "themeKey": "--color-brand-background-3-static", + "tokensJs": "var(--color-brand-background-3-static)", + "phase": "2a" + }, + { + "token": "colorBrandBackground4Static", + "oldVar": "--colorBrandBackground4Static", + "newVar": "--color-brand-background-4-static", + "themeKey": "--color-brand-background-4-static", + "tokensJs": "var(--color-brand-background-4-static)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundInverted", + "oldVar": "--colorBrandBackgroundInverted", + "newVar": "--color-brand-background-inverted", + "themeKey": "--color-brand-background-inverted", + "tokensJs": "var(--color-brand-background-inverted)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundInvertedHover", + "oldVar": "--colorBrandBackgroundInvertedHover", + "newVar": "--color-brand-background-inverted-hover", + "themeKey": "--color-brand-background-inverted-hover", + "tokensJs": "var(--color-brand-background-inverted-hover)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundInvertedPressed", + "oldVar": "--colorBrandBackgroundInvertedPressed", + "newVar": "--color-brand-background-inverted-pressed", + "themeKey": "--color-brand-background-inverted-pressed", + "tokensJs": "var(--color-brand-background-inverted-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandBackgroundInvertedSelected", + "oldVar": "--colorBrandBackgroundInvertedSelected", + "newVar": "--color-brand-background-inverted-selected", + "themeKey": "--color-brand-background-inverted-selected", + "tokensJs": "var(--color-brand-background-inverted-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralCardBackground", + "oldVar": "--colorNeutralCardBackground", + "newVar": "--color-neutral-card-background", + "themeKey": "--color-neutral-card-background", + "tokensJs": "var(--color-neutral-card-background)", + "phase": "2a" + }, + { + "token": "colorNeutralCardBackgroundHover", + "oldVar": "--colorNeutralCardBackgroundHover", + "newVar": "--color-neutral-card-background-hover", + "themeKey": "--color-neutral-card-background-hover", + "tokensJs": "var(--color-neutral-card-background-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralCardBackgroundPressed", + "oldVar": "--colorNeutralCardBackgroundPressed", + "newVar": "--color-neutral-card-background-pressed", + "themeKey": "--color-neutral-card-background-pressed", + "tokensJs": "var(--color-neutral-card-background-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralCardBackgroundSelected", + "oldVar": "--colorNeutralCardBackgroundSelected", + "newVar": "--color-neutral-card-background-selected", + "themeKey": "--color-neutral-card-background-selected", + "tokensJs": "var(--color-neutral-card-background-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralCardBackgroundDisabled", + "oldVar": "--colorNeutralCardBackgroundDisabled", + "newVar": "--color-neutral-card-background-disabled", + "themeKey": "--color-neutral-card-background-disabled", + "tokensJs": "var(--color-neutral-card-background-disabled)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeAccessible", + "oldVar": "--colorNeutralStrokeAccessible", + "newVar": "--color-neutral-stroke-accessible", + "themeKey": "--color-neutral-stroke-accessible", + "tokensJs": "var(--color-neutral-stroke-accessible)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeAccessibleHover", + "oldVar": "--colorNeutralStrokeAccessibleHover", + "newVar": "--color-neutral-stroke-accessible-hover", + "themeKey": "--color-neutral-stroke-accessible-hover", + "tokensJs": "var(--color-neutral-stroke-accessible-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeAccessiblePressed", + "oldVar": "--colorNeutralStrokeAccessiblePressed", + "newVar": "--color-neutral-stroke-accessible-pressed", + "themeKey": "--color-neutral-stroke-accessible-pressed", + "tokensJs": "var(--color-neutral-stroke-accessible-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeAccessibleSelected", + "oldVar": "--colorNeutralStrokeAccessibleSelected", + "newVar": "--color-neutral-stroke-accessible-selected", + "themeKey": "--color-neutral-stroke-accessible-selected", + "tokensJs": "var(--color-neutral-stroke-accessible-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke1", + "oldVar": "--colorNeutralStroke1", + "newVar": "--color-neutral-stroke-1", + "themeKey": "--color-neutral-stroke-1", + "tokensJs": "var(--color-neutral-stroke-1)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke1Hover", + "oldVar": "--colorNeutralStroke1Hover", + "newVar": "--color-neutral-stroke-1-hover", + "themeKey": "--color-neutral-stroke-1-hover", + "tokensJs": "var(--color-neutral-stroke-1-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke1Pressed", + "oldVar": "--colorNeutralStroke1Pressed", + "newVar": "--color-neutral-stroke-1-pressed", + "themeKey": "--color-neutral-stroke-1-pressed", + "tokensJs": "var(--color-neutral-stroke-1-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke1Selected", + "oldVar": "--colorNeutralStroke1Selected", + "newVar": "--color-neutral-stroke-1-selected", + "themeKey": "--color-neutral-stroke-1-selected", + "tokensJs": "var(--color-neutral-stroke-1-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke2", + "oldVar": "--colorNeutralStroke2", + "newVar": "--color-neutral-stroke-2", + "themeKey": "--color-neutral-stroke-2", + "tokensJs": "var(--color-neutral-stroke-2)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke3", + "oldVar": "--colorNeutralStroke3", + "newVar": "--color-neutral-stroke-3", + "themeKey": "--color-neutral-stroke-3", + "tokensJs": "var(--color-neutral-stroke-3)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke4", + "oldVar": "--colorNeutralStroke4", + "newVar": "--color-neutral-stroke-4", + "themeKey": "--color-neutral-stroke-4", + "tokensJs": "var(--color-neutral-stroke-4)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke4Hover", + "oldVar": "--colorNeutralStroke4Hover", + "newVar": "--color-neutral-stroke-4-hover", + "themeKey": "--color-neutral-stroke-4-hover", + "tokensJs": "var(--color-neutral-stroke-4-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke4Pressed", + "oldVar": "--colorNeutralStroke4Pressed", + "newVar": "--color-neutral-stroke-4-pressed", + "themeKey": "--color-neutral-stroke-4-pressed", + "tokensJs": "var(--color-neutral-stroke-4-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralStroke4Selected", + "oldVar": "--colorNeutralStroke4Selected", + "newVar": "--color-neutral-stroke-4-selected", + "themeKey": "--color-neutral-stroke-4-selected", + "tokensJs": "var(--color-neutral-stroke-4-selected)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeSubtle", + "oldVar": "--colorNeutralStrokeSubtle", + "newVar": "--color-neutral-stroke-subtle", + "themeKey": "--color-neutral-stroke-subtle", + "tokensJs": "var(--color-neutral-stroke-subtle)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeOnBrand", + "oldVar": "--colorNeutralStrokeOnBrand", + "newVar": "--color-neutral-stroke-on-brand", + "themeKey": "--color-neutral-stroke-on-brand", + "tokensJs": "var(--color-neutral-stroke-on-brand)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeOnBrand2", + "oldVar": "--colorNeutralStrokeOnBrand2", + "newVar": "--color-neutral-stroke-on-brand-2", + "themeKey": "--color-neutral-stroke-on-brand-2", + "tokensJs": "var(--color-neutral-stroke-on-brand-2)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeOnBrand2Hover", + "oldVar": "--colorNeutralStrokeOnBrand2Hover", + "newVar": "--color-neutral-stroke-on-brand-2-hover", + "themeKey": "--color-neutral-stroke-on-brand-2-hover", + "tokensJs": "var(--color-neutral-stroke-on-brand-2-hover)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeOnBrand2Pressed", + "oldVar": "--colorNeutralStrokeOnBrand2Pressed", + "newVar": "--color-neutral-stroke-on-brand-2-pressed", + "themeKey": "--color-neutral-stroke-on-brand-2-pressed", + "tokensJs": "var(--color-neutral-stroke-on-brand-2-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeOnBrand2Selected", + "oldVar": "--colorNeutralStrokeOnBrand2Selected", + "newVar": "--color-neutral-stroke-on-brand-2-selected", + "themeKey": "--color-neutral-stroke-on-brand-2-selected", + "tokensJs": "var(--color-neutral-stroke-on-brand-2-selected)", + "phase": "2a" + }, + { + "token": "colorBrandStroke1", + "oldVar": "--colorBrandStroke1", + "newVar": "--color-brand-stroke-1", + "themeKey": "--color-brand-stroke-1", + "tokensJs": "var(--color-brand-stroke-1)", + "phase": "2a" + }, + { + "token": "colorBrandStroke2", + "oldVar": "--colorBrandStroke2", + "newVar": "--color-brand-stroke-2", + "themeKey": "--color-brand-stroke-2", + "tokensJs": "var(--color-brand-stroke-2)", + "phase": "2a" + }, + { + "token": "colorBrandStroke2Hover", + "oldVar": "--colorBrandStroke2Hover", + "newVar": "--color-brand-stroke-2-hover", + "themeKey": "--color-brand-stroke-2-hover", + "tokensJs": "var(--color-brand-stroke-2-hover)", + "phase": "2a" + }, + { + "token": "colorBrandStroke2Pressed", + "oldVar": "--colorBrandStroke2Pressed", + "newVar": "--color-brand-stroke-2-pressed", + "themeKey": "--color-brand-stroke-2-pressed", + "tokensJs": "var(--color-brand-stroke-2-pressed)", + "phase": "2a" + }, + { + "token": "colorBrandStroke2Contrast", + "oldVar": "--colorBrandStroke2Contrast", + "newVar": "--color-brand-stroke-2-contrast", + "themeKey": "--color-brand-stroke-2-contrast", + "tokensJs": "var(--color-brand-stroke-2-contrast)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandStroke", + "oldVar": "--colorCompoundBrandStroke", + "newVar": "--color-compound-brand-stroke", + "themeKey": "--color-compound-brand-stroke", + "tokensJs": "var(--color-compound-brand-stroke)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandStrokeHover", + "oldVar": "--colorCompoundBrandStrokeHover", + "newVar": "--color-compound-brand-stroke-hover", + "themeKey": "--color-compound-brand-stroke-hover", + "tokensJs": "var(--color-compound-brand-stroke-hover)", + "phase": "2a" + }, + { + "token": "colorCompoundBrandStrokePressed", + "oldVar": "--colorCompoundBrandStrokePressed", + "newVar": "--color-compound-brand-stroke-pressed", + "themeKey": "--color-compound-brand-stroke-pressed", + "tokensJs": "var(--color-compound-brand-stroke-pressed)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeDisabled", + "oldVar": "--colorNeutralStrokeDisabled", + "newVar": "--color-neutral-stroke-disabled", + "themeKey": "--color-neutral-stroke-disabled", + "tokensJs": "var(--color-neutral-stroke-disabled)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeDisabled2", + "oldVar": "--colorNeutralStrokeDisabled2", + "newVar": "--color-neutral-stroke-disabled-2", + "themeKey": "--color-neutral-stroke-disabled-2", + "tokensJs": "var(--color-neutral-stroke-disabled-2)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeInvertedDisabled", + "oldVar": "--colorNeutralStrokeInvertedDisabled", + "newVar": "--color-neutral-stroke-inverted-disabled", + "themeKey": "--color-neutral-stroke-inverted-disabled", + "tokensJs": "var(--color-neutral-stroke-inverted-disabled)", + "phase": "2a" + }, + { + "token": "colorTransparentStroke", + "oldVar": "--colorTransparentStroke", + "newVar": "--color-transparent-stroke", + "themeKey": "--color-transparent-stroke", + "tokensJs": "var(--color-transparent-stroke)", + "phase": "2a" + }, + { + "token": "colorTransparentStrokeInteractive", + "oldVar": "--colorTransparentStrokeInteractive", + "newVar": "--color-transparent-stroke-interactive", + "themeKey": "--color-transparent-stroke-interactive", + "tokensJs": "var(--color-transparent-stroke-interactive)", + "phase": "2a" + }, + { + "token": "colorTransparentStrokeDisabled", + "oldVar": "--colorTransparentStrokeDisabled", + "newVar": "--color-transparent-stroke-disabled", + "themeKey": "--color-transparent-stroke-disabled", + "tokensJs": "var(--color-transparent-stroke-disabled)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeAlpha", + "oldVar": "--colorNeutralStrokeAlpha", + "newVar": "--color-neutral-stroke-alpha", + "themeKey": "--color-neutral-stroke-alpha", + "tokensJs": "var(--color-neutral-stroke-alpha)", + "phase": "2a" + }, + { + "token": "colorNeutralStrokeAlpha2", + "oldVar": "--colorNeutralStrokeAlpha2", + "newVar": "--color-neutral-stroke-alpha-2", + "themeKey": "--color-neutral-stroke-alpha-2", + "tokensJs": "var(--color-neutral-stroke-alpha-2)", + "phase": "2a" + }, + { + "token": "colorStrokeFocus1", + "oldVar": "--colorStrokeFocus1", + "newVar": "--color-stroke-focus-1", + "themeKey": "--color-stroke-focus-1", + "tokensJs": "var(--color-stroke-focus-1)", + "phase": "2a" + }, + { + "token": "colorStrokeFocus2", + "oldVar": "--colorStrokeFocus2", + "newVar": "--color-stroke-focus-2", + "themeKey": "--color-stroke-focus-2", + "tokensJs": "var(--color-stroke-focus-2)", + "phase": "2a" + }, + { + "token": "colorNeutralShadowAmbient", + "oldVar": "--colorNeutralShadowAmbient", + "newVar": "--color-neutral-shadow-ambient", + "themeKey": "--color-neutral-shadow-ambient", + "tokensJs": "var(--color-neutral-shadow-ambient)", + "phase": "2a" + }, + { + "token": "colorNeutralShadowKey", + "oldVar": "--colorNeutralShadowKey", + "newVar": "--color-neutral-shadow-key", + "themeKey": "--color-neutral-shadow-key", + "tokensJs": "var(--color-neutral-shadow-key)", + "phase": "2a" + }, + { + "token": "colorNeutralShadowAmbientLighter", + "oldVar": "--colorNeutralShadowAmbientLighter", + "newVar": "--color-neutral-shadow-ambient-lighter", + "themeKey": "--color-neutral-shadow-ambient-lighter", + "tokensJs": "var(--color-neutral-shadow-ambient-lighter)", + "phase": "2a" + }, + { + "token": "colorNeutralShadowKeyLighter", + "oldVar": "--colorNeutralShadowKeyLighter", + "newVar": "--color-neutral-shadow-key-lighter", + "themeKey": "--color-neutral-shadow-key-lighter", + "tokensJs": "var(--color-neutral-shadow-key-lighter)", + "phase": "2a" + }, + { + "token": "colorNeutralShadowAmbientDarker", + "oldVar": "--colorNeutralShadowAmbientDarker", + "newVar": "--color-neutral-shadow-ambient-darker", + "themeKey": "--color-neutral-shadow-ambient-darker", + "tokensJs": "var(--color-neutral-shadow-ambient-darker)", + "phase": "2a" + }, + { + "token": "colorNeutralShadowKeyDarker", + "oldVar": "--colorNeutralShadowKeyDarker", + "newVar": "--color-neutral-shadow-key-darker", + "themeKey": "--color-neutral-shadow-key-darker", + "tokensJs": "var(--color-neutral-shadow-key-darker)", + "phase": "2a" + }, + { + "token": "colorBrandShadowAmbient", + "oldVar": "--colorBrandShadowAmbient", + "newVar": "--color-brand-shadow-ambient", + "themeKey": "--color-brand-shadow-ambient", + "tokensJs": "var(--color-brand-shadow-ambient)", + "phase": "2a" + }, + { + "token": "colorBrandShadowKey", + "oldVar": "--colorBrandShadowKey", + "newVar": "--color-brand-shadow-key", + "themeKey": "--color-brand-shadow-key", + "tokensJs": "var(--color-brand-shadow-key)", + "phase": "2a" + }, + { + "token": "colorPaletteRedBackground1", + "oldVar": "--colorPaletteRedBackground1", + "newVar": "--color-palette-red-background-1", + "themeKey": "--color-palette-red-background-1", + "tokensJs": "var(--color-palette-red-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteRedBackground2", + "oldVar": "--colorPaletteRedBackground2", + "newVar": "--color-palette-red-background-2", + "themeKey": "--color-palette-red-background-2", + "tokensJs": "var(--color-palette-red-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteRedBackground3", + "oldVar": "--colorPaletteRedBackground3", + "newVar": "--color-palette-red-background-3", + "themeKey": "--color-palette-red-background-3", + "tokensJs": "var(--color-palette-red-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteRedBorderActive", + "oldVar": "--colorPaletteRedBorderActive", + "newVar": "--color-palette-red-border-active", + "themeKey": "--color-palette-red-border-active", + "tokensJs": "var(--color-palette-red-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteRedBorder1", + "oldVar": "--colorPaletteRedBorder1", + "newVar": "--color-palette-red-border-1", + "themeKey": "--color-palette-red-border-1", + "tokensJs": "var(--color-palette-red-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteRedBorder2", + "oldVar": "--colorPaletteRedBorder2", + "newVar": "--color-palette-red-border-2", + "themeKey": "--color-palette-red-border-2", + "tokensJs": "var(--color-palette-red-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteRedForeground1", + "oldVar": "--colorPaletteRedForeground1", + "newVar": "--color-palette-red-foreground-1", + "themeKey": "--color-palette-red-foreground-1", + "tokensJs": "var(--color-palette-red-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteRedForeground2", + "oldVar": "--colorPaletteRedForeground2", + "newVar": "--color-palette-red-foreground-2", + "themeKey": "--color-palette-red-foreground-2", + "tokensJs": "var(--color-palette-red-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteRedForeground3", + "oldVar": "--colorPaletteRedForeground3", + "newVar": "--color-palette-red-foreground-3", + "themeKey": "--color-palette-red-foreground-3", + "tokensJs": "var(--color-palette-red-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteRedForegroundInverted", + "oldVar": "--colorPaletteRedForegroundInverted", + "newVar": "--color-palette-red-foreground-inverted", + "themeKey": "--color-palette-red-foreground-inverted", + "tokensJs": "var(--color-palette-red-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenBackground1", + "oldVar": "--colorPaletteGreenBackground1", + "newVar": "--color-palette-green-background-1", + "themeKey": "--color-palette-green-background-1", + "tokensJs": "var(--color-palette-green-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenBackground2", + "oldVar": "--colorPaletteGreenBackground2", + "newVar": "--color-palette-green-background-2", + "themeKey": "--color-palette-green-background-2", + "tokensJs": "var(--color-palette-green-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenBackground3", + "oldVar": "--colorPaletteGreenBackground3", + "newVar": "--color-palette-green-background-3", + "themeKey": "--color-palette-green-background-3", + "tokensJs": "var(--color-palette-green-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenBorderActive", + "oldVar": "--colorPaletteGreenBorderActive", + "newVar": "--color-palette-green-border-active", + "themeKey": "--color-palette-green-border-active", + "tokensJs": "var(--color-palette-green-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenBorder1", + "oldVar": "--colorPaletteGreenBorder1", + "newVar": "--color-palette-green-border-1", + "themeKey": "--color-palette-green-border-1", + "tokensJs": "var(--color-palette-green-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenBorder2", + "oldVar": "--colorPaletteGreenBorder2", + "newVar": "--color-palette-green-border-2", + "themeKey": "--color-palette-green-border-2", + "tokensJs": "var(--color-palette-green-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenForeground1", + "oldVar": "--colorPaletteGreenForeground1", + "newVar": "--color-palette-green-foreground-1", + "themeKey": "--color-palette-green-foreground-1", + "tokensJs": "var(--color-palette-green-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenForeground2", + "oldVar": "--colorPaletteGreenForeground2", + "newVar": "--color-palette-green-foreground-2", + "themeKey": "--color-palette-green-foreground-2", + "tokensJs": "var(--color-palette-green-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenForeground3", + "oldVar": "--colorPaletteGreenForeground3", + "newVar": "--color-palette-green-foreground-3", + "themeKey": "--color-palette-green-foreground-3", + "tokensJs": "var(--color-palette-green-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteGreenForegroundInverted", + "oldVar": "--colorPaletteGreenForegroundInverted", + "newVar": "--color-palette-green-foreground-inverted", + "themeKey": "--color-palette-green-foreground-inverted", + "tokensJs": "var(--color-palette-green-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeBackground1", + "oldVar": "--colorPaletteDarkOrangeBackground1", + "newVar": "--color-palette-dark-orange-background-1", + "themeKey": "--color-palette-dark-orange-background-1", + "tokensJs": "var(--color-palette-dark-orange-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeBackground2", + "oldVar": "--colorPaletteDarkOrangeBackground2", + "newVar": "--color-palette-dark-orange-background-2", + "themeKey": "--color-palette-dark-orange-background-2", + "tokensJs": "var(--color-palette-dark-orange-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeBackground3", + "oldVar": "--colorPaletteDarkOrangeBackground3", + "newVar": "--color-palette-dark-orange-background-3", + "themeKey": "--color-palette-dark-orange-background-3", + "tokensJs": "var(--color-palette-dark-orange-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeBorderActive", + "oldVar": "--colorPaletteDarkOrangeBorderActive", + "newVar": "--color-palette-dark-orange-border-active", + "themeKey": "--color-palette-dark-orange-border-active", + "tokensJs": "var(--color-palette-dark-orange-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeBorder1", + "oldVar": "--colorPaletteDarkOrangeBorder1", + "newVar": "--color-palette-dark-orange-border-1", + "themeKey": "--color-palette-dark-orange-border-1", + "tokensJs": "var(--color-palette-dark-orange-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeBorder2", + "oldVar": "--colorPaletteDarkOrangeBorder2", + "newVar": "--color-palette-dark-orange-border-2", + "themeKey": "--color-palette-dark-orange-border-2", + "tokensJs": "var(--color-palette-dark-orange-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeForeground1", + "oldVar": "--colorPaletteDarkOrangeForeground1", + "newVar": "--color-palette-dark-orange-foreground-1", + "themeKey": "--color-palette-dark-orange-foreground-1", + "tokensJs": "var(--color-palette-dark-orange-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeForeground2", + "oldVar": "--colorPaletteDarkOrangeForeground2", + "newVar": "--color-palette-dark-orange-foreground-2", + "themeKey": "--color-palette-dark-orange-foreground-2", + "tokensJs": "var(--color-palette-dark-orange-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkOrangeForeground3", + "oldVar": "--colorPaletteDarkOrangeForeground3", + "newVar": "--color-palette-dark-orange-foreground-3", + "themeKey": "--color-palette-dark-orange-foreground-3", + "tokensJs": "var(--color-palette-dark-orange-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowBackground1", + "oldVar": "--colorPaletteYellowBackground1", + "newVar": "--color-palette-yellow-background-1", + "themeKey": "--color-palette-yellow-background-1", + "tokensJs": "var(--color-palette-yellow-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowBackground2", + "oldVar": "--colorPaletteYellowBackground2", + "newVar": "--color-palette-yellow-background-2", + "themeKey": "--color-palette-yellow-background-2", + "tokensJs": "var(--color-palette-yellow-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowBackground3", + "oldVar": "--colorPaletteYellowBackground3", + "newVar": "--color-palette-yellow-background-3", + "themeKey": "--color-palette-yellow-background-3", + "tokensJs": "var(--color-palette-yellow-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowBorderActive", + "oldVar": "--colorPaletteYellowBorderActive", + "newVar": "--color-palette-yellow-border-active", + "themeKey": "--color-palette-yellow-border-active", + "tokensJs": "var(--color-palette-yellow-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowBorder1", + "oldVar": "--colorPaletteYellowBorder1", + "newVar": "--color-palette-yellow-border-1", + "themeKey": "--color-palette-yellow-border-1", + "tokensJs": "var(--color-palette-yellow-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowBorder2", + "oldVar": "--colorPaletteYellowBorder2", + "newVar": "--color-palette-yellow-border-2", + "themeKey": "--color-palette-yellow-border-2", + "tokensJs": "var(--color-palette-yellow-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowForeground1", + "oldVar": "--colorPaletteYellowForeground1", + "newVar": "--color-palette-yellow-foreground-1", + "themeKey": "--color-palette-yellow-foreground-1", + "tokensJs": "var(--color-palette-yellow-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowForeground2", + "oldVar": "--colorPaletteYellowForeground2", + "newVar": "--color-palette-yellow-foreground-2", + "themeKey": "--color-palette-yellow-foreground-2", + "tokensJs": "var(--color-palette-yellow-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowForeground3", + "oldVar": "--colorPaletteYellowForeground3", + "newVar": "--color-palette-yellow-foreground-3", + "themeKey": "--color-palette-yellow-foreground-3", + "tokensJs": "var(--color-palette-yellow-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteYellowForegroundInverted", + "oldVar": "--colorPaletteYellowForegroundInverted", + "newVar": "--color-palette-yellow-foreground-inverted", + "themeKey": "--color-palette-yellow-foreground-inverted", + "tokensJs": "var(--color-palette-yellow-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryBackground1", + "oldVar": "--colorPaletteBerryBackground1", + "newVar": "--color-palette-berry-background-1", + "themeKey": "--color-palette-berry-background-1", + "tokensJs": "var(--color-palette-berry-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryBackground2", + "oldVar": "--colorPaletteBerryBackground2", + "newVar": "--color-palette-berry-background-2", + "themeKey": "--color-palette-berry-background-2", + "tokensJs": "var(--color-palette-berry-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryBackground3", + "oldVar": "--colorPaletteBerryBackground3", + "newVar": "--color-palette-berry-background-3", + "themeKey": "--color-palette-berry-background-3", + "tokensJs": "var(--color-palette-berry-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryBorderActive", + "oldVar": "--colorPaletteBerryBorderActive", + "newVar": "--color-palette-berry-border-active", + "themeKey": "--color-palette-berry-border-active", + "tokensJs": "var(--color-palette-berry-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryBorder1", + "oldVar": "--colorPaletteBerryBorder1", + "newVar": "--color-palette-berry-border-1", + "themeKey": "--color-palette-berry-border-1", + "tokensJs": "var(--color-palette-berry-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryBorder2", + "oldVar": "--colorPaletteBerryBorder2", + "newVar": "--color-palette-berry-border-2", + "themeKey": "--color-palette-berry-border-2", + "tokensJs": "var(--color-palette-berry-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryForeground1", + "oldVar": "--colorPaletteBerryForeground1", + "newVar": "--color-palette-berry-foreground-1", + "themeKey": "--color-palette-berry-foreground-1", + "tokensJs": "var(--color-palette-berry-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryForeground2", + "oldVar": "--colorPaletteBerryForeground2", + "newVar": "--color-palette-berry-foreground-2", + "themeKey": "--color-palette-berry-foreground-2", + "tokensJs": "var(--color-palette-berry-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBerryForeground3", + "oldVar": "--colorPaletteBerryForeground3", + "newVar": "--color-palette-berry-foreground-3", + "themeKey": "--color-palette-berry-foreground-3", + "tokensJs": "var(--color-palette-berry-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldBackground1", + "oldVar": "--colorPaletteMarigoldBackground1", + "newVar": "--color-palette-marigold-background-1", + "themeKey": "--color-palette-marigold-background-1", + "tokensJs": "var(--color-palette-marigold-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldBackground2", + "oldVar": "--colorPaletteMarigoldBackground2", + "newVar": "--color-palette-marigold-background-2", + "themeKey": "--color-palette-marigold-background-2", + "tokensJs": "var(--color-palette-marigold-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldBackground3", + "oldVar": "--colorPaletteMarigoldBackground3", + "newVar": "--color-palette-marigold-background-3", + "themeKey": "--color-palette-marigold-background-3", + "tokensJs": "var(--color-palette-marigold-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldBorderActive", + "oldVar": "--colorPaletteMarigoldBorderActive", + "newVar": "--color-palette-marigold-border-active", + "themeKey": "--color-palette-marigold-border-active", + "tokensJs": "var(--color-palette-marigold-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldBorder1", + "oldVar": "--colorPaletteMarigoldBorder1", + "newVar": "--color-palette-marigold-border-1", + "themeKey": "--color-palette-marigold-border-1", + "tokensJs": "var(--color-palette-marigold-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldBorder2", + "oldVar": "--colorPaletteMarigoldBorder2", + "newVar": "--color-palette-marigold-border-2", + "themeKey": "--color-palette-marigold-border-2", + "tokensJs": "var(--color-palette-marigold-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldForeground1", + "oldVar": "--colorPaletteMarigoldForeground1", + "newVar": "--color-palette-marigold-foreground-1", + "themeKey": "--color-palette-marigold-foreground-1", + "tokensJs": "var(--color-palette-marigold-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldForeground2", + "oldVar": "--colorPaletteMarigoldForeground2", + "newVar": "--color-palette-marigold-foreground-2", + "themeKey": "--color-palette-marigold-foreground-2", + "tokensJs": "var(--color-palette-marigold-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMarigoldForeground3", + "oldVar": "--colorPaletteMarigoldForeground3", + "newVar": "--color-palette-marigold-foreground-3", + "themeKey": "--color-palette-marigold-foreground-3", + "tokensJs": "var(--color-palette-marigold-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenBackground1", + "oldVar": "--colorPaletteLightGreenBackground1", + "newVar": "--color-palette-light-green-background-1", + "themeKey": "--color-palette-light-green-background-1", + "tokensJs": "var(--color-palette-light-green-background-1)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenBackground2", + "oldVar": "--colorPaletteLightGreenBackground2", + "newVar": "--color-palette-light-green-background-2", + "themeKey": "--color-palette-light-green-background-2", + "tokensJs": "var(--color-palette-light-green-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenBackground3", + "oldVar": "--colorPaletteLightGreenBackground3", + "newVar": "--color-palette-light-green-background-3", + "themeKey": "--color-palette-light-green-background-3", + "tokensJs": "var(--color-palette-light-green-background-3)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenBorderActive", + "oldVar": "--colorPaletteLightGreenBorderActive", + "newVar": "--color-palette-light-green-border-active", + "themeKey": "--color-palette-light-green-border-active", + "tokensJs": "var(--color-palette-light-green-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenBorder1", + "oldVar": "--colorPaletteLightGreenBorder1", + "newVar": "--color-palette-light-green-border-1", + "themeKey": "--color-palette-light-green-border-1", + "tokensJs": "var(--color-palette-light-green-border-1)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenBorder2", + "oldVar": "--colorPaletteLightGreenBorder2", + "newVar": "--color-palette-light-green-border-2", + "themeKey": "--color-palette-light-green-border-2", + "tokensJs": "var(--color-palette-light-green-border-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenForeground1", + "oldVar": "--colorPaletteLightGreenForeground1", + "newVar": "--color-palette-light-green-foreground-1", + "themeKey": "--color-palette-light-green-foreground-1", + "tokensJs": "var(--color-palette-light-green-foreground-1)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenForeground2", + "oldVar": "--colorPaletteLightGreenForeground2", + "newVar": "--color-palette-light-green-foreground-2", + "themeKey": "--color-palette-light-green-foreground-2", + "tokensJs": "var(--color-palette-light-green-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLightGreenForeground3", + "oldVar": "--colorPaletteLightGreenForeground3", + "newVar": "--color-palette-light-green-foreground-3", + "themeKey": "--color-palette-light-green-foreground-3", + "tokensJs": "var(--color-palette-light-green-foreground-3)", + "phase": "2a" + }, + { + "token": "colorPaletteAnchorBackground2", + "oldVar": "--colorPaletteAnchorBackground2", + "newVar": "--color-palette-anchor-background-2", + "themeKey": "--color-palette-anchor-background-2", + "tokensJs": "var(--color-palette-anchor-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteAnchorBorderActive", + "oldVar": "--colorPaletteAnchorBorderActive", + "newVar": "--color-palette-anchor-border-active", + "themeKey": "--color-palette-anchor-border-active", + "tokensJs": "var(--color-palette-anchor-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteAnchorForeground2", + "oldVar": "--colorPaletteAnchorForeground2", + "newVar": "--color-palette-anchor-foreground-2", + "themeKey": "--color-palette-anchor-foreground-2", + "tokensJs": "var(--color-palette-anchor-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBeigeBackground2", + "oldVar": "--colorPaletteBeigeBackground2", + "newVar": "--color-palette-beige-background-2", + "themeKey": "--color-palette-beige-background-2", + "tokensJs": "var(--color-palette-beige-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBeigeBorderActive", + "oldVar": "--colorPaletteBeigeBorderActive", + "newVar": "--color-palette-beige-border-active", + "themeKey": "--color-palette-beige-border-active", + "tokensJs": "var(--color-palette-beige-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteBeigeForeground2", + "oldVar": "--colorPaletteBeigeForeground2", + "newVar": "--color-palette-beige-foreground-2", + "themeKey": "--color-palette-beige-foreground-2", + "tokensJs": "var(--color-palette-beige-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBlueBackground2", + "oldVar": "--colorPaletteBlueBackground2", + "newVar": "--color-palette-blue-background-2", + "themeKey": "--color-palette-blue-background-2", + "tokensJs": "var(--color-palette-blue-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBlueBorderActive", + "oldVar": "--colorPaletteBlueBorderActive", + "newVar": "--color-palette-blue-border-active", + "themeKey": "--color-palette-blue-border-active", + "tokensJs": "var(--color-palette-blue-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteBlueForeground2", + "oldVar": "--colorPaletteBlueForeground2", + "newVar": "--color-palette-blue-foreground-2", + "themeKey": "--color-palette-blue-foreground-2", + "tokensJs": "var(--color-palette-blue-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBrassBackground2", + "oldVar": "--colorPaletteBrassBackground2", + "newVar": "--color-palette-brass-background-2", + "themeKey": "--color-palette-brass-background-2", + "tokensJs": "var(--color-palette-brass-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBrassBorderActive", + "oldVar": "--colorPaletteBrassBorderActive", + "newVar": "--color-palette-brass-border-active", + "themeKey": "--color-palette-brass-border-active", + "tokensJs": "var(--color-palette-brass-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteBrassForeground2", + "oldVar": "--colorPaletteBrassForeground2", + "newVar": "--color-palette-brass-foreground-2", + "themeKey": "--color-palette-brass-foreground-2", + "tokensJs": "var(--color-palette-brass-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBrownBackground2", + "oldVar": "--colorPaletteBrownBackground2", + "newVar": "--color-palette-brown-background-2", + "themeKey": "--color-palette-brown-background-2", + "tokensJs": "var(--color-palette-brown-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteBrownBorderActive", + "oldVar": "--colorPaletteBrownBorderActive", + "newVar": "--color-palette-brown-border-active", + "themeKey": "--color-palette-brown-border-active", + "tokensJs": "var(--color-palette-brown-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteBrownForeground2", + "oldVar": "--colorPaletteBrownForeground2", + "newVar": "--color-palette-brown-foreground-2", + "themeKey": "--color-palette-brown-foreground-2", + "tokensJs": "var(--color-palette-brown-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteCornflowerBackground2", + "oldVar": "--colorPaletteCornflowerBackground2", + "newVar": "--color-palette-cornflower-background-2", + "themeKey": "--color-palette-cornflower-background-2", + "tokensJs": "var(--color-palette-cornflower-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteCornflowerBorderActive", + "oldVar": "--colorPaletteCornflowerBorderActive", + "newVar": "--color-palette-cornflower-border-active", + "themeKey": "--color-palette-cornflower-border-active", + "tokensJs": "var(--color-palette-cornflower-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteCornflowerForeground2", + "oldVar": "--colorPaletteCornflowerForeground2", + "newVar": "--color-palette-cornflower-foreground-2", + "themeKey": "--color-palette-cornflower-foreground-2", + "tokensJs": "var(--color-palette-cornflower-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteCranberryBackground2", + "oldVar": "--colorPaletteCranberryBackground2", + "newVar": "--color-palette-cranberry-background-2", + "themeKey": "--color-palette-cranberry-background-2", + "tokensJs": "var(--color-palette-cranberry-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteCranberryBorderActive", + "oldVar": "--colorPaletteCranberryBorderActive", + "newVar": "--color-palette-cranberry-border-active", + "themeKey": "--color-palette-cranberry-border-active", + "tokensJs": "var(--color-palette-cranberry-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteCranberryForeground2", + "oldVar": "--colorPaletteCranberryForeground2", + "newVar": "--color-palette-cranberry-foreground-2", + "themeKey": "--color-palette-cranberry-foreground-2", + "tokensJs": "var(--color-palette-cranberry-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkGreenBackground2", + "oldVar": "--colorPaletteDarkGreenBackground2", + "newVar": "--color-palette-dark-green-background-2", + "themeKey": "--color-palette-dark-green-background-2", + "tokensJs": "var(--color-palette-dark-green-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkGreenBorderActive", + "oldVar": "--colorPaletteDarkGreenBorderActive", + "newVar": "--color-palette-dark-green-border-active", + "themeKey": "--color-palette-dark-green-border-active", + "tokensJs": "var(--color-palette-dark-green-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkGreenForeground2", + "oldVar": "--colorPaletteDarkGreenForeground2", + "newVar": "--color-palette-dark-green-foreground-2", + "themeKey": "--color-palette-dark-green-foreground-2", + "tokensJs": "var(--color-palette-dark-green-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkRedBackground2", + "oldVar": "--colorPaletteDarkRedBackground2", + "newVar": "--color-palette-dark-red-background-2", + "themeKey": "--color-palette-dark-red-background-2", + "tokensJs": "var(--color-palette-dark-red-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkRedBorderActive", + "oldVar": "--colorPaletteDarkRedBorderActive", + "newVar": "--color-palette-dark-red-border-active", + "themeKey": "--color-palette-dark-red-border-active", + "tokensJs": "var(--color-palette-dark-red-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteDarkRedForeground2", + "oldVar": "--colorPaletteDarkRedForeground2", + "newVar": "--color-palette-dark-red-foreground-2", + "themeKey": "--color-palette-dark-red-foreground-2", + "tokensJs": "var(--color-palette-dark-red-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteForestBackground2", + "oldVar": "--colorPaletteForestBackground2", + "newVar": "--color-palette-forest-background-2", + "themeKey": "--color-palette-forest-background-2", + "tokensJs": "var(--color-palette-forest-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteForestBorderActive", + "oldVar": "--colorPaletteForestBorderActive", + "newVar": "--color-palette-forest-border-active", + "themeKey": "--color-palette-forest-border-active", + "tokensJs": "var(--color-palette-forest-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteForestForeground2", + "oldVar": "--colorPaletteForestForeground2", + "newVar": "--color-palette-forest-foreground-2", + "themeKey": "--color-palette-forest-foreground-2", + "tokensJs": "var(--color-palette-forest-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGoldBackground2", + "oldVar": "--colorPaletteGoldBackground2", + "newVar": "--color-palette-gold-background-2", + "themeKey": "--color-palette-gold-background-2", + "tokensJs": "var(--color-palette-gold-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGoldBorderActive", + "oldVar": "--colorPaletteGoldBorderActive", + "newVar": "--color-palette-gold-border-active", + "themeKey": "--color-palette-gold-border-active", + "tokensJs": "var(--color-palette-gold-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteGoldForeground2", + "oldVar": "--colorPaletteGoldForeground2", + "newVar": "--color-palette-gold-foreground-2", + "themeKey": "--color-palette-gold-foreground-2", + "tokensJs": "var(--color-palette-gold-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGrapeBackground2", + "oldVar": "--colorPaletteGrapeBackground2", + "newVar": "--color-palette-grape-background-2", + "themeKey": "--color-palette-grape-background-2", + "tokensJs": "var(--color-palette-grape-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteGrapeBorderActive", + "oldVar": "--colorPaletteGrapeBorderActive", + "newVar": "--color-palette-grape-border-active", + "themeKey": "--color-palette-grape-border-active", + "tokensJs": "var(--color-palette-grape-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteGrapeForeground2", + "oldVar": "--colorPaletteGrapeForeground2", + "newVar": "--color-palette-grape-foreground-2", + "themeKey": "--color-palette-grape-foreground-2", + "tokensJs": "var(--color-palette-grape-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLavenderBackground2", + "oldVar": "--colorPaletteLavenderBackground2", + "newVar": "--color-palette-lavender-background-2", + "themeKey": "--color-palette-lavender-background-2", + "tokensJs": "var(--color-palette-lavender-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLavenderBorderActive", + "oldVar": "--colorPaletteLavenderBorderActive", + "newVar": "--color-palette-lavender-border-active", + "themeKey": "--color-palette-lavender-border-active", + "tokensJs": "var(--color-palette-lavender-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteLavenderForeground2", + "oldVar": "--colorPaletteLavenderForeground2", + "newVar": "--color-palette-lavender-foreground-2", + "themeKey": "--color-palette-lavender-foreground-2", + "tokensJs": "var(--color-palette-lavender-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLightTealBackground2", + "oldVar": "--colorPaletteLightTealBackground2", + "newVar": "--color-palette-light-teal-background-2", + "themeKey": "--color-palette-light-teal-background-2", + "tokensJs": "var(--color-palette-light-teal-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLightTealBorderActive", + "oldVar": "--colorPaletteLightTealBorderActive", + "newVar": "--color-palette-light-teal-border-active", + "themeKey": "--color-palette-light-teal-border-active", + "tokensJs": "var(--color-palette-light-teal-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteLightTealForeground2", + "oldVar": "--colorPaletteLightTealForeground2", + "newVar": "--color-palette-light-teal-foreground-2", + "themeKey": "--color-palette-light-teal-foreground-2", + "tokensJs": "var(--color-palette-light-teal-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLilacBackground2", + "oldVar": "--colorPaletteLilacBackground2", + "newVar": "--color-palette-lilac-background-2", + "themeKey": "--color-palette-lilac-background-2", + "tokensJs": "var(--color-palette-lilac-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteLilacBorderActive", + "oldVar": "--colorPaletteLilacBorderActive", + "newVar": "--color-palette-lilac-border-active", + "themeKey": "--color-palette-lilac-border-active", + "tokensJs": "var(--color-palette-lilac-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteLilacForeground2", + "oldVar": "--colorPaletteLilacForeground2", + "newVar": "--color-palette-lilac-foreground-2", + "themeKey": "--color-palette-lilac-foreground-2", + "tokensJs": "var(--color-palette-lilac-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMagentaBackground2", + "oldVar": "--colorPaletteMagentaBackground2", + "newVar": "--color-palette-magenta-background-2", + "themeKey": "--color-palette-magenta-background-2", + "tokensJs": "var(--color-palette-magenta-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMagentaBorderActive", + "oldVar": "--colorPaletteMagentaBorderActive", + "newVar": "--color-palette-magenta-border-active", + "themeKey": "--color-palette-magenta-border-active", + "tokensJs": "var(--color-palette-magenta-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteMagentaForeground2", + "oldVar": "--colorPaletteMagentaForeground2", + "newVar": "--color-palette-magenta-foreground-2", + "themeKey": "--color-palette-magenta-foreground-2", + "tokensJs": "var(--color-palette-magenta-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMinkBackground2", + "oldVar": "--colorPaletteMinkBackground2", + "newVar": "--color-palette-mink-background-2", + "themeKey": "--color-palette-mink-background-2", + "tokensJs": "var(--color-palette-mink-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteMinkBorderActive", + "oldVar": "--colorPaletteMinkBorderActive", + "newVar": "--color-palette-mink-border-active", + "themeKey": "--color-palette-mink-border-active", + "tokensJs": "var(--color-palette-mink-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteMinkForeground2", + "oldVar": "--colorPaletteMinkForeground2", + "newVar": "--color-palette-mink-foreground-2", + "themeKey": "--color-palette-mink-foreground-2", + "tokensJs": "var(--color-palette-mink-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteNavyBackground2", + "oldVar": "--colorPaletteNavyBackground2", + "newVar": "--color-palette-navy-background-2", + "themeKey": "--color-palette-navy-background-2", + "tokensJs": "var(--color-palette-navy-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteNavyBorderActive", + "oldVar": "--colorPaletteNavyBorderActive", + "newVar": "--color-palette-navy-border-active", + "themeKey": "--color-palette-navy-border-active", + "tokensJs": "var(--color-palette-navy-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteNavyForeground2", + "oldVar": "--colorPaletteNavyForeground2", + "newVar": "--color-palette-navy-foreground-2", + "themeKey": "--color-palette-navy-foreground-2", + "tokensJs": "var(--color-palette-navy-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPalettePeachBackground2", + "oldVar": "--colorPalettePeachBackground2", + "newVar": "--color-palette-peach-background-2", + "themeKey": "--color-palette-peach-background-2", + "tokensJs": "var(--color-palette-peach-background-2)", + "phase": "2a" + }, + { + "token": "colorPalettePeachBorderActive", + "oldVar": "--colorPalettePeachBorderActive", + "newVar": "--color-palette-peach-border-active", + "themeKey": "--color-palette-peach-border-active", + "tokensJs": "var(--color-palette-peach-border-active)", + "phase": "2a" + }, + { + "token": "colorPalettePeachForeground2", + "oldVar": "--colorPalettePeachForeground2", + "newVar": "--color-palette-peach-foreground-2", + "themeKey": "--color-palette-peach-foreground-2", + "tokensJs": "var(--color-palette-peach-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPalettePinkBackground2", + "oldVar": "--colorPalettePinkBackground2", + "newVar": "--color-palette-pink-background-2", + "themeKey": "--color-palette-pink-background-2", + "tokensJs": "var(--color-palette-pink-background-2)", + "phase": "2a" + }, + { + "token": "colorPalettePinkBorderActive", + "oldVar": "--colorPalettePinkBorderActive", + "newVar": "--color-palette-pink-border-active", + "themeKey": "--color-palette-pink-border-active", + "tokensJs": "var(--color-palette-pink-border-active)", + "phase": "2a" + }, + { + "token": "colorPalettePinkForeground2", + "oldVar": "--colorPalettePinkForeground2", + "newVar": "--color-palette-pink-foreground-2", + "themeKey": "--color-palette-pink-foreground-2", + "tokensJs": "var(--color-palette-pink-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPalettePlatinumBackground2", + "oldVar": "--colorPalettePlatinumBackground2", + "newVar": "--color-palette-platinum-background-2", + "themeKey": "--color-palette-platinum-background-2", + "tokensJs": "var(--color-palette-platinum-background-2)", + "phase": "2a" + }, + { + "token": "colorPalettePlatinumBorderActive", + "oldVar": "--colorPalettePlatinumBorderActive", + "newVar": "--color-palette-platinum-border-active", + "themeKey": "--color-palette-platinum-border-active", + "tokensJs": "var(--color-palette-platinum-border-active)", + "phase": "2a" + }, + { + "token": "colorPalettePlatinumForeground2", + "oldVar": "--colorPalettePlatinumForeground2", + "newVar": "--color-palette-platinum-foreground-2", + "themeKey": "--color-palette-platinum-foreground-2", + "tokensJs": "var(--color-palette-platinum-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPalettePlumBackground2", + "oldVar": "--colorPalettePlumBackground2", + "newVar": "--color-palette-plum-background-2", + "themeKey": "--color-palette-plum-background-2", + "tokensJs": "var(--color-palette-plum-background-2)", + "phase": "2a" + }, + { + "token": "colorPalettePlumBorderActive", + "oldVar": "--colorPalettePlumBorderActive", + "newVar": "--color-palette-plum-border-active", + "themeKey": "--color-palette-plum-border-active", + "tokensJs": "var(--color-palette-plum-border-active)", + "phase": "2a" + }, + { + "token": "colorPalettePlumForeground2", + "oldVar": "--colorPalettePlumForeground2", + "newVar": "--color-palette-plum-foreground-2", + "themeKey": "--color-palette-plum-foreground-2", + "tokensJs": "var(--color-palette-plum-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPalettePumpkinBackground2", + "oldVar": "--colorPalettePumpkinBackground2", + "newVar": "--color-palette-pumpkin-background-2", + "themeKey": "--color-palette-pumpkin-background-2", + "tokensJs": "var(--color-palette-pumpkin-background-2)", + "phase": "2a" + }, + { + "token": "colorPalettePumpkinBorderActive", + "oldVar": "--colorPalettePumpkinBorderActive", + "newVar": "--color-palette-pumpkin-border-active", + "themeKey": "--color-palette-pumpkin-border-active", + "tokensJs": "var(--color-palette-pumpkin-border-active)", + "phase": "2a" + }, + { + "token": "colorPalettePumpkinForeground2", + "oldVar": "--colorPalettePumpkinForeground2", + "newVar": "--color-palette-pumpkin-foreground-2", + "themeKey": "--color-palette-pumpkin-foreground-2", + "tokensJs": "var(--color-palette-pumpkin-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPalettePurpleBackground2", + "oldVar": "--colorPalettePurpleBackground2", + "newVar": "--color-palette-purple-background-2", + "themeKey": "--color-palette-purple-background-2", + "tokensJs": "var(--color-palette-purple-background-2)", + "phase": "2a" + }, + { + "token": "colorPalettePurpleBorderActive", + "oldVar": "--colorPalettePurpleBorderActive", + "newVar": "--color-palette-purple-border-active", + "themeKey": "--color-palette-purple-border-active", + "tokensJs": "var(--color-palette-purple-border-active)", + "phase": "2a" + }, + { + "token": "colorPalettePurpleForeground2", + "oldVar": "--colorPalettePurpleForeground2", + "newVar": "--color-palette-purple-foreground-2", + "themeKey": "--color-palette-purple-foreground-2", + "tokensJs": "var(--color-palette-purple-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteRoyalBlueBackground2", + "oldVar": "--colorPaletteRoyalBlueBackground2", + "newVar": "--color-palette-royal-blue-background-2", + "themeKey": "--color-palette-royal-blue-background-2", + "tokensJs": "var(--color-palette-royal-blue-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteRoyalBlueBorderActive", + "oldVar": "--colorPaletteRoyalBlueBorderActive", + "newVar": "--color-palette-royal-blue-border-active", + "themeKey": "--color-palette-royal-blue-border-active", + "tokensJs": "var(--color-palette-royal-blue-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteRoyalBlueForeground2", + "oldVar": "--colorPaletteRoyalBlueForeground2", + "newVar": "--color-palette-royal-blue-foreground-2", + "themeKey": "--color-palette-royal-blue-foreground-2", + "tokensJs": "var(--color-palette-royal-blue-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteSeafoamBackground2", + "oldVar": "--colorPaletteSeafoamBackground2", + "newVar": "--color-palette-seafoam-background-2", + "themeKey": "--color-palette-seafoam-background-2", + "tokensJs": "var(--color-palette-seafoam-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteSeafoamBorderActive", + "oldVar": "--colorPaletteSeafoamBorderActive", + "newVar": "--color-palette-seafoam-border-active", + "themeKey": "--color-palette-seafoam-border-active", + "tokensJs": "var(--color-palette-seafoam-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteSeafoamForeground2", + "oldVar": "--colorPaletteSeafoamForeground2", + "newVar": "--color-palette-seafoam-foreground-2", + "themeKey": "--color-palette-seafoam-foreground-2", + "tokensJs": "var(--color-palette-seafoam-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteSteelBackground2", + "oldVar": "--colorPaletteSteelBackground2", + "newVar": "--color-palette-steel-background-2", + "themeKey": "--color-palette-steel-background-2", + "tokensJs": "var(--color-palette-steel-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteSteelBorderActive", + "oldVar": "--colorPaletteSteelBorderActive", + "newVar": "--color-palette-steel-border-active", + "themeKey": "--color-palette-steel-border-active", + "tokensJs": "var(--color-palette-steel-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteSteelForeground2", + "oldVar": "--colorPaletteSteelForeground2", + "newVar": "--color-palette-steel-foreground-2", + "themeKey": "--color-palette-steel-foreground-2", + "tokensJs": "var(--color-palette-steel-foreground-2)", + "phase": "2a" + }, + { + "token": "colorPaletteTealBackground2", + "oldVar": "--colorPaletteTealBackground2", + "newVar": "--color-palette-teal-background-2", + "themeKey": "--color-palette-teal-background-2", + "tokensJs": "var(--color-palette-teal-background-2)", + "phase": "2a" + }, + { + "token": "colorPaletteTealBorderActive", + "oldVar": "--colorPaletteTealBorderActive", + "newVar": "--color-palette-teal-border-active", + "themeKey": "--color-palette-teal-border-active", + "tokensJs": "var(--color-palette-teal-border-active)", + "phase": "2a" + }, + { + "token": "colorPaletteTealForeground2", + "oldVar": "--colorPaletteTealForeground2", + "newVar": "--color-palette-teal-foreground-2", + "themeKey": "--color-palette-teal-foreground-2", + "tokensJs": "var(--color-palette-teal-foreground-2)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessBackground1", + "oldVar": "--colorStatusSuccessBackground1", + "newVar": "--color-status-success-background-1", + "themeKey": "--color-status-success-background-1", + "tokensJs": "var(--color-status-success-background-1)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessBackground2", + "oldVar": "--colorStatusSuccessBackground2", + "newVar": "--color-status-success-background-2", + "themeKey": "--color-status-success-background-2", + "tokensJs": "var(--color-status-success-background-2)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessBackground3", + "oldVar": "--colorStatusSuccessBackground3", + "newVar": "--color-status-success-background-3", + "themeKey": "--color-status-success-background-3", + "tokensJs": "var(--color-status-success-background-3)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessForeground1", + "oldVar": "--colorStatusSuccessForeground1", + "newVar": "--color-status-success-foreground-1", + "themeKey": "--color-status-success-foreground-1", + "tokensJs": "var(--color-status-success-foreground-1)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessForeground2", + "oldVar": "--colorStatusSuccessForeground2", + "newVar": "--color-status-success-foreground-2", + "themeKey": "--color-status-success-foreground-2", + "tokensJs": "var(--color-status-success-foreground-2)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessForeground3", + "oldVar": "--colorStatusSuccessForeground3", + "newVar": "--color-status-success-foreground-3", + "themeKey": "--color-status-success-foreground-3", + "tokensJs": "var(--color-status-success-foreground-3)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessForegroundInverted", + "oldVar": "--colorStatusSuccessForegroundInverted", + "newVar": "--color-status-success-foreground-inverted", + "themeKey": "--color-status-success-foreground-inverted", + "tokensJs": "var(--color-status-success-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessBorderActive", + "oldVar": "--colorStatusSuccessBorderActive", + "newVar": "--color-status-success-border-active", + "themeKey": "--color-status-success-border-active", + "tokensJs": "var(--color-status-success-border-active)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessBorder1", + "oldVar": "--colorStatusSuccessBorder1", + "newVar": "--color-status-success-border-1", + "themeKey": "--color-status-success-border-1", + "tokensJs": "var(--color-status-success-border-1)", + "phase": "2a" + }, + { + "token": "colorStatusSuccessBorder2", + "oldVar": "--colorStatusSuccessBorder2", + "newVar": "--color-status-success-border-2", + "themeKey": "--color-status-success-border-2", + "tokensJs": "var(--color-status-success-border-2)", + "phase": "2a" + }, + { + "token": "colorStatusWarningBackground1", + "oldVar": "--colorStatusWarningBackground1", + "newVar": "--color-status-warning-background-1", + "themeKey": "--color-status-warning-background-1", + "tokensJs": "var(--color-status-warning-background-1)", + "phase": "2a" + }, + { + "token": "colorStatusWarningBackground2", + "oldVar": "--colorStatusWarningBackground2", + "newVar": "--color-status-warning-background-2", + "themeKey": "--color-status-warning-background-2", + "tokensJs": "var(--color-status-warning-background-2)", + "phase": "2a" + }, + { + "token": "colorStatusWarningBackground3", + "oldVar": "--colorStatusWarningBackground3", + "newVar": "--color-status-warning-background-3", + "themeKey": "--color-status-warning-background-3", + "tokensJs": "var(--color-status-warning-background-3)", + "phase": "2a" + }, + { + "token": "colorStatusWarningForeground1", + "oldVar": "--colorStatusWarningForeground1", + "newVar": "--color-status-warning-foreground-1", + "themeKey": "--color-status-warning-foreground-1", + "tokensJs": "var(--color-status-warning-foreground-1)", + "phase": "2a" + }, + { + "token": "colorStatusWarningForeground2", + "oldVar": "--colorStatusWarningForeground2", + "newVar": "--color-status-warning-foreground-2", + "themeKey": "--color-status-warning-foreground-2", + "tokensJs": "var(--color-status-warning-foreground-2)", + "phase": "2a" + }, + { + "token": "colorStatusWarningForeground3", + "oldVar": "--colorStatusWarningForeground3", + "newVar": "--color-status-warning-foreground-3", + "themeKey": "--color-status-warning-foreground-3", + "tokensJs": "var(--color-status-warning-foreground-3)", + "phase": "2a" + }, + { + "token": "colorStatusWarningForegroundInverted", + "oldVar": "--colorStatusWarningForegroundInverted", + "newVar": "--color-status-warning-foreground-inverted", + "themeKey": "--color-status-warning-foreground-inverted", + "tokensJs": "var(--color-status-warning-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorStatusWarningBorderActive", + "oldVar": "--colorStatusWarningBorderActive", + "newVar": "--color-status-warning-border-active", + "themeKey": "--color-status-warning-border-active", + "tokensJs": "var(--color-status-warning-border-active)", + "phase": "2a" + }, + { + "token": "colorStatusWarningBorder1", + "oldVar": "--colorStatusWarningBorder1", + "newVar": "--color-status-warning-border-1", + "themeKey": "--color-status-warning-border-1", + "tokensJs": "var(--color-status-warning-border-1)", + "phase": "2a" + }, + { + "token": "colorStatusWarningBorder2", + "oldVar": "--colorStatusWarningBorder2", + "newVar": "--color-status-warning-border-2", + "themeKey": "--color-status-warning-border-2", + "tokensJs": "var(--color-status-warning-border-2)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBackground1", + "oldVar": "--colorStatusDangerBackground1", + "newVar": "--color-status-danger-background-1", + "themeKey": "--color-status-danger-background-1", + "tokensJs": "var(--color-status-danger-background-1)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBackground2", + "oldVar": "--colorStatusDangerBackground2", + "newVar": "--color-status-danger-background-2", + "themeKey": "--color-status-danger-background-2", + "tokensJs": "var(--color-status-danger-background-2)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBackground3", + "oldVar": "--colorStatusDangerBackground3", + "newVar": "--color-status-danger-background-3", + "themeKey": "--color-status-danger-background-3", + "tokensJs": "var(--color-status-danger-background-3)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBackground3Hover", + "oldVar": "--colorStatusDangerBackground3Hover", + "newVar": "--color-status-danger-background-3-hover", + "themeKey": "--color-status-danger-background-3-hover", + "tokensJs": "var(--color-status-danger-background-3-hover)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBackground3Pressed", + "oldVar": "--colorStatusDangerBackground3Pressed", + "newVar": "--color-status-danger-background-3-pressed", + "themeKey": "--color-status-danger-background-3-pressed", + "tokensJs": "var(--color-status-danger-background-3-pressed)", + "phase": "2a" + }, + { + "token": "colorStatusDangerForeground1", + "oldVar": "--colorStatusDangerForeground1", + "newVar": "--color-status-danger-foreground-1", + "themeKey": "--color-status-danger-foreground-1", + "tokensJs": "var(--color-status-danger-foreground-1)", + "phase": "2a" + }, + { + "token": "colorStatusDangerForeground2", + "oldVar": "--colorStatusDangerForeground2", + "newVar": "--color-status-danger-foreground-2", + "themeKey": "--color-status-danger-foreground-2", + "tokensJs": "var(--color-status-danger-foreground-2)", + "phase": "2a" + }, + { + "token": "colorStatusDangerForeground3", + "oldVar": "--colorStatusDangerForeground3", + "newVar": "--color-status-danger-foreground-3", + "themeKey": "--color-status-danger-foreground-3", + "tokensJs": "var(--color-status-danger-foreground-3)", + "phase": "2a" + }, + { + "token": "colorStatusDangerForegroundInverted", + "oldVar": "--colorStatusDangerForegroundInverted", + "newVar": "--color-status-danger-foreground-inverted", + "themeKey": "--color-status-danger-foreground-inverted", + "tokensJs": "var(--color-status-danger-foreground-inverted)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBorderActive", + "oldVar": "--colorStatusDangerBorderActive", + "newVar": "--color-status-danger-border-active", + "themeKey": "--color-status-danger-border-active", + "tokensJs": "var(--color-status-danger-border-active)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBorder1", + "oldVar": "--colorStatusDangerBorder1", + "newVar": "--color-status-danger-border-1", + "themeKey": "--color-status-danger-border-1", + "tokensJs": "var(--color-status-danger-border-1)", + "phase": "2a" + }, + { + "token": "colorStatusDangerBorder2", + "oldVar": "--colorStatusDangerBorder2", + "newVar": "--color-status-danger-border-2", + "themeKey": "--color-status-danger-border-2", + "tokensJs": "var(--color-status-danger-border-2)", + "phase": "2a" + }, + { + "token": "borderRadiusNone", + "oldVar": "--borderRadiusNone", + "newVar": "--radius-none", + "themeKey": "--radius-none", + "tokensJs": "var(--radius-none)", + "phase": "2a" + }, + { + "token": "borderRadiusSmall", + "oldVar": "--borderRadiusSmall", + "newVar": "--radius-small", + "themeKey": "--radius-small", + "tokensJs": "var(--radius-small)", + "phase": "2a" + }, + { + "token": "borderRadiusMedium", + "oldVar": "--borderRadiusMedium", + "newVar": "--radius-medium", + "themeKey": "--radius-medium", + "tokensJs": "var(--radius-medium)", + "phase": "2a" + }, + { + "token": "borderRadiusLarge", + "oldVar": "--borderRadiusLarge", + "newVar": "--radius-large", + "themeKey": "--radius-large", + "tokensJs": "var(--radius-large)", + "phase": "2a" + }, + { + "token": "borderRadiusXLarge", + "oldVar": "--borderRadiusXLarge", + "newVar": "--radius-x-large", + "themeKey": "--radius-x-large", + "tokensJs": "var(--radius-x-large)", + "phase": "2a" + }, + { + "token": "borderRadius2XLarge", + "oldVar": "--borderRadius2XLarge", + "newVar": "--radius-2-x-large", + "themeKey": "--radius-2-x-large", + "tokensJs": "var(--radius-2-x-large)", + "phase": "2a" + }, + { + "token": "borderRadius3XLarge", + "oldVar": "--borderRadius3XLarge", + "newVar": "--radius-3-x-large", + "themeKey": "--radius-3-x-large", + "tokensJs": "var(--radius-3-x-large)", + "phase": "2a" + }, + { + "token": "borderRadius4XLarge", + "oldVar": "--borderRadius4XLarge", + "newVar": "--radius-4-x-large", + "themeKey": "--radius-4-x-large", + "tokensJs": "var(--radius-4-x-large)", + "phase": "2a" + }, + { + "token": "borderRadius5XLarge", + "oldVar": "--borderRadius5XLarge", + "newVar": "--radius-5-x-large", + "themeKey": "--radius-5-x-large", + "tokensJs": "var(--radius-5-x-large)", + "phase": "2a" + }, + { + "token": "borderRadius6XLarge", + "oldVar": "--borderRadius6XLarge", + "newVar": "--radius-6-x-large", + "themeKey": "--radius-6-x-large", + "tokensJs": "var(--radius-6-x-large)", + "phase": "2a" + }, + { + "token": "borderRadiusCircular", + "oldVar": "--borderRadiusCircular", + "newVar": "--radius-circular", + "themeKey": "--radius-circular", + "tokensJs": "var(--radius-circular)", + "phase": "2a" + }, + { + "token": "fontFamilyBase", + "oldVar": "--fontFamilyBase", + "newVar": "--font-base", + "themeKey": "--font-base", + "tokensJs": "var(--font-base)", + "phase": "2a" + }, + { + "token": "fontFamilyMonospace", + "oldVar": "--fontFamilyMonospace", + "newVar": "--font-monospace", + "themeKey": "--font-monospace", + "tokensJs": "var(--font-monospace)", + "phase": "2a" + }, + { + "token": "fontFamilyNumeric", + "oldVar": "--fontFamilyNumeric", + "newVar": "--font-numeric", + "themeKey": "--font-numeric", + "tokensJs": "var(--font-numeric)", + "phase": "2a" + }, + { + "token": "fontSizeBase100", + "oldVar": "--fontSizeBase100", + "newVar": "--text-base-100", + "themeKey": "--text-base-100", + "tokensJs": "var(--text-base-100)", + "phase": "2a" + }, + { + "token": "fontSizeBase200", + "oldVar": "--fontSizeBase200", + "newVar": "--text-base-200", + "themeKey": "--text-base-200", + "tokensJs": "var(--text-base-200)", + "phase": "2a" + }, + { + "token": "fontSizeBase300", + "oldVar": "--fontSizeBase300", + "newVar": "--text-base-300", + "themeKey": "--text-base-300", + "tokensJs": "var(--text-base-300)", + "phase": "2a" + }, + { + "token": "fontSizeBase400", + "oldVar": "--fontSizeBase400", + "newVar": "--text-base-400", + "themeKey": "--text-base-400", + "tokensJs": "var(--text-base-400)", + "phase": "2a" + }, + { + "token": "fontSizeBase500", + "oldVar": "--fontSizeBase500", + "newVar": "--text-base-500", + "themeKey": "--text-base-500", + "tokensJs": "var(--text-base-500)", + "phase": "2a" + }, + { + "token": "fontSizeBase600", + "oldVar": "--fontSizeBase600", + "newVar": "--text-base-600", + "themeKey": "--text-base-600", + "tokensJs": "var(--text-base-600)", + "phase": "2a" + }, + { + "token": "fontSizeHero700", + "oldVar": "--fontSizeHero700", + "newVar": "--text-hero-700", + "themeKey": "--text-hero-700", + "tokensJs": "var(--text-hero-700)", + "phase": "2a" + }, + { + "token": "fontSizeHero800", + "oldVar": "--fontSizeHero800", + "newVar": "--text-hero-800", + "themeKey": "--text-hero-800", + "tokensJs": "var(--text-hero-800)", + "phase": "2a" + }, + { + "token": "fontSizeHero900", + "oldVar": "--fontSizeHero900", + "newVar": "--text-hero-900", + "themeKey": "--text-hero-900", + "tokensJs": "var(--text-hero-900)", + "phase": "2a" + }, + { + "token": "fontSizeHero1000", + "oldVar": "--fontSizeHero1000", + "newVar": "--text-hero-1000", + "themeKey": "--text-hero-1000", + "tokensJs": "var(--text-hero-1000)", + "phase": "2a" + }, + { + "token": "fontWeightRegular", + "oldVar": "--fontWeightRegular", + "newVar": "--font-weight-regular", + "themeKey": "--font-weight-regular", + "tokensJs": "var(--font-weight-regular)", + "phase": "2a" + }, + { + "token": "fontWeightMedium", + "oldVar": "--fontWeightMedium", + "newVar": "--font-weight-medium", + "themeKey": "--font-weight-medium", + "tokensJs": "var(--font-weight-medium)", + "phase": "2a" + }, + { + "token": "fontWeightSemibold", + "oldVar": "--fontWeightSemibold", + "newVar": "--font-weight-semibold", + "themeKey": "--font-weight-semibold", + "tokensJs": "var(--font-weight-semibold)", + "phase": "2a" + }, + { + "token": "fontWeightBold", + "oldVar": "--fontWeightBold", + "newVar": "--font-weight-bold", + "themeKey": "--font-weight-bold", + "tokensJs": "var(--font-weight-bold)", + "phase": "2a" + }, + { + "token": "lineHeightBase100", + "oldVar": "--lineHeightBase100", + "newVar": "--leading-base-100", + "themeKey": "--leading-base-100", + "tokensJs": "var(--leading-base-100)", + "phase": "2a" + }, + { + "token": "lineHeightBase200", + "oldVar": "--lineHeightBase200", + "newVar": "--leading-base-200", + "themeKey": "--leading-base-200", + "tokensJs": "var(--leading-base-200)", + "phase": "2a" + }, + { + "token": "lineHeightBase300", + "oldVar": "--lineHeightBase300", + "newVar": "--leading-base-300", + "themeKey": "--leading-base-300", + "tokensJs": "var(--leading-base-300)", + "phase": "2a" + }, + { + "token": "lineHeightBase400", + "oldVar": "--lineHeightBase400", + "newVar": "--leading-base-400", + "themeKey": "--leading-base-400", + "tokensJs": "var(--leading-base-400)", + "phase": "2a" + }, + { + "token": "lineHeightBase500", + "oldVar": "--lineHeightBase500", + "newVar": "--leading-base-500", + "themeKey": "--leading-base-500", + "tokensJs": "var(--leading-base-500)", + "phase": "2a" + }, + { + "token": "lineHeightBase600", + "oldVar": "--lineHeightBase600", + "newVar": "--leading-base-600", + "themeKey": "--leading-base-600", + "tokensJs": "var(--leading-base-600)", + "phase": "2a" + }, + { + "token": "lineHeightHero700", + "oldVar": "--lineHeightHero700", + "newVar": "--leading-hero-700", + "themeKey": "--leading-hero-700", + "tokensJs": "var(--leading-hero-700)", + "phase": "2a" + }, + { + "token": "lineHeightHero800", + "oldVar": "--lineHeightHero800", + "newVar": "--leading-hero-800", + "themeKey": "--leading-hero-800", + "tokensJs": "var(--leading-hero-800)", + "phase": "2a" + }, + { + "token": "lineHeightHero900", + "oldVar": "--lineHeightHero900", + "newVar": "--leading-hero-900", + "themeKey": "--leading-hero-900", + "tokensJs": "var(--leading-hero-900)", + "phase": "2a" + }, + { + "token": "lineHeightHero1000", + "oldVar": "--lineHeightHero1000", + "newVar": "--leading-hero-1000", + "themeKey": "--leading-hero-1000", + "tokensJs": "var(--leading-hero-1000)", + "phase": "2a" + }, + { + "token": "shadow2", + "oldVar": "--shadow2", + "newVar": "--shadow-2", + "themeKey": "--shadow-2", + "tokensJs": "var(--shadow-2)", + "phase": "2a" + }, + { + "token": "shadow4", + "oldVar": "--shadow4", + "newVar": "--shadow-4", + "themeKey": "--shadow-4", + "tokensJs": "var(--shadow-4)", + "phase": "2a" + }, + { + "token": "shadow8", + "oldVar": "--shadow8", + "newVar": "--shadow-8", + "themeKey": "--shadow-8", + "tokensJs": "var(--shadow-8)", + "phase": "2a" + }, + { + "token": "shadow16", + "oldVar": "--shadow16", + "newVar": "--shadow-16", + "themeKey": "--shadow-16", + "tokensJs": "var(--shadow-16)", + "phase": "2a" + }, + { + "token": "shadow28", + "oldVar": "--shadow28", + "newVar": "--shadow-28", + "themeKey": "--shadow-28", + "tokensJs": "var(--shadow-28)", + "phase": "2a" + }, + { + "token": "shadow64", + "oldVar": "--shadow64", + "newVar": "--shadow-64", + "themeKey": "--shadow-64", + "tokensJs": "var(--shadow-64)", + "phase": "2a" + }, + { + "token": "shadow2Brand", + "oldVar": "--shadow2Brand", + "newVar": "--shadow-2-brand", + "themeKey": "--shadow-2-brand", + "tokensJs": "var(--shadow-2-brand)", + "phase": "2a" + }, + { + "token": "shadow4Brand", + "oldVar": "--shadow4Brand", + "newVar": "--shadow-4-brand", + "themeKey": "--shadow-4-brand", + "tokensJs": "var(--shadow-4-brand)", + "phase": "2a" + }, + { + "token": "shadow8Brand", + "oldVar": "--shadow8Brand", + "newVar": "--shadow-8-brand", + "themeKey": "--shadow-8-brand", + "tokensJs": "var(--shadow-8-brand)", + "phase": "2a" + }, + { + "token": "shadow16Brand", + "oldVar": "--shadow16Brand", + "newVar": "--shadow-16-brand", + "themeKey": "--shadow-16-brand", + "tokensJs": "var(--shadow-16-brand)", + "phase": "2a" + }, + { + "token": "shadow28Brand", + "oldVar": "--shadow28Brand", + "newVar": "--shadow-28-brand", + "themeKey": "--shadow-28-brand", + "tokensJs": "var(--shadow-28-brand)", + "phase": "2a" + }, + { + "token": "shadow64Brand", + "oldVar": "--shadow64Brand", + "newVar": "--shadow-64-brand", + "themeKey": "--shadow-64-brand", + "tokensJs": "var(--shadow-64-brand)", + "phase": "2a" + }, + { + "token": "strokeWidthThin", + "oldVar": "--strokeWidthThin", + "newVar": "--stroke-width-thin", + "themeKey": "--spacing-thin", + "tokensJs": "var(--stroke-width-thin)", + "phase": "1" + }, + { + "token": "strokeWidthThick", + "oldVar": "--strokeWidthThick", + "newVar": "--stroke-width-thick", + "themeKey": "--spacing-thick", + "tokensJs": "var(--stroke-width-thick)", + "phase": "1" + }, + { + "token": "strokeWidthThicker", + "oldVar": "--strokeWidthThicker", + "newVar": "--stroke-width-thicker", + "themeKey": "--spacing-thicker", + "tokensJs": "var(--stroke-width-thicker)", + "phase": "1" + }, + { + "token": "strokeWidthThickest", + "oldVar": "--strokeWidthThickest", + "newVar": "--stroke-width-thickest", + "themeKey": "--spacing-thickest", + "tokensJs": "var(--stroke-width-thickest)", + "phase": "1" + }, + { + "token": "spacingHorizontalNone", + "oldVar": "--spacingHorizontalNone", + "newVar": "--spacing-horizontal-none", + "themeKey": "--spacing-horizontal-none", + "tokensJs": "var(--spacing-horizontal-none)", + "phase": "1" + }, + { + "token": "spacingHorizontalXXS", + "oldVar": "--spacingHorizontalXXS", + "newVar": "--spacing-horizontal-xxs", + "themeKey": "--spacing-horizontal-xxs", + "tokensJs": "var(--spacing-horizontal-xxs)", + "phase": "1" + }, + { + "token": "spacingHorizontalXS", + "oldVar": "--spacingHorizontalXS", + "newVar": "--spacing-horizontal-xs", + "themeKey": "--spacing-horizontal-xs", + "tokensJs": "var(--spacing-horizontal-xs)", + "phase": "1" + }, + { + "token": "spacingHorizontalSNudge", + "oldVar": "--spacingHorizontalSNudge", + "newVar": "--spacing-horizontal-s-nudge", + "themeKey": "--spacing-horizontal-s-nudge", + "tokensJs": "var(--spacing-horizontal-s-nudge)", + "phase": "1" + }, + { + "token": "spacingHorizontalS", + "oldVar": "--spacingHorizontalS", + "newVar": "--spacing-horizontal-s", + "themeKey": "--spacing-horizontal-s", + "tokensJs": "var(--spacing-horizontal-s)", + "phase": "1" + }, + { + "token": "spacingHorizontalMNudge", + "oldVar": "--spacingHorizontalMNudge", + "newVar": "--spacing-horizontal-m-nudge", + "themeKey": "--spacing-horizontal-m-nudge", + "tokensJs": "var(--spacing-horizontal-m-nudge)", + "phase": "1" + }, + { + "token": "spacingHorizontalM", + "oldVar": "--spacingHorizontalM", + "newVar": "--spacing-horizontal-m", + "themeKey": "--spacing-horizontal-m", + "tokensJs": "var(--spacing-horizontal-m)", + "phase": "1" + }, + { + "token": "spacingHorizontalL", + "oldVar": "--spacingHorizontalL", + "newVar": "--spacing-horizontal-l", + "themeKey": "--spacing-horizontal-l", + "tokensJs": "var(--spacing-horizontal-l)", + "phase": "1" + }, + { + "token": "spacingHorizontalXL", + "oldVar": "--spacingHorizontalXL", + "newVar": "--spacing-horizontal-xl", + "themeKey": "--spacing-horizontal-xl", + "tokensJs": "var(--spacing-horizontal-xl)", + "phase": "1" + }, + { + "token": "spacingHorizontalXXL", + "oldVar": "--spacingHorizontalXXL", + "newVar": "--spacing-horizontal-xxl", + "themeKey": "--spacing-horizontal-xxl", + "tokensJs": "var(--spacing-horizontal-xxl)", + "phase": "1" + }, + { + "token": "spacingHorizontalXXXL", + "oldVar": "--spacingHorizontalXXXL", + "newVar": "--spacing-horizontal-xxxl", + "themeKey": "--spacing-horizontal-xxxl", + "tokensJs": "var(--spacing-horizontal-xxxl)", + "phase": "1" + }, + { + "token": "spacingVerticalNone", + "oldVar": "--spacingVerticalNone", + "newVar": "--spacing-vertical-none", + "themeKey": "--spacing-vertical-none", + "tokensJs": "var(--spacing-vertical-none)", + "phase": "1" + }, + { + "token": "spacingVerticalXXS", + "oldVar": "--spacingVerticalXXS", + "newVar": "--spacing-vertical-xxs", + "themeKey": "--spacing-vertical-xxs", + "tokensJs": "var(--spacing-vertical-xxs)", + "phase": "1" + }, + { + "token": "spacingVerticalXS", + "oldVar": "--spacingVerticalXS", + "newVar": "--spacing-vertical-xs", + "themeKey": "--spacing-vertical-xs", + "tokensJs": "var(--spacing-vertical-xs)", + "phase": "1" + }, + { + "token": "spacingVerticalSNudge", + "oldVar": "--spacingVerticalSNudge", + "newVar": "--spacing-vertical-s-nudge", + "themeKey": "--spacing-vertical-s-nudge", + "tokensJs": "var(--spacing-vertical-s-nudge)", + "phase": "1" + }, + { + "token": "spacingVerticalS", + "oldVar": "--spacingVerticalS", + "newVar": "--spacing-vertical-s", + "themeKey": "--spacing-vertical-s", + "tokensJs": "var(--spacing-vertical-s)", + "phase": "1" + }, + { + "token": "spacingVerticalMNudge", + "oldVar": "--spacingVerticalMNudge", + "newVar": "--spacing-vertical-m-nudge", + "themeKey": "--spacing-vertical-m-nudge", + "tokensJs": "var(--spacing-vertical-m-nudge)", + "phase": "1" + }, + { + "token": "spacingVerticalM", + "oldVar": "--spacingVerticalM", + "newVar": "--spacing-vertical-m", + "themeKey": "--spacing-vertical-m", + "tokensJs": "var(--spacing-vertical-m)", + "phase": "1" + }, + { + "token": "spacingVerticalL", + "oldVar": "--spacingVerticalL", + "newVar": "--spacing-vertical-l", + "themeKey": "--spacing-vertical-l", + "tokensJs": "var(--spacing-vertical-l)", + "phase": "1" + }, + { + "token": "spacingVerticalXL", + "oldVar": "--spacingVerticalXL", + "newVar": "--spacing-vertical-xl", + "themeKey": "--spacing-vertical-xl", + "tokensJs": "var(--spacing-vertical-xl)", + "phase": "1" + }, + { + "token": "spacingVerticalXXL", + "oldVar": "--spacingVerticalXXL", + "newVar": "--spacing-vertical-xxl", + "themeKey": "--spacing-vertical-xxl", + "tokensJs": "var(--spacing-vertical-xxl)", + "phase": "1" + }, + { + "token": "spacingVerticalXXXL", + "oldVar": "--spacingVerticalXXXL", + "newVar": "--spacing-vertical-xxxl", + "themeKey": "--spacing-vertical-xxxl", + "tokensJs": "var(--spacing-vertical-xxxl)", + "phase": "1" + }, + { + "token": "durationUltraFast", + "oldVar": "--durationUltraFast", + "newVar": "--duration-ultra-fast", + "themeKey": "--transition-duration-ultra-fast", + "tokensJs": "var(--duration-ultra-fast)", + "phase": "2a" + }, + { + "token": "durationFaster", + "oldVar": "--durationFaster", + "newVar": "--duration-faster", + "themeKey": "--transition-duration-faster", + "tokensJs": "var(--duration-faster)", + "phase": "2a" + }, + { + "token": "durationFast", + "oldVar": "--durationFast", + "newVar": "--duration-fast", + "themeKey": "--transition-duration-fast", + "tokensJs": "var(--duration-fast)", + "phase": "2a" + }, + { + "token": "durationNormal", + "oldVar": "--durationNormal", + "newVar": "--duration-normal", + "themeKey": "--transition-duration-normal", + "tokensJs": "var(--duration-normal)", + "phase": "2a" + }, + { + "token": "durationGentle", + "oldVar": "--durationGentle", + "newVar": "--duration-gentle", + "themeKey": "--transition-duration-gentle", + "tokensJs": "var(--duration-gentle)", + "phase": "2a" + }, + { + "token": "durationSlow", + "oldVar": "--durationSlow", + "newVar": "--duration-slow", + "themeKey": "--transition-duration-slow", + "tokensJs": "var(--duration-slow)", + "phase": "2a" + }, + { + "token": "durationSlower", + "oldVar": "--durationSlower", + "newVar": "--duration-slower", + "themeKey": "--transition-duration-slower", + "tokensJs": "var(--duration-slower)", + "phase": "2a" + }, + { + "token": "durationUltraSlow", + "oldVar": "--durationUltraSlow", + "newVar": "--duration-ultra-slow", + "themeKey": "--transition-duration-ultra-slow", + "tokensJs": "var(--duration-ultra-slow)", + "phase": "2a" + }, + { + "token": "curveAccelerateMax", + "oldVar": "--curveAccelerateMax", + "newVar": "--ease-accelerate-max", + "themeKey": "--ease-accelerate-max", + "tokensJs": "var(--ease-accelerate-max)", + "phase": "2a" + }, + { + "token": "curveAccelerateMid", + "oldVar": "--curveAccelerateMid", + "newVar": "--ease-accelerate-mid", + "themeKey": "--ease-accelerate-mid", + "tokensJs": "var(--ease-accelerate-mid)", + "phase": "2a" + }, + { + "token": "curveAccelerateMin", + "oldVar": "--curveAccelerateMin", + "newVar": "--ease-accelerate-min", + "themeKey": "--ease-accelerate-min", + "tokensJs": "var(--ease-accelerate-min)", + "phase": "2a" + }, + { + "token": "curveDecelerateMax", + "oldVar": "--curveDecelerateMax", + "newVar": "--ease-decelerate-max", + "themeKey": "--ease-decelerate-max", + "tokensJs": "var(--ease-decelerate-max)", + "phase": "2a" + }, + { + "token": "curveDecelerateMid", + "oldVar": "--curveDecelerateMid", + "newVar": "--ease-decelerate-mid", + "themeKey": "--ease-decelerate-mid", + "tokensJs": "var(--ease-decelerate-mid)", + "phase": "2a" + }, + { + "token": "curveDecelerateMin", + "oldVar": "--curveDecelerateMin", + "newVar": "--ease-decelerate-min", + "themeKey": "--ease-decelerate-min", + "tokensJs": "var(--ease-decelerate-min)", + "phase": "2a" + }, + { + "token": "curveEasyEaseMax", + "oldVar": "--curveEasyEaseMax", + "newVar": "--ease-easy-ease-max", + "themeKey": "--ease-easy-ease-max", + "tokensJs": "var(--ease-easy-ease-max)", + "phase": "2a" + }, + { + "token": "curveEasyEase", + "oldVar": "--curveEasyEase", + "newVar": "--ease-easy-ease", + "themeKey": "--ease-easy-ease", + "tokensJs": "var(--ease-easy-ease)", + "phase": "2a" + }, + { + "token": "curveLinear", + "oldVar": "--curveLinear", + "newVar": "--ease-linear", + "themeKey": "--ease-linear", + "tokensJs": "var(--ease-linear)", + "phase": "2a" + }, + { + "token": "zIndexBackground", + "oldVar": "--zIndexBackground", + "newVar": "--z-index-background", + "themeKey": "--z-index-background", + "tokensJs": "var(--z-index-background, 0)", + "phase": "2a" + }, + { + "token": "zIndexContent", + "oldVar": "--zIndexContent", + "newVar": "--z-index-content", + "themeKey": "--z-index-content", + "tokensJs": "var(--z-index-content, 1)", + "phase": "2a" + }, + { + "token": "zIndexOverlay", + "oldVar": "--zIndexOverlay", + "newVar": "--z-index-overlay", + "themeKey": "--z-index-overlay", + "tokensJs": "var(--z-index-overlay, 1000)", + "phase": "2a" + }, + { + "token": "zIndexPopup", + "oldVar": "--zIndexPopup", + "newVar": "--z-index-popup", + "themeKey": "--z-index-popup", + "tokensJs": "var(--z-index-popup, 2000)", + "phase": "2a" + }, + { + "token": "zIndexMessages", + "oldVar": "--zIndexMessages", + "newVar": "--z-index-messages", + "themeKey": "--z-index-messages", + "tokensJs": "var(--z-index-messages, 3000)", + "phase": "2a" + }, + { + "token": "zIndexFloating", + "oldVar": "--zIndexFloating", + "newVar": "--z-index-floating", + "themeKey": "--z-index-floating", + "tokensJs": "var(--z-index-floating, 4000)", + "phase": "2a" + }, + { + "token": "zIndexPriority", + "oldVar": "--zIndexPriority", + "newVar": "--z-index-priority", + "themeKey": "--z-index-priority", + "tokensJs": "var(--z-index-priority, 5000)", + "phase": "2a" + }, + { + "token": "zIndexDebug", + "oldVar": "--zIndexDebug", + "newVar": "--z-index-debug", + "themeKey": "--z-index-debug", + "tokensJs": "var(--z-index-debug, 6000)", + "phase": "2a" + } + ] +} diff --git a/migration/griffel-to-tailwind/reports/token-rename-map.md b/migration/griffel-to-tailwind/reports/token-rename-map.md new file mode 100644 index 00000000000000..ab247554d37c95 --- /dev/null +++ b/migration/griffel-to-tailwind/reports/token-rename-map.md @@ -0,0 +1,556 @@ +# Design-token CSS variable rename map (Phases 1 + 2a) + +Single-vocabulary rename (option B, settled with user): the old camelCase CSS custom +properties cease to exist; every token’s canonical variable is kebab-case and aligned +with the Tailwind v4 theme namespace the token registers under. `tokens.*` JS constants +read the canonical names. Machine-readable source: `token-rename-map.json` (same rows). + +| # | Family | Tokens | Canonical namespace | +| --- | ----------------------- | -----: | ------------------------------------------------------------------------ | +| 1 | Colors | 216 | `--color-*` | +| 2 | Palette colors | 150 | `--color-palette-*` | +| 3 | Font families | 3 | `--font-*` | +| 4 | Font sizes | 10 | `--text-*` | +| 5 | Font weights | 4 | `--font-weight-*` | +| 6 | Line heights | 10 | `--leading-*` | +| 7 | Border radii | 11 | `--radius-*` | +| 8 | Shadows | 12 | `--shadow-*` | +| 9 | Easing curves | 9 | `--ease-*` | +| 10 | Durations | 8 | `--duration-* (custom namespace; @theme key is --transition-duration-*)` | +| 11 | z-index | 8 | `--z-index-* (fallback carried in tokens.*)` | +| 12 | Spacing (Phase 1) | 22 | `--spacing-horizontal-* / --spacing-vertical-*` | +| 13 | Stroke widths (Phase 1) | 4 | `--stroke-width-*` | + +Total: 467 tokens (26 Phase 1, 441 Phase 2a). + +## Colors (216) — `--color-*` + +| Token | Old CSS variable | New CSS variable | +| -------------------------------------------- | ---------------------------------------------- | --------------------------------------------------- | +| `colorNeutralForeground1` | `--colorNeutralForeground1` | `--color-neutral-foreground-1` | +| `colorNeutralForeground1Hover` | `--colorNeutralForeground1Hover` | `--color-neutral-foreground-1-hover` | +| `colorNeutralForeground1Pressed` | `--colorNeutralForeground1Pressed` | `--color-neutral-foreground-1-pressed` | +| `colorNeutralForeground1Selected` | `--colorNeutralForeground1Selected` | `--color-neutral-foreground-1-selected` | +| `colorNeutralForeground2` | `--colorNeutralForeground2` | `--color-neutral-foreground-2` | +| `colorNeutralForeground2Hover` | `--colorNeutralForeground2Hover` | `--color-neutral-foreground-2-hover` | +| `colorNeutralForeground2Pressed` | `--colorNeutralForeground2Pressed` | `--color-neutral-foreground-2-pressed` | +| `colorNeutralForeground2Selected` | `--colorNeutralForeground2Selected` | `--color-neutral-foreground-2-selected` | +| `colorNeutralForeground2BrandHover` | `--colorNeutralForeground2BrandHover` | `--color-neutral-foreground-2-brand-hover` | +| `colorNeutralForeground2BrandPressed` | `--colorNeutralForeground2BrandPressed` | `--color-neutral-foreground-2-brand-pressed` | +| `colorNeutralForeground2BrandSelected` | `--colorNeutralForeground2BrandSelected` | `--color-neutral-foreground-2-brand-selected` | +| `colorNeutralForeground3` | `--colorNeutralForeground3` | `--color-neutral-foreground-3` | +| `colorNeutralForeground3Hover` | `--colorNeutralForeground3Hover` | `--color-neutral-foreground-3-hover` | +| `colorNeutralForeground3Pressed` | `--colorNeutralForeground3Pressed` | `--color-neutral-foreground-3-pressed` | +| `colorNeutralForeground3Selected` | `--colorNeutralForeground3Selected` | `--color-neutral-foreground-3-selected` | +| `colorNeutralForeground3BrandHover` | `--colorNeutralForeground3BrandHover` | `--color-neutral-foreground-3-brand-hover` | +| `colorNeutralForeground3BrandPressed` | `--colorNeutralForeground3BrandPressed` | `--color-neutral-foreground-3-brand-pressed` | +| `colorNeutralForeground3BrandSelected` | `--colorNeutralForeground3BrandSelected` | `--color-neutral-foreground-3-brand-selected` | +| `colorNeutralForeground4` | `--colorNeutralForeground4` | `--color-neutral-foreground-4` | +| `colorNeutralForeground5` | `--colorNeutralForeground5` | `--color-neutral-foreground-5` | +| `colorNeutralForeground5Hover` | `--colorNeutralForeground5Hover` | `--color-neutral-foreground-5-hover` | +| `colorNeutralForeground5Pressed` | `--colorNeutralForeground5Pressed` | `--color-neutral-foreground-5-pressed` | +| `colorNeutralForeground5Selected` | `--colorNeutralForeground5Selected` | `--color-neutral-foreground-5-selected` | +| `colorNeutralForegroundDisabled` | `--colorNeutralForegroundDisabled` | `--color-neutral-foreground-disabled` | +| `colorBrandForegroundLink` | `--colorBrandForegroundLink` | `--color-brand-foreground-link` | +| `colorBrandForegroundLinkHover` | `--colorBrandForegroundLinkHover` | `--color-brand-foreground-link-hover` | +| `colorBrandForegroundLinkPressed` | `--colorBrandForegroundLinkPressed` | `--color-brand-foreground-link-pressed` | +| `colorBrandForegroundLinkSelected` | `--colorBrandForegroundLinkSelected` | `--color-brand-foreground-link-selected` | +| `colorNeutralForeground2Link` | `--colorNeutralForeground2Link` | `--color-neutral-foreground-2-link` | +| `colorNeutralForeground2LinkHover` | `--colorNeutralForeground2LinkHover` | `--color-neutral-foreground-2-link-hover` | +| `colorNeutralForeground2LinkPressed` | `--colorNeutralForeground2LinkPressed` | `--color-neutral-foreground-2-link-pressed` | +| `colorNeutralForeground2LinkSelected` | `--colorNeutralForeground2LinkSelected` | `--color-neutral-foreground-2-link-selected` | +| `colorCompoundBrandForeground1` | `--colorCompoundBrandForeground1` | `--color-compound-brand-foreground-1` | +| `colorCompoundBrandForeground1Hover` | `--colorCompoundBrandForeground1Hover` | `--color-compound-brand-foreground-1-hover` | +| `colorCompoundBrandForeground1Pressed` | `--colorCompoundBrandForeground1Pressed` | `--color-compound-brand-foreground-1-pressed` | +| `colorNeutralForegroundOnBrand` | `--colorNeutralForegroundOnBrand` | `--color-neutral-foreground-on-brand` | +| `colorNeutralForegroundInverted` | `--colorNeutralForegroundInverted` | `--color-neutral-foreground-inverted` | +| `colorNeutralForegroundInvertedHover` | `--colorNeutralForegroundInvertedHover` | `--color-neutral-foreground-inverted-hover` | +| `colorNeutralForegroundInvertedPressed` | `--colorNeutralForegroundInvertedPressed` | `--color-neutral-foreground-inverted-pressed` | +| `colorNeutralForegroundInvertedSelected` | `--colorNeutralForegroundInvertedSelected` | `--color-neutral-foreground-inverted-selected` | +| `colorNeutralForegroundInverted2` | `--colorNeutralForegroundInverted2` | `--color-neutral-foreground-inverted-2` | +| `colorNeutralForegroundStaticInverted` | `--colorNeutralForegroundStaticInverted` | `--color-neutral-foreground-static-inverted` | +| `colorNeutralForegroundInvertedLink` | `--colorNeutralForegroundInvertedLink` | `--color-neutral-foreground-inverted-link` | +| `colorNeutralForegroundInvertedLinkHover` | `--colorNeutralForegroundInvertedLinkHover` | `--color-neutral-foreground-inverted-link-hover` | +| `colorNeutralForegroundInvertedLinkPressed` | `--colorNeutralForegroundInvertedLinkPressed` | `--color-neutral-foreground-inverted-link-pressed` | +| `colorNeutralForegroundInvertedLinkSelected` | `--colorNeutralForegroundInvertedLinkSelected` | `--color-neutral-foreground-inverted-link-selected` | +| `colorNeutralForegroundInvertedDisabled` | `--colorNeutralForegroundInvertedDisabled` | `--color-neutral-foreground-inverted-disabled` | +| `colorBrandForeground1` | `--colorBrandForeground1` | `--color-brand-foreground-1` | +| `colorBrandForeground2` | `--colorBrandForeground2` | `--color-brand-foreground-2` | +| `colorBrandForeground2Hover` | `--colorBrandForeground2Hover` | `--color-brand-foreground-2-hover` | +| `colorBrandForeground2Pressed` | `--colorBrandForeground2Pressed` | `--color-brand-foreground-2-pressed` | +| `colorNeutralForeground1Static` | `--colorNeutralForeground1Static` | `--color-neutral-foreground-1-static` | +| `colorBrandForegroundInverted` | `--colorBrandForegroundInverted` | `--color-brand-foreground-inverted` | +| `colorBrandForegroundInvertedHover` | `--colorBrandForegroundInvertedHover` | `--color-brand-foreground-inverted-hover` | +| `colorBrandForegroundInvertedPressed` | `--colorBrandForegroundInvertedPressed` | `--color-brand-foreground-inverted-pressed` | +| `colorBrandForegroundOnLight` | `--colorBrandForegroundOnLight` | `--color-brand-foreground-on-light` | +| `colorBrandForegroundOnLightHover` | `--colorBrandForegroundOnLightHover` | `--color-brand-foreground-on-light-hover` | +| `colorBrandForegroundOnLightPressed` | `--colorBrandForegroundOnLightPressed` | `--color-brand-foreground-on-light-pressed` | +| `colorBrandForegroundOnLightSelected` | `--colorBrandForegroundOnLightSelected` | `--color-brand-foreground-on-light-selected` | +| `colorNeutralBackground1` | `--colorNeutralBackground1` | `--color-neutral-background-1` | +| `colorNeutralBackground1Hover` | `--colorNeutralBackground1Hover` | `--color-neutral-background-1-hover` | +| `colorNeutralBackground1Pressed` | `--colorNeutralBackground1Pressed` | `--color-neutral-background-1-pressed` | +| `colorNeutralBackground1Selected` | `--colorNeutralBackground1Selected` | `--color-neutral-background-1-selected` | +| `colorNeutralBackground2` | `--colorNeutralBackground2` | `--color-neutral-background-2` | +| `colorNeutralBackground2Hover` | `--colorNeutralBackground2Hover` | `--color-neutral-background-2-hover` | +| `colorNeutralBackground2Pressed` | `--colorNeutralBackground2Pressed` | `--color-neutral-background-2-pressed` | +| `colorNeutralBackground2Selected` | `--colorNeutralBackground2Selected` | `--color-neutral-background-2-selected` | +| `colorNeutralBackground3` | `--colorNeutralBackground3` | `--color-neutral-background-3` | +| `colorNeutralBackground3Hover` | `--colorNeutralBackground3Hover` | `--color-neutral-background-3-hover` | +| `colorNeutralBackground3Pressed` | `--colorNeutralBackground3Pressed` | `--color-neutral-background-3-pressed` | +| `colorNeutralBackground3Selected` | `--colorNeutralBackground3Selected` | `--color-neutral-background-3-selected` | +| `colorNeutralBackground4` | `--colorNeutralBackground4` | `--color-neutral-background-4` | +| `colorNeutralBackground4Hover` | `--colorNeutralBackground4Hover` | `--color-neutral-background-4-hover` | +| `colorNeutralBackground4Pressed` | `--colorNeutralBackground4Pressed` | `--color-neutral-background-4-pressed` | +| `colorNeutralBackground4Selected` | `--colorNeutralBackground4Selected` | `--color-neutral-background-4-selected` | +| `colorNeutralBackground5` | `--colorNeutralBackground5` | `--color-neutral-background-5` | +| `colorNeutralBackground5Hover` | `--colorNeutralBackground5Hover` | `--color-neutral-background-5-hover` | +| `colorNeutralBackground5Pressed` | `--colorNeutralBackground5Pressed` | `--color-neutral-background-5-pressed` | +| `colorNeutralBackground5Selected` | `--colorNeutralBackground5Selected` | `--color-neutral-background-5-selected` | +| `colorNeutralBackground6` | `--colorNeutralBackground6` | `--color-neutral-background-6` | +| `colorNeutralBackground7` | `--colorNeutralBackground7` | `--color-neutral-background-7` | +| `colorNeutralBackground7Hover` | `--colorNeutralBackground7Hover` | `--color-neutral-background-7-hover` | +| `colorNeutralBackground7Pressed` | `--colorNeutralBackground7Pressed` | `--color-neutral-background-7-pressed` | +| `colorNeutralBackground7Selected` | `--colorNeutralBackground7Selected` | `--color-neutral-background-7-selected` | +| `colorNeutralBackground8` | `--colorNeutralBackground8` | `--color-neutral-background-8` | +| `colorNeutralBackgroundInverted` | `--colorNeutralBackgroundInverted` | `--color-neutral-background-inverted` | +| `colorNeutralBackgroundInvertedHover` | `--colorNeutralBackgroundInvertedHover` | `--color-neutral-background-inverted-hover` | +| `colorNeutralBackgroundInvertedPressed` | `--colorNeutralBackgroundInvertedPressed` | `--color-neutral-background-inverted-pressed` | +| `colorNeutralBackgroundInvertedSelected` | `--colorNeutralBackgroundInvertedSelected` | `--color-neutral-background-inverted-selected` | +| `colorNeutralBackgroundStatic` | `--colorNeutralBackgroundStatic` | `--color-neutral-background-static` | +| `colorNeutralBackgroundAlpha` | `--colorNeutralBackgroundAlpha` | `--color-neutral-background-alpha` | +| `colorNeutralBackgroundAlpha2` | `--colorNeutralBackgroundAlpha2` | `--color-neutral-background-alpha-2` | +| `colorSubtleBackground` | `--colorSubtleBackground` | `--color-subtle-background` | +| `colorSubtleBackgroundHover` | `--colorSubtleBackgroundHover` | `--color-subtle-background-hover` | +| `colorSubtleBackgroundPressed` | `--colorSubtleBackgroundPressed` | `--color-subtle-background-pressed` | +| `colorSubtleBackgroundSelected` | `--colorSubtleBackgroundSelected` | `--color-subtle-background-selected` | +| `colorSubtleBackgroundLightAlphaHover` | `--colorSubtleBackgroundLightAlphaHover` | `--color-subtle-background-light-alpha-hover` | +| `colorSubtleBackgroundLightAlphaPressed` | `--colorSubtleBackgroundLightAlphaPressed` | `--color-subtle-background-light-alpha-pressed` | +| `colorSubtleBackgroundLightAlphaSelected` | `--colorSubtleBackgroundLightAlphaSelected` | `--color-subtle-background-light-alpha-selected` | +| `colorSubtleBackgroundInverted` | `--colorSubtleBackgroundInverted` | `--color-subtle-background-inverted` | +| `colorSubtleBackgroundInvertedHover` | `--colorSubtleBackgroundInvertedHover` | `--color-subtle-background-inverted-hover` | +| `colorSubtleBackgroundInvertedPressed` | `--colorSubtleBackgroundInvertedPressed` | `--color-subtle-background-inverted-pressed` | +| `colorSubtleBackgroundInvertedSelected` | `--colorSubtleBackgroundInvertedSelected` | `--color-subtle-background-inverted-selected` | +| `colorTransparentBackground` | `--colorTransparentBackground` | `--color-transparent-background` | +| `colorTransparentBackgroundHover` | `--colorTransparentBackgroundHover` | `--color-transparent-background-hover` | +| `colorTransparentBackgroundPressed` | `--colorTransparentBackgroundPressed` | `--color-transparent-background-pressed` | +| `colorTransparentBackgroundSelected` | `--colorTransparentBackgroundSelected` | `--color-transparent-background-selected` | +| `colorNeutralBackgroundDisabled` | `--colorNeutralBackgroundDisabled` | `--color-neutral-background-disabled` | +| `colorNeutralBackgroundDisabled2` | `--colorNeutralBackgroundDisabled2` | `--color-neutral-background-disabled-2` | +| `colorNeutralBackgroundInvertedDisabled` | `--colorNeutralBackgroundInvertedDisabled` | `--color-neutral-background-inverted-disabled` | +| `colorNeutralStencil1` | `--colorNeutralStencil1` | `--color-neutral-stencil-1` | +| `colorNeutralStencil2` | `--colorNeutralStencil2` | `--color-neutral-stencil-2` | +| `colorNeutralStencil1Alpha` | `--colorNeutralStencil1Alpha` | `--color-neutral-stencil-1-alpha` | +| `colorNeutralStencil2Alpha` | `--colorNeutralStencil2Alpha` | `--color-neutral-stencil-2-alpha` | +| `colorBackgroundOverlay` | `--colorBackgroundOverlay` | `--color-background-overlay` | +| `colorScrollbarOverlay` | `--colorScrollbarOverlay` | `--color-scrollbar-overlay` | +| `colorBrandBackground` | `--colorBrandBackground` | `--color-brand-background` | +| `colorBrandBackgroundHover` | `--colorBrandBackgroundHover` | `--color-brand-background-hover` | +| `colorBrandBackgroundPressed` | `--colorBrandBackgroundPressed` | `--color-brand-background-pressed` | +| `colorBrandBackgroundSelected` | `--colorBrandBackgroundSelected` | `--color-brand-background-selected` | +| `colorCompoundBrandBackground` | `--colorCompoundBrandBackground` | `--color-compound-brand-background` | +| `colorCompoundBrandBackgroundHover` | `--colorCompoundBrandBackgroundHover` | `--color-compound-brand-background-hover` | +| `colorCompoundBrandBackgroundPressed` | `--colorCompoundBrandBackgroundPressed` | `--color-compound-brand-background-pressed` | +| `colorBrandBackgroundStatic` | `--colorBrandBackgroundStatic` | `--color-brand-background-static` | +| `colorBrandBackground2` | `--colorBrandBackground2` | `--color-brand-background-2` | +| `colorBrandBackground2Hover` | `--colorBrandBackground2Hover` | `--color-brand-background-2-hover` | +| `colorBrandBackground2Pressed` | `--colorBrandBackground2Pressed` | `--color-brand-background-2-pressed` | +| `colorBrandBackground3Static` | `--colorBrandBackground3Static` | `--color-brand-background-3-static` | +| `colorBrandBackground4Static` | `--colorBrandBackground4Static` | `--color-brand-background-4-static` | +| `colorBrandBackgroundInverted` | `--colorBrandBackgroundInverted` | `--color-brand-background-inverted` | +| `colorBrandBackgroundInvertedHover` | `--colorBrandBackgroundInvertedHover` | `--color-brand-background-inverted-hover` | +| `colorBrandBackgroundInvertedPressed` | `--colorBrandBackgroundInvertedPressed` | `--color-brand-background-inverted-pressed` | +| `colorBrandBackgroundInvertedSelected` | `--colorBrandBackgroundInvertedSelected` | `--color-brand-background-inverted-selected` | +| `colorNeutralCardBackground` | `--colorNeutralCardBackground` | `--color-neutral-card-background` | +| `colorNeutralCardBackgroundHover` | `--colorNeutralCardBackgroundHover` | `--color-neutral-card-background-hover` | +| `colorNeutralCardBackgroundPressed` | `--colorNeutralCardBackgroundPressed` | `--color-neutral-card-background-pressed` | +| `colorNeutralCardBackgroundSelected` | `--colorNeutralCardBackgroundSelected` | `--color-neutral-card-background-selected` | +| `colorNeutralCardBackgroundDisabled` | `--colorNeutralCardBackgroundDisabled` | `--color-neutral-card-background-disabled` | +| `colorNeutralStrokeAccessible` | `--colorNeutralStrokeAccessible` | `--color-neutral-stroke-accessible` | +| `colorNeutralStrokeAccessibleHover` | `--colorNeutralStrokeAccessibleHover` | `--color-neutral-stroke-accessible-hover` | +| `colorNeutralStrokeAccessiblePressed` | `--colorNeutralStrokeAccessiblePressed` | `--color-neutral-stroke-accessible-pressed` | +| `colorNeutralStrokeAccessibleSelected` | `--colorNeutralStrokeAccessibleSelected` | `--color-neutral-stroke-accessible-selected` | +| `colorNeutralStroke1` | `--colorNeutralStroke1` | `--color-neutral-stroke-1` | +| `colorNeutralStroke1Hover` | `--colorNeutralStroke1Hover` | `--color-neutral-stroke-1-hover` | +| `colorNeutralStroke1Pressed` | `--colorNeutralStroke1Pressed` | `--color-neutral-stroke-1-pressed` | +| `colorNeutralStroke1Selected` | `--colorNeutralStroke1Selected` | `--color-neutral-stroke-1-selected` | +| `colorNeutralStroke2` | `--colorNeutralStroke2` | `--color-neutral-stroke-2` | +| `colorNeutralStroke3` | `--colorNeutralStroke3` | `--color-neutral-stroke-3` | +| `colorNeutralStroke4` | `--colorNeutralStroke4` | `--color-neutral-stroke-4` | +| `colorNeutralStroke4Hover` | `--colorNeutralStroke4Hover` | `--color-neutral-stroke-4-hover` | +| `colorNeutralStroke4Pressed` | `--colorNeutralStroke4Pressed` | `--color-neutral-stroke-4-pressed` | +| `colorNeutralStroke4Selected` | `--colorNeutralStroke4Selected` | `--color-neutral-stroke-4-selected` | +| `colorNeutralStrokeSubtle` | `--colorNeutralStrokeSubtle` | `--color-neutral-stroke-subtle` | +| `colorNeutralStrokeOnBrand` | `--colorNeutralStrokeOnBrand` | `--color-neutral-stroke-on-brand` | +| `colorNeutralStrokeOnBrand2` | `--colorNeutralStrokeOnBrand2` | `--color-neutral-stroke-on-brand-2` | +| `colorNeutralStrokeOnBrand2Hover` | `--colorNeutralStrokeOnBrand2Hover` | `--color-neutral-stroke-on-brand-2-hover` | +| `colorNeutralStrokeOnBrand2Pressed` | `--colorNeutralStrokeOnBrand2Pressed` | `--color-neutral-stroke-on-brand-2-pressed` | +| `colorNeutralStrokeOnBrand2Selected` | `--colorNeutralStrokeOnBrand2Selected` | `--color-neutral-stroke-on-brand-2-selected` | +| `colorBrandStroke1` | `--colorBrandStroke1` | `--color-brand-stroke-1` | +| `colorBrandStroke2` | `--colorBrandStroke2` | `--color-brand-stroke-2` | +| `colorBrandStroke2Hover` | `--colorBrandStroke2Hover` | `--color-brand-stroke-2-hover` | +| `colorBrandStroke2Pressed` | `--colorBrandStroke2Pressed` | `--color-brand-stroke-2-pressed` | +| `colorBrandStroke2Contrast` | `--colorBrandStroke2Contrast` | `--color-brand-stroke-2-contrast` | +| `colorCompoundBrandStroke` | `--colorCompoundBrandStroke` | `--color-compound-brand-stroke` | +| `colorCompoundBrandStrokeHover` | `--colorCompoundBrandStrokeHover` | `--color-compound-brand-stroke-hover` | +| `colorCompoundBrandStrokePressed` | `--colorCompoundBrandStrokePressed` | `--color-compound-brand-stroke-pressed` | +| `colorNeutralStrokeDisabled` | `--colorNeutralStrokeDisabled` | `--color-neutral-stroke-disabled` | +| `colorNeutralStrokeDisabled2` | `--colorNeutralStrokeDisabled2` | `--color-neutral-stroke-disabled-2` | +| `colorNeutralStrokeInvertedDisabled` | `--colorNeutralStrokeInvertedDisabled` | `--color-neutral-stroke-inverted-disabled` | +| `colorTransparentStroke` | `--colorTransparentStroke` | `--color-transparent-stroke` | +| `colorTransparentStrokeInteractive` | `--colorTransparentStrokeInteractive` | `--color-transparent-stroke-interactive` | +| `colorTransparentStrokeDisabled` | `--colorTransparentStrokeDisabled` | `--color-transparent-stroke-disabled` | +| `colorNeutralStrokeAlpha` | `--colorNeutralStrokeAlpha` | `--color-neutral-stroke-alpha` | +| `colorNeutralStrokeAlpha2` | `--colorNeutralStrokeAlpha2` | `--color-neutral-stroke-alpha-2` | +| `colorStrokeFocus1` | `--colorStrokeFocus1` | `--color-stroke-focus-1` | +| `colorStrokeFocus2` | `--colorStrokeFocus2` | `--color-stroke-focus-2` | +| `colorNeutralShadowAmbient` | `--colorNeutralShadowAmbient` | `--color-neutral-shadow-ambient` | +| `colorNeutralShadowKey` | `--colorNeutralShadowKey` | `--color-neutral-shadow-key` | +| `colorNeutralShadowAmbientLighter` | `--colorNeutralShadowAmbientLighter` | `--color-neutral-shadow-ambient-lighter` | +| `colorNeutralShadowKeyLighter` | `--colorNeutralShadowKeyLighter` | `--color-neutral-shadow-key-lighter` | +| `colorNeutralShadowAmbientDarker` | `--colorNeutralShadowAmbientDarker` | `--color-neutral-shadow-ambient-darker` | +| `colorNeutralShadowKeyDarker` | `--colorNeutralShadowKeyDarker` | `--color-neutral-shadow-key-darker` | +| `colorBrandShadowAmbient` | `--colorBrandShadowAmbient` | `--color-brand-shadow-ambient` | +| `colorBrandShadowKey` | `--colorBrandShadowKey` | `--color-brand-shadow-key` | +| `colorStatusSuccessBackground1` | `--colorStatusSuccessBackground1` | `--color-status-success-background-1` | +| `colorStatusSuccessBackground2` | `--colorStatusSuccessBackground2` | `--color-status-success-background-2` | +| `colorStatusSuccessBackground3` | `--colorStatusSuccessBackground3` | `--color-status-success-background-3` | +| `colorStatusSuccessForeground1` | `--colorStatusSuccessForeground1` | `--color-status-success-foreground-1` | +| `colorStatusSuccessForeground2` | `--colorStatusSuccessForeground2` | `--color-status-success-foreground-2` | +| `colorStatusSuccessForeground3` | `--colorStatusSuccessForeground3` | `--color-status-success-foreground-3` | +| `colorStatusSuccessForegroundInverted` | `--colorStatusSuccessForegroundInverted` | `--color-status-success-foreground-inverted` | +| `colorStatusSuccessBorderActive` | `--colorStatusSuccessBorderActive` | `--color-status-success-border-active` | +| `colorStatusSuccessBorder1` | `--colorStatusSuccessBorder1` | `--color-status-success-border-1` | +| `colorStatusSuccessBorder2` | `--colorStatusSuccessBorder2` | `--color-status-success-border-2` | +| `colorStatusWarningBackground1` | `--colorStatusWarningBackground1` | `--color-status-warning-background-1` | +| `colorStatusWarningBackground2` | `--colorStatusWarningBackground2` | `--color-status-warning-background-2` | +| `colorStatusWarningBackground3` | `--colorStatusWarningBackground3` | `--color-status-warning-background-3` | +| `colorStatusWarningForeground1` | `--colorStatusWarningForeground1` | `--color-status-warning-foreground-1` | +| `colorStatusWarningForeground2` | `--colorStatusWarningForeground2` | `--color-status-warning-foreground-2` | +| `colorStatusWarningForeground3` | `--colorStatusWarningForeground3` | `--color-status-warning-foreground-3` | +| `colorStatusWarningForegroundInverted` | `--colorStatusWarningForegroundInverted` | `--color-status-warning-foreground-inverted` | +| `colorStatusWarningBorderActive` | `--colorStatusWarningBorderActive` | `--color-status-warning-border-active` | +| `colorStatusWarningBorder1` | `--colorStatusWarningBorder1` | `--color-status-warning-border-1` | +| `colorStatusWarningBorder2` | `--colorStatusWarningBorder2` | `--color-status-warning-border-2` | +| `colorStatusDangerBackground1` | `--colorStatusDangerBackground1` | `--color-status-danger-background-1` | +| `colorStatusDangerBackground2` | `--colorStatusDangerBackground2` | `--color-status-danger-background-2` | +| `colorStatusDangerBackground3` | `--colorStatusDangerBackground3` | `--color-status-danger-background-3` | +| `colorStatusDangerBackground3Hover` | `--colorStatusDangerBackground3Hover` | `--color-status-danger-background-3-hover` | +| `colorStatusDangerBackground3Pressed` | `--colorStatusDangerBackground3Pressed` | `--color-status-danger-background-3-pressed` | +| `colorStatusDangerForeground1` | `--colorStatusDangerForeground1` | `--color-status-danger-foreground-1` | +| `colorStatusDangerForeground2` | `--colorStatusDangerForeground2` | `--color-status-danger-foreground-2` | +| `colorStatusDangerForeground3` | `--colorStatusDangerForeground3` | `--color-status-danger-foreground-3` | +| `colorStatusDangerForegroundInverted` | `--colorStatusDangerForegroundInverted` | `--color-status-danger-foreground-inverted` | +| `colorStatusDangerBorderActive` | `--colorStatusDangerBorderActive` | `--color-status-danger-border-active` | +| `colorStatusDangerBorder1` | `--colorStatusDangerBorder1` | `--color-status-danger-border-1` | +| `colorStatusDangerBorder2` | `--colorStatusDangerBorder2` | `--color-status-danger-border-2` | + +## Palette colors (150) — `--color-palette-*` + +| Token | Old CSS variable | New CSS variable | +| -------------------------------------- | ---------------------------------------- | -------------------------------------------- | +| `colorPaletteRedBackground1` | `--colorPaletteRedBackground1` | `--color-palette-red-background-1` | +| `colorPaletteRedBackground2` | `--colorPaletteRedBackground2` | `--color-palette-red-background-2` | +| `colorPaletteRedBackground3` | `--colorPaletteRedBackground3` | `--color-palette-red-background-3` | +| `colorPaletteRedBorderActive` | `--colorPaletteRedBorderActive` | `--color-palette-red-border-active` | +| `colorPaletteRedBorder1` | `--colorPaletteRedBorder1` | `--color-palette-red-border-1` | +| `colorPaletteRedBorder2` | `--colorPaletteRedBorder2` | `--color-palette-red-border-2` | +| `colorPaletteRedForeground1` | `--colorPaletteRedForeground1` | `--color-palette-red-foreground-1` | +| `colorPaletteRedForeground2` | `--colorPaletteRedForeground2` | `--color-palette-red-foreground-2` | +| `colorPaletteRedForeground3` | `--colorPaletteRedForeground3` | `--color-palette-red-foreground-3` | +| `colorPaletteRedForegroundInverted` | `--colorPaletteRedForegroundInverted` | `--color-palette-red-foreground-inverted` | +| `colorPaletteGreenBackground1` | `--colorPaletteGreenBackground1` | `--color-palette-green-background-1` | +| `colorPaletteGreenBackground2` | `--colorPaletteGreenBackground2` | `--color-palette-green-background-2` | +| `colorPaletteGreenBackground3` | `--colorPaletteGreenBackground3` | `--color-palette-green-background-3` | +| `colorPaletteGreenBorderActive` | `--colorPaletteGreenBorderActive` | `--color-palette-green-border-active` | +| `colorPaletteGreenBorder1` | `--colorPaletteGreenBorder1` | `--color-palette-green-border-1` | +| `colorPaletteGreenBorder2` | `--colorPaletteGreenBorder2` | `--color-palette-green-border-2` | +| `colorPaletteGreenForeground1` | `--colorPaletteGreenForeground1` | `--color-palette-green-foreground-1` | +| `colorPaletteGreenForeground2` | `--colorPaletteGreenForeground2` | `--color-palette-green-foreground-2` | +| `colorPaletteGreenForeground3` | `--colorPaletteGreenForeground3` | `--color-palette-green-foreground-3` | +| `colorPaletteGreenForegroundInverted` | `--colorPaletteGreenForegroundInverted` | `--color-palette-green-foreground-inverted` | +| `colorPaletteDarkOrangeBackground1` | `--colorPaletteDarkOrangeBackground1` | `--color-palette-dark-orange-background-1` | +| `colorPaletteDarkOrangeBackground2` | `--colorPaletteDarkOrangeBackground2` | `--color-palette-dark-orange-background-2` | +| `colorPaletteDarkOrangeBackground3` | `--colorPaletteDarkOrangeBackground3` | `--color-palette-dark-orange-background-3` | +| `colorPaletteDarkOrangeBorderActive` | `--colorPaletteDarkOrangeBorderActive` | `--color-palette-dark-orange-border-active` | +| `colorPaletteDarkOrangeBorder1` | `--colorPaletteDarkOrangeBorder1` | `--color-palette-dark-orange-border-1` | +| `colorPaletteDarkOrangeBorder2` | `--colorPaletteDarkOrangeBorder2` | `--color-palette-dark-orange-border-2` | +| `colorPaletteDarkOrangeForeground1` | `--colorPaletteDarkOrangeForeground1` | `--color-palette-dark-orange-foreground-1` | +| `colorPaletteDarkOrangeForeground2` | `--colorPaletteDarkOrangeForeground2` | `--color-palette-dark-orange-foreground-2` | +| `colorPaletteDarkOrangeForeground3` | `--colorPaletteDarkOrangeForeground3` | `--color-palette-dark-orange-foreground-3` | +| `colorPaletteYellowBackground1` | `--colorPaletteYellowBackground1` | `--color-palette-yellow-background-1` | +| `colorPaletteYellowBackground2` | `--colorPaletteYellowBackground2` | `--color-palette-yellow-background-2` | +| `colorPaletteYellowBackground3` | `--colorPaletteYellowBackground3` | `--color-palette-yellow-background-3` | +| `colorPaletteYellowBorderActive` | `--colorPaletteYellowBorderActive` | `--color-palette-yellow-border-active` | +| `colorPaletteYellowBorder1` | `--colorPaletteYellowBorder1` | `--color-palette-yellow-border-1` | +| `colorPaletteYellowBorder2` | `--colorPaletteYellowBorder2` | `--color-palette-yellow-border-2` | +| `colorPaletteYellowForeground1` | `--colorPaletteYellowForeground1` | `--color-palette-yellow-foreground-1` | +| `colorPaletteYellowForeground2` | `--colorPaletteYellowForeground2` | `--color-palette-yellow-foreground-2` | +| `colorPaletteYellowForeground3` | `--colorPaletteYellowForeground3` | `--color-palette-yellow-foreground-3` | +| `colorPaletteYellowForegroundInverted` | `--colorPaletteYellowForegroundInverted` | `--color-palette-yellow-foreground-inverted` | +| `colorPaletteBerryBackground1` | `--colorPaletteBerryBackground1` | `--color-palette-berry-background-1` | +| `colorPaletteBerryBackground2` | `--colorPaletteBerryBackground2` | `--color-palette-berry-background-2` | +| `colorPaletteBerryBackground3` | `--colorPaletteBerryBackground3` | `--color-palette-berry-background-3` | +| `colorPaletteBerryBorderActive` | `--colorPaletteBerryBorderActive` | `--color-palette-berry-border-active` | +| `colorPaletteBerryBorder1` | `--colorPaletteBerryBorder1` | `--color-palette-berry-border-1` | +| `colorPaletteBerryBorder2` | `--colorPaletteBerryBorder2` | `--color-palette-berry-border-2` | +| `colorPaletteBerryForeground1` | `--colorPaletteBerryForeground1` | `--color-palette-berry-foreground-1` | +| `colorPaletteBerryForeground2` | `--colorPaletteBerryForeground2` | `--color-palette-berry-foreground-2` | +| `colorPaletteBerryForeground3` | `--colorPaletteBerryForeground3` | `--color-palette-berry-foreground-3` | +| `colorPaletteMarigoldBackground1` | `--colorPaletteMarigoldBackground1` | `--color-palette-marigold-background-1` | +| `colorPaletteMarigoldBackground2` | `--colorPaletteMarigoldBackground2` | `--color-palette-marigold-background-2` | +| `colorPaletteMarigoldBackground3` | `--colorPaletteMarigoldBackground3` | `--color-palette-marigold-background-3` | +| `colorPaletteMarigoldBorderActive` | `--colorPaletteMarigoldBorderActive` | `--color-palette-marigold-border-active` | +| `colorPaletteMarigoldBorder1` | `--colorPaletteMarigoldBorder1` | `--color-palette-marigold-border-1` | +| `colorPaletteMarigoldBorder2` | `--colorPaletteMarigoldBorder2` | `--color-palette-marigold-border-2` | +| `colorPaletteMarigoldForeground1` | `--colorPaletteMarigoldForeground1` | `--color-palette-marigold-foreground-1` | +| `colorPaletteMarigoldForeground2` | `--colorPaletteMarigoldForeground2` | `--color-palette-marigold-foreground-2` | +| `colorPaletteMarigoldForeground3` | `--colorPaletteMarigoldForeground3` | `--color-palette-marigold-foreground-3` | +| `colorPaletteLightGreenBackground1` | `--colorPaletteLightGreenBackground1` | `--color-palette-light-green-background-1` | +| `colorPaletteLightGreenBackground2` | `--colorPaletteLightGreenBackground2` | `--color-palette-light-green-background-2` | +| `colorPaletteLightGreenBackground3` | `--colorPaletteLightGreenBackground3` | `--color-palette-light-green-background-3` | +| `colorPaletteLightGreenBorderActive` | `--colorPaletteLightGreenBorderActive` | `--color-palette-light-green-border-active` | +| `colorPaletteLightGreenBorder1` | `--colorPaletteLightGreenBorder1` | `--color-palette-light-green-border-1` | +| `colorPaletteLightGreenBorder2` | `--colorPaletteLightGreenBorder2` | `--color-palette-light-green-border-2` | +| `colorPaletteLightGreenForeground1` | `--colorPaletteLightGreenForeground1` | `--color-palette-light-green-foreground-1` | +| `colorPaletteLightGreenForeground2` | `--colorPaletteLightGreenForeground2` | `--color-palette-light-green-foreground-2` | +| `colorPaletteLightGreenForeground3` | `--colorPaletteLightGreenForeground3` | `--color-palette-light-green-foreground-3` | +| `colorPaletteAnchorBackground2` | `--colorPaletteAnchorBackground2` | `--color-palette-anchor-background-2` | +| `colorPaletteAnchorBorderActive` | `--colorPaletteAnchorBorderActive` | `--color-palette-anchor-border-active` | +| `colorPaletteAnchorForeground2` | `--colorPaletteAnchorForeground2` | `--color-palette-anchor-foreground-2` | +| `colorPaletteBeigeBackground2` | `--colorPaletteBeigeBackground2` | `--color-palette-beige-background-2` | +| `colorPaletteBeigeBorderActive` | `--colorPaletteBeigeBorderActive` | `--color-palette-beige-border-active` | +| `colorPaletteBeigeForeground2` | `--colorPaletteBeigeForeground2` | `--color-palette-beige-foreground-2` | +| `colorPaletteBlueBackground2` | `--colorPaletteBlueBackground2` | `--color-palette-blue-background-2` | +| `colorPaletteBlueBorderActive` | `--colorPaletteBlueBorderActive` | `--color-palette-blue-border-active` | +| `colorPaletteBlueForeground2` | `--colorPaletteBlueForeground2` | `--color-palette-blue-foreground-2` | +| `colorPaletteBrassBackground2` | `--colorPaletteBrassBackground2` | `--color-palette-brass-background-2` | +| `colorPaletteBrassBorderActive` | `--colorPaletteBrassBorderActive` | `--color-palette-brass-border-active` | +| `colorPaletteBrassForeground2` | `--colorPaletteBrassForeground2` | `--color-palette-brass-foreground-2` | +| `colorPaletteBrownBackground2` | `--colorPaletteBrownBackground2` | `--color-palette-brown-background-2` | +| `colorPaletteBrownBorderActive` | `--colorPaletteBrownBorderActive` | `--color-palette-brown-border-active` | +| `colorPaletteBrownForeground2` | `--colorPaletteBrownForeground2` | `--color-palette-brown-foreground-2` | +| `colorPaletteCornflowerBackground2` | `--colorPaletteCornflowerBackground2` | `--color-palette-cornflower-background-2` | +| `colorPaletteCornflowerBorderActive` | `--colorPaletteCornflowerBorderActive` | `--color-palette-cornflower-border-active` | +| `colorPaletteCornflowerForeground2` | `--colorPaletteCornflowerForeground2` | `--color-palette-cornflower-foreground-2` | +| `colorPaletteCranberryBackground2` | `--colorPaletteCranberryBackground2` | `--color-palette-cranberry-background-2` | +| `colorPaletteCranberryBorderActive` | `--colorPaletteCranberryBorderActive` | `--color-palette-cranberry-border-active` | +| `colorPaletteCranberryForeground2` | `--colorPaletteCranberryForeground2` | `--color-palette-cranberry-foreground-2` | +| `colorPaletteDarkGreenBackground2` | `--colorPaletteDarkGreenBackground2` | `--color-palette-dark-green-background-2` | +| `colorPaletteDarkGreenBorderActive` | `--colorPaletteDarkGreenBorderActive` | `--color-palette-dark-green-border-active` | +| `colorPaletteDarkGreenForeground2` | `--colorPaletteDarkGreenForeground2` | `--color-palette-dark-green-foreground-2` | +| `colorPaletteDarkRedBackground2` | `--colorPaletteDarkRedBackground2` | `--color-palette-dark-red-background-2` | +| `colorPaletteDarkRedBorderActive` | `--colorPaletteDarkRedBorderActive` | `--color-palette-dark-red-border-active` | +| `colorPaletteDarkRedForeground2` | `--colorPaletteDarkRedForeground2` | `--color-palette-dark-red-foreground-2` | +| `colorPaletteForestBackground2` | `--colorPaletteForestBackground2` | `--color-palette-forest-background-2` | +| `colorPaletteForestBorderActive` | `--colorPaletteForestBorderActive` | `--color-palette-forest-border-active` | +| `colorPaletteForestForeground2` | `--colorPaletteForestForeground2` | `--color-palette-forest-foreground-2` | +| `colorPaletteGoldBackground2` | `--colorPaletteGoldBackground2` | `--color-palette-gold-background-2` | +| `colorPaletteGoldBorderActive` | `--colorPaletteGoldBorderActive` | `--color-palette-gold-border-active` | +| `colorPaletteGoldForeground2` | `--colorPaletteGoldForeground2` | `--color-palette-gold-foreground-2` | +| `colorPaletteGrapeBackground2` | `--colorPaletteGrapeBackground2` | `--color-palette-grape-background-2` | +| `colorPaletteGrapeBorderActive` | `--colorPaletteGrapeBorderActive` | `--color-palette-grape-border-active` | +| `colorPaletteGrapeForeground2` | `--colorPaletteGrapeForeground2` | `--color-palette-grape-foreground-2` | +| `colorPaletteLavenderBackground2` | `--colorPaletteLavenderBackground2` | `--color-palette-lavender-background-2` | +| `colorPaletteLavenderBorderActive` | `--colorPaletteLavenderBorderActive` | `--color-palette-lavender-border-active` | +| `colorPaletteLavenderForeground2` | `--colorPaletteLavenderForeground2` | `--color-palette-lavender-foreground-2` | +| `colorPaletteLightTealBackground2` | `--colorPaletteLightTealBackground2` | `--color-palette-light-teal-background-2` | +| `colorPaletteLightTealBorderActive` | `--colorPaletteLightTealBorderActive` | `--color-palette-light-teal-border-active` | +| `colorPaletteLightTealForeground2` | `--colorPaletteLightTealForeground2` | `--color-palette-light-teal-foreground-2` | +| `colorPaletteLilacBackground2` | `--colorPaletteLilacBackground2` | `--color-palette-lilac-background-2` | +| `colorPaletteLilacBorderActive` | `--colorPaletteLilacBorderActive` | `--color-palette-lilac-border-active` | +| `colorPaletteLilacForeground2` | `--colorPaletteLilacForeground2` | `--color-palette-lilac-foreground-2` | +| `colorPaletteMagentaBackground2` | `--colorPaletteMagentaBackground2` | `--color-palette-magenta-background-2` | +| `colorPaletteMagentaBorderActive` | `--colorPaletteMagentaBorderActive` | `--color-palette-magenta-border-active` | +| `colorPaletteMagentaForeground2` | `--colorPaletteMagentaForeground2` | `--color-palette-magenta-foreground-2` | +| `colorPaletteMinkBackground2` | `--colorPaletteMinkBackground2` | `--color-palette-mink-background-2` | +| `colorPaletteMinkBorderActive` | `--colorPaletteMinkBorderActive` | `--color-palette-mink-border-active` | +| `colorPaletteMinkForeground2` | `--colorPaletteMinkForeground2` | `--color-palette-mink-foreground-2` | +| `colorPaletteNavyBackground2` | `--colorPaletteNavyBackground2` | `--color-palette-navy-background-2` | +| `colorPaletteNavyBorderActive` | `--colorPaletteNavyBorderActive` | `--color-palette-navy-border-active` | +| `colorPaletteNavyForeground2` | `--colorPaletteNavyForeground2` | `--color-palette-navy-foreground-2` | +| `colorPalettePeachBackground2` | `--colorPalettePeachBackground2` | `--color-palette-peach-background-2` | +| `colorPalettePeachBorderActive` | `--colorPalettePeachBorderActive` | `--color-palette-peach-border-active` | +| `colorPalettePeachForeground2` | `--colorPalettePeachForeground2` | `--color-palette-peach-foreground-2` | +| `colorPalettePinkBackground2` | `--colorPalettePinkBackground2` | `--color-palette-pink-background-2` | +| `colorPalettePinkBorderActive` | `--colorPalettePinkBorderActive` | `--color-palette-pink-border-active` | +| `colorPalettePinkForeground2` | `--colorPalettePinkForeground2` | `--color-palette-pink-foreground-2` | +| `colorPalettePlatinumBackground2` | `--colorPalettePlatinumBackground2` | `--color-palette-platinum-background-2` | +| `colorPalettePlatinumBorderActive` | `--colorPalettePlatinumBorderActive` | `--color-palette-platinum-border-active` | +| `colorPalettePlatinumForeground2` | `--colorPalettePlatinumForeground2` | `--color-palette-platinum-foreground-2` | +| `colorPalettePlumBackground2` | `--colorPalettePlumBackground2` | `--color-palette-plum-background-2` | +| `colorPalettePlumBorderActive` | `--colorPalettePlumBorderActive` | `--color-palette-plum-border-active` | +| `colorPalettePlumForeground2` | `--colorPalettePlumForeground2` | `--color-palette-plum-foreground-2` | +| `colorPalettePumpkinBackground2` | `--colorPalettePumpkinBackground2` | `--color-palette-pumpkin-background-2` | +| `colorPalettePumpkinBorderActive` | `--colorPalettePumpkinBorderActive` | `--color-palette-pumpkin-border-active` | +| `colorPalettePumpkinForeground2` | `--colorPalettePumpkinForeground2` | `--color-palette-pumpkin-foreground-2` | +| `colorPalettePurpleBackground2` | `--colorPalettePurpleBackground2` | `--color-palette-purple-background-2` | +| `colorPalettePurpleBorderActive` | `--colorPalettePurpleBorderActive` | `--color-palette-purple-border-active` | +| `colorPalettePurpleForeground2` | `--colorPalettePurpleForeground2` | `--color-palette-purple-foreground-2` | +| `colorPaletteRoyalBlueBackground2` | `--colorPaletteRoyalBlueBackground2` | `--color-palette-royal-blue-background-2` | +| `colorPaletteRoyalBlueBorderActive` | `--colorPaletteRoyalBlueBorderActive` | `--color-palette-royal-blue-border-active` | +| `colorPaletteRoyalBlueForeground2` | `--colorPaletteRoyalBlueForeground2` | `--color-palette-royal-blue-foreground-2` | +| `colorPaletteSeafoamBackground2` | `--colorPaletteSeafoamBackground2` | `--color-palette-seafoam-background-2` | +| `colorPaletteSeafoamBorderActive` | `--colorPaletteSeafoamBorderActive` | `--color-palette-seafoam-border-active` | +| `colorPaletteSeafoamForeground2` | `--colorPaletteSeafoamForeground2` | `--color-palette-seafoam-foreground-2` | +| `colorPaletteSteelBackground2` | `--colorPaletteSteelBackground2` | `--color-palette-steel-background-2` | +| `colorPaletteSteelBorderActive` | `--colorPaletteSteelBorderActive` | `--color-palette-steel-border-active` | +| `colorPaletteSteelForeground2` | `--colorPaletteSteelForeground2` | `--color-palette-steel-foreground-2` | +| `colorPaletteTealBackground2` | `--colorPaletteTealBackground2` | `--color-palette-teal-background-2` | +| `colorPaletteTealBorderActive` | `--colorPaletteTealBorderActive` | `--color-palette-teal-border-active` | +| `colorPaletteTealForeground2` | `--colorPaletteTealForeground2` | `--color-palette-teal-foreground-2` | + +## Font families (3) — `--font-*` + +| Token | Old CSS variable | New CSS variable | +| --------------------- | ----------------------- | ------------------ | +| `fontFamilyBase` | `--fontFamilyBase` | `--font-base` | +| `fontFamilyMonospace` | `--fontFamilyMonospace` | `--font-monospace` | +| `fontFamilyNumeric` | `--fontFamilyNumeric` | `--font-numeric` | + +## Font sizes (10) — `--text-*` + +| Token | Old CSS variable | New CSS variable | +| ------------------ | -------------------- | ------------------ | +| `fontSizeBase100` | `--fontSizeBase100` | `--text-base-100` | +| `fontSizeBase200` | `--fontSizeBase200` | `--text-base-200` | +| `fontSizeBase300` | `--fontSizeBase300` | `--text-base-300` | +| `fontSizeBase400` | `--fontSizeBase400` | `--text-base-400` | +| `fontSizeBase500` | `--fontSizeBase500` | `--text-base-500` | +| `fontSizeBase600` | `--fontSizeBase600` | `--text-base-600` | +| `fontSizeHero700` | `--fontSizeHero700` | `--text-hero-700` | +| `fontSizeHero800` | `--fontSizeHero800` | `--text-hero-800` | +| `fontSizeHero900` | `--fontSizeHero900` | `--text-hero-900` | +| `fontSizeHero1000` | `--fontSizeHero1000` | `--text-hero-1000` | + +## Font weights (4) — `--font-weight-*` + +| Token | Old CSS variable | New CSS variable | +| -------------------- | ---------------------- | ------------------------ | +| `fontWeightRegular` | `--fontWeightRegular` | `--font-weight-regular` | +| `fontWeightMedium` | `--fontWeightMedium` | `--font-weight-medium` | +| `fontWeightSemibold` | `--fontWeightSemibold` | `--font-weight-semibold` | +| `fontWeightBold` | `--fontWeightBold` | `--font-weight-bold` | + +## Line heights (10) — `--leading-*` + +| Token | Old CSS variable | New CSS variable | +| -------------------- | ---------------------- | --------------------- | +| `lineHeightBase100` | `--lineHeightBase100` | `--leading-base-100` | +| `lineHeightBase200` | `--lineHeightBase200` | `--leading-base-200` | +| `lineHeightBase300` | `--lineHeightBase300` | `--leading-base-300` | +| `lineHeightBase400` | `--lineHeightBase400` | `--leading-base-400` | +| `lineHeightBase500` | `--lineHeightBase500` | `--leading-base-500` | +| `lineHeightBase600` | `--lineHeightBase600` | `--leading-base-600` | +| `lineHeightHero700` | `--lineHeightHero700` | `--leading-hero-700` | +| `lineHeightHero800` | `--lineHeightHero800` | `--leading-hero-800` | +| `lineHeightHero900` | `--lineHeightHero900` | `--leading-hero-900` | +| `lineHeightHero1000` | `--lineHeightHero1000` | `--leading-hero-1000` | + +## Border radii (11) — `--radius-*` + +| Token | Old CSS variable | New CSS variable | +| ---------------------- | ------------------------ | -------------------- | +| `borderRadiusNone` | `--borderRadiusNone` | `--radius-none` | +| `borderRadiusSmall` | `--borderRadiusSmall` | `--radius-small` | +| `borderRadiusMedium` | `--borderRadiusMedium` | `--radius-medium` | +| `borderRadiusLarge` | `--borderRadiusLarge` | `--radius-large` | +| `borderRadiusXLarge` | `--borderRadiusXLarge` | `--radius-x-large` | +| `borderRadius2XLarge` | `--borderRadius2XLarge` | `--radius-2-x-large` | +| `borderRadius3XLarge` | `--borderRadius3XLarge` | `--radius-3-x-large` | +| `borderRadius4XLarge` | `--borderRadius4XLarge` | `--radius-4-x-large` | +| `borderRadius5XLarge` | `--borderRadius5XLarge` | `--radius-5-x-large` | +| `borderRadius6XLarge` | `--borderRadius6XLarge` | `--radius-6-x-large` | +| `borderRadiusCircular` | `--borderRadiusCircular` | `--radius-circular` | + +## Shadows (12) — `--shadow-*` + +| Token | Old CSS variable | New CSS variable | +| --------------- | ----------------- | ------------------- | +| `shadow2` | `--shadow2` | `--shadow-2` | +| `shadow4` | `--shadow4` | `--shadow-4` | +| `shadow8` | `--shadow8` | `--shadow-8` | +| `shadow16` | `--shadow16` | `--shadow-16` | +| `shadow28` | `--shadow28` | `--shadow-28` | +| `shadow64` | `--shadow64` | `--shadow-64` | +| `shadow2Brand` | `--shadow2Brand` | `--shadow-2-brand` | +| `shadow4Brand` | `--shadow4Brand` | `--shadow-4-brand` | +| `shadow8Brand` | `--shadow8Brand` | `--shadow-8-brand` | +| `shadow16Brand` | `--shadow16Brand` | `--shadow-16-brand` | +| `shadow28Brand` | `--shadow28Brand` | `--shadow-28-brand` | +| `shadow64Brand` | `--shadow64Brand` | `--shadow-64-brand` | + +## Easing curves (9) — `--ease-*` + +| Token | Old CSS variable | New CSS variable | +| -------------------- | ---------------------- | ----------------------- | +| `curveAccelerateMax` | `--curveAccelerateMax` | `--ease-accelerate-max` | +| `curveAccelerateMid` | `--curveAccelerateMid` | `--ease-accelerate-mid` | +| `curveAccelerateMin` | `--curveAccelerateMin` | `--ease-accelerate-min` | +| `curveDecelerateMax` | `--curveDecelerateMax` | `--ease-decelerate-max` | +| `curveDecelerateMid` | `--curveDecelerateMid` | `--ease-decelerate-mid` | +| `curveDecelerateMin` | `--curveDecelerateMin` | `--ease-decelerate-min` | +| `curveEasyEaseMax` | `--curveEasyEaseMax` | `--ease-easy-ease-max` | +| `curveEasyEase` | `--curveEasyEase` | `--ease-easy-ease` | +| `curveLinear` | `--curveLinear` | `--ease-linear` | + +## Durations (8) — `--duration-* (custom namespace; @theme key is --transition-duration-*)` + +| Token | Old CSS variable | New CSS variable | +| ------------------- | --------------------- | ----------------------- | +| `durationUltraFast` | `--durationUltraFast` | `--duration-ultra-fast` | +| `durationFaster` | `--durationFaster` | `--duration-faster` | +| `durationFast` | `--durationFast` | `--duration-fast` | +| `durationNormal` | `--durationNormal` | `--duration-normal` | +| `durationGentle` | `--durationGentle` | `--duration-gentle` | +| `durationSlow` | `--durationSlow` | `--duration-slow` | +| `durationSlower` | `--durationSlower` | `--duration-slower` | +| `durationUltraSlow` | `--durationUltraSlow` | `--duration-ultra-slow` | + +## z-index (8) — `--z-index-* (fallback carried in tokens.*)` + +| Token | Old CSS variable | New CSS variable | +| ------------------ | -------------------- | ---------------------- | +| `zIndexBackground` | `--zIndexBackground` | `--z-index-background` | +| `zIndexContent` | `--zIndexContent` | `--z-index-content` | +| `zIndexOverlay` | `--zIndexOverlay` | `--z-index-overlay` | +| `zIndexPopup` | `--zIndexPopup` | `--z-index-popup` | +| `zIndexMessages` | `--zIndexMessages` | `--z-index-messages` | +| `zIndexFloating` | `--zIndexFloating` | `--z-index-floating` | +| `zIndexPriority` | `--zIndexPriority` | `--z-index-priority` | +| `zIndexDebug` | `--zIndexDebug` | `--z-index-debug` | + +## Spacing (Phase 1) (22) — `--spacing-horizontal-* / --spacing-vertical-*` + +| Token | Old CSS variable | New CSS variable | +| ------------------------- | --------------------------- | ------------------------------ | +| `spacingHorizontalNone` | `--spacingHorizontalNone` | `--spacing-horizontal-none` | +| `spacingHorizontalXXS` | `--spacingHorizontalXXS` | `--spacing-horizontal-xxs` | +| `spacingHorizontalXS` | `--spacingHorizontalXS` | `--spacing-horizontal-xs` | +| `spacingHorizontalSNudge` | `--spacingHorizontalSNudge` | `--spacing-horizontal-s-nudge` | +| `spacingHorizontalS` | `--spacingHorizontalS` | `--spacing-horizontal-s` | +| `spacingHorizontalMNudge` | `--spacingHorizontalMNudge` | `--spacing-horizontal-m-nudge` | +| `spacingHorizontalM` | `--spacingHorizontalM` | `--spacing-horizontal-m` | +| `spacingHorizontalL` | `--spacingHorizontalL` | `--spacing-horizontal-l` | +| `spacingHorizontalXL` | `--spacingHorizontalXL` | `--spacing-horizontal-xl` | +| `spacingHorizontalXXL` | `--spacingHorizontalXXL` | `--spacing-horizontal-xxl` | +| `spacingHorizontalXXXL` | `--spacingHorizontalXXXL` | `--spacing-horizontal-xxxl` | +| `spacingVerticalNone` | `--spacingVerticalNone` | `--spacing-vertical-none` | +| `spacingVerticalXXS` | `--spacingVerticalXXS` | `--spacing-vertical-xxs` | +| `spacingVerticalXS` | `--spacingVerticalXS` | `--spacing-vertical-xs` | +| `spacingVerticalSNudge` | `--spacingVerticalSNudge` | `--spacing-vertical-s-nudge` | +| `spacingVerticalS` | `--spacingVerticalS` | `--spacing-vertical-s` | +| `spacingVerticalMNudge` | `--spacingVerticalMNudge` | `--spacing-vertical-m-nudge` | +| `spacingVerticalM` | `--spacingVerticalM` | `--spacing-vertical-m` | +| `spacingVerticalL` | `--spacingVerticalL` | `--spacing-vertical-l` | +| `spacingVerticalXL` | `--spacingVerticalXL` | `--spacing-vertical-xl` | +| `spacingVerticalXXL` | `--spacingVerticalXXL` | `--spacing-vertical-xxl` | +| `spacingVerticalXXXL` | `--spacingVerticalXXXL` | `--spacing-vertical-xxxl` | + +## Stroke widths (Phase 1) (4) — `--stroke-width-*` + +| Token | Old CSS variable | New CSS variable | +| --------------------- | ----------------------- | ------------------------- | +| `strokeWidthThin` | `--strokeWidthThin` | `--stroke-width-thin` | +| `strokeWidthThick` | `--strokeWidthThick` | `--stroke-width-thick` | +| `strokeWidthThicker` | `--strokeWidthThicker` | `--stroke-width-thicker` | +| `strokeWidthThickest` | `--strokeWidthThickest` | `--stroke-width-thickest` | From 674f282366569b591e378ff4fbe575b661a69a4f Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 22:32:41 -0700 Subject: [PATCH 624/640] feat(tokens): theme class-name constants + committed theme-values snapshot (theming 2b) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds the 7 shipped theme CLASS-name constants (webLightThemeClassName, ..., themeClassNames map, ThemeClassName type) — the JS read path for the static CSS theme classes — plus the committed theme-values.json snapshot (7 themes x 459 keys) that feeds the react-tailwind-theme generator without a build-time dependency edge. Jest gates: themeClassNames derivation lockstep + themeValues.json drift (deep-equal vs computed themes); generate/verify scripts wired as nx targets and verify-theme-values added to the CI target lists. Theme objects and createTheme factories deliberately REMAIN exported here — they are the build-time generator/tooling input under the Phase 2b contract. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .devops/templates/build-test-lint.yml | 11 +- .../createCSSRuleFromThemeBestPractices.md | 10 - .../createCSSRuleFromThemeDefault.module.css | 21 - .../createCSSRuleFromThemeDefault.stories.tsx | 27 - .../createCSSRuleFromThemeDescription.md | 1 - ...createCSSRuleFromThemeSwitching.module.css | 27 - ...reateCSSRuleFromThemeSwitching.stories.tsx | 59 - .../createCSSRuleFromTheme/index.stories.tsx | 19 - packages/tokens/etc/tokens.api.md | 35 + packages/tokens/package.json | 4 + .../tokens/scripts/generate-theme-values.js | 118 + packages/tokens/src/index.ts | 11 + packages/tokens/src/themes/index.ts | 11 + .../tokens/src/themes/themeClassNames.test.ts | 50 + packages/tokens/src/themes/themeClassNames.ts | 54 + .../tokens/src/themes/themeValues.test.ts | 50 + packages/tokens/theme-values.json | 3235 +++++++++++++++++ 17 files changed, 3575 insertions(+), 168 deletions(-) delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeBestPractices.md delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.stories.tsx delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.stories.tsx delete mode 100644 apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx create mode 100644 packages/tokens/scripts/generate-theme-values.js create mode 100644 packages/tokens/src/themes/themeClassNames.test.ts create mode 100644 packages/tokens/src/themes/themeClassNames.ts create mode 100644 packages/tokens/src/themes/themeValues.test.ts create mode 100644 packages/tokens/theme-values.json diff --git a/.devops/templates/build-test-lint.yml b/.devops/templates/build-test-lint.yml index 279d922c4e0e62..5684a9417447e2 100644 --- a/.devops/templates/build-test-lint.yml +++ b/.devops/templates/build-test-lint.yml @@ -44,15 +44,18 @@ steps: DANGER_GITHUB_API_TOKEN: $(DANGER_GITHUB_API_TOKEN) # `verify-tokens-css` exists on exactly one project (@fluentui/react-tailwind-theme). It asserts - # the checked-in css/tokens.css still matches what the generator produces from @fluentui/tokens, - # so a token added or renamed upstream cannot silently leave the Tailwind theme layer stale. + # the checked-in css/tokens.css AND css/themes.css still match what the generator produces from + # @fluentui/tokens (tokens.ts + theme-values.json), so a token added or renamed upstream — or a + # theme value changed without regenerating — cannot silently leave the Tailwind theme layer stale. + # `verify-theme-values` (@fluentui/tokens) asserts the committed theme-values.json snapshot matches + # the built theme objects, closing the loop from the values side (theming Phase 2b). - script: | - yarn nx affected -t build test lint type-check test-ssr test-integration verify-packaging verify-tokens-css --nxBail $(sinceArg) + yarn nx affected -t build test lint type-check test-ssr test-integration verify-packaging verify-tokens-css verify-theme-values --nxBail $(sinceArg) displayName: build, test, lint, test-ssr (affected) condition: eq(variables.isPR, true) - script: | - yarn nx run-many -t build test lint type-check test-ssr test-integration verify-packaging verify-tokens-css --nxBail + yarn nx run-many -t build test lint type-check test-ssr test-integration verify-packaging verify-tokens-css verify-theme-values --nxBail displayName: build, test, lint, test-ssr (all) condition: eq(variables.isPR, false) diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeBestPractices.md b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeBestPractices.md deleted file mode 100644 index 62fddbfefec6ad..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeBestPractices.md +++ /dev/null @@ -1,10 +0,0 @@ -## Best practices - -### Do - -- **Create CSS rules outside of component lifecyles.** - CSS rule creation involves iterating the entire theme and is relatively costly. Aim to create CSS rules only as needed, for example, during application boot prior to rendering any UI. - -- **Prefer using `FluentProvider`.** - `FluentProvider` generates CSS rules using `createCSSRuleFromTheme()` and should cover most cases. Only reach for `createCSSRuleFromTheme()` when - `FluentProvider` cannot address your needs. diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css deleted file mode 100644 index 980c2e6e7df3a2..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.module.css +++ /dev/null @@ -1,21 +0,0 @@ -/* Story styles for createCSSRuleFromThemeDefault. - * Token references are the Fluent theme's CSS variables. */ - -.colorBrandBackground { - background-color: var(--color-brand-background); - color: var(--color-neutral-foreground-on-brand); -} - -.colorBrandBackground2 { - background-color: var(--color-brand-background-2); - color: var(--color-neutral-foreground-2); -} - -.box { - padding: var(--spacing-horizontal-m); -} - -.layout { - display: flex; - gap: var(--spacing-horizontal-m) var(--spacing-vertical-m); -} diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.stories.tsx b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.stories.tsx deleted file mode 100644 index baf81cba85f65a..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDefault.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* eslint-disable no-restricted-properties */ -import * as React from 'react'; -import { createCSSRuleFromTheme, webLightTheme } from '@fluentui/react-components'; - -import styles from './createCSSRuleFromThemeDefault.module.css'; - -export const Default = () => { - React.useLayoutEffect(() => { - // When theme switching is not needed, you can use the `:root` selector - const cssRule = createCSSRuleFromTheme(':root', webLightTheme); - - const style = document.createElement('style'); - document.head.appendChild(style); - style.sheet?.insertRule(cssRule); - - return () => { - document.head.removeChild(style); - }; - }, []); - - return ( -
-
colorBrandBackground
-
colorBrandBackground2
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md deleted file mode 100644 index 2d6e57860012b9..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md +++ /dev/null @@ -1 +0,0 @@ -This API allows you to create CSS from a theme and apply this CSS, for example, to ``. diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css deleted file mode 100644 index 477ca5558d5e70..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.module.css +++ /dev/null @@ -1,27 +0,0 @@ -/* Story styles for createCSSRuleFromThemeSwitching. - * Token references are the Fluent theme's CSS variables. */ - -.colorBrandBackground { - background-color: var(--color-brand-background); - color: var(--color-neutral-foreground-on-brand); -} - -.colorBrandBackground2 { - background-color: var(--color-brand-background-2); - color: var(--color-neutral-foreground-2); -} - -.box { - padding: var(--spacing-horizontal-m); -} - -.horizontalLayout { - display: flex; - gap: var(--spacing-horizontal-m) var(--spacing-vertical-m); -} - -.verticalLayout { - display: flex; - flex-direction: column; - gap: var(--spacing-horizontal-m) var(--spacing-vertical-m); -} diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.stories.tsx b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.stories.tsx deleted file mode 100644 index 4b21a9b8c8fdbf..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeSwitching.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/* eslint-disable no-restricted-properties */ -import * as React from 'react'; -import { createCSSRuleFromTheme, webLightTheme, webDarkTheme } from '@fluentui/react-components'; - -import styles from './createCSSRuleFromThemeSwitching.module.css'; - -export const Switching = () => { - React.useLayoutEffect(() => { - const lightThemeCSS = createCSSRuleFromTheme('.fluentui-light-theme', webLightTheme); - const darkThemeCSS = createCSSRuleFromTheme('.fluentui-dark-theme', webDarkTheme); - - const style = document.createElement('style'); - document.head.appendChild(style); - style.sheet?.insertRule(lightThemeCSS); - style.sheet?.insertRule(darkThemeCSS); - - return () => { - document.head.removeChild(style); - }; - }, []); - - // Toggle the class name to change themes - const [selectedTheme, setSelectedTheme] = React.useState<'fluentui-light-theme' | 'fluentui-dark-theme'>( - 'fluentui-light-theme', - ); - - return ( -
-
-
- setSelectedTheme('fluentui-light-theme')} - checked={selectedTheme === 'fluentui-light-theme'} - /> - -
-
- setSelectedTheme('fluentui-dark-theme')} - checked={selectedTheme === 'fluentui-dark-theme'} - /> - -
-
-
-
colorBrandBackground
-
colorBrandBackground2
-
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx deleted file mode 100644 index 837ea6e55eaa30..00000000000000 --- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/index.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Meta } from '@storybook/react-webpack5'; - -import descriptionMd from './createCSSRuleFromThemeDescription.md'; -import bestPracticesMd from './createCSSRuleFromThemeBestPractices.md'; - -export { Default } from './createCSSRuleFromThemeDefault.stories'; -export { Switching } from './createCSSRuleFromThemeSwitching.stories'; - -export default { - title: 'Utilities/Theme/createCSSRuleFromTheme', - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - hideArgsTable: true, - }, - }, -} as Meta; diff --git a/packages/tokens/etc/tokens.api.md b/packages/tokens/etc/tokens.api.md index b639fa6f41878e..2cd5addeca6b06 100644 --- a/packages/tokens/etc/tokens.api.md +++ b/packages/tokens/etc/tokens.api.md @@ -465,21 +465,50 @@ export type StrokeWidthTokens = { // @public (undocumented) export const teamsDarkTheme: Theme; +// @public (undocumented) +export const teamsDarkThemeClassName = "fui-theme-teams-dark"; + // @public (undocumented) export const teamsDarkV21Theme: Theme; +// @public (undocumented) +export const teamsDarkV21ThemeClassName = "fui-theme-teams-dark-v21"; + // @public (undocumented) export const teamsHighContrastTheme: Theme; +// @public (undocumented) +export const teamsHighContrastThemeClassName = "fui-theme-teams-high-contrast"; + // @public (undocumented) export const teamsLightTheme: Theme; +// @public (undocumented) +export const teamsLightThemeClassName = "fui-theme-teams-light"; + // @public (undocumented) export const teamsLightV21Theme: Theme; +// @public (undocumented) +export const teamsLightV21ThemeClassName = "fui-theme-teams-light-v21"; + // @public (undocumented) export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens & ZIndexTokens; +// @public +export type ThemeClassName = typeof webLightThemeClassName | typeof webDarkThemeClassName | typeof teamsLightThemeClassName | typeof teamsDarkThemeClassName | typeof teamsHighContrastThemeClassName | typeof teamsLightV21ThemeClassName | typeof teamsDarkV21ThemeClassName; + +// @public +export const themeClassNames: { + readonly webLightTheme: "fui-theme-web-light"; + readonly webDarkTheme: "fui-theme-web-dark"; + readonly teamsLightTheme: "fui-theme-teams-light"; + readonly teamsDarkTheme: "fui-theme-teams-dark"; + readonly teamsHighContrastTheme: "fui-theme-teams-high-contrast"; + readonly teamsLightV21Theme: "fui-theme-teams-light-v21"; + readonly teamsDarkV21Theme: "fui-theme-teams-dark-v21"; +}; + // @public export function themeToTokensObject(theme: TTheme): Record; @@ -536,9 +565,15 @@ export type VerticalSpacingTokens = { // @public (undocumented) export const webDarkTheme: Theme; +// @public (undocumented) +export const webDarkThemeClassName = "fui-theme-web-dark"; + // @public (undocumented) export const webLightTheme: Theme; +// @public +export const webLightThemeClassName = "fui-theme-web-light"; + // @public export type ZIndexTokens = { zIndexBackground?: string; diff --git a/packages/tokens/package.json b/packages/tokens/package.json index bbe00140f1d928..62278956597b87 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -11,6 +11,10 @@ "url": "https://github.com/microsoft/fluentui" }, "license": "MIT", + "scripts": { + "generate-theme-values": "node scripts/generate-theme-values.js", + "verify-theme-values": "node scripts/generate-theme-values.js --check" + }, "dependencies": { "@swc/helpers": "^0.5.1" }, diff --git a/packages/tokens/scripts/generate-theme-values.js b/packages/tokens/scripts/generate-theme-values.js new file mode 100644 index 00000000000000..63bdf6b548bd28 --- /dev/null +++ b/packages/tokens/scripts/generate-theme-values.js @@ -0,0 +1,118 @@ +// @ts-check +/** + * Emits `theme-values.json` — a committed snapshot of the 7 shipped theme objects' + * token values (theming Phase 2b). + * + * WHY A SNAPSHOT: `@fluentui/react-tailwind-theme`'s generator + * (`scripts/generate-tokens-css.js`) deliberately has no dependency edge on this + * package's BUILD output — a fresh clone must be able to regenerate/verify its CSS + * without building anything. The theme VALUES, however, are computed + * (`createLightTheme(brandWeb)`, …), so they cannot be text-scraped from source the way + * `tokens.ts` is. This committed JSON is the bridge: the CSS generator reads it, and + * `src/themes/themeValues.test.ts` asserts on every jest run that it deep-equals the + * computed themes — drift fails CI from this package's side. + * + * Regenerating (only needed when a theme value intentionally changes): + * yarn nx run tokens:build # the script reads lib-commonjs + * yarn workspace @fluentui/tokens generate-theme-values + * + * `--check` exits non-zero when the committed file is missing or stale. + */ + +const fs = require('fs'); +const path = require('path'); + +const PACKAGE_ROOT = path.resolve(__dirname, '..'); +const OUTPUT = path.join(PACKAGE_ROOT, 'theme-values.json'); + +/** The shipped themes. Keep in sync with `src/themes/index.ts` and `src/themes/themeClassNames.ts`. */ +const THEME_NAMES = [ + 'webLightTheme', + 'webDarkTheme', + 'teamsLightTheme', + 'teamsDarkTheme', + 'teamsHighContrastTheme', + 'teamsLightV21Theme', + 'teamsDarkV21Theme', +]; + +function loadThemes() { + const libEntry = path.join(PACKAGE_ROOT, 'lib-commonjs', 'index.js'); + + if (!fs.existsSync(libEntry)) { + throw new Error( + `Cannot find built output at ${libEntry}. Run \`yarn nx run tokens:build\` first — ` + + 'theme values are computed (createLightTheme etc.), so the snapshot is generated from the built package.', + ); + } + + // eslint-disable-next-line @typescript-eslint/no-require-imports + const tokensPackage = require(libEntry); + /** @type {Record>} */ + const themes = {}; + + for (const name of THEME_NAMES) { + const theme = tokensPackage[name]; + + if (!theme || typeof theme !== 'object') { + throw new Error(`Theme \`${name}\` is missing from the built package — shipped-theme set drifted.`); + } + + themes[name] = theme; + } + + return themes; +} + +function render() { + const themes = loadThemes(); + const packageJson = JSON.parse(fs.readFileSync(path.join(PACKAGE_ROOT, 'package.json'), 'utf8')); + + const document = { + $schema: 'fluent-theme-values', + description: + 'Committed snapshot of the shipped Fluent theme objects (theme key -> value). ' + + 'Consumed by @fluentui/react-tailwind-theme/scripts/generate-tokens-css.js to emit the static theme ' + + 'CSS classes; drift against the computed themes fails src/themes/themeValues.test.ts. ' + + 'Regenerate with `yarn workspace @fluentui/tokens generate-theme-values` after `yarn nx run tokens:build`.', + generatedBy: 'packages/tokens/scripts/generate-theme-values.js', + source: `${packageJson.name}@${packageJson.version}`, + themes, + }; + + return `${JSON.stringify(document, null, 2)}\n`; +} + +function main() { + const args = process.argv.slice(2); + const check = args.includes('--check'); + const contents = render(); + + if (check) { + if (!fs.existsSync(OUTPUT)) { + console.error(`MISSING: ${OUTPUT} — run \`yarn workspace @fluentui/tokens generate-theme-values\`.`); + process.exitCode = 1; + return; + } + + const existing = fs.readFileSync(OUTPUT, 'utf8').replace(/\r\n/g, '\n'); + + if (existing !== contents) { + console.error(`STALE: ${OUTPUT} — run \`yarn workspace @fluentui/tokens generate-theme-values\`.`); + process.exitCode = 1; + return; + } + + console.log(`OK: ${OUTPUT} is current.`); + return; + } + + fs.writeFileSync(OUTPUT, contents); + console.log(`Wrote ${OUTPUT}.`); +} + +if (require.main === module) { + main(); +} + +module.exports = { THEME_NAMES, loadThemes, render, OUTPUT }; diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts index b6d507baa63eef..99536a888d0688 100644 --- a/packages/tokens/src/index.ts +++ b/packages/tokens/src/index.ts @@ -7,6 +7,17 @@ export { webDarkTheme, webLightTheme, } from './themes'; +export { + teamsDarkThemeClassName, + teamsDarkV21ThemeClassName, + teamsHighContrastThemeClassName, + teamsLightThemeClassName, + teamsLightV21ThemeClassName, + themeClassNames, + webDarkThemeClassName, + webLightThemeClassName, +} from './themes'; +export type { ThemeClassName } from './themes'; export { createDarkTheme, createHighContrastTheme, createLightTheme, createTeamsDarkTheme } from './utils'; export { themeToTokensObject } from './themeToTokensObject'; diff --git a/packages/tokens/src/themes/index.ts b/packages/tokens/src/themes/index.ts index 952db669b6f4bf..6ae96d35ec80c5 100644 --- a/packages/tokens/src/themes/index.ts +++ b/packages/tokens/src/themes/index.ts @@ -6,3 +6,14 @@ export { teamsLightV21Theme, } from './teams/index'; export { webDarkTheme, webLightTheme } from './web/index'; +export { + teamsDarkThemeClassName, + teamsDarkV21ThemeClassName, + teamsHighContrastThemeClassName, + teamsLightThemeClassName, + teamsLightV21ThemeClassName, + themeClassNames, + webDarkThemeClassName, + webLightThemeClassName, +} from './themeClassNames'; +export type { ThemeClassName } from './themeClassNames'; diff --git a/packages/tokens/src/themes/themeClassNames.test.ts b/packages/tokens/src/themes/themeClassNames.test.ts new file mode 100644 index 00000000000000..0ecd82f8cd2fc1 --- /dev/null +++ b/packages/tokens/src/themes/themeClassNames.test.ts @@ -0,0 +1,50 @@ +import { themeClassNames } from './themeClassNames'; + +/** + * Lockstep gate for the shipped theme class names (theming Phase 2b). + * + * The class name for a theme is DERIVED from its export name: + * `fui-theme-` + kebab-case(name minus the `Theme` suffix). The + * `@fluentui/react-tailwind-theme` generator performs the same derivation when emitting + * the theme CSS classes and asserts it against `themeClassNames.ts` — this test asserts + * it from the jest side so a rename in either place fails CI. + */ +describe('themeClassNames', () => { + const deriveClassName = (themeName: string): string => { + const base = themeName.replace(/Theme$/, ''); + // Digits attach to the preceding segment (V21 -> v21). + const kebab = base.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(); + + return `fui-theme-${kebab}`; + }; + + it('derives every class name from the theme export name', () => { + for (const [themeName, className] of Object.entries(themeClassNames)) { + expect(className).toBe(deriveClassName(themeName)); + } + }); + + it('covers exactly the shipped theme set', () => { + expect(Object.keys(themeClassNames).sort()).toEqual( + [ + 'teamsDarkTheme', + 'teamsDarkV21Theme', + 'teamsHighContrastTheme', + 'teamsLightTheme', + 'teamsLightV21Theme', + 'webDarkTheme', + 'webLightTheme', + ].sort(), + ); + }); + + it('class names are unique and fui-theme- prefixed', () => { + const values = Object.values(themeClassNames); + + expect(new Set(values).size).toBe(values.length); + + for (const value of values) { + expect(value).toMatch(/^fui-theme-[a-z0-9-]+$/); + } + }); +}); diff --git a/packages/tokens/src/themes/themeClassNames.ts b/packages/tokens/src/themes/themeClassNames.ts new file mode 100644 index 00000000000000..1b4d4686befb1b --- /dev/null +++ b/packages/tokens/src/themes/themeClassNames.ts @@ -0,0 +1,54 @@ +/** + * CSS class names for the shipped Fluent themes (theming Phase 2b). + * + * Each class is emitted, at build time, by `@fluentui/react-tailwind-theme` inside + * `@layer fui.theme` and contains ONLY custom-property declarations — the canonical + * kebab-case token variables (`--color-neutral-background-1: …`, see + * `migration/griffel-to-tailwind/reports/token-rename-map.json`). Applying one of these + * classes to any DOM node themes that node's subtree; the default (web light) values are + * emitted at `:root, :host`, so a theme class is only needed for non-default themes or + * scoped theming. + * + * These constants are the JS read path for the class names — pass them to + * `FluentProvider`'s `themeClassName` prop or put them on any element directly. + * + * LOCKSTEP CONTRACT: the react-tailwind-theme generator + * (`scripts/generate-themes-css.js`) derives the emitted class names from the theme + * export names and asserts they equal the constants in this file (it text-reads this + * file, same as it reads `tokens.ts`); `themeClassNames.test.ts` asserts the same + * derivation from the jest side. Renaming a theme or a class requires updating both in + * the same change. + */ + +export const webLightThemeClassName = 'fui-theme-web-light'; +export const webDarkThemeClassName = 'fui-theme-web-dark'; +export const teamsLightThemeClassName = 'fui-theme-teams-light'; +export const teamsDarkThemeClassName = 'fui-theme-teams-dark'; +export const teamsHighContrastThemeClassName = 'fui-theme-teams-high-contrast'; +export const teamsLightV21ThemeClassName = 'fui-theme-teams-light-v21'; +export const teamsDarkV21ThemeClassName = 'fui-theme-teams-dark-v21'; + +/** Union of the shipped theme class names. */ +export type ThemeClassName = + | typeof webLightThemeClassName + | typeof webDarkThemeClassName + | typeof teamsLightThemeClassName + | typeof teamsDarkThemeClassName + | typeof teamsHighContrastThemeClassName + | typeof teamsLightV21ThemeClassName + | typeof teamsDarkV21ThemeClassName; + +/** + * Map from the historical theme export name (`webLightTheme`, …) to its CSS class name. + * Handy for harnesses that enumerate themes; the per-theme constants above are the + * primary read path. + */ +export const themeClassNames = { + webLightTheme: webLightThemeClassName, + webDarkTheme: webDarkThemeClassName, + teamsLightTheme: teamsLightThemeClassName, + teamsDarkTheme: teamsDarkThemeClassName, + teamsHighContrastTheme: teamsHighContrastThemeClassName, + teamsLightV21Theme: teamsLightV21ThemeClassName, + teamsDarkV21Theme: teamsDarkV21ThemeClassName, +} as const; diff --git a/packages/tokens/src/themes/themeValues.test.ts b/packages/tokens/src/themes/themeValues.test.ts new file mode 100644 index 00000000000000..51dcdb6714fdb3 --- /dev/null +++ b/packages/tokens/src/themes/themeValues.test.ts @@ -0,0 +1,50 @@ +import * as fs from 'fs'; +import * as path from 'path'; + +import { + teamsDarkTheme, + teamsDarkV21Theme, + teamsHighContrastTheme, + teamsLightTheme, + teamsLightV21Theme, +} from './teams/index'; +import { webDarkTheme, webLightTheme } from './web/index'; + +const SHIPPED_THEMES = { + webLightTheme, + webDarkTheme, + teamsLightTheme, + teamsDarkTheme, + teamsHighContrastTheme, + teamsLightV21Theme, + teamsDarkV21Theme, +} as const; + +/** + * Drift gate for the committed `theme-values.json` snapshot (theming Phase 2b). + * + * The snapshot is the value source for the static theme CSS classes emitted by + * `@fluentui/react-tailwind-theme` (which deliberately does not depend on this package's + * build output). If a theme value changes without regenerating the snapshot, the shipped + * CSS would silently diverge from the JS themes — this test turns that into a CI failure. + * + * To fix a failure: `yarn nx run tokens:build && yarn workspace @fluentui/tokens generate-theme-values`, + * then regenerate the theme CSS (`yarn workspace @fluentui/react-tailwind-theme generate-tokens-css`). + */ +describe('theme-values.json', () => { + const snapshotPath = path.join(__dirname, '..', '..', 'theme-values.json'); + + it('exists (committed at the package root)', () => { + expect(fs.existsSync(snapshotPath)).toBe(true); + }); + + it('deep-equals the computed shipped themes', () => { + const snapshot = JSON.parse(fs.readFileSync(snapshotPath, 'utf8')); + + expect(Object.keys(snapshot.themes)).toEqual(Object.keys(SHIPPED_THEMES)); + + for (const [name, theme] of Object.entries(SHIPPED_THEMES)) { + expect(snapshot.themes[name]).toEqual(theme); + } + }); +}); diff --git a/packages/tokens/theme-values.json b/packages/tokens/theme-values.json new file mode 100644 index 00000000000000..1f368ad7898cdb --- /dev/null +++ b/packages/tokens/theme-values.json @@ -0,0 +1,3235 @@ +{ + "$schema": "fluent-theme-values", + "description": "Committed snapshot of the shipped Fluent theme objects (theme key -> value). Consumed by @fluentui/react-tailwind-theme/scripts/generate-tokens-css.js to emit the static theme CSS classes; drift against the computed themes fails src/themes/themeValues.test.ts. Regenerate with `yarn workspace @fluentui/tokens generate-theme-values` after `yarn nx run tokens:build`.", + "generatedBy": "packages/tokens/scripts/generate-theme-values.js", + "source": "@fluentui/tokens@1.0.0-alpha.23", + "themes": { + "webLightTheme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#242424", + "colorNeutralForeground1Hover": "#242424", + "colorNeutralForeground1Pressed": "#242424", + "colorNeutralForeground1Selected": "#242424", + "colorNeutralForeground2": "#424242", + "colorNeutralForeground2Hover": "#242424", + "colorNeutralForeground2Pressed": "#242424", + "colorNeutralForeground2Selected": "#242424", + "colorNeutralForeground2BrandHover": "#0f6cbd", + "colorNeutralForeground2BrandPressed": "#115ea3", + "colorNeutralForeground2BrandSelected": "#0f6cbd", + "colorNeutralForeground3": "#616161", + "colorNeutralForeground3Hover": "#424242", + "colorNeutralForeground3Pressed": "#424242", + "colorNeutralForeground3Selected": "#424242", + "colorNeutralForeground3BrandHover": "#0f6cbd", + "colorNeutralForeground3BrandPressed": "#115ea3", + "colorNeutralForeground3BrandSelected": "#0f6cbd", + "colorNeutralForeground4": "#707070", + "colorNeutralForeground5": "#616161", + "colorNeutralForeground5Hover": "#242424", + "colorNeutralForeground5Pressed": "#242424", + "colorNeutralForeground5Selected": "#242424", + "colorNeutralForegroundDisabled": "#bdbdbd", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#115ea3", + "colorBrandForegroundLinkHover": "#0f548c", + "colorBrandForegroundLinkPressed": "#0c3b5e", + "colorBrandForegroundLinkSelected": "#115ea3", + "colorNeutralForeground2Link": "#424242", + "colorNeutralForeground2LinkHover": "#242424", + "colorNeutralForeground2LinkPressed": "#242424", + "colorNeutralForeground2LinkSelected": "#242424", + "colorCompoundBrandForeground1": "#0f6cbd", + "colorCompoundBrandForeground1Hover": "#115ea3", + "colorCompoundBrandForeground1Pressed": "#0f548c", + "colorBrandForeground1": "#0f6cbd", + "colorBrandForeground2": "#115ea3", + "colorBrandForeground2Hover": "#0f548c", + "colorBrandForeground2Pressed": "#0a2e4a", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#ffffff", + "colorNeutralForegroundInvertedHover": "#ffffff", + "colorNeutralForegroundInvertedPressed": "#ffffff", + "colorNeutralForegroundInvertedSelected": "#ffffff", + "colorNeutralForegroundInverted2": "#ffffff", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#479ef5", + "colorBrandForegroundInvertedHover": "#62abf5", + "colorBrandForegroundInvertedPressed": "#479ef5", + "colorBrandForegroundOnLight": "#0f6cbd", + "colorBrandForegroundOnLightHover": "#115ea3", + "colorBrandForegroundOnLightPressed": "#0e4775", + "colorBrandForegroundOnLightSelected": "#0f548c", + "colorNeutralBackground1": "#ffffff", + "colorNeutralBackground1Hover": "#f5f5f5", + "colorNeutralBackground1Pressed": "#e0e0e0", + "colorNeutralBackground1Selected": "#ebebeb", + "colorNeutralBackground2": "#fafafa", + "colorNeutralBackground2Hover": "#f0f0f0", + "colorNeutralBackground2Pressed": "#dbdbdb", + "colorNeutralBackground2Selected": "#e6e6e6", + "colorNeutralBackground3": "#f5f5f5", + "colorNeutralBackground3Hover": "#ebebeb", + "colorNeutralBackground3Pressed": "#d6d6d6", + "colorNeutralBackground3Selected": "#e0e0e0", + "colorNeutralBackground4": "#f0f0f0", + "colorNeutralBackground4Hover": "#fafafa", + "colorNeutralBackground4Pressed": "#f5f5f5", + "colorNeutralBackground4Selected": "#ffffff", + "colorNeutralBackground5": "#ebebeb", + "colorNeutralBackground5Hover": "#f5f5f5", + "colorNeutralBackground5Pressed": "#f0f0f0", + "colorNeutralBackground5Selected": "#fafafa", + "colorNeutralBackground6": "#e6e6e6", + "colorNeutralBackground7": "#00000000", + "colorNeutralBackground7Hover": "#ebebeb", + "colorNeutralBackground7Pressed": "#d6d6d6", + "colorNeutralBackground7Selected": "#00000000", + "colorNeutralBackground8": "#fcfcfc", + "colorNeutralBackgroundInverted": "#292929", + "colorNeutralBackgroundInvertedHover": "#3d3d3d", + "colorNeutralBackgroundInvertedPressed": "#1f1f1f", + "colorNeutralBackgroundInvertedSelected": "#383838", + "colorNeutralBackgroundStatic": "#333333", + "colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#f5f5f5", + "colorSubtleBackgroundPressed": "#e0e0e0", + "colorSubtleBackgroundSelected": "#ebebeb", + "colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#f0f0f0", + "colorNeutralBackgroundDisabled2": "#ffffff", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#e6e6e6", + "colorNeutralStencil2": "#fafafa", + "colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)", + "colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)", + "colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)", + "colorBrandBackground": "#0f6cbd", + "colorBrandBackgroundHover": "#115ea3", + "colorBrandBackgroundPressed": "#0c3b5e", + "colorBrandBackgroundSelected": "#0f548c", + "colorCompoundBrandBackground": "#0f6cbd", + "colorCompoundBrandBackgroundHover": "#115ea3", + "colorCompoundBrandBackgroundPressed": "#0f548c", + "colorBrandBackgroundStatic": "#0f6cbd", + "colorBrandBackground2": "#ebf3fc", + "colorBrandBackground2Hover": "#cfe4fa", + "colorBrandBackground2Pressed": "#96c6fa", + "colorBrandBackground3Static": "#0f548c", + "colorBrandBackground4Static": "#0c3b5e", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#ebf3fc", + "colorBrandBackgroundInvertedPressed": "#b4d6fa", + "colorBrandBackgroundInvertedSelected": "#cfe4fa", + "colorNeutralCardBackground": "#fafafa", + "colorNeutralCardBackgroundHover": "#ffffff", + "colorNeutralCardBackgroundPressed": "#f5f5f5", + "colorNeutralCardBackgroundSelected": "#ebebeb", + "colorNeutralCardBackgroundDisabled": "#f0f0f0", + "colorNeutralStrokeAccessible": "#616161", + "colorNeutralStrokeAccessibleHover": "#575757", + "colorNeutralStrokeAccessiblePressed": "#4d4d4d", + "colorNeutralStrokeAccessibleSelected": "#0f6cbd", + "colorNeutralStroke1": "#d1d1d1", + "colorNeutralStroke1Hover": "#c7c7c7", + "colorNeutralStroke1Pressed": "#b3b3b3", + "colorNeutralStroke1Selected": "#bdbdbd", + "colorNeutralStroke2": "#e0e0e0", + "colorNeutralStroke3": "#f0f0f0", + "colorNeutralStroke4": "#ebebeb", + "colorNeutralStroke4Hover": "#e0e0e0", + "colorNeutralStroke4Pressed": "#d6d6d6", + "colorNeutralStroke4Selected": "#ebebeb", + "colorNeutralStrokeSubtle": "#e0e0e0", + "colorNeutralStrokeOnBrand": "#ffffff", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#0f6cbd", + "colorBrandStroke2": "#b4d6fa", + "colorBrandStroke2Hover": "#77b7f7", + "colorBrandStroke2Pressed": "#0f6cbd", + "colorBrandStroke2Contrast": "#b4d6fa", + "colorCompoundBrandStroke": "#0f6cbd", + "colorCompoundBrandStrokeHover": "#115ea3", + "colorCompoundBrandStrokePressed": "#0f548c", + "colorNeutralStrokeDisabled": "#e0e0e0", + "colorNeutralStrokeDisabled2": "#ebebeb", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#ffffff", + "colorStrokeFocus2": "#000000", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.12)", + "colorNeutralShadowKey": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#fdf6f6", + "colorPaletteRedBackground2": "#f1bbbc", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#bc2f32", + "colorPaletteRedForeground2": "#751d1f", + "colorPaletteRedForeground3": "#d13438", + "colorPaletteRedBorderActive": "#d13438", + "colorPaletteRedBorder1": "#f1bbbc", + "colorPaletteRedBorder2": "#d13438", + "colorPaletteGreenBackground1": "#f1faf1", + "colorPaletteGreenBackground2": "#9fd89f", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#0e700e", + "colorPaletteGreenForeground2": "#094509", + "colorPaletteGreenForeground3": "#107c10", + "colorPaletteGreenBorderActive": "#107c10", + "colorPaletteGreenBorder1": "#9fd89f", + "colorPaletteGreenBorder2": "#107c10", + "colorPaletteDarkOrangeBackground1": "#fdf6f3", + "colorPaletteDarkOrangeBackground2": "#f4bfab", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#c43501", + "colorPaletteDarkOrangeForeground2": "#7a2101", + "colorPaletteDarkOrangeForeground3": "#da3b01", + "colorPaletteDarkOrangeBorderActive": "#da3b01", + "colorPaletteDarkOrangeBorder1": "#f4bfab", + "colorPaletteDarkOrangeBorder2": "#da3b01", + "colorPaletteYellowBackground1": "#fffef5", + "colorPaletteYellowBackground2": "#fef7b2", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#817400", + "colorPaletteYellowForeground2": "#817400", + "colorPaletteYellowForeground3": "#fde300", + "colorPaletteYellowBorderActive": "#fde300", + "colorPaletteYellowBorder1": "#fef7b2", + "colorPaletteYellowBorder2": "#fde300", + "colorPaletteBerryBackground1": "#fdf5fc", + "colorPaletteBerryBackground2": "#edbbe7", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#af33a1", + "colorPaletteBerryForeground2": "#6d2064", + "colorPaletteBerryForeground3": "#c239b3", + "colorPaletteBerryBorderActive": "#c239b3", + "colorPaletteBerryBorder1": "#edbbe7", + "colorPaletteBerryBorder2": "#c239b3", + "colorPaletteLightGreenBackground1": "#f2fbf2", + "colorPaletteLightGreenBackground2": "#a7e3a5", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#11910d", + "colorPaletteLightGreenForeground2": "#0b5a08", + "colorPaletteLightGreenForeground3": "#13a10e", + "colorPaletteLightGreenBorderActive": "#13a10e", + "colorPaletteLightGreenBorder1": "#a7e3a5", + "colorPaletteLightGreenBorder2": "#13a10e", + "colorPaletteMarigoldBackground1": "#fefbf4", + "colorPaletteMarigoldBackground2": "#f9e2ae", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#d39300", + "colorPaletteMarigoldForeground2": "#835b00", + "colorPaletteMarigoldForeground3": "#eaa300", + "colorPaletteMarigoldBorderActive": "#eaa300", + "colorPaletteMarigoldBorder1": "#f9e2ae", + "colorPaletteMarigoldBorder2": "#eaa300", + "colorPaletteRedForegroundInverted": "#dc5e62", + "colorPaletteGreenForegroundInverted": "#359b35", + "colorPaletteYellowForegroundInverted": "#fef7b2", + "colorPaletteDarkRedBackground2": "#d69ca5", + "colorPaletteDarkRedForeground2": "#420610", + "colorPaletteDarkRedBorderActive": "#750b1c", + "colorPaletteCranberryBackground2": "#eeacb2", + "colorPaletteCranberryForeground2": "#6e0811", + "colorPaletteCranberryBorderActive": "#c50f1f", + "colorPalettePumpkinBackground2": "#efc4ad", + "colorPalettePumpkinForeground2": "#712d09", + "colorPalettePumpkinBorderActive": "#ca5010", + "colorPalettePeachBackground2": "#ffddb3", + "colorPalettePeachForeground2": "#8f4e00", + "colorPalettePeachBorderActive": "#ff8c00", + "colorPaletteGoldBackground2": "#ecdfa5", + "colorPaletteGoldForeground2": "#6c5700", + "colorPaletteGoldBorderActive": "#c19c00", + "colorPaletteBrassBackground2": "#e0cea2", + "colorPaletteBrassForeground2": "#553e06", + "colorPaletteBrassBorderActive": "#986f0b", + "colorPaletteBrownBackground2": "#ddc3b0", + "colorPaletteBrownForeground2": "#50301a", + "colorPaletteBrownBorderActive": "#8e562e", + "colorPaletteForestBackground2": "#bdd99b", + "colorPaletteForestForeground2": "#294903", + "colorPaletteForestBorderActive": "#498205", + "colorPaletteSeafoamBackground2": "#a8f0cd", + "colorPaletteSeafoamForeground2": "#00723b", + "colorPaletteSeafoamBorderActive": "#00cc6a", + "colorPaletteDarkGreenBackground2": "#9ad29a", + "colorPaletteDarkGreenForeground2": "#063b06", + "colorPaletteDarkGreenBorderActive": "#0b6a0b", + "colorPaletteLightTealBackground2": "#a6e9ed", + "colorPaletteLightTealForeground2": "#00666d", + "colorPaletteLightTealBorderActive": "#00b7c3", + "colorPaletteTealBackground2": "#9bd9db", + "colorPaletteTealForeground2": "#02494c", + "colorPaletteTealBorderActive": "#038387", + "colorPaletteSteelBackground2": "#94c8d4", + "colorPaletteSteelForeground2": "#00333f", + "colorPaletteSteelBorderActive": "#005b70", + "colorPaletteBlueBackground2": "#a9d3f2", + "colorPaletteBlueForeground2": "#004377", + "colorPaletteBlueBorderActive": "#0078d4", + "colorPaletteRoyalBlueBackground2": "#9abfdc", + "colorPaletteRoyalBlueForeground2": "#002c4e", + "colorPaletteRoyalBlueBorderActive": "#004e8c", + "colorPaletteCornflowerBackground2": "#c8d1fa", + "colorPaletteCornflowerForeground2": "#2c3c85", + "colorPaletteCornflowerBorderActive": "#4f6bed", + "colorPaletteNavyBackground2": "#a3b2e8", + "colorPaletteNavyForeground2": "#001665", + "colorPaletteNavyBorderActive": "#0027b4", + "colorPaletteLavenderBackground2": "#d2ccf8", + "colorPaletteLavenderForeground2": "#3f3682", + "colorPaletteLavenderBorderActive": "#7160e8", + "colorPalettePurpleBackground2": "#c6b1de", + "colorPalettePurpleForeground2": "#341a51", + "colorPalettePurpleBorderActive": "#5c2e91", + "colorPaletteGrapeBackground2": "#d9a7e0", + "colorPaletteGrapeForeground2": "#4c0d55", + "colorPaletteGrapeBorderActive": "#881798", + "colorPaletteLilacBackground2": "#e6bfed", + "colorPaletteLilacForeground2": "#63276d", + "colorPaletteLilacBorderActive": "#b146c2", + "colorPalettePinkBackground2": "#f7c0e3", + "colorPalettePinkForeground2": "#80215d", + "colorPalettePinkBorderActive": "#e43ba6", + "colorPaletteMagentaBackground2": "#eca5d1", + "colorPaletteMagentaForeground2": "#6b0043", + "colorPaletteMagentaBorderActive": "#bf0077", + "colorPalettePlumBackground2": "#d696c0", + "colorPalettePlumForeground2": "#43002b", + "colorPalettePlumBorderActive": "#77004d", + "colorPaletteBeigeBackground2": "#d7d4d4", + "colorPaletteBeigeForeground2": "#444241", + "colorPaletteBeigeBorderActive": "#7a7574", + "colorPaletteMinkBackground2": "#cecccb", + "colorPaletteMinkForeground2": "#343231", + "colorPaletteMinkBorderActive": "#5d5a58", + "colorPalettePlatinumBackground2": "#cdd6d8", + "colorPalettePlatinumForeground2": "#3b4447", + "colorPalettePlatinumBorderActive": "#69797e", + "colorPaletteAnchorBackground2": "#bcc3c7", + "colorPaletteAnchorForeground2": "#202427", + "colorPaletteAnchorBorderActive": "#394146", + "colorStatusSuccessBackground1": "#f1faf1", + "colorStatusSuccessBackground2": "#9fd89f", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#0e700e", + "colorStatusSuccessForeground2": "#094509", + "colorStatusSuccessForeground3": "#107c10", + "colorStatusSuccessForegroundInverted": "#54b054", + "colorStatusSuccessBorderActive": "#107c10", + "colorStatusSuccessBorder1": "#9fd89f", + "colorStatusSuccessBorder2": "#107c10", + "colorStatusWarningBackground1": "#fff9f5", + "colorStatusWarningBackground2": "#fdcfb4", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#bc4b09", + "colorStatusWarningForeground2": "#8a3707", + "colorStatusWarningForeground3": "#bc4b09", + "colorStatusWarningForegroundInverted": "#faa06b", + "colorStatusWarningBorderActive": "#f7630c", + "colorStatusWarningBorder1": "#fdcfb4", + "colorStatusWarningBorder2": "#bc4b09", + "colorStatusDangerBackground1": "#fdf3f4", + "colorStatusDangerBackground2": "#eeacb2", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#b10e1c", + "colorStatusDangerForeground2": "#6e0811", + "colorStatusDangerForeground3": "#c50f1f", + "colorStatusDangerForegroundInverted": "#dc626d", + "colorStatusDangerBorderActive": "#c50f1f", + "colorStatusDangerBorder1": "#eeacb2", + "colorStatusDangerBorder2": "#c50f1f", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)", + "shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)", + "shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)", + "shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)", + "shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)", + "shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + }, + "webDarkTheme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#ffffff", + "colorNeutralForeground1Hover": "#ffffff", + "colorNeutralForeground1Pressed": "#ffffff", + "colorNeutralForeground1Selected": "#ffffff", + "colorNeutralForeground2": "#d6d6d6", + "colorNeutralForeground2Hover": "#ffffff", + "colorNeutralForeground2Pressed": "#ffffff", + "colorNeutralForeground2Selected": "#ffffff", + "colorNeutralForeground2BrandHover": "#479ef5", + "colorNeutralForeground2BrandPressed": "#2886de", + "colorNeutralForeground2BrandSelected": "#479ef5", + "colorNeutralForeground3": "#adadad", + "colorNeutralForeground3Hover": "#d6d6d6", + "colorNeutralForeground3Pressed": "#d6d6d6", + "colorNeutralForeground3Selected": "#d6d6d6", + "colorNeutralForeground3BrandHover": "#479ef5", + "colorNeutralForeground3BrandPressed": "#2886de", + "colorNeutralForeground3BrandSelected": "#479ef5", + "colorNeutralForeground4": "#999999", + "colorNeutralForeground5": "#adadad", + "colorNeutralForeground5Hover": "#ffffff", + "colorNeutralForeground5Pressed": "#ffffff", + "colorNeutralForeground5Selected": "#ffffff", + "colorNeutralForegroundDisabled": "#5c5c5c", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#479ef5", + "colorBrandForegroundLinkHover": "#62abf5", + "colorBrandForegroundLinkPressed": "#2886de", + "colorBrandForegroundLinkSelected": "#479ef5", + "colorNeutralForeground2Link": "#d6d6d6", + "colorNeutralForeground2LinkHover": "#ffffff", + "colorNeutralForeground2LinkPressed": "#ffffff", + "colorNeutralForeground2LinkSelected": "#ffffff", + "colorCompoundBrandForeground1": "#479ef5", + "colorCompoundBrandForeground1Hover": "#62abf5", + "colorCompoundBrandForeground1Pressed": "#2886de", + "colorBrandForeground1": "#479ef5", + "colorBrandForeground2": "#62abf5", + "colorBrandForeground2Hover": "#96c6fa", + "colorBrandForeground2Pressed": "#ebf3fc", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#242424", + "colorNeutralForegroundInvertedHover": "#242424", + "colorNeutralForegroundInvertedPressed": "#242424", + "colorNeutralForegroundInvertedSelected": "#242424", + "colorNeutralForegroundInverted2": "#242424", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#0f6cbd", + "colorBrandForegroundInvertedHover": "#115ea3", + "colorBrandForegroundInvertedPressed": "#0f548c", + "colorBrandForegroundOnLight": "#0f6cbd", + "colorBrandForegroundOnLightHover": "#115ea3", + "colorBrandForegroundOnLightPressed": "#0e4775", + "colorBrandForegroundOnLightSelected": "#0f548c", + "colorNeutralBackground1": "#292929", + "colorNeutralBackground1Hover": "#3d3d3d", + "colorNeutralBackground1Pressed": "#1f1f1f", + "colorNeutralBackground1Selected": "#383838", + "colorNeutralBackground2": "#1f1f1f", + "colorNeutralBackground2Hover": "#333333", + "colorNeutralBackground2Pressed": "#141414", + "colorNeutralBackground2Selected": "#2e2e2e", + "colorNeutralBackground3": "#141414", + "colorNeutralBackground3Hover": "#292929", + "colorNeutralBackground3Pressed": "#0a0a0a", + "colorNeutralBackground3Selected": "#242424", + "colorNeutralBackground4": "#0a0a0a", + "colorNeutralBackground4Hover": "#1f1f1f", + "colorNeutralBackground4Pressed": "#000000", + "colorNeutralBackground4Selected": "#1a1a1a", + "colorNeutralBackground5": "#000000", + "colorNeutralBackground5Hover": "#141414", + "colorNeutralBackground5Pressed": "#050505", + "colorNeutralBackground5Selected": "#0f0f0f", + "colorNeutralBackground6": "#333333", + "colorNeutralBackground7": "#00000000", + "colorNeutralBackground7Hover": "#1a1a1a", + "colorNeutralBackground7Pressed": "#0a0a0a", + "colorNeutralBackground7Selected": "#00000000", + "colorNeutralBackground8": "#292929", + "colorNeutralBackgroundInverted": "#ffffff", + "colorNeutralBackgroundInvertedHover": "#f5f5f5", + "colorNeutralBackgroundInvertedPressed": "#e0e0e0", + "colorNeutralBackgroundInvertedSelected": "#ebebeb", + "colorNeutralBackgroundStatic": "#3d3d3d", + "colorNeutralBackgroundAlpha": "rgba(26, 26, 26, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(31, 31, 31, 0.7)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#383838", + "colorSubtleBackgroundPressed": "#2e2e2e", + "colorSubtleBackgroundSelected": "#333333", + "colorSubtleBackgroundLightAlphaHover": "rgba(36, 36, 36, 0.8)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(36, 36, 36, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#141414", + "colorNeutralBackgroundDisabled2": "#292929", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#575757", + "colorNeutralStencil2": "#333333", + "colorNeutralStencil1Alpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil2Alpha": "rgba(255, 255, 255, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.5)", + "colorScrollbarOverlay": "rgba(255, 255, 255, 0.6)", + "colorBrandBackground": "#115ea3", + "colorBrandBackgroundHover": "#0f6cbd", + "colorBrandBackgroundPressed": "#0c3b5e", + "colorBrandBackgroundSelected": "#0f548c", + "colorCompoundBrandBackground": "#479ef5", + "colorCompoundBrandBackgroundHover": "#62abf5", + "colorCompoundBrandBackgroundPressed": "#2886de", + "colorBrandBackgroundStatic": "#0f6cbd", + "colorBrandBackground2": "#082338", + "colorBrandBackground2Hover": "#0c3b5e", + "colorBrandBackground2Pressed": "#061724", + "colorBrandBackground3Static": "#0f548c", + "colorBrandBackground4Static": "#0c3b5e", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#ebf3fc", + "colorBrandBackgroundInvertedPressed": "#b4d6fa", + "colorBrandBackgroundInvertedSelected": "#cfe4fa", + "colorNeutralCardBackground": "#333333", + "colorNeutralCardBackgroundHover": "#3d3d3d", + "colorNeutralCardBackgroundPressed": "#2e2e2e", + "colorNeutralCardBackgroundSelected": "#383838", + "colorNeutralCardBackgroundDisabled": "#141414", + "colorNeutralStrokeAccessible": "#adadad", + "colorNeutralStrokeAccessibleHover": "#bdbdbd", + "colorNeutralStrokeAccessiblePressed": "#b3b3b3", + "colorNeutralStrokeAccessibleSelected": "#479ef5", + "colorNeutralStroke1": "#666666", + "colorNeutralStroke1Hover": "#757575", + "colorNeutralStroke1Pressed": "#6b6b6b", + "colorNeutralStroke1Selected": "#707070", + "colorNeutralStroke2": "#525252", + "colorNeutralStroke3": "#3d3d3d", + "colorNeutralStroke4": "#3d3d3d", + "colorNeutralStroke4Hover": "#2e2e2e", + "colorNeutralStroke4Pressed": "#242424", + "colorNeutralStroke4Selected": "#3d3d3d", + "colorNeutralStrokeSubtle": "#0a0a0a", + "colorNeutralStrokeOnBrand": "#292929", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#479ef5", + "colorBrandStroke2": "#0e4775", + "colorBrandStroke2Hover": "#0e4775", + "colorBrandStroke2Pressed": "#0a2e4a", + "colorBrandStroke2Contrast": "#0e4775", + "colorCompoundBrandStroke": "#479ef5", + "colorCompoundBrandStrokeHover": "#62abf5", + "colorCompoundBrandStrokePressed": "#2886de", + "colorNeutralStrokeDisabled": "#424242", + "colorNeutralStrokeDisabled2": "#3d3d3d", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#000000", + "colorStrokeFocus2": "#ffffff", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.24)", + "colorNeutralShadowKey": "rgba(0,0,0,0.28)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.12)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.40)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.48)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#3f1011", + "colorPaletteRedBackground2": "#751d1f", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#e37d80", + "colorPaletteRedForeground2": "#f1bbbc", + "colorPaletteRedForeground3": "#e37d80", + "colorPaletteRedBorderActive": "#e37d80", + "colorPaletteRedBorder1": "#d13438", + "colorPaletteRedBorder2": "#e37d80", + "colorPaletteGreenBackground1": "#052505", + "colorPaletteGreenBackground2": "#094509", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#54b054", + "colorPaletteGreenForeground2": "#9fd89f", + "colorPaletteGreenForeground3": "#9fd89f", + "colorPaletteGreenBorderActive": "#54b054", + "colorPaletteGreenBorder1": "#107c10", + "colorPaletteGreenBorder2": "#9fd89f", + "colorPaletteDarkOrangeBackground1": "#411200", + "colorPaletteDarkOrangeBackground2": "#7a2101", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#e9835e", + "colorPaletteDarkOrangeForeground2": "#f4bfab", + "colorPaletteDarkOrangeForeground3": "#e9835e", + "colorPaletteDarkOrangeBorderActive": "#e9835e", + "colorPaletteDarkOrangeBorder1": "#da3b01", + "colorPaletteDarkOrangeBorder2": "#e9835e", + "colorPaletteYellowBackground1": "#4c4400", + "colorPaletteYellowBackground2": "#817400", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#feee66", + "colorPaletteYellowForeground2": "#fef7b2", + "colorPaletteYellowForeground3": "#fdea3d", + "colorPaletteYellowBorderActive": "#feee66", + "colorPaletteYellowBorder1": "#fde300", + "colorPaletteYellowBorder2": "#fdea3d", + "colorPaletteBerryBackground1": "#3a1136", + "colorPaletteBerryBackground2": "#6d2064", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#da7ed0", + "colorPaletteBerryForeground2": "#edbbe7", + "colorPaletteBerryForeground3": "#d161c4", + "colorPaletteBerryBorderActive": "#da7ed0", + "colorPaletteBerryBorder1": "#c239b3", + "colorPaletteBerryBorder2": "#d161c4", + "colorPaletteLightGreenBackground1": "#063004", + "colorPaletteLightGreenBackground2": "#0b5a08", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#5ec75a", + "colorPaletteLightGreenForeground2": "#a7e3a5", + "colorPaletteLightGreenForeground3": "#3db838", + "colorPaletteLightGreenBorderActive": "#5ec75a", + "colorPaletteLightGreenBorder1": "#13a10e", + "colorPaletteLightGreenBorder2": "#3db838", + "colorPaletteMarigoldBackground1": "#463100", + "colorPaletteMarigoldBackground2": "#835b00", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#f2c661", + "colorPaletteMarigoldForeground2": "#f9e2ae", + "colorPaletteMarigoldForeground3": "#efb839", + "colorPaletteMarigoldBorderActive": "#f2c661", + "colorPaletteMarigoldBorder1": "#eaa300", + "colorPaletteMarigoldBorder2": "#efb839", + "colorPaletteRedForegroundInverted": "#d13438", + "colorPaletteGreenForegroundInverted": "#107c10", + "colorPaletteYellowForegroundInverted": "#817400", + "colorPaletteDarkRedBackground2": "#590815", + "colorPaletteDarkRedForeground2": "#d69ca5", + "colorPaletteDarkRedBorderActive": "#ac4f5e", + "colorPaletteCranberryBackground2": "#6e0811", + "colorPaletteCranberryForeground2": "#eeacb2", + "colorPaletteCranberryBorderActive": "#dc626d", + "colorPalettePumpkinBackground2": "#712d09", + "colorPalettePumpkinForeground2": "#efc4ad", + "colorPalettePumpkinBorderActive": "#df8e64", + "colorPalettePeachBackground2": "#8f4e00", + "colorPalettePeachForeground2": "#ffddb3", + "colorPalettePeachBorderActive": "#ffba66", + "colorPaletteGoldBackground2": "#6c5700", + "colorPaletteGoldForeground2": "#ecdfa5", + "colorPaletteGoldBorderActive": "#dac157", + "colorPaletteBrassBackground2": "#553e06", + "colorPaletteBrassForeground2": "#e0cea2", + "colorPaletteBrassBorderActive": "#c1a256", + "colorPaletteBrownBackground2": "#50301a", + "colorPaletteBrownForeground2": "#ddc3b0", + "colorPaletteBrownBorderActive": "#bb8f6f", + "colorPaletteForestBackground2": "#294903", + "colorPaletteForestForeground2": "#bdd99b", + "colorPaletteForestBorderActive": "#85b44c", + "colorPaletteSeafoamBackground2": "#00723b", + "colorPaletteSeafoamForeground2": "#a8f0cd", + "colorPaletteSeafoamBorderActive": "#5ae0a0", + "colorPaletteDarkGreenBackground2": "#063b06", + "colorPaletteDarkGreenForeground2": "#9ad29a", + "colorPaletteDarkGreenBorderActive": "#4da64d", + "colorPaletteLightTealBackground2": "#00666d", + "colorPaletteLightTealForeground2": "#a6e9ed", + "colorPaletteLightTealBorderActive": "#58d3db", + "colorPaletteTealBackground2": "#02494c", + "colorPaletteTealForeground2": "#9bd9db", + "colorPaletteTealBorderActive": "#4cb4b7", + "colorPaletteSteelBackground2": "#00333f", + "colorPaletteSteelForeground2": "#94c8d4", + "colorPaletteSteelBorderActive": "#4496a9", + "colorPaletteBlueBackground2": "#004377", + "colorPaletteBlueForeground2": "#a9d3f2", + "colorPaletteBlueBorderActive": "#5caae5", + "colorPaletteRoyalBlueBackground2": "#002c4e", + "colorPaletteRoyalBlueForeground2": "#9abfdc", + "colorPaletteRoyalBlueBorderActive": "#4a89ba", + "colorPaletteCornflowerBackground2": "#2c3c85", + "colorPaletteCornflowerForeground2": "#c8d1fa", + "colorPaletteCornflowerBorderActive": "#93a4f4", + "colorPaletteNavyBackground2": "#001665", + "colorPaletteNavyForeground2": "#a3b2e8", + "colorPaletteNavyBorderActive": "#546fd2", + "colorPaletteLavenderBackground2": "#3f3682", + "colorPaletteLavenderForeground2": "#d2ccf8", + "colorPaletteLavenderBorderActive": "#a79cf1", + "colorPalettePurpleBackground2": "#341a51", + "colorPalettePurpleForeground2": "#c6b1de", + "colorPalettePurpleBorderActive": "#9470bd", + "colorPaletteGrapeBackground2": "#4c0d55", + "colorPaletteGrapeForeground2": "#d9a7e0", + "colorPaletteGrapeBorderActive": "#b55fc1", + "colorPaletteLilacBackground2": "#63276d", + "colorPaletteLilacForeground2": "#e6bfed", + "colorPaletteLilacBorderActive": "#cf87da", + "colorPalettePinkBackground2": "#80215d", + "colorPalettePinkForeground2": "#f7c0e3", + "colorPalettePinkBorderActive": "#ef85c8", + "colorPaletteMagentaBackground2": "#6b0043", + "colorPaletteMagentaForeground2": "#eca5d1", + "colorPaletteMagentaBorderActive": "#d957a8", + "colorPalettePlumBackground2": "#5a003b", + "colorPalettePlumForeground2": "#d696c0", + "colorPalettePlumBorderActive": "#ad4589", + "colorPaletteBeigeBackground2": "#444241", + "colorPaletteBeigeForeground2": "#d7d4d4", + "colorPaletteBeigeBorderActive": "#afabaa", + "colorPaletteMinkBackground2": "#343231", + "colorPaletteMinkForeground2": "#cecccb", + "colorPaletteMinkBorderActive": "#9e9b99", + "colorPalettePlatinumBackground2": "#3b4447", + "colorPalettePlatinumForeground2": "#cdd6d8", + "colorPalettePlatinumBorderActive": "#a0adb2", + "colorPaletteAnchorBackground2": "#202427", + "colorPaletteAnchorForeground2": "#bcc3c7", + "colorPaletteAnchorBorderActive": "#808a90", + "colorStatusSuccessBackground1": "#052505", + "colorStatusSuccessBackground2": "#094509", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#54b054", + "colorStatusSuccessForeground2": "#9fd89f", + "colorStatusSuccessForeground3": "#9fd89f", + "colorStatusSuccessBorderActive": "#54b054", + "colorStatusSuccessForegroundInverted": "#0e700e", + "colorStatusSuccessBorder1": "#107c10", + "colorStatusSuccessBorder2": "#9fd89f", + "colorStatusWarningBackground1": "#4a1e04", + "colorStatusWarningBackground2": "#8a3707", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#faa06b", + "colorStatusWarningForeground2": "#fdcfb4", + "colorStatusWarningForeground3": "#f98845", + "colorStatusWarningBorderActive": "#faa06b", + "colorStatusWarningForegroundInverted": "#bc4b09", + "colorStatusWarningBorder1": "#f7630c", + "colorStatusWarningBorder2": "#f98845", + "colorStatusDangerBackground1": "#3b0509", + "colorStatusDangerBackground2": "#6e0811", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#dc626d", + "colorStatusDangerForeground2": "#eeacb2", + "colorStatusDangerForeground3": "#eeacb2", + "colorStatusDangerBorderActive": "#dc626d", + "colorStatusDangerForegroundInverted": "#b10e1c", + "colorStatusDangerBorder1": "#c50f1f", + "colorStatusDangerBorder2": "#dc626d", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28)", + "shadow4": "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)", + "shadow8": "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)", + "shadow16": "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)", + "shadow28": "0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28)", + "shadow64": "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + }, + "teamsLightTheme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#242424", + "colorNeutralForeground1Hover": "#242424", + "colorNeutralForeground1Pressed": "#242424", + "colorNeutralForeground1Selected": "#242424", + "colorNeutralForeground2": "#424242", + "colorNeutralForeground2Hover": "#242424", + "colorNeutralForeground2Pressed": "#242424", + "colorNeutralForeground2Selected": "#242424", + "colorNeutralForeground2BrandHover": "#5b5fc7", + "colorNeutralForeground2BrandPressed": "#4f52b2", + "colorNeutralForeground2BrandSelected": "#5b5fc7", + "colorNeutralForeground3": "#616161", + "colorNeutralForeground3Hover": "#424242", + "colorNeutralForeground3Pressed": "#424242", + "colorNeutralForeground3Selected": "#424242", + "colorNeutralForeground3BrandHover": "#5b5fc7", + "colorNeutralForeground3BrandPressed": "#4f52b2", + "colorNeutralForeground3BrandSelected": "#5b5fc7", + "colorNeutralForeground4": "#707070", + "colorNeutralForeground5": "#616161", + "colorNeutralForeground5Hover": "#242424", + "colorNeutralForeground5Pressed": "#242424", + "colorNeutralForeground5Selected": "#242424", + "colorNeutralForegroundDisabled": "#bdbdbd", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#4f52b2", + "colorBrandForegroundLinkHover": "#444791", + "colorBrandForegroundLinkPressed": "#383966", + "colorBrandForegroundLinkSelected": "#4f52b2", + "colorNeutralForeground2Link": "#424242", + "colorNeutralForeground2LinkHover": "#242424", + "colorNeutralForeground2LinkPressed": "#242424", + "colorNeutralForeground2LinkSelected": "#242424", + "colorCompoundBrandForeground1": "#5b5fc7", + "colorCompoundBrandForeground1Hover": "#4f52b2", + "colorCompoundBrandForeground1Pressed": "#444791", + "colorBrandForeground1": "#5b5fc7", + "colorBrandForeground2": "#4f52b2", + "colorBrandForeground2Hover": "#444791", + "colorBrandForeground2Pressed": "#333357", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#ffffff", + "colorNeutralForegroundInvertedHover": "#ffffff", + "colorNeutralForegroundInvertedPressed": "#ffffff", + "colorNeutralForegroundInvertedSelected": "#ffffff", + "colorNeutralForegroundInverted2": "#ffffff", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#7f85f5", + "colorBrandForegroundInvertedHover": "#9299f7", + "colorBrandForegroundInvertedPressed": "#7f85f5", + "colorBrandForegroundOnLight": "#5b5fc7", + "colorBrandForegroundOnLightHover": "#4f52b2", + "colorBrandForegroundOnLightPressed": "#3d3e78", + "colorBrandForegroundOnLightSelected": "#444791", + "colorNeutralBackground1": "#ffffff", + "colorNeutralBackground1Hover": "#f5f5f5", + "colorNeutralBackground1Pressed": "#e0e0e0", + "colorNeutralBackground1Selected": "#ebebeb", + "colorNeutralBackground2": "#fafafa", + "colorNeutralBackground2Hover": "#f0f0f0", + "colorNeutralBackground2Pressed": "#dbdbdb", + "colorNeutralBackground2Selected": "#e6e6e6", + "colorNeutralBackground3": "#f5f5f5", + "colorNeutralBackground3Hover": "#ebebeb", + "colorNeutralBackground3Pressed": "#d6d6d6", + "colorNeutralBackground3Selected": "#e0e0e0", + "colorNeutralBackground4": "#f0f0f0", + "colorNeutralBackground4Hover": "#fafafa", + "colorNeutralBackground4Pressed": "#f5f5f5", + "colorNeutralBackground4Selected": "#ffffff", + "colorNeutralBackground5": "#ebebeb", + "colorNeutralBackground5Hover": "#f5f5f5", + "colorNeutralBackground5Pressed": "#f0f0f0", + "colorNeutralBackground5Selected": "#fafafa", + "colorNeutralBackground6": "#e6e6e6", + "colorNeutralBackground7": "#00000000", + "colorNeutralBackground7Hover": "#ebebeb", + "colorNeutralBackground7Pressed": "#d6d6d6", + "colorNeutralBackground7Selected": "#00000000", + "colorNeutralBackground8": "#fcfcfc", + "colorNeutralBackgroundInverted": "#292929", + "colorNeutralBackgroundInvertedHover": "#3d3d3d", + "colorNeutralBackgroundInvertedPressed": "#1f1f1f", + "colorNeutralBackgroundInvertedSelected": "#383838", + "colorNeutralBackgroundStatic": "#333333", + "colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#f5f5f5", + "colorSubtleBackgroundPressed": "#e0e0e0", + "colorSubtleBackgroundSelected": "#ebebeb", + "colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#f0f0f0", + "colorNeutralBackgroundDisabled2": "#ffffff", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#e6e6e6", + "colorNeutralStencil2": "#fafafa", + "colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)", + "colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)", + "colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)", + "colorBrandBackground": "#5b5fc7", + "colorBrandBackgroundHover": "#4f52b2", + "colorBrandBackgroundPressed": "#383966", + "colorBrandBackgroundSelected": "#444791", + "colorCompoundBrandBackground": "#5b5fc7", + "colorCompoundBrandBackgroundHover": "#4f52b2", + "colorCompoundBrandBackgroundPressed": "#444791", + "colorBrandBackgroundStatic": "#5b5fc7", + "colorBrandBackground2": "#e8ebfa", + "colorBrandBackground2Hover": "#dce0fa", + "colorBrandBackground2Pressed": "#b6bcfa", + "colorBrandBackground3Static": "#444791", + "colorBrandBackground4Static": "#383966", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#e8ebfa", + "colorBrandBackgroundInvertedPressed": "#c5cbfa", + "colorBrandBackgroundInvertedSelected": "#dce0fa", + "colorNeutralCardBackground": "#fafafa", + "colorNeutralCardBackgroundHover": "#ffffff", + "colorNeutralCardBackgroundPressed": "#f5f5f5", + "colorNeutralCardBackgroundSelected": "#ebebeb", + "colorNeutralCardBackgroundDisabled": "#f0f0f0", + "colorNeutralStrokeAccessible": "#616161", + "colorNeutralStrokeAccessibleHover": "#575757", + "colorNeutralStrokeAccessiblePressed": "#4d4d4d", + "colorNeutralStrokeAccessibleSelected": "#5b5fc7", + "colorNeutralStroke1": "#d1d1d1", + "colorNeutralStroke1Hover": "#c7c7c7", + "colorNeutralStroke1Pressed": "#b3b3b3", + "colorNeutralStroke1Selected": "#bdbdbd", + "colorNeutralStroke2": "#e0e0e0", + "colorNeutralStroke3": "#f0f0f0", + "colorNeutralStroke4": "#ebebeb", + "colorNeutralStroke4Hover": "#e0e0e0", + "colorNeutralStroke4Pressed": "#d6d6d6", + "colorNeutralStroke4Selected": "#ebebeb", + "colorNeutralStrokeSubtle": "#e0e0e0", + "colorNeutralStrokeOnBrand": "#ffffff", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#5b5fc7", + "colorBrandStroke2": "#c5cbfa", + "colorBrandStroke2Hover": "#aab1fa", + "colorBrandStroke2Pressed": "#5b5fc7", + "colorBrandStroke2Contrast": "#c5cbfa", + "colorCompoundBrandStroke": "#5b5fc7", + "colorCompoundBrandStrokeHover": "#4f52b2", + "colorCompoundBrandStrokePressed": "#444791", + "colorNeutralStrokeDisabled": "#e0e0e0", + "colorNeutralStrokeDisabled2": "#ebebeb", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#ffffff", + "colorStrokeFocus2": "#000000", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.12)", + "colorNeutralShadowKey": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#fdf6f6", + "colorPaletteRedBackground2": "#f1bbbc", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#bc2f32", + "colorPaletteRedForeground2": "#751d1f", + "colorPaletteRedForeground3": "#d13438", + "colorPaletteRedBorderActive": "#d13438", + "colorPaletteRedBorder1": "#f1bbbc", + "colorPaletteRedBorder2": "#d13438", + "colorPaletteGreenBackground1": "#f1faf1", + "colorPaletteGreenBackground2": "#9fd89f", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#0e700e", + "colorPaletteGreenForeground2": "#094509", + "colorPaletteGreenForeground3": "#107c10", + "colorPaletteGreenBorderActive": "#107c10", + "colorPaletteGreenBorder1": "#9fd89f", + "colorPaletteGreenBorder2": "#107c10", + "colorPaletteDarkOrangeBackground1": "#fdf6f3", + "colorPaletteDarkOrangeBackground2": "#f4bfab", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#c43501", + "colorPaletteDarkOrangeForeground2": "#7a2101", + "colorPaletteDarkOrangeForeground3": "#da3b01", + "colorPaletteDarkOrangeBorderActive": "#da3b01", + "colorPaletteDarkOrangeBorder1": "#f4bfab", + "colorPaletteDarkOrangeBorder2": "#da3b01", + "colorPaletteYellowBackground1": "#fffef5", + "colorPaletteYellowBackground2": "#fef7b2", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#817400", + "colorPaletteYellowForeground2": "#817400", + "colorPaletteYellowForeground3": "#fde300", + "colorPaletteYellowBorderActive": "#fde300", + "colorPaletteYellowBorder1": "#fef7b2", + "colorPaletteYellowBorder2": "#fde300", + "colorPaletteBerryBackground1": "#fdf5fc", + "colorPaletteBerryBackground2": "#edbbe7", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#af33a1", + "colorPaletteBerryForeground2": "#6d2064", + "colorPaletteBerryForeground3": "#c239b3", + "colorPaletteBerryBorderActive": "#c239b3", + "colorPaletteBerryBorder1": "#edbbe7", + "colorPaletteBerryBorder2": "#c239b3", + "colorPaletteLightGreenBackground1": "#f2fbf2", + "colorPaletteLightGreenBackground2": "#a7e3a5", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#11910d", + "colorPaletteLightGreenForeground2": "#0b5a08", + "colorPaletteLightGreenForeground3": "#13a10e", + "colorPaletteLightGreenBorderActive": "#13a10e", + "colorPaletteLightGreenBorder1": "#a7e3a5", + "colorPaletteLightGreenBorder2": "#13a10e", + "colorPaletteMarigoldBackground1": "#fefbf4", + "colorPaletteMarigoldBackground2": "#f9e2ae", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#d39300", + "colorPaletteMarigoldForeground2": "#835b00", + "colorPaletteMarigoldForeground3": "#eaa300", + "colorPaletteMarigoldBorderActive": "#eaa300", + "colorPaletteMarigoldBorder1": "#f9e2ae", + "colorPaletteMarigoldBorder2": "#eaa300", + "colorPaletteRedForegroundInverted": "#dc5e62", + "colorPaletteGreenForegroundInverted": "#359b35", + "colorPaletteYellowForegroundInverted": "#fef7b2", + "colorPaletteDarkRedBackground2": "#d69ca5", + "colorPaletteDarkRedForeground2": "#420610", + "colorPaletteDarkRedBorderActive": "#750b1c", + "colorPaletteCranberryBackground2": "#eeacb2", + "colorPaletteCranberryForeground2": "#6e0811", + "colorPaletteCranberryBorderActive": "#c50f1f", + "colorPalettePumpkinBackground2": "#efc4ad", + "colorPalettePumpkinForeground2": "#712d09", + "colorPalettePumpkinBorderActive": "#ca5010", + "colorPalettePeachBackground2": "#ffddb3", + "colorPalettePeachForeground2": "#8f4e00", + "colorPalettePeachBorderActive": "#ff8c00", + "colorPaletteGoldBackground2": "#ecdfa5", + "colorPaletteGoldForeground2": "#6c5700", + "colorPaletteGoldBorderActive": "#c19c00", + "colorPaletteBrassBackground2": "#e0cea2", + "colorPaletteBrassForeground2": "#553e06", + "colorPaletteBrassBorderActive": "#986f0b", + "colorPaletteBrownBackground2": "#ddc3b0", + "colorPaletteBrownForeground2": "#50301a", + "colorPaletteBrownBorderActive": "#8e562e", + "colorPaletteForestBackground2": "#bdd99b", + "colorPaletteForestForeground2": "#294903", + "colorPaletteForestBorderActive": "#498205", + "colorPaletteSeafoamBackground2": "#a8f0cd", + "colorPaletteSeafoamForeground2": "#00723b", + "colorPaletteSeafoamBorderActive": "#00cc6a", + "colorPaletteDarkGreenBackground2": "#9ad29a", + "colorPaletteDarkGreenForeground2": "#063b06", + "colorPaletteDarkGreenBorderActive": "#0b6a0b", + "colorPaletteLightTealBackground2": "#a6e9ed", + "colorPaletteLightTealForeground2": "#00666d", + "colorPaletteLightTealBorderActive": "#00b7c3", + "colorPaletteTealBackground2": "#9bd9db", + "colorPaletteTealForeground2": "#02494c", + "colorPaletteTealBorderActive": "#038387", + "colorPaletteSteelBackground2": "#94c8d4", + "colorPaletteSteelForeground2": "#00333f", + "colorPaletteSteelBorderActive": "#005b70", + "colorPaletteBlueBackground2": "#a9d3f2", + "colorPaletteBlueForeground2": "#004377", + "colorPaletteBlueBorderActive": "#0078d4", + "colorPaletteRoyalBlueBackground2": "#9abfdc", + "colorPaletteRoyalBlueForeground2": "#002c4e", + "colorPaletteRoyalBlueBorderActive": "#004e8c", + "colorPaletteCornflowerBackground2": "#c8d1fa", + "colorPaletteCornflowerForeground2": "#2c3c85", + "colorPaletteCornflowerBorderActive": "#4f6bed", + "colorPaletteNavyBackground2": "#a3b2e8", + "colorPaletteNavyForeground2": "#001665", + "colorPaletteNavyBorderActive": "#0027b4", + "colorPaletteLavenderBackground2": "#d2ccf8", + "colorPaletteLavenderForeground2": "#3f3682", + "colorPaletteLavenderBorderActive": "#7160e8", + "colorPalettePurpleBackground2": "#c6b1de", + "colorPalettePurpleForeground2": "#341a51", + "colorPalettePurpleBorderActive": "#5c2e91", + "colorPaletteGrapeBackground2": "#d9a7e0", + "colorPaletteGrapeForeground2": "#4c0d55", + "colorPaletteGrapeBorderActive": "#881798", + "colorPaletteLilacBackground2": "#e6bfed", + "colorPaletteLilacForeground2": "#63276d", + "colorPaletteLilacBorderActive": "#b146c2", + "colorPalettePinkBackground2": "#f7c0e3", + "colorPalettePinkForeground2": "#80215d", + "colorPalettePinkBorderActive": "#e43ba6", + "colorPaletteMagentaBackground2": "#eca5d1", + "colorPaletteMagentaForeground2": "#6b0043", + "colorPaletteMagentaBorderActive": "#bf0077", + "colorPalettePlumBackground2": "#d696c0", + "colorPalettePlumForeground2": "#43002b", + "colorPalettePlumBorderActive": "#77004d", + "colorPaletteBeigeBackground2": "#d7d4d4", + "colorPaletteBeigeForeground2": "#444241", + "colorPaletteBeigeBorderActive": "#7a7574", + "colorPaletteMinkBackground2": "#cecccb", + "colorPaletteMinkForeground2": "#343231", + "colorPaletteMinkBorderActive": "#5d5a58", + "colorPalettePlatinumBackground2": "#cdd6d8", + "colorPalettePlatinumForeground2": "#3b4447", + "colorPalettePlatinumBorderActive": "#69797e", + "colorPaletteAnchorBackground2": "#bcc3c7", + "colorPaletteAnchorForeground2": "#202427", + "colorPaletteAnchorBorderActive": "#394146", + "colorStatusSuccessBackground1": "#f1faf1", + "colorStatusSuccessBackground2": "#9fd89f", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#0e700e", + "colorStatusSuccessForeground2": "#094509", + "colorStatusSuccessForeground3": "#107c10", + "colorStatusSuccessForegroundInverted": "#54b054", + "colorStatusSuccessBorderActive": "#107c10", + "colorStatusSuccessBorder1": "#9fd89f", + "colorStatusSuccessBorder2": "#107c10", + "colorStatusWarningBackground1": "#fff9f5", + "colorStatusWarningBackground2": "#fdcfb4", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#bc4b09", + "colorStatusWarningForeground2": "#8a3707", + "colorStatusWarningForeground3": "#bc4b09", + "colorStatusWarningForegroundInverted": "#faa06b", + "colorStatusWarningBorderActive": "#f7630c", + "colorStatusWarningBorder1": "#fdcfb4", + "colorStatusWarningBorder2": "#bc4b09", + "colorStatusDangerBackground1": "#fdf3f4", + "colorStatusDangerBackground2": "#eeacb2", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#b10e1c", + "colorStatusDangerForeground2": "#6e0811", + "colorStatusDangerForeground3": "#c50f1f", + "colorStatusDangerForegroundInverted": "#dc626d", + "colorStatusDangerBorderActive": "#c50f1f", + "colorStatusDangerBorder1": "#eeacb2", + "colorStatusDangerBorder2": "#c50f1f", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)", + "shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)", + "shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)", + "shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)", + "shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)", + "shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + }, + "teamsDarkTheme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#ffffff", + "colorNeutralForeground1Hover": "#ffffff", + "colorNeutralForeground1Pressed": "#ffffff", + "colorNeutralForeground1Selected": "#ffffff", + "colorNeutralForeground2": "#d6d6d6", + "colorNeutralForeground2Hover": "#ffffff", + "colorNeutralForeground2Pressed": "#ffffff", + "colorNeutralForeground2Selected": "#ffffff", + "colorNeutralForeground2BrandHover": "#7f85f5", + "colorNeutralForeground2BrandPressed": "#7579eb", + "colorNeutralForeground2BrandSelected": "#7f85f5", + "colorNeutralForeground3": "#adadad", + "colorNeutralForeground3Hover": "#d6d6d6", + "colorNeutralForeground3Pressed": "#d6d6d6", + "colorNeutralForeground3Selected": "#d6d6d6", + "colorNeutralForeground3BrandHover": "#7f85f5", + "colorNeutralForeground3BrandPressed": "#7579eb", + "colorNeutralForeground3BrandSelected": "#7f85f5", + "colorNeutralForeground4": "#999999", + "colorNeutralForeground5": "#adadad", + "colorNeutralForeground5Hover": "#ffffff", + "colorNeutralForeground5Pressed": "#ffffff", + "colorNeutralForeground5Selected": "#ffffff", + "colorNeutralForegroundDisabled": "#5c5c5c", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#7f85f5", + "colorBrandForegroundLinkHover": "#9299f7", + "colorBrandForegroundLinkPressed": "#7579eb", + "colorBrandForegroundLinkSelected": "#7f85f5", + "colorNeutralForeground2Link": "#d6d6d6", + "colorNeutralForeground2LinkHover": "#ffffff", + "colorNeutralForeground2LinkPressed": "#ffffff", + "colorNeutralForeground2LinkSelected": "#ffffff", + "colorCompoundBrandForeground1": "#7f85f5", + "colorCompoundBrandForeground1Hover": "#9299f7", + "colorCompoundBrandForeground1Pressed": "#7579eb", + "colorBrandForeground1": "#7f85f5", + "colorBrandForeground2": "#aab1fa", + "colorBrandForeground2Hover": "#b6bcfa", + "colorBrandForeground2Pressed": "#e8ebfa", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#242424", + "colorNeutralForegroundInvertedHover": "#242424", + "colorNeutralForegroundInvertedPressed": "#242424", + "colorNeutralForegroundInvertedSelected": "#242424", + "colorNeutralForegroundInverted2": "#242424", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#5b5fc7", + "colorBrandForegroundInvertedHover": "#4f52b2", + "colorBrandForegroundInvertedPressed": "#444791", + "colorBrandForegroundOnLight": "#5b5fc7", + "colorBrandForegroundOnLightHover": "#4f52b2", + "colorBrandForegroundOnLightPressed": "#3d3e78", + "colorBrandForegroundOnLightSelected": "#444791", + "colorNeutralBackground1": "#292929", + "colorNeutralBackground1Hover": "#3d3d3d", + "colorNeutralBackground1Pressed": "#1f1f1f", + "colorNeutralBackground1Selected": "#383838", + "colorNeutralBackground2": "#242424", + "colorNeutralBackground2Hover": "#383838", + "colorNeutralBackground2Pressed": "#1a1a1a", + "colorNeutralBackground2Selected": "#333333", + "colorNeutralBackground3": "#1f1f1f", + "colorNeutralBackground3Hover": "#333333", + "colorNeutralBackground3Pressed": "#141414", + "colorNeutralBackground3Selected": "#2e2e2e", + "colorNeutralBackground4": "#141414", + "colorNeutralBackground4Hover": "#292929", + "colorNeutralBackground4Pressed": "#0a0a0a", + "colorNeutralBackground4Selected": "#242424", + "colorNeutralBackground5": "#0a0a0a", + "colorNeutralBackground5Hover": "#1f1f1f", + "colorNeutralBackground5Pressed": "#000000", + "colorNeutralBackground5Selected": "#1a1a1a", + "colorNeutralBackground6": "#333333", + "colorNeutralBackground7": "#00000000", + "colorNeutralBackground7Hover": "#1a1a1a", + "colorNeutralBackground7Pressed": "#0a0a0a", + "colorNeutralBackground7Selected": "#00000000", + "colorNeutralBackground8": "#292929", + "colorNeutralBackgroundInverted": "#ffffff", + "colorNeutralBackgroundInvertedHover": "#f5f5f5", + "colorNeutralBackgroundInvertedPressed": "#e0e0e0", + "colorNeutralBackgroundInvertedSelected": "#ebebeb", + "colorNeutralBackgroundStatic": "#3d3d3d", + "colorNeutralBackgroundAlpha": "rgba(26, 26, 26, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(31, 31, 31, 0.7)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#383838", + "colorSubtleBackgroundPressed": "#2e2e2e", + "colorSubtleBackgroundSelected": "#333333", + "colorSubtleBackgroundLightAlphaHover": "rgba(36, 36, 36, 0.8)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(36, 36, 36, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#141414", + "colorNeutralBackgroundDisabled2": "#292929", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#575757", + "colorNeutralStencil2": "#333333", + "colorNeutralStencil1Alpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil2Alpha": "rgba(255, 255, 255, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.5)", + "colorScrollbarOverlay": "rgba(255, 255, 255, 0.6)", + "colorBrandBackground": "#4f52b2", + "colorBrandBackgroundHover": "#5b5fc7", + "colorBrandBackgroundPressed": "#383966", + "colorBrandBackgroundSelected": "#444791", + "colorCompoundBrandBackground": "#7f85f5", + "colorCompoundBrandBackgroundHover": "#9299f7", + "colorCompoundBrandBackgroundPressed": "#7579eb", + "colorBrandBackgroundStatic": "#5b5fc7", + "colorBrandBackground2": "#2f2f4a", + "colorBrandBackground2Hover": "#383966", + "colorBrandBackground2Pressed": "#2b2b40", + "colorBrandBackground3Static": "#444791", + "colorBrandBackground4Static": "#383966", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#e8ebfa", + "colorBrandBackgroundInvertedPressed": "#c5cbfa", + "colorBrandBackgroundInvertedSelected": "#dce0fa", + "colorNeutralCardBackground": "#333333", + "colorNeutralCardBackgroundHover": "#3d3d3d", + "colorNeutralCardBackgroundPressed": "#2e2e2e", + "colorNeutralCardBackgroundSelected": "#383838", + "colorNeutralCardBackgroundDisabled": "#141414", + "colorNeutralStrokeAccessible": "#adadad", + "colorNeutralStrokeAccessibleHover": "#bdbdbd", + "colorNeutralStrokeAccessiblePressed": "#b3b3b3", + "colorNeutralStrokeAccessibleSelected": "#7f85f5", + "colorNeutralStroke1": "#666666", + "colorNeutralStroke1Hover": "#757575", + "colorNeutralStroke1Pressed": "#6b6b6b", + "colorNeutralStroke1Selected": "#707070", + "colorNeutralStroke2": "#525252", + "colorNeutralStroke3": "#3d3d3d", + "colorNeutralStroke4": "#3d3d3d", + "colorNeutralStroke4Hover": "#2e2e2e", + "colorNeutralStroke4Pressed": "#242424", + "colorNeutralStroke4Selected": "#3d3d3d", + "colorNeutralStrokeSubtle": "#0a0a0a", + "colorNeutralStrokeOnBrand": "#292929", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#7f85f5", + "colorBrandStroke2": "#3d3e78", + "colorBrandStroke2Hover": "#3d3e78", + "colorBrandStroke2Pressed": "#333357", + "colorBrandStroke2Contrast": "#3d3e78", + "colorCompoundBrandStroke": "#7579eb", + "colorCompoundBrandStrokeHover": "#7f85f5", + "colorCompoundBrandStrokePressed": "#5b5fc7", + "colorNeutralStrokeDisabled": "#424242", + "colorNeutralStrokeDisabled2": "#3d3d3d", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#000000", + "colorStrokeFocus2": "#ffffff", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.24)", + "colorNeutralShadowKey": "rgba(0,0,0,0.28)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.12)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.40)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.48)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#3f1011", + "colorPaletteRedBackground2": "#751d1f", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#e37d80", + "colorPaletteRedForeground2": "#f1bbbc", + "colorPaletteRedForeground3": "#e37d80", + "colorPaletteRedBorderActive": "#e37d80", + "colorPaletteRedBorder1": "#d13438", + "colorPaletteRedBorder2": "#e37d80", + "colorPaletteGreenBackground1": "#052505", + "colorPaletteGreenBackground2": "#094509", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#54b054", + "colorPaletteGreenForeground2": "#9fd89f", + "colorPaletteGreenForeground3": "#9fd89f", + "colorPaletteGreenBorderActive": "#54b054", + "colorPaletteGreenBorder1": "#107c10", + "colorPaletteGreenBorder2": "#9fd89f", + "colorPaletteDarkOrangeBackground1": "#411200", + "colorPaletteDarkOrangeBackground2": "#7a2101", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#e9835e", + "colorPaletteDarkOrangeForeground2": "#f4bfab", + "colorPaletteDarkOrangeForeground3": "#e9835e", + "colorPaletteDarkOrangeBorderActive": "#e9835e", + "colorPaletteDarkOrangeBorder1": "#da3b01", + "colorPaletteDarkOrangeBorder2": "#e9835e", + "colorPaletteYellowBackground1": "#4c4400", + "colorPaletteYellowBackground2": "#817400", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#feee66", + "colorPaletteYellowForeground2": "#fef7b2", + "colorPaletteYellowForeground3": "#fdea3d", + "colorPaletteYellowBorderActive": "#feee66", + "colorPaletteYellowBorder1": "#fde300", + "colorPaletteYellowBorder2": "#fdea3d", + "colorPaletteBerryBackground1": "#3a1136", + "colorPaletteBerryBackground2": "#6d2064", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#da7ed0", + "colorPaletteBerryForeground2": "#edbbe7", + "colorPaletteBerryForeground3": "#d161c4", + "colorPaletteBerryBorderActive": "#da7ed0", + "colorPaletteBerryBorder1": "#c239b3", + "colorPaletteBerryBorder2": "#d161c4", + "colorPaletteLightGreenBackground1": "#063004", + "colorPaletteLightGreenBackground2": "#0b5a08", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#5ec75a", + "colorPaletteLightGreenForeground2": "#a7e3a5", + "colorPaletteLightGreenForeground3": "#3db838", + "colorPaletteLightGreenBorderActive": "#5ec75a", + "colorPaletteLightGreenBorder1": "#13a10e", + "colorPaletteLightGreenBorder2": "#3db838", + "colorPaletteMarigoldBackground1": "#463100", + "colorPaletteMarigoldBackground2": "#835b00", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#f2c661", + "colorPaletteMarigoldForeground2": "#f9e2ae", + "colorPaletteMarigoldForeground3": "#efb839", + "colorPaletteMarigoldBorderActive": "#f2c661", + "colorPaletteMarigoldBorder1": "#eaa300", + "colorPaletteMarigoldBorder2": "#efb839", + "colorPaletteRedForegroundInverted": "#d13438", + "colorPaletteGreenForegroundInverted": "#107c10", + "colorPaletteYellowForegroundInverted": "#817400", + "colorPaletteDarkRedBackground2": "#590815", + "colorPaletteDarkRedForeground2": "#d69ca5", + "colorPaletteDarkRedBorderActive": "#ac4f5e", + "colorPaletteCranberryBackground2": "#6e0811", + "colorPaletteCranberryForeground2": "#eeacb2", + "colorPaletteCranberryBorderActive": "#dc626d", + "colorPalettePumpkinBackground2": "#712d09", + "colorPalettePumpkinForeground2": "#efc4ad", + "colorPalettePumpkinBorderActive": "#df8e64", + "colorPalettePeachBackground2": "#8f4e00", + "colorPalettePeachForeground2": "#ffddb3", + "colorPalettePeachBorderActive": "#ffba66", + "colorPaletteGoldBackground2": "#6c5700", + "colorPaletteGoldForeground2": "#ecdfa5", + "colorPaletteGoldBorderActive": "#dac157", + "colorPaletteBrassBackground2": "#553e06", + "colorPaletteBrassForeground2": "#e0cea2", + "colorPaletteBrassBorderActive": "#c1a256", + "colorPaletteBrownBackground2": "#50301a", + "colorPaletteBrownForeground2": "#ddc3b0", + "colorPaletteBrownBorderActive": "#bb8f6f", + "colorPaletteForestBackground2": "#294903", + "colorPaletteForestForeground2": "#bdd99b", + "colorPaletteForestBorderActive": "#85b44c", + "colorPaletteSeafoamBackground2": "#00723b", + "colorPaletteSeafoamForeground2": "#a8f0cd", + "colorPaletteSeafoamBorderActive": "#5ae0a0", + "colorPaletteDarkGreenBackground2": "#063b06", + "colorPaletteDarkGreenForeground2": "#9ad29a", + "colorPaletteDarkGreenBorderActive": "#4da64d", + "colorPaletteLightTealBackground2": "#00666d", + "colorPaletteLightTealForeground2": "#a6e9ed", + "colorPaletteLightTealBorderActive": "#58d3db", + "colorPaletteTealBackground2": "#02494c", + "colorPaletteTealForeground2": "#9bd9db", + "colorPaletteTealBorderActive": "#4cb4b7", + "colorPaletteSteelBackground2": "#00333f", + "colorPaletteSteelForeground2": "#94c8d4", + "colorPaletteSteelBorderActive": "#4496a9", + "colorPaletteBlueBackground2": "#004377", + "colorPaletteBlueForeground2": "#a9d3f2", + "colorPaletteBlueBorderActive": "#5caae5", + "colorPaletteRoyalBlueBackground2": "#002c4e", + "colorPaletteRoyalBlueForeground2": "#9abfdc", + "colorPaletteRoyalBlueBorderActive": "#4a89ba", + "colorPaletteCornflowerBackground2": "#2c3c85", + "colorPaletteCornflowerForeground2": "#c8d1fa", + "colorPaletteCornflowerBorderActive": "#93a4f4", + "colorPaletteNavyBackground2": "#001665", + "colorPaletteNavyForeground2": "#a3b2e8", + "colorPaletteNavyBorderActive": "#546fd2", + "colorPaletteLavenderBackground2": "#3f3682", + "colorPaletteLavenderForeground2": "#d2ccf8", + "colorPaletteLavenderBorderActive": "#a79cf1", + "colorPalettePurpleBackground2": "#341a51", + "colorPalettePurpleForeground2": "#c6b1de", + "colorPalettePurpleBorderActive": "#9470bd", + "colorPaletteGrapeBackground2": "#4c0d55", + "colorPaletteGrapeForeground2": "#d9a7e0", + "colorPaletteGrapeBorderActive": "#b55fc1", + "colorPaletteLilacBackground2": "#63276d", + "colorPaletteLilacForeground2": "#e6bfed", + "colorPaletteLilacBorderActive": "#cf87da", + "colorPalettePinkBackground2": "#80215d", + "colorPalettePinkForeground2": "#f7c0e3", + "colorPalettePinkBorderActive": "#ef85c8", + "colorPaletteMagentaBackground2": "#6b0043", + "colorPaletteMagentaForeground2": "#eca5d1", + "colorPaletteMagentaBorderActive": "#d957a8", + "colorPalettePlumBackground2": "#5a003b", + "colorPalettePlumForeground2": "#d696c0", + "colorPalettePlumBorderActive": "#ad4589", + "colorPaletteBeigeBackground2": "#444241", + "colorPaletteBeigeForeground2": "#d7d4d4", + "colorPaletteBeigeBorderActive": "#afabaa", + "colorPaletteMinkBackground2": "#343231", + "colorPaletteMinkForeground2": "#cecccb", + "colorPaletteMinkBorderActive": "#9e9b99", + "colorPalettePlatinumBackground2": "#3b4447", + "colorPalettePlatinumForeground2": "#cdd6d8", + "colorPalettePlatinumBorderActive": "#a0adb2", + "colorPaletteAnchorBackground2": "#202427", + "colorPaletteAnchorForeground2": "#bcc3c7", + "colorPaletteAnchorBorderActive": "#808a90", + "colorStatusSuccessBackground1": "#052505", + "colorStatusSuccessBackground2": "#094509", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#54b054", + "colorStatusSuccessForeground2": "#9fd89f", + "colorStatusSuccessForeground3": "#9fd89f", + "colorStatusSuccessBorderActive": "#54b054", + "colorStatusSuccessForegroundInverted": "#0e700e", + "colorStatusSuccessBorder1": "#107c10", + "colorStatusSuccessBorder2": "#9fd89f", + "colorStatusWarningBackground1": "#4a1e04", + "colorStatusWarningBackground2": "#8a3707", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#faa06b", + "colorStatusWarningForeground2": "#fdcfb4", + "colorStatusWarningForeground3": "#f98845", + "colorStatusWarningBorderActive": "#faa06b", + "colorStatusWarningForegroundInverted": "#bc4b09", + "colorStatusWarningBorder1": "#f7630c", + "colorStatusWarningBorder2": "#f98845", + "colorStatusDangerBackground1": "#3b0509", + "colorStatusDangerBackground2": "#6e0811", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#dc626d", + "colorStatusDangerForeground2": "#eeacb2", + "colorStatusDangerForeground3": "#eeacb2", + "colorStatusDangerBorderActive": "#dc626d", + "colorStatusDangerForegroundInverted": "#b10e1c", + "colorStatusDangerBorder1": "#c50f1f", + "colorStatusDangerBorder2": "#dc626d", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28)", + "shadow4": "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)", + "shadow8": "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)", + "shadow16": "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)", + "shadow28": "0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28)", + "shadow64": "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + }, + "teamsHighContrastTheme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#ffffff", + "colorNeutralForeground1Hover": "#000000", + "colorNeutralForeground1Pressed": "#000000", + "colorNeutralForeground1Selected": "#000000", + "colorNeutralForeground2": "#ffffff", + "colorNeutralForeground2Hover": "#000000", + "colorNeutralForeground2Pressed": "#000000", + "colorNeutralForeground2Selected": "#000000", + "colorNeutralForeground2BrandHover": "#000000", + "colorNeutralForeground2BrandPressed": "#000000", + "colorNeutralForeground2BrandSelected": "#000000", + "colorNeutralForeground3": "#ffffff", + "colorNeutralForeground3Hover": "#000000", + "colorNeutralForeground3Pressed": "#000000", + "colorNeutralForeground3Selected": "#000000", + "colorNeutralForeground3BrandHover": "#000000", + "colorNeutralForeground3BrandPressed": "#000000", + "colorNeutralForeground3BrandSelected": "#000000", + "colorNeutralForeground4": "#ffffff", + "colorNeutralForeground5": "#ffffff", + "colorNeutralForeground5Hover": "#000000", + "colorNeutralForeground5Pressed": "#000000", + "colorNeutralForeground5Selected": "#000000", + "colorNeutralForegroundDisabled": "#3ff23f", + "colorNeutralForegroundInvertedDisabled": "#3ff23f", + "colorBrandForegroundLink": "#ffff00", + "colorBrandForegroundLinkHover": "#ffff00", + "colorBrandForegroundLinkPressed": "#ffff00", + "colorBrandForegroundLinkSelected": "#ffff00", + "colorNeutralForeground2Link": "#ffff00", + "colorNeutralForeground2LinkHover": "#ffff00", + "colorNeutralForeground2LinkPressed": "#ffff00", + "colorNeutralForeground2LinkSelected": "#ffff00", + "colorCompoundBrandForeground1": "#1aebff", + "colorCompoundBrandForeground1Hover": "#1aebff", + "colorCompoundBrandForeground1Pressed": "#1aebff", + "colorBrandForeground1": "#ffffff", + "colorBrandForeground2": "#ffffff", + "colorBrandForeground2Hover": "#ffffff", + "colorBrandForeground2Pressed": "#ffffff", + "colorNeutralForeground1Static": "#000000", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#000000", + "colorNeutralForegroundInvertedHover": "#000000", + "colorNeutralForegroundInvertedPressed": "#000000", + "colorNeutralForegroundInvertedSelected": "#000000", + "colorNeutralForegroundInverted2": "#ffffff", + "colorNeutralForegroundOnBrand": "#000000", + "colorNeutralForegroundInvertedLink": "#ffff00", + "colorNeutralForegroundInvertedLinkHover": "#ffff00", + "colorNeutralForegroundInvertedLinkPressed": "#ffff00", + "colorNeutralForegroundInvertedLinkSelected": "#ffff00", + "colorBrandForegroundInverted": "#ffffff", + "colorBrandForegroundInvertedHover": "#000000", + "colorBrandForegroundInvertedPressed": "#000000", + "colorBrandForegroundOnLight": "#000000", + "colorBrandForegroundOnLightHover": "#000000", + "colorBrandForegroundOnLightPressed": "#000000", + "colorBrandForegroundOnLightSelected": "#000000", + "colorNeutralBackground1": "#000000", + "colorNeutralBackground1Hover": "#1aebff", + "colorNeutralBackground1Pressed": "#1aebff", + "colorNeutralBackground1Selected": "#1aebff", + "colorNeutralBackground2": "#000000", + "colorNeutralBackground2Hover": "#1aebff", + "colorNeutralBackground2Pressed": "#1aebff", + "colorNeutralBackground2Selected": "#1aebff", + "colorNeutralBackground3": "#000000", + "colorNeutralBackground3Hover": "#1aebff", + "colorNeutralBackground3Pressed": "#1aebff", + "colorNeutralBackground3Selected": "#1aebff", + "colorNeutralBackground4": "#000000", + "colorNeutralBackground4Hover": "#1aebff", + "colorNeutralBackground4Pressed": "#1aebff", + "colorNeutralBackground4Selected": "#1aebff", + "colorNeutralBackground5": "#000000", + "colorNeutralBackground5Hover": "#1aebff", + "colorNeutralBackground5Pressed": "#1aebff", + "colorNeutralBackground5Selected": "#1aebff", + "colorNeutralBackground6": "#000000", + "colorNeutralBackground7": "#000000", + "colorNeutralBackground7Hover": "#1aebff", + "colorNeutralBackground7Pressed": "#1aebff", + "colorNeutralBackground7Selected": "#1aebff", + "colorNeutralBackground8": "#000000", + "colorNeutralBackgroundInverted": "#000000", + "colorNeutralBackgroundInvertedHover": "#1aebff", + "colorNeutralBackgroundInvertedPressed": "#1aebff", + "colorNeutralBackgroundInvertedSelected": "#1aebff", + "colorNeutralBackgroundStatic": "#000000", + "colorNeutralBackgroundAlpha": "#000000", + "colorNeutralBackgroundAlpha2": "#000000", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#1aebff", + "colorSubtleBackgroundPressed": "#1aebff", + "colorSubtleBackgroundSelected": "#1aebff", + "colorSubtleBackgroundLightAlphaHover": "#1aebff", + "colorSubtleBackgroundLightAlphaPressed": "#1aebff", + "colorSubtleBackgroundLightAlphaSelected": "#1aebff", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "#1aebff", + "colorSubtleBackgroundInvertedPressed": "#1aebff", + "colorSubtleBackgroundInvertedSelected": "#1aebff", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "#1aebff", + "colorTransparentBackgroundPressed": "#1aebff", + "colorTransparentBackgroundSelected": "#1aebff", + "colorNeutralBackgroundDisabled": "#000000", + "colorNeutralBackgroundDisabled2": "#3ff23f", + "colorNeutralBackgroundInvertedDisabled": "#000000", + "colorNeutralStencil1": "#ffffff", + "colorNeutralStencil2": "#ffffff", + "colorNeutralStencil1Alpha": "#ffffff", + "colorNeutralStencil2Alpha": "#ffffff", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.5)", + "colorScrollbarOverlay": "#ffffff", + "colorBrandBackground": "#ffffff", + "colorBrandBackgroundHover": "#1aebff", + "colorBrandBackgroundPressed": "#1aebff", + "colorBrandBackgroundSelected": "#1aebff", + "colorCompoundBrandBackground": "#1aebff", + "colorCompoundBrandBackgroundHover": "#1aebff", + "colorCompoundBrandBackgroundPressed": "#1aebff", + "colorBrandBackgroundStatic": "#000000", + "colorBrandBackground2": "#000000", + "colorBrandBackground2Hover": "#000000", + "colorBrandBackground2Pressed": "#000000", + "colorBrandBackground3Static": "#000000", + "colorBrandBackground4Static": "#000000", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#1aebff", + "colorBrandBackgroundInvertedPressed": "#1aebff", + "colorBrandBackgroundInvertedSelected": "#1aebff", + "colorNeutralCardBackground": "#000000", + "colorNeutralCardBackgroundHover": "#1aebff", + "colorNeutralCardBackgroundPressed": "#1aebff", + "colorNeutralCardBackgroundSelected": "#1aebff", + "colorNeutralCardBackgroundDisabled": "#000000", + "colorNeutralStrokeAccessible": "#ffffff", + "colorNeutralStrokeAccessibleHover": "#1aebff", + "colorNeutralStrokeAccessiblePressed": "#1aebff", + "colorNeutralStrokeAccessibleSelected": "#1aebff", + "colorNeutralStroke1": "#ffffff", + "colorNeutralStroke1Hover": "#1aebff", + "colorNeutralStroke1Pressed": "#1aebff", + "colorNeutralStroke1Selected": "#1aebff", + "colorNeutralStroke2": "#ffffff", + "colorNeutralStroke3": "#ffffff", + "colorNeutralStroke4": "#ffffff", + "colorNeutralStroke4Hover": "#1aebff", + "colorNeutralStroke4Pressed": "#1aebff", + "colorNeutralStroke4Selected": "#1aebff", + "colorNeutralStrokeSubtle": "#ffffff", + "colorNeutralStrokeOnBrand": "#000000", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#ffffff", + "colorBrandStroke2": "#ffffff", + "colorBrandStroke2Hover": "#1aebff", + "colorBrandStroke2Pressed": "#1aebff", + "colorBrandStroke2Contrast": "#000000", + "colorCompoundBrandStroke": "#1aebff", + "colorCompoundBrandStrokeHover": "#1aebff", + "colorCompoundBrandStrokePressed": "#1aebff", + "colorNeutralStrokeDisabled": "#3ff23f", + "colorNeutralStrokeDisabled2": "#3ff23f", + "colorNeutralStrokeInvertedDisabled": "#3ff23f", + "colorTransparentStroke": "#ffffff", + "colorTransparentStrokeInteractive": "#1aebff", + "colorTransparentStrokeDisabled": "#3ff23f", + "colorNeutralStrokeAlpha": "#ffffff", + "colorNeutralStrokeAlpha2": "#000000", + "colorStrokeFocus1": "#000000", + "colorStrokeFocus2": "#1aebff", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.24)", + "colorNeutralShadowKey": "rgba(0,0,0,0.28)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.12)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.40)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.48)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#000000", + "colorPaletteRedBackground2": "#000000", + "colorPaletteRedBackground3": "#ffffff", + "colorPaletteRedForeground1": "#ffffff", + "colorPaletteRedForeground2": "#ffffff", + "colorPaletteRedForeground3": "#ffffff", + "colorPaletteRedBorderActive": "#1aebff", + "colorPaletteRedBorder1": "#ffffff", + "colorPaletteRedBorder2": "#ffffff", + "colorPaletteGreenBackground1": "#000000", + "colorPaletteGreenBackground2": "#000000", + "colorPaletteGreenBackground3": "#ffffff", + "colorPaletteGreenForeground1": "#ffffff", + "colorPaletteGreenForeground2": "#ffffff", + "colorPaletteGreenForeground3": "#ffffff", + "colorPaletteGreenBorderActive": "#1aebff", + "colorPaletteGreenBorder1": "#ffffff", + "colorPaletteGreenBorder2": "#ffffff", + "colorPaletteDarkOrangeBackground1": "#000000", + "colorPaletteDarkOrangeBackground2": "#000000", + "colorPaletteDarkOrangeBackground3": "#ffffff", + "colorPaletteDarkOrangeForeground1": "#ffffff", + "colorPaletteDarkOrangeForeground2": "#ffffff", + "colorPaletteDarkOrangeForeground3": "#ffffff", + "colorPaletteDarkOrangeBorderActive": "#1aebff", + "colorPaletteDarkOrangeBorder1": "#ffffff", + "colorPaletteDarkOrangeBorder2": "#ffffff", + "colorPaletteYellowBackground1": "#000000", + "colorPaletteYellowBackground2": "#000000", + "colorPaletteYellowBackground3": "#ffffff", + "colorPaletteYellowForeground1": "#ffffff", + "colorPaletteYellowForeground2": "#ffffff", + "colorPaletteYellowForeground3": "#ffffff", + "colorPaletteYellowBorderActive": "#1aebff", + "colorPaletteYellowBorder1": "#ffffff", + "colorPaletteYellowBorder2": "#ffffff", + "colorPaletteBerryBackground1": "#000000", + "colorPaletteBerryBackground2": "#000000", + "colorPaletteBerryBackground3": "#ffffff", + "colorPaletteBerryForeground1": "#ffffff", + "colorPaletteBerryForeground2": "#ffffff", + "colorPaletteBerryForeground3": "#ffffff", + "colorPaletteBerryBorderActive": "#1aebff", + "colorPaletteBerryBorder1": "#ffffff", + "colorPaletteBerryBorder2": "#ffffff", + "colorPaletteLightGreenBackground1": "#000000", + "colorPaletteLightGreenBackground2": "#000000", + "colorPaletteLightGreenBackground3": "#ffffff", + "colorPaletteLightGreenForeground1": "#ffffff", + "colorPaletteLightGreenForeground2": "#ffffff", + "colorPaletteLightGreenForeground3": "#ffffff", + "colorPaletteLightGreenBorderActive": "#1aebff", + "colorPaletteLightGreenBorder1": "#ffffff", + "colorPaletteLightGreenBorder2": "#ffffff", + "colorPaletteMarigoldBackground1": "#000000", + "colorPaletteMarigoldBackground2": "#000000", + "colorPaletteMarigoldBackground3": "#ffffff", + "colorPaletteMarigoldForeground1": "#ffffff", + "colorPaletteMarigoldForeground2": "#ffffff", + "colorPaletteMarigoldForeground3": "#ffffff", + "colorPaletteMarigoldBorderActive": "#1aebff", + "colorPaletteMarigoldBorder1": "#ffffff", + "colorPaletteMarigoldBorder2": "#ffffff", + "colorPaletteRedForegroundInverted": "#ffffff", + "colorPaletteGreenForegroundInverted": "#ffffff", + "colorPaletteYellowForegroundInverted": "#ffffff", + "colorPaletteDarkRedBackground2": "#000000", + "colorPaletteDarkRedForeground2": "#ffffff", + "colorPaletteDarkRedBorderActive": "#1aebff", + "colorPaletteCranberryBackground2": "#000000", + "colorPaletteCranberryForeground2": "#ffffff", + "colorPaletteCranberryBorderActive": "#1aebff", + "colorPalettePumpkinBackground2": "#000000", + "colorPalettePumpkinForeground2": "#ffffff", + "colorPalettePumpkinBorderActive": "#1aebff", + "colorPalettePeachBackground2": "#000000", + "colorPalettePeachForeground2": "#ffffff", + "colorPalettePeachBorderActive": "#1aebff", + "colorPaletteGoldBackground2": "#000000", + "colorPaletteGoldForeground2": "#ffffff", + "colorPaletteGoldBorderActive": "#1aebff", + "colorPaletteBrassBackground2": "#000000", + "colorPaletteBrassForeground2": "#ffffff", + "colorPaletteBrassBorderActive": "#1aebff", + "colorPaletteBrownBackground2": "#000000", + "colorPaletteBrownForeground2": "#ffffff", + "colorPaletteBrownBorderActive": "#1aebff", + "colorPaletteForestBackground2": "#000000", + "colorPaletteForestForeground2": "#ffffff", + "colorPaletteForestBorderActive": "#1aebff", + "colorPaletteSeafoamBackground2": "#000000", + "colorPaletteSeafoamForeground2": "#ffffff", + "colorPaletteSeafoamBorderActive": "#1aebff", + "colorPaletteDarkGreenBackground2": "#000000", + "colorPaletteDarkGreenForeground2": "#ffffff", + "colorPaletteDarkGreenBorderActive": "#1aebff", + "colorPaletteLightTealBackground2": "#000000", + "colorPaletteLightTealForeground2": "#ffffff", + "colorPaletteLightTealBorderActive": "#1aebff", + "colorPaletteTealBackground2": "#000000", + "colorPaletteTealForeground2": "#ffffff", + "colorPaletteTealBorderActive": "#1aebff", + "colorPaletteSteelBackground2": "#000000", + "colorPaletteSteelForeground2": "#ffffff", + "colorPaletteSteelBorderActive": "#1aebff", + "colorPaletteBlueBackground2": "#000000", + "colorPaletteBlueForeground2": "#ffffff", + "colorPaletteBlueBorderActive": "#1aebff", + "colorPaletteRoyalBlueBackground2": "#000000", + "colorPaletteRoyalBlueForeground2": "#ffffff", + "colorPaletteRoyalBlueBorderActive": "#1aebff", + "colorPaletteCornflowerBackground2": "#000000", + "colorPaletteCornflowerForeground2": "#ffffff", + "colorPaletteCornflowerBorderActive": "#1aebff", + "colorPaletteNavyBackground2": "#000000", + "colorPaletteNavyForeground2": "#ffffff", + "colorPaletteNavyBorderActive": "#1aebff", + "colorPaletteLavenderBackground2": "#000000", + "colorPaletteLavenderForeground2": "#ffffff", + "colorPaletteLavenderBorderActive": "#1aebff", + "colorPalettePurpleBackground2": "#000000", + "colorPalettePurpleForeground2": "#ffffff", + "colorPalettePurpleBorderActive": "#1aebff", + "colorPaletteGrapeBackground2": "#000000", + "colorPaletteGrapeForeground2": "#ffffff", + "colorPaletteGrapeBorderActive": "#1aebff", + "colorPaletteLilacBackground2": "#000000", + "colorPaletteLilacForeground2": "#ffffff", + "colorPaletteLilacBorderActive": "#1aebff", + "colorPalettePinkBackground2": "#000000", + "colorPalettePinkForeground2": "#ffffff", + "colorPalettePinkBorderActive": "#1aebff", + "colorPaletteMagentaBackground2": "#000000", + "colorPaletteMagentaForeground2": "#ffffff", + "colorPaletteMagentaBorderActive": "#1aebff", + "colorPalettePlumBackground2": "#000000", + "colorPalettePlumForeground2": "#ffffff", + "colorPalettePlumBorderActive": "#1aebff", + "colorPaletteBeigeBackground2": "#000000", + "colorPaletteBeigeForeground2": "#ffffff", + "colorPaletteBeigeBorderActive": "#1aebff", + "colorPaletteMinkBackground2": "#000000", + "colorPaletteMinkForeground2": "#ffffff", + "colorPaletteMinkBorderActive": "#1aebff", + "colorPalettePlatinumBackground2": "#000000", + "colorPalettePlatinumForeground2": "#ffffff", + "colorPalettePlatinumBorderActive": "#1aebff", + "colorPaletteAnchorBackground2": "#000000", + "colorPaletteAnchorForeground2": "#ffffff", + "colorPaletteAnchorBorderActive": "#1aebff", + "colorStatusSuccessBackground1": "#000000", + "colorStatusSuccessBackground2": "#000000", + "colorStatusSuccessBackground3": "#ffffff", + "colorStatusSuccessForeground1": "#ffffff", + "colorStatusSuccessForeground2": "#ffffff", + "colorStatusSuccessForeground3": "#ffffff", + "colorStatusSuccessBorderActive": "#1aebff", + "colorStatusSuccessForegroundInverted": "#ffffff", + "colorStatusSuccessBorder1": "#ffffff", + "colorStatusSuccessBorder2": "#ffffff", + "colorStatusWarningBackground1": "#000000", + "colorStatusWarningBackground2": "#000000", + "colorStatusWarningBackground3": "#ffffff", + "colorStatusWarningForeground1": "#ffffff", + "colorStatusWarningForeground2": "#ffffff", + "colorStatusWarningForeground3": "#ffffff", + "colorStatusWarningBorderActive": "#1aebff", + "colorStatusWarningForegroundInverted": "#ffffff", + "colorStatusWarningBorder1": "#ffffff", + "colorStatusWarningBorder2": "#ffffff", + "colorStatusDangerBackground1": "#000000", + "colorStatusDangerBackground2": "#000000", + "colorStatusDangerBackground3": "#ffffff", + "colorStatusDangerForeground1": "#ffffff", + "colorStatusDangerForeground2": "#ffffff", + "colorStatusDangerForeground3": "#ffffff", + "colorStatusDangerBorderActive": "#1aebff", + "colorStatusDangerForegroundInverted": "#ffffff", + "colorStatusDangerBorder1": "#ffffff", + "colorStatusDangerBorder2": "#ffffff", + "colorStatusDangerBackground3Hover": "#1aebff", + "colorStatusDangerBackground3Pressed": "#1aebff", + "shadow2": "0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28)", + "shadow4": "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)", + "shadow8": "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)", + "shadow16": "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)", + "shadow28": "0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28)", + "shadow64": "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + }, + "teamsLightV21Theme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#242424", + "colorNeutralForeground1Hover": "#242424", + "colorNeutralForeground1Pressed": "#242424", + "colorNeutralForeground1Selected": "#242424", + "colorNeutralForeground2": "#424242", + "colorNeutralForeground2Hover": "#242424", + "colorNeutralForeground2Pressed": "#242424", + "colorNeutralForeground2Selected": "#242424", + "colorNeutralForeground2BrandHover": "#654cf5", + "colorNeutralForeground2BrandPressed": "#5a40db", + "colorNeutralForeground2BrandSelected": "#654cf5", + "colorNeutralForeground3": "#616161", + "colorNeutralForeground3Hover": "#424242", + "colorNeutralForeground3Pressed": "#424242", + "colorNeutralForeground3Selected": "#424242", + "colorNeutralForeground3BrandHover": "#654cf5", + "colorNeutralForeground3BrandPressed": "#5a40db", + "colorNeutralForeground3BrandSelected": "#654cf5", + "colorNeutralForeground4": "#707070", + "colorNeutralForeground5": "#616161", + "colorNeutralForeground5Hover": "#242424", + "colorNeutralForeground5Pressed": "#242424", + "colorNeutralForeground5Selected": "#242424", + "colorNeutralForegroundDisabled": "#bdbdbd", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#5a40db", + "colorBrandForegroundLinkHover": "#4d3aba", + "colorBrandForegroundLinkPressed": "#3b3185", + "colorBrandForegroundLinkSelected": "#5a40db", + "colorNeutralForeground2Link": "#424242", + "colorNeutralForeground2LinkHover": "#242424", + "colorNeutralForeground2LinkPressed": "#242424", + "colorNeutralForeground2LinkSelected": "#242424", + "colorCompoundBrandForeground1": "#654cf5", + "colorCompoundBrandForeground1Hover": "#5a40db", + "colorCompoundBrandForeground1Pressed": "#4d3aba", + "colorBrandForeground1": "#654cf5", + "colorBrandForeground2": "#5a40db", + "colorBrandForeground2Hover": "#4d3aba", + "colorBrandForeground2Pressed": "#352e70", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#ffffff", + "colorNeutralForegroundInvertedHover": "#ffffff", + "colorNeutralForegroundInvertedPressed": "#ffffff", + "colorNeutralForegroundInvertedSelected": "#ffffff", + "colorNeutralForegroundInverted2": "#ffffff", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#887dff", + "colorBrandForegroundInvertedHover": "#9791ff", + "colorBrandForegroundInvertedPressed": "#887dff", + "colorBrandForegroundOnLight": "#654cf5", + "colorBrandForegroundOnLightHover": "#5a40db", + "colorBrandForegroundOnLightPressed": "#44359e", + "colorBrandForegroundOnLightSelected": "#4d3aba", + "colorNeutralBackground1": "#ffffff", + "colorNeutralBackground1Hover": "#f5f5f5", + "colorNeutralBackground1Pressed": "#e0e0e0", + "colorNeutralBackground1Selected": "#ebebeb", + "colorNeutralBackground2": "#fafafa", + "colorNeutralBackground2Hover": "#f0f0f0", + "colorNeutralBackground2Pressed": "#dbdbdb", + "colorNeutralBackground2Selected": "#e6e6e6", + "colorNeutralBackground3": "#f5f5f5", + "colorNeutralBackground3Hover": "#ebebeb", + "colorNeutralBackground3Pressed": "#d6d6d6", + "colorNeutralBackground3Selected": "#e0e0e0", + "colorNeutralBackground4": "#f0f0f0", + "colorNeutralBackground4Hover": "#fafafa", + "colorNeutralBackground4Pressed": "#f5f5f5", + "colorNeutralBackground4Selected": "#ffffff", + "colorNeutralBackground5": "#ebebeb", + "colorNeutralBackground5Hover": "#f5f5f5", + "colorNeutralBackground5Pressed": "#f0f0f0", + "colorNeutralBackground5Selected": "#fafafa", + "colorNeutralBackground6": "#e6e6e6", + "colorNeutralBackground7": "#00000000", + "colorNeutralBackground7Hover": "#ebebeb", + "colorNeutralBackground7Pressed": "#d6d6d6", + "colorNeutralBackground7Selected": "#00000000", + "colorNeutralBackground8": "#fcfcfc", + "colorNeutralBackgroundInverted": "#292929", + "colorNeutralBackgroundInvertedHover": "#3d3d3d", + "colorNeutralBackgroundInvertedPressed": "#1f1f1f", + "colorNeutralBackgroundInvertedSelected": "#383838", + "colorNeutralBackgroundStatic": "#333333", + "colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#f5f5f5", + "colorSubtleBackgroundPressed": "#e0e0e0", + "colorSubtleBackgroundSelected": "#ebebeb", + "colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#f0f0f0", + "colorNeutralBackgroundDisabled2": "#ffffff", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#e6e6e6", + "colorNeutralStencil2": "#fafafa", + "colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)", + "colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)", + "colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)", + "colorBrandBackground": "#654cf5", + "colorBrandBackgroundHover": "#5a40db", + "colorBrandBackgroundPressed": "#3b3185", + "colorBrandBackgroundSelected": "#4d3aba", + "colorCompoundBrandBackground": "#654cf5", + "colorCompoundBrandBackgroundHover": "#5a40db", + "colorCompoundBrandBackgroundPressed": "#4d3aba", + "colorBrandBackgroundStatic": "#654cf5", + "colorBrandBackground2": "#e8e8ff", + "colorBrandBackground2Hover": "#dcdbff", + "colorBrandBackground2Pressed": "#bab8ff", + "colorBrandBackground3Static": "#4d3aba", + "colorBrandBackground4Static": "#3b3185", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#e8e8ff", + "colorBrandBackgroundInvertedPressed": "#c8c7ff", + "colorBrandBackgroundInvertedSelected": "#dcdbff", + "colorNeutralCardBackground": "#fafafa", + "colorNeutralCardBackgroundHover": "#ffffff", + "colorNeutralCardBackgroundPressed": "#f5f5f5", + "colorNeutralCardBackgroundSelected": "#ebebeb", + "colorNeutralCardBackgroundDisabled": "#f0f0f0", + "colorNeutralStrokeAccessible": "#616161", + "colorNeutralStrokeAccessibleHover": "#575757", + "colorNeutralStrokeAccessiblePressed": "#4d4d4d", + "colorNeutralStrokeAccessibleSelected": "#654cf5", + "colorNeutralStroke1": "#d1d1d1", + "colorNeutralStroke1Hover": "#c7c7c7", + "colorNeutralStroke1Pressed": "#b3b3b3", + "colorNeutralStroke1Selected": "#bdbdbd", + "colorNeutralStroke2": "#e0e0e0", + "colorNeutralStroke3": "#f0f0f0", + "colorNeutralStroke4": "#ebebeb", + "colorNeutralStroke4Hover": "#e0e0e0", + "colorNeutralStroke4Pressed": "#d6d6d6", + "colorNeutralStroke4Selected": "#ebebeb", + "colorNeutralStrokeSubtle": "#e0e0e0", + "colorNeutralStrokeOnBrand": "#ffffff", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#654cf5", + "colorBrandStroke2": "#c8c7ff", + "colorBrandStroke2Hover": "#aba8ff", + "colorBrandStroke2Pressed": "#654cf5", + "colorBrandStroke2Contrast": "#c8c7ff", + "colorCompoundBrandStroke": "#654cf5", + "colorCompoundBrandStrokeHover": "#5a40db", + "colorCompoundBrandStrokePressed": "#4d3aba", + "colorNeutralStrokeDisabled": "#e0e0e0", + "colorNeutralStrokeDisabled2": "#ebebeb", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#ffffff", + "colorStrokeFocus2": "#000000", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.12)", + "colorNeutralShadowKey": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#fdf6f6", + "colorPaletteRedBackground2": "#f1bbbc", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#bc2f32", + "colorPaletteRedForeground2": "#751d1f", + "colorPaletteRedForeground3": "#d13438", + "colorPaletteRedBorderActive": "#d13438", + "colorPaletteRedBorder1": "#f1bbbc", + "colorPaletteRedBorder2": "#d13438", + "colorPaletteGreenBackground1": "#f1faf1", + "colorPaletteGreenBackground2": "#9fd89f", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#0e700e", + "colorPaletteGreenForeground2": "#094509", + "colorPaletteGreenForeground3": "#107c10", + "colorPaletteGreenBorderActive": "#107c10", + "colorPaletteGreenBorder1": "#9fd89f", + "colorPaletteGreenBorder2": "#107c10", + "colorPaletteDarkOrangeBackground1": "#fdf6f3", + "colorPaletteDarkOrangeBackground2": "#f4bfab", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#c43501", + "colorPaletteDarkOrangeForeground2": "#7a2101", + "colorPaletteDarkOrangeForeground3": "#da3b01", + "colorPaletteDarkOrangeBorderActive": "#da3b01", + "colorPaletteDarkOrangeBorder1": "#f4bfab", + "colorPaletteDarkOrangeBorder2": "#da3b01", + "colorPaletteYellowBackground1": "#fffef5", + "colorPaletteYellowBackground2": "#fef7b2", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#817400", + "colorPaletteYellowForeground2": "#817400", + "colorPaletteYellowForeground3": "#fde300", + "colorPaletteYellowBorderActive": "#fde300", + "colorPaletteYellowBorder1": "#fef7b2", + "colorPaletteYellowBorder2": "#fde300", + "colorPaletteBerryBackground1": "#fdf5fc", + "colorPaletteBerryBackground2": "#edbbe7", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#af33a1", + "colorPaletteBerryForeground2": "#6d2064", + "colorPaletteBerryForeground3": "#c239b3", + "colorPaletteBerryBorderActive": "#c239b3", + "colorPaletteBerryBorder1": "#edbbe7", + "colorPaletteBerryBorder2": "#c239b3", + "colorPaletteLightGreenBackground1": "#f2fbf2", + "colorPaletteLightGreenBackground2": "#a7e3a5", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#11910d", + "colorPaletteLightGreenForeground2": "#0b5a08", + "colorPaletteLightGreenForeground3": "#13a10e", + "colorPaletteLightGreenBorderActive": "#13a10e", + "colorPaletteLightGreenBorder1": "#a7e3a5", + "colorPaletteLightGreenBorder2": "#13a10e", + "colorPaletteMarigoldBackground1": "#fefbf4", + "colorPaletteMarigoldBackground2": "#f9e2ae", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#d39300", + "colorPaletteMarigoldForeground2": "#835b00", + "colorPaletteMarigoldForeground3": "#eaa300", + "colorPaletteMarigoldBorderActive": "#eaa300", + "colorPaletteMarigoldBorder1": "#f9e2ae", + "colorPaletteMarigoldBorder2": "#eaa300", + "colorPaletteRedForegroundInverted": "#dc5e62", + "colorPaletteGreenForegroundInverted": "#359b35", + "colorPaletteYellowForegroundInverted": "#fef7b2", + "colorPaletteDarkRedBackground2": "#d69ca5", + "colorPaletteDarkRedForeground2": "#420610", + "colorPaletteDarkRedBorderActive": "#750b1c", + "colorPaletteCranberryBackground2": "#eeacb2", + "colorPaletteCranberryForeground2": "#6e0811", + "colorPaletteCranberryBorderActive": "#c50f1f", + "colorPalettePumpkinBackground2": "#efc4ad", + "colorPalettePumpkinForeground2": "#712d09", + "colorPalettePumpkinBorderActive": "#ca5010", + "colorPalettePeachBackground2": "#ffddb3", + "colorPalettePeachForeground2": "#8f4e00", + "colorPalettePeachBorderActive": "#ff8c00", + "colorPaletteGoldBackground2": "#ecdfa5", + "colorPaletteGoldForeground2": "#6c5700", + "colorPaletteGoldBorderActive": "#c19c00", + "colorPaletteBrassBackground2": "#e0cea2", + "colorPaletteBrassForeground2": "#553e06", + "colorPaletteBrassBorderActive": "#986f0b", + "colorPaletteBrownBackground2": "#ddc3b0", + "colorPaletteBrownForeground2": "#50301a", + "colorPaletteBrownBorderActive": "#8e562e", + "colorPaletteForestBackground2": "#bdd99b", + "colorPaletteForestForeground2": "#294903", + "colorPaletteForestBorderActive": "#498205", + "colorPaletteSeafoamBackground2": "#a8f0cd", + "colorPaletteSeafoamForeground2": "#00723b", + "colorPaletteSeafoamBorderActive": "#00cc6a", + "colorPaletteDarkGreenBackground2": "#9ad29a", + "colorPaletteDarkGreenForeground2": "#063b06", + "colorPaletteDarkGreenBorderActive": "#0b6a0b", + "colorPaletteLightTealBackground2": "#a6e9ed", + "colorPaletteLightTealForeground2": "#00666d", + "colorPaletteLightTealBorderActive": "#00b7c3", + "colorPaletteTealBackground2": "#9bd9db", + "colorPaletteTealForeground2": "#02494c", + "colorPaletteTealBorderActive": "#038387", + "colorPaletteSteelBackground2": "#94c8d4", + "colorPaletteSteelForeground2": "#00333f", + "colorPaletteSteelBorderActive": "#005b70", + "colorPaletteBlueBackground2": "#a9d3f2", + "colorPaletteBlueForeground2": "#004377", + "colorPaletteBlueBorderActive": "#0078d4", + "colorPaletteRoyalBlueBackground2": "#9abfdc", + "colorPaletteRoyalBlueForeground2": "#002c4e", + "colorPaletteRoyalBlueBorderActive": "#004e8c", + "colorPaletteCornflowerBackground2": "#c8d1fa", + "colorPaletteCornflowerForeground2": "#2c3c85", + "colorPaletteCornflowerBorderActive": "#4f6bed", + "colorPaletteNavyBackground2": "#a3b2e8", + "colorPaletteNavyForeground2": "#001665", + "colorPaletteNavyBorderActive": "#0027b4", + "colorPaletteLavenderBackground2": "#d2ccf8", + "colorPaletteLavenderForeground2": "#3f3682", + "colorPaletteLavenderBorderActive": "#7160e8", + "colorPalettePurpleBackground2": "#c6b1de", + "colorPalettePurpleForeground2": "#341a51", + "colorPalettePurpleBorderActive": "#5c2e91", + "colorPaletteGrapeBackground2": "#d9a7e0", + "colorPaletteGrapeForeground2": "#4c0d55", + "colorPaletteGrapeBorderActive": "#881798", + "colorPaletteLilacBackground2": "#e6bfed", + "colorPaletteLilacForeground2": "#63276d", + "colorPaletteLilacBorderActive": "#b146c2", + "colorPalettePinkBackground2": "#f7c0e3", + "colorPalettePinkForeground2": "#80215d", + "colorPalettePinkBorderActive": "#e43ba6", + "colorPaletteMagentaBackground2": "#eca5d1", + "colorPaletteMagentaForeground2": "#6b0043", + "colorPaletteMagentaBorderActive": "#bf0077", + "colorPalettePlumBackground2": "#d696c0", + "colorPalettePlumForeground2": "#43002b", + "colorPalettePlumBorderActive": "#77004d", + "colorPaletteBeigeBackground2": "#d7d4d4", + "colorPaletteBeigeForeground2": "#444241", + "colorPaletteBeigeBorderActive": "#7a7574", + "colorPaletteMinkBackground2": "#cecccb", + "colorPaletteMinkForeground2": "#343231", + "colorPaletteMinkBorderActive": "#5d5a58", + "colorPalettePlatinumBackground2": "#cdd6d8", + "colorPalettePlatinumForeground2": "#3b4447", + "colorPalettePlatinumBorderActive": "#69797e", + "colorPaletteAnchorBackground2": "#bcc3c7", + "colorPaletteAnchorForeground2": "#202427", + "colorPaletteAnchorBorderActive": "#394146", + "colorStatusSuccessBackground1": "#f1faf1", + "colorStatusSuccessBackground2": "#9fd89f", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#0e700e", + "colorStatusSuccessForeground2": "#094509", + "colorStatusSuccessForeground3": "#107c10", + "colorStatusSuccessForegroundInverted": "#54b054", + "colorStatusSuccessBorderActive": "#107c10", + "colorStatusSuccessBorder1": "#9fd89f", + "colorStatusSuccessBorder2": "#107c10", + "colorStatusWarningBackground1": "#fff9f5", + "colorStatusWarningBackground2": "#fdcfb4", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#bc4b09", + "colorStatusWarningForeground2": "#8a3707", + "colorStatusWarningForeground3": "#bc4b09", + "colorStatusWarningForegroundInverted": "#faa06b", + "colorStatusWarningBorderActive": "#f7630c", + "colorStatusWarningBorder1": "#fdcfb4", + "colorStatusWarningBorder2": "#bc4b09", + "colorStatusDangerBackground1": "#fdf3f4", + "colorStatusDangerBackground2": "#eeacb2", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#b10e1c", + "colorStatusDangerForeground2": "#6e0811", + "colorStatusDangerForeground3": "#c50f1f", + "colorStatusDangerForegroundInverted": "#dc626d", + "colorStatusDangerBorderActive": "#c50f1f", + "colorStatusDangerBorder1": "#eeacb2", + "colorStatusDangerBorder2": "#c50f1f", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)", + "shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)", + "shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)", + "shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)", + "shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)", + "shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + }, + "teamsDarkV21Theme": { + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadius2XLarge": "12px", + "borderRadius3XLarge": "16px", + "borderRadius4XLarge": "24px", + "borderRadius5XLarge": "32px", + "borderRadius6XLarge": "40px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, \"Apple Color Emoji\", \"Segoe UI Emoji\", sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#ffffff", + "colorNeutralForeground1Hover": "#ffffff", + "colorNeutralForeground1Pressed": "#ffffff", + "colorNeutralForeground1Selected": "#ffffff", + "colorNeutralForeground2": "#d6d6d6", + "colorNeutralForeground2Hover": "#ffffff", + "colorNeutralForeground2Pressed": "#ffffff", + "colorNeutralForeground2Selected": "#ffffff", + "colorNeutralForeground2BrandHover": "#887dff", + "colorNeutralForeground2BrandPressed": "#7769fa", + "colorNeutralForeground2BrandSelected": "#887dff", + "colorNeutralForeground3": "#adadad", + "colorNeutralForeground3Hover": "#d6d6d6", + "colorNeutralForeground3Pressed": "#d6d6d6", + "colorNeutralForeground3Selected": "#d6d6d6", + "colorNeutralForeground3BrandHover": "#887dff", + "colorNeutralForeground3BrandPressed": "#7769fa", + "colorNeutralForeground3BrandSelected": "#887dff", + "colorNeutralForeground4": "#999999", + "colorNeutralForeground5": "#adadad", + "colorNeutralForeground5Hover": "#ffffff", + "colorNeutralForeground5Pressed": "#ffffff", + "colorNeutralForeground5Selected": "#ffffff", + "colorNeutralForegroundDisabled": "#5c5c5c", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#887dff", + "colorBrandForegroundLinkHover": "#9791ff", + "colorBrandForegroundLinkPressed": "#7769fa", + "colorBrandForegroundLinkSelected": "#887dff", + "colorNeutralForeground2Link": "#d6d6d6", + "colorNeutralForeground2LinkHover": "#ffffff", + "colorNeutralForeground2LinkPressed": "#ffffff", + "colorNeutralForeground2LinkSelected": "#ffffff", + "colorCompoundBrandForeground1": "#887dff", + "colorCompoundBrandForeground1Hover": "#9791ff", + "colorCompoundBrandForeground1Pressed": "#7769fa", + "colorBrandForeground1": "#887dff", + "colorBrandForeground2": "#aba8ff", + "colorBrandForeground2Hover": "#bab8ff", + "colorBrandForeground2Pressed": "#e8e8ff", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#242424", + "colorNeutralForegroundInvertedHover": "#242424", + "colorNeutralForegroundInvertedPressed": "#242424", + "colorNeutralForegroundInvertedSelected": "#242424", + "colorNeutralForegroundInverted2": "#242424", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#654cf5", + "colorBrandForegroundInvertedHover": "#5a40db", + "colorBrandForegroundInvertedPressed": "#4d3aba", + "colorBrandForegroundOnLight": "#654cf5", + "colorBrandForegroundOnLightHover": "#5a40db", + "colorBrandForegroundOnLightPressed": "#44359e", + "colorBrandForegroundOnLightSelected": "#4d3aba", + "colorNeutralBackground1": "#292929", + "colorNeutralBackground1Hover": "#3d3d3d", + "colorNeutralBackground1Pressed": "#1f1f1f", + "colorNeutralBackground1Selected": "#383838", + "colorNeutralBackground2": "#242424", + "colorNeutralBackground2Hover": "#383838", + "colorNeutralBackground2Pressed": "#1a1a1a", + "colorNeutralBackground2Selected": "#333333", + "colorNeutralBackground3": "#1f1f1f", + "colorNeutralBackground3Hover": "#333333", + "colorNeutralBackground3Pressed": "#141414", + "colorNeutralBackground3Selected": "#2e2e2e", + "colorNeutralBackground4": "#141414", + "colorNeutralBackground4Hover": "#292929", + "colorNeutralBackground4Pressed": "#0a0a0a", + "colorNeutralBackground4Selected": "#242424", + "colorNeutralBackground5": "#0a0a0a", + "colorNeutralBackground5Hover": "#1f1f1f", + "colorNeutralBackground5Pressed": "#000000", + "colorNeutralBackground5Selected": "#1a1a1a", + "colorNeutralBackground6": "#333333", + "colorNeutralBackground7": "#00000000", + "colorNeutralBackground7Hover": "#1a1a1a", + "colorNeutralBackground7Pressed": "#0a0a0a", + "colorNeutralBackground7Selected": "#00000000", + "colorNeutralBackground8": "#292929", + "colorNeutralBackgroundInverted": "#ffffff", + "colorNeutralBackgroundInvertedHover": "#f5f5f5", + "colorNeutralBackgroundInvertedPressed": "#e0e0e0", + "colorNeutralBackgroundInvertedSelected": "#ebebeb", + "colorNeutralBackgroundStatic": "#3d3d3d", + "colorNeutralBackgroundAlpha": "rgba(26, 26, 26, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(31, 31, 31, 0.7)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#383838", + "colorSubtleBackgroundPressed": "#2e2e2e", + "colorSubtleBackgroundSelected": "#333333", + "colorSubtleBackgroundLightAlphaHover": "rgba(36, 36, 36, 0.8)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(36, 36, 36, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#141414", + "colorNeutralBackgroundDisabled2": "#292929", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#575757", + "colorNeutralStencil2": "#333333", + "colorNeutralStencil1Alpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil2Alpha": "rgba(255, 255, 255, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.5)", + "colorScrollbarOverlay": "rgba(255, 255, 255, 0.6)", + "colorBrandBackground": "#5a40db", + "colorBrandBackgroundHover": "#654cf5", + "colorBrandBackgroundPressed": "#3b3185", + "colorBrandBackgroundSelected": "#4d3aba", + "colorCompoundBrandBackground": "#887dff", + "colorCompoundBrandBackgroundHover": "#9791ff", + "colorCompoundBrandBackgroundPressed": "#7769fa", + "colorBrandBackgroundStatic": "#654cf5", + "colorBrandBackground2": "#2f2a5e", + "colorBrandBackground2Hover": "#3b3185", + "colorBrandBackground2Pressed": "#29274f", + "colorBrandBackground3Static": "#4d3aba", + "colorBrandBackground4Static": "#3b3185", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#e8e8ff", + "colorBrandBackgroundInvertedPressed": "#c8c7ff", + "colorBrandBackgroundInvertedSelected": "#dcdbff", + "colorNeutralCardBackground": "#333333", + "colorNeutralCardBackgroundHover": "#3d3d3d", + "colorNeutralCardBackgroundPressed": "#2e2e2e", + "colorNeutralCardBackgroundSelected": "#383838", + "colorNeutralCardBackgroundDisabled": "#141414", + "colorNeutralStrokeAccessible": "#adadad", + "colorNeutralStrokeAccessibleHover": "#bdbdbd", + "colorNeutralStrokeAccessiblePressed": "#b3b3b3", + "colorNeutralStrokeAccessibleSelected": "#887dff", + "colorNeutralStroke1": "#666666", + "colorNeutralStroke1Hover": "#757575", + "colorNeutralStroke1Pressed": "#6b6b6b", + "colorNeutralStroke1Selected": "#707070", + "colorNeutralStroke2": "#525252", + "colorNeutralStroke3": "#3d3d3d", + "colorNeutralStroke4": "#3d3d3d", + "colorNeutralStroke4Hover": "#2e2e2e", + "colorNeutralStroke4Pressed": "#242424", + "colorNeutralStroke4Selected": "#3d3d3d", + "colorNeutralStrokeSubtle": "#0a0a0a", + "colorNeutralStrokeOnBrand": "#292929", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#887dff", + "colorBrandStroke2": "#44359e", + "colorBrandStroke2Hover": "#44359e", + "colorBrandStroke2Pressed": "#352e70", + "colorBrandStroke2Contrast": "#44359e", + "colorCompoundBrandStroke": "#7769fa", + "colorCompoundBrandStrokeHover": "#887dff", + "colorCompoundBrandStrokePressed": "#654cf5", + "colorNeutralStrokeDisabled": "#424242", + "colorNeutralStrokeDisabled2": "#3d3d3d", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#000000", + "colorStrokeFocus2": "#ffffff", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.24)", + "colorNeutralShadowKey": "rgba(0,0,0,0.28)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.12)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.40)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.48)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#3f1011", + "colorPaletteRedBackground2": "#751d1f", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#e37d80", + "colorPaletteRedForeground2": "#f1bbbc", + "colorPaletteRedForeground3": "#e37d80", + "colorPaletteRedBorderActive": "#e37d80", + "colorPaletteRedBorder1": "#d13438", + "colorPaletteRedBorder2": "#e37d80", + "colorPaletteGreenBackground1": "#052505", + "colorPaletteGreenBackground2": "#094509", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#54b054", + "colorPaletteGreenForeground2": "#9fd89f", + "colorPaletteGreenForeground3": "#9fd89f", + "colorPaletteGreenBorderActive": "#54b054", + "colorPaletteGreenBorder1": "#107c10", + "colorPaletteGreenBorder2": "#9fd89f", + "colorPaletteDarkOrangeBackground1": "#411200", + "colorPaletteDarkOrangeBackground2": "#7a2101", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#e9835e", + "colorPaletteDarkOrangeForeground2": "#f4bfab", + "colorPaletteDarkOrangeForeground3": "#e9835e", + "colorPaletteDarkOrangeBorderActive": "#e9835e", + "colorPaletteDarkOrangeBorder1": "#da3b01", + "colorPaletteDarkOrangeBorder2": "#e9835e", + "colorPaletteYellowBackground1": "#4c4400", + "colorPaletteYellowBackground2": "#817400", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#feee66", + "colorPaletteYellowForeground2": "#fef7b2", + "colorPaletteYellowForeground3": "#fdea3d", + "colorPaletteYellowBorderActive": "#feee66", + "colorPaletteYellowBorder1": "#fde300", + "colorPaletteYellowBorder2": "#fdea3d", + "colorPaletteBerryBackground1": "#3a1136", + "colorPaletteBerryBackground2": "#6d2064", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#da7ed0", + "colorPaletteBerryForeground2": "#edbbe7", + "colorPaletteBerryForeground3": "#d161c4", + "colorPaletteBerryBorderActive": "#da7ed0", + "colorPaletteBerryBorder1": "#c239b3", + "colorPaletteBerryBorder2": "#d161c4", + "colorPaletteLightGreenBackground1": "#063004", + "colorPaletteLightGreenBackground2": "#0b5a08", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#5ec75a", + "colorPaletteLightGreenForeground2": "#a7e3a5", + "colorPaletteLightGreenForeground3": "#3db838", + "colorPaletteLightGreenBorderActive": "#5ec75a", + "colorPaletteLightGreenBorder1": "#13a10e", + "colorPaletteLightGreenBorder2": "#3db838", + "colorPaletteMarigoldBackground1": "#463100", + "colorPaletteMarigoldBackground2": "#835b00", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#f2c661", + "colorPaletteMarigoldForeground2": "#f9e2ae", + "colorPaletteMarigoldForeground3": "#efb839", + "colorPaletteMarigoldBorderActive": "#f2c661", + "colorPaletteMarigoldBorder1": "#eaa300", + "colorPaletteMarigoldBorder2": "#efb839", + "colorPaletteRedForegroundInverted": "#d13438", + "colorPaletteGreenForegroundInverted": "#107c10", + "colorPaletteYellowForegroundInverted": "#817400", + "colorPaletteDarkRedBackground2": "#590815", + "colorPaletteDarkRedForeground2": "#d69ca5", + "colorPaletteDarkRedBorderActive": "#ac4f5e", + "colorPaletteCranberryBackground2": "#6e0811", + "colorPaletteCranberryForeground2": "#eeacb2", + "colorPaletteCranberryBorderActive": "#dc626d", + "colorPalettePumpkinBackground2": "#712d09", + "colorPalettePumpkinForeground2": "#efc4ad", + "colorPalettePumpkinBorderActive": "#df8e64", + "colorPalettePeachBackground2": "#8f4e00", + "colorPalettePeachForeground2": "#ffddb3", + "colorPalettePeachBorderActive": "#ffba66", + "colorPaletteGoldBackground2": "#6c5700", + "colorPaletteGoldForeground2": "#ecdfa5", + "colorPaletteGoldBorderActive": "#dac157", + "colorPaletteBrassBackground2": "#553e06", + "colorPaletteBrassForeground2": "#e0cea2", + "colorPaletteBrassBorderActive": "#c1a256", + "colorPaletteBrownBackground2": "#50301a", + "colorPaletteBrownForeground2": "#ddc3b0", + "colorPaletteBrownBorderActive": "#bb8f6f", + "colorPaletteForestBackground2": "#294903", + "colorPaletteForestForeground2": "#bdd99b", + "colorPaletteForestBorderActive": "#85b44c", + "colorPaletteSeafoamBackground2": "#00723b", + "colorPaletteSeafoamForeground2": "#a8f0cd", + "colorPaletteSeafoamBorderActive": "#5ae0a0", + "colorPaletteDarkGreenBackground2": "#063b06", + "colorPaletteDarkGreenForeground2": "#9ad29a", + "colorPaletteDarkGreenBorderActive": "#4da64d", + "colorPaletteLightTealBackground2": "#00666d", + "colorPaletteLightTealForeground2": "#a6e9ed", + "colorPaletteLightTealBorderActive": "#58d3db", + "colorPaletteTealBackground2": "#02494c", + "colorPaletteTealForeground2": "#9bd9db", + "colorPaletteTealBorderActive": "#4cb4b7", + "colorPaletteSteelBackground2": "#00333f", + "colorPaletteSteelForeground2": "#94c8d4", + "colorPaletteSteelBorderActive": "#4496a9", + "colorPaletteBlueBackground2": "#004377", + "colorPaletteBlueForeground2": "#a9d3f2", + "colorPaletteBlueBorderActive": "#5caae5", + "colorPaletteRoyalBlueBackground2": "#002c4e", + "colorPaletteRoyalBlueForeground2": "#9abfdc", + "colorPaletteRoyalBlueBorderActive": "#4a89ba", + "colorPaletteCornflowerBackground2": "#2c3c85", + "colorPaletteCornflowerForeground2": "#c8d1fa", + "colorPaletteCornflowerBorderActive": "#93a4f4", + "colorPaletteNavyBackground2": "#001665", + "colorPaletteNavyForeground2": "#a3b2e8", + "colorPaletteNavyBorderActive": "#546fd2", + "colorPaletteLavenderBackground2": "#3f3682", + "colorPaletteLavenderForeground2": "#d2ccf8", + "colorPaletteLavenderBorderActive": "#a79cf1", + "colorPalettePurpleBackground2": "#341a51", + "colorPalettePurpleForeground2": "#c6b1de", + "colorPalettePurpleBorderActive": "#9470bd", + "colorPaletteGrapeBackground2": "#4c0d55", + "colorPaletteGrapeForeground2": "#d9a7e0", + "colorPaletteGrapeBorderActive": "#b55fc1", + "colorPaletteLilacBackground2": "#63276d", + "colorPaletteLilacForeground2": "#e6bfed", + "colorPaletteLilacBorderActive": "#cf87da", + "colorPalettePinkBackground2": "#80215d", + "colorPalettePinkForeground2": "#f7c0e3", + "colorPalettePinkBorderActive": "#ef85c8", + "colorPaletteMagentaBackground2": "#6b0043", + "colorPaletteMagentaForeground2": "#eca5d1", + "colorPaletteMagentaBorderActive": "#d957a8", + "colorPalettePlumBackground2": "#5a003b", + "colorPalettePlumForeground2": "#d696c0", + "colorPalettePlumBorderActive": "#ad4589", + "colorPaletteBeigeBackground2": "#444241", + "colorPaletteBeigeForeground2": "#d7d4d4", + "colorPaletteBeigeBorderActive": "#afabaa", + "colorPaletteMinkBackground2": "#343231", + "colorPaletteMinkForeground2": "#cecccb", + "colorPaletteMinkBorderActive": "#9e9b99", + "colorPalettePlatinumBackground2": "#3b4447", + "colorPalettePlatinumForeground2": "#cdd6d8", + "colorPalettePlatinumBorderActive": "#a0adb2", + "colorPaletteAnchorBackground2": "#202427", + "colorPaletteAnchorForeground2": "#bcc3c7", + "colorPaletteAnchorBorderActive": "#808a90", + "colorStatusSuccessBackground1": "#052505", + "colorStatusSuccessBackground2": "#094509", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#54b054", + "colorStatusSuccessForeground2": "#9fd89f", + "colorStatusSuccessForeground3": "#9fd89f", + "colorStatusSuccessBorderActive": "#54b054", + "colorStatusSuccessForegroundInverted": "#0e700e", + "colorStatusSuccessBorder1": "#107c10", + "colorStatusSuccessBorder2": "#9fd89f", + "colorStatusWarningBackground1": "#4a1e04", + "colorStatusWarningBackground2": "#8a3707", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#faa06b", + "colorStatusWarningForeground2": "#fdcfb4", + "colorStatusWarningForeground3": "#f98845", + "colorStatusWarningBorderActive": "#faa06b", + "colorStatusWarningForegroundInverted": "#bc4b09", + "colorStatusWarningBorder1": "#f7630c", + "colorStatusWarningBorder2": "#f98845", + "colorStatusDangerBackground1": "#3b0509", + "colorStatusDangerBackground2": "#6e0811", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#dc626d", + "colorStatusDangerForeground2": "#eeacb2", + "colorStatusDangerForeground3": "#eeacb2", + "colorStatusDangerBorderActive": "#dc626d", + "colorStatusDangerForegroundInverted": "#b10e1c", + "colorStatusDangerBorder1": "#c50f1f", + "colorStatusDangerBorder2": "#dc626d", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28)", + "shadow4": "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)", + "shadow8": "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)", + "shadow16": "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)", + "shadow28": "0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28)", + "shadow64": "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" + } + } +} From 29337609eaa4068f9fed5861be3957031daa38da Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 22:33:08 -0700 Subject: [PATCH 625/640] feat(react-tailwind-theme): emit web-light defaults + 7 shipped theme classes (theming 2b) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The generator now reads packages/tokens/theme-values.json + themeClassNames.ts (text-level, still no build dependency) and emits: (a) the 433 theme-variant web-light values into the existing @layer fui.theme { :root, :host } block — the artifact is the SOLE default value source now that FluentProvider's runtime tag is gone — and (b) NEW generated css/themes.css with one class per shipped theme (.fui-theme-web-light ... .fui-theme-teams-dark-v21; 433 custom-property declarations each, @layer fui.theme), imported by css/index.css. Cross-asserts theme-set/classname/tokens.ts lockstep, spacing/stroke theme-invariance (the 26 stay :root-only in density-knob form) and zIndex theme-absence. dist/styles.css 2,810 -> 175,638 B raw (14,603 B gzip). Generated css is prettier-ignored: byte-exact value fidelity vs the JS themes beats formatting (prettier would rewrite rgba spacing/trailing zeros). @reference emission verified unchanged (zero theme leakage into module output). Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .prettierignore | 4 + .../react-tailwind-theme/README.md | 25 +- .../react-tailwind-theme/css/index.css | 10 + .../react-tailwind-theme/css/themes.css | 3092 +++++++++++++++++ .../react-tailwind-theme/css/tokens.css | 457 ++- .../scripts/generate-tokens-css.js | 317 +- 6 files changed, 3856 insertions(+), 49 deletions(-) create mode 100644 packages/react-components/react-tailwind-theme/css/themes.css diff --git a/.prettierignore b/.prettierignore index 36acacc7b5f173..fbc8e122dbea98 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,9 @@ # generated or imported files package-deps.json +# generated theme CSS — byte-exact against packages/tokens values (generator --check); +# prettier would rewrite value bytes (rgba spacing, trailing zeros, line wraps) +packages/react-components/react-tailwind-theme/css/tokens.css +packages/react-components/react-tailwind-theme/css/themes.css CHANGELOG.* # generated from `web-features` via `yarn generate-browser-support` **/browser-support-data.generated.json diff --git a/packages/react-components/react-tailwind-theme/README.md b/packages/react-components/react-tailwind-theme/README.md index fc66197c0f0401..a19575328495cb 100644 --- a/packages/react-components/react-tailwind-theme/README.md +++ b/packages/react-components/react-tailwind-theme/README.md @@ -3,10 +3,12 @@ **Shared Tailwind theme layer for [Fluent UI React](https://react.fluentui.dev)** Fluent UI React v9 component packages ship plain, precompiled CSS (`/dist/styles.css`, -reached automatically through each package's generated class map). That compiled CSS references a -small set of theme-level custom properties — the cascade `@layer` order, `--base-scale`, +reached automatically through each package's generated class map). That compiled CSS references +theme-level custom properties — the design tokens, the cascade `@layer` order, `--base-scale`, `--spacing` and the four stroke widths. Something has to emit those **once per document**. That is -this package. (It deliberately registers **no** `@property` rules: a non-empty custom-property +this package: it ships the theme classes (`.fui-theme-web-light`, `.fui-theme-web-dark`, +`.fui-theme-teams-light`, …, each containing only custom-property declarations) plus the web-light +values as `:root, :host` defaults. (It deliberately registers **no** `@property` rules: a non-empty custom-property registry puts Blink's transition-start path on a page-global slow branch — see `migration/griffel-to-tailwind/reports/perf-property-remedy.md`.) @@ -30,26 +32,27 @@ import '@fluentui/react-tailwind-theme/styles.css'; Then use components normally — you never import a component stylesheet yourself: ```jsx -import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components'; +import { FluentProvider, webLightThemeClassName, Button } from '@fluentui/react-components'; export default function App() { return ( - + ); } ``` -`FluentProvider` still owns every design-token **value** (they remain runtime CSS custom properties -scoped to the provider element), so per-provider and nested-provider theming are unchanged. This -package only registers the theme-level plumbing that component CSS compiles against. +`FluentProvider` applies the theme class you pass via `themeClassName` to its root (and propagates +it to portals); the token **values** come from this package's static CSS. Because a theme class is +just custom-property declarations, putting it on any DOM node themes that subtree, and nested +providers inherit the parent's class when the prop is omitted. ### If you skip the import -Numeric spacing utilities in the component CSS resolve against a missing `--base-scale` and compute -to `0px` — components render with the right colors and the wrong metrics. If padding and gaps look -collapsed, this import is missing. +The theme's custom properties are missing entirely: color tokens resolve to nothing and numeric +spacing utilities compute to `0px` — components render unthemed with collapsed metrics. If +components look unstyled or padding and gaps look collapsed, this import is missing. ## Layering diff --git a/packages/react-components/react-tailwind-theme/css/index.css b/packages/react-components/react-tailwind-theme/css/index.css index a1de11ab322931..1650a6d6a28a47 100644 --- a/packages/react-components/react-tailwind-theme/css/index.css +++ b/packages/react-components/react-tailwind-theme/css/index.css @@ -135,3 +135,13 @@ * utilities silently stop compiling — probe-verified, not theoretical. */ @import './tokens.css'; + +/* + * SHIPPED THEME CLASSES (generated — theming Phase 2b). One class per shipped theme + * (.fui-theme-web-dark, …), each carrying ONLY the theme-variant canonical custom + * properties inside `@layer fui.theme`. A theme class on any DOM node themes that + * subtree; the `:root, :host` defaults above stay web light. `@reference` drops these + * rules from component modules (plain style rules emit nothing under reference), so the + * classes ship once per document via ./emit.css / dist/styles.css. + */ +@import './themes.css'; diff --git a/packages/react-components/react-tailwind-theme/css/themes.css b/packages/react-components/react-tailwind-theme/css/themes.css new file mode 100644 index 00000000000000..4319efdf8a35cd --- /dev/null +++ b/packages/react-components/react-tailwind-theme/css/themes.css @@ -0,0 +1,3092 @@ +/* + * DO NOT EDIT — generated file. + * + * Generator: packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js + * Source: @fluentui/tokens@1.0.0-alpha.23 (packages/tokens/theme-values.json) + * Regenerate: node packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js + * Verify: node packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js --check + * + * SHIPPED THEME CLASSES (theming Phase 2b). Applying one of these classes to any + * DOM node themes that subtree — custom properties cascade. They contain ONLY + * custom-property declarations, in the same fui.theme layer as the web-light + * defaults at :root/:host (css/tokens.css), which they override element-locally. + * The JS constants for these class names ship from @fluentui/tokens / + * @fluentui/react-theme (webLightThemeClassName, …) — the generator asserts the + * lockstep on every run. + * + * The 26 spacing/strokeWidth tokens are deliberately absent: theme-invariant, + * emitted once at :root/:host in density-knob form (see css/tokens.css). + */ + +/* webLightTheme — 433 tokens */ +@layer fui.theme { + .fui-theme-web-light { + --color-neutral-foreground-1: #242424; + --color-neutral-foreground-1-hover: #242424; + --color-neutral-foreground-1-pressed: #242424; + --color-neutral-foreground-1-selected: #242424; + --color-neutral-foreground-2: #424242; + --color-neutral-foreground-2-hover: #242424; + --color-neutral-foreground-2-pressed: #242424; + --color-neutral-foreground-2-selected: #242424; + --color-neutral-foreground-2-brand-hover: #0f6cbd; + --color-neutral-foreground-2-brand-pressed: #115ea3; + --color-neutral-foreground-2-brand-selected: #0f6cbd; + --color-neutral-foreground-3: #616161; + --color-neutral-foreground-3-hover: #424242; + --color-neutral-foreground-3-pressed: #424242; + --color-neutral-foreground-3-selected: #424242; + --color-neutral-foreground-3-brand-hover: #0f6cbd; + --color-neutral-foreground-3-brand-pressed: #115ea3; + --color-neutral-foreground-3-brand-selected: #0f6cbd; + --color-neutral-foreground-4: #707070; + --color-neutral-foreground-5: #616161; + --color-neutral-foreground-5-hover: #242424; + --color-neutral-foreground-5-pressed: #242424; + --color-neutral-foreground-5-selected: #242424; + --color-neutral-foreground-disabled: #bdbdbd; + --color-brand-foreground-link: #115ea3; + --color-brand-foreground-link-hover: #0f548c; + --color-brand-foreground-link-pressed: #0c3b5e; + --color-brand-foreground-link-selected: #115ea3; + --color-neutral-foreground-2-link: #424242; + --color-neutral-foreground-2-link-hover: #242424; + --color-neutral-foreground-2-link-pressed: #242424; + --color-neutral-foreground-2-link-selected: #242424; + --color-compound-brand-foreground-1: #0f6cbd; + --color-compound-brand-foreground-1-hover: #115ea3; + --color-compound-brand-foreground-1-pressed: #0f548c; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #ffffff; + --color-neutral-foreground-inverted-hover: #ffffff; + --color-neutral-foreground-inverted-pressed: #ffffff; + --color-neutral-foreground-inverted-selected: #ffffff; + --color-neutral-foreground-inverted-2: #ffffff; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #0f6cbd; + --color-brand-foreground-2: #115ea3; + --color-brand-foreground-2-hover: #0f548c; + --color-brand-foreground-2-pressed: #0a2e4a; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #479ef5; + --color-brand-foreground-inverted-hover: #62abf5; + --color-brand-foreground-inverted-pressed: #479ef5; + --color-brand-foreground-on-light: #0f6cbd; + --color-brand-foreground-on-light-hover: #115ea3; + --color-brand-foreground-on-light-pressed: #0e4775; + --color-brand-foreground-on-light-selected: #0f548c; + --color-neutral-background-1: #ffffff; + --color-neutral-background-1-hover: #f5f5f5; + --color-neutral-background-1-pressed: #e0e0e0; + --color-neutral-background-1-selected: #ebebeb; + --color-neutral-background-2: #fafafa; + --color-neutral-background-2-hover: #f0f0f0; + --color-neutral-background-2-pressed: #dbdbdb; + --color-neutral-background-2-selected: #e6e6e6; + --color-neutral-background-3: #f5f5f5; + --color-neutral-background-3-hover: #ebebeb; + --color-neutral-background-3-pressed: #d6d6d6; + --color-neutral-background-3-selected: #e0e0e0; + --color-neutral-background-4: #f0f0f0; + --color-neutral-background-4-hover: #fafafa; + --color-neutral-background-4-pressed: #f5f5f5; + --color-neutral-background-4-selected: #ffffff; + --color-neutral-background-5: #ebebeb; + --color-neutral-background-5-hover: #f5f5f5; + --color-neutral-background-5-pressed: #f0f0f0; + --color-neutral-background-5-selected: #fafafa; + --color-neutral-background-6: #e6e6e6; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #ebebeb; + --color-neutral-background-7-pressed: #d6d6d6; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #fcfcfc; + --color-neutral-background-inverted: #292929; + --color-neutral-background-inverted-hover: #3d3d3d; + --color-neutral-background-inverted-pressed: #1f1f1f; + --color-neutral-background-inverted-selected: #383838; + --color-neutral-background-static: #333333; + --color-neutral-background-alpha: rgba(255, 255, 255, 0.5); + --color-neutral-background-alpha-2: rgba(255, 255, 255, 0.8); + --color-subtle-background: transparent; + --color-subtle-background-hover: #f5f5f5; + --color-subtle-background-pressed: #e0e0e0; + --color-subtle-background-selected: #ebebeb; + --color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7); + --color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #f0f0f0; + --color-neutral-background-disabled-2: #ffffff; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #e6e6e6; + --color-neutral-stencil-2: #fafafa; + --color-neutral-stencil-1-alpha: rgba(0, 0, 0, 0.1); + --color-neutral-stencil-2-alpha: rgba(0, 0, 0, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.4); + --color-scrollbar-overlay: rgba(0, 0, 0, 0.5); + --color-brand-background: #0f6cbd; + --color-brand-background-hover: #115ea3; + --color-brand-background-pressed: #0c3b5e; + --color-brand-background-selected: #0f548c; + --color-compound-brand-background: #0f6cbd; + --color-compound-brand-background-hover: #115ea3; + --color-compound-brand-background-pressed: #0f548c; + --color-brand-background-static: #0f6cbd; + --color-brand-background-2: #ebf3fc; + --color-brand-background-2-hover: #cfe4fa; + --color-brand-background-2-pressed: #96c6fa; + --color-brand-background-3-static: #0f548c; + --color-brand-background-4-static: #0c3b5e; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #ebf3fc; + --color-brand-background-inverted-pressed: #b4d6fa; + --color-brand-background-inverted-selected: #cfe4fa; + --color-neutral-card-background: #fafafa; + --color-neutral-card-background-hover: #ffffff; + --color-neutral-card-background-pressed: #f5f5f5; + --color-neutral-card-background-selected: #ebebeb; + --color-neutral-card-background-disabled: #f0f0f0; + --color-neutral-stroke-accessible: #616161; + --color-neutral-stroke-accessible-hover: #575757; + --color-neutral-stroke-accessible-pressed: #4d4d4d; + --color-neutral-stroke-accessible-selected: #0f6cbd; + --color-neutral-stroke-1: #d1d1d1; + --color-neutral-stroke-1-hover: #c7c7c7; + --color-neutral-stroke-1-pressed: #b3b3b3; + --color-neutral-stroke-1-selected: #bdbdbd; + --color-neutral-stroke-2: #e0e0e0; + --color-neutral-stroke-3: #f0f0f0; + --color-neutral-stroke-4: #ebebeb; + --color-neutral-stroke-4-hover: #e0e0e0; + --color-neutral-stroke-4-pressed: #d6d6d6; + --color-neutral-stroke-4-selected: #ebebeb; + --color-neutral-stroke-subtle: #e0e0e0; + --color-neutral-stroke-on-brand: #ffffff; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #0f6cbd; + --color-brand-stroke-2: #b4d6fa; + --color-brand-stroke-2-hover: #77b7f7; + --color-brand-stroke-2-pressed: #0f6cbd; + --color-brand-stroke-2-contrast: #b4d6fa; + --color-compound-brand-stroke: #0f6cbd; + --color-compound-brand-stroke-hover: #115ea3; + --color-compound-brand-stroke-pressed: #0f548c; + --color-neutral-stroke-disabled: #e0e0e0; + --color-neutral-stroke-disabled-2: #ebebeb; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(0, 0, 0, 0.05); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #ffffff; + --color-stroke-focus-2: #000000; + --color-neutral-shadow-ambient: rgba(0,0,0,0.12); + --color-neutral-shadow-key: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.06); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.07); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.20); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.24); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #fdf6f6; + --color-palette-red-background-2: #f1bbbc; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #d13438; + --color-palette-red-border-1: #f1bbbc; + --color-palette-red-border-2: #d13438; + --color-palette-red-foreground-1: #bc2f32; + --color-palette-red-foreground-2: #751d1f; + --color-palette-red-foreground-3: #d13438; + --color-palette-red-foreground-inverted: #dc5e62; + --color-palette-green-background-1: #f1faf1; + --color-palette-green-background-2: #9fd89f; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #107c10; + --color-palette-green-border-1: #9fd89f; + --color-palette-green-border-2: #107c10; + --color-palette-green-foreground-1: #0e700e; + --color-palette-green-foreground-2: #094509; + --color-palette-green-foreground-3: #107c10; + --color-palette-green-foreground-inverted: #359b35; + --color-palette-dark-orange-background-1: #fdf6f3; + --color-palette-dark-orange-background-2: #f4bfab; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #da3b01; + --color-palette-dark-orange-border-1: #f4bfab; + --color-palette-dark-orange-border-2: #da3b01; + --color-palette-dark-orange-foreground-1: #c43501; + --color-palette-dark-orange-foreground-2: #7a2101; + --color-palette-dark-orange-foreground-3: #da3b01; + --color-palette-yellow-background-1: #fffef5; + --color-palette-yellow-background-2: #fef7b2; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #fde300; + --color-palette-yellow-border-1: #fef7b2; + --color-palette-yellow-border-2: #fde300; + --color-palette-yellow-foreground-1: #817400; + --color-palette-yellow-foreground-2: #817400; + --color-palette-yellow-foreground-3: #fde300; + --color-palette-yellow-foreground-inverted: #fef7b2; + --color-palette-berry-background-1: #fdf5fc; + --color-palette-berry-background-2: #edbbe7; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #c239b3; + --color-palette-berry-border-1: #edbbe7; + --color-palette-berry-border-2: #c239b3; + --color-palette-berry-foreground-1: #af33a1; + --color-palette-berry-foreground-2: #6d2064; + --color-palette-berry-foreground-3: #c239b3; + --color-palette-marigold-background-1: #fefbf4; + --color-palette-marigold-background-2: #f9e2ae; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #eaa300; + --color-palette-marigold-border-1: #f9e2ae; + --color-palette-marigold-border-2: #eaa300; + --color-palette-marigold-foreground-1: #d39300; + --color-palette-marigold-foreground-2: #835b00; + --color-palette-marigold-foreground-3: #eaa300; + --color-palette-light-green-background-1: #f2fbf2; + --color-palette-light-green-background-2: #a7e3a5; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #13a10e; + --color-palette-light-green-border-1: #a7e3a5; + --color-palette-light-green-border-2: #13a10e; + --color-palette-light-green-foreground-1: #11910d; + --color-palette-light-green-foreground-2: #0b5a08; + --color-palette-light-green-foreground-3: #13a10e; + --color-palette-anchor-background-2: #bcc3c7; + --color-palette-anchor-border-active: #394146; + --color-palette-anchor-foreground-2: #202427; + --color-palette-beige-background-2: #d7d4d4; + --color-palette-beige-border-active: #7a7574; + --color-palette-beige-foreground-2: #444241; + --color-palette-blue-background-2: #a9d3f2; + --color-palette-blue-border-active: #0078d4; + --color-palette-blue-foreground-2: #004377; + --color-palette-brass-background-2: #e0cea2; + --color-palette-brass-border-active: #986f0b; + --color-palette-brass-foreground-2: #553e06; + --color-palette-brown-background-2: #ddc3b0; + --color-palette-brown-border-active: #8e562e; + --color-palette-brown-foreground-2: #50301a; + --color-palette-cornflower-background-2: #c8d1fa; + --color-palette-cornflower-border-active: #4f6bed; + --color-palette-cornflower-foreground-2: #2c3c85; + --color-palette-cranberry-background-2: #eeacb2; + --color-palette-cranberry-border-active: #c50f1f; + --color-palette-cranberry-foreground-2: #6e0811; + --color-palette-dark-green-background-2: #9ad29a; + --color-palette-dark-green-border-active: #0b6a0b; + --color-palette-dark-green-foreground-2: #063b06; + --color-palette-dark-red-background-2: #d69ca5; + --color-palette-dark-red-border-active: #750b1c; + --color-palette-dark-red-foreground-2: #420610; + --color-palette-forest-background-2: #bdd99b; + --color-palette-forest-border-active: #498205; + --color-palette-forest-foreground-2: #294903; + --color-palette-gold-background-2: #ecdfa5; + --color-palette-gold-border-active: #c19c00; + --color-palette-gold-foreground-2: #6c5700; + --color-palette-grape-background-2: #d9a7e0; + --color-palette-grape-border-active: #881798; + --color-palette-grape-foreground-2: #4c0d55; + --color-palette-lavender-background-2: #d2ccf8; + --color-palette-lavender-border-active: #7160e8; + --color-palette-lavender-foreground-2: #3f3682; + --color-palette-light-teal-background-2: #a6e9ed; + --color-palette-light-teal-border-active: #00b7c3; + --color-palette-light-teal-foreground-2: #00666d; + --color-palette-lilac-background-2: #e6bfed; + --color-palette-lilac-border-active: #b146c2; + --color-palette-lilac-foreground-2: #63276d; + --color-palette-magenta-background-2: #eca5d1; + --color-palette-magenta-border-active: #bf0077; + --color-palette-magenta-foreground-2: #6b0043; + --color-palette-mink-background-2: #cecccb; + --color-palette-mink-border-active: #5d5a58; + --color-palette-mink-foreground-2: #343231; + --color-palette-navy-background-2: #a3b2e8; + --color-palette-navy-border-active: #0027b4; + --color-palette-navy-foreground-2: #001665; + --color-palette-peach-background-2: #ffddb3; + --color-palette-peach-border-active: #ff8c00; + --color-palette-peach-foreground-2: #8f4e00; + --color-palette-pink-background-2: #f7c0e3; + --color-palette-pink-border-active: #e43ba6; + --color-palette-pink-foreground-2: #80215d; + --color-palette-platinum-background-2: #cdd6d8; + --color-palette-platinum-border-active: #69797e; + --color-palette-platinum-foreground-2: #3b4447; + --color-palette-plum-background-2: #d696c0; + --color-palette-plum-border-active: #77004d; + --color-palette-plum-foreground-2: #43002b; + --color-palette-pumpkin-background-2: #efc4ad; + --color-palette-pumpkin-border-active: #ca5010; + --color-palette-pumpkin-foreground-2: #712d09; + --color-palette-purple-background-2: #c6b1de; + --color-palette-purple-border-active: #5c2e91; + --color-palette-purple-foreground-2: #341a51; + --color-palette-royal-blue-background-2: #9abfdc; + --color-palette-royal-blue-border-active: #004e8c; + --color-palette-royal-blue-foreground-2: #002c4e; + --color-palette-seafoam-background-2: #a8f0cd; + --color-palette-seafoam-border-active: #00cc6a; + --color-palette-seafoam-foreground-2: #00723b; + --color-palette-steel-background-2: #94c8d4; + --color-palette-steel-border-active: #005b70; + --color-palette-steel-foreground-2: #00333f; + --color-palette-teal-background-2: #9bd9db; + --color-palette-teal-border-active: #038387; + --color-palette-teal-foreground-2: #02494c; + --color-status-success-background-1: #f1faf1; + --color-status-success-background-2: #9fd89f; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #0e700e; + --color-status-success-foreground-2: #094509; + --color-status-success-foreground-3: #107c10; + --color-status-success-foreground-inverted: #54b054; + --color-status-success-border-active: #107c10; + --color-status-success-border-1: #9fd89f; + --color-status-success-border-2: #107c10; + --color-status-warning-background-1: #fff9f5; + --color-status-warning-background-2: #fdcfb4; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #bc4b09; + --color-status-warning-foreground-2: #8a3707; + --color-status-warning-foreground-3: #bc4b09; + --color-status-warning-foreground-inverted: #faa06b; + --color-status-warning-border-active: #f7630c; + --color-status-warning-border-1: #fdcfb4; + --color-status-warning-border-2: #bc4b09; + --color-status-danger-background-1: #fdf3f4; + --color-status-danger-background-2: #eeacb2; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #b10e1c; + --color-status-danger-foreground-2: #6e0811; + --color-status-danger-foreground-3: #c50f1f; + --color-status-danger-foreground-inverted: #dc626d; + --color-status-danger-border-active: #c50f1f; + --color-status-danger-border-1: #eeacb2; + --color-status-danger-border-2: #c50f1f; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); + --shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); + --shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); + --shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); + --shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14); + --shadow-64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} + +/* webDarkTheme — 433 tokens */ +@layer fui.theme { + .fui-theme-web-dark { + --color-neutral-foreground-1: #ffffff; + --color-neutral-foreground-1-hover: #ffffff; + --color-neutral-foreground-1-pressed: #ffffff; + --color-neutral-foreground-1-selected: #ffffff; + --color-neutral-foreground-2: #d6d6d6; + --color-neutral-foreground-2-hover: #ffffff; + --color-neutral-foreground-2-pressed: #ffffff; + --color-neutral-foreground-2-selected: #ffffff; + --color-neutral-foreground-2-brand-hover: #479ef5; + --color-neutral-foreground-2-brand-pressed: #2886de; + --color-neutral-foreground-2-brand-selected: #479ef5; + --color-neutral-foreground-3: #adadad; + --color-neutral-foreground-3-hover: #d6d6d6; + --color-neutral-foreground-3-pressed: #d6d6d6; + --color-neutral-foreground-3-selected: #d6d6d6; + --color-neutral-foreground-3-brand-hover: #479ef5; + --color-neutral-foreground-3-brand-pressed: #2886de; + --color-neutral-foreground-3-brand-selected: #479ef5; + --color-neutral-foreground-4: #999999; + --color-neutral-foreground-5: #adadad; + --color-neutral-foreground-5-hover: #ffffff; + --color-neutral-foreground-5-pressed: #ffffff; + --color-neutral-foreground-5-selected: #ffffff; + --color-neutral-foreground-disabled: #5c5c5c; + --color-brand-foreground-link: #479ef5; + --color-brand-foreground-link-hover: #62abf5; + --color-brand-foreground-link-pressed: #2886de; + --color-brand-foreground-link-selected: #479ef5; + --color-neutral-foreground-2-link: #d6d6d6; + --color-neutral-foreground-2-link-hover: #ffffff; + --color-neutral-foreground-2-link-pressed: #ffffff; + --color-neutral-foreground-2-link-selected: #ffffff; + --color-compound-brand-foreground-1: #479ef5; + --color-compound-brand-foreground-1-hover: #62abf5; + --color-compound-brand-foreground-1-pressed: #2886de; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #242424; + --color-neutral-foreground-inverted-hover: #242424; + --color-neutral-foreground-inverted-pressed: #242424; + --color-neutral-foreground-inverted-selected: #242424; + --color-neutral-foreground-inverted-2: #242424; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #479ef5; + --color-brand-foreground-2: #62abf5; + --color-brand-foreground-2-hover: #96c6fa; + --color-brand-foreground-2-pressed: #ebf3fc; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #0f6cbd; + --color-brand-foreground-inverted-hover: #115ea3; + --color-brand-foreground-inverted-pressed: #0f548c; + --color-brand-foreground-on-light: #0f6cbd; + --color-brand-foreground-on-light-hover: #115ea3; + --color-brand-foreground-on-light-pressed: #0e4775; + --color-brand-foreground-on-light-selected: #0f548c; + --color-neutral-background-1: #292929; + --color-neutral-background-1-hover: #3d3d3d; + --color-neutral-background-1-pressed: #1f1f1f; + --color-neutral-background-1-selected: #383838; + --color-neutral-background-2: #1f1f1f; + --color-neutral-background-2-hover: #333333; + --color-neutral-background-2-pressed: #141414; + --color-neutral-background-2-selected: #2e2e2e; + --color-neutral-background-3: #141414; + --color-neutral-background-3-hover: #292929; + --color-neutral-background-3-pressed: #0a0a0a; + --color-neutral-background-3-selected: #242424; + --color-neutral-background-4: #0a0a0a; + --color-neutral-background-4-hover: #1f1f1f; + --color-neutral-background-4-pressed: #000000; + --color-neutral-background-4-selected: #1a1a1a; + --color-neutral-background-5: #000000; + --color-neutral-background-5-hover: #141414; + --color-neutral-background-5-pressed: #050505; + --color-neutral-background-5-selected: #0f0f0f; + --color-neutral-background-6: #333333; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #1a1a1a; + --color-neutral-background-7-pressed: #0a0a0a; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #292929; + --color-neutral-background-inverted: #ffffff; + --color-neutral-background-inverted-hover: #f5f5f5; + --color-neutral-background-inverted-pressed: #e0e0e0; + --color-neutral-background-inverted-selected: #ebebeb; + --color-neutral-background-static: #3d3d3d; + --color-neutral-background-alpha: rgba(26, 26, 26, 0.5); + --color-neutral-background-alpha-2: rgba(31, 31, 31, 0.7); + --color-subtle-background: transparent; + --color-subtle-background-hover: #383838; + --color-subtle-background-pressed: #2e2e2e; + --color-subtle-background-selected: #333333; + --color-subtle-background-light-alpha-hover: rgba(36, 36, 36, 0.8); + --color-subtle-background-light-alpha-pressed: rgba(36, 36, 36, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #141414; + --color-neutral-background-disabled-2: #292929; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #575757; + --color-neutral-stencil-2: #333333; + --color-neutral-stencil-1-alpha: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-2-alpha: rgba(255, 255, 255, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.5); + --color-scrollbar-overlay: rgba(255, 255, 255, 0.6); + --color-brand-background: #115ea3; + --color-brand-background-hover: #0f6cbd; + --color-brand-background-pressed: #0c3b5e; + --color-brand-background-selected: #0f548c; + --color-compound-brand-background: #479ef5; + --color-compound-brand-background-hover: #62abf5; + --color-compound-brand-background-pressed: #2886de; + --color-brand-background-static: #0f6cbd; + --color-brand-background-2: #082338; + --color-brand-background-2-hover: #0c3b5e; + --color-brand-background-2-pressed: #061724; + --color-brand-background-3-static: #0f548c; + --color-brand-background-4-static: #0c3b5e; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #ebf3fc; + --color-brand-background-inverted-pressed: #b4d6fa; + --color-brand-background-inverted-selected: #cfe4fa; + --color-neutral-card-background: #333333; + --color-neutral-card-background-hover: #3d3d3d; + --color-neutral-card-background-pressed: #2e2e2e; + --color-neutral-card-background-selected: #383838; + --color-neutral-card-background-disabled: #141414; + --color-neutral-stroke-accessible: #adadad; + --color-neutral-stroke-accessible-hover: #bdbdbd; + --color-neutral-stroke-accessible-pressed: #b3b3b3; + --color-neutral-stroke-accessible-selected: #479ef5; + --color-neutral-stroke-1: #666666; + --color-neutral-stroke-1-hover: #757575; + --color-neutral-stroke-1-pressed: #6b6b6b; + --color-neutral-stroke-1-selected: #707070; + --color-neutral-stroke-2: #525252; + --color-neutral-stroke-3: #3d3d3d; + --color-neutral-stroke-4: #3d3d3d; + --color-neutral-stroke-4-hover: #2e2e2e; + --color-neutral-stroke-4-pressed: #242424; + --color-neutral-stroke-4-selected: #3d3d3d; + --color-neutral-stroke-subtle: #0a0a0a; + --color-neutral-stroke-on-brand: #292929; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #479ef5; + --color-brand-stroke-2: #0e4775; + --color-brand-stroke-2-hover: #0e4775; + --color-brand-stroke-2-pressed: #0a2e4a; + --color-brand-stroke-2-contrast: #0e4775; + --color-compound-brand-stroke: #479ef5; + --color-compound-brand-stroke-hover: #62abf5; + --color-compound-brand-stroke-pressed: #2886de; + --color-neutral-stroke-disabled: #424242; + --color-neutral-stroke-disabled-2: #3d3d3d; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(255, 255, 255, 0.1); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #000000; + --color-stroke-focus-2: #ffffff; + --color-neutral-shadow-ambient: rgba(0,0,0,0.24); + --color-neutral-shadow-key: rgba(0,0,0,0.28); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.12); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.40); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.48); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #3f1011; + --color-palette-red-background-2: #751d1f; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #e37d80; + --color-palette-red-border-1: #d13438; + --color-palette-red-border-2: #e37d80; + --color-palette-red-foreground-1: #e37d80; + --color-palette-red-foreground-2: #f1bbbc; + --color-palette-red-foreground-3: #e37d80; + --color-palette-red-foreground-inverted: #d13438; + --color-palette-green-background-1: #052505; + --color-palette-green-background-2: #094509; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #54b054; + --color-palette-green-border-1: #107c10; + --color-palette-green-border-2: #9fd89f; + --color-palette-green-foreground-1: #54b054; + --color-palette-green-foreground-2: #9fd89f; + --color-palette-green-foreground-3: #9fd89f; + --color-palette-green-foreground-inverted: #107c10; + --color-palette-dark-orange-background-1: #411200; + --color-palette-dark-orange-background-2: #7a2101; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #e9835e; + --color-palette-dark-orange-border-1: #da3b01; + --color-palette-dark-orange-border-2: #e9835e; + --color-palette-dark-orange-foreground-1: #e9835e; + --color-palette-dark-orange-foreground-2: #f4bfab; + --color-palette-dark-orange-foreground-3: #e9835e; + --color-palette-yellow-background-1: #4c4400; + --color-palette-yellow-background-2: #817400; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #feee66; + --color-palette-yellow-border-1: #fde300; + --color-palette-yellow-border-2: #fdea3d; + --color-palette-yellow-foreground-1: #feee66; + --color-palette-yellow-foreground-2: #fef7b2; + --color-palette-yellow-foreground-3: #fdea3d; + --color-palette-yellow-foreground-inverted: #817400; + --color-palette-berry-background-1: #3a1136; + --color-palette-berry-background-2: #6d2064; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #da7ed0; + --color-palette-berry-border-1: #c239b3; + --color-palette-berry-border-2: #d161c4; + --color-palette-berry-foreground-1: #da7ed0; + --color-palette-berry-foreground-2: #edbbe7; + --color-palette-berry-foreground-3: #d161c4; + --color-palette-marigold-background-1: #463100; + --color-palette-marigold-background-2: #835b00; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #f2c661; + --color-palette-marigold-border-1: #eaa300; + --color-palette-marigold-border-2: #efb839; + --color-palette-marigold-foreground-1: #f2c661; + --color-palette-marigold-foreground-2: #f9e2ae; + --color-palette-marigold-foreground-3: #efb839; + --color-palette-light-green-background-1: #063004; + --color-palette-light-green-background-2: #0b5a08; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #5ec75a; + --color-palette-light-green-border-1: #13a10e; + --color-palette-light-green-border-2: #3db838; + --color-palette-light-green-foreground-1: #5ec75a; + --color-palette-light-green-foreground-2: #a7e3a5; + --color-palette-light-green-foreground-3: #3db838; + --color-palette-anchor-background-2: #202427; + --color-palette-anchor-border-active: #808a90; + --color-palette-anchor-foreground-2: #bcc3c7; + --color-palette-beige-background-2: #444241; + --color-palette-beige-border-active: #afabaa; + --color-palette-beige-foreground-2: #d7d4d4; + --color-palette-blue-background-2: #004377; + --color-palette-blue-border-active: #5caae5; + --color-palette-blue-foreground-2: #a9d3f2; + --color-palette-brass-background-2: #553e06; + --color-palette-brass-border-active: #c1a256; + --color-palette-brass-foreground-2: #e0cea2; + --color-palette-brown-background-2: #50301a; + --color-palette-brown-border-active: #bb8f6f; + --color-palette-brown-foreground-2: #ddc3b0; + --color-palette-cornflower-background-2: #2c3c85; + --color-palette-cornflower-border-active: #93a4f4; + --color-palette-cornflower-foreground-2: #c8d1fa; + --color-palette-cranberry-background-2: #6e0811; + --color-palette-cranberry-border-active: #dc626d; + --color-palette-cranberry-foreground-2: #eeacb2; + --color-palette-dark-green-background-2: #063b06; + --color-palette-dark-green-border-active: #4da64d; + --color-palette-dark-green-foreground-2: #9ad29a; + --color-palette-dark-red-background-2: #590815; + --color-palette-dark-red-border-active: #ac4f5e; + --color-palette-dark-red-foreground-2: #d69ca5; + --color-palette-forest-background-2: #294903; + --color-palette-forest-border-active: #85b44c; + --color-palette-forest-foreground-2: #bdd99b; + --color-palette-gold-background-2: #6c5700; + --color-palette-gold-border-active: #dac157; + --color-palette-gold-foreground-2: #ecdfa5; + --color-palette-grape-background-2: #4c0d55; + --color-palette-grape-border-active: #b55fc1; + --color-palette-grape-foreground-2: #d9a7e0; + --color-palette-lavender-background-2: #3f3682; + --color-palette-lavender-border-active: #a79cf1; + --color-palette-lavender-foreground-2: #d2ccf8; + --color-palette-light-teal-background-2: #00666d; + --color-palette-light-teal-border-active: #58d3db; + --color-palette-light-teal-foreground-2: #a6e9ed; + --color-palette-lilac-background-2: #63276d; + --color-palette-lilac-border-active: #cf87da; + --color-palette-lilac-foreground-2: #e6bfed; + --color-palette-magenta-background-2: #6b0043; + --color-palette-magenta-border-active: #d957a8; + --color-palette-magenta-foreground-2: #eca5d1; + --color-palette-mink-background-2: #343231; + --color-palette-mink-border-active: #9e9b99; + --color-palette-mink-foreground-2: #cecccb; + --color-palette-navy-background-2: #001665; + --color-palette-navy-border-active: #546fd2; + --color-palette-navy-foreground-2: #a3b2e8; + --color-palette-peach-background-2: #8f4e00; + --color-palette-peach-border-active: #ffba66; + --color-palette-peach-foreground-2: #ffddb3; + --color-palette-pink-background-2: #80215d; + --color-palette-pink-border-active: #ef85c8; + --color-palette-pink-foreground-2: #f7c0e3; + --color-palette-platinum-background-2: #3b4447; + --color-palette-platinum-border-active: #a0adb2; + --color-palette-platinum-foreground-2: #cdd6d8; + --color-palette-plum-background-2: #5a003b; + --color-palette-plum-border-active: #ad4589; + --color-palette-plum-foreground-2: #d696c0; + --color-palette-pumpkin-background-2: #712d09; + --color-palette-pumpkin-border-active: #df8e64; + --color-palette-pumpkin-foreground-2: #efc4ad; + --color-palette-purple-background-2: #341a51; + --color-palette-purple-border-active: #9470bd; + --color-palette-purple-foreground-2: #c6b1de; + --color-palette-royal-blue-background-2: #002c4e; + --color-palette-royal-blue-border-active: #4a89ba; + --color-palette-royal-blue-foreground-2: #9abfdc; + --color-palette-seafoam-background-2: #00723b; + --color-palette-seafoam-border-active: #5ae0a0; + --color-palette-seafoam-foreground-2: #a8f0cd; + --color-palette-steel-background-2: #00333f; + --color-palette-steel-border-active: #4496a9; + --color-palette-steel-foreground-2: #94c8d4; + --color-palette-teal-background-2: #02494c; + --color-palette-teal-border-active: #4cb4b7; + --color-palette-teal-foreground-2: #9bd9db; + --color-status-success-background-1: #052505; + --color-status-success-background-2: #094509; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #54b054; + --color-status-success-foreground-2: #9fd89f; + --color-status-success-foreground-3: #9fd89f; + --color-status-success-foreground-inverted: #0e700e; + --color-status-success-border-active: #54b054; + --color-status-success-border-1: #107c10; + --color-status-success-border-2: #9fd89f; + --color-status-warning-background-1: #4a1e04; + --color-status-warning-background-2: #8a3707; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #faa06b; + --color-status-warning-foreground-2: #fdcfb4; + --color-status-warning-foreground-3: #f98845; + --color-status-warning-foreground-inverted: #bc4b09; + --color-status-warning-border-active: #faa06b; + --color-status-warning-border-1: #f7630c; + --color-status-warning-border-2: #f98845; + --color-status-danger-background-1: #3b0509; + --color-status-danger-background-2: #6e0811; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #dc626d; + --color-status-danger-foreground-2: #eeacb2; + --color-status-danger-foreground-3: #eeacb2; + --color-status-danger-foreground-inverted: #b10e1c; + --color-status-danger-border-active: #dc626d; + --color-status-danger-border-1: #c50f1f; + --color-status-danger-border-2: #dc626d; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); + --shadow-4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28); + --shadow-8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); + --shadow-16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); + --shadow-28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28); + --shadow-64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} + +/* teamsLightTheme — 433 tokens */ +@layer fui.theme { + .fui-theme-teams-light { + --color-neutral-foreground-1: #242424; + --color-neutral-foreground-1-hover: #242424; + --color-neutral-foreground-1-pressed: #242424; + --color-neutral-foreground-1-selected: #242424; + --color-neutral-foreground-2: #424242; + --color-neutral-foreground-2-hover: #242424; + --color-neutral-foreground-2-pressed: #242424; + --color-neutral-foreground-2-selected: #242424; + --color-neutral-foreground-2-brand-hover: #5b5fc7; + --color-neutral-foreground-2-brand-pressed: #4f52b2; + --color-neutral-foreground-2-brand-selected: #5b5fc7; + --color-neutral-foreground-3: #616161; + --color-neutral-foreground-3-hover: #424242; + --color-neutral-foreground-3-pressed: #424242; + --color-neutral-foreground-3-selected: #424242; + --color-neutral-foreground-3-brand-hover: #5b5fc7; + --color-neutral-foreground-3-brand-pressed: #4f52b2; + --color-neutral-foreground-3-brand-selected: #5b5fc7; + --color-neutral-foreground-4: #707070; + --color-neutral-foreground-5: #616161; + --color-neutral-foreground-5-hover: #242424; + --color-neutral-foreground-5-pressed: #242424; + --color-neutral-foreground-5-selected: #242424; + --color-neutral-foreground-disabled: #bdbdbd; + --color-brand-foreground-link: #4f52b2; + --color-brand-foreground-link-hover: #444791; + --color-brand-foreground-link-pressed: #383966; + --color-brand-foreground-link-selected: #4f52b2; + --color-neutral-foreground-2-link: #424242; + --color-neutral-foreground-2-link-hover: #242424; + --color-neutral-foreground-2-link-pressed: #242424; + --color-neutral-foreground-2-link-selected: #242424; + --color-compound-brand-foreground-1: #5b5fc7; + --color-compound-brand-foreground-1-hover: #4f52b2; + --color-compound-brand-foreground-1-pressed: #444791; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #ffffff; + --color-neutral-foreground-inverted-hover: #ffffff; + --color-neutral-foreground-inverted-pressed: #ffffff; + --color-neutral-foreground-inverted-selected: #ffffff; + --color-neutral-foreground-inverted-2: #ffffff; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #5b5fc7; + --color-brand-foreground-2: #4f52b2; + --color-brand-foreground-2-hover: #444791; + --color-brand-foreground-2-pressed: #333357; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #7f85f5; + --color-brand-foreground-inverted-hover: #9299f7; + --color-brand-foreground-inverted-pressed: #7f85f5; + --color-brand-foreground-on-light: #5b5fc7; + --color-brand-foreground-on-light-hover: #4f52b2; + --color-brand-foreground-on-light-pressed: #3d3e78; + --color-brand-foreground-on-light-selected: #444791; + --color-neutral-background-1: #ffffff; + --color-neutral-background-1-hover: #f5f5f5; + --color-neutral-background-1-pressed: #e0e0e0; + --color-neutral-background-1-selected: #ebebeb; + --color-neutral-background-2: #fafafa; + --color-neutral-background-2-hover: #f0f0f0; + --color-neutral-background-2-pressed: #dbdbdb; + --color-neutral-background-2-selected: #e6e6e6; + --color-neutral-background-3: #f5f5f5; + --color-neutral-background-3-hover: #ebebeb; + --color-neutral-background-3-pressed: #d6d6d6; + --color-neutral-background-3-selected: #e0e0e0; + --color-neutral-background-4: #f0f0f0; + --color-neutral-background-4-hover: #fafafa; + --color-neutral-background-4-pressed: #f5f5f5; + --color-neutral-background-4-selected: #ffffff; + --color-neutral-background-5: #ebebeb; + --color-neutral-background-5-hover: #f5f5f5; + --color-neutral-background-5-pressed: #f0f0f0; + --color-neutral-background-5-selected: #fafafa; + --color-neutral-background-6: #e6e6e6; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #ebebeb; + --color-neutral-background-7-pressed: #d6d6d6; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #fcfcfc; + --color-neutral-background-inverted: #292929; + --color-neutral-background-inverted-hover: #3d3d3d; + --color-neutral-background-inverted-pressed: #1f1f1f; + --color-neutral-background-inverted-selected: #383838; + --color-neutral-background-static: #333333; + --color-neutral-background-alpha: rgba(255, 255, 255, 0.5); + --color-neutral-background-alpha-2: rgba(255, 255, 255, 0.8); + --color-subtle-background: transparent; + --color-subtle-background-hover: #f5f5f5; + --color-subtle-background-pressed: #e0e0e0; + --color-subtle-background-selected: #ebebeb; + --color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7); + --color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #f0f0f0; + --color-neutral-background-disabled-2: #ffffff; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #e6e6e6; + --color-neutral-stencil-2: #fafafa; + --color-neutral-stencil-1-alpha: rgba(0, 0, 0, 0.1); + --color-neutral-stencil-2-alpha: rgba(0, 0, 0, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.4); + --color-scrollbar-overlay: rgba(0, 0, 0, 0.5); + --color-brand-background: #5b5fc7; + --color-brand-background-hover: #4f52b2; + --color-brand-background-pressed: #383966; + --color-brand-background-selected: #444791; + --color-compound-brand-background: #5b5fc7; + --color-compound-brand-background-hover: #4f52b2; + --color-compound-brand-background-pressed: #444791; + --color-brand-background-static: #5b5fc7; + --color-brand-background-2: #e8ebfa; + --color-brand-background-2-hover: #dce0fa; + --color-brand-background-2-pressed: #b6bcfa; + --color-brand-background-3-static: #444791; + --color-brand-background-4-static: #383966; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #e8ebfa; + --color-brand-background-inverted-pressed: #c5cbfa; + --color-brand-background-inverted-selected: #dce0fa; + --color-neutral-card-background: #fafafa; + --color-neutral-card-background-hover: #ffffff; + --color-neutral-card-background-pressed: #f5f5f5; + --color-neutral-card-background-selected: #ebebeb; + --color-neutral-card-background-disabled: #f0f0f0; + --color-neutral-stroke-accessible: #616161; + --color-neutral-stroke-accessible-hover: #575757; + --color-neutral-stroke-accessible-pressed: #4d4d4d; + --color-neutral-stroke-accessible-selected: #5b5fc7; + --color-neutral-stroke-1: #d1d1d1; + --color-neutral-stroke-1-hover: #c7c7c7; + --color-neutral-stroke-1-pressed: #b3b3b3; + --color-neutral-stroke-1-selected: #bdbdbd; + --color-neutral-stroke-2: #e0e0e0; + --color-neutral-stroke-3: #f0f0f0; + --color-neutral-stroke-4: #ebebeb; + --color-neutral-stroke-4-hover: #e0e0e0; + --color-neutral-stroke-4-pressed: #d6d6d6; + --color-neutral-stroke-4-selected: #ebebeb; + --color-neutral-stroke-subtle: #e0e0e0; + --color-neutral-stroke-on-brand: #ffffff; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #5b5fc7; + --color-brand-stroke-2: #c5cbfa; + --color-brand-stroke-2-hover: #aab1fa; + --color-brand-stroke-2-pressed: #5b5fc7; + --color-brand-stroke-2-contrast: #c5cbfa; + --color-compound-brand-stroke: #5b5fc7; + --color-compound-brand-stroke-hover: #4f52b2; + --color-compound-brand-stroke-pressed: #444791; + --color-neutral-stroke-disabled: #e0e0e0; + --color-neutral-stroke-disabled-2: #ebebeb; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(0, 0, 0, 0.05); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #ffffff; + --color-stroke-focus-2: #000000; + --color-neutral-shadow-ambient: rgba(0,0,0,0.12); + --color-neutral-shadow-key: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.06); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.07); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.20); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.24); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #fdf6f6; + --color-palette-red-background-2: #f1bbbc; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #d13438; + --color-palette-red-border-1: #f1bbbc; + --color-palette-red-border-2: #d13438; + --color-palette-red-foreground-1: #bc2f32; + --color-palette-red-foreground-2: #751d1f; + --color-palette-red-foreground-3: #d13438; + --color-palette-red-foreground-inverted: #dc5e62; + --color-palette-green-background-1: #f1faf1; + --color-palette-green-background-2: #9fd89f; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #107c10; + --color-palette-green-border-1: #9fd89f; + --color-palette-green-border-2: #107c10; + --color-palette-green-foreground-1: #0e700e; + --color-palette-green-foreground-2: #094509; + --color-palette-green-foreground-3: #107c10; + --color-palette-green-foreground-inverted: #359b35; + --color-palette-dark-orange-background-1: #fdf6f3; + --color-palette-dark-orange-background-2: #f4bfab; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #da3b01; + --color-palette-dark-orange-border-1: #f4bfab; + --color-palette-dark-orange-border-2: #da3b01; + --color-palette-dark-orange-foreground-1: #c43501; + --color-palette-dark-orange-foreground-2: #7a2101; + --color-palette-dark-orange-foreground-3: #da3b01; + --color-palette-yellow-background-1: #fffef5; + --color-palette-yellow-background-2: #fef7b2; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #fde300; + --color-palette-yellow-border-1: #fef7b2; + --color-palette-yellow-border-2: #fde300; + --color-palette-yellow-foreground-1: #817400; + --color-palette-yellow-foreground-2: #817400; + --color-palette-yellow-foreground-3: #fde300; + --color-palette-yellow-foreground-inverted: #fef7b2; + --color-palette-berry-background-1: #fdf5fc; + --color-palette-berry-background-2: #edbbe7; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #c239b3; + --color-palette-berry-border-1: #edbbe7; + --color-palette-berry-border-2: #c239b3; + --color-palette-berry-foreground-1: #af33a1; + --color-palette-berry-foreground-2: #6d2064; + --color-palette-berry-foreground-3: #c239b3; + --color-palette-marigold-background-1: #fefbf4; + --color-palette-marigold-background-2: #f9e2ae; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #eaa300; + --color-palette-marigold-border-1: #f9e2ae; + --color-palette-marigold-border-2: #eaa300; + --color-palette-marigold-foreground-1: #d39300; + --color-palette-marigold-foreground-2: #835b00; + --color-palette-marigold-foreground-3: #eaa300; + --color-palette-light-green-background-1: #f2fbf2; + --color-palette-light-green-background-2: #a7e3a5; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #13a10e; + --color-palette-light-green-border-1: #a7e3a5; + --color-palette-light-green-border-2: #13a10e; + --color-palette-light-green-foreground-1: #11910d; + --color-palette-light-green-foreground-2: #0b5a08; + --color-palette-light-green-foreground-3: #13a10e; + --color-palette-anchor-background-2: #bcc3c7; + --color-palette-anchor-border-active: #394146; + --color-palette-anchor-foreground-2: #202427; + --color-palette-beige-background-2: #d7d4d4; + --color-palette-beige-border-active: #7a7574; + --color-palette-beige-foreground-2: #444241; + --color-palette-blue-background-2: #a9d3f2; + --color-palette-blue-border-active: #0078d4; + --color-palette-blue-foreground-2: #004377; + --color-palette-brass-background-2: #e0cea2; + --color-palette-brass-border-active: #986f0b; + --color-palette-brass-foreground-2: #553e06; + --color-palette-brown-background-2: #ddc3b0; + --color-palette-brown-border-active: #8e562e; + --color-palette-brown-foreground-2: #50301a; + --color-palette-cornflower-background-2: #c8d1fa; + --color-palette-cornflower-border-active: #4f6bed; + --color-palette-cornflower-foreground-2: #2c3c85; + --color-palette-cranberry-background-2: #eeacb2; + --color-palette-cranberry-border-active: #c50f1f; + --color-palette-cranberry-foreground-2: #6e0811; + --color-palette-dark-green-background-2: #9ad29a; + --color-palette-dark-green-border-active: #0b6a0b; + --color-palette-dark-green-foreground-2: #063b06; + --color-palette-dark-red-background-2: #d69ca5; + --color-palette-dark-red-border-active: #750b1c; + --color-palette-dark-red-foreground-2: #420610; + --color-palette-forest-background-2: #bdd99b; + --color-palette-forest-border-active: #498205; + --color-palette-forest-foreground-2: #294903; + --color-palette-gold-background-2: #ecdfa5; + --color-palette-gold-border-active: #c19c00; + --color-palette-gold-foreground-2: #6c5700; + --color-palette-grape-background-2: #d9a7e0; + --color-palette-grape-border-active: #881798; + --color-palette-grape-foreground-2: #4c0d55; + --color-palette-lavender-background-2: #d2ccf8; + --color-palette-lavender-border-active: #7160e8; + --color-palette-lavender-foreground-2: #3f3682; + --color-palette-light-teal-background-2: #a6e9ed; + --color-palette-light-teal-border-active: #00b7c3; + --color-palette-light-teal-foreground-2: #00666d; + --color-palette-lilac-background-2: #e6bfed; + --color-palette-lilac-border-active: #b146c2; + --color-palette-lilac-foreground-2: #63276d; + --color-palette-magenta-background-2: #eca5d1; + --color-palette-magenta-border-active: #bf0077; + --color-palette-magenta-foreground-2: #6b0043; + --color-palette-mink-background-2: #cecccb; + --color-palette-mink-border-active: #5d5a58; + --color-palette-mink-foreground-2: #343231; + --color-palette-navy-background-2: #a3b2e8; + --color-palette-navy-border-active: #0027b4; + --color-palette-navy-foreground-2: #001665; + --color-palette-peach-background-2: #ffddb3; + --color-palette-peach-border-active: #ff8c00; + --color-palette-peach-foreground-2: #8f4e00; + --color-palette-pink-background-2: #f7c0e3; + --color-palette-pink-border-active: #e43ba6; + --color-palette-pink-foreground-2: #80215d; + --color-palette-platinum-background-2: #cdd6d8; + --color-palette-platinum-border-active: #69797e; + --color-palette-platinum-foreground-2: #3b4447; + --color-palette-plum-background-2: #d696c0; + --color-palette-plum-border-active: #77004d; + --color-palette-plum-foreground-2: #43002b; + --color-palette-pumpkin-background-2: #efc4ad; + --color-palette-pumpkin-border-active: #ca5010; + --color-palette-pumpkin-foreground-2: #712d09; + --color-palette-purple-background-2: #c6b1de; + --color-palette-purple-border-active: #5c2e91; + --color-palette-purple-foreground-2: #341a51; + --color-palette-royal-blue-background-2: #9abfdc; + --color-palette-royal-blue-border-active: #004e8c; + --color-palette-royal-blue-foreground-2: #002c4e; + --color-palette-seafoam-background-2: #a8f0cd; + --color-palette-seafoam-border-active: #00cc6a; + --color-palette-seafoam-foreground-2: #00723b; + --color-palette-steel-background-2: #94c8d4; + --color-palette-steel-border-active: #005b70; + --color-palette-steel-foreground-2: #00333f; + --color-palette-teal-background-2: #9bd9db; + --color-palette-teal-border-active: #038387; + --color-palette-teal-foreground-2: #02494c; + --color-status-success-background-1: #f1faf1; + --color-status-success-background-2: #9fd89f; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #0e700e; + --color-status-success-foreground-2: #094509; + --color-status-success-foreground-3: #107c10; + --color-status-success-foreground-inverted: #54b054; + --color-status-success-border-active: #107c10; + --color-status-success-border-1: #9fd89f; + --color-status-success-border-2: #107c10; + --color-status-warning-background-1: #fff9f5; + --color-status-warning-background-2: #fdcfb4; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #bc4b09; + --color-status-warning-foreground-2: #8a3707; + --color-status-warning-foreground-3: #bc4b09; + --color-status-warning-foreground-inverted: #faa06b; + --color-status-warning-border-active: #f7630c; + --color-status-warning-border-1: #fdcfb4; + --color-status-warning-border-2: #bc4b09; + --color-status-danger-background-1: #fdf3f4; + --color-status-danger-background-2: #eeacb2; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #b10e1c; + --color-status-danger-foreground-2: #6e0811; + --color-status-danger-foreground-3: #c50f1f; + --color-status-danger-foreground-inverted: #dc626d; + --color-status-danger-border-active: #c50f1f; + --color-status-danger-border-1: #eeacb2; + --color-status-danger-border-2: #c50f1f; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); + --shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); + --shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); + --shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); + --shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14); + --shadow-64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} + +/* teamsDarkTheme — 433 tokens */ +@layer fui.theme { + .fui-theme-teams-dark { + --color-neutral-foreground-1: #ffffff; + --color-neutral-foreground-1-hover: #ffffff; + --color-neutral-foreground-1-pressed: #ffffff; + --color-neutral-foreground-1-selected: #ffffff; + --color-neutral-foreground-2: #d6d6d6; + --color-neutral-foreground-2-hover: #ffffff; + --color-neutral-foreground-2-pressed: #ffffff; + --color-neutral-foreground-2-selected: #ffffff; + --color-neutral-foreground-2-brand-hover: #7f85f5; + --color-neutral-foreground-2-brand-pressed: #7579eb; + --color-neutral-foreground-2-brand-selected: #7f85f5; + --color-neutral-foreground-3: #adadad; + --color-neutral-foreground-3-hover: #d6d6d6; + --color-neutral-foreground-3-pressed: #d6d6d6; + --color-neutral-foreground-3-selected: #d6d6d6; + --color-neutral-foreground-3-brand-hover: #7f85f5; + --color-neutral-foreground-3-brand-pressed: #7579eb; + --color-neutral-foreground-3-brand-selected: #7f85f5; + --color-neutral-foreground-4: #999999; + --color-neutral-foreground-5: #adadad; + --color-neutral-foreground-5-hover: #ffffff; + --color-neutral-foreground-5-pressed: #ffffff; + --color-neutral-foreground-5-selected: #ffffff; + --color-neutral-foreground-disabled: #5c5c5c; + --color-brand-foreground-link: #7f85f5; + --color-brand-foreground-link-hover: #9299f7; + --color-brand-foreground-link-pressed: #7579eb; + --color-brand-foreground-link-selected: #7f85f5; + --color-neutral-foreground-2-link: #d6d6d6; + --color-neutral-foreground-2-link-hover: #ffffff; + --color-neutral-foreground-2-link-pressed: #ffffff; + --color-neutral-foreground-2-link-selected: #ffffff; + --color-compound-brand-foreground-1: #7f85f5; + --color-compound-brand-foreground-1-hover: #9299f7; + --color-compound-brand-foreground-1-pressed: #7579eb; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #242424; + --color-neutral-foreground-inverted-hover: #242424; + --color-neutral-foreground-inverted-pressed: #242424; + --color-neutral-foreground-inverted-selected: #242424; + --color-neutral-foreground-inverted-2: #242424; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #7f85f5; + --color-brand-foreground-2: #aab1fa; + --color-brand-foreground-2-hover: #b6bcfa; + --color-brand-foreground-2-pressed: #e8ebfa; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #5b5fc7; + --color-brand-foreground-inverted-hover: #4f52b2; + --color-brand-foreground-inverted-pressed: #444791; + --color-brand-foreground-on-light: #5b5fc7; + --color-brand-foreground-on-light-hover: #4f52b2; + --color-brand-foreground-on-light-pressed: #3d3e78; + --color-brand-foreground-on-light-selected: #444791; + --color-neutral-background-1: #292929; + --color-neutral-background-1-hover: #3d3d3d; + --color-neutral-background-1-pressed: #1f1f1f; + --color-neutral-background-1-selected: #383838; + --color-neutral-background-2: #242424; + --color-neutral-background-2-hover: #383838; + --color-neutral-background-2-pressed: #1a1a1a; + --color-neutral-background-2-selected: #333333; + --color-neutral-background-3: #1f1f1f; + --color-neutral-background-3-hover: #333333; + --color-neutral-background-3-pressed: #141414; + --color-neutral-background-3-selected: #2e2e2e; + --color-neutral-background-4: #141414; + --color-neutral-background-4-hover: #292929; + --color-neutral-background-4-pressed: #0a0a0a; + --color-neutral-background-4-selected: #242424; + --color-neutral-background-5: #0a0a0a; + --color-neutral-background-5-hover: #1f1f1f; + --color-neutral-background-5-pressed: #000000; + --color-neutral-background-5-selected: #1a1a1a; + --color-neutral-background-6: #333333; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #1a1a1a; + --color-neutral-background-7-pressed: #0a0a0a; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #292929; + --color-neutral-background-inverted: #ffffff; + --color-neutral-background-inverted-hover: #f5f5f5; + --color-neutral-background-inverted-pressed: #e0e0e0; + --color-neutral-background-inverted-selected: #ebebeb; + --color-neutral-background-static: #3d3d3d; + --color-neutral-background-alpha: rgba(26, 26, 26, 0.5); + --color-neutral-background-alpha-2: rgba(31, 31, 31, 0.7); + --color-subtle-background: transparent; + --color-subtle-background-hover: #383838; + --color-subtle-background-pressed: #2e2e2e; + --color-subtle-background-selected: #333333; + --color-subtle-background-light-alpha-hover: rgba(36, 36, 36, 0.8); + --color-subtle-background-light-alpha-pressed: rgba(36, 36, 36, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #141414; + --color-neutral-background-disabled-2: #292929; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #575757; + --color-neutral-stencil-2: #333333; + --color-neutral-stencil-1-alpha: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-2-alpha: rgba(255, 255, 255, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.5); + --color-scrollbar-overlay: rgba(255, 255, 255, 0.6); + --color-brand-background: #4f52b2; + --color-brand-background-hover: #5b5fc7; + --color-brand-background-pressed: #383966; + --color-brand-background-selected: #444791; + --color-compound-brand-background: #7f85f5; + --color-compound-brand-background-hover: #9299f7; + --color-compound-brand-background-pressed: #7579eb; + --color-brand-background-static: #5b5fc7; + --color-brand-background-2: #2f2f4a; + --color-brand-background-2-hover: #383966; + --color-brand-background-2-pressed: #2b2b40; + --color-brand-background-3-static: #444791; + --color-brand-background-4-static: #383966; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #e8ebfa; + --color-brand-background-inverted-pressed: #c5cbfa; + --color-brand-background-inverted-selected: #dce0fa; + --color-neutral-card-background: #333333; + --color-neutral-card-background-hover: #3d3d3d; + --color-neutral-card-background-pressed: #2e2e2e; + --color-neutral-card-background-selected: #383838; + --color-neutral-card-background-disabled: #141414; + --color-neutral-stroke-accessible: #adadad; + --color-neutral-stroke-accessible-hover: #bdbdbd; + --color-neutral-stroke-accessible-pressed: #b3b3b3; + --color-neutral-stroke-accessible-selected: #7f85f5; + --color-neutral-stroke-1: #666666; + --color-neutral-stroke-1-hover: #757575; + --color-neutral-stroke-1-pressed: #6b6b6b; + --color-neutral-stroke-1-selected: #707070; + --color-neutral-stroke-2: #525252; + --color-neutral-stroke-3: #3d3d3d; + --color-neutral-stroke-4: #3d3d3d; + --color-neutral-stroke-4-hover: #2e2e2e; + --color-neutral-stroke-4-pressed: #242424; + --color-neutral-stroke-4-selected: #3d3d3d; + --color-neutral-stroke-subtle: #0a0a0a; + --color-neutral-stroke-on-brand: #292929; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #7f85f5; + --color-brand-stroke-2: #3d3e78; + --color-brand-stroke-2-hover: #3d3e78; + --color-brand-stroke-2-pressed: #333357; + --color-brand-stroke-2-contrast: #3d3e78; + --color-compound-brand-stroke: #7579eb; + --color-compound-brand-stroke-hover: #7f85f5; + --color-compound-brand-stroke-pressed: #5b5fc7; + --color-neutral-stroke-disabled: #424242; + --color-neutral-stroke-disabled-2: #3d3d3d; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(255, 255, 255, 0.1); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #000000; + --color-stroke-focus-2: #ffffff; + --color-neutral-shadow-ambient: rgba(0,0,0,0.24); + --color-neutral-shadow-key: rgba(0,0,0,0.28); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.12); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.40); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.48); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #3f1011; + --color-palette-red-background-2: #751d1f; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #e37d80; + --color-palette-red-border-1: #d13438; + --color-palette-red-border-2: #e37d80; + --color-palette-red-foreground-1: #e37d80; + --color-palette-red-foreground-2: #f1bbbc; + --color-palette-red-foreground-3: #e37d80; + --color-palette-red-foreground-inverted: #d13438; + --color-palette-green-background-1: #052505; + --color-palette-green-background-2: #094509; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #54b054; + --color-palette-green-border-1: #107c10; + --color-palette-green-border-2: #9fd89f; + --color-palette-green-foreground-1: #54b054; + --color-palette-green-foreground-2: #9fd89f; + --color-palette-green-foreground-3: #9fd89f; + --color-palette-green-foreground-inverted: #107c10; + --color-palette-dark-orange-background-1: #411200; + --color-palette-dark-orange-background-2: #7a2101; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #e9835e; + --color-palette-dark-orange-border-1: #da3b01; + --color-palette-dark-orange-border-2: #e9835e; + --color-palette-dark-orange-foreground-1: #e9835e; + --color-palette-dark-orange-foreground-2: #f4bfab; + --color-palette-dark-orange-foreground-3: #e9835e; + --color-palette-yellow-background-1: #4c4400; + --color-palette-yellow-background-2: #817400; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #feee66; + --color-palette-yellow-border-1: #fde300; + --color-palette-yellow-border-2: #fdea3d; + --color-palette-yellow-foreground-1: #feee66; + --color-palette-yellow-foreground-2: #fef7b2; + --color-palette-yellow-foreground-3: #fdea3d; + --color-palette-yellow-foreground-inverted: #817400; + --color-palette-berry-background-1: #3a1136; + --color-palette-berry-background-2: #6d2064; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #da7ed0; + --color-palette-berry-border-1: #c239b3; + --color-palette-berry-border-2: #d161c4; + --color-palette-berry-foreground-1: #da7ed0; + --color-palette-berry-foreground-2: #edbbe7; + --color-palette-berry-foreground-3: #d161c4; + --color-palette-marigold-background-1: #463100; + --color-palette-marigold-background-2: #835b00; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #f2c661; + --color-palette-marigold-border-1: #eaa300; + --color-palette-marigold-border-2: #efb839; + --color-palette-marigold-foreground-1: #f2c661; + --color-palette-marigold-foreground-2: #f9e2ae; + --color-palette-marigold-foreground-3: #efb839; + --color-palette-light-green-background-1: #063004; + --color-palette-light-green-background-2: #0b5a08; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #5ec75a; + --color-palette-light-green-border-1: #13a10e; + --color-palette-light-green-border-2: #3db838; + --color-palette-light-green-foreground-1: #5ec75a; + --color-palette-light-green-foreground-2: #a7e3a5; + --color-palette-light-green-foreground-3: #3db838; + --color-palette-anchor-background-2: #202427; + --color-palette-anchor-border-active: #808a90; + --color-palette-anchor-foreground-2: #bcc3c7; + --color-palette-beige-background-2: #444241; + --color-palette-beige-border-active: #afabaa; + --color-palette-beige-foreground-2: #d7d4d4; + --color-palette-blue-background-2: #004377; + --color-palette-blue-border-active: #5caae5; + --color-palette-blue-foreground-2: #a9d3f2; + --color-palette-brass-background-2: #553e06; + --color-palette-brass-border-active: #c1a256; + --color-palette-brass-foreground-2: #e0cea2; + --color-palette-brown-background-2: #50301a; + --color-palette-brown-border-active: #bb8f6f; + --color-palette-brown-foreground-2: #ddc3b0; + --color-palette-cornflower-background-2: #2c3c85; + --color-palette-cornflower-border-active: #93a4f4; + --color-palette-cornflower-foreground-2: #c8d1fa; + --color-palette-cranberry-background-2: #6e0811; + --color-palette-cranberry-border-active: #dc626d; + --color-palette-cranberry-foreground-2: #eeacb2; + --color-palette-dark-green-background-2: #063b06; + --color-palette-dark-green-border-active: #4da64d; + --color-palette-dark-green-foreground-2: #9ad29a; + --color-palette-dark-red-background-2: #590815; + --color-palette-dark-red-border-active: #ac4f5e; + --color-palette-dark-red-foreground-2: #d69ca5; + --color-palette-forest-background-2: #294903; + --color-palette-forest-border-active: #85b44c; + --color-palette-forest-foreground-2: #bdd99b; + --color-palette-gold-background-2: #6c5700; + --color-palette-gold-border-active: #dac157; + --color-palette-gold-foreground-2: #ecdfa5; + --color-palette-grape-background-2: #4c0d55; + --color-palette-grape-border-active: #b55fc1; + --color-palette-grape-foreground-2: #d9a7e0; + --color-palette-lavender-background-2: #3f3682; + --color-palette-lavender-border-active: #a79cf1; + --color-palette-lavender-foreground-2: #d2ccf8; + --color-palette-light-teal-background-2: #00666d; + --color-palette-light-teal-border-active: #58d3db; + --color-palette-light-teal-foreground-2: #a6e9ed; + --color-palette-lilac-background-2: #63276d; + --color-palette-lilac-border-active: #cf87da; + --color-palette-lilac-foreground-2: #e6bfed; + --color-palette-magenta-background-2: #6b0043; + --color-palette-magenta-border-active: #d957a8; + --color-palette-magenta-foreground-2: #eca5d1; + --color-palette-mink-background-2: #343231; + --color-palette-mink-border-active: #9e9b99; + --color-palette-mink-foreground-2: #cecccb; + --color-palette-navy-background-2: #001665; + --color-palette-navy-border-active: #546fd2; + --color-palette-navy-foreground-2: #a3b2e8; + --color-palette-peach-background-2: #8f4e00; + --color-palette-peach-border-active: #ffba66; + --color-palette-peach-foreground-2: #ffddb3; + --color-palette-pink-background-2: #80215d; + --color-palette-pink-border-active: #ef85c8; + --color-palette-pink-foreground-2: #f7c0e3; + --color-palette-platinum-background-2: #3b4447; + --color-palette-platinum-border-active: #a0adb2; + --color-palette-platinum-foreground-2: #cdd6d8; + --color-palette-plum-background-2: #5a003b; + --color-palette-plum-border-active: #ad4589; + --color-palette-plum-foreground-2: #d696c0; + --color-palette-pumpkin-background-2: #712d09; + --color-palette-pumpkin-border-active: #df8e64; + --color-palette-pumpkin-foreground-2: #efc4ad; + --color-palette-purple-background-2: #341a51; + --color-palette-purple-border-active: #9470bd; + --color-palette-purple-foreground-2: #c6b1de; + --color-palette-royal-blue-background-2: #002c4e; + --color-palette-royal-blue-border-active: #4a89ba; + --color-palette-royal-blue-foreground-2: #9abfdc; + --color-palette-seafoam-background-2: #00723b; + --color-palette-seafoam-border-active: #5ae0a0; + --color-palette-seafoam-foreground-2: #a8f0cd; + --color-palette-steel-background-2: #00333f; + --color-palette-steel-border-active: #4496a9; + --color-palette-steel-foreground-2: #94c8d4; + --color-palette-teal-background-2: #02494c; + --color-palette-teal-border-active: #4cb4b7; + --color-palette-teal-foreground-2: #9bd9db; + --color-status-success-background-1: #052505; + --color-status-success-background-2: #094509; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #54b054; + --color-status-success-foreground-2: #9fd89f; + --color-status-success-foreground-3: #9fd89f; + --color-status-success-foreground-inverted: #0e700e; + --color-status-success-border-active: #54b054; + --color-status-success-border-1: #107c10; + --color-status-success-border-2: #9fd89f; + --color-status-warning-background-1: #4a1e04; + --color-status-warning-background-2: #8a3707; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #faa06b; + --color-status-warning-foreground-2: #fdcfb4; + --color-status-warning-foreground-3: #f98845; + --color-status-warning-foreground-inverted: #bc4b09; + --color-status-warning-border-active: #faa06b; + --color-status-warning-border-1: #f7630c; + --color-status-warning-border-2: #f98845; + --color-status-danger-background-1: #3b0509; + --color-status-danger-background-2: #6e0811; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #dc626d; + --color-status-danger-foreground-2: #eeacb2; + --color-status-danger-foreground-3: #eeacb2; + --color-status-danger-foreground-inverted: #b10e1c; + --color-status-danger-border-active: #dc626d; + --color-status-danger-border-1: #c50f1f; + --color-status-danger-border-2: #dc626d; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); + --shadow-4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28); + --shadow-8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); + --shadow-16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); + --shadow-28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28); + --shadow-64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} + +/* teamsHighContrastTheme — 433 tokens */ +@layer fui.theme { + .fui-theme-teams-high-contrast { + --color-neutral-foreground-1: #ffffff; + --color-neutral-foreground-1-hover: #000000; + --color-neutral-foreground-1-pressed: #000000; + --color-neutral-foreground-1-selected: #000000; + --color-neutral-foreground-2: #ffffff; + --color-neutral-foreground-2-hover: #000000; + --color-neutral-foreground-2-pressed: #000000; + --color-neutral-foreground-2-selected: #000000; + --color-neutral-foreground-2-brand-hover: #000000; + --color-neutral-foreground-2-brand-pressed: #000000; + --color-neutral-foreground-2-brand-selected: #000000; + --color-neutral-foreground-3: #ffffff; + --color-neutral-foreground-3-hover: #000000; + --color-neutral-foreground-3-pressed: #000000; + --color-neutral-foreground-3-selected: #000000; + --color-neutral-foreground-3-brand-hover: #000000; + --color-neutral-foreground-3-brand-pressed: #000000; + --color-neutral-foreground-3-brand-selected: #000000; + --color-neutral-foreground-4: #ffffff; + --color-neutral-foreground-5: #ffffff; + --color-neutral-foreground-5-hover: #000000; + --color-neutral-foreground-5-pressed: #000000; + --color-neutral-foreground-5-selected: #000000; + --color-neutral-foreground-disabled: #3ff23f; + --color-brand-foreground-link: #ffff00; + --color-brand-foreground-link-hover: #ffff00; + --color-brand-foreground-link-pressed: #ffff00; + --color-brand-foreground-link-selected: #ffff00; + --color-neutral-foreground-2-link: #ffff00; + --color-neutral-foreground-2-link-hover: #ffff00; + --color-neutral-foreground-2-link-pressed: #ffff00; + --color-neutral-foreground-2-link-selected: #ffff00; + --color-compound-brand-foreground-1: #1aebff; + --color-compound-brand-foreground-1-hover: #1aebff; + --color-compound-brand-foreground-1-pressed: #1aebff; + --color-neutral-foreground-on-brand: #000000; + --color-neutral-foreground-inverted: #000000; + --color-neutral-foreground-inverted-hover: #000000; + --color-neutral-foreground-inverted-pressed: #000000; + --color-neutral-foreground-inverted-selected: #000000; + --color-neutral-foreground-inverted-2: #ffffff; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffff00; + --color-neutral-foreground-inverted-link-hover: #ffff00; + --color-neutral-foreground-inverted-link-pressed: #ffff00; + --color-neutral-foreground-inverted-link-selected: #ffff00; + --color-neutral-foreground-inverted-disabled: #3ff23f; + --color-brand-foreground-1: #ffffff; + --color-brand-foreground-2: #ffffff; + --color-brand-foreground-2-hover: #ffffff; + --color-brand-foreground-2-pressed: #ffffff; + --color-neutral-foreground-1-static: #000000; + --color-brand-foreground-inverted: #ffffff; + --color-brand-foreground-inverted-hover: #000000; + --color-brand-foreground-inverted-pressed: #000000; + --color-brand-foreground-on-light: #000000; + --color-brand-foreground-on-light-hover: #000000; + --color-brand-foreground-on-light-pressed: #000000; + --color-brand-foreground-on-light-selected: #000000; + --color-neutral-background-1: #000000; + --color-neutral-background-1-hover: #1aebff; + --color-neutral-background-1-pressed: #1aebff; + --color-neutral-background-1-selected: #1aebff; + --color-neutral-background-2: #000000; + --color-neutral-background-2-hover: #1aebff; + --color-neutral-background-2-pressed: #1aebff; + --color-neutral-background-2-selected: #1aebff; + --color-neutral-background-3: #000000; + --color-neutral-background-3-hover: #1aebff; + --color-neutral-background-3-pressed: #1aebff; + --color-neutral-background-3-selected: #1aebff; + --color-neutral-background-4: #000000; + --color-neutral-background-4-hover: #1aebff; + --color-neutral-background-4-pressed: #1aebff; + --color-neutral-background-4-selected: #1aebff; + --color-neutral-background-5: #000000; + --color-neutral-background-5-hover: #1aebff; + --color-neutral-background-5-pressed: #1aebff; + --color-neutral-background-5-selected: #1aebff; + --color-neutral-background-6: #000000; + --color-neutral-background-7: #000000; + --color-neutral-background-7-hover: #1aebff; + --color-neutral-background-7-pressed: #1aebff; + --color-neutral-background-7-selected: #1aebff; + --color-neutral-background-8: #000000; + --color-neutral-background-inverted: #000000; + --color-neutral-background-inverted-hover: #1aebff; + --color-neutral-background-inverted-pressed: #1aebff; + --color-neutral-background-inverted-selected: #1aebff; + --color-neutral-background-static: #000000; + --color-neutral-background-alpha: #000000; + --color-neutral-background-alpha-2: #000000; + --color-subtle-background: transparent; + --color-subtle-background-hover: #1aebff; + --color-subtle-background-pressed: #1aebff; + --color-subtle-background-selected: #1aebff; + --color-subtle-background-light-alpha-hover: #1aebff; + --color-subtle-background-light-alpha-pressed: #1aebff; + --color-subtle-background-light-alpha-selected: #1aebff; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: #1aebff; + --color-subtle-background-inverted-pressed: #1aebff; + --color-subtle-background-inverted-selected: #1aebff; + --color-transparent-background: transparent; + --color-transparent-background-hover: #1aebff; + --color-transparent-background-pressed: #1aebff; + --color-transparent-background-selected: #1aebff; + --color-neutral-background-disabled: #000000; + --color-neutral-background-disabled-2: #3ff23f; + --color-neutral-background-inverted-disabled: #000000; + --color-neutral-stencil-1: #ffffff; + --color-neutral-stencil-2: #ffffff; + --color-neutral-stencil-1-alpha: #ffffff; + --color-neutral-stencil-2-alpha: #ffffff; + --color-background-overlay: rgba(0, 0, 0, 0.5); + --color-scrollbar-overlay: #ffffff; + --color-brand-background: #ffffff; + --color-brand-background-hover: #1aebff; + --color-brand-background-pressed: #1aebff; + --color-brand-background-selected: #1aebff; + --color-compound-brand-background: #1aebff; + --color-compound-brand-background-hover: #1aebff; + --color-compound-brand-background-pressed: #1aebff; + --color-brand-background-static: #000000; + --color-brand-background-2: #000000; + --color-brand-background-2-hover: #000000; + --color-brand-background-2-pressed: #000000; + --color-brand-background-3-static: #000000; + --color-brand-background-4-static: #000000; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #1aebff; + --color-brand-background-inverted-pressed: #1aebff; + --color-brand-background-inverted-selected: #1aebff; + --color-neutral-card-background: #000000; + --color-neutral-card-background-hover: #1aebff; + --color-neutral-card-background-pressed: #1aebff; + --color-neutral-card-background-selected: #1aebff; + --color-neutral-card-background-disabled: #000000; + --color-neutral-stroke-accessible: #ffffff; + --color-neutral-stroke-accessible-hover: #1aebff; + --color-neutral-stroke-accessible-pressed: #1aebff; + --color-neutral-stroke-accessible-selected: #1aebff; + --color-neutral-stroke-1: #ffffff; + --color-neutral-stroke-1-hover: #1aebff; + --color-neutral-stroke-1-pressed: #1aebff; + --color-neutral-stroke-1-selected: #1aebff; + --color-neutral-stroke-2: #ffffff; + --color-neutral-stroke-3: #ffffff; + --color-neutral-stroke-4: #ffffff; + --color-neutral-stroke-4-hover: #1aebff; + --color-neutral-stroke-4-pressed: #1aebff; + --color-neutral-stroke-4-selected: #1aebff; + --color-neutral-stroke-subtle: #ffffff; + --color-neutral-stroke-on-brand: #000000; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #ffffff; + --color-brand-stroke-2: #ffffff; + --color-brand-stroke-2-hover: #1aebff; + --color-brand-stroke-2-pressed: #1aebff; + --color-brand-stroke-2-contrast: #000000; + --color-compound-brand-stroke: #1aebff; + --color-compound-brand-stroke-hover: #1aebff; + --color-compound-brand-stroke-pressed: #1aebff; + --color-neutral-stroke-disabled: #3ff23f; + --color-neutral-stroke-disabled-2: #3ff23f; + --color-neutral-stroke-inverted-disabled: #3ff23f; + --color-transparent-stroke: #ffffff; + --color-transparent-stroke-interactive: #1aebff; + --color-transparent-stroke-disabled: #3ff23f; + --color-neutral-stroke-alpha: #ffffff; + --color-neutral-stroke-alpha-2: #000000; + --color-stroke-focus-1: #000000; + --color-stroke-focus-2: #1aebff; + --color-neutral-shadow-ambient: rgba(0,0,0,0.24); + --color-neutral-shadow-key: rgba(0,0,0,0.28); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.12); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.40); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.48); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #000000; + --color-palette-red-background-2: #000000; + --color-palette-red-background-3: #ffffff; + --color-palette-red-border-active: #1aebff; + --color-palette-red-border-1: #ffffff; + --color-palette-red-border-2: #ffffff; + --color-palette-red-foreground-1: #ffffff; + --color-palette-red-foreground-2: #ffffff; + --color-palette-red-foreground-3: #ffffff; + --color-palette-red-foreground-inverted: #ffffff; + --color-palette-green-background-1: #000000; + --color-palette-green-background-2: #000000; + --color-palette-green-background-3: #ffffff; + --color-palette-green-border-active: #1aebff; + --color-palette-green-border-1: #ffffff; + --color-palette-green-border-2: #ffffff; + --color-palette-green-foreground-1: #ffffff; + --color-palette-green-foreground-2: #ffffff; + --color-palette-green-foreground-3: #ffffff; + --color-palette-green-foreground-inverted: #ffffff; + --color-palette-dark-orange-background-1: #000000; + --color-palette-dark-orange-background-2: #000000; + --color-palette-dark-orange-background-3: #ffffff; + --color-palette-dark-orange-border-active: #1aebff; + --color-palette-dark-orange-border-1: #ffffff; + --color-palette-dark-orange-border-2: #ffffff; + --color-palette-dark-orange-foreground-1: #ffffff; + --color-palette-dark-orange-foreground-2: #ffffff; + --color-palette-dark-orange-foreground-3: #ffffff; + --color-palette-yellow-background-1: #000000; + --color-palette-yellow-background-2: #000000; + --color-palette-yellow-background-3: #ffffff; + --color-palette-yellow-border-active: #1aebff; + --color-palette-yellow-border-1: #ffffff; + --color-palette-yellow-border-2: #ffffff; + --color-palette-yellow-foreground-1: #ffffff; + --color-palette-yellow-foreground-2: #ffffff; + --color-palette-yellow-foreground-3: #ffffff; + --color-palette-yellow-foreground-inverted: #ffffff; + --color-palette-berry-background-1: #000000; + --color-palette-berry-background-2: #000000; + --color-palette-berry-background-3: #ffffff; + --color-palette-berry-border-active: #1aebff; + --color-palette-berry-border-1: #ffffff; + --color-palette-berry-border-2: #ffffff; + --color-palette-berry-foreground-1: #ffffff; + --color-palette-berry-foreground-2: #ffffff; + --color-palette-berry-foreground-3: #ffffff; + --color-palette-marigold-background-1: #000000; + --color-palette-marigold-background-2: #000000; + --color-palette-marigold-background-3: #ffffff; + --color-palette-marigold-border-active: #1aebff; + --color-palette-marigold-border-1: #ffffff; + --color-palette-marigold-border-2: #ffffff; + --color-palette-marigold-foreground-1: #ffffff; + --color-palette-marigold-foreground-2: #ffffff; + --color-palette-marigold-foreground-3: #ffffff; + --color-palette-light-green-background-1: #000000; + --color-palette-light-green-background-2: #000000; + --color-palette-light-green-background-3: #ffffff; + --color-palette-light-green-border-active: #1aebff; + --color-palette-light-green-border-1: #ffffff; + --color-palette-light-green-border-2: #ffffff; + --color-palette-light-green-foreground-1: #ffffff; + --color-palette-light-green-foreground-2: #ffffff; + --color-palette-light-green-foreground-3: #ffffff; + --color-palette-anchor-background-2: #000000; + --color-palette-anchor-border-active: #1aebff; + --color-palette-anchor-foreground-2: #ffffff; + --color-palette-beige-background-2: #000000; + --color-palette-beige-border-active: #1aebff; + --color-palette-beige-foreground-2: #ffffff; + --color-palette-blue-background-2: #000000; + --color-palette-blue-border-active: #1aebff; + --color-palette-blue-foreground-2: #ffffff; + --color-palette-brass-background-2: #000000; + --color-palette-brass-border-active: #1aebff; + --color-palette-brass-foreground-2: #ffffff; + --color-palette-brown-background-2: #000000; + --color-palette-brown-border-active: #1aebff; + --color-palette-brown-foreground-2: #ffffff; + --color-palette-cornflower-background-2: #000000; + --color-palette-cornflower-border-active: #1aebff; + --color-palette-cornflower-foreground-2: #ffffff; + --color-palette-cranberry-background-2: #000000; + --color-palette-cranberry-border-active: #1aebff; + --color-palette-cranberry-foreground-2: #ffffff; + --color-palette-dark-green-background-2: #000000; + --color-palette-dark-green-border-active: #1aebff; + --color-palette-dark-green-foreground-2: #ffffff; + --color-palette-dark-red-background-2: #000000; + --color-palette-dark-red-border-active: #1aebff; + --color-palette-dark-red-foreground-2: #ffffff; + --color-palette-forest-background-2: #000000; + --color-palette-forest-border-active: #1aebff; + --color-palette-forest-foreground-2: #ffffff; + --color-palette-gold-background-2: #000000; + --color-palette-gold-border-active: #1aebff; + --color-palette-gold-foreground-2: #ffffff; + --color-palette-grape-background-2: #000000; + --color-palette-grape-border-active: #1aebff; + --color-palette-grape-foreground-2: #ffffff; + --color-palette-lavender-background-2: #000000; + --color-palette-lavender-border-active: #1aebff; + --color-palette-lavender-foreground-2: #ffffff; + --color-palette-light-teal-background-2: #000000; + --color-palette-light-teal-border-active: #1aebff; + --color-palette-light-teal-foreground-2: #ffffff; + --color-palette-lilac-background-2: #000000; + --color-palette-lilac-border-active: #1aebff; + --color-palette-lilac-foreground-2: #ffffff; + --color-palette-magenta-background-2: #000000; + --color-palette-magenta-border-active: #1aebff; + --color-palette-magenta-foreground-2: #ffffff; + --color-palette-mink-background-2: #000000; + --color-palette-mink-border-active: #1aebff; + --color-palette-mink-foreground-2: #ffffff; + --color-palette-navy-background-2: #000000; + --color-palette-navy-border-active: #1aebff; + --color-palette-navy-foreground-2: #ffffff; + --color-palette-peach-background-2: #000000; + --color-palette-peach-border-active: #1aebff; + --color-palette-peach-foreground-2: #ffffff; + --color-palette-pink-background-2: #000000; + --color-palette-pink-border-active: #1aebff; + --color-palette-pink-foreground-2: #ffffff; + --color-palette-platinum-background-2: #000000; + --color-palette-platinum-border-active: #1aebff; + --color-palette-platinum-foreground-2: #ffffff; + --color-palette-plum-background-2: #000000; + --color-palette-plum-border-active: #1aebff; + --color-palette-plum-foreground-2: #ffffff; + --color-palette-pumpkin-background-2: #000000; + --color-palette-pumpkin-border-active: #1aebff; + --color-palette-pumpkin-foreground-2: #ffffff; + --color-palette-purple-background-2: #000000; + --color-palette-purple-border-active: #1aebff; + --color-palette-purple-foreground-2: #ffffff; + --color-palette-royal-blue-background-2: #000000; + --color-palette-royal-blue-border-active: #1aebff; + --color-palette-royal-blue-foreground-2: #ffffff; + --color-palette-seafoam-background-2: #000000; + --color-palette-seafoam-border-active: #1aebff; + --color-palette-seafoam-foreground-2: #ffffff; + --color-palette-steel-background-2: #000000; + --color-palette-steel-border-active: #1aebff; + --color-palette-steel-foreground-2: #ffffff; + --color-palette-teal-background-2: #000000; + --color-palette-teal-border-active: #1aebff; + --color-palette-teal-foreground-2: #ffffff; + --color-status-success-background-1: #000000; + --color-status-success-background-2: #000000; + --color-status-success-background-3: #ffffff; + --color-status-success-foreground-1: #ffffff; + --color-status-success-foreground-2: #ffffff; + --color-status-success-foreground-3: #ffffff; + --color-status-success-foreground-inverted: #ffffff; + --color-status-success-border-active: #1aebff; + --color-status-success-border-1: #ffffff; + --color-status-success-border-2: #ffffff; + --color-status-warning-background-1: #000000; + --color-status-warning-background-2: #000000; + --color-status-warning-background-3: #ffffff; + --color-status-warning-foreground-1: #ffffff; + --color-status-warning-foreground-2: #ffffff; + --color-status-warning-foreground-3: #ffffff; + --color-status-warning-foreground-inverted: #ffffff; + --color-status-warning-border-active: #1aebff; + --color-status-warning-border-1: #ffffff; + --color-status-warning-border-2: #ffffff; + --color-status-danger-background-1: #000000; + --color-status-danger-background-2: #000000; + --color-status-danger-background-3: #ffffff; + --color-status-danger-background-3-hover: #1aebff; + --color-status-danger-background-3-pressed: #1aebff; + --color-status-danger-foreground-1: #ffffff; + --color-status-danger-foreground-2: #ffffff; + --color-status-danger-foreground-3: #ffffff; + --color-status-danger-foreground-inverted: #ffffff; + --color-status-danger-border-active: #1aebff; + --color-status-danger-border-1: #ffffff; + --color-status-danger-border-2: #ffffff; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); + --shadow-4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28); + --shadow-8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); + --shadow-16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); + --shadow-28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28); + --shadow-64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} + +/* teamsLightV21Theme — 433 tokens */ +@layer fui.theme { + .fui-theme-teams-light-v21 { + --color-neutral-foreground-1: #242424; + --color-neutral-foreground-1-hover: #242424; + --color-neutral-foreground-1-pressed: #242424; + --color-neutral-foreground-1-selected: #242424; + --color-neutral-foreground-2: #424242; + --color-neutral-foreground-2-hover: #242424; + --color-neutral-foreground-2-pressed: #242424; + --color-neutral-foreground-2-selected: #242424; + --color-neutral-foreground-2-brand-hover: #654cf5; + --color-neutral-foreground-2-brand-pressed: #5a40db; + --color-neutral-foreground-2-brand-selected: #654cf5; + --color-neutral-foreground-3: #616161; + --color-neutral-foreground-3-hover: #424242; + --color-neutral-foreground-3-pressed: #424242; + --color-neutral-foreground-3-selected: #424242; + --color-neutral-foreground-3-brand-hover: #654cf5; + --color-neutral-foreground-3-brand-pressed: #5a40db; + --color-neutral-foreground-3-brand-selected: #654cf5; + --color-neutral-foreground-4: #707070; + --color-neutral-foreground-5: #616161; + --color-neutral-foreground-5-hover: #242424; + --color-neutral-foreground-5-pressed: #242424; + --color-neutral-foreground-5-selected: #242424; + --color-neutral-foreground-disabled: #bdbdbd; + --color-brand-foreground-link: #5a40db; + --color-brand-foreground-link-hover: #4d3aba; + --color-brand-foreground-link-pressed: #3b3185; + --color-brand-foreground-link-selected: #5a40db; + --color-neutral-foreground-2-link: #424242; + --color-neutral-foreground-2-link-hover: #242424; + --color-neutral-foreground-2-link-pressed: #242424; + --color-neutral-foreground-2-link-selected: #242424; + --color-compound-brand-foreground-1: #654cf5; + --color-compound-brand-foreground-1-hover: #5a40db; + --color-compound-brand-foreground-1-pressed: #4d3aba; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #ffffff; + --color-neutral-foreground-inverted-hover: #ffffff; + --color-neutral-foreground-inverted-pressed: #ffffff; + --color-neutral-foreground-inverted-selected: #ffffff; + --color-neutral-foreground-inverted-2: #ffffff; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #654cf5; + --color-brand-foreground-2: #5a40db; + --color-brand-foreground-2-hover: #4d3aba; + --color-brand-foreground-2-pressed: #352e70; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #887dff; + --color-brand-foreground-inverted-hover: #9791ff; + --color-brand-foreground-inverted-pressed: #887dff; + --color-brand-foreground-on-light: #654cf5; + --color-brand-foreground-on-light-hover: #5a40db; + --color-brand-foreground-on-light-pressed: #44359e; + --color-brand-foreground-on-light-selected: #4d3aba; + --color-neutral-background-1: #ffffff; + --color-neutral-background-1-hover: #f5f5f5; + --color-neutral-background-1-pressed: #e0e0e0; + --color-neutral-background-1-selected: #ebebeb; + --color-neutral-background-2: #fafafa; + --color-neutral-background-2-hover: #f0f0f0; + --color-neutral-background-2-pressed: #dbdbdb; + --color-neutral-background-2-selected: #e6e6e6; + --color-neutral-background-3: #f5f5f5; + --color-neutral-background-3-hover: #ebebeb; + --color-neutral-background-3-pressed: #d6d6d6; + --color-neutral-background-3-selected: #e0e0e0; + --color-neutral-background-4: #f0f0f0; + --color-neutral-background-4-hover: #fafafa; + --color-neutral-background-4-pressed: #f5f5f5; + --color-neutral-background-4-selected: #ffffff; + --color-neutral-background-5: #ebebeb; + --color-neutral-background-5-hover: #f5f5f5; + --color-neutral-background-5-pressed: #f0f0f0; + --color-neutral-background-5-selected: #fafafa; + --color-neutral-background-6: #e6e6e6; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #ebebeb; + --color-neutral-background-7-pressed: #d6d6d6; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #fcfcfc; + --color-neutral-background-inverted: #292929; + --color-neutral-background-inverted-hover: #3d3d3d; + --color-neutral-background-inverted-pressed: #1f1f1f; + --color-neutral-background-inverted-selected: #383838; + --color-neutral-background-static: #333333; + --color-neutral-background-alpha: rgba(255, 255, 255, 0.5); + --color-neutral-background-alpha-2: rgba(255, 255, 255, 0.8); + --color-subtle-background: transparent; + --color-subtle-background-hover: #f5f5f5; + --color-subtle-background-pressed: #e0e0e0; + --color-subtle-background-selected: #ebebeb; + --color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7); + --color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #f0f0f0; + --color-neutral-background-disabled-2: #ffffff; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #e6e6e6; + --color-neutral-stencil-2: #fafafa; + --color-neutral-stencil-1-alpha: rgba(0, 0, 0, 0.1); + --color-neutral-stencil-2-alpha: rgba(0, 0, 0, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.4); + --color-scrollbar-overlay: rgba(0, 0, 0, 0.5); + --color-brand-background: #654cf5; + --color-brand-background-hover: #5a40db; + --color-brand-background-pressed: #3b3185; + --color-brand-background-selected: #4d3aba; + --color-compound-brand-background: #654cf5; + --color-compound-brand-background-hover: #5a40db; + --color-compound-brand-background-pressed: #4d3aba; + --color-brand-background-static: #654cf5; + --color-brand-background-2: #e8e8ff; + --color-brand-background-2-hover: #dcdbff; + --color-brand-background-2-pressed: #bab8ff; + --color-brand-background-3-static: #4d3aba; + --color-brand-background-4-static: #3b3185; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #e8e8ff; + --color-brand-background-inverted-pressed: #c8c7ff; + --color-brand-background-inverted-selected: #dcdbff; + --color-neutral-card-background: #fafafa; + --color-neutral-card-background-hover: #ffffff; + --color-neutral-card-background-pressed: #f5f5f5; + --color-neutral-card-background-selected: #ebebeb; + --color-neutral-card-background-disabled: #f0f0f0; + --color-neutral-stroke-accessible: #616161; + --color-neutral-stroke-accessible-hover: #575757; + --color-neutral-stroke-accessible-pressed: #4d4d4d; + --color-neutral-stroke-accessible-selected: #654cf5; + --color-neutral-stroke-1: #d1d1d1; + --color-neutral-stroke-1-hover: #c7c7c7; + --color-neutral-stroke-1-pressed: #b3b3b3; + --color-neutral-stroke-1-selected: #bdbdbd; + --color-neutral-stroke-2: #e0e0e0; + --color-neutral-stroke-3: #f0f0f0; + --color-neutral-stroke-4: #ebebeb; + --color-neutral-stroke-4-hover: #e0e0e0; + --color-neutral-stroke-4-pressed: #d6d6d6; + --color-neutral-stroke-4-selected: #ebebeb; + --color-neutral-stroke-subtle: #e0e0e0; + --color-neutral-stroke-on-brand: #ffffff; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #654cf5; + --color-brand-stroke-2: #c8c7ff; + --color-brand-stroke-2-hover: #aba8ff; + --color-brand-stroke-2-pressed: #654cf5; + --color-brand-stroke-2-contrast: #c8c7ff; + --color-compound-brand-stroke: #654cf5; + --color-compound-brand-stroke-hover: #5a40db; + --color-compound-brand-stroke-pressed: #4d3aba; + --color-neutral-stroke-disabled: #e0e0e0; + --color-neutral-stroke-disabled-2: #ebebeb; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(0, 0, 0, 0.05); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #ffffff; + --color-stroke-focus-2: #000000; + --color-neutral-shadow-ambient: rgba(0,0,0,0.12); + --color-neutral-shadow-key: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.06); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.07); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.20); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.24); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #fdf6f6; + --color-palette-red-background-2: #f1bbbc; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #d13438; + --color-palette-red-border-1: #f1bbbc; + --color-palette-red-border-2: #d13438; + --color-palette-red-foreground-1: #bc2f32; + --color-palette-red-foreground-2: #751d1f; + --color-palette-red-foreground-3: #d13438; + --color-palette-red-foreground-inverted: #dc5e62; + --color-palette-green-background-1: #f1faf1; + --color-palette-green-background-2: #9fd89f; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #107c10; + --color-palette-green-border-1: #9fd89f; + --color-palette-green-border-2: #107c10; + --color-palette-green-foreground-1: #0e700e; + --color-palette-green-foreground-2: #094509; + --color-palette-green-foreground-3: #107c10; + --color-palette-green-foreground-inverted: #359b35; + --color-palette-dark-orange-background-1: #fdf6f3; + --color-palette-dark-orange-background-2: #f4bfab; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #da3b01; + --color-palette-dark-orange-border-1: #f4bfab; + --color-palette-dark-orange-border-2: #da3b01; + --color-palette-dark-orange-foreground-1: #c43501; + --color-palette-dark-orange-foreground-2: #7a2101; + --color-palette-dark-orange-foreground-3: #da3b01; + --color-palette-yellow-background-1: #fffef5; + --color-palette-yellow-background-2: #fef7b2; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #fde300; + --color-palette-yellow-border-1: #fef7b2; + --color-palette-yellow-border-2: #fde300; + --color-palette-yellow-foreground-1: #817400; + --color-palette-yellow-foreground-2: #817400; + --color-palette-yellow-foreground-3: #fde300; + --color-palette-yellow-foreground-inverted: #fef7b2; + --color-palette-berry-background-1: #fdf5fc; + --color-palette-berry-background-2: #edbbe7; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #c239b3; + --color-palette-berry-border-1: #edbbe7; + --color-palette-berry-border-2: #c239b3; + --color-palette-berry-foreground-1: #af33a1; + --color-palette-berry-foreground-2: #6d2064; + --color-palette-berry-foreground-3: #c239b3; + --color-palette-marigold-background-1: #fefbf4; + --color-palette-marigold-background-2: #f9e2ae; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #eaa300; + --color-palette-marigold-border-1: #f9e2ae; + --color-palette-marigold-border-2: #eaa300; + --color-palette-marigold-foreground-1: #d39300; + --color-palette-marigold-foreground-2: #835b00; + --color-palette-marigold-foreground-3: #eaa300; + --color-palette-light-green-background-1: #f2fbf2; + --color-palette-light-green-background-2: #a7e3a5; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #13a10e; + --color-palette-light-green-border-1: #a7e3a5; + --color-palette-light-green-border-2: #13a10e; + --color-palette-light-green-foreground-1: #11910d; + --color-palette-light-green-foreground-2: #0b5a08; + --color-palette-light-green-foreground-3: #13a10e; + --color-palette-anchor-background-2: #bcc3c7; + --color-palette-anchor-border-active: #394146; + --color-palette-anchor-foreground-2: #202427; + --color-palette-beige-background-2: #d7d4d4; + --color-palette-beige-border-active: #7a7574; + --color-palette-beige-foreground-2: #444241; + --color-palette-blue-background-2: #a9d3f2; + --color-palette-blue-border-active: #0078d4; + --color-palette-blue-foreground-2: #004377; + --color-palette-brass-background-2: #e0cea2; + --color-palette-brass-border-active: #986f0b; + --color-palette-brass-foreground-2: #553e06; + --color-palette-brown-background-2: #ddc3b0; + --color-palette-brown-border-active: #8e562e; + --color-palette-brown-foreground-2: #50301a; + --color-palette-cornflower-background-2: #c8d1fa; + --color-palette-cornflower-border-active: #4f6bed; + --color-palette-cornflower-foreground-2: #2c3c85; + --color-palette-cranberry-background-2: #eeacb2; + --color-palette-cranberry-border-active: #c50f1f; + --color-palette-cranberry-foreground-2: #6e0811; + --color-palette-dark-green-background-2: #9ad29a; + --color-palette-dark-green-border-active: #0b6a0b; + --color-palette-dark-green-foreground-2: #063b06; + --color-palette-dark-red-background-2: #d69ca5; + --color-palette-dark-red-border-active: #750b1c; + --color-palette-dark-red-foreground-2: #420610; + --color-palette-forest-background-2: #bdd99b; + --color-palette-forest-border-active: #498205; + --color-palette-forest-foreground-2: #294903; + --color-palette-gold-background-2: #ecdfa5; + --color-palette-gold-border-active: #c19c00; + --color-palette-gold-foreground-2: #6c5700; + --color-palette-grape-background-2: #d9a7e0; + --color-palette-grape-border-active: #881798; + --color-palette-grape-foreground-2: #4c0d55; + --color-palette-lavender-background-2: #d2ccf8; + --color-palette-lavender-border-active: #7160e8; + --color-palette-lavender-foreground-2: #3f3682; + --color-palette-light-teal-background-2: #a6e9ed; + --color-palette-light-teal-border-active: #00b7c3; + --color-palette-light-teal-foreground-2: #00666d; + --color-palette-lilac-background-2: #e6bfed; + --color-palette-lilac-border-active: #b146c2; + --color-palette-lilac-foreground-2: #63276d; + --color-palette-magenta-background-2: #eca5d1; + --color-palette-magenta-border-active: #bf0077; + --color-palette-magenta-foreground-2: #6b0043; + --color-palette-mink-background-2: #cecccb; + --color-palette-mink-border-active: #5d5a58; + --color-palette-mink-foreground-2: #343231; + --color-palette-navy-background-2: #a3b2e8; + --color-palette-navy-border-active: #0027b4; + --color-palette-navy-foreground-2: #001665; + --color-palette-peach-background-2: #ffddb3; + --color-palette-peach-border-active: #ff8c00; + --color-palette-peach-foreground-2: #8f4e00; + --color-palette-pink-background-2: #f7c0e3; + --color-palette-pink-border-active: #e43ba6; + --color-palette-pink-foreground-2: #80215d; + --color-palette-platinum-background-2: #cdd6d8; + --color-palette-platinum-border-active: #69797e; + --color-palette-platinum-foreground-2: #3b4447; + --color-palette-plum-background-2: #d696c0; + --color-palette-plum-border-active: #77004d; + --color-palette-plum-foreground-2: #43002b; + --color-palette-pumpkin-background-2: #efc4ad; + --color-palette-pumpkin-border-active: #ca5010; + --color-palette-pumpkin-foreground-2: #712d09; + --color-palette-purple-background-2: #c6b1de; + --color-palette-purple-border-active: #5c2e91; + --color-palette-purple-foreground-2: #341a51; + --color-palette-royal-blue-background-2: #9abfdc; + --color-palette-royal-blue-border-active: #004e8c; + --color-palette-royal-blue-foreground-2: #002c4e; + --color-palette-seafoam-background-2: #a8f0cd; + --color-palette-seafoam-border-active: #00cc6a; + --color-palette-seafoam-foreground-2: #00723b; + --color-palette-steel-background-2: #94c8d4; + --color-palette-steel-border-active: #005b70; + --color-palette-steel-foreground-2: #00333f; + --color-palette-teal-background-2: #9bd9db; + --color-palette-teal-border-active: #038387; + --color-palette-teal-foreground-2: #02494c; + --color-status-success-background-1: #f1faf1; + --color-status-success-background-2: #9fd89f; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #0e700e; + --color-status-success-foreground-2: #094509; + --color-status-success-foreground-3: #107c10; + --color-status-success-foreground-inverted: #54b054; + --color-status-success-border-active: #107c10; + --color-status-success-border-1: #9fd89f; + --color-status-success-border-2: #107c10; + --color-status-warning-background-1: #fff9f5; + --color-status-warning-background-2: #fdcfb4; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #bc4b09; + --color-status-warning-foreground-2: #8a3707; + --color-status-warning-foreground-3: #bc4b09; + --color-status-warning-foreground-inverted: #faa06b; + --color-status-warning-border-active: #f7630c; + --color-status-warning-border-1: #fdcfb4; + --color-status-warning-border-2: #bc4b09; + --color-status-danger-background-1: #fdf3f4; + --color-status-danger-background-2: #eeacb2; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #b10e1c; + --color-status-danger-foreground-2: #6e0811; + --color-status-danger-foreground-3: #c50f1f; + --color-status-danger-foreground-inverted: #dc626d; + --color-status-danger-border-active: #c50f1f; + --color-status-danger-border-1: #eeacb2; + --color-status-danger-border-2: #c50f1f; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); + --shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); + --shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); + --shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); + --shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14); + --shadow-64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} + +/* teamsDarkV21Theme — 433 tokens */ +@layer fui.theme { + .fui-theme-teams-dark-v21 { + --color-neutral-foreground-1: #ffffff; + --color-neutral-foreground-1-hover: #ffffff; + --color-neutral-foreground-1-pressed: #ffffff; + --color-neutral-foreground-1-selected: #ffffff; + --color-neutral-foreground-2: #d6d6d6; + --color-neutral-foreground-2-hover: #ffffff; + --color-neutral-foreground-2-pressed: #ffffff; + --color-neutral-foreground-2-selected: #ffffff; + --color-neutral-foreground-2-brand-hover: #887dff; + --color-neutral-foreground-2-brand-pressed: #7769fa; + --color-neutral-foreground-2-brand-selected: #887dff; + --color-neutral-foreground-3: #adadad; + --color-neutral-foreground-3-hover: #d6d6d6; + --color-neutral-foreground-3-pressed: #d6d6d6; + --color-neutral-foreground-3-selected: #d6d6d6; + --color-neutral-foreground-3-brand-hover: #887dff; + --color-neutral-foreground-3-brand-pressed: #7769fa; + --color-neutral-foreground-3-brand-selected: #887dff; + --color-neutral-foreground-4: #999999; + --color-neutral-foreground-5: #adadad; + --color-neutral-foreground-5-hover: #ffffff; + --color-neutral-foreground-5-pressed: #ffffff; + --color-neutral-foreground-5-selected: #ffffff; + --color-neutral-foreground-disabled: #5c5c5c; + --color-brand-foreground-link: #887dff; + --color-brand-foreground-link-hover: #9791ff; + --color-brand-foreground-link-pressed: #7769fa; + --color-brand-foreground-link-selected: #887dff; + --color-neutral-foreground-2-link: #d6d6d6; + --color-neutral-foreground-2-link-hover: #ffffff; + --color-neutral-foreground-2-link-pressed: #ffffff; + --color-neutral-foreground-2-link-selected: #ffffff; + --color-compound-brand-foreground-1: #887dff; + --color-compound-brand-foreground-1-hover: #9791ff; + --color-compound-brand-foreground-1-pressed: #7769fa; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #242424; + --color-neutral-foreground-inverted-hover: #242424; + --color-neutral-foreground-inverted-pressed: #242424; + --color-neutral-foreground-inverted-selected: #242424; + --color-neutral-foreground-inverted-2: #242424; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #887dff; + --color-brand-foreground-2: #aba8ff; + --color-brand-foreground-2-hover: #bab8ff; + --color-brand-foreground-2-pressed: #e8e8ff; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #654cf5; + --color-brand-foreground-inverted-hover: #5a40db; + --color-brand-foreground-inverted-pressed: #4d3aba; + --color-brand-foreground-on-light: #654cf5; + --color-brand-foreground-on-light-hover: #5a40db; + --color-brand-foreground-on-light-pressed: #44359e; + --color-brand-foreground-on-light-selected: #4d3aba; + --color-neutral-background-1: #292929; + --color-neutral-background-1-hover: #3d3d3d; + --color-neutral-background-1-pressed: #1f1f1f; + --color-neutral-background-1-selected: #383838; + --color-neutral-background-2: #242424; + --color-neutral-background-2-hover: #383838; + --color-neutral-background-2-pressed: #1a1a1a; + --color-neutral-background-2-selected: #333333; + --color-neutral-background-3: #1f1f1f; + --color-neutral-background-3-hover: #333333; + --color-neutral-background-3-pressed: #141414; + --color-neutral-background-3-selected: #2e2e2e; + --color-neutral-background-4: #141414; + --color-neutral-background-4-hover: #292929; + --color-neutral-background-4-pressed: #0a0a0a; + --color-neutral-background-4-selected: #242424; + --color-neutral-background-5: #0a0a0a; + --color-neutral-background-5-hover: #1f1f1f; + --color-neutral-background-5-pressed: #000000; + --color-neutral-background-5-selected: #1a1a1a; + --color-neutral-background-6: #333333; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #1a1a1a; + --color-neutral-background-7-pressed: #0a0a0a; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #292929; + --color-neutral-background-inverted: #ffffff; + --color-neutral-background-inverted-hover: #f5f5f5; + --color-neutral-background-inverted-pressed: #e0e0e0; + --color-neutral-background-inverted-selected: #ebebeb; + --color-neutral-background-static: #3d3d3d; + --color-neutral-background-alpha: rgba(26, 26, 26, 0.5); + --color-neutral-background-alpha-2: rgba(31, 31, 31, 0.7); + --color-subtle-background: transparent; + --color-subtle-background-hover: #383838; + --color-subtle-background-pressed: #2e2e2e; + --color-subtle-background-selected: #333333; + --color-subtle-background-light-alpha-hover: rgba(36, 36, 36, 0.8); + --color-subtle-background-light-alpha-pressed: rgba(36, 36, 36, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #141414; + --color-neutral-background-disabled-2: #292929; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #575757; + --color-neutral-stencil-2: #333333; + --color-neutral-stencil-1-alpha: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-2-alpha: rgba(255, 255, 255, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.5); + --color-scrollbar-overlay: rgba(255, 255, 255, 0.6); + --color-brand-background: #5a40db; + --color-brand-background-hover: #654cf5; + --color-brand-background-pressed: #3b3185; + --color-brand-background-selected: #4d3aba; + --color-compound-brand-background: #887dff; + --color-compound-brand-background-hover: #9791ff; + --color-compound-brand-background-pressed: #7769fa; + --color-brand-background-static: #654cf5; + --color-brand-background-2: #2f2a5e; + --color-brand-background-2-hover: #3b3185; + --color-brand-background-2-pressed: #29274f; + --color-brand-background-3-static: #4d3aba; + --color-brand-background-4-static: #3b3185; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #e8e8ff; + --color-brand-background-inverted-pressed: #c8c7ff; + --color-brand-background-inverted-selected: #dcdbff; + --color-neutral-card-background: #333333; + --color-neutral-card-background-hover: #3d3d3d; + --color-neutral-card-background-pressed: #2e2e2e; + --color-neutral-card-background-selected: #383838; + --color-neutral-card-background-disabled: #141414; + --color-neutral-stroke-accessible: #adadad; + --color-neutral-stroke-accessible-hover: #bdbdbd; + --color-neutral-stroke-accessible-pressed: #b3b3b3; + --color-neutral-stroke-accessible-selected: #887dff; + --color-neutral-stroke-1: #666666; + --color-neutral-stroke-1-hover: #757575; + --color-neutral-stroke-1-pressed: #6b6b6b; + --color-neutral-stroke-1-selected: #707070; + --color-neutral-stroke-2: #525252; + --color-neutral-stroke-3: #3d3d3d; + --color-neutral-stroke-4: #3d3d3d; + --color-neutral-stroke-4-hover: #2e2e2e; + --color-neutral-stroke-4-pressed: #242424; + --color-neutral-stroke-4-selected: #3d3d3d; + --color-neutral-stroke-subtle: #0a0a0a; + --color-neutral-stroke-on-brand: #292929; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #887dff; + --color-brand-stroke-2: #44359e; + --color-brand-stroke-2-hover: #44359e; + --color-brand-stroke-2-pressed: #352e70; + --color-brand-stroke-2-contrast: #44359e; + --color-compound-brand-stroke: #7769fa; + --color-compound-brand-stroke-hover: #887dff; + --color-compound-brand-stroke-pressed: #654cf5; + --color-neutral-stroke-disabled: #424242; + --color-neutral-stroke-disabled-2: #3d3d3d; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(255, 255, 255, 0.1); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #000000; + --color-stroke-focus-2: #ffffff; + --color-neutral-shadow-ambient: rgba(0,0,0,0.24); + --color-neutral-shadow-key: rgba(0,0,0,0.28); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.12); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.40); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.48); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #3f1011; + --color-palette-red-background-2: #751d1f; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #e37d80; + --color-palette-red-border-1: #d13438; + --color-palette-red-border-2: #e37d80; + --color-palette-red-foreground-1: #e37d80; + --color-palette-red-foreground-2: #f1bbbc; + --color-palette-red-foreground-3: #e37d80; + --color-palette-red-foreground-inverted: #d13438; + --color-palette-green-background-1: #052505; + --color-palette-green-background-2: #094509; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #54b054; + --color-palette-green-border-1: #107c10; + --color-palette-green-border-2: #9fd89f; + --color-palette-green-foreground-1: #54b054; + --color-palette-green-foreground-2: #9fd89f; + --color-palette-green-foreground-3: #9fd89f; + --color-palette-green-foreground-inverted: #107c10; + --color-palette-dark-orange-background-1: #411200; + --color-palette-dark-orange-background-2: #7a2101; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #e9835e; + --color-palette-dark-orange-border-1: #da3b01; + --color-palette-dark-orange-border-2: #e9835e; + --color-palette-dark-orange-foreground-1: #e9835e; + --color-palette-dark-orange-foreground-2: #f4bfab; + --color-palette-dark-orange-foreground-3: #e9835e; + --color-palette-yellow-background-1: #4c4400; + --color-palette-yellow-background-2: #817400; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #feee66; + --color-palette-yellow-border-1: #fde300; + --color-palette-yellow-border-2: #fdea3d; + --color-palette-yellow-foreground-1: #feee66; + --color-palette-yellow-foreground-2: #fef7b2; + --color-palette-yellow-foreground-3: #fdea3d; + --color-palette-yellow-foreground-inverted: #817400; + --color-palette-berry-background-1: #3a1136; + --color-palette-berry-background-2: #6d2064; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #da7ed0; + --color-palette-berry-border-1: #c239b3; + --color-palette-berry-border-2: #d161c4; + --color-palette-berry-foreground-1: #da7ed0; + --color-palette-berry-foreground-2: #edbbe7; + --color-palette-berry-foreground-3: #d161c4; + --color-palette-marigold-background-1: #463100; + --color-palette-marigold-background-2: #835b00; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #f2c661; + --color-palette-marigold-border-1: #eaa300; + --color-palette-marigold-border-2: #efb839; + --color-palette-marigold-foreground-1: #f2c661; + --color-palette-marigold-foreground-2: #f9e2ae; + --color-palette-marigold-foreground-3: #efb839; + --color-palette-light-green-background-1: #063004; + --color-palette-light-green-background-2: #0b5a08; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #5ec75a; + --color-palette-light-green-border-1: #13a10e; + --color-palette-light-green-border-2: #3db838; + --color-palette-light-green-foreground-1: #5ec75a; + --color-palette-light-green-foreground-2: #a7e3a5; + --color-palette-light-green-foreground-3: #3db838; + --color-palette-anchor-background-2: #202427; + --color-palette-anchor-border-active: #808a90; + --color-palette-anchor-foreground-2: #bcc3c7; + --color-palette-beige-background-2: #444241; + --color-palette-beige-border-active: #afabaa; + --color-palette-beige-foreground-2: #d7d4d4; + --color-palette-blue-background-2: #004377; + --color-palette-blue-border-active: #5caae5; + --color-palette-blue-foreground-2: #a9d3f2; + --color-palette-brass-background-2: #553e06; + --color-palette-brass-border-active: #c1a256; + --color-palette-brass-foreground-2: #e0cea2; + --color-palette-brown-background-2: #50301a; + --color-palette-brown-border-active: #bb8f6f; + --color-palette-brown-foreground-2: #ddc3b0; + --color-palette-cornflower-background-2: #2c3c85; + --color-palette-cornflower-border-active: #93a4f4; + --color-palette-cornflower-foreground-2: #c8d1fa; + --color-palette-cranberry-background-2: #6e0811; + --color-palette-cranberry-border-active: #dc626d; + --color-palette-cranberry-foreground-2: #eeacb2; + --color-palette-dark-green-background-2: #063b06; + --color-palette-dark-green-border-active: #4da64d; + --color-palette-dark-green-foreground-2: #9ad29a; + --color-palette-dark-red-background-2: #590815; + --color-palette-dark-red-border-active: #ac4f5e; + --color-palette-dark-red-foreground-2: #d69ca5; + --color-palette-forest-background-2: #294903; + --color-palette-forest-border-active: #85b44c; + --color-palette-forest-foreground-2: #bdd99b; + --color-palette-gold-background-2: #6c5700; + --color-palette-gold-border-active: #dac157; + --color-palette-gold-foreground-2: #ecdfa5; + --color-palette-grape-background-2: #4c0d55; + --color-palette-grape-border-active: #b55fc1; + --color-palette-grape-foreground-2: #d9a7e0; + --color-palette-lavender-background-2: #3f3682; + --color-palette-lavender-border-active: #a79cf1; + --color-palette-lavender-foreground-2: #d2ccf8; + --color-palette-light-teal-background-2: #00666d; + --color-palette-light-teal-border-active: #58d3db; + --color-palette-light-teal-foreground-2: #a6e9ed; + --color-palette-lilac-background-2: #63276d; + --color-palette-lilac-border-active: #cf87da; + --color-palette-lilac-foreground-2: #e6bfed; + --color-palette-magenta-background-2: #6b0043; + --color-palette-magenta-border-active: #d957a8; + --color-palette-magenta-foreground-2: #eca5d1; + --color-palette-mink-background-2: #343231; + --color-palette-mink-border-active: #9e9b99; + --color-palette-mink-foreground-2: #cecccb; + --color-palette-navy-background-2: #001665; + --color-palette-navy-border-active: #546fd2; + --color-palette-navy-foreground-2: #a3b2e8; + --color-palette-peach-background-2: #8f4e00; + --color-palette-peach-border-active: #ffba66; + --color-palette-peach-foreground-2: #ffddb3; + --color-palette-pink-background-2: #80215d; + --color-palette-pink-border-active: #ef85c8; + --color-palette-pink-foreground-2: #f7c0e3; + --color-palette-platinum-background-2: #3b4447; + --color-palette-platinum-border-active: #a0adb2; + --color-palette-platinum-foreground-2: #cdd6d8; + --color-palette-plum-background-2: #5a003b; + --color-palette-plum-border-active: #ad4589; + --color-palette-plum-foreground-2: #d696c0; + --color-palette-pumpkin-background-2: #712d09; + --color-palette-pumpkin-border-active: #df8e64; + --color-palette-pumpkin-foreground-2: #efc4ad; + --color-palette-purple-background-2: #341a51; + --color-palette-purple-border-active: #9470bd; + --color-palette-purple-foreground-2: #c6b1de; + --color-palette-royal-blue-background-2: #002c4e; + --color-palette-royal-blue-border-active: #4a89ba; + --color-palette-royal-blue-foreground-2: #9abfdc; + --color-palette-seafoam-background-2: #00723b; + --color-palette-seafoam-border-active: #5ae0a0; + --color-palette-seafoam-foreground-2: #a8f0cd; + --color-palette-steel-background-2: #00333f; + --color-palette-steel-border-active: #4496a9; + --color-palette-steel-foreground-2: #94c8d4; + --color-palette-teal-background-2: #02494c; + --color-palette-teal-border-active: #4cb4b7; + --color-palette-teal-foreground-2: #9bd9db; + --color-status-success-background-1: #052505; + --color-status-success-background-2: #094509; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #54b054; + --color-status-success-foreground-2: #9fd89f; + --color-status-success-foreground-3: #9fd89f; + --color-status-success-foreground-inverted: #0e700e; + --color-status-success-border-active: #54b054; + --color-status-success-border-1: #107c10; + --color-status-success-border-2: #9fd89f; + --color-status-warning-background-1: #4a1e04; + --color-status-warning-background-2: #8a3707; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #faa06b; + --color-status-warning-foreground-2: #fdcfb4; + --color-status-warning-foreground-3: #f98845; + --color-status-warning-foreground-inverted: #bc4b09; + --color-status-warning-border-active: #faa06b; + --color-status-warning-border-1: #f7630c; + --color-status-warning-border-2: #f98845; + --color-status-danger-background-1: #3b0509; + --color-status-danger-background-2: #6e0811; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #dc626d; + --color-status-danger-foreground-2: #eeacb2; + --color-status-danger-foreground-3: #eeacb2; + --color-status-danger-foreground-inverted: #b10e1c; + --color-status-danger-border-active: #dc626d; + --color-status-danger-border-1: #c50f1f; + --color-status-danger-border-2: #dc626d; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); + --shadow-4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28); + --shadow-8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); + --shadow-16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); + --shadow-28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28); + --shadow-64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); + } +} diff --git a/packages/react-components/react-tailwind-theme/css/tokens.css b/packages/react-components/react-tailwind-theme/css/tokens.css index 7e325ea530c3c1..9d16adb2088a52 100644 --- a/packages/react-components/react-tailwind-theme/css/tokens.css +++ b/packages/react-components/react-tailwind-theme/css/tokens.css @@ -9,11 +9,12 @@ * 467 Fluent tokens: 467 registered, none excluded. * * `inline` is MANDATORY: it substitutes the canonical var(--token-name) into each - * utility, so values resolve per-element against the nearest FluentProvider. A - * plain `@theme` alias would freeze resolution at `:root`, where token values do - * not exist. `reference` suppresses the self-referential aliases that plain + * utility, so values resolve per-element — the `:root, :host` defaults below, + * overridden per subtree by the theme classes (css/themes.css, theming Phase 2b). + * A plain `@theme` alias would freeze resolution at `:root`, breaking scoped + * theming. `reference` suppresses the self-referential aliases that plain * `inline` would emit now that each runtime variable IS its theme key (theming - * Phase 2a) — the runtime values come from FluentProvider, not this file. + * Phase 2a) — the values are emitted in the fui.theme block below, not by JS. * * SPACING IS THE ONE EXCEPTION: --spacing-horizontal-* / --spacing-vertical-* are * ALIASES OF THE NUMERIC AXIS — calc(var(--spacing) * N), the same shape p-12 @@ -540,10 +541,9 @@ * * THE OLD camelCase NAMES (--colorNeutralBackground1, --spacingHorizontalM, …) * ARE GONE for the ENTIRE token set (option B, theming Phase 2a): single - * vocabulary, documented major break for hand-written consumer CSS. - * FluentProvider's runtime theme tag writes values under BOTH vocabularies on - * provider elements until theming Phase 2b removes it — the camelCase half feeds - * no shipped CSS or tokens.* string anymore. + * vocabulary, documented major break for hand-written consumer CSS. Theming + * Phase 2b removed FluentProvider's runtime theme style tag, so this block (plus + * the theme classes in css/themes.css) is the ONLY writer of token values. * * Emitted ONCE PER DOCUMENT (D13): `@reference` drops this block, so component * `*.module.css` output stays free of theme declarations; css/emit.css compiles it @@ -600,5 +600,446 @@ --spacing-vertical-xl: calc(var(--spacing) * 20); --spacing-vertical-xxl: calc(var(--spacing) * 24); --spacing-vertical-xxxl: calc(var(--spacing) * 32); + + /* + * DEFAULT THEME VALUES (web light) — theming Phase 2b. Since the removal of + * FluentProvider's runtime theme style tag, these declarations are the sole + * default value source for the theme-variant canonical variables. Non-default + * themes are shipped as classes in css/themes.css (same layer); a theme class + * on any DOM node overrides these for that subtree. + */ + --color-neutral-foreground-1: #242424; + --color-neutral-foreground-1-hover: #242424; + --color-neutral-foreground-1-pressed: #242424; + --color-neutral-foreground-1-selected: #242424; + --color-neutral-foreground-2: #424242; + --color-neutral-foreground-2-hover: #242424; + --color-neutral-foreground-2-pressed: #242424; + --color-neutral-foreground-2-selected: #242424; + --color-neutral-foreground-2-brand-hover: #0f6cbd; + --color-neutral-foreground-2-brand-pressed: #115ea3; + --color-neutral-foreground-2-brand-selected: #0f6cbd; + --color-neutral-foreground-3: #616161; + --color-neutral-foreground-3-hover: #424242; + --color-neutral-foreground-3-pressed: #424242; + --color-neutral-foreground-3-selected: #424242; + --color-neutral-foreground-3-brand-hover: #0f6cbd; + --color-neutral-foreground-3-brand-pressed: #115ea3; + --color-neutral-foreground-3-brand-selected: #0f6cbd; + --color-neutral-foreground-4: #707070; + --color-neutral-foreground-5: #616161; + --color-neutral-foreground-5-hover: #242424; + --color-neutral-foreground-5-pressed: #242424; + --color-neutral-foreground-5-selected: #242424; + --color-neutral-foreground-disabled: #bdbdbd; + --color-brand-foreground-link: #115ea3; + --color-brand-foreground-link-hover: #0f548c; + --color-brand-foreground-link-pressed: #0c3b5e; + --color-brand-foreground-link-selected: #115ea3; + --color-neutral-foreground-2-link: #424242; + --color-neutral-foreground-2-link-hover: #242424; + --color-neutral-foreground-2-link-pressed: #242424; + --color-neutral-foreground-2-link-selected: #242424; + --color-compound-brand-foreground-1: #0f6cbd; + --color-compound-brand-foreground-1-hover: #115ea3; + --color-compound-brand-foreground-1-pressed: #0f548c; + --color-neutral-foreground-on-brand: #ffffff; + --color-neutral-foreground-inverted: #ffffff; + --color-neutral-foreground-inverted-hover: #ffffff; + --color-neutral-foreground-inverted-pressed: #ffffff; + --color-neutral-foreground-inverted-selected: #ffffff; + --color-neutral-foreground-inverted-2: #ffffff; + --color-neutral-foreground-static-inverted: #ffffff; + --color-neutral-foreground-inverted-link: #ffffff; + --color-neutral-foreground-inverted-link-hover: #ffffff; + --color-neutral-foreground-inverted-link-pressed: #ffffff; + --color-neutral-foreground-inverted-link-selected: #ffffff; + --color-neutral-foreground-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-brand-foreground-1: #0f6cbd; + --color-brand-foreground-2: #115ea3; + --color-brand-foreground-2-hover: #0f548c; + --color-brand-foreground-2-pressed: #0a2e4a; + --color-neutral-foreground-1-static: #242424; + --color-brand-foreground-inverted: #479ef5; + --color-brand-foreground-inverted-hover: #62abf5; + --color-brand-foreground-inverted-pressed: #479ef5; + --color-brand-foreground-on-light: #0f6cbd; + --color-brand-foreground-on-light-hover: #115ea3; + --color-brand-foreground-on-light-pressed: #0e4775; + --color-brand-foreground-on-light-selected: #0f548c; + --color-neutral-background-1: #ffffff; + --color-neutral-background-1-hover: #f5f5f5; + --color-neutral-background-1-pressed: #e0e0e0; + --color-neutral-background-1-selected: #ebebeb; + --color-neutral-background-2: #fafafa; + --color-neutral-background-2-hover: #f0f0f0; + --color-neutral-background-2-pressed: #dbdbdb; + --color-neutral-background-2-selected: #e6e6e6; + --color-neutral-background-3: #f5f5f5; + --color-neutral-background-3-hover: #ebebeb; + --color-neutral-background-3-pressed: #d6d6d6; + --color-neutral-background-3-selected: #e0e0e0; + --color-neutral-background-4: #f0f0f0; + --color-neutral-background-4-hover: #fafafa; + --color-neutral-background-4-pressed: #f5f5f5; + --color-neutral-background-4-selected: #ffffff; + --color-neutral-background-5: #ebebeb; + --color-neutral-background-5-hover: #f5f5f5; + --color-neutral-background-5-pressed: #f0f0f0; + --color-neutral-background-5-selected: #fafafa; + --color-neutral-background-6: #e6e6e6; + --color-neutral-background-7: #00000000; + --color-neutral-background-7-hover: #ebebeb; + --color-neutral-background-7-pressed: #d6d6d6; + --color-neutral-background-7-selected: #00000000; + --color-neutral-background-8: #fcfcfc; + --color-neutral-background-inverted: #292929; + --color-neutral-background-inverted-hover: #3d3d3d; + --color-neutral-background-inverted-pressed: #1f1f1f; + --color-neutral-background-inverted-selected: #383838; + --color-neutral-background-static: #333333; + --color-neutral-background-alpha: rgba(255, 255, 255, 0.5); + --color-neutral-background-alpha-2: rgba(255, 255, 255, 0.8); + --color-subtle-background: transparent; + --color-subtle-background-hover: #f5f5f5; + --color-subtle-background-pressed: #e0e0e0; + --color-subtle-background-selected: #ebebeb; + --color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7); + --color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5); + --color-subtle-background-light-alpha-selected: transparent; + --color-subtle-background-inverted: transparent; + --color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1); + --color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3); + --color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2); + --color-transparent-background: transparent; + --color-transparent-background-hover: transparent; + --color-transparent-background-pressed: transparent; + --color-transparent-background-selected: transparent; + --color-neutral-background-disabled: #f0f0f0; + --color-neutral-background-disabled-2: #ffffff; + --color-neutral-background-inverted-disabled: rgba(255, 255, 255, 0.1); + --color-neutral-stencil-1: #e6e6e6; + --color-neutral-stencil-2: #fafafa; + --color-neutral-stencil-1-alpha: rgba(0, 0, 0, 0.1); + --color-neutral-stencil-2-alpha: rgba(0, 0, 0, 0.05); + --color-background-overlay: rgba(0, 0, 0, 0.4); + --color-scrollbar-overlay: rgba(0, 0, 0, 0.5); + --color-brand-background: #0f6cbd; + --color-brand-background-hover: #115ea3; + --color-brand-background-pressed: #0c3b5e; + --color-brand-background-selected: #0f548c; + --color-compound-brand-background: #0f6cbd; + --color-compound-brand-background-hover: #115ea3; + --color-compound-brand-background-pressed: #0f548c; + --color-brand-background-static: #0f6cbd; + --color-brand-background-2: #ebf3fc; + --color-brand-background-2-hover: #cfe4fa; + --color-brand-background-2-pressed: #96c6fa; + --color-brand-background-3-static: #0f548c; + --color-brand-background-4-static: #0c3b5e; + --color-brand-background-inverted: #ffffff; + --color-brand-background-inverted-hover: #ebf3fc; + --color-brand-background-inverted-pressed: #b4d6fa; + --color-brand-background-inverted-selected: #cfe4fa; + --color-neutral-card-background: #fafafa; + --color-neutral-card-background-hover: #ffffff; + --color-neutral-card-background-pressed: #f5f5f5; + --color-neutral-card-background-selected: #ebebeb; + --color-neutral-card-background-disabled: #f0f0f0; + --color-neutral-stroke-accessible: #616161; + --color-neutral-stroke-accessible-hover: #575757; + --color-neutral-stroke-accessible-pressed: #4d4d4d; + --color-neutral-stroke-accessible-selected: #0f6cbd; + --color-neutral-stroke-1: #d1d1d1; + --color-neutral-stroke-1-hover: #c7c7c7; + --color-neutral-stroke-1-pressed: #b3b3b3; + --color-neutral-stroke-1-selected: #bdbdbd; + --color-neutral-stroke-2: #e0e0e0; + --color-neutral-stroke-3: #f0f0f0; + --color-neutral-stroke-4: #ebebeb; + --color-neutral-stroke-4-hover: #e0e0e0; + --color-neutral-stroke-4-pressed: #d6d6d6; + --color-neutral-stroke-4-selected: #ebebeb; + --color-neutral-stroke-subtle: #e0e0e0; + --color-neutral-stroke-on-brand: #ffffff; + --color-neutral-stroke-on-brand-2: #ffffff; + --color-neutral-stroke-on-brand-2-hover: #ffffff; + --color-neutral-stroke-on-brand-2-pressed: #ffffff; + --color-neutral-stroke-on-brand-2-selected: #ffffff; + --color-brand-stroke-1: #0f6cbd; + --color-brand-stroke-2: #b4d6fa; + --color-brand-stroke-2-hover: #77b7f7; + --color-brand-stroke-2-pressed: #0f6cbd; + --color-brand-stroke-2-contrast: #b4d6fa; + --color-compound-brand-stroke: #0f6cbd; + --color-compound-brand-stroke-hover: #115ea3; + --color-compound-brand-stroke-pressed: #0f548c; + --color-neutral-stroke-disabled: #e0e0e0; + --color-neutral-stroke-disabled-2: #ebebeb; + --color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4); + --color-transparent-stroke: transparent; + --color-transparent-stroke-interactive: transparent; + --color-transparent-stroke-disabled: transparent; + --color-neutral-stroke-alpha: rgba(0, 0, 0, 0.05); + --color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2); + --color-stroke-focus-1: #ffffff; + --color-stroke-focus-2: #000000; + --color-neutral-shadow-ambient: rgba(0,0,0,0.12); + --color-neutral-shadow-key: rgba(0,0,0,0.14); + --color-neutral-shadow-ambient-lighter: rgba(0,0,0,0.06); + --color-neutral-shadow-key-lighter: rgba(0,0,0,0.07); + --color-neutral-shadow-ambient-darker: rgba(0,0,0,0.20); + --color-neutral-shadow-key-darker: rgba(0,0,0,0.24); + --color-brand-shadow-ambient: rgba(0,0,0,0.30); + --color-brand-shadow-key: rgba(0,0,0,0.25); + --color-palette-red-background-1: #fdf6f6; + --color-palette-red-background-2: #f1bbbc; + --color-palette-red-background-3: #d13438; + --color-palette-red-border-active: #d13438; + --color-palette-red-border-1: #f1bbbc; + --color-palette-red-border-2: #d13438; + --color-palette-red-foreground-1: #bc2f32; + --color-palette-red-foreground-2: #751d1f; + --color-palette-red-foreground-3: #d13438; + --color-palette-red-foreground-inverted: #dc5e62; + --color-palette-green-background-1: #f1faf1; + --color-palette-green-background-2: #9fd89f; + --color-palette-green-background-3: #107c10; + --color-palette-green-border-active: #107c10; + --color-palette-green-border-1: #9fd89f; + --color-palette-green-border-2: #107c10; + --color-palette-green-foreground-1: #0e700e; + --color-palette-green-foreground-2: #094509; + --color-palette-green-foreground-3: #107c10; + --color-palette-green-foreground-inverted: #359b35; + --color-palette-dark-orange-background-1: #fdf6f3; + --color-palette-dark-orange-background-2: #f4bfab; + --color-palette-dark-orange-background-3: #da3b01; + --color-palette-dark-orange-border-active: #da3b01; + --color-palette-dark-orange-border-1: #f4bfab; + --color-palette-dark-orange-border-2: #da3b01; + --color-palette-dark-orange-foreground-1: #c43501; + --color-palette-dark-orange-foreground-2: #7a2101; + --color-palette-dark-orange-foreground-3: #da3b01; + --color-palette-yellow-background-1: #fffef5; + --color-palette-yellow-background-2: #fef7b2; + --color-palette-yellow-background-3: #fde300; + --color-palette-yellow-border-active: #fde300; + --color-palette-yellow-border-1: #fef7b2; + --color-palette-yellow-border-2: #fde300; + --color-palette-yellow-foreground-1: #817400; + --color-palette-yellow-foreground-2: #817400; + --color-palette-yellow-foreground-3: #fde300; + --color-palette-yellow-foreground-inverted: #fef7b2; + --color-palette-berry-background-1: #fdf5fc; + --color-palette-berry-background-2: #edbbe7; + --color-palette-berry-background-3: #c239b3; + --color-palette-berry-border-active: #c239b3; + --color-palette-berry-border-1: #edbbe7; + --color-palette-berry-border-2: #c239b3; + --color-palette-berry-foreground-1: #af33a1; + --color-palette-berry-foreground-2: #6d2064; + --color-palette-berry-foreground-3: #c239b3; + --color-palette-marigold-background-1: #fefbf4; + --color-palette-marigold-background-2: #f9e2ae; + --color-palette-marigold-background-3: #eaa300; + --color-palette-marigold-border-active: #eaa300; + --color-palette-marigold-border-1: #f9e2ae; + --color-palette-marigold-border-2: #eaa300; + --color-palette-marigold-foreground-1: #d39300; + --color-palette-marigold-foreground-2: #835b00; + --color-palette-marigold-foreground-3: #eaa300; + --color-palette-light-green-background-1: #f2fbf2; + --color-palette-light-green-background-2: #a7e3a5; + --color-palette-light-green-background-3: #13a10e; + --color-palette-light-green-border-active: #13a10e; + --color-palette-light-green-border-1: #a7e3a5; + --color-palette-light-green-border-2: #13a10e; + --color-palette-light-green-foreground-1: #11910d; + --color-palette-light-green-foreground-2: #0b5a08; + --color-palette-light-green-foreground-3: #13a10e; + --color-palette-anchor-background-2: #bcc3c7; + --color-palette-anchor-border-active: #394146; + --color-palette-anchor-foreground-2: #202427; + --color-palette-beige-background-2: #d7d4d4; + --color-palette-beige-border-active: #7a7574; + --color-palette-beige-foreground-2: #444241; + --color-palette-blue-background-2: #a9d3f2; + --color-palette-blue-border-active: #0078d4; + --color-palette-blue-foreground-2: #004377; + --color-palette-brass-background-2: #e0cea2; + --color-palette-brass-border-active: #986f0b; + --color-palette-brass-foreground-2: #553e06; + --color-palette-brown-background-2: #ddc3b0; + --color-palette-brown-border-active: #8e562e; + --color-palette-brown-foreground-2: #50301a; + --color-palette-cornflower-background-2: #c8d1fa; + --color-palette-cornflower-border-active: #4f6bed; + --color-palette-cornflower-foreground-2: #2c3c85; + --color-palette-cranberry-background-2: #eeacb2; + --color-palette-cranberry-border-active: #c50f1f; + --color-palette-cranberry-foreground-2: #6e0811; + --color-palette-dark-green-background-2: #9ad29a; + --color-palette-dark-green-border-active: #0b6a0b; + --color-palette-dark-green-foreground-2: #063b06; + --color-palette-dark-red-background-2: #d69ca5; + --color-palette-dark-red-border-active: #750b1c; + --color-palette-dark-red-foreground-2: #420610; + --color-palette-forest-background-2: #bdd99b; + --color-palette-forest-border-active: #498205; + --color-palette-forest-foreground-2: #294903; + --color-palette-gold-background-2: #ecdfa5; + --color-palette-gold-border-active: #c19c00; + --color-palette-gold-foreground-2: #6c5700; + --color-palette-grape-background-2: #d9a7e0; + --color-palette-grape-border-active: #881798; + --color-palette-grape-foreground-2: #4c0d55; + --color-palette-lavender-background-2: #d2ccf8; + --color-palette-lavender-border-active: #7160e8; + --color-palette-lavender-foreground-2: #3f3682; + --color-palette-light-teal-background-2: #a6e9ed; + --color-palette-light-teal-border-active: #00b7c3; + --color-palette-light-teal-foreground-2: #00666d; + --color-palette-lilac-background-2: #e6bfed; + --color-palette-lilac-border-active: #b146c2; + --color-palette-lilac-foreground-2: #63276d; + --color-palette-magenta-background-2: #eca5d1; + --color-palette-magenta-border-active: #bf0077; + --color-palette-magenta-foreground-2: #6b0043; + --color-palette-mink-background-2: #cecccb; + --color-palette-mink-border-active: #5d5a58; + --color-palette-mink-foreground-2: #343231; + --color-palette-navy-background-2: #a3b2e8; + --color-palette-navy-border-active: #0027b4; + --color-palette-navy-foreground-2: #001665; + --color-palette-peach-background-2: #ffddb3; + --color-palette-peach-border-active: #ff8c00; + --color-palette-peach-foreground-2: #8f4e00; + --color-palette-pink-background-2: #f7c0e3; + --color-palette-pink-border-active: #e43ba6; + --color-palette-pink-foreground-2: #80215d; + --color-palette-platinum-background-2: #cdd6d8; + --color-palette-platinum-border-active: #69797e; + --color-palette-platinum-foreground-2: #3b4447; + --color-palette-plum-background-2: #d696c0; + --color-palette-plum-border-active: #77004d; + --color-palette-plum-foreground-2: #43002b; + --color-palette-pumpkin-background-2: #efc4ad; + --color-palette-pumpkin-border-active: #ca5010; + --color-palette-pumpkin-foreground-2: #712d09; + --color-palette-purple-background-2: #c6b1de; + --color-palette-purple-border-active: #5c2e91; + --color-palette-purple-foreground-2: #341a51; + --color-palette-royal-blue-background-2: #9abfdc; + --color-palette-royal-blue-border-active: #004e8c; + --color-palette-royal-blue-foreground-2: #002c4e; + --color-palette-seafoam-background-2: #a8f0cd; + --color-palette-seafoam-border-active: #00cc6a; + --color-palette-seafoam-foreground-2: #00723b; + --color-palette-steel-background-2: #94c8d4; + --color-palette-steel-border-active: #005b70; + --color-palette-steel-foreground-2: #00333f; + --color-palette-teal-background-2: #9bd9db; + --color-palette-teal-border-active: #038387; + --color-palette-teal-foreground-2: #02494c; + --color-status-success-background-1: #f1faf1; + --color-status-success-background-2: #9fd89f; + --color-status-success-background-3: #107c10; + --color-status-success-foreground-1: #0e700e; + --color-status-success-foreground-2: #094509; + --color-status-success-foreground-3: #107c10; + --color-status-success-foreground-inverted: #54b054; + --color-status-success-border-active: #107c10; + --color-status-success-border-1: #9fd89f; + --color-status-success-border-2: #107c10; + --color-status-warning-background-1: #fff9f5; + --color-status-warning-background-2: #fdcfb4; + --color-status-warning-background-3: #f7630c; + --color-status-warning-foreground-1: #bc4b09; + --color-status-warning-foreground-2: #8a3707; + --color-status-warning-foreground-3: #bc4b09; + --color-status-warning-foreground-inverted: #faa06b; + --color-status-warning-border-active: #f7630c; + --color-status-warning-border-1: #fdcfb4; + --color-status-warning-border-2: #bc4b09; + --color-status-danger-background-1: #fdf3f4; + --color-status-danger-background-2: #eeacb2; + --color-status-danger-background-3: #c50f1f; + --color-status-danger-background-3-hover: #b10e1c; + --color-status-danger-background-3-pressed: #960b18; + --color-status-danger-foreground-1: #b10e1c; + --color-status-danger-foreground-2: #6e0811; + --color-status-danger-foreground-3: #c50f1f; + --color-status-danger-foreground-inverted: #dc626d; + --color-status-danger-border-active: #c50f1f; + --color-status-danger-border-1: #eeacb2; + --color-status-danger-border-2: #c50f1f; + --radius-none: 0; + --radius-small: 2px; + --radius-medium: 4px; + --radius-large: 6px; + --radius-x-large: 8px; + --radius-2-x-large: 12px; + --radius-3-x-large: 16px; + --radius-4-x-large: 24px; + --radius-5-x-large: 32px; + --radius-6-x-large: 40px; + --radius-circular: 10000px; + --font-base: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --font-monospace: Consolas, 'Courier New', Courier, monospace; + --font-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; + --text-base-100: 10px; + --text-base-200: 12px; + --text-base-300: 14px; + --text-base-400: 16px; + --text-base-500: 20px; + --text-base-600: 24px; + --text-hero-700: 28px; + --text-hero-800: 32px; + --text-hero-900: 40px; + --text-hero-1000: 68px; + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --leading-base-100: 14px; + --leading-base-200: 16px; + --leading-base-300: 20px; + --leading-base-400: 22px; + --leading-base-500: 28px; + --leading-base-600: 32px; + --leading-hero-700: 36px; + --leading-hero-800: 40px; + --leading-hero-900: 52px; + --leading-hero-1000: 92px; + --shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); + --shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); + --shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); + --shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); + --shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14); + --shadow-64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14); + --shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25); + --shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25); + --shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25); + --shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25); + --shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25); + --shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25); + --duration-ultra-fast: 50ms; + --duration-faster: 100ms; + --duration-fast: 150ms; + --duration-normal: 200ms; + --duration-gentle: 250ms; + --duration-slow: 300ms; + --duration-slower: 400ms; + --duration-ultra-slow: 500ms; + --ease-accelerate-max: cubic-bezier(0.9,0.1,1,0.2); + --ease-accelerate-mid: cubic-bezier(1,0,1,1); + --ease-accelerate-min: cubic-bezier(0.8,0,0.78,1); + --ease-decelerate-max: cubic-bezier(0.1,0.9,0.2,1); + --ease-decelerate-mid: cubic-bezier(0,0,0,1); + --ease-decelerate-min: cubic-bezier(0.33,0,0.1,1); + --ease-easy-ease-max: cubic-bezier(0.8,0,0.2,1); + --ease-easy-ease: cubic-bezier(0.33,0,0.67,1); + --ease-linear: cubic-bezier(0,0,1,1); } } diff --git a/packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js b/packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js index 1cc4eb2c59d788..8de258e892e9f8 100644 --- a/packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js +++ b/packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js @@ -91,7 +91,13 @@ const TOKENS_PACKAGE = path.join(REPO_ROOT, 'packages', 'tokens'); const TOKENS_SOURCE = path.join(TOKENS_PACKAGE, 'src', 'tokens.ts'); const SPACINGS_SOURCE = path.join(TOKENS_PACKAGE, 'src', 'global', 'spacings.ts'); const STROKE_WIDTHS_SOURCE = path.join(TOKENS_PACKAGE, 'src', 'global', 'strokeWidths.ts'); +const THEME_VALUES_SOURCE = path.join(TOKENS_PACKAGE, 'theme-values.json'); +const THEME_CLASSNAMES_SOURCE = path.join(TOKENS_PACKAGE, 'src', 'themes', 'themeClassNames.ts'); const DEFAULT_OUTPUT = path.join(PACKAGE_ROOT, 'css', 'tokens.css'); +const THEMES_OUTPUT = path.join(PACKAGE_ROOT, 'css', 'themes.css'); + +/** The theme whose values are emitted as the `:root, :host` defaults (theming Phase 2b). */ +const DEFAULT_THEME = 'webLightTheme'; const GENERATOR_ID = 'packages/react-components/react-tailwind-theme/scripts/generate-tokens-css.js'; @@ -387,6 +393,164 @@ function readStrokeWidthScale() { }); } +/** + * Reads `packages/tokens/src/themes/themeClassNames.ts` as text and extracts the shipped + * theme → class-name constants, asserting each class name equals its derivation from the + * theme export name (`fui-theme-` + kebab of the name minus `Theme`; digits attach to the + * preceding segment, so `teamsDarkV21Theme` → `fui-theme-teams-dark-v21` — deliberately + * NOT this file's `kebabCase`, whose letter→digit rule would produce `v-21`). + * + * Text extraction for the same reason as `readTokens`: no build step, no dependency edge + * on @fluentui/tokens. `themeClassNames.test.ts` in packages/tokens asserts the same + * derivation from the jest side. + * + * @returns {Record} theme export name → class name + */ +function readThemeClassNames() { + const text = fs.readFileSync(THEME_CLASSNAMES_SOURCE, 'utf8'); + + /** @type {Record} */ + const classNames = {}; + const entry = /^export const ([A-Za-z][A-Za-z0-9]*Theme)ClassName = '([^']+)';$/gm; + let match; + while ((match = entry.exec(text)) !== null) { + classNames[match[1]] = match[2]; + } + + if (Object.keys(classNames).length === 0) { + throw new Error(`${THEME_CLASSNAMES_SOURCE}: parsed zero theme class-name constants — the file shape changed.`); + } + + for (const [themeName, className] of Object.entries(classNames)) { + const base = themeName.replace(/Theme$/, ''); + const derived = `fui-theme-${base.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}`; + if (className !== derived) { + throw new Error( + `${THEME_CLASSNAMES_SOURCE}: \`${themeName}ClassName\` is \`${className}\` but the derivation from the ` + + `export name is \`${derived}\`. The class names are derived, not free-form — fix one side.`, + ); + } + } + + return classNames; +} + +/** + * Reads the committed `packages/tokens/theme-values.json` snapshot — the VALUE source for + * the theme emission (theming Phase 2b). The snapshot exists because theme values are + * computed (`createLightTheme(brandWeb)`, …) and so cannot be text-scraped the way + * `tokens.ts` is; `packages/tokens/src/themes/themeValues.test.ts` asserts on every jest + * run that it deep-equals the computed themes. + * + * @returns {Record>} theme export name → (token → value) + */ +function readThemeValues() { + if (!fs.existsSync(THEME_VALUES_SOURCE)) { + throw new Error( + `${THEME_VALUES_SOURCE} is missing. Run \`yarn workspace @fluentui/tokens generate-theme-values\` ` + + '(after building packages/tokens) and commit the result.', + ); + } + + const document = JSON.parse(fs.readFileSync(THEME_VALUES_SOURCE, 'utf8')); + + if (!document.themes || typeof document.themes !== 'object') { + throw new Error(`${THEME_VALUES_SOURCE}: expected a top-level \`themes\` object.`); + } + + return document.themes; +} + +/** + * Cross-asserts the three inputs of the theme emission and splits the token set: + * + * - the snapshot's theme set must equal the class-name constants' theme set; + * - every theme must carry exactly the same keys: every non-zIndex token, no extras + * (zIndex tokens are theme-absent by design — their defaults ride the `tokens.*` + * var() fallback); + * - every theme's spacing/stroke values must equal the pinned scales — those 26 tokens + * are THEME-INVARIANT and already emitted at `:root, :host` in their density-knob + * calc form, which a literal per-theme re-emission would silently break, so they are + * asserted identical and EXCLUDED from the per-theme classes. + * + * @param {{ name: string, value: string }[]} tokens parsed tokens.ts entries + * @returns {{ + * variantTokens: { name: string, canonical: string }[], + * themes: Record>, + * classNames: Record, + * }} + */ +function analyzeThemeEmission(tokens) { + const classNames = readThemeClassNames(); + const themes = readThemeValues(); + + const snapshotThemes = Object.keys(themes).sort(); + const constantThemes = Object.keys(classNames).sort(); + if (JSON.stringify(snapshotThemes) !== JSON.stringify(constantThemes)) { + throw new Error( + `Shipped-theme sets disagree: theme-values.json has [${snapshotThemes}] but themeClassNames.ts has ` + + `[${constantThemes}]. Regenerate the snapshot and/or update the constants.`, + ); + } + if (!themes[DEFAULT_THEME]) { + throw new Error(`theme-values.json is missing the default theme \`${DEFAULT_THEME}\`.`); + } + + /** @type {{ name: string, canonical: string }[]} */ + const variantTokens = []; + /** @type {{ name: string, expected: string }[]} */ + const invariantTokens = []; + /** @type {string[]} */ + const themeAbsentTokens = []; + + for (const { name } of tokens) { + const classification = classify(name); + if (classification.kind !== 'register') { + continue; + } + if (classification.group.scale) { + const px = classification.step.px; + invariantTokens.push({ name, expected: px === 0 ? '0' : `${px}px` }); + } else if (classification.group.prefix === 'zIndex') { + themeAbsentTokens.push(name); + } else { + variantTokens.push({ name, canonical: /** @type {string} */ (classification.canonical) }); + } + } + + const expectedKeys = [...variantTokens.map(token => token.name), ...invariantTokens.map(token => token.name)].sort(); + + for (const [themeName, theme] of Object.entries(themes)) { + const themeKeys = Object.keys(theme).sort(); + if (JSON.stringify(themeKeys) !== JSON.stringify(expectedKeys)) { + const missing = expectedKeys.filter(key => !(key in theme)); + const extra = themeKeys.filter(key => !expectedKeys.includes(key)); + throw new Error( + `Theme \`${themeName}\` keys drifted from tokens.ts (zIndex excluded): ` + + `missing [${missing}], extra [${extra}]. Regenerate theme-values.json.`, + ); + } + + for (const { name, expected } of invariantTokens) { + if (theme[name] !== expected) { + throw new Error( + `Theme \`${themeName}\` has \`${name}: ${theme[name]}\` but spacing/stroke tokens are theme-invariant ` + + `(pinned ${expected}). The density-knob emission at :root depends on this — a genuinely divergent ` + + 'theme needs a design decision, not a silent literal emission.', + ); + } + } + + for (const name of themeAbsentTokens) { + if (name in theme) { + throw new Error(`Theme \`${themeName}\` unexpectedly carries the theme-absent token \`${name}\`.`); + } + } + } + + return { variantTokens, themes, classNames }; +} + /** * Token-name prefix → Tailwind theme namespace. Order matters: the FIRST matching entry * wins, so longer prefixes that share a stem (fontFamily/fontSize/fontWeight) come first. @@ -650,6 +814,11 @@ function render(options = {}) { // upstream scale change throws here instead of silently shipping a stale hardcoded value. readSpacingScale(); readStrokeWidthScale(); + // Theming Phase 2b: the default (web light) theme values are emitted at `:root, :host` + // right below the spacing/stroke block — this artifact is now the SOLE value source for + // the canonical token variables (FluentProvider's runtime theme style tag is gone). + const { variantTokens, themes } = analyzeThemeEmission(tokens); + const defaultTheme = themes[DEFAULT_THEME]; /** @type {Map} */ const sections = new Map(); @@ -742,11 +911,12 @@ function render(options = {}) { out.push(` * ${tokens.length} Fluent tokens: ${registered} registered, ${excludedNote}.`); out.push(' *'); out.push(' * `inline` is MANDATORY: it substitutes the canonical var(--token-name) into each'); - out.push(' * utility, so values resolve per-element against the nearest FluentProvider. A'); - out.push(' * plain `@theme` alias would freeze resolution at `:root`, where token values do'); - out.push(' * not exist. `reference` suppresses the self-referential aliases that plain'); + out.push(' * utility, so values resolve per-element — the `:root, :host` defaults below,'); + out.push(' * overridden per subtree by the theme classes (css/themes.css, theming Phase 2b).'); + out.push(' * A plain `@theme` alias would freeze resolution at `:root`, breaking scoped'); + out.push(' * theming. `reference` suppresses the self-referential aliases that plain'); out.push(' * `inline` would emit now that each runtime variable IS its theme key (theming'); - out.push(' * Phase 2a) — the runtime values come from FluentProvider, not this file.'); + out.push(' * Phase 2a) — the values are emitted in the fui.theme block below, not by JS.'); out.push(' *'); out.push(' * SPACING IS THE ONE EXCEPTION: --spacing-horizontal-* / --spacing-vertical-* are'); out.push(' * ALIASES OF THE NUMERIC AXIS — calc(var(--spacing) * N), the same shape p-12'); @@ -794,10 +964,9 @@ function render(options = {}) { out.push(' *'); out.push(' * THE OLD camelCase NAMES (--colorNeutralBackground1, --spacingHorizontalM, …)'); out.push(' * ARE GONE for the ENTIRE token set (option B, theming Phase 2a): single'); - out.push(' * vocabulary, documented major break for hand-written consumer CSS.'); - out.push(" * FluentProvider's runtime theme tag writes values under BOTH vocabularies on"); - out.push(' * provider elements until theming Phase 2b removes it — the camelCase half feeds'); - out.push(' * no shipped CSS or tokens.* string anymore.'); + out.push(' * vocabulary, documented major break for hand-written consumer CSS. Theming'); + out.push(" * Phase 2b removed FluentProvider's runtime theme style tag, so this block (plus"); + out.push(' * the theme classes in css/themes.css) is the ONLY writer of token values.'); out.push(' *'); out.push(' * Emitted ONCE PER DOCUMENT (D13): `@reference` drops this block, so component'); out.push(' * `*.module.css` output stays free of theme declarations; css/emit.css compiles it'); @@ -830,6 +999,83 @@ function render(options = {}) { out.push(''); out.push(' /* Spacing — numeric-axis aliases; --spacing (see css/index.css) is the density knob. */'); out.push(...emittedVariables); + out.push(''); + out.push(' /*'); + out.push(' * DEFAULT THEME VALUES (web light) — theming Phase 2b. Since the removal of'); + out.push(" * FluentProvider's runtime theme style tag, these declarations are the sole"); + out.push(' * default value source for the theme-variant canonical variables. Non-default'); + out.push(' * themes are shipped as classes in css/themes.css (same layer); a theme class'); + out.push(' * on any DOM node overrides these for that subtree.'); + out.push(' */'); + for (const { name, canonical } of variantTokens) { + out.push(` ${canonical}: ${defaultTheme[name]};`); + } + out.push(' }'); + out.push('}'); + } + + out.push(''); + + const contents = out.join('\n'); + assertCommentsAreWellFormed(contents); + return contents; +} + +/** + * Renders `css/themes.css` — one CSS class per shipped theme (theming Phase 2b). + * + * THE THEMING CONTRACT: a theme class on ANY DOM node themes that node's subtree (custom + * properties cascade); FluentProvider's `themeClassName` prop applies one to its root and + * propagates it to portals. Theme classes contain ONLY custom-property declarations — + * never styling rules — and live in `@layer fui.theme`, same as the `:root, :host` + * default emission they override. + * + * Each class carries the theme's 433 THEME-VARIANT canonical variables. The 26 + * spacing/stroke tokens are EXCLUDED on purpose: they are theme-invariant (asserted in + * `analyzeThemeEmission`) and already emitted at `:root, :host` in their density-knob + * calc form — a literal per-theme re-emission would freeze `--spacing` overrides inside + * themed subtrees. zIndex tokens are theme-absent; their defaults ride the `tokens.*` + * var() fallback. + * + * @returns {string} + */ +function renderThemes() { + const tokensPackage = JSON.parse(fs.readFileSync(path.join(TOKENS_PACKAGE, 'package.json'), 'utf8')); + const tokens = readTokens(); + readSpacingScale(); + readStrokeWidthScale(); + const { variantTokens, themes, classNames } = analyzeThemeEmission(tokens); + + const out = []; + out.push('/*'); + out.push(' * DO NOT EDIT — generated file.'); + out.push(' *'); + out.push(` * Generator: ${GENERATOR_ID}`); + out.push(` * Source: ${tokensPackage.name}@${tokensPackage.version} (packages/tokens/theme-values.json)`); + out.push(` * Regenerate: node ${GENERATOR_ID}`); + out.push(` * Verify: node ${GENERATOR_ID} --check`); + out.push(' *'); + out.push(' * SHIPPED THEME CLASSES (theming Phase 2b). Applying one of these classes to any'); + out.push(' * DOM node themes that subtree — custom properties cascade. They contain ONLY'); + out.push(' * custom-property declarations, in the same fui.theme layer as the web-light'); + out.push(' * defaults at :root/:host (css/tokens.css), which they override element-locally.'); + out.push(' * The JS constants for these class names ship from @fluentui/tokens /'); + out.push(' * @fluentui/react-theme (webLightThemeClassName, …) — the generator asserts the'); + out.push(' * lockstep on every run.'); + out.push(' *'); + out.push(' * The 26 spacing/strokeWidth tokens are deliberately absent: theme-invariant,'); + out.push(' * emitted once at :root/:host in density-knob form (see css/tokens.css).'); + out.push(' */'); + + for (const [themeName, className] of Object.entries(classNames)) { + const theme = themes[themeName]; + out.push(''); + out.push(`/* ${themeName} — ${variantTokens.length} tokens */`); + out.push('@layer fui.theme {'); + out.push(` .${className} {`); + for (const { name, canonical } of variantTokens) { + out.push(` ${canonical}: ${theme[name]};`); + } out.push(' }'); out.push('}'); } @@ -879,31 +1125,38 @@ function main() { const modifiersIndex = argv.indexOf('--modifiers'); const modifiers = modifiersIndex >= 0 ? argv[modifiersIndex + 1] : undefined; - const contents = render({ modifiers }); + const files = [ + { path: outPath, contents: render({ modifiers }) }, + // themes.css is only written/checked alongside the canonical tokens.css — `--out` + // runs are probe runs of the registration block. + ...(outIndex >= 0 ? [] : [{ path: THEMES_OUTPUT, contents: renderThemes() }]), + ]; - if (check) { - const existing = fs.existsSync(outPath) ? fs.readFileSync(outPath, 'utf8') : null; - if (existing === null) { - console.error(`[generate-tokens-css] MISSING: ${path.relative(REPO_ROOT, outPath)}`); - console.error(`[generate-tokens-css] Run: node ${GENERATOR_ID}`); - process.exitCode = 1; - return; - } - if (existing.replace(/\r\n/g, '\n') !== contents) { - console.error(`[generate-tokens-css] STALE: ${path.relative(REPO_ROOT, outPath)} differs from generator output.`); - console.error(`[generate-tokens-css] Run: node ${GENERATOR_ID}`); - process.exitCode = 1; - return; + for (const file of files) { + const relative = path.relative(REPO_ROOT, file.path); + + if (check) { + const existing = fs.existsSync(file.path) ? fs.readFileSync(file.path, 'utf8') : null; + if (existing === null) { + console.error(`[generate-tokens-css] MISSING: ${relative}`); + console.error(`[generate-tokens-css] Run: node ${GENERATOR_ID}`); + process.exitCode = 1; + continue; + } + if (existing.replace(/\r\n/g, '\n') !== file.contents) { + console.error(`[generate-tokens-css] STALE: ${relative} differs from generator output.`); + console.error(`[generate-tokens-css] Run: node ${GENERATOR_ID}`); + process.exitCode = 1; + continue; + } + console.log(`[generate-tokens-css] OK: ${relative} is up to date.`); + continue; } - console.log(`[generate-tokens-css] OK: ${path.relative(REPO_ROOT, outPath)} is up to date.`); - return; - } - fs.mkdirSync(path.dirname(outPath), { recursive: true }); - fs.writeFileSync(outPath, contents); - console.log( - `[generate-tokens-css] wrote ${path.relative(REPO_ROOT, outPath)} (${Buffer.byteLength(contents)} bytes)`, - ); + fs.mkdirSync(path.dirname(file.path), { recursive: true }); + fs.writeFileSync(file.path, file.contents); + console.log(`[generate-tokens-css] wrote ${relative} (${Buffer.byteLength(file.contents)} bytes)`); + } } if (require.main === module) { @@ -916,7 +1169,11 @@ module.exports = { readTokens, readSpacingScale, readStrokeWidthScale, + readThemeClassNames, + readThemeValues, + analyzeThemeEmission, render, + renderThemes, spacingTokenValue, strokeWidthValue, strokeWidthCanonicalName, From 1b3af972d29939fb58a5c1f7aab19398546fdb9f Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 6 Aug 2026 22:33:52 -0700 Subject: [PATCH 626/640] feat(react-provider)!: themes are static CSS classes; runtime theme tag removed (theming 2b) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING (the migration major): FluentProvider's theme prop (JS theme object) is REPLACED by themeClassName?: string — pass a shipped constant (webDarkThemeClassName, ...) or any class containing only custom-property declarations. The provider injects NO styles: useFluentProviderThemeStyleTag, createCSSRuleFromTheme, serverStyleProps + the SSR style element, the nonce prop + StyleNonceContext (D20.1 retired) and the theme-undefined dev warning are all deleted. Nested providers inherit the resolved class via the new FluentProviderThemeClassName context (useFluentProviderThemeClassName_unstable, @internal); portals keep the EXISTING ThemeClassNameContext propagation (root.className carries the class; bare class under applyStylesToPortals=false). styles hook leads with styles.root now that the theme class may be empty (D15.1 marker-position invariant). react-shared-contexts: ThemeContext_unstable/ThemeProvider_unstable/ ThemeContextValue_unstable removed (sole producer gone); react-theme dep dropped. react-portal-compat: v8 portals apply the RESOLVED theme class from the new context instead of regex-extracting the runtime fui-FluentProvider class (which no longer exists); works for consumer-authored classes too. Tests rewritten to the new contract (37/37 provider, portal-compat green); SSR markup is a plain div (hydration head snapshot now empty); api.md regenerated. Nested-provider custom theming story now demos a module-css theme class. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XB8ax95bxM4N23bUkSm455 --- .../src/PortalCompat.cy.tsx | 4 +- .../src/PortalCompatProvider.test.tsx | 125 +++----------- .../src/PortalCompatProvider.tsx | 44 ++--- .../library/etc/react-provider.api.md | 24 +-- .../library/src/FluentProvider.ts | 3 +- .../FluentProvider-hydrate.test.tsx | 27 +-- .../FluentProvider-node.test.tsx | 117 ++++--------- .../FluentProvider/FluentProvider.module.css | 20 ++- .../FluentProvider/FluentProvider.test.tsx | 70 +++----- .../FluentProvider/FluentProvider.types.ts | 59 +++---- .../FluentProviderThemeClassName.ts | 42 +++++ .../FluentProvider/StyleNonceContext.ts | 30 ---- .../FluentProvider.test.tsx.snap | 2 +- .../createCSSRuleFromTheme.test.ts | 32 ---- .../FluentProvider/createCSSRuleFromTheme.ts | 62 ------- .../src/components/FluentProvider/index.ts | 3 +- .../FluentProvider/renderFluentProvider.tsx | 46 ++--- .../FluentProvider/useFluentProvider.test.tsx | 71 ++++---- .../FluentProvider/useFluentProvider.ts | 61 +------ .../useFluentProviderContextValues.test.ts | 44 ++--- .../useFluentProviderContextValues.ts | 7 +- .../useFluentProviderStyles.styles.ts | 68 +++----- .../useFluentProviderThemeStyleTag.test.tsx | 119 ------------- .../useFluentProviderThemeStyleTag.ts | 163 ------------------ .../react-provider/library/src/index.ts | 3 +- .../library/src/testing/createUseIdMock.ts | 19 -- .../FluentProviderDefault.stories.tsx | 14 +- .../Provider/FluentProviderNested.module.css | 8 + .../Provider/FluentProviderNested.stories.tsx | 18 +- .../library/etc/react-shared-contexts.api.md | 10 -- .../library/package.json | 1 - .../library/src/ThemeContext.ts | 2 - .../library/src/ThemeContext/ThemeContext.ts | 16 -- .../library/src/ThemeContext/index.ts | 2 - .../library/src/index.ts | 3 - 35 files changed, 323 insertions(+), 1016 deletions(-) create mode 100644 packages/react-components/react-provider/library/src/components/FluentProvider/FluentProviderThemeClassName.ts delete mode 100644 packages/react-components/react-provider/library/src/components/FluentProvider/StyleNonceContext.ts delete mode 100644 packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts delete mode 100644 packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts delete mode 100644 packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx delete mode 100644 packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts delete mode 100644 packages/react-components/react-provider/library/src/testing/createUseIdMock.ts delete mode 100644 packages/react-components/react-shared-contexts/library/src/ThemeContext.ts delete mode 100644 packages/react-components/react-shared-contexts/library/src/ThemeContext/ThemeContext.ts delete mode 100644 packages/react-components/react-shared-contexts/library/src/ThemeContext/index.ts diff --git a/packages/react-components/react-portal-compat/src/PortalCompat.cy.tsx b/packages/react-components/react-portal-compat/src/PortalCompat.cy.tsx index 6395fea777b9cc..2e39a733179cd4 100644 --- a/packages/react-components/react-portal-compat/src/PortalCompat.cy.tsx +++ b/packages/react-components/react-portal-compat/src/PortalCompat.cy.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { mount as mountBase } from '@fluentui/scripts-cypress'; import { FluentProvider } from '@fluentui/react-provider'; -import { teamsLightTheme } from '@fluentui/react-theme'; +import { teamsLightThemeClassName } from '@fluentui/react-theme'; import type { JSXElement } from '@fluentui/react-utilities/'; import { PortalCompatProvider } from './PortalCompatProvider'; import { usePortalCompat } from '@fluentui/react-portal-compat-context'; const mount = (element: JSXElement) => { mountBase( - + {element} , ); diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx index 6728226a11dd4a..0fa311f687c11b 100644 --- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx +++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx @@ -1,7 +1,6 @@ -import { ThemeClassNameProvider_unstable as ThemeClassNameProvider } from '@fluentui/react-shared-contexts'; import { usePortalCompat } from '@fluentui/react-portal-compat-context'; -import { FluentProvider, useFluentProviderThemeStyleTag } from '@fluentui/react-provider'; -import { IdPrefixProvider, resetIdsForTests } from '@fluentui/react-utilities'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webDarkThemeClassName } from '@fluentui/react-theme'; import { renderHook } from '@testing-library/react-hooks'; import * as React from 'react'; @@ -10,94 +9,53 @@ import { PortalCompatProvider, useProviderThemeClasses } from './PortalCompatPro // eslint-disable-next-line @typescript-eslint/no-empty-function const noop = () => {}; -const TestWrapperWithMultipleClasses: React.FC<{ children?: React.ReactNode }> = props => { - // Creates a second className with CSS variables - const { styleTagId } = useFluentProviderThemeStyleTag({ - theme: { borderRadiusCircular: '50px' }, - targetDocument: document, - }); - - return ( - - {props.children} - - ); -}; - describe('useProviderThemeClasses', () => { - afterEach(() => { - resetIdsForTests(); - }); - - it('handles classes from FluentProvider', () => { + it('returns the resolved theme class of the closest FluentProvider', () => { const { result } = renderHook(() => useProviderThemeClasses(), { wrapper: (props: { children?: React.ReactNode }) => ( - + {props.children} ), }); - expect(result.current).toMatchInlineSnapshot(` - Array [ - "fui-FluentProvider_r_0_", - ] - `); + expect(result.current).toEqual([webDarkThemeClassName]); }); - it('handles multiple classes from FluentProvider', () => { + it('supports consumer-authored multi-class themeClassName values', () => { const { result } = renderHook(() => useProviderThemeClasses(), { - wrapper: TestWrapperWithMultipleClasses, + wrapper: (props: { children?: React.ReactNode }) => ( + + {props.children} + + ), }); - expect(result.current).toMatchInlineSnapshot(` - Array [ - "fui-FluentProvider_r_2_", - "fui-FluentProvider_r_1_", - ] - `); + expect(result.current).toEqual(['my-theme', 'my-theme-overrides']); }); - it('handles classes with custom ID prefix', () => { + it('returns the inherited class under a nested provider without a themeClassName', () => { const { result } = renderHook(() => useProviderThemeClasses(), { wrapper: (props: { children?: React.ReactNode }) => ( - - + + {props.children} - + ), }); - expect(result.current).toMatchInlineSnapshot(` - Array [ - "custom1-fui-FluentProvider_r_3_", - ] - `); + expect(result.current).toEqual([webDarkThemeClassName]); }); - it('handles classes with a React 18 compatible ID', () => { - const { result } = renderHook(() => useProviderThemeClasses(), { - wrapper: (props: { children?: React.ReactNode }) => ( - - {props.children} - - ), - }); - - expect(result.current).toMatchInlineSnapshot(` - Array [ - "fui-FluentProviderR1a", - ] - `); - }); + it('returns no classes when the provider has no theme class (web-light :root defaults)', () => { + jest.spyOn(console, 'warn').mockImplementation(noop); - it('returns only proper classes', () => { const { result } = renderHook(() => useProviderThemeClasses(), { wrapper: (props: { children?: React.ReactNode }) => ( - + {props.children} - + ), }); @@ -111,16 +69,12 @@ describe('useProviderThemeClasses', () => { renderHook(() => useProviderThemeClasses(), { wrapper: PortalCompatProvider }); expect(warn).toHaveBeenCalledWith( - expect.stringContaining('PortalCompatProvider: "useThemeClassName()" hook returned an empty string'), + expect.stringContaining('PortalCompatProvider: no FluentProvider was found above in the React tree'), ); }); }); describe('PortalCompatProvider', () => { - afterEach(() => { - resetIdsForTests(); - }); - it('registers a function in a context', () => { jest.spyOn(console, 'warn').mockImplementation(noop); @@ -129,56 +83,33 @@ describe('PortalCompatProvider', () => { expect(result.current).toBeInstanceOf(Function); }); - it('during register adds a className from "ThemeClassNameContext" context', () => { + it('during register adds the theme class to the element', () => { const element = document.createElement('div'); const { result } = renderHook(() => usePortalCompat(), { wrapper: (props: { children?: React.ReactNode }) => ( - + {props.children} ), }); expect(result.current(element)).toBeInstanceOf(Function); - expect(element.classList).toMatchInlineSnapshot(` - DOMTokenList { - "0": "fui-FluentProvider_r_4_", - } - `); - }); - - it('during register adds multiple classes from "ThemeClassNameContext" context if they exist', () => { - const element = document.createElement('div'); - const { result } = renderHook(() => usePortalCompat(), { - wrapper: TestWrapperWithMultipleClasses, - }); - - expect(result.current(element)).toBeInstanceOf(Function); - expect(element.classList).toMatchInlineSnapshot(` - DOMTokenList { - "0": "fui-FluentProvider_r_6_", - "1": "fui-FluentProvider_r_5_", - } - `); + expect(Array.from(element.classList)).toEqual([webDarkThemeClassName]); }); - it('during unregister remove a className from "ThemeClassNameContext" context', () => { + it('during unregister removes the theme class from the element', () => { const element = document.createElement('div'); const { result } = renderHook(() => usePortalCompat(), { wrapper: (props: { children?: React.ReactNode }) => ( - + {props.children} ), }); const unregister = result.current(element); - expect(element.classList).toMatchInlineSnapshot(` - DOMTokenList { - "0": "fui-FluentProvider_r_7_", - } - `); + expect(Array.from(element.classList)).toEqual([webDarkThemeClassName]); expect(unregister).toBeInstanceOf(Function); expect(unregister()).toBeUndefined(); diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx index 593571f9692ea5..3b152a3cd72ab2 100644 --- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx +++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx @@ -1,33 +1,31 @@ 'use client'; import * as React from 'react'; -import { fluentProviderClassNames, useThemeClassName } from '@fluentui/react-components'; +import { useFluentProviderThemeClassName_unstable } from '@fluentui/react-components'; import { PortalCompatContextProvider } from '@fluentui/react-portal-compat-context'; import { applyFocusVisiblePolyfill } from '@fluentui/react-tabster'; import type { RegisterPortalFn } from '@fluentui/react-portal-compat-context'; /** - * Extracts the RUNTIME theme classes — `fui-FluentProvider` — out of the - * `themeClassName` context value, so they can be re-applied to v8 portal elements. + * Returns the class(es) that host the theme's CSS variables, to be re-applied to v8 + * portal elements. * - * Unaffected by the BEM statics removal - * (`migration/griffel-to-tailwind/reports/DECISIONS.md` D16.1), and the `\w+` is why: the - * pattern requires at least one word character AFTER the seed, so it only ever matched the - * `useId`-suffixed runtime class and never the bare `fui-FluentProvider` static that D16.1 - * stopped rendering. `fluentProviderClassNames.root` is retained precisely as this seed - * (see its JSDoc in react-provider) — do not "modernise" it to the group marker, which is - * lowercase and slash-bearing and would make this pattern match nothing. + * Theming Phase 2b: themes are static CSS classes (`fui-theme-web-dark`, …, or a + * consumer-authored class) resolved by FluentProvider from its `themeClassName` prop / + * inheritance — read here via `useFluentProviderThemeClassName_unstable`. This replaces + * the pre-2b regex extraction of the runtime `fui-FluentProvider` class out of the + * `useThemeClassName()` string. The full `useThemeClassName()` value is deliberately NOT + * used: it (by default) carries the provider's typography/color base classes, which would + * restyle v8 surfaces — only the custom-property-hosting theme class belongs on v8 + * portals. */ -// eslint-disable-next-line @typescript-eslint/no-deprecated -- the deprecation is about STYLING use. This is the constant's retained non-styling role: it seeds the runtime `fui-FluentProvider` theme class (DECISIONS.md D16.1/D16.5). -const CLASS_NAME_REGEX = new RegExp(`([^\\s]*${fluentProviderClassNames.root}\\w+)`, 'g'); - export function useProviderThemeClasses(): string[] { - const themeClassName = useThemeClassName(); + const themeClassName = useFluentProviderThemeClassName_unstable(); const cssVariablesClasses = React.useMemo( - // "themeClassName" may contain multiple classes while we want to add only classes that host CSS variables - // Keep in sync with "packages/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts" - () => themeClassName.match(CLASS_NAME_REGEX) ?? [], + // The resolved theme class may legitimately be '' (no theme class — the :root + // web-light defaults apply, which v8 portals inherit without any class). + () => (themeClassName ? themeClassName.split(' ').filter(Boolean) : []), [themeClassName], ); @@ -35,10 +33,10 @@ export function useProviderThemeClasses(): string[] { // This if statement technically breaks the rules of hooks, but ENV variables never change during app lifecycle // eslint-disable-next-line react-hooks/rules-of-hooks React.useEffect(() => { - if (themeClassName === '') { + if (themeClassName === undefined) { // eslint-disable-next-line no-console console.warn(` - PortalCompatProvider: "useThemeClassName()" hook returned an empty string + PortalCompatProvider: no FluentProvider was found above in the React tree ============================================= Make sure that PortalCompatProvider is rendered inside FluentProvider as a child. `); @@ -58,13 +56,17 @@ export const PortalCompatProvider: React.FC<{ children?: React.ReactNode }> = pr element => { let disposeFocusVisiblePolyfill: () => void = () => undefined; - element.classList.add(...cssVariablesClasses); + if (cssVariablesClasses.length > 0) { + element.classList.add(...cssVariablesClasses); + } if (element.ownerDocument.defaultView) { disposeFocusVisiblePolyfill = applyFocusVisiblePolyfill(element, element.ownerDocument.defaultView); } return () => { - element.classList.remove(...cssVariablesClasses); + if (cssVariablesClasses.length > 0) { + element.classList.remove(...cssVariablesClasses); + } disposeFocusVisiblePolyfill(); }; }, diff --git a/packages/react-components/react-provider/library/etc/react-provider.api.md b/packages/react-components/react-provider/library/etc/react-provider.api.md index ccda4920df7e37..b0ed601bbca9bf 100644 --- a/packages/react-components/react-provider/library/etc/react-provider.api.md +++ b/packages/react-components/react-provider/library/etc/react-provider.api.md @@ -11,17 +11,12 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers'; import type { JSXElement } from '@fluentui/react-utilities'; import type { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts'; -import type { PartialTheme } from '@fluentui/react-theme'; import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts'; -import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts'; import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts'; -// @public -export function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string; - // @public (undocumented) export const FluentProvider: ForwardRefComponent; @@ -31,12 +26,12 @@ export const fluentProviderClassNames: { }; // @public (undocumented) -export type FluentProviderContextValues = Pick & { +export type FluentProviderContextValues = Pick & { provider: ProviderContextValue_unstable; themeClassName: ThemeClassNameContextValue_unstable; iconDirection: IconDirectionContextValue; tooltip: TooltipVisibilityContextValue_unstable; - styleTagNonce: string | undefined; + themeClass: string; }; // @public (undocumented) @@ -47,9 +42,8 @@ export type FluentProviderProps = Omit, 'dir applyStylesToPortals?: boolean; customStyleHooks_unstable?: FluentProviderCustomStyleHooks; dir?: 'ltr' | 'rtl'; - nonce?: string; targetDocument?: Document; - theme?: PartialTheme; + themeClassName?: string; overrides_unstable?: OverridesContextValue_unstable; }; @@ -59,13 +53,8 @@ export type FluentProviderSlots = { }; // @public (undocumented) -export type FluentProviderState = ComponentState & Pick & Required> & { - theme: ThemeContextValue_unstable; +export type FluentProviderState = ComponentState & Pick & Required> & { themeClassName: string; - serverStyleProps: { - cssRule: string; - attributes: Record; - }; }; // @public @@ -81,10 +70,7 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta export const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState; // @internal -export const useFluentProviderThemeStyleTag: (options: Pick) => { - styleTagId: string; - rule: string; -}; +export function useFluentProviderThemeClassName_unstable(): string | undefined; // (No @packageDocumentation comment for this package) diff --git a/packages/react-components/react-provider/library/src/FluentProvider.ts b/packages/react-components/react-provider/library/src/FluentProvider.ts index 5015c875953445..c9b031ba55f284 100644 --- a/packages/react-components/react-provider/library/src/FluentProvider.ts +++ b/packages/react-components/react-provider/library/src/FluentProvider.ts @@ -7,12 +7,11 @@ export type { } from './components/FluentProvider/index'; export { FluentProvider, - createCSSRuleFromTheme, // eslint-disable-next-line @typescript-eslint/no-deprecated -- re-exporting the retained identity constant IS the public-surface contract (DECISIONS.md D16.5): the export is kept so `root` keeps resolving, and `@deprecated` targets consumers who used it for styling, not this barrel. fluentProviderClassNames, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProviderStyles_unstable, - useFluentProviderThemeStyleTag, + useFluentProviderThemeClassName_unstable, useFluentProvider_unstable, } from './components/FluentProvider/index'; diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-hydrate.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-hydrate.test.tsx index 59996c0c4ab684..84b25fd1a28da7 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-hydrate.test.tsx +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-hydrate.test.tsx @@ -10,7 +10,6 @@ jest.mock('@fluentui/react-utilities', () => { return { ...utilities, - ...jest.requireActual('../../testing/createUseIdMock').createUseIdMock(), canUseDOM: jest.fn().mockImplementation(utilities.canUseDOM), }; }); @@ -68,32 +67,20 @@ describe('FluentProvider (hydration)', () => { expect(logErrorSpy).toHaveBeenCalledTimes(0); /* - * Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). - * The ` - - `); + expect(document.head).toMatchInlineSnapshot(``); expect(document.body).toMatchInlineSnapshot(`
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx index 0a2be66e7dd6ba..d62527529ac4ac 100644 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx +++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx @@ -6,124 +6,65 @@ import * as React from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; -import { resetIdsForTests } from '@fluentui/react-utilities'; +import { webDarkThemeClassName } from '@fluentui/react-theme'; import { FluentProvider } from './FluentProvider'; // prettier 3's async `format` relies on dynamic import, which Jest's VM forbids without // --experimental-vm-modules; the synchronous worker-thread wrapper avoids both problems. import * as prettier from '@prettier/sync'; -import type { PartialTheme } from '@fluentui/react-theme'; - -jest.mock('@fluentui/react-utilities', () => ({ - ...jest.requireActual('@fluentui/react-utilities'), - ...jest.requireActual('../../testing/createUseIdMock').createUseIdMock(), -})); const parseHTMLString = (html: string) => { return prettier.format(html, { parser: 'html' }); }; /* - * Griffel → Tailwind + CSS Modules migration (migration/griffel-to-tailwind). - * - * Both inline snapshots below now keep the opening `
` on ONE line where they - * previously wrapped each attribute onto its own. That is a prettier line-width artifact, - * not a DOM change: prettier formats the RAW markup, before any snapshot serializer runs. - * The raw class attribute used to be - * "fui-FluentProvider fui-FluentProvider1 ___ f19n0e5 fxugw4r f1o700av fk6fouc …" - * (Griffel's atomics, ~110 chars → over printWidth → wrapped), and the serializer then - * stripped the atomics out of the already-wrapped output. It is now - * "fui-FluentProvider1 fuicm-root group/fui-fluent-provider" - * which fits on one line. - * - * Statics removal (DECISIONS.md D16.1): the leading bare `fui-FluentProvider` is gone from - * the class attribute below. What remains is exactly the post-D16 contract — the runtime - * `fui-FluentProvider` theme class (kept, because it hosts the `--token` custom - * properties and portal-compat extracts it) followed by the `group/fui-fluent-provider` - * marker, which is now the sole public identity CLASS. `fuicm-root` is stripped by the - * CSS-Modules snapshot serializer. The ` -
" + "
" `); }); - /* - * Griffel → Tailwind + CSS Modules migration (D20, S-G): the CSP nonce used to reach the - * SSR style element via Griffel's renderer context - * (`RendererProvider` + `createDOMRenderer(undefined, { styleElementAttributes: { nonce } })`). - * It is now the Fluent-owned `nonce` prop on FluentProvider; the rendered output below is - * byte-identical to the pre-migration snapshot. - */ - it('renders nonce with SSR style element', () => { - const html = renderToStaticMarkup(); + it('renders no theme class when none is passed (web-light :root defaults apply)', () => { + const html = renderToStaticMarkup(); - expect(parseHTMLString(html)).toMatchInlineSnapshot(` - "
- -
" - `); + expect(html).not.toContain(' { + it('nested providers inherit the theme class from the closest ancestor', () => { const html = renderToStaticMarkup( - - + + , ); - // Both the outer provider's style element and the nested provider's own style element - // must carry the root nonce — parity with the old app-root RendererProvider behavior. - expect(html).toContain('', - } as PartialTheme; - - const result = createCSSRuleFromTheme('.selector', theme); - expect(result).not.toContain('<'); - expect(result).not.toContain('>'); - expect(result).toMatchInlineSnapshot( - `".selector { --colorBrandBackground: \\\\3C /style\\\\3E \\\\3C script\\\\3E alert(\\"xss\\")\\\\3C /script\\\\3E ; --color-brand-background: \\\\3C /style\\\\3E \\\\3C script\\\\3E alert(\\"xss\\")\\\\3C /script\\\\3E ; }"`, - ); - }); -}); diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts deleted file mode 100644 index d3ae7703556ea4..00000000000000 --- a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { tokens } from '@fluentui/react-theme'; -import type { PartialTheme } from '@fluentui/react-theme'; - -const CSS_ESCAPE_MAP = { - '<': '\\3C ', - '>': '\\3E ', -}; -/** - * Escapes characters that could break out of a