From fee700676980b9373d9c2f4aec55d8a5dea844ce Mon Sep 17 00:00:00 2001 From: Jan Librowski Date: Mon, 24 Aug 2026 13:43:00 +0200 Subject: [PATCH] refactor(ui,sdk)!: rename public CSS variables --- .changeset/public-variable-namespace.md | 6 + .changeset/textarea-disabled-background.md | 2 +- .changeset/token-set-2.md | 2 +- .changeset/ui-layer-root-defaults.md | 2 +- .../components/dashed-edge/dashed-edge.tsx | 2 +- apps/docs/scripts/generate-ui-api.mjs | 2 +- .../src/content/docs/get-started/theming.md | 2 +- .../design-system-and-customization.mdx | 3 +- .../content/docs/ui-library/design-tokens.mdx | 11 +- .../src/content/docs/ui-library/overview.mdx | 3 +- docs/how-to-change-css-tokens.md | 20 +- packages/sdk/README.md | 4 +- .../button-submit/button-submit.module.css | 2 +- .../components/form/label/label.module.css | 8 +- .../form/message/message.module.css | 4 +- .../ai-agent-node-template.module.css | 2 +- .../connectable-item.module.css | 2 +- .../start-node-template.module.css | 2 +- .../workflow-node-template.module.css | 2 +- .../import-export-modal.module.css | 10 +- .../dynamic-conditions-control.module.css | 2 +- .../rich-text-control.module.css | 4 +- .../components/syntax-highlighter.module.css | 12 +- .../dynamic-typed-input.module.css | 4 +- .../variable-text/variable-text.module.css | 28 +- .../settings/settings-navigation.module.css | 4 +- .../pane-list/pane-list.module.css | 2 +- .../pane-remove-variable.module.css | 2 +- .../modals/tab/tab-header.module.css | 2 +- .../workflow-builder-root.types.ts | 2 +- packages/tokens/README.md | 2 +- packages/ui/README.md | 6 +- packages/ui/css-layers.md | 2 +- packages/ui/postcss-layer-root-defaults.mts | 2 +- .../src/components/avatar/avatar.module.css | 26 +- .../button/base-button/base-button.module.css | 18 +- .../button/nav-button/nav-button.module.css | 220 +++++------ .../button/regular-button/loader.module.css | 28 +- .../button/styles/border-radius.module.css | 48 +-- .../components/button/styles/gap.module.css | 40 +- .../button/styles/height.module.css | 20 +- .../button/styles/icon-padding.module.css | 40 +- .../button/styles/icon-size.module.css | 60 +-- .../button/styles/padding.module.css | 20 +- .../button/styles/variant.module.css | 372 +++++++++--------- .../components/checkbox/checkbox.module.css | 92 ++--- .../collapsible/collapsible.module.css | 6 +- .../date-picker/date-picker.module.css | 32 +- .../src/components/date-picker/variables.css | 24 +- .../edge-label/edge-label-size.module.css | 66 ++-- .../edge/edge-label/edge-label.module.css | 44 +-- .../edge/use-edge-styles/use-edge-styles.css | 12 +- .../edge/use-edge-styles/use-edge-styles.tsx | 12 +- .../components/input/input-root.module.css | 26 +- .../ui/src/components/input/input.module.css | 6 +- .../ui/src/components/input/variables.css | 38 +- .../ui/src/components/modal/modal.module.css | 138 +++---- .../node-description.module.css | 8 +- .../node/node-icon/node-icon.module.css | 22 +- .../node/node-panel/handle.module.css | 58 +-- .../node/node-panel/node-panel.module.css | 46 +-- .../number-field/number-field.module.css | 48 +-- .../src/components/number-field/variables.css | 38 +- .../radio-button/radio-size.module.css | 36 +- .../components/radio-button/radio.module.css | 44 +-- .../border-radius-size.module.css | 28 +- .../segment-picker/segment-picker.module.css | 16 +- .../select-button/select-button.module.css | 36 +- .../components/separator/separator.module.css | 8 +- .../snackbar/components/icon.module.css | 10 +- .../snackbar/components/message.module.css | 4 +- .../components/snackbar/snackbar.module.css | 74 ++-- .../src/components/status/status.module.css | 20 +- .../switch/icon-switch/icon-switch.module.css | 62 +-- .../components/switch/switch-size.module.css | 54 +-- .../src/components/switch/switch.module.css | 40 +- .../components/text-area/text-area.module.css | 62 +-- .../src/components/tooltip/tooltip.module.css | 24 +- .../styles/field-control-size.module.css | 64 +-- .../src/shared/styles/input-size.module.css | 36 +- .../ui/src/shared/styles/list-box.module.css | 20 +- .../shared/styles/list-item-size.module.css | 24 +- .../ui/src/shared/styles/list-item.module.css | 52 +-- packages/ui/src/styles/globals.css | 2 +- 84 files changed, 1248 insertions(+), 1241 deletions(-) create mode 100644 .changeset/public-variable-namespace.md diff --git a/.changeset/public-variable-namespace.md b/.changeset/public-variable-namespace.md new file mode 100644 index 000000000..407ef9a49 --- /dev/null +++ b/.changeset/public-variable-namespace.md @@ -0,0 +1,6 @@ +--- +'@workflowbuilder/ui': major +'@workflowbuilder/sdk': major +--- + +Public component CSS variables move one-to-one from `--ax-public-*` to `--wb-public-*`, with no compatibility aliases. Replace that prefix in consumer overrides; the `.ax-public-*` typography classes are unchanged. diff --git a/.changeset/textarea-disabled-background.md b/.changeset/textarea-disabled-background.md index b9e88f3d7..a58e114cd 100644 --- a/.changeset/textarea-disabled-background.md +++ b/.changeset/textarea-disabled-background.md @@ -2,4 +2,4 @@ '@workflowbuilder/ui': minor --- -TextArea exposes `--ax-public-textarea-root-background-color-disabled` (defaults to `transparent`); a never-applied icon-switch thumb background declaration was removed. +TextArea exposes `--wb-public-textarea-root-background-color-disabled` (defaults to `transparent`); a never-applied icon-switch thumb background declaration was removed. diff --git a/.changeset/token-set-2.md b/.changeset/token-set-2.md index 5f8a2239d..0f9a7a651 100644 --- a/.changeset/token-set-2.md +++ b/.changeset/token-set-2.md @@ -3,4 +3,4 @@ '@workflowbuilder/sdk': minor --- -The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, and new canvas and shadow (effects) sets. The `--ax-*` token names are gone from `tokens.css`; the `--ax-public-*` per-component override variables are unchanged. Consumers who overrode non-public `--ax-*` names directly must move those overrides to the `--wb-*` equivalents. Component visuals pick up the refreshed palette (brand `#3969FF`, updated reds/greens/oranges). +The design-token set ships as `--wb-*` custom properties generated from the refreshed Figma variables: renamed and re-scaled primitives, semantic tokens per theme, new canvas and shadow sets, and the refreshed brand and status palette. Consumers who overrode non-public `--ax-*` names directly must move those overrides to the `--wb-*` equivalents. diff --git a/.changeset/ui-layer-root-defaults.md b/.changeset/ui-layer-root-defaults.md index ad2058468..7ed8e2daf 100644 --- a/.changeset/ui-layer-root-defaults.md +++ b/.changeset/ui-layer-root-defaults.md @@ -2,4 +2,4 @@ '@workflowbuilder/ui': minor --- -Variable defaults (`--ax-public-*` component defaults and the `--wb-*` design tokens in `tokens.css`) now ship inside the `ui.base` cascade layer. A plain `:root { --ax-…: … }` override in your app now wins regardless of stylesheet load order; previously a lazily loaded component stylesheet could silently restore the default. +Variable defaults (`--wb-public-*` component defaults and the `--wb-*` design tokens in `tokens.css`) now ship inside the `ui.base` cascade layer. A plain `:root { --wb-…: … }` override in your app now wins regardless of stylesheet load order; previously a lazily loaded component stylesheet could silently restore the default. diff --git a/apps/demo/src/app/components/dashed-edge/dashed-edge.tsx b/apps/demo/src/app/components/dashed-edge/dashed-edge.tsx index c39c0c21f..a1750c008 100644 --- a/apps/demo/src/app/components/dashed-edge/dashed-edge.tsx +++ b/apps/demo/src/app/components/dashed-edge/dashed-edge.tsx @@ -21,7 +21,7 @@ import { type EdgeProps, getSmoothStepPath } from '@xyflow/react'; * "Custom edges and selection". * * To diverge from the built-in selection look, add a `selected` branch to the - * `style` below, or restyle every edge globally via the `--ax-public-edge-color-select` + * `style` below, or restyle every edge globally via the `--wb-public-edge-color-select` * CSS variable. See the SDK README, "Custom edges and selection". */ export function DashedEdge({ diff --git a/apps/docs/scripts/generate-ui-api.mjs b/apps/docs/scripts/generate-ui-api.mjs index ac9e83ac4..39bbd648c 100644 --- a/apps/docs/scripts/generate-ui-api.mjs +++ b/apps/docs/scripts/generate-ui-api.mjs @@ -328,7 +328,7 @@ function extractCssVariables(directory, cssSources, warnings, slug) { const variables = []; for (const file of files) { const css = readFileSync(file, 'utf8'); - const re = /(--ax-public-[\w-]+)\s*:\s*([^;]*?)(?:\/\*\s*(.*?)\s*\*\/)?\s*;/g; + const re = /(--wb-public-[\w-]+)\s*:\s*([^;]*?)(?:\/\*\s*(.*?)\s*\*\/)?\s*;/g; let m; while ((m = re.exec(css))) { if (seen.has(m[1])) continue; diff --git a/apps/docs/src/content/docs/get-started/theming.md b/apps/docs/src/content/docs/get-started/theming.md index 1eb88c62b..50cc88198 100644 --- a/apps/docs/src/content/docs/get-started/theming.md +++ b/apps/docs/src/content/docs/get-started/theming.md @@ -23,4 +23,4 @@ Provide the font yourself (via `@font-face`, `@fontsource/`, etc.) — the ## Other tokens -The SDK exposes its own `--wb-*` variables (background, scrollbar, transitions) plus the larger `--wb-*` design-token set re-exported from `@workflowbuilder/ui`. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map. +The SDK exposes its own `--wb-*` variables (background, scrollbar, transitions), the generated design-token set from `@workflowbuilder/ui`, and `--wb-public-*` overrides for individual components. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map. diff --git a/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx b/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx index 0c7437fa5..7d022ee5e 100644 --- a/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx +++ b/apps/docs/src/content/docs/overview/features/design-system-and-customization.mdx @@ -31,6 +31,7 @@ Example token categories: - **Spacing:** `--wb-space-50`, `--wb-space-100`, ..., `--wb-space-400` - **Border radius:** `--wb-radius-50`, `--wb-radius-100`, ..., `--wb-radius-300` - **Shadows:** `--wb-shadow-ui-xs-*`, `--wb-shadow-ui-s-*`, ..., `--wb-shadow-ui-xl-*` +- **Component overrides:** `--wb-public-*`, with component-local UI variables shown in generated component-page tables Theming is done by overriding CSS custom properties. Create a CSS file with your overrides and import it after the default theme: @@ -42,7 +43,7 @@ Theming is done by overriding CSS custom properties. Create a CSS file with your } ``` -Both light and dark mode tokens are defined separately, so you can customize each theme independently. +Both light and dark mode tokens are defined separately, so you can customize each theme independently. Use a component's `--wb-public-*` variables when a change should not affect the shared token system. ## Light and dark mode diff --git a/apps/docs/src/content/docs/ui-library/design-tokens.mdx b/apps/docs/src/content/docs/ui-library/design-tokens.mdx index 9f986f366..b25bb7944 100644 --- a/apps/docs/src/content/docs/ui-library/design-tokens.mdx +++ b/apps/docs/src/content/docs/ui-library/design-tokens.mdx @@ -3,10 +3,9 @@ title: Design tokens description: How @workflowbuilder/ui turns Figma design tokens into the --wb-* CSS custom properties that style every component. --- -Every `@workflowbuilder/ui` component is styled with CSS custom properties -(`--wb-*`) rather than hard-coded values. Those properties are generated from a -single design-token source, so the visual language stays consistent and is -retunable without touching component code. +Every `@workflowbuilder/ui` component uses generated `--wb-*` design tokens for +shared visual decisions. Components also expose hand-authored `--wb-public-*` +variables whose defaults may reference tokens or component-specific values. ## The pipeline @@ -64,10 +63,10 @@ There are three override levels, from broadest to most local: 1. **Primitives** (`--wb-colors-*`, `--wb-space-*`, …) - retune the palette/scales globally. 2. **Semantic tokens** (`--wb-ui-*`, `--wb-components-*`, …) - re-map meaning (e.g. make "primary" green). -3. **Component variables** (`--ax-public-*`) - tweak a single component; see each component's CSS variables table. +3. **Component variables** (`--wb-public-*`) - tweak a single component; component pages include generated tables for component-local variables. For the enterprise path you replace `tokens.json` with one generated from your -own Figma design kit and rebuild; the `--wb-*` surface stays the same. +own Figma design kit and rebuild; the generated design-token surface stays the same. ## Regenerating diff --git a/apps/docs/src/content/docs/ui-library/overview.mdx b/apps/docs/src/content/docs/ui-library/overview.mdx index 0e55f6a7a..e00ee982e 100644 --- a/apps/docs/src/content/docs/ui-library/overview.mdx +++ b/apps/docs/src/content/docs/ui-library/overview.mdx @@ -74,5 +74,4 @@ switch themes (this is also how these docs theme the live examples): ``` -Override any `--wb-*` design token to retune colors, spacing, or radii without touching -component markup. +Override a generated `--wb-*` design token to retune colors, spacing, or radii across the UI. For a single component, use a `--wb-public-*` override; component pages include generated tables for component-local variables. diff --git a/docs/how-to-change-css-tokens.md b/docs/how-to-change-css-tokens.md index 570805c92..20d63c7a2 100644 --- a/docs/how-to-change-css-tokens.md +++ b/docs/how-to-change-css-tokens.md @@ -1,10 +1,10 @@ # How to change CSS tokens? -All colors, spacing, and radii resolve through `--wb-*` design-token custom properties -defined in `@workflowbuilder/ui/tokens.css` (imported by the SDK's stylesheet). -The shipped defaults live inside the `ui.base` cascade layer, so a plain -unlayered override in your own stylesheet always wins - import order does not -matter. +`@workflowbuilder/ui` resolves colors, spacing, and radii through generated +`--wb-*` design tokens defined in `@workflowbuilder/ui/tokens.css` and +hand-authored `--wb-public-*` component overrides. Its shipped defaults live +inside the `ui.base` cascade layer, so a plain unlayered override in your own +stylesheet always wins - import order does not matter. ## Consuming from npm (SDK or UI package) @@ -14,13 +14,15 @@ Override the variables you care about in any stylesheet of your app: :root { --wb-components-button-solid-primary-default: #0f62fe; --wb-ui-bg-inset: #f4f4f4; + --wb-public-date-picker-dropdown-background: #fff; } ``` -To discover variable names, inspect elements in devtools or browse -`node_modules/@workflowbuilder/ui/dist/tokens.css`. Theme-specific values are -keyed on `html[data-theme='light' | 'dark']`, so scope your overrides the same -way when they should apply to one theme only. +Discover design-token names in `node_modules/@workflowbuilder/ui/dist/tokens.css` +and UI component overrides in `node_modules/@workflowbuilder/ui/dist/index.css`. +UI component pages also include generated tables for component-local variables. +Theme-specific values are keyed on `html[data-theme='light' | 'dark']`, so scope +your overrides the same way when they should apply to one theme only. ## Working in this monorepo diff --git a/packages/sdk/README.md b/packages/sdk/README.md index 57ede8b33..94ae6097f 100644 --- a/packages/sdk/README.md +++ b/packages/sdk/README.md @@ -212,9 +212,9 @@ The editor exposes a small set of CSS custom properties for top-level styling. O Available `--wb-*` tokens: `--wb-background-color`, `--wb-font-family`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-track-color`). -Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--wb-*` design-token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/). +Deeper color and spacing customization goes through the generated `--wb-*` design-token layer from `@workflowbuilder/ui`. Hand-authored overrides use `--wb-public-*`. The UI Library's component pages include generated CSS-variable tables for component-local UI overrides. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/). -**Prefix ownership.** The `--wb-*` namespace is shared by two owners, split by convention: names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) belong to the design-token export; everything else under `--wb-*` (like the theming variables above) is defined by the SDK itself. The two sets do not collide because exported names always carry a domain segment. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`). +**Prefix ownership.** The `--wb-*` namespace has three families. Names with a design-domain segment (`--wb-ui-*`, `--wb-components-*`, `--wb-canvas-*`, `--wb-colors-*`, `--wb-space-*`, `--wb-radius-*`, `--wb-size-*`, `--wb-font-size-*`, `--wb-shadow-*`) come from the design-token export. `--wb-public-*` variables are the hand-authored component override contract shared by `@workflowbuilder/ui` and `@workflowbuilder/sdk`; remaining top-level names such as the theming variables above belong to the SDK. Every `var(--…)` in workspace CSS is validated in CI against the set of names that actually exist (stylelint, see `packages/tokens/README.md`). ## CSS — global resets diff --git a/packages/sdk/src/components/button-submit/button-submit.module.css b/packages/sdk/src/components/button-submit/button-submit.module.css index 5ae36f913..32b90eab6 100644 --- a/packages/sdk/src/components/button-submit/button-submit.module.css +++ b/packages/sdk/src/components/button-submit/button-submit.module.css @@ -11,7 +11,7 @@ } .container--ghost-critical { - --spinner-color: var(--ax-public-button-ghost-critical-color); + --spinner-color: var(--wb-public-button-ghost-critical-color); } .container--pending button { diff --git a/packages/sdk/src/components/form/label/label.module.css b/packages/sdk/src/components/form/label/label.module.css index a4a382069..44f9e3599 100644 --- a/packages/sdk/src/components/form/label/label.module.css +++ b/packages/sdk/src/components/form/label/label.module.css @@ -1,15 +1,15 @@ @layer ui.base, ui.component; :root { - --ax-public-form-label-color: var(--wb-ui-text-subtle-default); - --ax-public-form-label-asterisk-color: var(--wb-ui-text-critical-default); + --wb-public-form-label-color: var(--wb-ui-text-subtle-default); + --wb-public-form-label-asterisk-color: var(--wb-ui-text-critical-default); } @layer ui.component { .container { display: flex; gap: 0.25rem; - color: var(--ax-public-form-label-color); + color: var(--wb-public-form-label-color); align-items: center; .label { @@ -24,7 +24,7 @@ height: 0.625rem; min-width: 0.625rem; - color: var(--ax-public-form-label-asterisk-color); + color: var(--wb-public-form-label-asterisk-color); } } diff --git a/packages/sdk/src/components/form/message/message.module.css b/packages/sdk/src/components/form/message/message.module.css index 5de53a5e4..b7766af6a 100644 --- a/packages/sdk/src/components/form/message/message.module.css +++ b/packages/sdk/src/components/form/message/message.module.css @@ -1,6 +1,6 @@ :root { - --wb-message-control-error-color: var(--ax-public-snackbar-title-color); - --wb-message-control-error-background-color: var(--ax-public-snackbar-error-background); + --wb-message-control-error-color: var(--wb-public-snackbar-title-color); + --wb-message-control-error-background-color: var(--wb-public-snackbar-error-background); --wb-message-control-spacing: var(--wb-space-100); --wb-message-control-border-radius: var(--wb-radius-100); --wb-message-control-padding: var(--wb-space-100) var(--wb-space-200); diff --git a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css index fe8bcf083..362d2ad5a 100644 --- a/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css +++ b/packages/sdk/src/features/diagram/nodes/ai-agent-node-template/ai-agent-node-template.module.css @@ -7,7 +7,7 @@ } .root { - --ax-public-node-gap: 0; + --wb-public-node-gap: 0; } .content { diff --git a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css index 1f6417815..8812f053e 100644 --- a/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css +++ b/packages/sdk/src/features/diagram/nodes/components/connectable-item/connectable-item.module.css @@ -13,7 +13,7 @@ position: relative; display: flex; max-width: calc( - var(--ax-public-node-width) - (6 * var(--ax-public-node-padding)) + 2 * + var(--wb-public-node-width) - (6 * var(--wb-public-node-padding)) + 2 * var(--wb-connectable-item-horizontal-padding) + 2 * var(--wb-connectable-item-border-width) ); padding: var(--wb-connectable-item-vertical-padding) var(--wb-connectable-item-horizontal-padding); diff --git a/packages/sdk/src/features/diagram/nodes/start-node-template/start-node-template.module.css b/packages/sdk/src/features/diagram/nodes/start-node-template/start-node-template.module.css index 26ee4bd91..a5637c39e 100644 --- a/packages/sdk/src/features/diagram/nodes/start-node-template/start-node-template.module.css +++ b/packages/sdk/src/features/diagram/nodes/start-node-template/start-node-template.module.css @@ -1,5 +1,5 @@ .content { - --ax-public-node-gap: 0; + --wb-public-node-gap: 0; } .collapsible { diff --git a/packages/sdk/src/features/diagram/nodes/workflow-node-template/workflow-node-template.module.css b/packages/sdk/src/features/diagram/nodes/workflow-node-template/workflow-node-template.module.css index 26ee4bd91..a5637c39e 100644 --- a/packages/sdk/src/features/diagram/nodes/workflow-node-template/workflow-node-template.module.css +++ b/packages/sdk/src/features/diagram/nodes/workflow-node-template/workflow-node-template.module.css @@ -1,5 +1,5 @@ .content { - --ax-public-node-gap: 0; + --wb-public-node-gap: 0; } .collapsible { diff --git a/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css b/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css index fc9fbdaa9..ce7fc633c 100644 --- a/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css +++ b/packages/sdk/src/features/integration/components/import-export/import-export-modal.module.css @@ -1,8 +1,8 @@ :root { - --wb-import-error-color: var(--ax-public-snackbar-title-color); - --wb-import-error-background-color: var(--ax-public-snackbar-error-background); - --wb-import-error-border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-error-border); - --wb-import-error-border-radius: var(--ax-public-snackbar-border-radius); + --wb-import-error-color: var(--wb-public-snackbar-title-color); + --wb-import-error-background-color: var(--wb-public-snackbar-error-background); + --wb-import-error-border: var(--wb-public-snackbar-border-size) solid var(--wb-public-snackbar-error-border); + --wb-import-error-border-radius: var(--wb-public-snackbar-border-radius); } .container { @@ -17,7 +17,7 @@ } .error { - padding: var(--ax-public-snackbar-padding); + padding: var(--wb-public-snackbar-padding); color: var(--wb-import-error-color); background: var(--wb-import-error-background-color); border: var(--wb-import-error-border); diff --git a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css index df9e6b4cf..b1c751a68 100644 --- a/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css +++ b/packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css @@ -1,7 +1,7 @@ :root { --wb-conditions-form-border-color: var(--wb-ui-stroke-default); /* missing token */ --wb-conditions-form-border-radius: 0.75rem; /* missing token */ - --wb-conditions-form-header-color: var(--ax-public-form-label-color); + --wb-conditions-form-header-color: var(--wb-public-form-label-color); } .container { diff --git a/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css b/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css index 38f59833f..b092ba755 100644 --- a/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css +++ b/packages/sdk/src/features/json-form/controls/rich-text-control/rich-text-control.module.css @@ -1,10 +1,10 @@ :root { - --ax-public-form-rich-text-color: var(--wb-ui-text-subtle-default); + --wb-public-form-rich-text-color: var(--wb-ui-text-subtle-default); } .container { composes: ax-public-p11 from global; - color: var(--ax-public-form-rich-text-color); + color: var(--wb-public-form-rich-text-color); a { color: inherit; diff --git a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css index cf3b29312..0e936e88a 100644 --- a/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css +++ b/packages/sdk/src/features/syntax-highlighter/components/syntax-highlighter.module.css @@ -28,19 +28,19 @@ html[data-theme='dark'] { } .container { - padding: var(--ax-public-input-padding-medium); + padding: var(--wb-public-input-padding-medium); padding-right: 0; - border-radius: var(--ax-public-input-border-radius-medium); - border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color); - /* border-bottom: 1px solid var(--ax-public-textarea-root-border-color); */ - /* transition: all var(--ax-public-transition); */ + border-radius: var(--wb-public-input-border-radius-medium); + border: var(--wb-public-input-root-border-size) solid var(--wb-public-input-root-border-color); + /* border-bottom: 1px solid var(--wb-public-textarea-root-border-color); */ + /* transition: all var(--wb-public-transition); */ * { font-family: monospace !important; } :global(.ace_editor) { - padding: var(--ax-public-input-padding-medium); + padding: var(--wb-public-input-padding-medium); color: var(--wb-syntax-highlighter-color) !important; background-color: transparent; } diff --git a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css index 0f5062689..86a02d86f 100644 --- a/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css +++ b/packages/sdk/src/features/variables/components/dynamic-typed-input/dynamic-typed-input.module.css @@ -7,7 +7,7 @@ .container--select { position: relative; - border-radius: var(--ax-public-input-border-radius-medium); + border-radius: var(--wb-public-input-border-radius-medium); > div > button { min-height: 2.5rem; @@ -16,7 +16,7 @@ } .date-picker { - border-radius: var(--ax-public-input-border-radius-medium); + border-radius: var(--wb-public-input-border-radius-medium); min-height: 2.5rem; text-align: left; } diff --git a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css index 0f6da5900..fb544c5ef 100644 --- a/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css +++ b/packages/sdk/src/features/variables/components/variable-text/variable-text.module.css @@ -7,30 +7,30 @@ --wb-variable-text-suggestion-bg-error: var(--wb-ui-bg-base); --wb-txt-ghost-primary-default: #6b3bff; - --wb-variable-backdrop: color-mix(in srgb, var(--ax-public-modal-backdrop-background), transparent 50%); + --wb-variable-backdrop: color-mix(in srgb, var(--wb-public-modal-backdrop-background), transparent 50%); } .control { position: relative; - border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color); - border-radius: var(--ax-public-input-border-radius-medium); - color: var(--ax-public-input-root-color); - transition: all var(--ax-public-transition); + border: var(--wb-public-input-root-border-size) solid var(--wb-public-input-root-border-color); + border-radius: var(--wb-public-input-border-radius-medium); + color: var(--wb-public-input-root-color); + transition: all var(--wb-public-transition); &.control--error { - background-color: var(--ax-public-input-root-background-color-error); - border-color: var(--ax-public-input-root-border-color-error); - color: var(--ax-public-input-root-color-error); + background-color: var(--wb-public-input-root-background-color-error); + border-color: var(--wb-public-input-root-border-color-error); + color: var(--wb-public-input-root-color-error); .mention { - border: 1px solid color-mix(in srgb, var(--ax-public-input-root-border-color-error), transparent 90%); - background-color: color-mix(in srgb, var(--ax-public-input-root-border-color-error), transparent 90%); + border: 1px solid color-mix(in srgb, var(--wb-public-input-root-border-color-error), transparent 90%); + background-color: color-mix(in srgb, var(--wb-public-input-root-border-color-error), transparent 90%); } } } .control:focus-within { - border-color: var(--ax-public-input-root-border-color-focus); + border-color: var(--wb-public-input-root-border-color-focus); } .input { @@ -39,7 +39,7 @@ display: block; width: 100%; margin: 0; - padding: var(--ax-public-input-padding-medium); + padding: var(--wb-public-input-padding-medium); border: none; background: transparent; color: unset; @@ -69,7 +69,7 @@ * which have no effect without Tailwind — we must set them manually. */ .highlighter { - padding: var(--ax-public-input-padding-medium); + padding: var(--wb-public-input-padding-medium); border: none; background: transparent; color: transparent; @@ -109,7 +109,7 @@ flex-direction: column; overflow: hidden; border: 1px solid var(--wb-variable-text-suggestion-border); - border-radius: var(--ax-public-input-border-radius-medium); + border-radius: var(--wb-public-input-border-radius-medium); background: var(--wb-variable-text-suggestion-bg); box-shadow: 0 4px 12px var(--wb-shadow-ui-color); } diff --git a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css index fb4342c84..133761afc 100644 --- a/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css +++ b/packages/sdk/src/features/variables/modals/settings/settings-navigation.module.css @@ -1,5 +1,5 @@ :root { - --wb-settings-navigation-background: var(--ax-public-modal-header-background); + --wb-settings-navigation-background: var(--wb-public-modal-header-background); } .container { @@ -36,7 +36,7 @@ &:hover, &.button--active { - background: var(--ax-public-nav-button-background-color-hover); + background: var(--wb-public-nav-button-background-color-hover); } &.button--active { diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css index 19cccaed7..2bf3aa9fb 100644 --- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css +++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-list/pane-list.module.css @@ -10,7 +10,7 @@ div.container { left: 0; width: 100%; height: 2rem; - background-image: linear-gradient(to bottom, transparent, var(--ax-public-modal-content-background)); + background-image: linear-gradient(to bottom, transparent, var(--wb-public-modal-content-background)); pointer-events: none; } } diff --git a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css index b72dadc7f..e03836147 100644 --- a/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css +++ b/packages/sdk/src/features/variables/modals/tab-global-variables/pane-remove-variable/pane-remove-variable.module.css @@ -1,5 +1,5 @@ :root { - --wb-settings-remove-bg: var(--ax-public-modal-header-background); + --wb-settings-remove-bg: var(--wb-public-modal-header-background); } .description { diff --git a/packages/sdk/src/features/variables/modals/tab/tab-header.module.css b/packages/sdk/src/features/variables/modals/tab/tab-header.module.css index 64b40d392..ae839d713 100644 --- a/packages/sdk/src/features/variables/modals/tab/tab-header.module.css +++ b/packages/sdk/src/features/variables/modals/tab/tab-header.module.css @@ -1,5 +1,5 @@ :root { - --settings-tab-header-border: var(--ax-public-node-border-size) solid var(--ax-public-node-border-color); + --settings-tab-header-border: var(--wb-public-node-border-size) solid var(--wb-public-node-border-color); } .container { diff --git a/packages/sdk/src/workflow-builder-root/workflow-builder-root.types.ts b/packages/sdk/src/workflow-builder-root/workflow-builder-root.types.ts index 5c15efbd7..bc2ab3c04 100644 --- a/packages/sdk/src/workflow-builder-root/workflow-builder-root.types.ts +++ b/packages/sdk/src/workflow-builder-root/workflow-builder-root.types.ts @@ -213,7 +213,7 @@ export type WorkflowBuilderRootProps = PropsWithChildren<{ * guide: https://reactflow.dev/learn/customization/custom-edges. To match the * built-in selection and hover look, reuse the exported `useLabelEdgeHover` * and `EnhancedBaseEdge`, or restyle selection globally via the - * `--ax-public-edge-color-select` CSS variable. A custom edge does not inherit + * `--wb-public-edge-color-select` CSS variable. A custom edge does not inherit * the built-in self-connecting loop or label rendering. * * **Must be a stable reference** (same rationale as `nodeTemplates`). diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 3fc3f9fd7..340380092 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -65,7 +65,7 @@ both errors: no CSS definition by design — their usage sites carry a `stylelint-disable-next-line` comment with the reason. 2. `wb/no-system-token-fallbacks` (`tools/stylelint/no-system-token-fallbacks.mjs`) - — no fallbacks on `var(--wb-…)` / `var(--ax-public-…)`; a fallback silently masks + — no fallbacks on system `var(--wb-…)` or `var(--ax-…)` properties; a fallback silently masks exactly the typos rule 1 exists to catch. Genuine exceptions use the standard mechanism with a mandatory reason: `/* stylelint-disable-next-line wb/no-system-token-fallbacks -- reason */`. diff --git a/packages/ui/README.md b/packages/ui/README.md index 7ba403215..d497211dd 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -82,7 +82,7 @@ Forget cobbling together UI kits with diagram libraries. `@workflowbuilder/ui` p ## Customization -Each `@workflowbuilder/ui` component uses CSS variables that are derived from primitive values. +`@workflowbuilder/ui` exposes `--wb-public-*` CSS variables for component-level customization. You can override them: @@ -92,11 +92,11 @@ You can override them: } ``` -or a derived value used by the selected component: +or a public override scoped to one component: ```css :root { - --ax-public-date-picker-dropdown-background: #40ba12; + --wb-public-date-picker-dropdown-background: #40ba12; } ``` diff --git a/packages/ui/css-layers.md b/packages/ui/css-layers.md index d33d539ce..d10af2026 100644 --- a/packages/ui/css-layers.md +++ b/packages/ui/css-layers.md @@ -50,7 +50,7 @@ the identical `@layer ui.base, ui.component;` statement. ## Variable defaults -`:root` blocks with variable defaults (`--ax-public-*` in component sources, +`:root` blocks with variable defaults (`--wb-public-*` in component sources, the `--wb-*` design tokens copied from `@workflowbuilder/ui-tokens`) ship inside `ui.base`. Layered declarations lose to any unlayered consumer CSS, so a plain `:root { --wb-…: … }` override in an app always wins - even when a diff --git a/packages/ui/postcss-layer-root-defaults.mts b/packages/ui/postcss-layer-root-defaults.mts index 2fc3defcb..b6e42fbac 100644 --- a/packages/ui/postcss-layer-root-defaults.mts +++ b/packages/ui/postcss-layer-root-defaults.mts @@ -5,7 +5,7 @@ import type { Plugin, Rule } from 'postcss'; * `@layer ui.base`. * * Layered declarations lose to unlayered CSS regardless of source order, so a - * consumer's `:root { --ax-public-…: … }` override always beats the shipped + * consumer's `:root { --wb-public-…: … }` override always beats the shipped * default - even when a lazily loaded component stylesheet arrives after the * override. Unlayered defaults would instead win or lose by load order. * diff --git a/packages/ui/src/components/avatar/avatar.module.css b/packages/ui/src/components/avatar/avatar.module.css index 6f8edc945..10d97ec83 100644 --- a/packages/ui/src/components/avatar/avatar.module.css +++ b/packages/ui/src/components/avatar/avatar.module.css @@ -1,13 +1,13 @@ :root { - --ax-public-avatar-border-color: var(--wb-components-text-field-stroke-default); /* missing token */ - --ax-public-avatar-background-color: var(--wb-colors-blue-500); /* missing token */ - --ax-public-avatar-border-size: 0.0625rem; + --wb-public-avatar-border-color: var(--wb-components-text-field-stroke-default); /* missing token */ + --wb-public-avatar-background-color: var(--wb-colors-blue-500); /* missing token */ + --wb-public-avatar-border-size: 0.0625rem; } @layer ui.component { .container { - border: var(--ax-public-avatar-border-size) solid var(--ax-public-avatar-border-color); - background-color: var(--ax-public-avatar-background-color); + border: var(--wb-public-avatar-border-size) solid var(--wb-public-avatar-border-color); + background-color: var(--wb-public-avatar-background-color); border-radius: 50%; overflow: hidden; display: flex; @@ -15,23 +15,23 @@ justify-content: center; &.extra-large { - width: calc(2.5rem + 2 * var(--ax-public-avatar-border-size)); - height: calc(2.5rem + 2 * var(--ax-public-avatar-border-size)); + width: calc(2.5rem + 2 * var(--wb-public-avatar-border-size)); + height: calc(2.5rem + 2 * var(--wb-public-avatar-border-size)); } &.large { - width: calc(2rem + 2 * var(--ax-public-avatar-border-size)); - height: calc(2rem + 2 * var(--ax-public-avatar-border-size)); + width: calc(2rem + 2 * var(--wb-public-avatar-border-size)); + height: calc(2rem + 2 * var(--wb-public-avatar-border-size)); } &.medium { - width: calc(1.5rem + 2 * var(--ax-public-avatar-border-size)); - height: calc(1.5rem + 2 * var(--ax-public-avatar-border-size)); + width: calc(1.5rem + 2 * var(--wb-public-avatar-border-size)); + height: calc(1.5rem + 2 * var(--wb-public-avatar-border-size)); } &.small { - width: calc(1.125rem + 2 * var(--ax-public-avatar-border-size)); - height: calc(1.125rem + 2 * var(--ax-public-avatar-border-size)); + width: calc(1.125rem + 2 * var(--wb-public-avatar-border-size)); + height: calc(1.125rem + 2 * var(--wb-public-avatar-border-size)); } img { diff --git a/packages/ui/src/components/button/base-button/base-button.module.css b/packages/ui/src/components/button/base-button/base-button.module.css index d9aa720f0..0559c7282 100644 --- a/packages/ui/src/components/button/base-button/base-button.module.css +++ b/packages/ui/src/components/button/base-button/base-button.module.css @@ -1,8 +1,8 @@ :root { - --ax-public-button-background-color-disabled: var(--wb-components-button-solid-disabled); - --ax-public-button-focus-visible-box-shadow-color: var(--wb-ui-text-default); - --ax-public-button-inner-border-color: var(--wb-ui-bg-base); - --ax-public-button-color: var(--wb-ui-text-onaccent-default); + --wb-public-button-background-color-disabled: var(--wb-components-button-solid-disabled); + --wb-public-button-focus-visible-box-shadow-color: var(--wb-ui-text-default); + --wb-public-button-inner-border-color: var(--wb-ui-bg-base); + --wb-public-button-color: var(--wb-ui-text-onaccent-default); } @layer ui.base { @@ -11,23 +11,23 @@ align-items: center; justify-content: center; position: relative; - color: var(--ax-public-button-color); + color: var(--wb-public-button-color); border: unset; cursor: pointer; &:focus-visible { box-shadow: - 0px 0px 0px 2px var(--ax-public-button-focus-visible-box-shadow-color), - inset 0 0 0 1px var(--ax-public-button-inner-border-color); + 0px 0px 0px 2px var(--wb-public-button-focus-visible-box-shadow-color), + inset 0 0 0 1px var(--wb-public-button-inner-border-color); outline: none; } &:not(:hover) { - transition: all var(--ax-public-transition); + transition: all var(--wb-public-transition); } &:disabled { - background-color: var(--ax-public-button-background-color-disabled); + background-color: var(--wb-public-button-background-color-disabled); cursor: auto; } } diff --git a/packages/ui/src/components/button/nav-button/nav-button.module.css b/packages/ui/src/components/button/nav-button/nav-button.module.css index a07fff7e4..e3959e22c 100644 --- a/packages/ui/src/components/button/nav-button/nav-button.module.css +++ b/packages/ui/src/components/button/nav-button/nav-button.module.css @@ -1,58 +1,58 @@ :root { - --ax-public-nav-button-background-color-default: var(--wb-components-nav-button-bg-primary-default); - --ax-public-nav-button-background-color-hover: var(--wb-components-nav-button-bg-primary-hover); - --ax-public-nav-button-background-color-pressed: var(--wb-components-nav-button-bg-primary-pressed); - --ax-public-nav-button-background-color-active: var(--wb-components-nav-button-bg-primary-active); - --ax-public-nav-button-background-color-focus: var(--wb-components-nav-button-bg-primary-focus); - --ax-public-nav-button-background-color-disabled: var(--wb-components-nav-button-bg-primary-disabled); - --ax-public-nav-button-color-default: var(--wb-components-nav-button-icon-primary-default); - --ax-public-nav-button-color-hover: var(--wb-components-nav-button-icon-primary-hover); - --ax-public-nav-button-color-pressed: var(--wb-components-nav-button-icon-primary-pressed); - --ax-public-nav-button-color-active: var(--wb-components-nav-button-icon-primary-active); - --ax-public-nav-button-color-disabled: var(--wb-components-nav-button-icon-primary-disabled); - --ax-public-nav-button-height-xl: var(--wb-size-600); - --ax-public-nav-button-height-l: calc(var(--wb-size-500) + var(--wb-size-25)); - --ax-public-nav-button-height-m: calc(var(--wb-size-400) + var(--wb-size-50)); - --ax-public-nav-button-height-s: var(--wb-size-400); - --ax-public-nav-button-height-xs: calc(var(--wb-size-300) + var(--wb-size-50)); - --ax-public-nav-button-height-xxs: var(--wb-size-300); - --ax-public-nav-button-height-xxxs: calc(var(--wb-size-200) + var(--wb-size-50)); - --ax-public-nav-button-padding-xl: var(--wb-space-150); - --ax-public-nav-button-padding-l: var(--wb-space-137); - --ax-public-nav-button-padding-m: var(--wb-space-112); - --ax-public-nav-button-padding-s: var(--wb-space-87); - --ax-public-nav-button-padding-xs: var(--wb-space-75); - --ax-public-nav-button-padding-xxs: var(--wb-space-75); - --ax-public-nav-button-padding-xxxs: var(--wb-space-50); - --ax-public-nav-button-label-padding-inline-xl: var(--wb-space-150); - --ax-public-nav-button-label-padding-inline-l: var(--wb-space-150); - --ax-public-nav-button-label-padding-inline-m: var(--wb-space-112); - --ax-public-nav-button-label-padding-inline-s: var(--wb-space-87); - --ax-public-nav-button-label-padding-inline-xs: var(--wb-space-75); - --ax-public-nav-button-label-padding-inline-xxs: var(--wb-space-75); - --ax-public-nav-button-label-padding-inline-xxxs: var(--wb-space-50); - --ax-public-nav-button-gap-xl: var(--wb-space-100); - --ax-public-nav-button-gap-l: var(--wb-space-100); - --ax-public-nav-button-gap-m: var(--wb-space-100); - --ax-public-nav-button-gap-s: var(--wb-space-100); - --ax-public-nav-button-gap-xs: var(--wb-space-100); - --ax-public-nav-button-gap-xxs: var(--wb-space-75); - --ax-public-nav-button-gap-xxxs: var(--wb-space-75); - --ax-public-nav-button-border-radius-xl: var(--wb-radius-100); - --ax-public-nav-button-border-radius-l: var(--wb-radius-100); - --ax-public-nav-button-border-radius-m: var(--wb-radius-75); - --ax-public-nav-button-border-radius-s: var(--wb-radius-50); - --ax-public-nav-button-border-radius-xs: var(--wb-radius-50); - --ax-public-nav-button-border-radius-xxs: var(--wb-radius-50); - --ax-public-nav-button-border-radius-xxxs: var(--wb-radius-50); - --ax-public-nav-button-border-radius-round: var(--wb-radius-full); - --ax-public-nav-button-icon-size-xl: var(--wb-size-300); - --ax-public-nav-button-icon-size-l: calc(var(--wb-size-200) + var(--wb-size-50)); - --ax-public-nav-button-icon-size-m: calc(var(--wb-size-200) + var(--wb-size-25)); - --ax-public-nav-button-icon-size-s: calc(var(--wb-size-200) + var(--wb-size-25)); - --ax-public-nav-button-icon-size-xs: var(--wb-size-200); - --ax-public-nav-button-icon-size-xxs: var(--wb-size-150); - --ax-public-nav-button-icon-size-xxxs: var(--wb-size-150); + --wb-public-nav-button-background-color-default: var(--wb-components-nav-button-bg-primary-default); + --wb-public-nav-button-background-color-hover: var(--wb-components-nav-button-bg-primary-hover); + --wb-public-nav-button-background-color-pressed: var(--wb-components-nav-button-bg-primary-pressed); + --wb-public-nav-button-background-color-active: var(--wb-components-nav-button-bg-primary-active); + --wb-public-nav-button-background-color-focus: var(--wb-components-nav-button-bg-primary-focus); + --wb-public-nav-button-background-color-disabled: var(--wb-components-nav-button-bg-primary-disabled); + --wb-public-nav-button-color-default: var(--wb-components-nav-button-icon-primary-default); + --wb-public-nav-button-color-hover: var(--wb-components-nav-button-icon-primary-hover); + --wb-public-nav-button-color-pressed: var(--wb-components-nav-button-icon-primary-pressed); + --wb-public-nav-button-color-active: var(--wb-components-nav-button-icon-primary-active); + --wb-public-nav-button-color-disabled: var(--wb-components-nav-button-icon-primary-disabled); + --wb-public-nav-button-height-xl: var(--wb-size-600); + --wb-public-nav-button-height-l: calc(var(--wb-size-500) + var(--wb-size-25)); + --wb-public-nav-button-height-m: calc(var(--wb-size-400) + var(--wb-size-50)); + --wb-public-nav-button-height-s: var(--wb-size-400); + --wb-public-nav-button-height-xs: calc(var(--wb-size-300) + var(--wb-size-50)); + --wb-public-nav-button-height-xxs: var(--wb-size-300); + --wb-public-nav-button-height-xxxs: calc(var(--wb-size-200) + var(--wb-size-50)); + --wb-public-nav-button-padding-xl: var(--wb-space-150); + --wb-public-nav-button-padding-l: var(--wb-space-137); + --wb-public-nav-button-padding-m: var(--wb-space-112); + --wb-public-nav-button-padding-s: var(--wb-space-87); + --wb-public-nav-button-padding-xs: var(--wb-space-75); + --wb-public-nav-button-padding-xxs: var(--wb-space-75); + --wb-public-nav-button-padding-xxxs: var(--wb-space-50); + --wb-public-nav-button-label-padding-inline-xl: var(--wb-space-150); + --wb-public-nav-button-label-padding-inline-l: var(--wb-space-150); + --wb-public-nav-button-label-padding-inline-m: var(--wb-space-112); + --wb-public-nav-button-label-padding-inline-s: var(--wb-space-87); + --wb-public-nav-button-label-padding-inline-xs: var(--wb-space-75); + --wb-public-nav-button-label-padding-inline-xxs: var(--wb-space-75); + --wb-public-nav-button-label-padding-inline-xxxs: var(--wb-space-50); + --wb-public-nav-button-gap-xl: var(--wb-space-100); + --wb-public-nav-button-gap-l: var(--wb-space-100); + --wb-public-nav-button-gap-m: var(--wb-space-100); + --wb-public-nav-button-gap-s: var(--wb-space-100); + --wb-public-nav-button-gap-xs: var(--wb-space-100); + --wb-public-nav-button-gap-xxs: var(--wb-space-75); + --wb-public-nav-button-gap-xxxs: var(--wb-space-75); + --wb-public-nav-button-border-radius-xl: var(--wb-radius-100); + --wb-public-nav-button-border-radius-l: var(--wb-radius-100); + --wb-public-nav-button-border-radius-m: var(--wb-radius-75); + --wb-public-nav-button-border-radius-s: var(--wb-radius-50); + --wb-public-nav-button-border-radius-xs: var(--wb-radius-50); + --wb-public-nav-button-border-radius-xxs: var(--wb-radius-50); + --wb-public-nav-button-border-radius-xxxs: var(--wb-radius-50); + --wb-public-nav-button-border-radius-round: var(--wb-radius-full); + --wb-public-nav-button-icon-size-xl: var(--wb-size-300); + --wb-public-nav-button-icon-size-l: calc(var(--wb-size-200) + var(--wb-size-50)); + --wb-public-nav-button-icon-size-m: calc(var(--wb-size-200) + var(--wb-size-25)); + --wb-public-nav-button-icon-size-s: calc(var(--wb-size-200) + var(--wb-size-25)); + --wb-public-nav-button-icon-size-xs: var(--wb-size-200); + --wb-public-nav-button-icon-size-xxs: var(--wb-size-150); + --wb-public-nav-button-icon-size-xxxs: var(--wb-size-150); } @layer ui.component { @@ -63,32 +63,32 @@ padding-inline: var(--nav-button-label-padding-inline); gap: var(--nav-button-gap); border-radius: var(--nav-button-border-radius); - background-color: var(--nav-button-background, var(--ax-public-nav-button-background-color-default)); - color: var(--ax-public-nav-button-color-default); + background-color: var(--nav-button-background, var(--wb-public-nav-button-background-color-default)); + color: var(--wb-public-nav-button-color-default); &:not(:disabled):hover { - background-color: var(--ax-public-nav-button-background-color-hover); - color: var(--ax-public-nav-button-color-hover); + background-color: var(--wb-public-nav-button-background-color-hover); + color: var(--wb-public-nav-button-color-hover); } &.selected:not(:disabled) { - background-color: var(--ax-public-nav-button-background-color-pressed); - color: var(--ax-public-nav-button-color-pressed); + background-color: var(--wb-public-nav-button-background-color-pressed); + color: var(--wb-public-nav-button-color-pressed); } &:not(:disabled):focus-visible { - background-color: var(--ax-public-nav-button-background-color-focus); - color: var(--ax-public-nav-button-color-default); + background-color: var(--wb-public-nav-button-background-color-focus); + color: var(--wb-public-nav-button-color-default); } &:not(:disabled):active { - background-color: var(--ax-public-nav-button-background-color-active); - color: var(--ax-public-nav-button-color-active); + background-color: var(--wb-public-nav-button-background-color-active); + color: var(--wb-public-nav-button-color-active); } &:disabled { - background-color: var(--ax-public-nav-button-background-color-disabled); - color: var(--ax-public-nav-button-color-disabled); + background-color: var(--wb-public-nav-button-background-color-disabled); + color: var(--wb-public-nav-button-color-disabled); } } @@ -112,88 +112,88 @@ } .xl { - --nav-button-height: var(--ax-public-nav-button-height-xl); - --nav-button-padding: var(--ax-public-nav-button-padding-xl); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-xl); - --nav-button-gap: var(--ax-public-nav-button-gap-xl); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-xl); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-xl); + --nav-button-height: var(--wb-public-nav-button-height-xl); + --nav-button-padding: var(--wb-public-nav-button-padding-xl); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-xl); + --nav-button-gap: var(--wb-public-nav-button-gap-xl); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-xl); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-xl); composes: wb-text-label-xl from global; } .l { - --nav-button-height: var(--ax-public-nav-button-height-l); - --nav-button-padding: var(--ax-public-nav-button-padding-l); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-l); - --nav-button-gap: var(--ax-public-nav-button-gap-l); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-l); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-l); + --nav-button-height: var(--wb-public-nav-button-height-l); + --nav-button-padding: var(--wb-public-nav-button-padding-l); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-l); + --nav-button-gap: var(--wb-public-nav-button-gap-l); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-l); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-l); composes: wb-text-label-l from global; } .m { - --nav-button-height: var(--ax-public-nav-button-height-m); - --nav-button-padding: var(--ax-public-nav-button-padding-m); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-m); - --nav-button-gap: var(--ax-public-nav-button-gap-m); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-m); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-m); + --nav-button-height: var(--wb-public-nav-button-height-m); + --nav-button-padding: var(--wb-public-nav-button-padding-m); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-m); + --nav-button-gap: var(--wb-public-nav-button-gap-m); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-m); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-m); composes: wb-text-label-m from global; } .s { - --nav-button-height: var(--ax-public-nav-button-height-s); - --nav-button-padding: var(--ax-public-nav-button-padding-s); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-s); - --nav-button-gap: var(--ax-public-nav-button-gap-s); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-s); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-s); + --nav-button-height: var(--wb-public-nav-button-height-s); + --nav-button-padding: var(--wb-public-nav-button-padding-s); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-s); + --nav-button-gap: var(--wb-public-nav-button-gap-s); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-s); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-s); composes: wb-text-label-m from global; } .xs { - --nav-button-height: var(--ax-public-nav-button-height-xs); - --nav-button-padding: var(--ax-public-nav-button-padding-xs); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-xs); - --nav-button-gap: var(--ax-public-nav-button-gap-xs); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-xs); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-xs); + --nav-button-height: var(--wb-public-nav-button-height-xs); + --nav-button-padding: var(--wb-public-nav-button-padding-xs); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-xs); + --nav-button-gap: var(--wb-public-nav-button-gap-xs); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-xs); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-xs); composes: wb-text-label-m from global; } .xxs { - --nav-button-height: var(--ax-public-nav-button-height-xxs); - --nav-button-padding: var(--ax-public-nav-button-padding-xxs); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-xxs); - --nav-button-gap: var(--ax-public-nav-button-gap-xxs); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-xxs); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-xxs); + --nav-button-height: var(--wb-public-nav-button-height-xxs); + --nav-button-padding: var(--wb-public-nav-button-padding-xxs); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-xxs); + --nav-button-gap: var(--wb-public-nav-button-gap-xxs); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-xxs); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-xxs); composes: wb-text-label-m from global; } .xxxs { - --nav-button-height: var(--ax-public-nav-button-height-xxxs); - --nav-button-padding: var(--ax-public-nav-button-padding-xxxs); - --nav-button-label-padding-inline: var(--ax-public-nav-button-label-padding-inline-xxxs); - --nav-button-gap: var(--ax-public-nav-button-gap-xxxs); - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-xxxs); - --nav-button-icon-size: var(--ax-public-nav-button-icon-size-xxxs); + --nav-button-height: var(--wb-public-nav-button-height-xxxs); + --nav-button-padding: var(--wb-public-nav-button-padding-xxxs); + --nav-button-label-padding-inline: var(--wb-public-nav-button-label-padding-inline-xxxs); + --nav-button-gap: var(--wb-public-nav-button-gap-xxxs); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-xxxs); + --nav-button-icon-size: var(--wb-public-nav-button-icon-size-xxxs); composes: wb-text-label-m from global; } .round { - --nav-button-border-radius: var(--ax-public-nav-button-border-radius-round); + --nav-button-border-radius: var(--wb-public-nav-button-border-radius-round); } .square { - --nav-button-background: var(--ax-public-nav-button-background-color-default); + --nav-button-background: var(--wb-public-nav-button-background-color-default); } .plain { diff --git a/packages/ui/src/components/button/regular-button/loader.module.css b/packages/ui/src/components/button/regular-button/loader.module.css index f2aa8ae00..f592f71e9 100644 --- a/packages/ui/src/components/button/regular-button/loader.module.css +++ b/packages/ui/src/components/button/regular-button/loader.module.css @@ -1,8 +1,8 @@ :root { - --ax-public-button-loader-dot-size: 0.3125rem; - --ax-public-button-loader-dot-border-radius: 0.3125rem; - --ax-public-button-loader-dot-color: currentColor; - --ax-public-button-loader-animation-duration: 0.75s; + --wb-public-button-loader-dot-size: 0.3125rem; + --wb-public-button-loader-dot-border-radius: 0.3125rem; + --wb-public-button-loader-dot-color: currentColor; + --wb-public-button-loader-animation-duration: 0.75s; } @layer ui.component { @@ -18,16 +18,16 @@ .dot-flashing::before, .dot-flashing::after { position: absolute; - width: var(--ax-public-button-loader-dot-size); - height: var(--ax-public-button-loader-dot-size); - border-radius: var(--ax-public-button-loader-dot-border-radius); - background-color: var(--ax-public-button-loader-dot-color); - color: var(--ax-public-button-loader-dot-color); - animation: dot-flashing var(--ax-public-button-loader-animation-duration) infinite linear alternate; + width: var(--wb-public-button-loader-dot-size); + height: var(--wb-public-button-loader-dot-size); + border-radius: var(--wb-public-button-loader-dot-border-radius); + background-color: var(--wb-public-button-loader-dot-color); + color: var(--wb-public-button-loader-dot-color); + animation: dot-flashing var(--wb-public-button-loader-animation-duration) infinite linear alternate; } .dot-flashing { - animation-delay: calc(var(--ax-public-button-loader-animation-duration) / 2); + animation-delay: calc(var(--wb-public-button-loader-animation-duration) / 2); } .dot-flashing::before, @@ -38,13 +38,13 @@ } .dot-flashing::before { - left: calc(-1 * var(--ax-public-button-loader-dot-size) * 2); + left: calc(-1 * var(--wb-public-button-loader-dot-size) * 2); animation-delay: 0s; } .dot-flashing::after { - left: calc(var(--ax-public-button-loader-dot-size) * 2); - animation-delay: var(--ax-public-button-loader-animation-duration); + left: calc(var(--wb-public-button-loader-dot-size) * 2); + animation-delay: var(--wb-public-button-loader-animation-duration); } @keyframes dot-flashing { diff --git a/packages/ui/src/components/button/styles/border-radius.module.css b/packages/ui/src/components/button/styles/border-radius.module.css index 379f7258d..767524814 100644 --- a/packages/ui/src/components/button/styles/border-radius.module.css +++ b/packages/ui/src/components/button/styles/border-radius.module.css @@ -1,67 +1,67 @@ :root { - --ax-public-button-border-radius-extra-large: var(--wb-radius-100); - --ax-public-button-border-radius-large: var(--wb-radius-100); - --ax-public-button-border-radius-medium: var(--wb-radius-75); - --ax-public-button-border-radius-small: var(--wb-radius-50); - --ax-public-button-border-radius-extra-small: var(--wb-radius-50); + --wb-public-button-border-radius-extra-large: var(--wb-radius-100); + --wb-public-button-border-radius-large: var(--wb-radius-100); + --wb-public-button-border-radius-medium: var(--wb-radius-75); + --wb-public-button-border-radius-small: var(--wb-radius-50); + --wb-public-button-border-radius-extra-small: var(--wb-radius-50); - --ax-public-button-border-radius-circle: var(--wb-radius-full); - --ax-public-button-border-radius-xl: var(--wb-radius-100); - --ax-public-button-border-radius-l: var(--wb-radius-100); - --ax-public-button-border-radius-m: var(--wb-radius-75); - --ax-public-button-border-radius-s: var(--wb-radius-50); - --ax-public-button-border-radius-xs: var(--wb-radius-50); - --ax-public-button-border-radius-round: var(--wb-radius-full); + --wb-public-button-border-radius-circle: var(--wb-radius-full); + --wb-public-button-border-radius-xl: var(--wb-radius-100); + --wb-public-button-border-radius-l: var(--wb-radius-100); + --wb-public-button-border-radius-m: var(--wb-radius-75); + --wb-public-button-border-radius-s: var(--wb-radius-50); + --wb-public-button-border-radius-xs: var(--wb-radius-50); + --wb-public-button-border-radius-round: var(--wb-radius-full); } @layer ui.component { :not(.circle) { &.extra-large { - border-radius: var(--ax-public-button-border-radius-extra-large); + border-radius: var(--wb-public-button-border-radius-extra-large); } &.large { - border-radius: var(--ax-public-button-border-radius-large); + border-radius: var(--wb-public-button-border-radius-large); } &.medium { - border-radius: var(--ax-public-button-border-radius-medium); + border-radius: var(--wb-public-button-border-radius-medium); } &.small { - border-radius: var(--ax-public-button-border-radius-small); + border-radius: var(--wb-public-button-border-radius-small); } &.extra-small { - border-radius: var(--ax-public-button-border-radius-extra-small); + border-radius: var(--wb-public-button-border-radius-extra-small); } } .circle { - border-radius: var(--ax-public-button-border-radius-circle); + border-radius: var(--wb-public-button-border-radius-circle); } .xl { - border-radius: var(--ax-public-button-border-radius-xl); + border-radius: var(--wb-public-button-border-radius-xl); } .l { - border-radius: var(--ax-public-button-border-radius-l); + border-radius: var(--wb-public-button-border-radius-l); } .m { - border-radius: var(--ax-public-button-border-radius-m); + border-radius: var(--wb-public-button-border-radius-m); } .s { - border-radius: var(--ax-public-button-border-radius-s); + border-radius: var(--wb-public-button-border-radius-s); } .xs { - border-radius: var(--ax-public-button-border-radius-xs); + border-radius: var(--wb-public-button-border-radius-xs); } .round { - border-radius: var(--ax-public-button-border-radius-round); + border-radius: var(--wb-public-button-border-radius-round); } } diff --git a/packages/ui/src/components/button/styles/gap.module.css b/packages/ui/src/components/button/styles/gap.module.css index 3de98bdf6..6793ef658 100644 --- a/packages/ui/src/components/button/styles/gap.module.css +++ b/packages/ui/src/components/button/styles/gap.module.css @@ -1,54 +1,54 @@ :root { - --ax-public-button-gap-extra-large: var(--wb-space-100); - --ax-public-button-gap-large: var(--wb-space-100); - --ax-public-button-gap-medium: var(--wb-space-100); - --ax-public-button-gap-small: var(--wb-space-100); - --ax-public-button-gap-extra-small: var(--wb-space-100); - --ax-public-button-gap-xl: var(--wb-space-100); - --ax-public-button-gap-l: var(--wb-space-100); - --ax-public-button-gap-m: var(--wb-space-100); - --ax-public-button-gap-s: var(--wb-space-100); - --ax-public-button-gap-xs: var(--wb-space-100); + --wb-public-button-gap-extra-large: var(--wb-space-100); + --wb-public-button-gap-large: var(--wb-space-100); + --wb-public-button-gap-medium: var(--wb-space-100); + --wb-public-button-gap-small: var(--wb-space-100); + --wb-public-button-gap-extra-small: var(--wb-space-100); + --wb-public-button-gap-xl: var(--wb-space-100); + --wb-public-button-gap-l: var(--wb-space-100); + --wb-public-button-gap-m: var(--wb-space-100); + --wb-public-button-gap-s: var(--wb-space-100); + --wb-public-button-gap-xs: var(--wb-space-100); } @layer ui.component { .extra-large { - gap: var(--ax-public-button-gap-extra-large); + gap: var(--wb-public-button-gap-extra-large); } .large { - gap: var(--ax-public-button-gap-large); + gap: var(--wb-public-button-gap-large); } .medium { - gap: var(--ax-public-button-gap-medium); + gap: var(--wb-public-button-gap-medium); } .small { - gap: var(--ax-public-button-gap-small); + gap: var(--wb-public-button-gap-small); } .extra-small { - gap: var(--ax-public-button-gap-extra-small); + gap: var(--wb-public-button-gap-extra-small); } .xl { - gap: var(--ax-public-button-gap-xl); + gap: var(--wb-public-button-gap-xl); } .l { - gap: var(--ax-public-button-gap-l); + gap: var(--wb-public-button-gap-l); } .m { - gap: var(--ax-public-button-gap-m); + gap: var(--wb-public-button-gap-m); } .s { - gap: var(--ax-public-button-gap-s); + gap: var(--wb-public-button-gap-s); } .xs { - gap: var(--ax-public-button-gap-xs); + gap: var(--wb-public-button-gap-xs); } } diff --git a/packages/ui/src/components/button/styles/height.module.css b/packages/ui/src/components/button/styles/height.module.css index abbb43307..a63384505 100644 --- a/packages/ui/src/components/button/styles/height.module.css +++ b/packages/ui/src/components/button/styles/height.module.css @@ -1,29 +1,29 @@ :root { - --ax-public-button-height-xl: var(--wb-size-600); - --ax-public-button-height-l: 2.625rem; - --ax-public-button-height-m: 2.25rem; - --ax-public-button-height-s: var(--wb-size-400); - --ax-public-button-height-xs: 1.75rem; + --wb-public-button-height-xl: var(--wb-size-600); + --wb-public-button-height-l: 2.625rem; + --wb-public-button-height-m: 2.25rem; + --wb-public-button-height-s: var(--wb-size-400); + --wb-public-button-height-xs: 1.75rem; } @layer ui.component { .xl { - height: var(--ax-public-button-height-xl); + height: var(--wb-public-button-height-xl); } .l { - height: var(--ax-public-button-height-l); + height: var(--wb-public-button-height-l); } .m { - height: var(--ax-public-button-height-m); + height: var(--wb-public-button-height-m); } .s { - height: var(--ax-public-button-height-s); + height: var(--wb-public-button-height-s); } .xs { - height: var(--ax-public-button-height-xs); + height: var(--wb-public-button-height-xs); } } diff --git a/packages/ui/src/components/button/styles/icon-padding.module.css b/packages/ui/src/components/button/styles/icon-padding.module.css index 8d41c9cbe..d952ec8da 100644 --- a/packages/ui/src/components/button/styles/icon-padding.module.css +++ b/packages/ui/src/components/button/styles/icon-padding.module.css @@ -1,54 +1,54 @@ :root { - --ax-public-button-icon-padding-extra-large: var(--wb-space-150); - --ax-public-button-icon-padding-large: var(--wb-space-137); - --ax-public-button-icon-padding-medium: var(--wb-space-112); - --ax-public-button-icon-padding-small: var(--wb-space-87); - --ax-public-button-icon-padding-extra-small: var(--wb-space-75); - --ax-public-button-icon-padding-xl: var(--wb-space-150); - --ax-public-button-icon-padding-l: var(--wb-space-137); - --ax-public-button-icon-padding-m: var(--wb-space-112); - --ax-public-button-icon-padding-s: var(--wb-space-87); - --ax-public-button-icon-padding-xs: var(--wb-space-75); + --wb-public-button-icon-padding-extra-large: var(--wb-space-150); + --wb-public-button-icon-padding-large: var(--wb-space-137); + --wb-public-button-icon-padding-medium: var(--wb-space-112); + --wb-public-button-icon-padding-small: var(--wb-space-87); + --wb-public-button-icon-padding-extra-small: var(--wb-space-75); + --wb-public-button-icon-padding-xl: var(--wb-space-150); + --wb-public-button-icon-padding-l: var(--wb-space-137); + --wb-public-button-icon-padding-m: var(--wb-space-112); + --wb-public-button-icon-padding-s: var(--wb-space-87); + --wb-public-button-icon-padding-xs: var(--wb-space-75); } @layer ui.component { .extra-large { - padding: var(--ax-public-button-icon-padding-extra-large); + padding: var(--wb-public-button-icon-padding-extra-large); } .large { - padding: var(--ax-public-button-icon-padding-large); + padding: var(--wb-public-button-icon-padding-large); } .medium { - padding: var(--ax-public-button-icon-padding-medium); + padding: var(--wb-public-button-icon-padding-medium); } .small { - padding: var(--ax-public-button-icon-padding-small); + padding: var(--wb-public-button-icon-padding-small); } .extra-small { - padding: var(--ax-public-button-icon-padding-extra-small); + padding: var(--wb-public-button-icon-padding-extra-small); } .xl { - padding: var(--ax-public-button-icon-padding-xl); + padding: var(--wb-public-button-icon-padding-xl); } .l { - padding: var(--ax-public-button-icon-padding-l); + padding: var(--wb-public-button-icon-padding-l); } .m { - padding: var(--ax-public-button-icon-padding-m); + padding: var(--wb-public-button-icon-padding-m); } .s { - padding: var(--ax-public-button-icon-padding-s); + padding: var(--wb-public-button-icon-padding-s); } .xs { - padding: var(--ax-public-button-icon-padding-xs); + padding: var(--wb-public-button-icon-padding-xs); } } diff --git a/packages/ui/src/components/button/styles/icon-size.module.css b/packages/ui/src/components/button/styles/icon-size.module.css index c62e35052..49027801a 100644 --- a/packages/ui/src/components/button/styles/icon-size.module.css +++ b/packages/ui/src/components/button/styles/icon-size.module.css @@ -1,49 +1,49 @@ :root { - --ax-public-icon-size-extra-large: 1.5rem /* missing token */; - --ax-public-icon-size-large: 1.25rem /* missing token */; - --ax-public-icon-size-medium: 1.125rem /* missing token */; - --ax-public-icon-size-small: 1.125rem /* missing token */; - --ax-public-icon-size-extra-small: 1rem /* missing token */; - --ax-public-icon-size-xl: var(--wb-size-300); - --ax-public-icon-size-l: calc(var(--wb-size-300) - var(--wb-space-50)); - --ax-public-icon-size-m: calc(var(--wb-size-300) - var(--wb-space-75)); - --ax-public-icon-size-s: calc(var(--wb-size-300) - var(--wb-space-75)); - --ax-public-icon-size-xs: var(--wb-size-200); + --wb-public-icon-size-extra-large: 1.5rem /* missing token */; + --wb-public-icon-size-large: 1.25rem /* missing token */; + --wb-public-icon-size-medium: 1.125rem /* missing token */; + --wb-public-icon-size-small: 1.125rem /* missing token */; + --wb-public-icon-size-extra-small: 1rem /* missing token */; + --wb-public-icon-size-xl: var(--wb-size-300); + --wb-public-icon-size-l: calc(var(--wb-size-300) - var(--wb-space-50)); + --wb-public-icon-size-m: calc(var(--wb-size-300) - var(--wb-space-75)); + --wb-public-icon-size-s: calc(var(--wb-size-300) - var(--wb-space-75)); + --wb-public-icon-size-xs: var(--wb-size-200); } @layer ui.component { .extra-large { svg { - width: var(--ax-public-icon-size-extra-large); - height: var(--ax-public-icon-size-extra-large); + width: var(--wb-public-icon-size-extra-large); + height: var(--wb-public-icon-size-extra-large); } } .large { svg { - width: var(--ax-public-icon-size-large); - height: var(--ax-public-icon-size-large); + width: var(--wb-public-icon-size-large); + height: var(--wb-public-icon-size-large); } } .medium { svg { - width: var(--ax-public-icon-size-medium); - height: var(--ax-public-icon-size-medium); + width: var(--wb-public-icon-size-medium); + height: var(--wb-public-icon-size-medium); } } .small { svg { - width: var(--ax-public-icon-size-small); - height: var(--ax-public-icon-size-small); + width: var(--wb-public-icon-size-small); + height: var(--wb-public-icon-size-small); } } .extra-small { svg { - width: var(--ax-public-icon-size-extra-small); - height: var(--ax-public-icon-size-extra-small); + width: var(--wb-public-icon-size-extra-small); + height: var(--wb-public-icon-size-extra-small); } } @@ -60,27 +60,27 @@ } .xl > .icon { - width: var(--ax-public-icon-size-xl); - height: var(--ax-public-icon-size-xl); + width: var(--wb-public-icon-size-xl); + height: var(--wb-public-icon-size-xl); } .l > .icon { - width: var(--ax-public-icon-size-l); - height: var(--ax-public-icon-size-l); + width: var(--wb-public-icon-size-l); + height: var(--wb-public-icon-size-l); } .m > .icon { - width: var(--ax-public-icon-size-m); - height: var(--ax-public-icon-size-m); + width: var(--wb-public-icon-size-m); + height: var(--wb-public-icon-size-m); } .s > .icon { - width: var(--ax-public-icon-size-s); - height: var(--ax-public-icon-size-s); + width: var(--wb-public-icon-size-s); + height: var(--wb-public-icon-size-s); } .xs > .icon { - width: var(--ax-public-icon-size-xs); - height: var(--ax-public-icon-size-xs); + width: var(--wb-public-icon-size-xs); + height: var(--wb-public-icon-size-xs); } } diff --git a/packages/ui/src/components/button/styles/padding.module.css b/packages/ui/src/components/button/styles/padding.module.css index d9d478802..92b7425e7 100644 --- a/packages/ui/src/components/button/styles/padding.module.css +++ b/packages/ui/src/components/button/styles/padding.module.css @@ -1,29 +1,29 @@ :root { - --ax-public-button-padding-xl: var(--wb-space-200) var(--wb-space-200); - --ax-public-button-padding-l: var(--wb-space-175) var(--wb-space-200); - --ax-public-button-padding-m: var(--wb-space-150) var(--wb-space-150); - --ax-public-button-padding-s: var(--wb-space-125) var(--wb-space-125); - --ax-public-button-padding-xs: var(--wb-space-100) var(--wb-space-100); + --wb-public-button-padding-xl: var(--wb-space-200) var(--wb-space-200); + --wb-public-button-padding-l: var(--wb-space-175) var(--wb-space-200); + --wb-public-button-padding-m: var(--wb-space-150) var(--wb-space-150); + --wb-public-button-padding-s: var(--wb-space-125) var(--wb-space-125); + --wb-public-button-padding-xs: var(--wb-space-100) var(--wb-space-100); } @layer ui.component { .xl { - padding: var(--ax-public-button-padding-xl); + padding: var(--wb-public-button-padding-xl); } .l { - padding: var(--ax-public-button-padding-l); + padding: var(--wb-public-button-padding-l); } .m { - padding: var(--ax-public-button-padding-m); + padding: var(--wb-public-button-padding-m); } .s { - padding: var(--ax-public-button-padding-s); + padding: var(--wb-public-button-padding-s); } .xs { - padding: var(--ax-public-button-padding-xs); + padding: var(--wb-public-button-padding-xs); } } diff --git a/packages/ui/src/components/button/styles/variant.module.css b/packages/ui/src/components/button/styles/variant.module.css index 3b3c6ac50..7e76410f9 100644 --- a/packages/ui/src/components/button/styles/variant.module.css +++ b/packages/ui/src/components/button/styles/variant.module.css @@ -1,145 +1,145 @@ :root { - --ax-public-button-border-size: var(--wb-size-12); - - --ax-public-button-primary-background: var(--wb-components-button-solid-primary-default); - --ax-public-button-primary-background-hover: var(--wb-components-button-solid-primary-hover); - --ax-public-button-primary-background-active: var(--wb-components-button-solid-primary-active); - --ax-public-button-primary-background-focus: var(--wb-components-button-solid-primary-focus); - --ax-public-button-primary-background-disabled: var(--wb-components-button-solid-disabled); - --ax-public-button-primary-color: var(--wb-ui-text-onaccent-default); - --ax-public-button-primary-color-disabled: var(--wb-ui-text-disabled); - - --ax-public-button-secondary-background: var(--wb-components-button-solid-gray-default); - --ax-public-button-secondary-background-hover: var(--wb-components-button-solid-gray-hover); - --ax-public-button-secondary-background-active: var(--wb-components-button-solid-gray-active); - --ax-public-button-secondary-background-focus: var(--wb-components-button-solid-gray-focus); - --ax-public-button-secondary-background-disabled: var(--wb-components-button-solid-disabled); - --ax-public-button-secondary-color: var(--wb-ui-text-onaccent-default); - --ax-public-button-secondary-color-disabled: var(--wb-ui-text-disabled); - - --ax-public-button-critical-background: var(--wb-components-button-solid-critical-default); - --ax-public-button-critical-background-hover: var(--wb-components-button-solid-critical-hover); - --ax-public-button-critical-background-active: var(--wb-components-button-solid-critical-active); - --ax-public-button-critical-background-focus: var(--wb-components-button-solid-critical-focus); - --ax-public-button-critical-background-disabled: var(--wb-components-button-solid-disabled); - --ax-public-button-critical-color: var(--wb-ui-text-onaccent-default); - --ax-public-button-critical-color-disabled: var(--wb-ui-text-disabled); - - --ax-public-button-success-background: var(--wb-components-button-solid-success-default); - --ax-public-button-success-background-hover: var(--wb-components-button-solid-success-hover); - --ax-public-button-success-background-active: var(--wb-components-button-solid-success-active); - --ax-public-button-success-background-focus: var(--wb-components-button-solid-success-focus); - --ax-public-button-success-background-disabled: var(--wb-components-button-solid-disabled); - --ax-public-button-success-color: var(--wb-ui-text-onaccent-default); - --ax-public-button-success-color-disabled: var(--wb-ui-text-disabled); - - --ax-public-button-warning-background: var(--wb-components-button-solid-warning-default); - --ax-public-button-warning-background-hover: var(--wb-components-button-solid-warning-hover); - --ax-public-button-warning-background-active: var(--wb-components-button-solid-warning-active); - --ax-public-button-warning-background-focus: var(--wb-components-button-solid-warning-focus); - --ax-public-button-warning-background-disabled: var(--wb-components-button-solid-disabled); - --ax-public-button-warning-color: var(--wb-ui-text-onaccent-default); - --ax-public-button-warning-color-disabled: var(--wb-ui-text-disabled); - - --ax-public-button-ghost-primary-background-color: var(--wb-components-button-ghost-primary-default); - --ax-public-button-ghost-primary-background-color-hover: var(--wb-components-button-ghost-primary-hover); - --ax-public-button-ghost-primary-background-color-active: var(--wb-components-button-ghost-primary-active); - --ax-public-button-ghost-primary-background-color-focus: var(--wb-components-button-ghost-primary-focus); - --ax-public-button-ghost-primary-background-color-disabled: var(--wb-components-button-ghost-primary-disabled); - --ax-public-button-ghost-primary-border-color: var(--wb-components-button-ghost-primary-stroke-default); - --ax-public-button-ghost-primary-color: var(--wb-ui-text-action-default); - --ax-public-button-ghost-primary-color-disabled: var(--wb-ui-text-action-disabled); - - --ax-public-button-ghost-secondary-background-color: var(--wb-colors-transparent); - --ax-public-button-ghost-secondary-background-color-hover: var(--wb-colors-transparent); - --ax-public-button-ghost-secondary-background-color-active: var(--wb-colors-transparent); - --ax-public-button-ghost-secondary-background-color-focus: var(--wb-colors-transparent); - --ax-public-button-ghost-secondary-background-color-disabled: var(--wb-colors-transparent); - --ax-public-button-ghost-secondary-border-color: var(--wb-ui-stroke-subtle); - --ax-public-button-ghost-secondary-border-color-hover: var(--wb-colors-gray-500); - --ax-public-button-ghost-secondary-border-color-active: var(--wb-colors-gray-500); - --ax-public-button-ghost-secondary-border-color-focus: var(--wb-colors-gray-500); - --ax-public-button-ghost-secondary-border-color-disabled: var(--wb-ui-stroke-subtle); - --ax-public-button-ghost-secondary-color: var(--wb-ui-text-default); - --ax-public-button-ghost-secondary-color-disabled: var(--wb-ui-text-ghost-default); - - --ax-public-button-ghost-critical-background-color: var(--wb-components-button-ghost-critical-default); - --ax-public-button-ghost-critical-background-color-hover: var(--wb-components-button-ghost-critical-hover); - --ax-public-button-ghost-critical-background-color-active: var(--wb-components-button-ghost-critical-active); - --ax-public-button-ghost-critical-background-color-focus: var(--wb-components-button-ghost-critical-focus); - --ax-public-button-ghost-critical-background-color-disabled: var(--wb-components-button-ghost-critical-disabled); - --ax-public-button-ghost-critical-border-color: var(--wb-components-button-ghost-critical-stroke-default); - --ax-public-button-ghost-critical-color: var(--wb-ui-text-critical-default); - --ax-public-button-ghost-critical-color-disabled: var(--wb-ui-text-critical-disabled); - - --ax-public-button-ghost-success-background-color: var(--wb-components-button-ghost-success-default); - --ax-public-button-ghost-success-background-color-hover: var(--wb-components-button-ghost-success-hover); - --ax-public-button-ghost-success-background-color-active: var(--wb-components-button-ghost-success-active); - --ax-public-button-ghost-success-background-color-focus: var(--wb-components-button-ghost-success-focus); - --ax-public-button-ghost-success-background-color-disabled: var(--wb-components-button-ghost-success-disabled); - --ax-public-button-ghost-success-border-color: var(--wb-components-button-ghost-success-stroke-default); - --ax-public-button-ghost-success-color: var(--wb-ui-text-success-default); - --ax-public-button-ghost-success-color-disabled: var(--wb-ui-text-success-disabled); - - --ax-public-button-ghost-warning-background-color: var(--wb-components-button-ghost-warning-default); - --ax-public-button-ghost-warning-background-color-hover: var(--wb-components-button-ghost-warning-hover); - --ax-public-button-ghost-warning-background-color-active: var(--wb-components-button-ghost-warning-active); - --ax-public-button-ghost-warning-background-color-focus: var(--wb-components-button-ghost-warning-focus); - --ax-public-button-ghost-warning-background-color-disabled: var(--wb-components-button-ghost-warning-disabled); - --ax-public-button-ghost-warning-border-color: var(--wb-components-button-ghost-warning-stroke-default); - --ax-public-button-ghost-warning-color: var(--wb-ui-text-warning-default); - --ax-public-button-ghost-warning-color-disabled: var(--wb-ui-text-warning-disabled); + --wb-public-button-border-size: var(--wb-size-12); + + --wb-public-button-primary-background: var(--wb-components-button-solid-primary-default); + --wb-public-button-primary-background-hover: var(--wb-components-button-solid-primary-hover); + --wb-public-button-primary-background-active: var(--wb-components-button-solid-primary-active); + --wb-public-button-primary-background-focus: var(--wb-components-button-solid-primary-focus); + --wb-public-button-primary-background-disabled: var(--wb-components-button-solid-disabled); + --wb-public-button-primary-color: var(--wb-ui-text-onaccent-default); + --wb-public-button-primary-color-disabled: var(--wb-ui-text-disabled); + + --wb-public-button-secondary-background: var(--wb-components-button-solid-gray-default); + --wb-public-button-secondary-background-hover: var(--wb-components-button-solid-gray-hover); + --wb-public-button-secondary-background-active: var(--wb-components-button-solid-gray-active); + --wb-public-button-secondary-background-focus: var(--wb-components-button-solid-gray-focus); + --wb-public-button-secondary-background-disabled: var(--wb-components-button-solid-disabled); + --wb-public-button-secondary-color: var(--wb-ui-text-onaccent-default); + --wb-public-button-secondary-color-disabled: var(--wb-ui-text-disabled); + + --wb-public-button-critical-background: var(--wb-components-button-solid-critical-default); + --wb-public-button-critical-background-hover: var(--wb-components-button-solid-critical-hover); + --wb-public-button-critical-background-active: var(--wb-components-button-solid-critical-active); + --wb-public-button-critical-background-focus: var(--wb-components-button-solid-critical-focus); + --wb-public-button-critical-background-disabled: var(--wb-components-button-solid-disabled); + --wb-public-button-critical-color: var(--wb-ui-text-onaccent-default); + --wb-public-button-critical-color-disabled: var(--wb-ui-text-disabled); + + --wb-public-button-success-background: var(--wb-components-button-solid-success-default); + --wb-public-button-success-background-hover: var(--wb-components-button-solid-success-hover); + --wb-public-button-success-background-active: var(--wb-components-button-solid-success-active); + --wb-public-button-success-background-focus: var(--wb-components-button-solid-success-focus); + --wb-public-button-success-background-disabled: var(--wb-components-button-solid-disabled); + --wb-public-button-success-color: var(--wb-ui-text-onaccent-default); + --wb-public-button-success-color-disabled: var(--wb-ui-text-disabled); + + --wb-public-button-warning-background: var(--wb-components-button-solid-warning-default); + --wb-public-button-warning-background-hover: var(--wb-components-button-solid-warning-hover); + --wb-public-button-warning-background-active: var(--wb-components-button-solid-warning-active); + --wb-public-button-warning-background-focus: var(--wb-components-button-solid-warning-focus); + --wb-public-button-warning-background-disabled: var(--wb-components-button-solid-disabled); + --wb-public-button-warning-color: var(--wb-ui-text-onaccent-default); + --wb-public-button-warning-color-disabled: var(--wb-ui-text-disabled); + + --wb-public-button-ghost-primary-background-color: var(--wb-components-button-ghost-primary-default); + --wb-public-button-ghost-primary-background-color-hover: var(--wb-components-button-ghost-primary-hover); + --wb-public-button-ghost-primary-background-color-active: var(--wb-components-button-ghost-primary-active); + --wb-public-button-ghost-primary-background-color-focus: var(--wb-components-button-ghost-primary-focus); + --wb-public-button-ghost-primary-background-color-disabled: var(--wb-components-button-ghost-primary-disabled); + --wb-public-button-ghost-primary-border-color: var(--wb-components-button-ghost-primary-stroke-default); + --wb-public-button-ghost-primary-color: var(--wb-ui-text-action-default); + --wb-public-button-ghost-primary-color-disabled: var(--wb-ui-text-action-disabled); + + --wb-public-button-ghost-secondary-background-color: var(--wb-colors-transparent); + --wb-public-button-ghost-secondary-background-color-hover: var(--wb-colors-transparent); + --wb-public-button-ghost-secondary-background-color-active: var(--wb-colors-transparent); + --wb-public-button-ghost-secondary-background-color-focus: var(--wb-colors-transparent); + --wb-public-button-ghost-secondary-background-color-disabled: var(--wb-colors-transparent); + --wb-public-button-ghost-secondary-border-color: var(--wb-ui-stroke-subtle); + --wb-public-button-ghost-secondary-border-color-hover: var(--wb-colors-gray-500); + --wb-public-button-ghost-secondary-border-color-active: var(--wb-colors-gray-500); + --wb-public-button-ghost-secondary-border-color-focus: var(--wb-colors-gray-500); + --wb-public-button-ghost-secondary-border-color-disabled: var(--wb-ui-stroke-subtle); + --wb-public-button-ghost-secondary-color: var(--wb-ui-text-default); + --wb-public-button-ghost-secondary-color-disabled: var(--wb-ui-text-ghost-default); + + --wb-public-button-ghost-critical-background-color: var(--wb-components-button-ghost-critical-default); + --wb-public-button-ghost-critical-background-color-hover: var(--wb-components-button-ghost-critical-hover); + --wb-public-button-ghost-critical-background-color-active: var(--wb-components-button-ghost-critical-active); + --wb-public-button-ghost-critical-background-color-focus: var(--wb-components-button-ghost-critical-focus); + --wb-public-button-ghost-critical-background-color-disabled: var(--wb-components-button-ghost-critical-disabled); + --wb-public-button-ghost-critical-border-color: var(--wb-components-button-ghost-critical-stroke-default); + --wb-public-button-ghost-critical-color: var(--wb-ui-text-critical-default); + --wb-public-button-ghost-critical-color-disabled: var(--wb-ui-text-critical-disabled); + + --wb-public-button-ghost-success-background-color: var(--wb-components-button-ghost-success-default); + --wb-public-button-ghost-success-background-color-hover: var(--wb-components-button-ghost-success-hover); + --wb-public-button-ghost-success-background-color-active: var(--wb-components-button-ghost-success-active); + --wb-public-button-ghost-success-background-color-focus: var(--wb-components-button-ghost-success-focus); + --wb-public-button-ghost-success-background-color-disabled: var(--wb-components-button-ghost-success-disabled); + --wb-public-button-ghost-success-border-color: var(--wb-components-button-ghost-success-stroke-default); + --wb-public-button-ghost-success-color: var(--wb-ui-text-success-default); + --wb-public-button-ghost-success-color-disabled: var(--wb-ui-text-success-disabled); + + --wb-public-button-ghost-warning-background-color: var(--wb-components-button-ghost-warning-default); + --wb-public-button-ghost-warning-background-color-hover: var(--wb-components-button-ghost-warning-hover); + --wb-public-button-ghost-warning-background-color-active: var(--wb-components-button-ghost-warning-active); + --wb-public-button-ghost-warning-background-color-focus: var(--wb-components-button-ghost-warning-focus); + --wb-public-button-ghost-warning-background-color-disabled: var(--wb-components-button-ghost-warning-disabled); + --wb-public-button-ghost-warning-border-color: var(--wb-components-button-ghost-warning-stroke-default); + --wb-public-button-ghost-warning-color: var(--wb-ui-text-warning-default); + --wb-public-button-ghost-warning-color-disabled: var(--wb-ui-text-warning-disabled); } @layer ui.component { .primary { - --button-background: var(--ax-public-button-primary-background); - --button-background-hover: var(--ax-public-button-primary-background-hover); - --button-background-active: var(--ax-public-button-primary-background-active); - --button-background-focus: var(--ax-public-button-primary-background-focus); - --button-background-disabled: var(--ax-public-button-primary-background-disabled); - --button-color: var(--ax-public-button-primary-color); - --button-color-disabled: var(--ax-public-button-primary-color-disabled); + --button-background: var(--wb-public-button-primary-background); + --button-background-hover: var(--wb-public-button-primary-background-hover); + --button-background-active: var(--wb-public-button-primary-background-active); + --button-background-focus: var(--wb-public-button-primary-background-focus); + --button-background-disabled: var(--wb-public-button-primary-background-disabled); + --button-color: var(--wb-public-button-primary-color); + --button-color-disabled: var(--wb-public-button-primary-color-disabled); } .secondary { - --button-background: var(--ax-public-button-secondary-background); - --button-background-hover: var(--ax-public-button-secondary-background-hover); - --button-background-active: var(--ax-public-button-secondary-background-active); - --button-background-focus: var(--ax-public-button-secondary-background-focus); - --button-background-disabled: var(--ax-public-button-secondary-background-disabled); - --button-color: var(--ax-public-button-secondary-color); - --button-color-disabled: var(--ax-public-button-secondary-color-disabled); + --button-background: var(--wb-public-button-secondary-background); + --button-background-hover: var(--wb-public-button-secondary-background-hover); + --button-background-active: var(--wb-public-button-secondary-background-active); + --button-background-focus: var(--wb-public-button-secondary-background-focus); + --button-background-disabled: var(--wb-public-button-secondary-background-disabled); + --button-color: var(--wb-public-button-secondary-color); + --button-color-disabled: var(--wb-public-button-secondary-color-disabled); } .critical { - --button-background: var(--ax-public-button-critical-background); - --button-background-hover: var(--ax-public-button-critical-background-hover); - --button-background-active: var(--ax-public-button-critical-background-active); - --button-background-focus: var(--ax-public-button-critical-background-focus); - --button-background-disabled: var(--ax-public-button-critical-background-disabled); - --button-color: var(--ax-public-button-critical-color); - --button-color-disabled: var(--ax-public-button-critical-color-disabled); + --button-background: var(--wb-public-button-critical-background); + --button-background-hover: var(--wb-public-button-critical-background-hover); + --button-background-active: var(--wb-public-button-critical-background-active); + --button-background-focus: var(--wb-public-button-critical-background-focus); + --button-background-disabled: var(--wb-public-button-critical-background-disabled); + --button-color: var(--wb-public-button-critical-color); + --button-color-disabled: var(--wb-public-button-critical-color-disabled); } .success { - --button-background: var(--ax-public-button-success-background); - --button-background-hover: var(--ax-public-button-success-background-hover); - --button-background-active: var(--ax-public-button-success-background-active); - --button-background-focus: var(--ax-public-button-success-background-focus); - --button-background-disabled: var(--ax-public-button-success-background-disabled); - --button-color: var(--ax-public-button-success-color); - --button-color-disabled: var(--ax-public-button-success-color-disabled); + --button-background: var(--wb-public-button-success-background); + --button-background-hover: var(--wb-public-button-success-background-hover); + --button-background-active: var(--wb-public-button-success-background-active); + --button-background-focus: var(--wb-public-button-success-background-focus); + --button-background-disabled: var(--wb-public-button-success-background-disabled); + --button-color: var(--wb-public-button-success-color); + --button-color-disabled: var(--wb-public-button-success-color-disabled); } .warning { - --button-background: var(--ax-public-button-warning-background); - --button-background-hover: var(--ax-public-button-warning-background-hover); - --button-background-active: var(--ax-public-button-warning-background-active); - --button-background-focus: var(--ax-public-button-warning-background-focus); - --button-background-disabled: var(--ax-public-button-warning-background-disabled); - --button-color: var(--ax-public-button-warning-color); - --button-color-disabled: var(--ax-public-button-warning-color-disabled); + --button-background: var(--wb-public-button-warning-background); + --button-background-hover: var(--wb-public-button-warning-background-hover); + --button-background-active: var(--wb-public-button-warning-background-active); + --button-background-focus: var(--wb-public-button-warning-background-focus); + --button-background-disabled: var(--wb-public-button-warning-background-disabled); + --button-color: var(--wb-public-button-warning-color); + --button-color-disabled: var(--wb-public-button-warning-color-disabled); } .primary, @@ -169,78 +169,78 @@ } .ghost-primary { - --button-background: var(--ax-public-button-ghost-primary-background-color); - --button-background-hover: var(--ax-public-button-ghost-primary-background-color-hover); - --button-background-active: var(--ax-public-button-ghost-primary-background-color-active); - --button-background-focus: var(--ax-public-button-ghost-primary-background-color-focus); - --button-background-disabled: var(--ax-public-button-ghost-primary-background-color-disabled); - --button-border-color: var(--ax-public-button-ghost-primary-border-color); - --button-border-color-hover: var(--ax-public-button-ghost-primary-border-color); - --button-border-color-active: var(--ax-public-button-ghost-primary-border-color); - --button-border-color-focus: var(--ax-public-button-ghost-primary-border-color); - --button-border-color-disabled: var(--ax-public-button-ghost-primary-border-color); - --button-color: var(--ax-public-button-ghost-primary-color); - --button-color-disabled: var(--ax-public-button-ghost-primary-color-disabled); + --button-background: var(--wb-public-button-ghost-primary-background-color); + --button-background-hover: var(--wb-public-button-ghost-primary-background-color-hover); + --button-background-active: var(--wb-public-button-ghost-primary-background-color-active); + --button-background-focus: var(--wb-public-button-ghost-primary-background-color-focus); + --button-background-disabled: var(--wb-public-button-ghost-primary-background-color-disabled); + --button-border-color: var(--wb-public-button-ghost-primary-border-color); + --button-border-color-hover: var(--wb-public-button-ghost-primary-border-color); + --button-border-color-active: var(--wb-public-button-ghost-primary-border-color); + --button-border-color-focus: var(--wb-public-button-ghost-primary-border-color); + --button-border-color-disabled: var(--wb-public-button-ghost-primary-border-color); + --button-color: var(--wb-public-button-ghost-primary-color); + --button-color-disabled: var(--wb-public-button-ghost-primary-color-disabled); } .ghost-secondary { - --button-background: var(--ax-public-button-ghost-secondary-background-color); - --button-background-hover: var(--ax-public-button-ghost-secondary-background-color-hover); - --button-background-active: var(--ax-public-button-ghost-secondary-background-color-active); - --button-background-focus: var(--ax-public-button-ghost-secondary-background-color-focus); - --button-background-disabled: var(--ax-public-button-ghost-secondary-background-color-disabled); - --button-border-color: var(--ax-public-button-ghost-secondary-border-color); - --button-border-color-hover: var(--ax-public-button-ghost-secondary-border-color-hover); - --button-border-color-active: var(--ax-public-button-ghost-secondary-border-color-active); - --button-border-color-focus: var(--ax-public-button-ghost-secondary-border-color-focus); - --button-border-color-disabled: var(--ax-public-button-ghost-secondary-border-color-disabled); - --button-color: var(--ax-public-button-ghost-secondary-color); - --button-color-disabled: var(--ax-public-button-ghost-secondary-color-disabled); + --button-background: var(--wb-public-button-ghost-secondary-background-color); + --button-background-hover: var(--wb-public-button-ghost-secondary-background-color-hover); + --button-background-active: var(--wb-public-button-ghost-secondary-background-color-active); + --button-background-focus: var(--wb-public-button-ghost-secondary-background-color-focus); + --button-background-disabled: var(--wb-public-button-ghost-secondary-background-color-disabled); + --button-border-color: var(--wb-public-button-ghost-secondary-border-color); + --button-border-color-hover: var(--wb-public-button-ghost-secondary-border-color-hover); + --button-border-color-active: var(--wb-public-button-ghost-secondary-border-color-active); + --button-border-color-focus: var(--wb-public-button-ghost-secondary-border-color-focus); + --button-border-color-disabled: var(--wb-public-button-ghost-secondary-border-color-disabled); + --button-color: var(--wb-public-button-ghost-secondary-color); + --button-color-disabled: var(--wb-public-button-ghost-secondary-color-disabled); } .ghost-critical { - --button-background: var(--ax-public-button-ghost-critical-background-color); - --button-background-hover: var(--ax-public-button-ghost-critical-background-color-hover); - --button-background-active: var(--ax-public-button-ghost-critical-background-color-active); - --button-background-focus: var(--ax-public-button-ghost-critical-background-color-focus); - --button-background-disabled: var(--ax-public-button-ghost-critical-background-color-disabled); - --button-border-color: var(--ax-public-button-ghost-critical-border-color); - --button-border-color-hover: var(--ax-public-button-ghost-critical-border-color); - --button-border-color-active: var(--ax-public-button-ghost-critical-border-color); - --button-border-color-focus: var(--ax-public-button-ghost-critical-border-color); - --button-border-color-disabled: var(--ax-public-button-ghost-critical-border-color); - --button-color: var(--ax-public-button-ghost-critical-color); - --button-color-disabled: var(--ax-public-button-ghost-critical-color-disabled); + --button-background: var(--wb-public-button-ghost-critical-background-color); + --button-background-hover: var(--wb-public-button-ghost-critical-background-color-hover); + --button-background-active: var(--wb-public-button-ghost-critical-background-color-active); + --button-background-focus: var(--wb-public-button-ghost-critical-background-color-focus); + --button-background-disabled: var(--wb-public-button-ghost-critical-background-color-disabled); + --button-border-color: var(--wb-public-button-ghost-critical-border-color); + --button-border-color-hover: var(--wb-public-button-ghost-critical-border-color); + --button-border-color-active: var(--wb-public-button-ghost-critical-border-color); + --button-border-color-focus: var(--wb-public-button-ghost-critical-border-color); + --button-border-color-disabled: var(--wb-public-button-ghost-critical-border-color); + --button-color: var(--wb-public-button-ghost-critical-color); + --button-color-disabled: var(--wb-public-button-ghost-critical-color-disabled); } .ghost-success { - --button-background: var(--ax-public-button-ghost-success-background-color); - --button-background-hover: var(--ax-public-button-ghost-success-background-color-hover); - --button-background-active: var(--ax-public-button-ghost-success-background-color-active); - --button-background-focus: var(--ax-public-button-ghost-success-background-color-focus); - --button-background-disabled: var(--ax-public-button-ghost-success-background-color-disabled); - --button-border-color: var(--ax-public-button-ghost-success-border-color); - --button-border-color-hover: var(--ax-public-button-ghost-success-border-color); - --button-border-color-active: var(--ax-public-button-ghost-success-border-color); - --button-border-color-focus: var(--ax-public-button-ghost-success-border-color); - --button-border-color-disabled: var(--ax-public-button-ghost-success-border-color); - --button-color: var(--ax-public-button-ghost-success-color); - --button-color-disabled: var(--ax-public-button-ghost-success-color-disabled); + --button-background: var(--wb-public-button-ghost-success-background-color); + --button-background-hover: var(--wb-public-button-ghost-success-background-color-hover); + --button-background-active: var(--wb-public-button-ghost-success-background-color-active); + --button-background-focus: var(--wb-public-button-ghost-success-background-color-focus); + --button-background-disabled: var(--wb-public-button-ghost-success-background-color-disabled); + --button-border-color: var(--wb-public-button-ghost-success-border-color); + --button-border-color-hover: var(--wb-public-button-ghost-success-border-color); + --button-border-color-active: var(--wb-public-button-ghost-success-border-color); + --button-border-color-focus: var(--wb-public-button-ghost-success-border-color); + --button-border-color-disabled: var(--wb-public-button-ghost-success-border-color); + --button-color: var(--wb-public-button-ghost-success-color); + --button-color-disabled: var(--wb-public-button-ghost-success-color-disabled); } .ghost-warning { - --button-background: var(--ax-public-button-ghost-warning-background-color); - --button-background-hover: var(--ax-public-button-ghost-warning-background-color-hover); - --button-background-active: var(--ax-public-button-ghost-warning-background-color-active); - --button-background-focus: var(--ax-public-button-ghost-warning-background-color-focus); - --button-background-disabled: var(--ax-public-button-ghost-warning-background-color-disabled); - --button-border-color: var(--ax-public-button-ghost-warning-border-color); - --button-border-color-hover: var(--ax-public-button-ghost-warning-border-color); - --button-border-color-active: var(--ax-public-button-ghost-warning-border-color); - --button-border-color-focus: var(--ax-public-button-ghost-warning-border-color); - --button-border-color-disabled: var(--ax-public-button-ghost-warning-border-color); - --button-color: var(--ax-public-button-ghost-warning-color); - --button-color-disabled: var(--ax-public-button-ghost-warning-color-disabled); + --button-background: var(--wb-public-button-ghost-warning-background-color); + --button-background-hover: var(--wb-public-button-ghost-warning-background-color-hover); + --button-background-active: var(--wb-public-button-ghost-warning-background-color-active); + --button-background-focus: var(--wb-public-button-ghost-warning-background-color-focus); + --button-background-disabled: var(--wb-public-button-ghost-warning-background-color-disabled); + --button-border-color: var(--wb-public-button-ghost-warning-border-color); + --button-border-color-hover: var(--wb-public-button-ghost-warning-border-color); + --button-border-color-active: var(--wb-public-button-ghost-warning-border-color); + --button-border-color-focus: var(--wb-public-button-ghost-warning-border-color); + --button-border-color-disabled: var(--wb-public-button-ghost-warning-border-color); + --button-color: var(--wb-public-button-ghost-warning-color); + --button-color-disabled: var(--wb-public-button-ghost-warning-color-disabled); } .ghost-primary, @@ -257,7 +257,7 @@ content: ''; position: absolute; inset: 0; - border: var(--ax-public-button-border-size) solid var(--button-border-color-current); + border: var(--wb-public-button-border-size) solid var(--button-border-color-current); border-radius: inherit; pointer-events: none; } diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css index 5d95b95d1..270526cba 100644 --- a/packages/ui/src/components/checkbox/checkbox.module.css +++ b/packages/ui/src/components/checkbox/checkbox.module.css @@ -1,30 +1,30 @@ :root { - --ax-public-checkbox-size-medium: 1.25rem; - --ax-public-checkbox-size-small: 1.125rem; - --ax-public-checkbox-size-extra-small: var(--wb-size-200); + --wb-public-checkbox-size-medium: 1.25rem; + --wb-public-checkbox-size-small: 1.125rem; + --wb-public-checkbox-size-extra-small: var(--wb-size-200); - --ax-public-checkbox-icon-size-medium: 0.875rem; - --ax-public-checkbox-icon-size-small: var(--wb-size-150); - --ax-public-checkbox-icon-size-extra-small: 0.625rem; + --wb-public-checkbox-icon-size-medium: 0.875rem; + --wb-public-checkbox-icon-size-small: var(--wb-size-150); + --wb-public-checkbox-icon-size-extra-small: 0.625rem; - --ax-public-checkbox-border-radius-medium: var(--wb-radius-50); - --ax-public-checkbox-border-radius-small: var(--wb-radius-50); - --ax-public-checkbox-border-radius-extra-small: var(--wb-radius-50); + --wb-public-checkbox-border-radius-medium: var(--wb-radius-50); + --wb-public-checkbox-border-radius-small: var(--wb-radius-50); + --wb-public-checkbox-border-radius-extra-small: var(--wb-radius-50); - --ax-public-checkbox-border-width: var(--wb-size-12); + --wb-public-checkbox-border-width: var(--wb-size-12); - --ax-public-checkbox-border-color: var(--wb-ui-stroke-subtle); - --ax-public-checkbox-bg: var(--wb-ui-bg-base); - --ax-public-checkbox-icon-color: var(--wb-ui-text-onaccent-default); + --wb-public-checkbox-border-color: var(--wb-ui-stroke-subtle); + --wb-public-checkbox-bg: var(--wb-ui-bg-base); + --wb-public-checkbox-icon-color: var(--wb-ui-text-onaccent-default); - --ax-public-checkbox-checked-bg: var(--wb-components-selector-fill-checked); + --wb-public-checkbox-checked-bg: var(--wb-components-selector-fill-checked); - --ax-public-checkbox-focus-border-color: var(--wb-ui-stroke-subtle); - --ax-public-checkbox-focus-border-shadow: var(--wb-shadow-ui-focus); + --wb-public-checkbox-focus-border-color: var(--wb-ui-stroke-subtle); + --wb-public-checkbox-focus-border-shadow: var(--wb-shadow-ui-focus); - --ax-public-checkbox-disabled-bg: var(--wb-ui-bg-inset); - --ax-public-checkbox-disabled-border-color: var(--wb-ui-stroke-subtle); - --ax-public-checkbox-disabled-icon-color: var(--wb-ui-icon-disabled); + --wb-public-checkbox-disabled-bg: var(--wb-ui-bg-inset); + --wb-public-checkbox-disabled-border-color: var(--wb-ui-stroke-subtle); + --wb-public-checkbox-disabled-icon-color: var(--wb-ui-icon-disabled); } @layer ui.component { @@ -40,27 +40,27 @@ top: 50%; transform: translate(-50%, -50%); display: none; - color: var(--ax-public-checkbox-icon-color); + color: var(--wb-public-checkbox-icon-color); line-height: 0; &.medium { svg { - width: var(--ax-public-checkbox-icon-size-medium); - height: var(--ax-public-checkbox-icon-size-medium); + width: var(--wb-public-checkbox-icon-size-medium); + height: var(--wb-public-checkbox-icon-size-medium); } } &.small { svg { - width: var(--ax-public-checkbox-icon-size-small); - height: var(--ax-public-checkbox-icon-size-small); + width: var(--wb-public-checkbox-icon-size-small); + height: var(--wb-public-checkbox-icon-size-small); } } &.extra-small { svg { - width: var(--ax-public-checkbox-icon-size-extra-small); - height: var(--ax-public-checkbox-icon-size-extra-small); + width: var(--wb-public-checkbox-icon-size-extra-small); + height: var(--wb-public-checkbox-icon-size-extra-small); } } } @@ -70,15 +70,15 @@ display: inline-block; position: relative; margin: 0; - border: var(--ax-public-checkbox-border-width) solid var(--ax-public-checkbox-border-color); - background-color: var(--ax-public-checkbox-bg); + border: var(--wb-public-checkbox-border-width) solid var(--wb-public-checkbox-border-color); + background-color: var(--wb-public-checkbox-bg); cursor: pointer; vertical-align: middle; - transition: all var(--ax-public-transition); + transition: all var(--wb-public-transition); &:checked, &:indeterminate { - background-color: var(--ax-public-checkbox-checked-bg); + background-color: var(--wb-public-checkbox-checked-bg); border-color: transparent; } @@ -89,44 +89,44 @@ &:disabled:checked, &:disabled:indeterminate { - background-color: var(--ax-public-checkbox-disabled-bg); - border-color: var(--ax-public-checkbox-disabled-border-color); + background-color: var(--wb-public-checkbox-disabled-bg); + border-color: var(--wb-public-checkbox-disabled-border-color); } &:disabled ~ .icon { - color: var(--ax-public-checkbox-disabled-icon-color); + color: var(--wb-public-checkbox-disabled-icon-color); } &:disabled { cursor: auto; - background-color: var(--ax-public-checkbox-disabled-bg); - border-color: var(--ax-public-checkbox-disabled-border-color); + background-color: var(--wb-public-checkbox-disabled-bg); + border-color: var(--wb-public-checkbox-disabled-border-color); } &:focus-visible { box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y) var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread) - var(--ax-public-checkbox-focus-border-shadow); - border-color: var(--ax-public-checkbox-border-color); + var(--wb-public-checkbox-focus-border-shadow); + border-color: var(--wb-public-checkbox-border-color); outline: none; } &.medium { - width: var(--ax-public-checkbox-size-medium); - height: var(--ax-public-checkbox-size-medium); - border-radius: var(--ax-public-checkbox-border-radius-medium); + width: var(--wb-public-checkbox-size-medium); + height: var(--wb-public-checkbox-size-medium); + border-radius: var(--wb-public-checkbox-border-radius-medium); } &.small { - width: var(--ax-public-checkbox-size-small); - height: var(--ax-public-checkbox-size-small); - border-radius: var(--ax-public-checkbox-border-radius-small); + width: var(--wb-public-checkbox-size-small); + height: var(--wb-public-checkbox-size-small); + border-radius: var(--wb-public-checkbox-border-radius-small); } &.extra-small { - width: var(--ax-public-checkbox-size-extra-small); - height: var(--ax-public-checkbox-size-extra-small); - border-radius: var(--ax-public-checkbox-border-radius-extra-small); + width: var(--wb-public-checkbox-size-extra-small); + height: var(--wb-public-checkbox-size-extra-small); + border-radius: var(--wb-public-checkbox-border-radius-extra-small); } } } diff --git a/packages/ui/src/components/collapsible/collapsible.module.css b/packages/ui/src/components/collapsible/collapsible.module.css index 6bc3d9e5a..0e3c153f5 100644 --- a/packages/ui/src/components/collapsible/collapsible.module.css +++ b/packages/ui/src/components/collapsible/collapsible.module.css @@ -1,5 +1,5 @@ :root { - --ax-public-collapsible-transition-duration: 0.2s; + --wb-public-collapsible-transition-duration: 0.2s; } @layer ui.component { @@ -7,7 +7,7 @@ z-index: 10; svg { - transition: transform var(--ax-public-collapsible-transition-duration) ease; + transition: transform var(--wb-public-collapsible-transition-duration) ease; } &.expanded { @@ -21,7 +21,7 @@ display: grid; grid-template-rows: 0fr; overflow: hidden; - transition: grid-template-rows var(--ax-public-collapsible-transition-duration) ease; + transition: grid-template-rows var(--wb-public-collapsible-transition-duration) ease; &.expanded { overflow: unset; diff --git a/packages/ui/src/components/date-picker/date-picker.module.css b/packages/ui/src/components/date-picker/date-picker.module.css index f8829b5d0..4ec3dba85 100644 --- a/packages/ui/src/components/date-picker/date-picker.module.css +++ b/packages/ui/src/components/date-picker/date-picker.module.css @@ -1,19 +1,19 @@ @layer ui.component { .container { background: transparent; - border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color); - color: var(--ax-public-input-root-color); + border: var(--wb-public-input-root-border-size) solid var(--wb-public-input-root-border-color); + color: var(--wb-public-input-root-color); cursor: pointer; width: 100%; &[aria-expanded='true'] { - border-color: var(--ax-public-input-root-border-color-focus); + border-color: var(--wb-public-input-root-border-color-focus); } &.container--error { - background-color: var(--ax-public-input-root-background-color-error); - border-color: var(--ax-public-input-root-border-color-error); - color: var(--ax-public-input-root-color-error); + background-color: var(--wb-public-input-root-background-color-error); + border-color: var(--wb-public-input-root-border-color-error); + color: var(--wb-public-input-root-color-error); } &.container--placeholder { @@ -28,11 +28,11 @@ } .calendar { - background: var(--ax-public-date-picker-dropdown-background); - border: var(--wb-size-12) solid var(--ax-public-date-picker-dropdown-border-color); + background: var(--wb-public-date-picker-dropdown-background); + border: var(--wb-size-12) solid var(--wb-public-date-picker-dropdown-border-color); border-radius: var(--wb-radius-100); - box-shadow: var(--ax-public-date-picker-dropdown-box-shadow); - color: var(--ax-public-date-picker-color); + box-shadow: var(--wb-public-date-picker-dropdown-box-shadow); + color: var(--wb-public-date-picker-color); } /* @@ -44,10 +44,10 @@ .calendar :global(.rdp-root) { --rdp-day_button-border-radius: var(--wb-radius-75); --rdp-selected-border: none; - --rdp-today-color: var(--ax-public-date-picker-date-today-color); + --rdp-today-color: var(--wb-public-date-picker-date-today-color); /* retheme react-day-picker's accent (range endpoints, focus rings) to our token instead. */ - --rdp-accent-color: var(--ax-public-date-picker-date-today-color); + --rdp-accent-color: var(--wb-public-date-picker-date-today-color); } .calendar :global(.rdp-day_button) { @@ -58,15 +58,15 @@ render them as a neutral nav control so both arrows match each other and the rest of the calendar. */ .calendar :global(.rdp-chevron) { - fill: var(--ax-public-date-picker-nav-color); + fill: var(--wb-public-date-picker-nav-color); } .calendar :global(.rdp-day:not(.rdp-disabled):not(.rdp-selected) .rdp-day_button:hover) { - background-color: var(--ax-public-date-picker-date-hover-background-color); + background-color: var(--wb-public-date-picker-date-hover-background-color); } .calendar :global(.rdp-selected .rdp-day_button) { - background-color: var(--ax-public-date-picker-date-selected-background-color); - color: var(--ax-public-date-picker-date-selected-color); + background-color: var(--wb-public-date-picker-date-selected-background-color); + color: var(--wb-public-date-picker-date-selected-color); } } diff --git a/packages/ui/src/components/date-picker/variables.css b/packages/ui/src/components/date-picker/variables.css index 9cfa8e79f..b4264210c 100644 --- a/packages/ui/src/components/date-picker/variables.css +++ b/packages/ui/src/components/date-picker/variables.css @@ -4,17 +4,17 @@ @import 'react-day-picker/style.css' layer(ui.base); :root { - --ax-public-date-picker-dropdown-background: var(--wb-ui-bg-base); - --ax-public-date-picker-dropdown-border-color: var(--wb-ui-stroke-default); - --ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px var(--wb-shadow-ui-color); + --wb-public-date-picker-dropdown-background: var(--wb-ui-bg-base); + --wb-public-date-picker-dropdown-border-color: var(--wb-ui-stroke-default); + --wb-public-date-picker-dropdown-box-shadow: 0px 4px 20px var(--wb-shadow-ui-color); - --ax-public-date-picker-color: var(--wb-ui-text-subtle-default); - --ax-public-date-picker-header-background: var(--wb-ui-bg-elevated); - --ax-public-date-picker-date-header-color: var(--wb-ui-text-muted-default); - --ax-public-date-picker-nav-color: var(--wb-ui-text-subtle-default); - --ax-public-date-picker-date-outside-color: var(--wb-ui-text-ghost-default); - --ax-public-date-picker-date-hover-background-color: var(--wb-components-datepicker-bg-secondary); - --ax-public-date-picker-date-selected-background-color: var(--wb-components-datepicker-bg-primary); - --ax-public-date-picker-date-selected-color: var(--wb-ui-text-default); - --ax-public-date-picker-date-today-color: var(--wb-ui-stroke-highlight); + --wb-public-date-picker-color: var(--wb-ui-text-subtle-default); + --wb-public-date-picker-header-background: var(--wb-ui-bg-elevated); + --wb-public-date-picker-date-header-color: var(--wb-ui-text-muted-default); + --wb-public-date-picker-nav-color: var(--wb-ui-text-subtle-default); + --wb-public-date-picker-date-outside-color: var(--wb-ui-text-ghost-default); + --wb-public-date-picker-date-hover-background-color: var(--wb-components-datepicker-bg-secondary); + --wb-public-date-picker-date-selected-background-color: var(--wb-components-datepicker-bg-primary); + --wb-public-date-picker-date-selected-color: var(--wb-ui-text-default); + --wb-public-date-picker-date-today-color: var(--wb-ui-stroke-highlight); } diff --git a/packages/ui/src/components/edge/edge-label/edge-label-size.module.css b/packages/ui/src/components/edge/edge-label/edge-label-size.module.css index b6953ca68..4de13ba60 100644 --- a/packages/ui/src/components/edge/edge-label/edge-label-size.module.css +++ b/packages/ui/src/components/edge/edge-label/edge-label-size.module.css @@ -1,100 +1,100 @@ :root { - --ax-public-edge-label-medium-label-padding: var(--wb-canvas-edge-label-m-v-pad-1) + --wb-public-edge-label-medium-label-padding: var(--wb-canvas-edge-label-m-v-pad-1) var(--wb-canvas-edge-label-m-h-pad-1); - --ax-public-edge-label-small-label-padding: var(--wb-canvas-edge-label-s-v-pad-1) + --wb-public-edge-label-small-label-padding: var(--wb-canvas-edge-label-s-v-pad-1) var(--wb-canvas-edge-label-s-h-pad-1); - --ax-public-edge-label-extra-small-label-padding: var(--wb-canvas-edge-label-xs-v-pad-1) var(--wb-space-125); + --wb-public-edge-label-extra-small-label-padding: var(--wb-canvas-edge-label-xs-v-pad-1) var(--wb-space-125); - --ax-public-edge-label-medium-icon-padding: var(--wb-canvas-edge-label-m-v-pad-2); - --ax-public-edge-label-small-icon-padding: var(--wb-canvas-edge-label-s-v-pad-2); - --ax-public-edge-label-extra-small-icon-padding: var(--wb-canvas-edge-label-xs-v-pad-2); + --wb-public-edge-label-medium-icon-padding: var(--wb-canvas-edge-label-m-v-pad-2); + --wb-public-edge-label-small-icon-padding: var(--wb-canvas-edge-label-s-v-pad-2); + --wb-public-edge-label-extra-small-icon-padding: var(--wb-canvas-edge-label-xs-v-pad-2); - --ax-public-edge-label-medium-content-padding: var(--wb-canvas-edge-label-m-v-pad-2) + --wb-public-edge-label-medium-content-padding: var(--wb-canvas-edge-label-m-v-pad-2) var(--wb-canvas-edge-label-m-h-pad-2); - --ax-public-edge-label-small-content-padding: var(--wb-canvas-edge-label-s-v-pad-2) + --wb-public-edge-label-small-content-padding: var(--wb-canvas-edge-label-s-v-pad-2) var(--wb-canvas-edge-label-s-h-pad-2); - --ax-public-edge-label-extra-small-content-padding: var(--wb-canvas-edge-label-xs-v-pad-2) + --wb-public-edge-label-extra-small-content-padding: var(--wb-canvas-edge-label-xs-v-pad-2) var(--wb-canvas-edge-label-xs-h-pad-2); - --ax-public-edge-label-medium-border-radius: var(--wb-canvas-edge-label-m-radius); - --ax-public-edge-label-small-border-radius: var(--wb-canvas-edge-label-s-radius); - --ax-public-edge-label-extra-small-border-radius: var(--wb-canvas-edge-label-xs-radius); + --wb-public-edge-label-medium-border-radius: var(--wb-canvas-edge-label-m-radius); + --wb-public-edge-label-small-border-radius: var(--wb-canvas-edge-label-s-radius); + --wb-public-edge-label-extra-small-border-radius: var(--wb-canvas-edge-label-xs-radius); - --ax-public-edge-label-medium-icon-size: 1.125rem; - --ax-public-edge-label-small-icon-size: 1rem; - --ax-public-edge-label-extra-small-icon-size: 0.875rem; + --wb-public-edge-label-medium-icon-size: 1.125rem; + --wb-public-edge-label-small-icon-size: 1rem; + --wb-public-edge-label-extra-small-icon-size: 0.875rem; } @layer ui.component { .medium { - border-radius: var(--ax-public-edge-label-medium-border-radius); + border-radius: var(--wb-public-edge-label-medium-border-radius); composes: ax-public-edge-label-medium from global; svg { - width: var(--ax-public-edge-label-medium-icon-size); - height: var(--ax-public-edge-label-medium-icon-size); + width: var(--wb-public-edge-label-medium-icon-size); + height: var(--wb-public-edge-label-medium-icon-size); } } .small { - border-radius: var(--ax-public-edge-label-small-border-radius); + border-radius: var(--wb-public-edge-label-small-border-radius); composes: ax-public-edge-label-small from global; svg { - width: var(--ax-public-edge-label-small-icon-size); - height: var(--ax-public-edge-label-small-icon-size); + width: var(--wb-public-edge-label-small-icon-size); + height: var(--wb-public-edge-label-small-icon-size); } } .extra-small { - border-radius: var(--ax-public-edge-label-extra-small-border-radius); + border-radius: var(--wb-public-edge-label-extra-small-border-radius); composes: ax-public-edge-label-extra-small from global; svg { - width: var(--ax-public-edge-label-extra-small-icon-size); - height: var(--ax-public-edge-label-extra-small-icon-size); + width: var(--wb-public-edge-label-extra-small-icon-size); + height: var(--wb-public-edge-label-extra-small-icon-size); } } .text { &.medium { - padding: var(--ax-public-edge-label-medium-label-padding); + padding: var(--wb-public-edge-label-medium-label-padding); } &.small { - padding: var(--ax-public-edge-label-small-label-padding); + padding: var(--wb-public-edge-label-small-label-padding); } &.extra-small { - padding: var(--ax-public-edge-label-extra-small-label-padding); + padding: var(--wb-public-edge-label-extra-small-label-padding); } } .icon { &.medium { - padding: var(--ax-public-edge-label-medium-icon-padding); + padding: var(--wb-public-edge-label-medium-icon-padding); } &.small { - padding: var(--ax-public-edge-label-small-icon-padding); + padding: var(--wb-public-edge-label-small-icon-padding); } &.extra-small { - padding: var(--ax-public-edge-label-extra-small-icon-padding); + padding: var(--wb-public-edge-label-extra-small-icon-padding); } } .compound { &.medium { - padding: var(--ax-public-edge-label-medium-content-padding); + padding: var(--wb-public-edge-label-medium-content-padding); } &.small { - padding: var(--ax-public-edge-label-small-content-padding); + padding: var(--wb-public-edge-label-small-content-padding); } &.extra-small { - padding: var(--ax-public-edge-label-extra-small-content-padding); + padding: var(--wb-public-edge-label-extra-small-content-padding); } } } diff --git a/packages/ui/src/components/edge/edge-label/edge-label.module.css b/packages/ui/src/components/edge/edge-label/edge-label.module.css index eafec54a9..c161b0258 100644 --- a/packages/ui/src/components/edge/edge-label/edge-label.module.css +++ b/packages/ui/src/components/edge/edge-label/edge-label.module.css @@ -1,18 +1,18 @@ :root { - --ax-public-edge-label-gap: var(--wb-canvas-edge-label-gap); - --ax-public-edge-background-color: var(--wb-ui-bg-inset); - --ax-public-edge-label-color: var(--wb-ui-text-default); + --wb-public-edge-label-gap: var(--wb-canvas-edge-label-gap); + --wb-public-edge-background-color: var(--wb-ui-bg-inset); + --wb-public-edge-label-color: var(--wb-ui-text-default); - --ax-public-edge-label-border-size: var(--wb-canvas-edge-stroke-regular); - --ax-public-edge-label-border-size-selected: var(--wb-canvas-edge-stroke-bold); + --wb-public-edge-label-border-size: var(--wb-canvas-edge-stroke-regular); + --wb-public-edge-label-border-size-selected: var(--wb-canvas-edge-stroke-bold); - --ax-public-edge-label-border-style: solid; - --ax-public-edge-label-border-color: var(--wb-canvas-edge-stroke-default); - --ax-public-edge-label-border-color-selected: var(--wb-canvas-edge-stroke-active); - --ax-public-edge-label-border-color-hover: var(--wb-canvas-edge-stroke-hover); + --wb-public-edge-label-border-style: solid; + --wb-public-edge-label-border-color: var(--wb-canvas-edge-stroke-default); + --wb-public-edge-label-border-color-selected: var(--wb-canvas-edge-stroke-active); + --wb-public-edge-label-border-color-hover: var(--wb-canvas-edge-stroke-hover); - --ax-public-edge-label-color-disabled: var(--wb-ui-text-ghost-default); - --ax-public-edge-label-border-color-disabled: var(--wb-canvas-edge-stroke-disabled); + --wb-public-edge-label-color-disabled: var(--wb-ui-text-ghost-default); + --wb-public-edge-label-border-color-disabled: var(--wb-canvas-edge-stroke-disabled); } @layer ui.component { @@ -21,19 +21,19 @@ display: inline-flex; justify-content: center; align-items: center; - gap: var(--ax-public-edge-label-gap); + gap: var(--wb-public-edge-label-gap); pointer-events: auto; width: max-content; - background-color: var(--ax-public-edge-background-color); - color: var(--ax-public-edge-label-color); + background-color: var(--wb-public-edge-background-color); + color: var(--wb-public-edge-label-color); - border: var(--ax-public-edge-label-border-size) var(--ax-public-edge-label-border-style) - var(--ax-public-edge-label-border-color); + border: var(--wb-public-edge-label-border-size) var(--wb-public-edge-label-border-style) + var(--wb-public-edge-label-border-color); - transition: border var(--ax-public-transition); + transition: border var(--wb-public-transition); &:hover, &.hovered, @@ -44,18 +44,18 @@ &.hovered:not(.selected, .disabled, .temporary), &:hover:not(.selected, .disabled, .temporary) { - border-color: var(--ax-public-edge-label-border-color-hover); + border-color: var(--wb-public-edge-label-border-color-hover); } &.temporary, &.selected { - border-width: var(--ax-public-edge-label-border-size-selected); - border-color: var(--ax-public-edge-label-border-color-selected); + border-width: var(--wb-public-edge-label-border-size-selected); + border-color: var(--wb-public-edge-label-border-color-selected); } &.disabled { - color: var(--ax-public-edge-label-color-disabled); - border-color: var(--ax-public-edge-label-border-color-disabled); + color: var(--wb-public-edge-label-color-disabled); + border-color: var(--wb-public-edge-label-border-color-disabled); } } } diff --git a/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css b/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css index b279422ae..1a820e07a 100644 --- a/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css +++ b/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.css @@ -1,8 +1,8 @@ :root { - --ax-public-edge-color-disabled: var(--wb-canvas-edge-stroke-disabled); - --ax-public-edge-color-select: var(--wb-canvas-edge-stroke-active); - --ax-public-edge-color-hover: var(--wb-canvas-edge-stroke-hover); - --ax-public-edge-color: var(--wb-canvas-edge-stroke-default); - --ax-public-edge-stroke-width-select: 3; - --ax-public-edge-stroke-width: 2; + --wb-public-edge-color-disabled: var(--wb-canvas-edge-stroke-disabled); + --wb-public-edge-color-select: var(--wb-canvas-edge-stroke-active); + --wb-public-edge-color-hover: var(--wb-canvas-edge-stroke-hover); + --wb-public-edge-color: var(--wb-canvas-edge-stroke-default); + --wb-public-edge-stroke-width-select: 3; + --wb-public-edge-stroke-width: 2; } diff --git a/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.tsx b/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.tsx index cd190a2a6..5c6142e98 100644 --- a/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.tsx +++ b/packages/ui/src/components/edge/use-edge-styles/use-edge-styles.tsx @@ -27,17 +27,17 @@ export function useEdgeStyle({ state = 'default', isHovered = false }: UseEdgeSt return useMemo(() => { const strokeCssVariable = state === 'disabled' - ? '--ax-public-edge-color-disabled' + ? '--wb-public-edge-color-disabled' : state === 'selected' || state === 'temporary' - ? '--ax-public-edge-color-select' + ? '--wb-public-edge-color-select' : isHovered - ? '--ax-public-edge-color-hover' - : '--ax-public-edge-color'; + ? '--wb-public-edge-color-hover' + : '--wb-public-edge-color'; const strokeWidthCssVariable = - state === 'selected' ? '--ax-public-edge-stroke-width-select' : '--ax-public-edge-stroke-width'; + state === 'selected' ? '--wb-public-edge-stroke-width-select' : '--wb-public-edge-stroke-width'; - const transition = isHovered ? 'none' : `stroke var(--ax-public-transition)`; + const transition = isHovered ? 'none' : `stroke var(--wb-public-transition)`; return { stroke: `var(${strokeCssVariable})`, diff --git a/packages/ui/src/components/input/input-root.module.css b/packages/ui/src/components/input/input-root.module.css index 2f8e06498..26269deb9 100644 --- a/packages/ui/src/components/input/input-root.module.css +++ b/packages/ui/src/components/input/input-root.module.css @@ -3,37 +3,37 @@ display: flex; align-items: center; cursor: text; - background-color: var(--ax-public-input-root-background-color); - border: var(--ax-public-input-root-border-size) solid var(--ax-public-input-root-border-color); - color: var(--ax-public-input-root-icon-color); + background-color: var(--wb-public-input-root-background-color); + border: var(--wb-public-input-root-border-size) solid var(--wb-public-input-root-border-color); + color: var(--wb-public-input-root-icon-color); &[data-state='default']:not([data-disabled]):not(:focus-within):hover { - border-color: var(--ax-public-input-root-border-color-hover); + border-color: var(--wb-public-input-root-border-color-hover); } &[data-state='critical']:not([data-disabled]) { - background-color: var(--ax-public-input-root-background-color-critical); - border-color: var(--ax-public-input-root-border-color-critical); + background-color: var(--wb-public-input-root-background-color-critical); + border-color: var(--wb-public-input-root-border-color-critical); } &[data-state='success']:not([data-disabled]) { - background-color: var(--ax-public-input-root-background-color-success); - border-color: var(--ax-public-input-root-border-color-success); + background-color: var(--wb-public-input-root-background-color-success); + border-color: var(--wb-public-input-root-border-color-success); } &[data-state='read-only']:not([data-disabled]), &[data-disabled] { - background-color: var(--ax-public-input-root-background-color-disabled); - border-color: var(--ax-public-input-root-border-color); + background-color: var(--wb-public-input-root-background-color-disabled); + border-color: var(--wb-public-input-root-border-color); } &[data-disabled] { - color: var(--ax-public-input-root-color-disabled); + color: var(--wb-public-input-root-color-disabled); cursor: not-allowed; } &:not([data-disabled]):focus-within { - border-color: var(--ax-public-input-root-border-color-focus); + border-color: var(--wb-public-input-root-border-color-focus); } } @@ -63,7 +63,7 @@ cursor: pointer; &:hover:not(:disabled) { - color: var(--ax-public-input-color); + color: var(--wb-public-input-color); } &:focus-visible { diff --git a/packages/ui/src/components/input/input.module.css b/packages/ui/src/components/input/input.module.css index 9f2977407..0689ce296 100644 --- a/packages/ui/src/components/input/input.module.css +++ b/packages/ui/src/components/input/input.module.css @@ -6,7 +6,7 @@ border: none; background: transparent; padding: 0; - color: var(--ax-public-input-color); + color: var(--wb-public-input-color); white-space: nowrap; overflow: hidden; @@ -17,12 +17,12 @@ } &:disabled { - color: var(--ax-public-input-color-disabled); + color: var(--wb-public-input-color-disabled); cursor: not-allowed; } &::placeholder { - color: var(--ax-public-input-placeholder-color); + color: var(--wb-public-input-placeholder-color); opacity: 1; } } diff --git a/packages/ui/src/components/input/variables.css b/packages/ui/src/components/input/variables.css index e1ecfdc8e..08391d87f 100644 --- a/packages/ui/src/components/input/variables.css +++ b/packages/ui/src/components/input/variables.css @@ -1,22 +1,22 @@ :root { - --ax-public-input-color: var(--wb-ui-text-default); - --ax-public-input-color-disabled: var(--wb-ui-text-ghost-default); - --ax-public-input-placeholder-color: var(--wb-ui-text-ghost-default); + --wb-public-input-color: var(--wb-ui-text-default); + --wb-public-input-color-disabled: var(--wb-ui-text-ghost-default); + --wb-public-input-placeholder-color: var(--wb-ui-text-ghost-default); - --ax-public-input-root-background-color: var(--wb-ui-bg-base); - --ax-public-input-root-background-color-disabled: var(--wb-ui-bg-fill-disabled); - --ax-public-input-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical); - --ax-public-input-root-background-color-success: var(--wb-components-text-field-bg-primary-success); - --ax-public-input-root-border-color: var(--wb-components-text-field-stroke-default); - --ax-public-input-root-border-color-hover: var(--wb-ui-stroke-default); - --ax-public-input-root-border-color-focus: var(--wb-components-text-field-stroke-focus); - --ax-public-input-root-border-color-critical: var(--wb-components-text-field-stroke-critical); - --ax-public-input-root-border-color-success: var(--wb-components-text-field-stroke-success); - --ax-public-input-root-border-size: var(--wb-size-12); - --ax-public-input-root-icon-color: var(--wb-ui-text-subtle-default); - --ax-public-input-root-color-disabled: var(--wb-ui-text-ghost-default); - --ax-public-input-root-color: var(--wb-ui-text-subtle-default); - --ax-public-input-root-background-color-error: var(--wb-components-text-field-bg-primary-critical); - --ax-public-input-root-border-color-error: var(--wb-components-text-field-stroke-critical); - --ax-public-input-root-color-error: var(--wb-ui-text-critical-default); + --wb-public-input-root-background-color: var(--wb-ui-bg-base); + --wb-public-input-root-background-color-disabled: var(--wb-ui-bg-fill-disabled); + --wb-public-input-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical); + --wb-public-input-root-background-color-success: var(--wb-components-text-field-bg-primary-success); + --wb-public-input-root-border-color: var(--wb-components-text-field-stroke-default); + --wb-public-input-root-border-color-hover: var(--wb-ui-stroke-default); + --wb-public-input-root-border-color-focus: var(--wb-components-text-field-stroke-focus); + --wb-public-input-root-border-color-critical: var(--wb-components-text-field-stroke-critical); + --wb-public-input-root-border-color-success: var(--wb-components-text-field-stroke-success); + --wb-public-input-root-border-size: var(--wb-size-12); + --wb-public-input-root-icon-color: var(--wb-ui-text-subtle-default); + --wb-public-input-root-color-disabled: var(--wb-ui-text-ghost-default); + --wb-public-input-root-color: var(--wb-ui-text-subtle-default); + --wb-public-input-root-background-color-error: var(--wb-components-text-field-bg-primary-critical); + --wb-public-input-root-border-color-error: var(--wb-components-text-field-stroke-critical); + --wb-public-input-root-color-error: var(--wb-ui-text-critical-default); } diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css index 3d2c5b12d..a3a351832 100644 --- a/packages/ui/src/components/modal/modal.module.css +++ b/packages/ui/src/components/modal/modal.module.css @@ -1,43 +1,43 @@ :root { - --ax-public-modal-width: 26.25rem; - --ax-public-modal-border-radius: var(--wb-radius-200); - --ax-public-modal-padding: var(--wb-space-200); - - --ax-public-modal-description-size: var(--wb-font-size-125); - --ax-public-modal-description-line-height: 140%; - - --ax-public-modal-icon-padding: var(--wb-space-112); - --ax-public-modal-content-padding: var(--wb-space-300) var(--wb-space-200); - --ax-public-modal-footer-padding: var(--wb-space-0) var(--wb-space-200) var(--wb-space-200) var(--wb-space-200); - - --ax-public-modal-background: var(--wb-ui-bg-elevated); - --ax-public-modal-backdrop-background: var(--wb-colors-gray-900); - --ax-public-modal-close-button-color: var(--wb-ui-text-subtle-default); - --ax-public-modal-header-background: var(--wb-ui-bg-elevated); - --ax-public-modal-header-border-color: var(--wb-ui-stroke-default); - --ax-public-modal-title-color: var(--wb-ui-text-default); - --ax-public-modal-description-color: var(--wb-ui-text-subtle-default); - --ax-public-modal-icon-background: var(--wb-ui-brand-fill); - --ax-public-modal-icon-color: var(--wb-ui-text-onaccent-default); - --ax-public-modal-content-background: var(--wb-ui-bg-elevated); - --ax-public-modal-footer-border-color: var(--wb-ui-stroke-default); - - --ax-public-modal-large-width: 30rem; - --ax-public-modal-large-padding: var(--wb-space-300); - --ax-public-modal-large-title-size: var(--wb-font-size-225); - --ax-public-modal-large-title-line-height: 130%; - --ax-public-modal-large-icon-padding: var(--wb-space-137); - - --ax-public-modal-box-shadow: var(--wb-shadow-ui-l-x) var(--wb-shadow-ui-l-y) var(--wb-shadow-ui-l-blur) + --wb-public-modal-width: 26.25rem; + --wb-public-modal-border-radius: var(--wb-radius-200); + --wb-public-modal-padding: var(--wb-space-200); + + --wb-public-modal-description-size: var(--wb-font-size-125); + --wb-public-modal-description-line-height: 140%; + + --wb-public-modal-icon-padding: var(--wb-space-112); + --wb-public-modal-content-padding: var(--wb-space-300) var(--wb-space-200); + --wb-public-modal-footer-padding: var(--wb-space-0) var(--wb-space-200) var(--wb-space-200) var(--wb-space-200); + + --wb-public-modal-background: var(--wb-ui-bg-elevated); + --wb-public-modal-backdrop-background: var(--wb-colors-gray-900); + --wb-public-modal-close-button-color: var(--wb-ui-text-subtle-default); + --wb-public-modal-header-background: var(--wb-ui-bg-elevated); + --wb-public-modal-header-border-color: var(--wb-ui-stroke-default); + --wb-public-modal-title-color: var(--wb-ui-text-default); + --wb-public-modal-description-color: var(--wb-ui-text-subtle-default); + --wb-public-modal-icon-background: var(--wb-ui-brand-fill); + --wb-public-modal-icon-color: var(--wb-ui-text-onaccent-default); + --wb-public-modal-content-background: var(--wb-ui-bg-elevated); + --wb-public-modal-footer-border-color: var(--wb-ui-stroke-default); + + --wb-public-modal-large-width: 30rem; + --wb-public-modal-large-padding: var(--wb-space-300); + --wb-public-modal-large-title-size: var(--wb-font-size-225); + --wb-public-modal-large-title-line-height: 130%; + --wb-public-modal-large-icon-padding: var(--wb-space-137); + + --wb-public-modal-box-shadow: var(--wb-shadow-ui-l-x) var(--wb-shadow-ui-l-y) var(--wb-shadow-ui-l-blur) var(--wb-shadow-ui-l-spread) var(--wb-shadow-ui-color); - --ax-public-modal-gap: var(--wb-space-150); - --ax-public-modal-gap-large: var(--wb-space-150); + --wb-public-modal-gap: var(--wb-space-150); + --wb-public-modal-gap-large: var(--wb-space-150); - --ax-public-modal-icon-border-radius: var(--wb-radius-75); - --ax-public-modal-icon-border-radius-large: var(--wb-radius-100); + --wb-public-modal-icon-border-radius: var(--wb-radius-75); + --wb-public-modal-icon-border-radius-large: var(--wb-radius-100); - --ax-public-modal-content-gap: var(--wb-space-50); + --wb-public-modal-content-gap: var(--wb-space-50); } @layer ui.component { @@ -52,7 +52,7 @@ dismiss the dialog. */ z-index: 1000; inset: 0; - background-color: color-mix(in srgb, var(--ax-public-modal-backdrop-background), transparent 50%); + background-color: color-mix(in srgb, var(--wb-public-modal-backdrop-background), transparent 50%); transition: opacity 200ms ease; @@ -71,11 +71,11 @@ display: flex; flex-direction: column; max-height: calc(100dvh - var(--wb-space-600)); - background-color: var(--ax-public-modal-background); - border-radius: var(--ax-public-modal-border-radius); - width: var(--ax-public-modal-width); + background-color: var(--wb-public-modal-background); + border-radius: var(--wb-public-modal-border-radius); + width: var(--wb-public-modal-width); outline: none; - box-shadow: var(--ax-public-modal-box-shadow); + box-shadow: var(--wb-public-modal-box-shadow); transition: opacity 200ms ease, @@ -91,12 +91,12 @@ .header { display: flex; flex-shrink: 0; - padding: var(--ax-public-modal-padding); + padding: var(--wb-public-modal-padding); justify-content: space-between; align-items: center; - border-radius: var(--ax-public-modal-border-radius) var(--ax-public-modal-border-radius) 0 0; - border-bottom: var(--wb-size-12) solid var(--ax-public-modal-header-border-color); - background: var(--ax-public-modal-header-background); + border-radius: var(--wb-public-modal-border-radius) var(--wb-public-modal-border-radius) 0 0; + border-bottom: var(--wb-size-12) solid var(--wb-public-modal-header-border-color); + background: var(--wb-public-modal-header-background); } .title-wrapper { @@ -113,88 +113,88 @@ .icon { display: flex; - padding: var(--ax-public-modal-icon-padding); + padding: var(--wb-public-modal-icon-padding); justify-content: center; align-items: center; - border-radius: var(--ax-public-modal-icon-border-radius); - background: var(--ax-public-modal-icon-background); - color: var(--ax-public-modal-icon-color); + border-radius: var(--wb-public-modal-icon-border-radius); + background: var(--wb-public-modal-icon-background); + color: var(--wb-public-modal-icon-color); } .title { margin: 0; - color: var(--ax-public-modal-title-color); + color: var(--wb-public-modal-title-color); } .description { - color: var(--ax-public-modal-description-color); - font-size: var(--ax-public-modal-description-size); + color: var(--wb-public-modal-description-color); + font-size: var(--wb-public-modal-description-size); font-style: normal; font-weight: 400; - line-height: var(--ax-public-modal-description-line-height); + line-height: var(--wb-public-modal-description-line-height); margin: 0; } .content { display: flex; - padding: var(--ax-public-modal-content-padding); + padding: var(--wb-public-modal-content-padding); flex-direction: column; justify-content: center; align-items: center; - gap: var(--ax-public-modal-content-gap); + gap: var(--wb-public-modal-content-gap); align-self: stretch; min-height: 0; overflow: auto; - background: var(--ax-public-modal-content-background); - border-radius: var(--ax-public-modal-border-radius); + background: var(--wb-public-modal-content-background); + border-radius: var(--wb-public-modal-border-radius); } .footer { display: flex; flex-shrink: 0; - padding: var(--ax-public-modal-footer-padding); + padding: var(--wb-public-modal-footer-padding); justify-content: space-between; align-items: center; align-self: stretch; &.separated { - border-top: var(--wb-size-12) solid var(--ax-public-modal-footer-border-color); + border-top: var(--wb-size-12) solid var(--wb-public-modal-footer-border-color); } } .large { - width: var(--ax-public-modal-large-width); + width: var(--wb-public-modal-large-width); .header { - padding: var(--ax-public-modal-large-padding); + padding: var(--wb-public-modal-large-padding); .title-wrapper { - gap: var(--ax-public-modal-gap-large); + gap: var(--wb-public-modal-gap-large); } } .title { - font-size: var(--ax-public-modal-large-title-size); - line-height: var(--ax-public-modal-large-title-line-height); + font-size: var(--wb-public-modal-large-title-size); + line-height: var(--wb-public-modal-large-title-line-height); } .icon { - padding: var(--ax-public-modal-large-icon-padding); - border-radius: var(--ax-public-modal-icon-border-radius-large); + padding: var(--wb-public-modal-large-icon-padding); + border-radius: var(--wb-public-modal-icon-border-radius-large); } .content { - padding: var(--ax-public-modal-large-padding); + padding: var(--wb-public-modal-large-padding); } .footer { &.separated { - padding: var(--ax-public-modal-large-padding); + padding: var(--wb-public-modal-large-padding); } &.integrated { - padding: 0 var(--ax-public-modal-large-padding) var(--ax-public-modal-large-padding) - var(--ax-public-modal-large-padding); + padding: 0 var(--wb-public-modal-large-padding) var(--wb-public-modal-large-padding) + var(--wb-public-modal-large-padding); } } } diff --git a/packages/ui/src/components/node/node-description/node-description.module.css b/packages/ui/src/components/node/node-description/node-description.module.css index a063bf68f..7bfc90b15 100644 --- a/packages/ui/src/components/node/node-description/node-description.module.css +++ b/packages/ui/src/components/node/node-description/node-description.module.css @@ -1,6 +1,6 @@ :root { - --ax-public-node-title-color: var(--wb-ui-text-default); - --ax-public-node-title-subtitle: var(--wb-ui-text-subtle-default); + --wb-public-node-title-color: var(--wb-ui-text-default); + --wb-public-node-title-subtitle: var(--wb-ui-text-subtle-default); } @layer ui.component { @@ -13,7 +13,7 @@ width: 100%; .title { - color: var(--ax-public-node-title-color); + color: var(--wb-public-node-title-color); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -21,7 +21,7 @@ } .subtitle { - color: var(--ax-public-node-title-subtitle); + color: var(--wb-public-node-title-subtitle); } } } diff --git a/packages/ui/src/components/node/node-icon/node-icon.module.css b/packages/ui/src/components/node/node-icon/node-icon.module.css index b87a08b32..54beaf1cb 100644 --- a/packages/ui/src/components/node/node-icon/node-icon.module.css +++ b/packages/ui/src/components/node/node-icon/node-icon.module.css @@ -1,23 +1,23 @@ :root { - --ax-public-node-icon-border-size: 0.0625rem; - --ax-public-node-icon-border-radius: var(--wb-canvas-node-head-icon-radius); - --ax-public-node-icon-padding: var(--wb-space-125); + --wb-public-node-icon-border-size: 0.0625rem; + --wb-public-node-icon-border-radius: var(--wb-canvas-node-head-icon-radius); + --wb-public-node-icon-padding: var(--wb-space-125); - --ax-public-node-icon-color: var(--wb-canvas-node-icon-primary); - --ax-public-node-icon-container-border-color: var(--wb-canvas-node-stroke-default); - --ax-public-node-icon-container-background-color: var(--wb-canvas-node-bg-secondary-default); + --wb-public-node-icon-color: var(--wb-canvas-node-icon-primary); + --wb-public-node-icon-container-border-color: var(--wb-canvas-node-stroke-default); + --wb-public-node-icon-container-background-color: var(--wb-canvas-node-bg-secondary-default); } @layer ui.component { .container { display: flex; - padding: var(--ax-public-node-icon-padding); + padding: var(--wb-public-node-icon-padding); justify-content: center; align-items: center; - color: var(--ax-public-node-icon-color); + color: var(--wb-public-node-icon-color); - border-radius: var(--ax-public-node-icon-border-radius); - border: var(--ax-public-node-icon-border-size) solid var(--ax-public-node-icon-container-border-color); - background: var(--ax-public-node-icon-container-background-color); + border-radius: var(--wb-public-node-icon-border-radius); + border: var(--wb-public-node-icon-border-size) solid var(--wb-public-node-icon-container-border-color); + background: var(--wb-public-node-icon-container-background-color); } } diff --git a/packages/ui/src/components/node/node-panel/handle.module.css b/packages/ui/src/components/node/node-panel/handle.module.css index 02c1e46d1..3c5fad382 100644 --- a/packages/ui/src/components/node/node-panel/handle.module.css +++ b/packages/ui/src/components/node/node-panel/handle.module.css @@ -1,14 +1,14 @@ :root { - --ax-public-node-port-boundary-size: 3.125rem; - --ax-public-node-port-size: 0.25rem; - --ax-public-node-port-size-hover: 0.75rem; - --ax-public-node-port-border-size: 0.125rem; + --wb-public-node-port-boundary-size: 3.125rem; + --wb-public-node-port-size: 0.25rem; + --wb-public-node-port-size-hover: 0.75rem; + --wb-public-node-port-border-size: 0.125rem; - --ax-public-node-port-background-color: var(--wb-canvas-port-fill-default); - --ax-public-node-port-border-color: var(--wb-canvas-port-stroke-default); + --wb-public-node-port-background-color: var(--wb-canvas-port-fill-default); + --wb-public-node-port-border-color: var(--wb-canvas-port-stroke-default); - --ax-public-node-port-background-color-hover: var(--wb-canvas-port-fill-active); - --ax-public-node-port-border-color-hover: var(--wb-canvas-port-stroke-active); + --wb-public-node-port-background-color-hover: var(--wb-canvas-port-fill-active); + --wb-public-node-port-border-color-hover: var(--wb-canvas-port-stroke-active); } @layer ui.component { @@ -17,16 +17,16 @@ position: relative; :global(:is(.react-flow__handle.react-flow__handle-right, .react-flow__handle.react-flow__handle-left)) { - top: calc(var(--ax-public-node-icon-padding) + var(--ax-public-node-icon-border-size) + 0.75rem); + top: calc(var(--wb-public-node-icon-padding) + var(--wb-public-node-icon-border-size) + 0.75rem); } :global(.react-flow__handle.react-flow__handle-right) { box-sizing: content-box; - right: calc(-1 * (var(--ax-public-node-padding) + var(--ax-public-node-border-size))); + right: calc(-1 * (var(--wb-public-node-padding) + var(--wb-public-node-border-size))); } :global(.react-flow__handle.react-flow__handle-left) { box-sizing: content-box; - left: calc(-1 * (var(--ax-public-node-padding) + var(--ax-public-node-border-size))); + left: calc(-1 * (var(--wb-public-node-padding) + var(--wb-public-node-border-size))); } } @@ -44,11 +44,11 @@ :global(.react-flow__handle) { box-sizing: content-box; - width: var(--ax-public-node-port-size); - height: var(--ax-public-node-port-size); + width: var(--wb-public-node-port-size); + height: var(--wb-public-node-port-size); - background: var(--ax-public-node-port-background-color); - border: var(--ax-public-node-port-border-size) solid var(--ax-public-node-port-border-color); + background: var(--wb-public-node-port-background-color); + border: var(--wb-public-node-port-border-size) solid var(--wb-public-node-port-border-color); transition-property: background-color, border-color, width, height; transition-timing-function: ease-in-out; @@ -59,8 +59,8 @@ content: ''; position: absolute; - width: var(--ax-public-node-port-boundary-size); - height: var(--ax-public-node-port-boundary-size); + width: var(--wb-public-node-port-boundary-size); + height: var(--wb-public-node-port-boundary-size); top: 50%; left: 50%; @@ -74,31 +74,31 @@ shrink the handle in exactly these states. */ :global(.connectingfrom) { box-sizing: content-box; - background: var(--ax-public-node-port-background-color-hover); - border-color: var(--ax-public-node-port-border-color-hover); + background: var(--wb-public-node-port-background-color-hover); + border-color: var(--wb-public-node-port-border-color-hover); - width: var(--ax-public-node-port-size-hover); - height: var(--ax-public-node-port-size-hover); + width: var(--wb-public-node-port-size-hover); + height: var(--wb-public-node-port-size-hover); } :global(.react-flow__handle) { &:hover { box-sizing: content-box; - background-color: var(--ax-public-node-port-background-color-hover); - border-color: var(--ax-public-node-port-border-color-hover); + background-color: var(--wb-public-node-port-background-color-hover); + border-color: var(--wb-public-node-port-border-color-hover); - width: var(--ax-public-node-port-size-hover); - height: var(--ax-public-node-port-size-hover); + width: var(--wb-public-node-port-size-hover); + height: var(--wb-public-node-port-size-hover); } } &:hover :global(.react-flow__handle.connectionindicator) { box-sizing: content-box; - background-color: var(--ax-public-node-port-background-color-hover); - border-color: var(--ax-public-node-port-border-color-hover); + background-color: var(--wb-public-node-port-background-color-hover); + border-color: var(--wb-public-node-port-border-color-hover); - width: var(--ax-public-node-port-size-hover); - height: var(--ax-public-node-port-size-hover); + width: var(--wb-public-node-port-size-hover); + height: var(--wb-public-node-port-size-hover); } } } diff --git a/packages/ui/src/components/node/node-panel/node-panel.module.css b/packages/ui/src/components/node/node-panel/node-panel.module.css index ae61c00aa..01be7a675 100644 --- a/packages/ui/src/components/node/node-panel/node-panel.module.css +++ b/packages/ui/src/components/node/node-panel/node-panel.module.css @@ -1,44 +1,44 @@ :root { - --ax-public-node-width: 16.125rem; - --ax-public-node-height: 100%; - --ax-public-node-border-size: 0.0625rem; + --wb-public-node-width: 16.125rem; + --wb-public-node-height: 100%; + --wb-public-node-border-size: 0.0625rem; - --ax-public-node-padding: var(--wb-space-100); - --ax-public-node-gap: var(--wb-space-100); - --ax-public-node-border-radius: var(--wb-canvas-node-head-radius); + --wb-public-node-padding: var(--wb-space-100); + --wb-public-node-gap: var(--wb-space-100); + --wb-public-node-border-radius: var(--wb-canvas-node-head-radius); - --ax-public-node-border-color: var(--wb-canvas-node-stroke-default); - --ax-public-node-background-color: var(--wb-canvas-node-bg-primary-default); - --ax-public-node-hover-background-color: var(--wb-canvas-node-bg-primary-default); - --ax-public-node-border-hover-color: var(--wb-canvas-node-stroke-hover); + --wb-public-node-border-color: var(--wb-canvas-node-stroke-default); + --wb-public-node-background-color: var(--wb-canvas-node-bg-primary-default); + --wb-public-node-hover-background-color: var(--wb-canvas-node-bg-primary-default); + --wb-public-node-border-hover-color: var(--wb-canvas-node-stroke-hover); - --ax-public-node-border-color-selected: var(--wb-canvas-node-stroke-hover); - --ax-public-node-box-shadow-selected: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y) + --wb-public-node-border-color-selected: var(--wb-canvas-node-stroke-hover); + --wb-public-node-box-shadow-selected: var(--wb-shadow-canvas-focus-node-x) var(--wb-shadow-canvas-focus-node-y) var(--wb-shadow-canvas-focus-node-blur) var(--wb-shadow-canvas-focus-node-spread) var(--wb-canvas-node-focus-active); } @layer ui.component { .node-panel-wrapper:hover .container { - background: var(--ax-public-node-hover-background-color); - border-color: var(--ax-public-node-border-hover-color); + background: var(--wb-public-node-hover-background-color); + border-color: var(--wb-public-node-border-hover-color); } .container { display: flex; - width: var(--ax-public-node-width); - height: var(--ax-public-node-height); - padding: var(--ax-public-node-padding); - gap: var(--ax-public-node-gap); + width: var(--wb-public-node-width); + height: var(--wb-public-node-height); + padding: var(--wb-public-node-padding); + gap: var(--wb-public-node-gap); align-items: center; flex-direction: column; - border-radius: var(--ax-public-node-border-radius); - border: var(--ax-public-node-border-size) solid var(--ax-public-node-border-color); - background: var(--ax-public-node-background-color); + border-radius: var(--wb-public-node-border-radius); + border: var(--wb-public-node-border-size) solid var(--wb-public-node-border-color); + background: var(--wb-public-node-background-color); &.selected { - border-color: var(--ax-public-node-border-color-selected); - box-shadow: var(--ax-public-node-box-shadow-selected); + border-color: var(--wb-public-node-border-color-selected); + box-shadow: var(--wb-public-node-box-shadow-selected); } &:not(:hover) { diff --git a/packages/ui/src/components/number-field/number-field.module.css b/packages/ui/src/components/number-field/number-field.module.css index a52c46e54..e1f867747 100644 --- a/packages/ui/src/components/number-field/number-field.module.css +++ b/packages/ui/src/components/number-field/number-field.module.css @@ -4,38 +4,38 @@ min-width: 0; align-items: center; overflow: hidden; - background-color: var(--ax-public-number-field-root-background-color); - border: var(--ax-public-number-field-root-border-size) solid var(--ax-public-number-field-root-border-color); - color: var(--ax-public-number-field-root-icon-color); + background-color: var(--wb-public-number-field-root-background-color); + border: var(--wb-public-number-field-root-border-size) solid var(--wb-public-number-field-root-border-color); + color: var(--wb-public-number-field-root-icon-color); cursor: text; &[data-field-state='default']:not([data-field-disabled]):not(:focus-within):hover { - border-color: var(--ax-public-number-field-root-border-color-hover); + border-color: var(--wb-public-number-field-root-border-color-hover); } &[data-field-state='critical']:not([data-field-disabled]) { - background-color: var(--ax-public-number-field-root-background-color-critical); - border-color: var(--ax-public-number-field-root-border-color-critical); + background-color: var(--wb-public-number-field-root-background-color-critical); + border-color: var(--wb-public-number-field-root-border-color-critical); } &[data-field-state='success']:not([data-field-disabled]) { - background-color: var(--ax-public-number-field-root-background-color-success); - border-color: var(--ax-public-number-field-root-border-color-success); + background-color: var(--wb-public-number-field-root-background-color-success); + border-color: var(--wb-public-number-field-root-border-color-success); } &[data-field-state='read-only']:not([data-field-disabled]), &[data-field-disabled] { - background-color: var(--ax-public-number-field-root-background-color-disabled); - border-color: var(--ax-public-number-field-root-border-color); + background-color: var(--wb-public-number-field-root-background-color-disabled); + border-color: var(--wb-public-number-field-root-border-color); } &[data-field-disabled] { - color: var(--ax-public-number-field-color-disabled); + color: var(--wb-public-number-field-color-disabled); cursor: not-allowed; } &:not([data-field-disabled]):focus-within { - border-color: var(--ax-public-number-field-root-border-color-focus); + border-color: var(--wb-public-number-field-root-border-color-focus); } } @@ -62,19 +62,19 @@ border: none; background: transparent; padding: 0; - color: var(--ax-public-number-field-color); + color: var(--wb-public-number-field-color); &:focus-visible { outline: none; } &:disabled { - color: var(--ax-public-number-field-color-disabled); + color: var(--wb-public-number-field-color-disabled); cursor: not-allowed; } &::placeholder { - color: var(--ax-public-number-field-placeholder-color); + color: var(--wb-public-number-field-placeholder-color); opacity: 1; } } @@ -105,7 +105,7 @@ cursor: pointer; &:hover:not(:disabled) { - color: var(--ax-public-number-field-color); + color: var(--wb-public-number-field-color); } &:focus-visible { @@ -138,23 +138,23 @@ justify-content: center; padding: 0; border: none; - border-left: var(--wb-size-12) solid var(--ax-public-number-field-stepper-border-color); - background-color: var(--ax-public-number-field-stepper-background-color); - color: var(--ax-public-number-field-root-icon-color); + border-left: var(--wb-size-12) solid var(--wb-public-number-field-stepper-border-color); + background-color: var(--wb-public-number-field-stepper-background-color); + color: var(--wb-public-number-field-root-icon-color); cursor: pointer; &:hover:not(:disabled, [data-disabled]) { - background-color: var(--ax-public-number-field-stepper-background-color-hover); + background-color: var(--wb-public-number-field-stepper-background-color-hover); } &:active:not(:disabled, [data-disabled]) { - background-color: var(--ax-public-number-field-stepper-background-color-active); + background-color: var(--wb-public-number-field-stepper-background-color-active); } &:disabled, &[data-disabled] { - background-color: var(--ax-public-number-field-stepper-background-color-disabled); - color: var(--ax-public-number-field-color-disabled); + background-color: var(--wb-public-number-field-stepper-background-color-disabled); + color: var(--wb-public-number-field-color-disabled); cursor: not-allowed; } @@ -165,6 +165,6 @@ } .decrement { - border-top: var(--wb-size-12) solid var(--ax-public-number-field-stepper-border-color); + border-top: var(--wb-size-12) solid var(--wb-public-number-field-stepper-border-color); } } diff --git a/packages/ui/src/components/number-field/variables.css b/packages/ui/src/components/number-field/variables.css index e50ea3ff2..a0a0a5936 100644 --- a/packages/ui/src/components/number-field/variables.css +++ b/packages/ui/src/components/number-field/variables.css @@ -1,21 +1,21 @@ :root { - --ax-public-number-field-color: var(--wb-ui-text-default); - --ax-public-number-field-color-disabled: var(--wb-ui-text-ghost-default); - --ax-public-number-field-placeholder-color: var(--wb-ui-text-ghost-default); - --ax-public-number-field-root-background-color: var(--wb-ui-bg-base); - --ax-public-number-field-root-background-color-disabled: var(--wb-ui-bg-fill-disabled); - --ax-public-number-field-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical); - --ax-public-number-field-root-background-color-success: var(--wb-components-text-field-bg-primary-success); - --ax-public-number-field-root-border-color: var(--wb-components-text-field-stroke-default); - --ax-public-number-field-root-border-color-hover: var(--wb-ui-stroke-default); - --ax-public-number-field-root-border-color-focus: var(--wb-components-text-field-stroke-focus); - --ax-public-number-field-root-border-color-critical: var(--wb-components-text-field-stroke-critical); - --ax-public-number-field-root-border-color-success: var(--wb-components-text-field-stroke-success); - --ax-public-number-field-root-border-size: var(--wb-size-12); - --ax-public-number-field-root-icon-color: var(--wb-ui-text-subtle-default); - --ax-public-number-field-stepper-background-color: var(--wb-ui-bg-base); - --ax-public-number-field-stepper-background-color-hover: var(--wb-ui-bg-fill-hover); - --ax-public-number-field-stepper-background-color-active: var(--wb-ui-bg-fill-active); - --ax-public-number-field-stepper-background-color-disabled: var(--wb-ui-bg-fill-disabled); - --ax-public-number-field-stepper-border-color: var(--wb-ui-stroke-default); + --wb-public-number-field-color: var(--wb-ui-text-default); + --wb-public-number-field-color-disabled: var(--wb-ui-text-ghost-default); + --wb-public-number-field-placeholder-color: var(--wb-ui-text-ghost-default); + --wb-public-number-field-root-background-color: var(--wb-ui-bg-base); + --wb-public-number-field-root-background-color-disabled: var(--wb-ui-bg-fill-disabled); + --wb-public-number-field-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical); + --wb-public-number-field-root-background-color-success: var(--wb-components-text-field-bg-primary-success); + --wb-public-number-field-root-border-color: var(--wb-components-text-field-stroke-default); + --wb-public-number-field-root-border-color-hover: var(--wb-ui-stroke-default); + --wb-public-number-field-root-border-color-focus: var(--wb-components-text-field-stroke-focus); + --wb-public-number-field-root-border-color-critical: var(--wb-components-text-field-stroke-critical); + --wb-public-number-field-root-border-color-success: var(--wb-components-text-field-stroke-success); + --wb-public-number-field-root-border-size: var(--wb-size-12); + --wb-public-number-field-root-icon-color: var(--wb-ui-text-subtle-default); + --wb-public-number-field-stepper-background-color: var(--wb-ui-bg-base); + --wb-public-number-field-stepper-background-color-hover: var(--wb-ui-bg-fill-hover); + --wb-public-number-field-stepper-background-color-active: var(--wb-ui-bg-fill-active); + --wb-public-number-field-stepper-background-color-disabled: var(--wb-ui-bg-fill-disabled); + --wb-public-number-field-stepper-border-color: var(--wb-ui-stroke-default); } diff --git a/packages/ui/src/components/radio-button/radio-size.module.css b/packages/ui/src/components/radio-button/radio-size.module.css index 6d3b007e2..cfb895d7b 100644 --- a/packages/ui/src/components/radio-button/radio-size.module.css +++ b/packages/ui/src/components/radio-button/radio-size.module.css @@ -1,41 +1,41 @@ :root { - --ax-public-radio-size-medium: 1.25rem; - --ax-public-radio-size-small: 1.125rem; - --ax-public-radio-size-extra-small: var(--wb-size-200); + --wb-public-radio-size-medium: 1.25rem; + --wb-public-radio-size-small: 1.125rem; + --wb-public-radio-size-extra-small: var(--wb-size-200); - --ax-public-radio-dot-size-medium: 0.625rem; - --ax-public-radio-dot-size-small: var(--wb-size-100); - --ax-public-radio-dot-size-extra-small: var(--wb-size-100); + --wb-public-radio-dot-size-medium: 0.625rem; + --wb-public-radio-dot-size-small: var(--wb-size-100); + --wb-public-radio-dot-size-extra-small: var(--wb-size-100); } @layer ui.component { .medium { - width: var(--ax-public-radio-size-medium); - height: var(--ax-public-radio-size-medium); + width: var(--wb-public-radio-size-medium); + height: var(--wb-public-radio-size-medium); &::after { - width: var(--ax-public-radio-dot-size-medium); - height: var(--ax-public-radio-dot-size-medium); + width: var(--wb-public-radio-dot-size-medium); + height: var(--wb-public-radio-dot-size-medium); } } .small { - width: var(--ax-public-radio-size-small); - height: var(--ax-public-radio-size-small); + width: var(--wb-public-radio-size-small); + height: var(--wb-public-radio-size-small); &::after { - width: var(--ax-public-radio-dot-size-small); - height: var(--ax-public-radio-dot-size-small); + width: var(--wb-public-radio-dot-size-small); + height: var(--wb-public-radio-dot-size-small); } } .extra-small { - width: var(--ax-public-radio-size-extra-small); - height: var(--ax-public-radio-size-extra-small); + width: var(--wb-public-radio-size-extra-small); + height: var(--wb-public-radio-size-extra-small); &::after { - width: var(--ax-public-radio-dot-size-extra-small); - height: var(--ax-public-radio-dot-size-extra-small); + width: var(--wb-public-radio-dot-size-extra-small); + height: var(--wb-public-radio-dot-size-extra-small); } } } diff --git a/packages/ui/src/components/radio-button/radio.module.css b/packages/ui/src/components/radio-button/radio.module.css index 85dd4cdba..0eb4cffe1 100644 --- a/packages/ui/src/components/radio-button/radio.module.css +++ b/packages/ui/src/components/radio-button/radio.module.css @@ -1,15 +1,15 @@ :root { - --ax-public-radio-border-color: var(--wb-ui-stroke-subtle); - --ax-public-radio-bg: var(--wb-ui-bg-base); - --ax-public-radio-checked-bg: var(--wb-components-selector-fill-checked); - --ax-public-radio-dot-color: var(--wb-ui-text-onaccent-default); + --wb-public-radio-border-color: var(--wb-ui-stroke-subtle); + --wb-public-radio-bg: var(--wb-ui-bg-base); + --wb-public-radio-checked-bg: var(--wb-components-selector-fill-checked); + --wb-public-radio-dot-color: var(--wb-ui-text-onaccent-default); - --ax-public-radio-focus-border-color: var(--wb-shadow-ui-focus); + --wb-public-radio-focus-border-color: var(--wb-shadow-ui-focus); - --ax-public-radio-disabled-border-color: var(--wb-ui-stroke-subtle); - --ax-public-radio-disabled-bg: var(--wb-ui-bg-inset); - --ax-public-radio-disabled-dot-color: var(--wb-ui-icon-disabled); - --ax-public-radio-border-radius: var(--wb-radius-full); + --wb-public-radio-disabled-border-color: var(--wb-ui-stroke-subtle); + --wb-public-radio-disabled-bg: var(--wb-ui-bg-inset); + --wb-public-radio-disabled-dot-color: var(--wb-ui-icon-disabled); + --wb-public-radio-border-radius: var(--wb-radius-full); } @layer ui.component { @@ -23,12 +23,12 @@ appearance: none; position: relative; margin: 0; - border: var(--wb-size-12) solid var(--ax-public-radio-border-color); - border-radius: var(--ax-public-radio-border-radius); - background-color: var(--ax-public-radio-bg); + border: var(--wb-size-12) solid var(--wb-public-radio-border-color); + border-radius: var(--wb-public-radio-border-radius); + background-color: var(--wb-public-radio-bg); cursor: pointer; vertical-align: middle; - transition: all var(--ax-public-transition); + transition: all var(--wb-public-transition); &::after { content: ''; @@ -36,14 +36,14 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - border-radius: var(--ax-public-radio-border-radius); - background-color: var(--ax-public-radio-dot-color); + border-radius: var(--wb-public-radio-border-radius); + background-color: var(--wb-public-radio-dot-color); opacity: 0; } &:checked { - border-color: var(--ax-public-radio-checked-bg); - background-color: var(--ax-public-radio-checked-bg); + border-color: var(--wb-public-radio-checked-bg); + background-color: var(--wb-public-radio-checked-bg); &::after { opacity: 1; @@ -54,19 +54,19 @@ outline: none; box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y) var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread) - var(--ax-public-radio-focus-border-color); + var(--wb-public-radio-focus-border-color); } &:disabled { cursor: not-allowed; - background-color: var(--ax-public-radio-disabled-bg); - border-color: var(--ax-public-radio-disabled-border-color); + background-color: var(--wb-public-radio-disabled-bg); + border-color: var(--wb-public-radio-disabled-border-color); &:checked { - background-color: var(--ax-public-radio-disabled-bg); + background-color: var(--wb-public-radio-disabled-bg); &::after { - background-color: var(--ax-public-radio-disabled-dot-color); + background-color: var(--wb-public-radio-disabled-dot-color); } } } diff --git a/packages/ui/src/components/segment-picker/border-radius-size.module.css b/packages/ui/src/components/segment-picker/border-radius-size.module.css index 2413b3d6c..7bfdf339d 100644 --- a/packages/ui/src/components/segment-picker/border-radius-size.module.css +++ b/packages/ui/src/components/segment-picker/border-radius-size.module.css @@ -1,39 +1,39 @@ :root { - --ax-public-segment-picker-border-radius-extra-large: var(--wb-radius-150); - --ax-public-segment-picker-border-radius-large: var(--wb-radius-150); - --ax-public-segment-picker-border-radius-medium: var(--wb-radius-125); - --ax-public-segment-picker-border-radius-small: var(--wb-radius-100); - --ax-public-segment-picker-border-radius-extra-small: var(--wb-radius-100); - --ax-public-segment-picker-border-radius-xx-small: var(--wb-radius-100); - --ax-public-segment-picker-border-radius-xxx-small: var(--wb-radius-100); + --wb-public-segment-picker-border-radius-extra-large: var(--wb-radius-150); + --wb-public-segment-picker-border-radius-large: var(--wb-radius-150); + --wb-public-segment-picker-border-radius-medium: var(--wb-radius-125); + --wb-public-segment-picker-border-radius-small: var(--wb-radius-100); + --wb-public-segment-picker-border-radius-extra-small: var(--wb-radius-100); + --wb-public-segment-picker-border-radius-xx-small: var(--wb-radius-100); + --wb-public-segment-picker-border-radius-xxx-small: var(--wb-radius-100); } @layer ui.component { .extra-large { - border-radius: var(--ax-public-segment-picker-border-radius-extra-large); + border-radius: var(--wb-public-segment-picker-border-radius-extra-large); } .large { - border-radius: var(--ax-public-segment-picker-border-radius-large); + border-radius: var(--wb-public-segment-picker-border-radius-large); } .medium { - border-radius: var(--ax-public-segment-picker-border-radius-medium); + border-radius: var(--wb-public-segment-picker-border-radius-medium); } .small { - border-radius: var(--ax-public-segment-picker-border-radius-small); + border-radius: var(--wb-public-segment-picker-border-radius-small); } .extra-small { - border-radius: var(--ax-public-segment-picker-border-radius-extra-small); + border-radius: var(--wb-public-segment-picker-border-radius-extra-small); } .xx-small { - border-radius: var(--ax-public-segment-picker-border-radius-xx-small); + border-radius: var(--wb-public-segment-picker-border-radius-xx-small); } .xxx-small { - border-radius: var(--ax-public-segment-picker-border-radius-xxx-small); + border-radius: var(--wb-public-segment-picker-border-radius-xxx-small); } } diff --git a/packages/ui/src/components/segment-picker/segment-picker.module.css b/packages/ui/src/components/segment-picker/segment-picker.module.css index aa78d8881..01b9080e3 100644 --- a/packages/ui/src/components/segment-picker/segment-picker.module.css +++ b/packages/ui/src/components/segment-picker/segment-picker.module.css @@ -1,20 +1,20 @@ :root { - --ax-public-segment-picker-gap: var(--wb-space-50); - --ax-public-segment-picker-padding: var(--wb-space-50); - --ax-public-segment-picker-background-color: var(--wb-ui-bg-inset); - --ax-public-segment-picker-circle-border-radius: var(--wb-radius-full); + --wb-public-segment-picker-gap: var(--wb-space-50); + --wb-public-segment-picker-padding: var(--wb-space-50); + --wb-public-segment-picker-background-color: var(--wb-ui-bg-inset); + --wb-public-segment-picker-circle-border-radius: var(--wb-radius-full); } @layer ui.component { .container { display: flex; - gap: var(--ax-public-segment-picker-gap); - padding: var(--ax-public-segment-picker-padding); + gap: var(--wb-public-segment-picker-gap); + padding: var(--wb-public-segment-picker-padding); - background-color: var(--ax-public-segment-picker-background-color); + background-color: var(--wb-public-segment-picker-background-color); &.circle { - border-radius: var(--ax-public-segment-picker-circle-border-radius); + border-radius: var(--wb-public-segment-picker-circle-border-radius); width: fit-content; } diff --git a/packages/ui/src/components/select/select-button/select-button.module.css b/packages/ui/src/components/select/select-button/select-button.module.css index 3869d380a..7b05d4fec 100644 --- a/packages/ui/src/components/select/select-button/select-button.module.css +++ b/packages/ui/src/components/select/select-button/select-button.module.css @@ -1,13 +1,13 @@ :root { - --ax-public-select-border-size: 0.0625rem; - --ax-public-select-button-color: var(--wb-ui-text-default); - --ax-public-select-button-border-color: var(--wb-components-text-field-stroke-default); - --ax-public-select-button-border-color-focus: var(--wb-components-text-field-stroke-focus); - --ax-public-select-button-color-disabled: var(--wb-components-text-field-stroke-default); - - --ax-public-select-button-background-color-error: var(--wb-components-text-field-bg-primary-critical); - --ax-public-select-button-border-color-error: var(--wb-components-text-field-stroke-critical); - --ax-public-select-button-color-error: var(--wb-ui-text-critical-default); + --wb-public-select-border-size: 0.0625rem; + --wb-public-select-button-color: var(--wb-ui-text-default); + --wb-public-select-button-border-color: var(--wb-components-text-field-stroke-default); + --wb-public-select-button-border-color-focus: var(--wb-components-text-field-stroke-focus); + --wb-public-select-button-color-disabled: var(--wb-components-text-field-stroke-default); + + --wb-public-select-button-background-color-error: var(--wb-components-text-field-bg-primary-critical); + --wb-public-select-button-border-color-error: var(--wb-components-text-field-stroke-critical); + --wb-public-select-button-color-error: var(--wb-ui-text-critical-default); } @layer ui.component { @@ -23,33 +23,33 @@ background-color: transparent; cursor: pointer; - color: var(--ax-public-select-button-color); + color: var(--wb-public-select-button-color); - border: var(--ax-public-select-border-size) solid var(--ax-public-select-button-border-color); + border: var(--wb-public-select-border-size) solid var(--wb-public-select-button-border-color); &:not(:hover) { - transition: all var(--ax-public-transition); + transition: all var(--wb-public-transition); } &[data-popup-open] { - border-color: var(--ax-public-select-button-border-color-focus); + border-color: var(--wb-public-select-button-border-color-focus); } &.container--error { - background-color: var(--ax-public-select-button-background-color-error); - border-color: var(--ax-public-select-button-border-color-error); - color: var(--ax-public-select-button-color-error); + background-color: var(--wb-public-select-button-background-color-error); + border-color: var(--wb-public-select-button-border-color-error); + color: var(--wb-public-select-button-color-error); } &:focus-visible { - border-color: var(--ax-public-select-button-border-color-focus); + border-color: var(--wb-public-select-button-border-color-focus); outline: none; box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y) var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread) var(--wb-shadow-ui-focus); } &:disabled { - color: var(--ax-public-select-button-color-disabled); + color: var(--wb-public-select-button-color-disabled); cursor: auto; } diff --git a/packages/ui/src/components/separator/separator.module.css b/packages/ui/src/components/separator/separator.module.css index f1faca111..ed930207b 100644 --- a/packages/ui/src/components/separator/separator.module.css +++ b/packages/ui/src/components/separator/separator.module.css @@ -1,12 +1,12 @@ :root { - --ax-public-list-item-separator-border-size: 0.0625rem; - --ax-public-list-item-separator-background-color: var(--wb-ui-stroke-divider); + --wb-public-list-item-separator-border-size: 0.0625rem; + --wb-public-list-item-separator-background-color: var(--wb-ui-stroke-divider); } @layer ui.component { .separator { - border-top: var(--ax-public-list-item-separator-border-size) solid - var(--ax-public-list-item-separator-background-color); + border-top: var(--wb-public-list-item-separator-border-size) solid + var(--wb-public-list-item-separator-background-color); width: 100%; margin: 0; border-bottom: none; diff --git a/packages/ui/src/components/snackbar/components/icon.module.css b/packages/ui/src/components/snackbar/components/icon.module.css index 1171ab12f..3d499f99c 100644 --- a/packages/ui/src/components/snackbar/components/icon.module.css +++ b/packages/ui/src/components/snackbar/components/icon.module.css @@ -11,22 +11,22 @@ .status { width: 1.375rem; height: 1.375rem; - color: var(--ax-public-snackbar-default-icon-color); + color: var(--wb-public-snackbar-default-icon-color); &.success { - color: var(--ax-public-snackbar-success-icon-color); + color: var(--wb-public-snackbar-success-icon-color); } &.error { - color: var(--ax-public-snackbar-error-icon-color); + color: var(--wb-public-snackbar-error-icon-color); } &.warning { - color: var(--ax-public-snackbar-warning-icon-color); + color: var(--wb-public-snackbar-warning-icon-color); } &.info { - color: var(--ax-public-snackbar-info-icon-color); + color: var(--wb-public-snackbar-info-icon-color); } } } diff --git a/packages/ui/src/components/snackbar/components/message.module.css b/packages/ui/src/components/snackbar/components/message.module.css index 2df188f49..61a5dd7e0 100644 --- a/packages/ui/src/components/snackbar/components/message.module.css +++ b/packages/ui/src/components/snackbar/components/message.module.css @@ -9,10 +9,10 @@ } .title { - color: var(--ax-public-snackbar-title-color); + color: var(--wb-public-snackbar-title-color); } .subtitle { - color: var(--ax-public-snackbar-subtitle-color); + color: var(--wb-public-snackbar-subtitle-color); } } diff --git a/packages/ui/src/components/snackbar/snackbar.module.css b/packages/ui/src/components/snackbar/snackbar.module.css index cc58da979..4038beffb 100644 --- a/packages/ui/src/components/snackbar/snackbar.module.css +++ b/packages/ui/src/components/snackbar/snackbar.module.css @@ -1,76 +1,76 @@ :root { - --ax-public-snackbar-border-size: var(--wb-size-12); - --ax-public-snackbar-padding: var(--wb-space-200) var(--wb-space-200); - --ax-public-snackbar-border-radius: var(--wb-radius-100); - --ax-public-snackbar-content-gap: var(--wb-space-150); + --wb-public-snackbar-border-size: var(--wb-size-12); + --wb-public-snackbar-padding: var(--wb-space-200) var(--wb-space-200); + --wb-public-snackbar-border-radius: var(--wb-radius-100); + --wb-public-snackbar-content-gap: var(--wb-space-150); - --ax-public-snackbar-width: 31.25rem; - --ax-public-snackbar-title-color: var(--wb-ui-text-default); - --ax-public-snackbar-subtitle-color: var(--wb-ui-text-subtle-default); - --ax-public-snackbar-close-icon-color: var(--wb-ui-text-muted-default); + --wb-public-snackbar-width: 31.25rem; + --wb-public-snackbar-title-color: var(--wb-ui-text-default); + --wb-public-snackbar-subtitle-color: var(--wb-ui-text-subtle-default); + --wb-public-snackbar-close-icon-color: var(--wb-ui-text-muted-default); - --ax-public-snackbar-default-border: var(--wb-components-snackbar-stroke-default); - --ax-public-snackbar-default-background: var(--wb-ui-bg-base); - --ax-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default); + --wb-public-snackbar-default-border: var(--wb-components-snackbar-stroke-default); + --wb-public-snackbar-default-background: var(--wb-ui-bg-base); + --wb-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default); - --ax-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success); - --ax-public-snackbar-success-background: + --wb-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success); + --wb-public-snackbar-success-background: linear-gradient(var(--wb-components-snackbar-bg-success), var(--wb-components-snackbar-bg-success)), var(--wb-ui-bg-base); - --ax-public-snackbar-success-icon-color: var(--wb-components-snackbar-stroke-success); + --wb-public-snackbar-success-icon-color: var(--wb-components-snackbar-stroke-success); - --ax-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical); - --ax-public-snackbar-error-background: + --wb-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical); + --wb-public-snackbar-error-background: linear-gradient(var(--wb-components-snackbar-bg-critical), var(--wb-components-snackbar-bg-critical)), var(--wb-ui-bg-base); - --ax-public-snackbar-error-icon-color: var(--wb-components-snackbar-stroke-critical); + --wb-public-snackbar-error-icon-color: var(--wb-components-snackbar-stroke-critical); - --ax-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning); - --ax-public-snackbar-warning-background: + --wb-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning); + --wb-public-snackbar-warning-background: linear-gradient(var(--wb-components-snackbar-bg-warning), var(--wb-components-snackbar-bg-warning)), var(--wb-ui-bg-base); - --ax-public-snackbar-warning-icon-color: var(--wb-components-snackbar-stroke-warning); + --wb-public-snackbar-warning-icon-color: var(--wb-components-snackbar-stroke-warning); - --ax-public-snackbar-info-border: var(--wb-components-snackbar-stroke-info); - --ax-public-snackbar-info-background: + --wb-public-snackbar-info-border: var(--wb-components-snackbar-stroke-info); + --wb-public-snackbar-info-background: linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info)), var(--wb-ui-bg-base); - --ax-public-snackbar-info-icon-color: var(--wb-components-snackbar-stroke-info); + --wb-public-snackbar-info-icon-color: var(--wb-components-snackbar-stroke-info); } @layer ui.component { .container { display: flex; - width: calc(var(--ax-public-snackbar-width) + 2 * var(--wb-space-200) + 2 * var(--ax-public-snackbar-border-size)); - border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-default-border); - border-radius: var(--ax-public-snackbar-border-radius); - background: var(--ax-public-snackbar-default-background); - padding: var(--ax-public-snackbar-padding); + width: calc(var(--wb-public-snackbar-width) + 2 * var(--wb-space-200) + 2 * var(--wb-public-snackbar-border-size)); + border: var(--wb-public-snackbar-border-size) solid var(--wb-public-snackbar-default-border); + border-radius: var(--wb-public-snackbar-border-radius); + background: var(--wb-public-snackbar-default-background); + padding: var(--wb-public-snackbar-padding); .content { display: flex; - gap: var(--ax-public-snackbar-content-gap); + gap: var(--wb-public-snackbar-content-gap); width: 100%; min-width: 0; } &.success { - background: var(--ax-public-snackbar-success-background); - border-color: var(--ax-public-snackbar-success-border); + background: var(--wb-public-snackbar-success-background); + border-color: var(--wb-public-snackbar-success-border); } &.error { - background: var(--ax-public-snackbar-error-background); - border-color: var(--ax-public-snackbar-error-border); + background: var(--wb-public-snackbar-error-background); + border-color: var(--wb-public-snackbar-error-border); } &.warning { - background: var(--ax-public-snackbar-warning-background); - border-color: var(--ax-public-snackbar-warning-border); + background: var(--wb-public-snackbar-warning-background); + border-color: var(--wb-public-snackbar-warning-border); } &.info { - background: var(--ax-public-snackbar-info-background); - border-color: var(--ax-public-snackbar-info-border); + background: var(--wb-public-snackbar-info-background); + border-color: var(--wb-public-snackbar-info-border); } } } diff --git a/packages/ui/src/components/status/status.module.css b/packages/ui/src/components/status/status.module.css index c44dd2a1b..93ef101d5 100644 --- a/packages/ui/src/components/status/status.module.css +++ b/packages/ui/src/components/status/status.module.css @@ -1,9 +1,9 @@ :root { - --ax-public-status-right: var(--wb-space-150) /* missing token */; - --ax-public-status-size: var(--wb-space-250) /* missing token */; - --ax-public-status-icon-size: var(--wb-space-150) /* missing token */; - --ax-public-status-invalid-color: var(--wb-colors-orange-100) /* missing token */; - --ax-public-status-invalid-background-color: var(--wb-colors-orange-400) /* missing token */; + --wb-public-status-right: var(--wb-space-150) /* missing token */; + --wb-public-status-size: var(--wb-space-250) /* missing token */; + --wb-public-status-icon-size: var(--wb-space-150) /* missing token */; + --wb-public-status-invalid-color: var(--wb-colors-orange-100) /* missing token */; + --wb-public-status-invalid-background-color: var(--wb-colors-orange-400) /* missing token */; } @layer ui.component { @@ -12,22 +12,22 @@ align-items: center; justify-content: center; position: absolute; - right: var(--ax-public-status-right); + right: var(--wb-public-status-right); top: 0; transform: translateY(-50%); - height: var(--ax-public-status-size); + height: var(--wb-public-status-size); aspect-ratio: 1 / 1; border-radius: 50%; svg { - height: var(--ax-public-status-icon-size); + height: var(--wb-public-status-icon-size); aspect-ratio: 1 / 1; fill: currentColor; } &.status-container--invalid { - color: var(--ax-public-status-invalid-color); - background: var(--ax-public-status-invalid-background-color); + color: var(--wb-public-status-invalid-color); + background: var(--wb-public-status-invalid-background-color); } } } diff --git a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css index 081437cde..4d4097913 100644 --- a/packages/ui/src/components/switch/icon-switch/icon-switch.module.css +++ b/packages/ui/src/components/switch/icon-switch/icon-switch.module.css @@ -1,23 +1,23 @@ :root { - --ax-public-icon-switch-width: 4.125rem; - --ax-public-icon-switch-height: 2.125rem; - --ax-public-icon-switch-thumb-size: 1.75rem; - --ax-public-icon-switch-thumb-offset: var(--wb-size-37); - --ax-public-icon-switch-translate: var(--wb-size-400); - --ax-public-icon-switch-padding: var(--wb-space-100); - --ax-public-icon-switch-icon-size: var(--wb-size-200); + --wb-public-icon-switch-width: 4.125rem; + --wb-public-icon-switch-height: 2.125rem; + --wb-public-icon-switch-thumb-size: 1.75rem; + --wb-public-icon-switch-thumb-offset: var(--wb-size-37); + --wb-public-icon-switch-translate: var(--wb-size-400); + --wb-public-icon-switch-padding: var(--wb-space-100); + --wb-public-icon-switch-icon-size: var(--wb-size-200); - --ax-public-icon-switch-track-bg: var(--wb-ui-bg-inset); - --ax-public-icon-switch-thumb-bg-primary: var(--wb-components-selector-fill-checked); - --ax-public-icon-switch-icon-color: var(--wb-ui-text-muted-default); - --ax-public-icon-switch-icon-selected-color: var(--wb-ui-text-onaccent-default); - --ax-public-icon-switch-thumb-bg-secondary: var(--wb-ui-bg-base); + --wb-public-icon-switch-track-bg: var(--wb-ui-bg-inset); + --wb-public-icon-switch-thumb-bg-primary: var(--wb-components-selector-fill-checked); + --wb-public-icon-switch-icon-color: var(--wb-ui-text-muted-default); + --wb-public-icon-switch-icon-selected-color: var(--wb-ui-text-onaccent-default); + --wb-public-icon-switch-thumb-bg-secondary: var(--wb-ui-bg-base); } @layer ui.component { .container { - width: var(--ax-public-icon-switch-width); - height: var(--ax-public-icon-switch-height); + width: var(--wb-public-icon-switch-width); + height: var(--wb-public-icon-switch-height); position: relative; border: none; } @@ -25,19 +25,19 @@ .track { position: absolute; inset: 0; - border-radius: calc(var(--ax-public-icon-switch-height) / 2); - background-color: var(--ax-public-icon-switch-track-bg); + border-radius: calc(var(--wb-public-icon-switch-height) / 2); + background-color: var(--wb-public-icon-switch-track-bg); transition: background-color 0.1s ease-in-out; display: flex; justify-content: space-between; align-items: center; - padding: 0 var(--ax-public-icon-switch-padding); - color: var(--ax-public-icon-switch-icon-color); + padding: 0 var(--wb-public-icon-switch-padding); + color: var(--wb-public-icon-switch-icon-color); } .track > div { - width: var(--ax-public-icon-switch-icon-size); - height: var(--ax-public-icon-switch-icon-size); + width: var(--wb-public-icon-switch-icon-size); + height: var(--wb-public-icon-switch-icon-size); display: flex; align-items: center; justify-content: center; @@ -45,10 +45,10 @@ .thumb { position: absolute; - top: var(--ax-public-icon-switch-thumb-offset); - left: var(--ax-public-icon-switch-thumb-offset); - width: var(--ax-public-icon-switch-thumb-size); - height: var(--ax-public-icon-switch-thumb-size); + top: var(--wb-public-icon-switch-thumb-offset); + left: var(--wb-public-icon-switch-thumb-offset); + width: var(--wb-public-icon-switch-thumb-size); + height: var(--wb-public-icon-switch-thumb-size); border-radius: var(--wb-radius-full); transition: transform 0.1s ease-in-out; display: flex; @@ -56,19 +56,19 @@ justify-content: center; &.primary { - background-color: var(--ax-public-icon-switch-thumb-bg-primary); - color: var(--ax-public-icon-switch-icon-selected-color); + background-color: var(--wb-public-icon-switch-thumb-bg-primary); + color: var(--wb-public-icon-switch-icon-selected-color); } &.secondary { - background-color: var(--ax-public-icon-switch-thumb-bg-secondary); - color: var(--ax-public-icon-switch-thumb-bg-primary); + background-color: var(--wb-public-icon-switch-thumb-bg-secondary); + color: var(--wb-public-icon-switch-thumb-bg-primary); } } .icon { - width: var(--ax-public-icon-switch-icon-size); - height: var(--ax-public-icon-switch-icon-size); + width: var(--wb-public-icon-switch-icon-size); + height: var(--wb-public-icon-switch-icon-size); display: flex; align-items: center; justify-content: center; @@ -86,7 +86,7 @@ } .container[data-checked] .thumb { - transform: translateX(var(--ax-public-icon-switch-translate)); + transform: translateX(var(--wb-public-icon-switch-translate)); } /* Swap the thumb icon off the switch state (works controlled + uncontrolled). diff --git a/packages/ui/src/components/switch/switch-size.module.css b/packages/ui/src/components/switch/switch-size.module.css index 9543fe743..1a235ecfa 100644 --- a/packages/ui/src/components/switch/switch-size.module.css +++ b/packages/ui/src/components/switch/switch-size.module.css @@ -1,48 +1,48 @@ :root { - --ax-public-switch-width-medium: 1.875rem; - --ax-public-switch-height-medium: 1.25rem; - --ax-public-switch-thumb-padding-medium: var(--wb-size-37); + --wb-public-switch-width-medium: 1.875rem; + --wb-public-switch-height-medium: 1.25rem; + --wb-public-switch-thumb-padding-medium: var(--wb-size-37); - --ax-public-switch-width-small: 1.75rem; - --ax-public-switch-height-small: 1.125rem; - --ax-public-switch-thumb-padding-small: var(--wb-size-37); + --wb-public-switch-width-small: 1.75rem; + --wb-public-switch-height-small: 1.125rem; + --wb-public-switch-thumb-padding-small: var(--wb-size-37); - --ax-public-switch-width-extra-small: 1.625rem; - --ax-public-switch-height-extra-small: var(--wb-size-200); - --ax-public-switch-thumb-padding-extra-small: var(--wb-size-37); + --wb-public-switch-width-extra-small: 1.625rem; + --wb-public-switch-height-extra-small: var(--wb-size-200); + --wb-public-switch-thumb-padding-extra-small: var(--wb-size-37); } :root { --ax-switch-thumb-size-medium: calc( - var(--ax-public-switch-height-medium) - 2 * var(--ax-public-switch-thumb-padding-medium) + var(--wb-public-switch-height-medium) - 2 * var(--wb-public-switch-thumb-padding-medium) ); --ax-switch-thumb-size-small: calc( - var(--ax-public-switch-height-small) - 2 * var(--ax-public-switch-thumb-padding-small) + var(--wb-public-switch-height-small) - 2 * var(--wb-public-switch-thumb-padding-small) ); --ax-switch-thumb-size-extra-small: calc( - var(--ax-public-switch-height-extra-small) - 2 * var(--ax-public-switch-thumb-padding-extra-small) + var(--wb-public-switch-height-extra-small) - 2 * var(--wb-public-switch-thumb-padding-extra-small) ); } @layer ui.base { .medium { - width: var(--ax-public-switch-width-medium); - height: var(--ax-public-switch-height-medium); + width: var(--wb-public-switch-width-medium); + height: var(--wb-public-switch-height-medium); & .thumb { width: var(--ax-switch-thumb-size-medium); height: var(--ax-switch-thumb-size-medium); - left: var(--ax-public-switch-thumb-padding-medium); + left: var(--wb-public-switch-thumb-padding-medium); } &[data-checked] { .thumb { transform: translateX( calc( - var(--ax-public-switch-width-medium) - var(--ax-switch-thumb-size-medium) - 2 * - var(--ax-public-switch-thumb-padding-medium) - var(--ax-public-switch-border-size) + var(--wb-public-switch-width-medium) - var(--ax-switch-thumb-size-medium) - 2 * + var(--wb-public-switch-thumb-padding-medium) - var(--wb-public-switch-border-size) ) ); } @@ -50,21 +50,21 @@ } .small { - width: var(--ax-public-switch-width-small); - height: var(--ax-public-switch-height-small); + width: var(--wb-public-switch-width-small); + height: var(--wb-public-switch-height-small); .thumb { width: var(--ax-switch-thumb-size-small); height: var(--ax-switch-thumb-size-small); - left: var(--ax-public-switch-thumb-padding-small); + left: var(--wb-public-switch-thumb-padding-small); } &[data-checked] { .thumb { transform: translateX( calc( - var(--ax-public-switch-width-small) - var(--ax-switch-thumb-size-small) - 2 * - var(--ax-public-switch-thumb-padding-small) - var(--ax-public-switch-border-size) + var(--wb-public-switch-width-small) - var(--ax-switch-thumb-size-small) - 2 * + var(--wb-public-switch-thumb-padding-small) - var(--wb-public-switch-border-size) ) ); } @@ -72,21 +72,21 @@ } .extra-small { - width: var(--ax-public-switch-width-extra-small); - height: var(--ax-public-switch-height-extra-small); + width: var(--wb-public-switch-width-extra-small); + height: var(--wb-public-switch-height-extra-small); .thumb { width: var(--ax-switch-thumb-size-extra-small); height: var(--ax-switch-thumb-size-extra-small); - left: var(--ax-public-switch-thumb-padding-extra-small); + left: var(--wb-public-switch-thumb-padding-extra-small); } &[data-checked] { .thumb { transform: translateX( calc( - var(--ax-public-switch-width-extra-small) - var(--ax-switch-thumb-size-extra-small) - 2 * - var(--ax-public-switch-thumb-padding-extra-small) - var(--ax-public-switch-border-size) + var(--wb-public-switch-width-extra-small) - var(--ax-switch-thumb-size-extra-small) - 2 * + var(--wb-public-switch-thumb-padding-extra-small) - var(--wb-public-switch-border-size) ) ); } diff --git a/packages/ui/src/components/switch/switch.module.css b/packages/ui/src/components/switch/switch.module.css index c23ea4f28..b9066f79b 100644 --- a/packages/ui/src/components/switch/switch.module.css +++ b/packages/ui/src/components/switch/switch.module.css @@ -1,17 +1,17 @@ @import './switch-size.module.css'; :root { - --ax-public-switch-outline-color: var(--wb-ui-stroke-subtle); - --ax-public-switch-disabled-background-color: var(--wb-ui-bg-inset); - --ax-public-switch-disabled-border-color: var(--wb-ui-stroke-subtle); - --ax-public-track-no-selected-color: var(--wb-ui-bg-base); - --ax-public-track-selected-color: var(--wb-components-selector-fill-checked); - --ax-public-thumb-no-selected-color: var(--wb-ui-text-subtle-default); - --ax-public-thumb-disabled-color: var(--wb-ui-icon-disabled); - --ax-public-thumb-selected-color: var(--wb-ui-text-onaccent-default); + --wb-public-switch-outline-color: var(--wb-ui-stroke-subtle); + --wb-public-switch-disabled-background-color: var(--wb-ui-bg-inset); + --wb-public-switch-disabled-border-color: var(--wb-ui-stroke-subtle); + --wb-public-track-no-selected-color: var(--wb-ui-bg-base); + --wb-public-track-selected-color: var(--wb-components-selector-fill-checked); + --wb-public-thumb-no-selected-color: var(--wb-ui-text-subtle-default); + --wb-public-thumb-disabled-color: var(--wb-ui-icon-disabled); + --wb-public-thumb-selected-color: var(--wb-ui-text-onaccent-default); - --ax-public-switch-focus-border-color: var(--wb-shadow-ui-focus); - --ax-public-switch-border-size: var(--wb-size-12); + --wb-public-switch-focus-border-color: var(--wb-shadow-ui-focus); + --wb-public-switch-border-size: var(--wb-size-12); } @layer ui.base { @@ -23,17 +23,17 @@ position: relative; cursor: pointer; border-radius: var(--wb-radius-full); - border: var(--ax-public-switch-border-size) solid var(--ax-public-switch-outline-color); + border: var(--wb-public-switch-border-size) solid var(--wb-public-switch-outline-color); &:not(:hover) { - transition: background-color var(--ax-public-transition); + transition: background-color var(--wb-public-transition); } .thumb { position: absolute; border-radius: var(--wb-radius-full); - background-color: var(--ax-public-thumb-no-selected-color); - transition: transform var(--ax-public-transition); + background-color: var(--wb-public-thumb-no-selected-color); + transition: transform var(--wb-public-transition); } .track { @@ -51,29 +51,29 @@ outline: none; box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y) var(--wb-shadow-ui-focus-element-blur) var(--wb-shadow-ui-focus-element-spread) - var(--ax-public-switch-focus-border-color); + var(--wb-public-switch-focus-border-color); } &[data-checked] { .thumb { - background-color: var(--ax-public-thumb-selected-color); + background-color: var(--wb-public-thumb-selected-color); } .track { - background-color: var(--ax-public-track-selected-color); + background-color: var(--wb-public-track-selected-color); } } &[data-disabled] { cursor: auto; - border-color: var(--ax-public-switch-disabled-border-color); + border-color: var(--wb-public-switch-disabled-border-color); .track { - background-color: var(--ax-public-switch-disabled-background-color); + background-color: var(--wb-public-switch-disabled-background-color); } .thumb { - background-color: var(--ax-public-thumb-disabled-color); + background-color: var(--wb-public-thumb-disabled-color); } } } diff --git a/packages/ui/src/components/text-area/text-area.module.css b/packages/ui/src/components/text-area/text-area.module.css index 0ad674a2f..b0c219681 100644 --- a/packages/ui/src/components/text-area/text-area.module.css +++ b/packages/ui/src/components/text-area/text-area.module.css @@ -1,19 +1,19 @@ :root { - --ax-public-textarea-color: var(--wb-ui-text-default); - --ax-public-textarea-color-disabled: var(--wb-ui-text-ghost-default); - --ax-public-textarea-placeholder-color: var(--wb-ui-text-ghost-default); - --ax-public-textarea-root-background-color: var(--wb-ui-bg-base); - --ax-public-textarea-root-background-color-disabled: var(--wb-ui-bg-fill-disabled); - --ax-public-textarea-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical); - --ax-public-textarea-root-background-color-success: var(--wb-components-text-field-bg-primary-success); - --ax-public-textarea-root-border-color: var(--wb-components-text-field-stroke-default); - --ax-public-textarea-root-border-color-hover: var(--wb-ui-stroke-default); - --ax-public-textarea-root-border-color-focus: var(--wb-components-text-field-stroke-focus); - --ax-public-textarea-root-border-color-critical: var(--wb-components-text-field-stroke-critical); - --ax-public-textarea-root-border-color-success: var(--wb-components-text-field-stroke-success); - --ax-public-textarea-root-border-size: var(--wb-size-12); - --ax-public-textarea-root-icon-color: var(--wb-ui-text-subtle-default); - --ax-public-textarea-root-color-disabled: var(--wb-ui-text-ghost-default); + --wb-public-textarea-color: var(--wb-ui-text-default); + --wb-public-textarea-color-disabled: var(--wb-ui-text-ghost-default); + --wb-public-textarea-placeholder-color: var(--wb-ui-text-ghost-default); + --wb-public-textarea-root-background-color: var(--wb-ui-bg-base); + --wb-public-textarea-root-background-color-disabled: var(--wb-ui-bg-fill-disabled); + --wb-public-textarea-root-background-color-critical: var(--wb-components-text-field-bg-primary-critical); + --wb-public-textarea-root-background-color-success: var(--wb-components-text-field-bg-primary-success); + --wb-public-textarea-root-border-color: var(--wb-components-text-field-stroke-default); + --wb-public-textarea-root-border-color-hover: var(--wb-ui-stroke-default); + --wb-public-textarea-root-border-color-focus: var(--wb-components-text-field-stroke-focus); + --wb-public-textarea-root-border-color-critical: var(--wb-components-text-field-stroke-critical); + --wb-public-textarea-root-border-color-success: var(--wb-components-text-field-stroke-success); + --wb-public-textarea-root-border-size: var(--wb-size-12); + --wb-public-textarea-root-icon-color: var(--wb-ui-text-subtle-default); + --wb-public-textarea-root-color-disabled: var(--wb-ui-text-ghost-default); } @layer ui.component { @@ -23,37 +23,37 @@ width: 100%; height: auto; align-items: flex-start; - background-color: var(--ax-public-textarea-root-background-color); - color: var(--ax-public-textarea-root-icon-color); - border: var(--ax-public-textarea-root-border-size) solid var(--ax-public-textarea-root-border-color); + background-color: var(--wb-public-textarea-root-background-color); + color: var(--wb-public-textarea-root-icon-color); + border: var(--wb-public-textarea-root-border-size) solid var(--wb-public-textarea-root-border-color); &[data-state='default']:not([data-disabled]):not(:focus-within):hover { - border-color: var(--ax-public-textarea-root-border-color-hover); + border-color: var(--wb-public-textarea-root-border-color-hover); } &[data-state='critical']:not([data-disabled]) { - background-color: var(--ax-public-textarea-root-background-color-critical); - border-color: var(--ax-public-textarea-root-border-color-critical); + background-color: var(--wb-public-textarea-root-background-color-critical); + border-color: var(--wb-public-textarea-root-border-color-critical); } &[data-state='success']:not([data-disabled]) { - background-color: var(--ax-public-textarea-root-background-color-success); - border-color: var(--ax-public-textarea-root-border-color-success); + background-color: var(--wb-public-textarea-root-background-color-success); + border-color: var(--wb-public-textarea-root-border-color-success); } &[data-state='read-only']:not([data-disabled]), &[data-disabled] { - background-color: var(--ax-public-textarea-root-background-color-disabled); - border-color: var(--ax-public-textarea-root-border-color); + background-color: var(--wb-public-textarea-root-background-color-disabled); + border-color: var(--wb-public-textarea-root-border-color); } &[data-disabled] { - color: var(--ax-public-textarea-root-color-disabled); + color: var(--wb-public-textarea-root-color-disabled); cursor: not-allowed; } &:not([data-disabled]):focus-within { - border-color: var(--ax-public-textarea-root-border-color-focus); + border-color: var(--wb-public-textarea-root-border-color-focus); } } @@ -79,7 +79,7 @@ border: none; background: transparent; padding: 0; - color: var(--ax-public-textarea-color); + color: var(--wb-public-textarea-color); width: 100%; resize: none; font-family: inherit; @@ -89,12 +89,12 @@ } &:disabled { - color: var(--ax-public-textarea-color-disabled); + color: var(--wb-public-textarea-color-disabled); cursor: not-allowed; } &::placeholder { - color: var(--ax-public-textarea-placeholder-color); + color: var(--wb-public-textarea-placeholder-color); opacity: 1; } } @@ -125,7 +125,7 @@ cursor: pointer; &:hover:not(:disabled) { - color: var(--ax-public-textarea-color); + color: var(--wb-public-textarea-color); } &:focus-visible { diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css index 110a7783e..50f3b7220 100644 --- a/packages/ui/src/components/tooltip/tooltip.module.css +++ b/packages/ui/src/components/tooltip/tooltip.module.css @@ -1,19 +1,19 @@ :root { - --ax-public-tooltip-default-background: var(--wb-components-tooltip-bg-default); - --ax-public-tooltip-blue-background: var(--wb-components-tooltip-bg-info); - --ax-public-tooltip-padding: var(--wb-space-100) var(--wb-space-150); - --ax-public-tooltip-radius-size: var(--wb-radius-100); - --ax-public-tooltip-text-color: var(--wb-ui-text-tooltip-default); - --ax-public-tooltip-blue-text-color: var(--wb-ui-text-tooltip-accent-default); + --wb-public-tooltip-default-background: var(--wb-components-tooltip-bg-default); + --wb-public-tooltip-blue-background: var(--wb-components-tooltip-bg-info); + --wb-public-tooltip-padding: var(--wb-space-100) var(--wb-space-150); + --wb-public-tooltip-radius-size: var(--wb-radius-100); + --wb-public-tooltip-text-color: var(--wb-ui-text-tooltip-default); + --wb-public-tooltip-blue-text-color: var(--wb-ui-text-tooltip-accent-default); } @layer ui.component { .container { - --tooltip-background: var(--ax-public-tooltip-default-background); - --tooltip-text-color: var(--ax-public-tooltip-text-color); + --tooltip-background: var(--wb-public-tooltip-default-background); + --tooltip-text-color: var(--wb-public-tooltip-text-color); - padding: var(--ax-public-tooltip-padding); - border-radius: var(--ax-public-tooltip-radius-size); + padding: var(--wb-public-tooltip-padding); + border-radius: var(--wb-public-tooltip-radius-size); width: max-content; max-width: 33vw; z-index: 100; @@ -22,8 +22,8 @@ } .container[data-tooltip-type='blue'] { - --tooltip-background: var(--ax-public-tooltip-blue-background); - --tooltip-text-color: var(--ax-public-tooltip-blue-text-color); + --tooltip-background: var(--wb-public-tooltip-blue-background); + --tooltip-text-color: var(--wb-public-tooltip-blue-text-color); } .arrow { diff --git a/packages/ui/src/shared/styles/field-control-size.module.css b/packages/ui/src/shared/styles/field-control-size.module.css index 59f0cefa3..d44e38794 100644 --- a/packages/ui/src/shared/styles/field-control-size.module.css +++ b/packages/ui/src/shared/styles/field-control-size.module.css @@ -1,51 +1,51 @@ :root { - --ax-public-input-height-l: calc(var(--wb-size-500) + var(--wb-size-25)); - --ax-public-input-height-m: calc(var(--wb-size-400) + var(--wb-size-50)); - --ax-public-input-height-s: var(--wb-size-400); - --ax-public-input-height-xs: calc(var(--wb-size-300) + var(--wb-size-50)); + --wb-public-input-height-l: calc(var(--wb-size-500) + var(--wb-size-25)); + --wb-public-input-height-m: calc(var(--wb-size-400) + var(--wb-size-50)); + --wb-public-input-height-s: var(--wb-size-400); + --wb-public-input-height-xs: calc(var(--wb-size-300) + var(--wb-size-50)); - --ax-public-input-padding-l: var(--wb-space-137) var(--wb-space-150); - --ax-public-input-padding-m: var(--wb-space-125) var(--wb-space-150); - --ax-public-input-padding-s: var(--wb-space-100) var(--wb-space-150); - --ax-public-input-padding-xs: var(--wb-space-75) var(--wb-space-150); + --wb-public-input-padding-l: var(--wb-space-137) var(--wb-space-150); + --wb-public-input-padding-m: var(--wb-space-125) var(--wb-space-150); + --wb-public-input-padding-s: var(--wb-space-100) var(--wb-space-150); + --wb-public-input-padding-xs: var(--wb-space-75) var(--wb-space-150); - --ax-public-input-border-radius-l: var(--wb-radius-100); - --ax-public-input-border-radius-m: var(--wb-radius-75); - --ax-public-input-border-radius-s: var(--wb-radius-75); - --ax-public-input-border-radius-xs: var(--wb-radius-75); + --wb-public-input-border-radius-l: var(--wb-radius-100); + --wb-public-input-border-radius-m: var(--wb-radius-75); + --wb-public-input-border-radius-s: var(--wb-radius-75); + --wb-public-input-border-radius-xs: var(--wb-radius-75); - --ax-public-input-gap-l: var(--wb-space-100); - --ax-public-input-gap-m: var(--wb-space-100); - --ax-public-input-gap-s: var(--wb-space-100); - --ax-public-input-gap-xs: var(--wb-space-100); + --wb-public-input-gap-l: var(--wb-space-100); + --wb-public-input-gap-m: var(--wb-space-100); + --wb-public-input-gap-s: var(--wb-space-100); + --wb-public-input-gap-xs: var(--wb-space-100); } @layer ui.component { .l { - height: var(--ax-public-input-height-l); - padding: var(--ax-public-input-padding-l); - border-radius: var(--ax-public-input-border-radius-l); - gap: var(--ax-public-input-gap-l); + height: var(--wb-public-input-height-l); + padding: var(--wb-public-input-padding-l); + border-radius: var(--wb-public-input-border-radius-l); + gap: var(--wb-public-input-gap-l); } .m { - height: var(--ax-public-input-height-m); - padding: var(--ax-public-input-padding-m); - border-radius: var(--ax-public-input-border-radius-m); - gap: var(--ax-public-input-gap-m); + height: var(--wb-public-input-height-m); + padding: var(--wb-public-input-padding-m); + border-radius: var(--wb-public-input-border-radius-m); + gap: var(--wb-public-input-gap-m); } .s { - height: var(--ax-public-input-height-s); - padding: var(--ax-public-input-padding-s); - border-radius: var(--ax-public-input-border-radius-s); - gap: var(--ax-public-input-gap-s); + height: var(--wb-public-input-height-s); + padding: var(--wb-public-input-padding-s); + border-radius: var(--wb-public-input-border-radius-s); + gap: var(--wb-public-input-gap-s); } .xs { - height: var(--ax-public-input-height-xs); - padding: var(--ax-public-input-padding-xs); - border-radius: var(--ax-public-input-border-radius-xs); - gap: var(--ax-public-input-gap-xs); + height: var(--wb-public-input-height-xs); + padding: var(--wb-public-input-padding-xs); + border-radius: var(--wb-public-input-border-radius-xs); + gap: var(--wb-public-input-gap-xs); } } diff --git a/packages/ui/src/shared/styles/input-size.module.css b/packages/ui/src/shared/styles/input-size.module.css index 6a050f857..f30a249a1 100644 --- a/packages/ui/src/shared/styles/input-size.module.css +++ b/packages/ui/src/shared/styles/input-size.module.css @@ -1,33 +1,33 @@ :root { - --ax-public-input-padding-large: var(--wb-space-137) var(--wb-space-150); - --ax-public-input-padding-medium: var(--wb-space-125) var(--wb-space-150); - --ax-public-input-padding-small: var(--wb-space-100) var(--wb-space-150); + --wb-public-input-padding-large: var(--wb-space-137) var(--wb-space-150); + --wb-public-input-padding-medium: var(--wb-space-125) var(--wb-space-150); + --wb-public-input-padding-small: var(--wb-space-100) var(--wb-space-150); - --ax-public-input-border-radius-large: var(--wb-radius-100); - --ax-public-input-border-radius-medium: var(--wb-radius-75); - --ax-public-input-border-radius-small: var(--wb-radius-75); + --wb-public-input-border-radius-large: var(--wb-radius-100); + --wb-public-input-border-radius-medium: var(--wb-radius-75); + --wb-public-input-border-radius-small: var(--wb-radius-75); - --ax-public-input-gap-large: var(--wb-space-100); - --ax-public-input-gap-medium: var(--wb-space-100); - --ax-public-input-gap-small: var(--wb-space-100); + --wb-public-input-gap-large: var(--wb-space-100); + --wb-public-input-gap-medium: var(--wb-space-100); + --wb-public-input-gap-small: var(--wb-space-100); } @layer ui.component { .large { - padding: var(--ax-public-input-padding-large); - border-radius: var(--ax-public-input-border-radius-large); - gap: var(--ax-public-input-gap-large); + padding: var(--wb-public-input-padding-large); + border-radius: var(--wb-public-input-border-radius-large); + gap: var(--wb-public-input-gap-large); } .medium { - padding: var(--ax-public-input-padding-medium); - border-radius: var(--ax-public-input-border-radius-medium); - gap: var(--ax-public-input-gap-medium); + padding: var(--wb-public-input-padding-medium); + border-radius: var(--wb-public-input-border-radius-medium); + gap: var(--wb-public-input-gap-medium); } .small { - padding: var(--ax-public-input-padding-small); - border-radius: var(--ax-public-input-border-radius-small); - gap: var(--ax-public-input-gap-small); + padding: var(--wb-public-input-padding-small); + border-radius: var(--wb-public-input-border-radius-small); + gap: var(--wb-public-input-gap-small); } } diff --git a/packages/ui/src/shared/styles/list-box.module.css b/packages/ui/src/shared/styles/list-box.module.css index 982d3fc84..4c240b37a 100644 --- a/packages/ui/src/shared/styles/list-box.module.css +++ b/packages/ui/src/shared/styles/list-box.module.css @@ -1,10 +1,10 @@ :root { - --ax-public-list-box-background-color: var(--wb-ui-bg-base); - --ax-public-list-box-border-radius: var(--wb-radius-100); - --ax-public-list-box-box-shadow: var(--wb-shadow-ui-s-x) var(--wb-shadow-ui-s-y) var(--wb-shadow-ui-s-blur) + --wb-public-list-box-background-color: var(--wb-ui-bg-base); + --wb-public-list-box-border-radius: var(--wb-radius-100); + --wb-public-list-box-box-shadow: var(--wb-shadow-ui-s-x) var(--wb-shadow-ui-s-y) var(--wb-shadow-ui-s-blur) var(--wb-shadow-ui-s-spread) var(--wb-shadow-ui-color); - --ax-public-list-box-padding: var(--wb-space-50) var(--wb-space-50); - --ax-public-list-box-gap: var(--wb-space-50); + --wb-public-list-box-padding: var(--wb-space-50) var(--wb-space-50); + --wb-public-list-box-gap: var(--wb-space-50); } @layer ui.component { @@ -20,19 +20,19 @@ attributes (same pattern as Tooltip.Popup and Dialog.Popup). */ .list-box { display: flex; - padding: var(--ax-public-list-box-padding); + padding: var(--wb-public-list-box-padding); flex-direction: column; align-items: center; - gap: var(--ax-public-list-box-gap); + gap: var(--wb-public-list-box-gap); max-height: 200px; overflow-y: auto; overflow-x: hidden; margin: 0; - border-radius: var(--ax-public-list-box-border-radius); - background: var(--ax-public-list-box-background-color); - box-shadow: var(--ax-public-list-box-box-shadow); + border-radius: var(--wb-public-list-box-border-radius); + background: var(--wb-public-list-box-background-color); + box-shadow: var(--wb-public-list-box-box-shadow); transition: opacity 150ms ease-out, diff --git a/packages/ui/src/shared/styles/list-item-size.module.css b/packages/ui/src/shared/styles/list-item-size.module.css index 94302f34b..ca421d543 100644 --- a/packages/ui/src/shared/styles/list-item-size.module.css +++ b/packages/ui/src/shared/styles/list-item-size.module.css @@ -1,28 +1,28 @@ :root { - --ax-public-list-item-padding-large: var(--wb-space-137) var(--wb-space-100); - --ax-public-list-item-padding-medium: var(--wb-space-125) var(--wb-space-100); - --ax-public-list-item-padding-small: var(--wb-space-100) var(--wb-space-100); - --ax-public-list-item-gap-small: var(--wb-space-150); - --ax-public-list-item-gap-medium: var(--wb-space-150); - --ax-public-list-item-gap-large: var(--wb-space-150); + --wb-public-list-item-padding-large: var(--wb-space-137) var(--wb-space-100); + --wb-public-list-item-padding-medium: var(--wb-space-125) var(--wb-space-100); + --wb-public-list-item-padding-small: var(--wb-space-100) var(--wb-space-100); + --wb-public-list-item-gap-small: var(--wb-space-150); + --wb-public-list-item-gap-medium: var(--wb-space-150); + --wb-public-list-item-gap-large: var(--wb-space-150); } @layer ui.component { .large { composes: ax-public-p9 from global; - padding: var(--ax-public-list-item-padding-large); - gap: var(--ax-public-list-item-gap-large); + padding: var(--wb-public-list-item-padding-large); + gap: var(--wb-public-list-item-gap-large); } .medium { composes: ax-public-p10 from global; - padding: var(--ax-public-list-item-padding-medium); - gap: var(--ax-public-list-item-gap-medium); + padding: var(--wb-public-list-item-padding-medium); + gap: var(--wb-public-list-item-gap-medium); } .small { composes: ax-public-p10 from global; - padding: var(--ax-public-list-item-padding-small); - gap: var(--ax-public-list-item-gap-small); + padding: var(--wb-public-list-item-padding-small); + gap: var(--wb-public-list-item-gap-small); } } diff --git a/packages/ui/src/shared/styles/list-item.module.css b/packages/ui/src/shared/styles/list-item.module.css index fca7c2075..60fc59e4d 100644 --- a/packages/ui/src/shared/styles/list-item.module.css +++ b/packages/ui/src/shared/styles/list-item.module.css @@ -1,24 +1,24 @@ :root { - --ax-public-list-item-background-color: var(--wb-ui-bg-fill-hover); - --ax-public-list-item-background-color-selected: var(--wb-colors-acc1-600); - --ax-public-list-item-color-selected: var(--wb-ui-text-onaccent-default); - --ax-public-list-item-color: var(--wb-ui-text-default); + --wb-public-list-item-background-color: var(--wb-ui-bg-fill-hover); + --wb-public-list-item-background-color-selected: var(--wb-colors-acc1-600); + --wb-public-list-item-color-selected: var(--wb-ui-text-onaccent-default); + --wb-public-list-item-color: var(--wb-ui-text-default); - --ax-public-list-item-background-color-focus: var(--wb-ui-bg-fill-hover); - --ax-public-list-item-outline-color-focus: var(--wb-shadow-ui-focus); - --ax-public-list-item-outline-size: var(--wb-shadow-ui-focus-element-spread); + --wb-public-list-item-background-color-focus: var(--wb-ui-bg-fill-hover); + --wb-public-list-item-outline-color-focus: var(--wb-shadow-ui-focus); + --wb-public-list-item-outline-size: var(--wb-shadow-ui-focus-element-spread); - --ax-public-list-item-color-destructive: var(--wb-ui-text-critical-default); - --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-10); - --ax-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-20); - --ax-public-list-border-radius: var(--wb-radius-75); + --wb-public-list-item-color-destructive: var(--wb-ui-text-critical-default); + --wb-public-list-item-background-color-destructive: var(--wb-colors-red-400-10); + --wb-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-20); + --wb-public-list-border-radius: var(--wb-radius-75); } @layer ui.base { html[data-theme='dark'] { - --ax-public-list-item-background-color-selected: var(--wb-colors-acc1-500); - --ax-public-list-item-background-color-destructive: var(--wb-colors-red-400-30); - --ax-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-50); + --wb-public-list-item-background-color-selected: var(--wb-colors-acc1-500); + --wb-public-list-item-background-color-destructive: var(--wb-colors-red-400-30); + --wb-public-list-item-background-color-hover-destructive: var(--wb-colors-red-400-50); } } @@ -26,48 +26,48 @@ .list-item { display: flex; align-items: center; - border-radius: var(--ax-public-list-border-radius); + border-radius: var(--wb-public-list-border-radius); width: max-content; min-width: 100%; cursor: pointer; - color: var(--ax-public-list-item-color); + color: var(--wb-public-list-item-color); /* State selectors below weigh the same, so order decides - a `:not()` here would silently outrank the states under it. */ &:hover { - background-color: var(--ax-public-list-item-background-color); + background-color: var(--wb-public-list-item-background-color); } &:focus-visible, &[data-highlighted] { outline: none; box-shadow: var(--wb-shadow-ui-focus-element-x) var(--wb-shadow-ui-focus-element-y) - var(--wb-shadow-ui-focus-element-blur) var(--ax-public-list-item-outline-size) - var(--ax-public-list-item-outline-color-focus); - background-color: var(--ax-public-list-item-background-color-focus); + var(--wb-shadow-ui-focus-element-blur) var(--wb-public-list-item-outline-size) + var(--wb-public-list-item-outline-color-focus); + background-color: var(--wb-public-list-item-background-color-focus); } /* After the highlight rule: a selected item keeps its selected colors while highlighted — the outline alone marks the keyboard cursor. */ &[data-selected] { - background-color: var(--ax-public-list-item-background-color-selected); - color: var(--ax-public-list-item-color-selected); + background-color: var(--wb-public-list-item-background-color-selected); + color: var(--wb-public-list-item-color-selected); } &[data-disabled] { - color: var(--ax-public-input-color-disabled); + color: var(--wb-public-input-color-disabled); background-color: transparent; cursor: auto; } &.destructive { - color: var(--ax-public-list-item-color-destructive); - background-color: var(--ax-public-list-item-background-color-destructive); + color: var(--wb-public-list-item-color-destructive); + background-color: var(--wb-public-list-item-background-color-destructive); &:hover, &:focus-visible, &[data-highlighted] { - background-color: var(--ax-public-list-item-background-color-hover-destructive); + background-color: var(--wb-public-list-item-background-color-hover-destructive); } } diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css index 45d105cc3..d45580e4d 100644 --- a/packages/ui/src/styles/globals.css +++ b/packages/ui/src/styles/globals.css @@ -2,6 +2,6 @@ into dist/styles.css, bypassing the PostCSS pipeline. */ @layer ui.base { :root { - --ax-public-transition: 0.1s ease-in; + --wb-public-transition: 0.1s ease-in; } }