diff --git a/packages/dify-ui/.storybook/storybook.css b/packages/dify-ui/.storybook/storybook.css index e9796fd046..ca76cd2968 100644 --- a/packages/dify-ui/.storybook/storybook.css +++ b/packages/dify-ui/.storybook/storybook.css @@ -1,6 +1,9 @@ @import 'tailwindcss'; -@config '../tailwind.config.ts'; +@plugin '../src/plugins/icons.ts'; + +@source '../src'; +@source '../.storybook'; @import '../src/styles/styles.css'; diff --git a/packages/dify-ui/AGENTS.md b/packages/dify-ui/AGENTS.md index 4a7fe2f22a..d8a59b7a0b 100644 --- a/packages/dify-ui/AGENTS.md +++ b/packages/dify-ui/AGENTS.md @@ -1,6 +1,6 @@ # @langgenius/dify-ui -Shared design tokens, the `cn()` utility, a Tailwind CSS preset, and headless primitive components consumed by `web/`. +Shared design tokens, the `cn()` utility, CSS-first Tailwind styles, and headless primitive components consumed by `web/`. ## Component Authoring Rules @@ -51,7 +51,7 @@ The Figma design system uses `--radius/*` tokens whose scale is **offset by one ### Rules -- **Do not** add custom `borderRadius` values to `tailwind-preset.ts`. We use Tailwind v4 defaults and arbitrary values (`rounded-[Npx]`) for sizes without a standard equivalent. +- **Do not** add custom `borderRadius` theme values. We use Tailwind v4 defaults and arbitrary values (`rounded-[Npx]`) for sizes without a standard equivalent. - **Do not** use `radius-*` as CSS class names. The old `@utility radius-*` definitions have been removed. - When the Figma MCP returns `rounded-[var(--radius/sm, 6px)]`, convert it to the standard Tailwind class from the table above (e.g. `rounded-md`). - For values without a standard Tailwind equivalent (10px, 20px, 28px), use arbitrary values like `rounded-[10px]`. diff --git a/packages/dify-ui/README.md b/packages/dify-ui/README.md index cd9485c400..de6592af2c 100644 --- a/packages/dify-ui/README.md +++ b/packages/dify-ui/README.md @@ -1,6 +1,6 @@ # @langgenius/dify-ui -Shared UI primitives, design tokens, Tailwind preset, and the `cn()` utility consumed by Dify's `web/` app. +Shared UI primitives, design tokens, CSS-first Tailwind styles, and the `cn()` utility consumed by Dify's `web/` app. The primitives are thin, opinionated wrappers around [Base UI] headless components, styled with `cva` + `cn` and Dify design tokens. @@ -46,9 +46,23 @@ Importing from `@langgenius/dify-ui` (no subpath) is intentionally not supported Utilities: - `./cn` — `clsx` + `tailwind-merge` wrapper. Use this for conditional class composition. -- `./tailwind-preset` — Tailwind v4 preset with Dify tokens. Apps extend it from their own `tailwind.config.ts`. - `./styles.css` — the one CSS entry that ships the design tokens, theme variables, and base reset. Import it once from the app root. +## Tailwind CSS v4 integration + +This package uses Tailwind CSS v4's CSS-first configuration model. Consumers should import Tailwind from their own root stylesheet, then import this package's CSS entry: + +```css +@import 'tailwindcss'; +@import '@langgenius/dify-ui/styles.css'; +``` + +If a consumer uses Dify UI source files through the workspace, add an explicit source so Tailwind can detect utility classes: + +```css +@source '../packages/dify-ui/src'; +``` + ## Overlay & portal contract All overlay primitives (`dialog`, `alert-dialog`, `popover`, `dropdown-menu`, `context-menu`, `select`, `tooltip`, `toast`) render their content inside a [Base UI Portal] attached to `document.body`. This is the Base UI default — see the upstream [Portals][Base UI Portal] docs for the underlying behavior. Consumers **do not** need to wrap anything in a portal manually. diff --git a/packages/dify-ui/package.json b/packages/dify-ui/package.json index 483db46986..73c6c0bd22 100644 --- a/packages/dify-ui/package.json +++ b/packages/dify-ui/package.json @@ -5,10 +5,6 @@ "private": true, "exports": { "./styles.css": "./src/styles/styles.css", - "./tailwind-preset": { - "types": "./src/tailwind-preset.ts", - "import": "./src/tailwind-preset.ts" - }, "./cn": { "types": "./src/cn.ts", "import": "./src/cn.ts" diff --git a/packages/dify-ui/src/plugins/icons.ts b/packages/dify-ui/src/plugins/icons.ts new file mode 100644 index 0000000000..e2d678c78f --- /dev/null +++ b/packages/dify-ui/src/plugins/icons.ts @@ -0,0 +1,10 @@ +import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons' + +export default iconsPlugin({ + collections: getIconCollections(['ri']), + extraProperties: { + width: '1rem', + height: '1rem', + display: 'block', + }, +}) diff --git a/packages/dify-ui/src/styles/styles.css b/packages/dify-ui/src/styles/styles.css index fb410b2d5f..e2403d308a 100644 --- a/packages/dify-ui/src/styles/styles.css +++ b/packages/dify-ui/src/styles/styles.css @@ -1,4 +1,90 @@ +/* + * @langgenius/dify-ui — Tailwind CSS v4 preset (CSS-first). + * + * This is the single CSS entry point for consumers: + * @import '@langgenius/dify-ui/styles.css'; + * + * Consumers must also `@import 'tailwindcss';` (or selected layers) in their + * own root stylesheet so that the engine generates utilities. This file only + * contributes design tokens, runtime CSS variables, and project utilities. + */ + +/* ---------- Palette overrides ----------------------------------------- */ +/* Override Tailwind v4's oklch defaults with the Dify brand palette so that + * `bg-gray-500`, `text-primary-600`, etc. resolve to the design system. */ +@theme { + /* gray */ + --color-gray-25: #fcfcfd; + --color-gray-50: #f9fafb; + --color-gray-100: #f2f4f7; + --color-gray-200: #eaecf0; + --color-gray-300: #d0d5dd; + --color-gray-400: #98a2b3; + --color-gray-500: #667085; + --color-gray-600: #344054; + --color-gray-700: #475467; + --color-gray-800: #1d2939; + --color-gray-900: #101828; + + /* primary */ + --color-primary-25: #f5f8ff; + --color-primary-50: #eff4ff; + --color-primary-100: #d1e0ff; + --color-primary-200: #b2ccff; + --color-primary-300: #84adff; + --color-primary-400: #528bff; + --color-primary-500: #2970ff; + --color-primary-600: #155eef; + --color-primary-700: #004eeb; + --color-primary-800: #0040c1; + --color-primary-900: #00359e; + + /* blue / green / yellow / purple — narrow overrides used by legacy markup */ + --color-blue-500: #e1effe; + --color-green-50: #f3faf7; + --color-green-100: #def7ec; + --color-green-800: #03543f; + --color-yellow-100: #fdf6b2; + --color-yellow-800: #723b13; + --color-purple-50: #f6f5ff; + --color-purple-200: #dcd7fe; + + /* indigo */ + --color-indigo-25: #f5f8ff; + --color-indigo-50: #eef4ff; + --color-indigo-100: #e0eaff; + --color-indigo-300: #a4bcfd; + --color-indigo-400: #8098f9; + --color-indigo-600: #444ce7; + --color-indigo-800: #2d31a6; + + /* shadows */ + --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10); + --shadow-sm-no-bottom: 0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10); + --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10); + --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08); + --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08); + --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); + --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); + --shadow-status-indicator-green-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-success-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-warning-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-warning-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-red-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-blue-shadow: 0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + --shadow-status-indicator-gray-shadow: 0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer); + + /* font sizes */ + --text-2xs: 0.625rem; +} + +/* ---------- Semantic design tokens (`@theme inline`) ------------------ */ +@import '../themes/theme.css'; + +/* ---------- Runtime variable values ----------------------------------- */ +/* Real values for the semantic tokens above, scoped per `html[data-theme]`. */ @import '../themes/light.css' layer(base); @import '../themes/dark.css' layer(base); + +/* ---------- Project utilities & components ---------------------------- */ @import './utilities.css'; @import './components.css'; diff --git a/packages/dify-ui/src/tailwind-preset.ts b/packages/dify-ui/src/tailwind-preset.ts deleted file mode 100644 index 2dbf4781b0..0000000000 --- a/packages/dify-ui/src/tailwind-preset.ts +++ /dev/null @@ -1,87 +0,0 @@ -import tailwindThemeVarDefine from './themes/tailwind-theme-var-define' - -const difyUIPreset = { - theme: { - extend: { - colors: { - gray: { - 25: '#fcfcfd', - 50: '#f9fafb', - 100: '#f2f4f7', - 200: '#eaecf0', - 300: '#d0d5dd', - 400: '#98a2b3', - 500: '#667085', - 600: '#344054', - 700: '#475467', - 800: '#1d2939', - 900: '#101828', - }, - primary: { - 25: '#f5f8ff', - 50: '#eff4ff', - 100: '#d1e0ff', - 200: '#b2ccff', - 300: '#84adff', - 400: '#528bff', - 500: '#2970ff', - 600: '#155eef', - 700: '#004eeb', - 800: '#0040c1', - 900: '#00359e', - }, - blue: { - 500: '#E1EFFE', - }, - green: { - 50: '#F3FAF7', - 100: '#DEF7EC', - 800: '#03543F', - }, - yellow: { - 100: '#FDF6B2', - 800: '#723B13', - }, - purple: { - 50: '#F6F5FF', - 200: '#DCD7FE', - }, - indigo: { - 25: '#F5F8FF', - 50: '#EEF4FF', - 100: '#E0EAFF', - 300: '#A4BCFD', - 400: '#8098F9', - 600: '#444CE7', - 800: '#2D31A6', - }, - ...tailwindThemeVarDefine, - }, - boxShadow: { - 'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)', - 'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)', - 'sm-no-bottom': '0px -1px 2px 0px rgba(16, 24, 40, 0.06), 0px -1px 3px 0px rgba(16, 24, 40, 0.10)', - 'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)', - 'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)', - 'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)', - '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)', - '3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)', - 'status-indicator-green-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-success-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-warning-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-warning-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-red-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-blue-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - 'status-indicator-gray-shadow': '0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)', - }, - opacity: { - 2: '0.02', - 8: '0.08', - }, - fontSize: { - '2xs': '0.625rem', - }, - }, - }, - plugins: [], -} - -export default difyUIPreset diff --git a/packages/dify-ui/src/themes/tailwind-theme-var-define.ts b/packages/dify-ui/src/themes/tailwind-theme-var-define.ts deleted file mode 100644 index 2ea617284f..0000000000 --- a/packages/dify-ui/src/themes/tailwind-theme-var-define.ts +++ /dev/null @@ -1,816 +0,0 @@ -/* Attention: Generate by code. Don't update by hand!!! */ -const vars = { - 'components-input-bg-normal': 'var(--color-components-input-bg-normal)', - 'components-input-text-placeholder': 'var(--color-components-input-text-placeholder)', - 'components-input-bg-hover': 'var(--color-components-input-bg-hover)', - 'components-input-bg-active': 'var(--color-components-input-bg-active)', - 'components-input-border-active': 'var(--color-components-input-border-active)', - 'components-input-border-destructive': 'var(--color-components-input-border-destructive)', - 'components-input-text-filled': 'var(--color-components-input-text-filled)', - 'components-input-bg-destructive': 'var(--color-components-input-bg-destructive)', - 'components-input-bg-disabled': 'var(--color-components-input-bg-disabled)', - 'components-input-text-disabled': 'var(--color-components-input-text-disabled)', - 'components-input-text-filled-disabled': 'var(--color-components-input-text-filled-disabled)', - 'components-input-border-hover': 'var(--color-components-input-border-hover)', - 'components-input-border-active-prompt-1': 'var(--color-components-input-border-active-prompt-1)', - 'components-input-border-active-prompt-2': 'var(--color-components-input-border-active-prompt-2)', - - 'components-kbd-bg-gray': 'var(--color-components-kbd-bg-gray)', - 'components-kbd-bg-white': 'var(--color-components-kbd-bg-white)', - - 'components-tooltip-bg': 'var(--color-components-tooltip-bg)', - - 'components-button-primary-text': 'var(--color-components-button-primary-text)', - 'components-button-primary-bg': 'var(--color-components-button-primary-bg)', - 'components-button-primary-border': 'var(--color-components-button-primary-border)', - 'components-button-primary-bg-hover': 'var(--color-components-button-primary-bg-hover)', - 'components-button-primary-border-hover': 'var(--color-components-button-primary-border-hover)', - 'components-button-primary-bg-disabled': 'var(--color-components-button-primary-bg-disabled)', - 'components-button-primary-border-disabled': 'var(--color-components-button-primary-border-disabled)', - 'components-button-primary-text-disabled': 'var(--color-components-button-primary-text-disabled)', - - 'components-button-secondary-text': 'var(--color-components-button-secondary-text)', - 'components-button-secondary-text-disabled': 'var(--color-components-button-secondary-text-disabled)', - 'components-button-secondary-bg': 'var(--color-components-button-secondary-bg)', - 'components-button-secondary-bg-hover': 'var(--color-components-button-secondary-bg-hover)', - 'components-button-secondary-bg-disabled': 'var(--color-components-button-secondary-bg-disabled)', - 'components-button-secondary-border': 'var(--color-components-button-secondary-border)', - 'components-button-secondary-border-hover': 'var(--color-components-button-secondary-border-hover)', - 'components-button-secondary-border-disabled': 'var(--color-components-button-secondary-border-disabled)', - - 'components-button-tertiary-text': 'var(--color-components-button-tertiary-text)', - 'components-button-tertiary-text-disabled': 'var(--color-components-button-tertiary-text-disabled)', - 'components-button-tertiary-bg': 'var(--color-components-button-tertiary-bg)', - 'components-button-tertiary-bg-hover': 'var(--color-components-button-tertiary-bg-hover)', - 'components-button-tertiary-bg-disabled': 'var(--color-components-button-tertiary-bg-disabled)', - - 'components-button-ghost-text': 'var(--color-components-button-ghost-text)', - 'components-button-ghost-text-disabled': 'var(--color-components-button-ghost-text-disabled)', - 'components-button-ghost-bg-hover': 'var(--color-components-button-ghost-bg-hover)', - - 'components-button-destructive-primary-text': 'var(--color-components-button-destructive-primary-text)', - 'components-button-destructive-primary-text-disabled': 'var(--color-components-button-destructive-primary-text-disabled)', - 'components-button-destructive-primary-bg': 'var(--color-components-button-destructive-primary-bg)', - 'components-button-destructive-primary-bg-hover': 'var(--color-components-button-destructive-primary-bg-hover)', - 'components-button-destructive-primary-bg-disabled': 'var(--color-components-button-destructive-primary-bg-disabled)', - 'components-button-destructive-primary-border': 'var(--color-components-button-destructive-primary-border)', - 'components-button-destructive-primary-border-hover': 'var(--color-components-button-destructive-primary-border-hover)', - 'components-button-destructive-primary-border-disabled': 'var(--color-components-button-destructive-primary-border-disabled)', - - 'components-button-destructive-secondary-text': 'var(--color-components-button-destructive-secondary-text)', - 'components-button-destructive-secondary-text-disabled': 'var(--color-components-button-destructive-secondary-text-disabled)', - 'components-button-destructive-secondary-bg': 'var(--color-components-button-destructive-secondary-bg)', - 'components-button-destructive-secondary-bg-hover': 'var(--color-components-button-destructive-secondary-bg-hover)', - 'components-button-destructive-secondary-bg-disabled': 'var(--color-components-button-destructive-secondary-bg-disabled)', - 'components-button-destructive-secondary-border': 'var(--color-components-button-destructive-secondary-border)', - 'components-button-destructive-secondary-border-hover': 'var(--color-components-button-destructive-secondary-border-hover)', - 'components-button-destructive-secondary-border-disabled': 'var(--color-components-button-destructive-secondary-border-disabled)', - - 'components-button-destructive-tertiary-text': 'var(--color-components-button-destructive-tertiary-text)', - 'components-button-destructive-tertiary-text-disabled': 'var(--color-components-button-destructive-tertiary-text-disabled)', - 'components-button-destructive-tertiary-bg': 'var(--color-components-button-destructive-tertiary-bg)', - 'components-button-destructive-tertiary-bg-hover': 'var(--color-components-button-destructive-tertiary-bg-hover)', - 'components-button-destructive-tertiary-bg-disabled': 'var(--color-components-button-destructive-tertiary-bg-disabled)', - - 'components-button-destructive-ghost-text': 'var(--color-components-button-destructive-ghost-text)', - 'components-button-destructive-ghost-text-disabled': 'var(--color-components-button-destructive-ghost-text-disabled)', - 'components-button-destructive-ghost-bg-hover': 'var(--color-components-button-destructive-ghost-bg-hover)', - - 'components-button-secondary-accent-text': 'var(--color-components-button-secondary-accent-text)', - 'components-button-secondary-accent-text-disabled': 'var(--color-components-button-secondary-accent-text-disabled)', - 'components-button-secondary-accent-bg': 'var(--color-components-button-secondary-accent-bg)', - 'components-button-secondary-accent-bg-hover': 'var(--color-components-button-secondary-accent-bg-hover)', - 'components-button-secondary-accent-bg-disabled': 'var(--color-components-button-secondary-accent-bg-disabled)', - 'components-button-secondary-accent-border': 'var(--color-components-button-secondary-accent-border)', - 'components-button-secondary-accent-border-hover': 'var(--color-components-button-secondary-accent-border-hover)', - 'components-button-secondary-accent-border-disabled': 'var(--color-components-button-secondary-accent-border-disabled)', - - 'components-button-indigo-bg': 'var(--color-components-button-indigo-bg)', - 'components-button-indigo-bg-hover': 'var(--color-components-button-indigo-bg-hover)', - 'components-button-indigo-bg-disabled': 'var(--color-components-button-indigo-bg-disabled)', - - 'components-button-debug-text': 'var(--color-components-button-debug-text)', - 'components-button-debug-text-disabled': 'var(--color-components-button-debug-text-disabled)', - 'components-button-debug-bg': 'var(--color-components-button-debug-bg)', - 'components-button-debug-bg-hover': 'var(--color-components-button-debug-bg-hover)', - 'components-button-debug-bg-disabled': 'var(--color-components-button-debug-bg-disabled)', - 'components-button-debug-border': 'var(--color-components-button-debug-border)', - 'components-button-debug-border-hover': 'var(--color-components-button-debug-border-hover)', - 'components-button-debug-border-disabled': 'var(--color-components-button-debug-border-disabled)', - - 'components-button-button-seam': 'var(--color-components-button-button-seam)', - - 'components-checkbox-icon': 'var(--color-components-checkbox-icon)', - 'components-checkbox-icon-disabled': 'var(--color-components-checkbox-icon-disabled)', - 'components-checkbox-bg': 'var(--color-components-checkbox-bg)', - 'components-checkbox-bg-hover': 'var(--color-components-checkbox-bg-hover)', - 'components-checkbox-bg-disabled': 'var(--color-components-checkbox-bg-disabled)', - 'components-checkbox-border': 'var(--color-components-checkbox-border)', - 'components-checkbox-border-hover': 'var(--color-components-checkbox-border-hover)', - 'components-checkbox-border-disabled': 'var(--color-components-checkbox-border-disabled)', - 'components-checkbox-bg-unchecked': 'var(--color-components-checkbox-bg-unchecked)', - 'components-checkbox-bg-unchecked-hover': 'var(--color-components-checkbox-bg-unchecked-hover)', - 'components-checkbox-bg-disabled-checked': 'var(--color-components-checkbox-bg-disabled-checked)', - - 'components-radio-border-checked': 'var(--color-components-radio-border-checked)', - 'components-radio-border-checked-hover': 'var(--color-components-radio-border-checked-hover)', - 'components-radio-border-checked-disabled': 'var(--color-components-radio-border-checked-disabled)', - 'components-radio-bg-disabled': 'var(--color-components-radio-bg-disabled)', - 'components-radio-border': 'var(--color-components-radio-border)', - 'components-radio-border-hover': 'var(--color-components-radio-border-hover)', - 'components-radio-border-disabled': 'var(--color-components-radio-border-disabled)', - 'components-radio-bg': 'var(--color-components-radio-bg)', - 'components-radio-bg-hover': 'var(--color-components-radio-bg-hover)', - - 'components-toggle-knob': 'var(--color-components-toggle-knob)', - 'components-toggle-knob-disabled': 'var(--color-components-toggle-knob-disabled)', - 'components-toggle-bg': 'var(--color-components-toggle-bg)', - 'components-toggle-bg-hover': 'var(--color-components-toggle-bg-hover)', - 'components-toggle-bg-disabled': 'var(--color-components-toggle-bg-disabled)', - 'components-toggle-bg-unchecked': 'var(--color-components-toggle-bg-unchecked)', - 'components-toggle-bg-unchecked-hover': 'var(--color-components-toggle-bg-unchecked-hover)', - 'components-toggle-bg-unchecked-disabled': 'var(--color-components-toggle-bg-unchecked-disabled)', - 'components-toggle-knob-hover': 'var(--color-components-toggle-knob-hover)', - - 'components-card-bg': 'var(--color-components-card-bg)', - 'components-card-border': 'var(--color-components-card-border)', - 'components-card-bg-alt': 'var(--color-components-card-bg-alt)', - 'components-card-bg-transparent': 'var(--color-components-card-bg-transparent)', - 'components-card-bg-alt-transparent': 'var(--color-components-card-bg-alt-transparent)', - - 'components-menu-item-text': 'var(--color-components-menu-item-text)', - 'components-menu-item-text-active': 'var(--color-components-menu-item-text-active)', - 'components-menu-item-text-hover': 'var(--color-components-menu-item-text-hover)', - 'components-menu-item-text-active-accent': 'var(--color-components-menu-item-text-active-accent)', - 'components-menu-item-bg-active': 'var(--color-components-menu-item-bg-active)', - 'components-menu-item-bg-hover': 'var(--color-components-menu-item-bg-hover)', - - 'components-panel-bg': 'var(--color-components-panel-bg)', - 'components-panel-bg-blur': 'var(--color-components-panel-bg-blur)', - 'components-panel-border': 'var(--color-components-panel-border)', - 'components-panel-border-subtle': 'var(--color-components-panel-border-subtle)', - 'components-panel-gradient-2': 'var(--color-components-panel-gradient-2)', - 'components-panel-gradient-1': 'var(--color-components-panel-gradient-1)', - 'components-panel-bg-alt': 'var(--color-components-panel-bg-alt)', - 'components-panel-on-panel-item-bg': 'var(--color-components-panel-on-panel-item-bg)', - 'components-panel-on-panel-item-bg-hover': 'var(--color-components-panel-on-panel-item-bg-hover)', - 'components-panel-on-panel-item-bg-alt': 'var(--color-components-panel-on-panel-item-bg-alt)', - 'components-panel-on-panel-item-bg-transparent': 'var(--color-components-panel-on-panel-item-bg-transparent)', - 'components-panel-on-panel-item-bg-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-hover-transparent)', - 'components-panel-on-panel-item-bg-destructive-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent)', - - 'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)', - 'components-panel-bg-blur-burn': 'var(--color-components-panel-bg-blur-burn)', - - 'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)', - 'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)', - 'components-main-nav-nav-button-bg': 'var(--color-components-main-nav-nav-button-bg)', - 'components-main-nav-nav-button-bg-active': 'var(--color-components-main-nav-nav-button-bg-active)', - 'components-main-nav-nav-button-border': 'var(--color-components-main-nav-nav-button-border)', - 'components-main-nav-nav-button-bg-hover': 'var(--color-components-main-nav-nav-button-bg-hover)', - - 'components-main-nav-nav-user-border': 'var(--color-components-main-nav-nav-user-border)', - - 'components-main-nav-text': 'var(--color-components-main-nav-text)', - 'components-main-nav-text-active': 'var(--color-components-main-nav-text-active)', - 'components-main-nav-glass-edge-highlight-first': 'var(--color-components-main-nav-glass-edge-highlight-first)', - 'components-main-nav-glass-edge-highlight-middle': 'var(--color-components-main-nav-glass-edge-highlight-middle)', - 'components-main-nav-glass-edge-highlight-end': 'var(--color-components-main-nav-glass-edge-highlight-end)', - - 'components-main-nav-glass-edge-reflection-first': 'var(--color-components-main-nav-glass-edge-reflection-first)', - 'components-main-nav-glass-edge-reflection-middle': 'var(--color-components-main-nav-glass-edge-reflection-middle)', - 'components-main-nav-glass-edge-reflection-end': 'var(--color-components-main-nav-glass-edge-reflection-end)', - - 'components-main-nav-glass-surface-first': 'var(--color-components-main-nav-glass-surface-first)', - 'components-main-nav-glass-surface-middle-1': 'var(--color-components-main-nav-glass-surface-middle-1)', - 'components-main-nav-glass-surface-middle-2': 'var(--color-components-main-nav-glass-surface-middle-2)', - 'components-main-nav-glass-surface-end': 'var(--color-components-main-nav-glass-surface-end)', - - 'components-main-nav-glass-inner-glow': 'var(--color-components-main-nav-glass-inner-glow)', - 'components-main-nav-glass-shadow-reflection': 'var(--color-components-main-nav-glass-shadow-reflection)', - 'components-main-nav-glass-shadow-reflection-glow': 'var(--color-components-main-nav-glass-shadow-reflection-glow)', - 'components-main-nav-glass-text-glow': 'var(--color-components-main-nav-glass-text-glow)', - - 'components-slider-knob': 'var(--color-components-slider-knob)', - 'components-slider-knob-hover': 'var(--color-components-slider-knob-hover)', - 'components-slider-knob-disabled': 'var(--color-components-slider-knob-disabled)', - 'components-slider-range': 'var(--color-components-slider-range)', - 'components-slider-track': 'var(--color-components-slider-track)', - 'components-slider-knob-border-hover': 'var(--color-components-slider-knob-border-hover)', - 'components-slider-knob-border': 'var(--color-components-slider-knob-border)', - - 'components-segmented-control-item-active-bg': 'var(--color-components-segmented-control-item-active-bg)', - 'components-segmented-control-item-active-border': 'var(--color-components-segmented-control-item-active-border)', - 'components-segmented-control-bg-normal': 'var(--color-components-segmented-control-bg-normal)', - 'components-segmented-control-item-active-accent-bg': 'var(--color-components-segmented-control-item-active-accent-bg)', - 'components-segmented-control-item-active-accent-border': 'var(--color-components-segmented-control-item-active-accent-border)', - - 'components-option-card-option-bg': 'var(--color-components-option-card-option-bg)', - 'components-option-card-option-selected-bg': 'var(--color-components-option-card-option-selected-bg)', - 'components-option-card-option-selected-border': 'var(--color-components-option-card-option-selected-border)', - 'components-option-card-option-border': 'var(--color-components-option-card-option-border)', - 'components-option-card-option-bg-hover': 'var(--color-components-option-card-option-bg-hover)', - 'components-option-card-option-border-hover': 'var(--color-components-option-card-option-border-hover)', - - 'components-tab-active': 'var(--color-components-tab-active)', - - 'components-badge-white-to-dark': 'var(--color-components-badge-white-to-dark)', - 'components-badge-status-light-success-bg': 'var(--color-components-badge-status-light-success-bg)', - 'components-badge-status-light-success-border-inner': 'var(--color-components-badge-status-light-success-border-inner)', - 'components-badge-status-light-success-halo': 'var(--color-components-badge-status-light-success-halo)', - - 'components-badge-status-light-border-outer': 'var(--color-components-badge-status-light-border-outer)', - 'components-badge-status-light-high-light': 'var(--color-components-badge-status-light-high-light)', - 'components-badge-status-light-warning-bg': 'var(--color-components-badge-status-light-warning-bg)', - 'components-badge-status-light-warning-border-inner': 'var(--color-components-badge-status-light-warning-border-inner)', - 'components-badge-status-light-warning-halo': 'var(--color-components-badge-status-light-warning-halo)', - - 'components-badge-status-light-error-bg': 'var(--color-components-badge-status-light-error-bg)', - 'components-badge-status-light-error-border-inner': 'var(--color-components-badge-status-light-error-border-inner)', - 'components-badge-status-light-error-halo': 'var(--color-components-badge-status-light-error-halo)', - - 'components-badge-status-light-normal-bg': 'var(--color-components-badge-status-light-normal-bg)', - 'components-badge-status-light-normal-border-inner': 'var(--color-components-badge-status-light-normal-border-inner)', - 'components-badge-status-light-normal-halo': 'var(--color-components-badge-status-light-normal-halo)', - - 'components-badge-status-light-disabled-bg': 'var(--color-components-badge-status-light-disabled-bg)', - 'components-badge-status-light-disabled-border-inner': 'var(--color-components-badge-status-light-disabled-border-inner)', - 'components-badge-status-light-disabled-halo': 'var(--color-components-badge-status-light-disabled-halo)', - - 'components-badge-bg-green-soft': 'var(--color-components-badge-bg-green-soft)', - 'components-badge-bg-orange-soft': 'var(--color-components-badge-bg-orange-soft)', - 'components-badge-bg-red-soft': 'var(--color-components-badge-bg-red-soft)', - 'components-badge-bg-blue-light-soft': 'var(--color-components-badge-bg-blue-light-soft)', - 'components-badge-bg-gray-soft': 'var(--color-components-badge-bg-gray-soft)', - 'components-badge-bg-dimm': 'var(--color-components-badge-bg-dimm)', - - 'components-chart-line': 'var(--color-components-chart-line)', - 'components-chart-area-1': 'var(--color-components-chart-area-1)', - 'components-chart-area-2': 'var(--color-components-chart-area-2)', - 'components-chart-current-1': 'var(--color-components-chart-current-1)', - 'components-chart-current-2': 'var(--color-components-chart-current-2)', - 'components-chart-bg': 'var(--color-components-chart-bg)', - - 'components-actionbar-bg': 'var(--color-components-actionbar-bg)', - 'components-actionbar-border': 'var(--color-components-actionbar-border)', - 'components-actionbar-bg-accent': 'var(--color-components-actionbar-bg-accent)', - 'components-actionbar-border-accent': 'var(--color-components-actionbar-border-accent)', - - 'components-dropzone-bg-alt': 'var(--color-components-dropzone-bg-alt)', - 'components-dropzone-bg': 'var(--color-components-dropzone-bg)', - 'components-dropzone-bg-accent': 'var(--color-components-dropzone-bg-accent)', - 'components-dropzone-border': 'var(--color-components-dropzone-border)', - 'components-dropzone-border-alt': 'var(--color-components-dropzone-border-alt)', - 'components-dropzone-border-accent': 'var(--color-components-dropzone-border-accent)', - - 'components-progress-brand-progress': 'var(--color-components-progress-brand-progress)', - 'components-progress-brand-border': 'var(--color-components-progress-brand-border)', - 'components-progress-brand-bg': 'var(--color-components-progress-brand-bg)', - - 'components-progress-white-progress': 'var(--color-components-progress-white-progress)', - 'components-progress-white-border': 'var(--color-components-progress-white-border)', - 'components-progress-white-bg': 'var(--color-components-progress-white-bg)', - - 'components-progress-gray-progress': 'var(--color-components-progress-gray-progress)', - 'components-progress-gray-border': 'var(--color-components-progress-gray-border)', - 'components-progress-gray-bg': 'var(--color-components-progress-gray-bg)', - - 'components-progress-warning-progress': 'var(--color-components-progress-warning-progress)', - 'components-progress-warning-border': 'var(--color-components-progress-warning-border)', - 'components-progress-warning-bg': 'var(--color-components-progress-warning-bg)', - - 'components-progress-error-progress': 'var(--color-components-progress-error-progress)', - 'components-progress-error-border': 'var(--color-components-progress-error-border)', - 'components-progress-error-bg': 'var(--color-components-progress-error-bg)', - - 'components-chat-input-audio-bg': 'var(--color-components-chat-input-audio-bg)', - 'components-chat-input-audio-wave-default': 'var(--color-components-chat-input-audio-wave-default)', - 'components-chat-input-bg-mask-1': 'var(--color-components-chat-input-bg-mask-1)', - 'components-chat-input-bg-mask-2': 'var(--color-components-chat-input-bg-mask-2)', - 'components-chat-input-border': 'var(--color-components-chat-input-border)', - 'components-chat-input-audio-wave-active': 'var(--color-components-chat-input-audio-wave-active)', - 'components-chat-input-audio-bg-alt': 'var(--color-components-chat-input-audio-bg-alt)', - - 'components-avatar-shape-fill-stop-0': 'var(--color-components-avatar-shape-fill-stop-0)', - 'components-avatar-shape-fill-stop-100': 'var(--color-components-avatar-shape-fill-stop-100)', - - 'components-avatar-bg-mask-stop-0': 'var(--color-components-avatar-bg-mask-stop-0)', - 'components-avatar-bg-mask-stop-100': 'var(--color-components-avatar-bg-mask-stop-100)', - - 'components-avatar-default-avatar-bg': 'var(--color-components-avatar-default-avatar-bg)', - 'components-avatar-mask-darkmode-dimmed': 'var(--color-components-avatar-mask-darkmode-dimmed)', - - 'components-label-gray': 'var(--color-components-label-gray)', - - 'components-premium-badge-blue-bg-stop-0': 'var(--color-components-premium-badge-blue-bg-stop-0)', - 'components-premium-badge-blue-bg-stop-100': 'var(--color-components-premium-badge-blue-bg-stop-100)', - 'components-premium-badge-blue-stroke-stop-0': 'var(--color-components-premium-badge-blue-stroke-stop-0)', - 'components-premium-badge-blue-stroke-stop-100': 'var(--color-components-premium-badge-blue-stroke-stop-100)', - 'components-premium-badge-blue-text-stop-0': 'var(--color-components-premium-badge-blue-text-stop-0)', - 'components-premium-badge-blue-text-stop-100': 'var(--color-components-premium-badge-blue-text-stop-100)', - 'components-premium-badge-blue-glow': 'var(--color-components-premium-badge-blue-glow)', - 'components-premium-badge-blue-bg-stop-0-hover': 'var(--color-components-premium-badge-blue-bg-stop-0-hover)', - 'components-premium-badge-blue-bg-stop-100-hover': 'var(--color-components-premium-badge-blue-bg-stop-100-hover)', - 'components-premium-badge-blue-glow-hover': 'var(--color-components-premium-badge-blue-glow-hover)', - 'components-premium-badge-blue-stroke-stop-0-hover': 'var(--color-components-premium-badge-blue-stroke-stop-0-hover)', - 'components-premium-badge-blue-stroke-stop-100-hover': 'var(--color-components-premium-badge-blue-stroke-stop-100-hover)', - - 'components-premium-badge-highlight-stop-0': 'var(--color-components-premium-badge-highlight-stop-0)', - 'components-premium-badge-highlight-stop-100': 'var(--color-components-premium-badge-highlight-stop-100)', - 'components-premium-badge-indigo-bg-stop-0': 'var(--color-components-premium-badge-indigo-bg-stop-0)', - 'components-premium-badge-indigo-bg-stop-100': 'var(--color-components-premium-badge-indigo-bg-stop-100)', - 'components-premium-badge-indigo-stroke-stop-0': 'var(--color-components-premium-badge-indigo-stroke-stop-0)', - 'components-premium-badge-indigo-stroke-stop-100': 'var(--color-components-premium-badge-indigo-stroke-stop-100)', - 'components-premium-badge-indigo-text-stop-0': 'var(--color-components-premium-badge-indigo-text-stop-0)', - 'components-premium-badge-indigo-text-stop-100': 'var(--color-components-premium-badge-indigo-text-stop-100)', - 'components-premium-badge-indigo-glow': 'var(--color-components-premium-badge-indigo-glow)', - 'components-premium-badge-indigo-glow-hover': 'var(--color-components-premium-badge-indigo-glow-hover)', - 'components-premium-badge-indigo-bg-stop-0-hover': 'var(--color-components-premium-badge-indigo-bg-stop-0-hover)', - 'components-premium-badge-indigo-bg-stop-100-hover': 'var(--color-components-premium-badge-indigo-bg-stop-100-hover)', - 'components-premium-badge-indigo-stroke-stop-0-hover': 'var(--color-components-premium-badge-indigo-stroke-stop-0-hover)', - 'components-premium-badge-indigo-stroke-stop-100-hover': 'var(--color-components-premium-badge-indigo-stroke-stop-100-hover)', - - 'components-premium-badge-grey-bg-stop-0': 'var(--color-components-premium-badge-grey-bg-stop-0)', - 'components-premium-badge-grey-bg-stop-100': 'var(--color-components-premium-badge-grey-bg-stop-100)', - 'components-premium-badge-grey-stroke-stop-0': 'var(--color-components-premium-badge-grey-stroke-stop-0)', - 'components-premium-badge-grey-stroke-stop-100': 'var(--color-components-premium-badge-grey-stroke-stop-100)', - 'components-premium-badge-grey-text-stop-0': 'var(--color-components-premium-badge-grey-text-stop-0)', - 'components-premium-badge-grey-text-stop-100': 'var(--color-components-premium-badge-grey-text-stop-100)', - 'components-premium-badge-grey-glow': 'var(--color-components-premium-badge-grey-glow)', - 'components-premium-badge-grey-glow-hover': 'var(--color-components-premium-badge-grey-glow-hover)', - 'components-premium-badge-grey-bg-stop-0-hover': 'var(--color-components-premium-badge-grey-bg-stop-0-hover)', - 'components-premium-badge-grey-bg-stop-100-hover': 'var(--color-components-premium-badge-grey-bg-stop-100-hover)', - 'components-premium-badge-grey-stroke-stop-0-hover': 'var(--color-components-premium-badge-grey-stroke-stop-0-hover)', - 'components-premium-badge-grey-stroke-stop-100-hover': 'var(--color-components-premium-badge-grey-stroke-stop-100-hover)', - - 'components-premium-badge-orange-bg-stop-0': 'var(--color-components-premium-badge-orange-bg-stop-0)', - 'components-premium-badge-orange-bg-stop-100': 'var(--color-components-premium-badge-orange-bg-stop-100)', - 'components-premium-badge-orange-stroke-stop-0': 'var(--color-components-premium-badge-orange-stroke-stop-0)', - 'components-premium-badge-orange-stroke-stop-100': 'var(--color-components-premium-badge-orange-stroke-stop-100)', - 'components-premium-badge-orange-text-stop-0': 'var(--color-components-premium-badge-orange-text-stop-0)', - 'components-premium-badge-orange-text-stop-100': 'var(--color-components-premium-badge-orange-text-stop-100)', - 'components-premium-badge-orange-glow': 'var(--color-components-premium-badge-orange-glow)', - 'components-premium-badge-orange-glow-hover': 'var(--color-components-premium-badge-orange-glow-hover)', - 'components-premium-badge-orange-bg-stop-0-hover': 'var(--color-components-premium-badge-orange-bg-stop-0-hover)', - 'components-premium-badge-orange-bg-stop-100-hover': 'var(--color-components-premium-badge-orange-bg-stop-100-hover)', - 'components-premium-badge-orange-stroke-stop-0-hover': 'var(--color-components-premium-badge-orange-stroke-stop-0-hover)', - 'components-premium-badge-orange-stroke-stop-100-hover': 'var(--color-components-premium-badge-orange-stroke-stop-100-hover)', - - 'components-progress-bar-bg': 'var(--color-components-progress-bar-bg)', - 'components-progress-bar-progress': 'var(--color-components-progress-bar-progress)', - 'components-progress-bar-border': 'var(--color-components-progress-bar-border)', - 'components-progress-bar-progress-solid': 'var(--color-components-progress-bar-progress-solid)', - 'components-progress-bar-progress-highlight': 'var(--color-components-progress-bar-progress-highlight)', - - 'components-icon-bg-red-solid': 'var(--color-components-icon-bg-red-solid)', - 'components-icon-bg-rose-solid': 'var(--color-components-icon-bg-rose-solid)', - 'components-icon-bg-pink-solid': 'var(--color-components-icon-bg-pink-solid)', - 'components-icon-bg-orange-dark-solid': 'var(--color-components-icon-bg-orange-dark-solid)', - 'components-icon-bg-yellow-solid': 'var(--color-components-icon-bg-yellow-solid)', - 'components-icon-bg-green-solid': 'var(--color-components-icon-bg-green-solid)', - 'components-icon-bg-teal-solid': 'var(--color-components-icon-bg-teal-solid)', - 'components-icon-bg-blue-light-solid': 'var(--color-components-icon-bg-blue-light-solid)', - 'components-icon-bg-blue-solid': 'var(--color-components-icon-bg-blue-solid)', - 'components-icon-bg-indigo-solid': 'var(--color-components-icon-bg-indigo-solid)', - 'components-icon-bg-violet-solid': 'var(--color-components-icon-bg-violet-solid)', - 'components-icon-bg-midnight-solid': 'var(--color-components-icon-bg-midnight-solid)', - 'components-icon-bg-rose-soft': 'var(--color-components-icon-bg-rose-soft)', - 'components-icon-bg-pink-soft': 'var(--color-components-icon-bg-pink-soft)', - 'components-icon-bg-orange-dark-soft': 'var(--color-components-icon-bg-orange-dark-soft)', - 'components-icon-bg-yellow-soft': 'var(--color-components-icon-bg-yellow-soft)', - 'components-icon-bg-green-soft': 'var(--color-components-icon-bg-green-soft)', - 'components-icon-bg-teal-soft': 'var(--color-components-icon-bg-teal-soft)', - 'components-icon-bg-blue-light-soft': 'var(--color-components-icon-bg-blue-light-soft)', - 'components-icon-bg-blue-soft': 'var(--color-components-icon-bg-blue-soft)', - 'components-icon-bg-indigo-soft': 'var(--color-components-icon-bg-indigo-soft)', - 'components-icon-bg-violet-soft': 'var(--color-components-icon-bg-violet-soft)', - 'components-icon-bg-midnight-soft': 'var(--color-components-icon-bg-midnight-soft)', - 'components-icon-bg-red-soft': 'var(--color-components-icon-bg-red-soft)', - 'components-icon-bg-orange-solid': 'var(--color-components-icon-bg-orange-solid)', - 'components-icon-bg-orange-soft': 'var(--color-components-icon-bg-orange-soft)', - - 'components-marketplace-header-bg': 'var(--color-components-marketplace-header-bg)', - - 'text-primary': 'var(--color-text-primary)', - 'text-secondary': 'var(--color-text-secondary)', - 'text-tertiary': 'var(--color-text-tertiary)', - 'text-quaternary': 'var(--color-text-quaternary)', - 'text-destructive': 'var(--color-text-destructive)', - 'text-success': 'var(--color-text-success)', - 'text-warning': 'var(--color-text-warning)', - 'text-destructive-secondary': 'var(--color-text-destructive-secondary)', - 'text-success-secondary': 'var(--color-text-success-secondary)', - 'text-warning-secondary': 'var(--color-text-warning-secondary)', - 'text-accent': 'var(--color-text-accent)', - 'text-primary-on-surface': 'var(--color-text-primary-on-surface)', - 'text-placeholder': 'var(--color-text-placeholder)', - 'text-disabled': 'var(--color-text-disabled)', - 'text-accent-secondary': 'var(--color-text-accent-secondary)', - 'text-accent-light-mode-only': 'var(--color-text-accent-light-mode-only)', - 'text-text-selected': 'var(--color-text-text-selected)', - 'text-secondary-on-surface': 'var(--color-text-secondary-on-surface)', - 'text-logo-text': 'var(--color-text-logo-text)', - 'text-empty-state-icon': 'var(--color-text-empty-state-icon)', - 'text-inverted': 'var(--color-text-inverted)', - 'text-inverted-dimmed': 'var(--color-text-inverted-dimmed)', - - 'background-body': 'var(--color-background-body)', - 'background-default-subtle': 'var(--color-background-default-subtle)', - 'background-neutral-subtle': 'var(--color-background-neutral-subtle)', - 'background-sidenav-bg': 'var(--color-background-sidenav-bg)', - 'background-default': 'var(--color-background-default)', - 'background-soft': 'var(--color-background-soft)', - 'background-gradient-bg-fill-chat-bg-1': 'var(--color-background-gradient-bg-fill-chat-bg-1)', - 'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)', - 'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)', - 'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)', - 'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)', - 'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)', - - 'background-gradient-mask-gray': 'var(--color-background-gradient-mask-gray)', - 'background-gradient-mask-transparent': 'var(--color-background-gradient-mask-transparent)', - 'background-gradient-mask-input-clear-2': 'var(--color-background-gradient-mask-input-clear-2)', - 'background-gradient-mask-input-clear-1': 'var(--color-background-gradient-mask-input-clear-1)', - 'background-gradient-mask-transparent-dark': 'var(--color-background-gradient-mask-transparent-dark)', - 'background-gradient-mask-side-panel-2': 'var(--color-background-gradient-mask-side-panel-2)', - 'background-gradient-mask-side-panel-1': 'var(--color-background-gradient-mask-side-panel-1)', - - 'background-default-burn': 'var(--color-background-default-burn)', - 'background-overlay-fullscreen': 'var(--color-background-overlay-fullscreen)', - 'background-default-lighter': 'var(--color-background-default-lighter)', - 'background-section': 'var(--color-background-section)', - 'background-interaction-from-bg-1': 'var(--color-background-interaction-from-bg-1)', - 'background-interaction-from-bg-2': 'var(--color-background-interaction-from-bg-2)', - 'background-section-burn': 'var(--color-background-section-burn)', - 'background-default-dodge': 'var(--color-background-default-dodge)', - 'background-overlay': 'var(--color-background-overlay)', - 'background-default-dimmed': 'var(--color-background-default-dimmed)', - 'background-default-hover': 'var(--color-background-default-hover)', - 'background-overlay-alt': 'var(--color-background-overlay-alt)', - 'background-surface-white': 'var(--color-background-surface-white)', - 'background-overlay-destructive': 'var(--color-background-overlay-destructive)', - 'background-overlay-backdrop': 'var(--color-background-overlay-backdrop)', - 'background-body-transparent': 'var(--color-background-body-transparent)', - 'background-section-burn-inverted': 'var(--color-background-section-burn-inverted)', - 'background-default-hover-alpha-0': 'var(--color-background-default-hover-alpha-0)', - - 'shadow-shadow-1': 'var(--color-shadow-shadow-1)', - 'shadow-shadow-3': 'var(--color-shadow-shadow-3)', - 'shadow-shadow-4': 'var(--color-shadow-shadow-4)', - 'shadow-shadow-5': 'var(--color-shadow-shadow-5)', - 'shadow-shadow-6': 'var(--color-shadow-shadow-6)', - 'shadow-shadow-7': 'var(--color-shadow-shadow-7)', - 'shadow-shadow-8': 'var(--color-shadow-shadow-8)', - 'shadow-shadow-9': 'var(--color-shadow-shadow-9)', - 'shadow-shadow-2': 'var(--color-shadow-shadow-2)', - 'shadow-shadow-10': 'var(--color-shadow-shadow-10)', - - 'workflow-block-border': 'var(--color-workflow-block-border)', - 'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)', - 'workflow-block-bg': 'var(--color-workflow-block-bg)', - 'workflow-block-bg-transparent': 'var(--color-workflow-block-bg-transparent)', - 'workflow-block-border-highlight': 'var(--color-workflow-block-border-highlight)', - 'workflow-block-wrapper-bg-1': 'var(--color-workflow-block-wrapper-bg-1)', - 'workflow-block-wrapper-bg-2': 'var(--color-workflow-block-wrapper-bg-2)', - - 'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)', - 'workflow-canvas-workflow-bg': 'var(--color-workflow-canvas-workflow-bg)', - 'workflow-canvas-workflow-top-bar-1': 'var(--color-workflow-canvas-workflow-top-bar-1)', - 'workflow-canvas-workflow-top-bar-2': 'var(--color-workflow-canvas-workflow-top-bar-2)', - 'workflow-canvas-canvas-overlay': 'var(--color-workflow-canvas-canvas-overlay)', - - 'workflow-link-line-active': 'var(--color-workflow-link-line-active)', - 'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)', - 'workflow-link-line-handle': 'var(--color-workflow-link-line-handle)', - 'workflow-link-line-normal-transparent': 'var(--color-workflow-link-line-normal-transparent)', - 'workflow-link-line-failure-active': 'var(--color-workflow-link-line-failure-active)', - 'workflow-link-line-failure-handle': 'var(--color-workflow-link-line-failure-handle)', - 'workflow-link-line-failure-button-bg': 'var(--color-workflow-link-line-failure-button-bg)', - 'workflow-link-line-failure-button-hover': 'var(--color-workflow-link-line-failure-button-hover)', - - 'workflow-link-line-success-active': 'var(--color-workflow-link-line-success-active)', - 'workflow-link-line-success-handle': 'var(--color-workflow-link-line-success-handle)', - - 'workflow-link-line-error-active': 'var(--color-workflow-link-line-error-active)', - 'workflow-link-line-error-handle': 'var(--color-workflow-link-line-error-handle)', - - 'workflow-minimap-bg': 'var(--color-workflow-minimap-bg)', - 'workflow-minimap-block': 'var(--color-workflow-minimap-block)', - - 'workflow-display-success-bg': 'var(--color-workflow-display-success-bg)', - 'workflow-display-success-border-1': 'var(--color-workflow-display-success-border-1)', - 'workflow-display-success-border-2': 'var(--color-workflow-display-success-border-2)', - 'workflow-display-success-vignette-color': 'var(--color-workflow-display-success-vignette-color)', - 'workflow-display-success-bg-line-pattern': 'var(--color-workflow-display-success-bg-line-pattern)', - - 'workflow-display-glass-1': 'var(--color-workflow-display-glass-1)', - 'workflow-display-glass-2': 'var(--color-workflow-display-glass-2)', - 'workflow-display-vignette-dark': 'var(--color-workflow-display-vignette-dark)', - 'workflow-display-highlight': 'var(--color-workflow-display-highlight)', - 'workflow-display-outline': 'var(--color-workflow-display-outline)', - 'workflow-display-error-bg': 'var(--color-workflow-display-error-bg)', - 'workflow-display-error-bg-line-pattern': 'var(--color-workflow-display-error-bg-line-pattern)', - 'workflow-display-error-border-1': 'var(--color-workflow-display-error-border-1)', - 'workflow-display-error-border-2': 'var(--color-workflow-display-error-border-2)', - 'workflow-display-error-vignette-color': 'var(--color-workflow-display-error-vignette-color)', - - 'workflow-display-warning-bg': 'var(--color-workflow-display-warning-bg)', - 'workflow-display-warning-bg-line-pattern': 'var(--color-workflow-display-warning-bg-line-pattern)', - 'workflow-display-warning-border-1': 'var(--color-workflow-display-warning-border-1)', - 'workflow-display-warning-border-2': 'var(--color-workflow-display-warning-border-2)', - 'workflow-display-warning-vignette-color': 'var(--color-workflow-display-warning-vignette-color)', - - 'workflow-display-normal-bg': 'var(--color-workflow-display-normal-bg)', - 'workflow-display-normal-bg-line-pattern': 'var(--color-workflow-display-normal-bg-line-pattern)', - 'workflow-display-normal-border-1': 'var(--color-workflow-display-normal-border-1)', - 'workflow-display-normal-border-2': 'var(--color-workflow-display-normal-border-2)', - 'workflow-display-normal-vignette-color': 'var(--color-workflow-display-normal-vignette-color)', - - 'workflow-display-disabled-bg': 'var(--color-workflow-display-disabled-bg)', - 'workflow-display-disabled-bg-line-pattern': 'var(--color-workflow-display-disabled-bg-line-pattern)', - 'workflow-display-disabled-border-1': 'var(--color-workflow-display-disabled-border-1)', - 'workflow-display-disabled-border-2': 'var(--color-workflow-display-disabled-border-2)', - 'workflow-display-disabled-vignette-color': 'var(--color-workflow-display-disabled-vignette-color)', - 'workflow-display-disabled-outline': 'var(--color-workflow-display-disabled-outline)', - - 'workflow-workflow-progress-bg-1': 'var(--color-workflow-workflow-progress-bg-1)', - 'workflow-workflow-progress-bg-2': 'var(--color-workflow-workflow-progress-bg-2)', - - 'workflow-debug-run-status-bg': 'var(--color-workflow-debug-run-status-bg)', - 'workflow-debug-breakpoint': 'var(--color-workflow-debug-breakpoint)', - 'workflow-debug-text': 'var(--color-workflow-debug-text)', - 'workflow-debug-text-disabled': 'var(--color-workflow-debug-text-disabled)', - 'workflow-debug-run-status-bg-alt': 'var(--color-workflow-debug-run-status-bg-alt)', - - 'workflow-test-run-run-status-bg': 'var(--color-workflow-test-run-run-status-bg)', - 'workflow-test-run-text': 'var(--color-workflow-test-run-text)', - 'workflow-test-run-run-status-bg-alt': 'var(--color-workflow-test-run-run-status-bg-alt)', - 'workflow-test-run-paused-bg': 'var(--color-workflow-test-run-paused-bg)', - 'workflow-test-run-paused-text': 'var(--color-workflow-test-run-paused-text)', - - 'divider-subtle': 'var(--color-divider-subtle)', - 'divider-regular': 'var(--color-divider-regular)', - 'divider-deep': 'var(--color-divider-deep)', - 'divider-burn': 'var(--color-divider-burn)', - 'divider-intense': 'var(--color-divider-intense)', - 'divider-solid': 'var(--color-divider-solid)', - 'divider-solid-alt': 'var(--color-divider-solid-alt)', - 'divider-accent': 'var(--color-divider-accent)', - - 'state-base-hover': 'var(--color-state-base-hover)', - 'state-base-active': 'var(--color-state-base-active)', - 'state-base-hover-alt': 'var(--color-state-base-hover-alt)', - 'state-base-handle': 'var(--color-state-base-handle)', - 'state-base-handle-hover': 'var(--color-state-base-handle-hover)', - 'state-base-hover-subtle': 'var(--color-state-base-hover-subtle)', - - 'state-accent-hover': 'var(--color-state-accent-hover)', - 'state-accent-active': 'var(--color-state-accent-active)', - 'state-accent-hover-alt': 'var(--color-state-accent-hover-alt)', - 'state-accent-solid': 'var(--color-state-accent-solid)', - 'state-accent-active-alt': 'var(--color-state-accent-active-alt)', - - 'state-destructive-hover': 'var(--color-state-destructive-hover)', - 'state-destructive-hover-alt': 'var(--color-state-destructive-hover-alt)', - 'state-destructive-active': 'var(--color-state-destructive-active)', - 'state-destructive-solid': 'var(--color-state-destructive-solid)', - 'state-destructive-border': 'var(--color-state-destructive-border)', - 'state-destructive-hover-transparent': 'var(--color-state-destructive-hover-transparent)', - - 'state-success-hover': 'var(--color-state-success-hover)', - 'state-success-hover-alt': 'var(--color-state-success-hover-alt)', - 'state-success-active': 'var(--color-state-success-active)', - 'state-success-solid': 'var(--color-state-success-solid)', - - 'state-warning-hover': 'var(--color-state-warning-hover)', - 'state-warning-hover-alt': 'var(--color-state-warning-hover-alt)', - 'state-warning-active': 'var(--color-state-warning-active)', - 'state-warning-solid': 'var(--color-state-warning-solid)', - 'state-warning-hover-transparent': 'var(--color-state-warning-hover-transparent)', - - 'effects-highlight': 'var(--color-effects-highlight)', - 'effects-highlight-lightmode-off': 'var(--color-effects-highlight-lightmode-off)', - 'effects-image-frame': 'var(--color-effects-image-frame)', - 'effects-icon-border': 'var(--color-effects-icon-border)', - 'effects-highlight-subtle': 'var(--color-effects-highlight-subtle)', - - 'util-colors-orange-dark-orange-dark-50': 'var(--color-util-colors-orange-dark-orange-dark-50)', - 'util-colors-orange-dark-orange-dark-100': 'var(--color-util-colors-orange-dark-orange-dark-100)', - 'util-colors-orange-dark-orange-dark-200': 'var(--color-util-colors-orange-dark-orange-dark-200)', - 'util-colors-orange-dark-orange-dark-300': 'var(--color-util-colors-orange-dark-orange-dark-300)', - 'util-colors-orange-dark-orange-dark-400': 'var(--color-util-colors-orange-dark-orange-dark-400)', - 'util-colors-orange-dark-orange-dark-500': 'var(--color-util-colors-orange-dark-orange-dark-500)', - 'util-colors-orange-dark-orange-dark-600': 'var(--color-util-colors-orange-dark-orange-dark-600)', - 'util-colors-orange-dark-orange-dark-700': 'var(--color-util-colors-orange-dark-orange-dark-700)', - - 'util-colors-orange-orange-50': 'var(--color-util-colors-orange-orange-50)', - 'util-colors-orange-orange-100': 'var(--color-util-colors-orange-orange-100)', - 'util-colors-orange-orange-200': 'var(--color-util-colors-orange-orange-200)', - 'util-colors-orange-orange-300': 'var(--color-util-colors-orange-orange-300)', - 'util-colors-orange-orange-400': 'var(--color-util-colors-orange-orange-400)', - 'util-colors-orange-orange-500': 'var(--color-util-colors-orange-orange-500)', - 'util-colors-orange-orange-600': 'var(--color-util-colors-orange-orange-600)', - 'util-colors-orange-orange-700': 'var(--color-util-colors-orange-orange-700)', - 'util-colors-orange-orange-100-transparent': 'var(--color-util-colors-orange-orange-100-transparent)', - - 'util-colors-pink-pink-50': 'var(--color-util-colors-pink-pink-50)', - 'util-colors-pink-pink-100': 'var(--color-util-colors-pink-pink-100)', - 'util-colors-pink-pink-200': 'var(--color-util-colors-pink-pink-200)', - 'util-colors-pink-pink-300': 'var(--color-util-colors-pink-pink-300)', - 'util-colors-pink-pink-400': 'var(--color-util-colors-pink-pink-400)', - 'util-colors-pink-pink-500': 'var(--color-util-colors-pink-pink-500)', - 'util-colors-pink-pink-600': 'var(--color-util-colors-pink-pink-600)', - 'util-colors-pink-pink-700': 'var(--color-util-colors-pink-pink-700)', - - 'util-colors-fuchsia-fuchsia-50': 'var(--color-util-colors-fuchsia-fuchsia-50)', - 'util-colors-fuchsia-fuchsia-100': 'var(--color-util-colors-fuchsia-fuchsia-100)', - 'util-colors-fuchsia-fuchsia-200': 'var(--color-util-colors-fuchsia-fuchsia-200)', - 'util-colors-fuchsia-fuchsia-300': 'var(--color-util-colors-fuchsia-fuchsia-300)', - 'util-colors-fuchsia-fuchsia-400': 'var(--color-util-colors-fuchsia-fuchsia-400)', - 'util-colors-fuchsia-fuchsia-500': 'var(--color-util-colors-fuchsia-fuchsia-500)', - 'util-colors-fuchsia-fuchsia-600': 'var(--color-util-colors-fuchsia-fuchsia-600)', - 'util-colors-fuchsia-fuchsia-700': 'var(--color-util-colors-fuchsia-fuchsia-700)', - - 'util-colors-purple-purple-50': 'var(--color-util-colors-purple-purple-50)', - 'util-colors-purple-purple-100': 'var(--color-util-colors-purple-purple-100)', - 'util-colors-purple-purple-200': 'var(--color-util-colors-purple-purple-200)', - 'util-colors-purple-purple-300': 'var(--color-util-colors-purple-purple-300)', - 'util-colors-purple-purple-400': 'var(--color-util-colors-purple-purple-400)', - 'util-colors-purple-purple-500': 'var(--color-util-colors-purple-purple-500)', - 'util-colors-purple-purple-600': 'var(--color-util-colors-purple-purple-600)', - 'util-colors-purple-purple-700': 'var(--color-util-colors-purple-purple-700)', - - 'util-colors-indigo-indigo-50': 'var(--color-util-colors-indigo-indigo-50)', - 'util-colors-indigo-indigo-100': 'var(--color-util-colors-indigo-indigo-100)', - 'util-colors-indigo-indigo-200': 'var(--color-util-colors-indigo-indigo-200)', - 'util-colors-indigo-indigo-300': 'var(--color-util-colors-indigo-indigo-300)', - 'util-colors-indigo-indigo-400': 'var(--color-util-colors-indigo-indigo-400)', - 'util-colors-indigo-indigo-500': 'var(--color-util-colors-indigo-indigo-500)', - 'util-colors-indigo-indigo-600': 'var(--color-util-colors-indigo-indigo-600)', - 'util-colors-indigo-indigo-700': 'var(--color-util-colors-indigo-indigo-700)', - - 'util-colors-blue-blue-50': 'var(--color-util-colors-blue-blue-50)', - 'util-colors-blue-blue-100': 'var(--color-util-colors-blue-blue-100)', - 'util-colors-blue-blue-200': 'var(--color-util-colors-blue-blue-200)', - 'util-colors-blue-blue-300': 'var(--color-util-colors-blue-blue-300)', - 'util-colors-blue-blue-400': 'var(--color-util-colors-blue-blue-400)', - 'util-colors-blue-blue-500': 'var(--color-util-colors-blue-blue-500)', - 'util-colors-blue-blue-600': 'var(--color-util-colors-blue-blue-600)', - 'util-colors-blue-blue-700': 'var(--color-util-colors-blue-blue-700)', - - 'util-colors-blue-light-blue-light-50': 'var(--color-util-colors-blue-light-blue-light-50)', - 'util-colors-blue-light-blue-light-100': 'var(--color-util-colors-blue-light-blue-light-100)', - 'util-colors-blue-light-blue-light-200': 'var(--color-util-colors-blue-light-blue-light-200)', - 'util-colors-blue-light-blue-light-300': 'var(--color-util-colors-blue-light-blue-light-300)', - 'util-colors-blue-light-blue-light-400': 'var(--color-util-colors-blue-light-blue-light-400)', - 'util-colors-blue-light-blue-light-500': 'var(--color-util-colors-blue-light-blue-light-500)', - 'util-colors-blue-light-blue-light-600': 'var(--color-util-colors-blue-light-blue-light-600)', - 'util-colors-blue-light-blue-light-700': 'var(--color-util-colors-blue-light-blue-light-700)', - - 'util-colors-gray-blue-gray-blue-50': 'var(--color-util-colors-gray-blue-gray-blue-50)', - 'util-colors-gray-blue-gray-blue-100': 'var(--color-util-colors-gray-blue-gray-blue-100)', - 'util-colors-gray-blue-gray-blue-200': 'var(--color-util-colors-gray-blue-gray-blue-200)', - 'util-colors-gray-blue-gray-blue-300': 'var(--color-util-colors-gray-blue-gray-blue-300)', - 'util-colors-gray-blue-gray-blue-400': 'var(--color-util-colors-gray-blue-gray-blue-400)', - 'util-colors-gray-blue-gray-blue-500': 'var(--color-util-colors-gray-blue-gray-blue-500)', - 'util-colors-gray-blue-gray-blue-600': 'var(--color-util-colors-gray-blue-gray-blue-600)', - 'util-colors-gray-blue-gray-blue-700': 'var(--color-util-colors-gray-blue-gray-blue-700)', - - 'util-colors-blue-brand-blue-brand-50': 'var(--color-util-colors-blue-brand-blue-brand-50)', - 'util-colors-blue-brand-blue-brand-100': 'var(--color-util-colors-blue-brand-blue-brand-100)', - 'util-colors-blue-brand-blue-brand-200': 'var(--color-util-colors-blue-brand-blue-brand-200)', - 'util-colors-blue-brand-blue-brand-300': 'var(--color-util-colors-blue-brand-blue-brand-300)', - 'util-colors-blue-brand-blue-brand-400': 'var(--color-util-colors-blue-brand-blue-brand-400)', - 'util-colors-blue-brand-blue-brand-500': 'var(--color-util-colors-blue-brand-blue-brand-500)', - 'util-colors-blue-brand-blue-brand-600': 'var(--color-util-colors-blue-brand-blue-brand-600)', - 'util-colors-blue-brand-blue-brand-700': 'var(--color-util-colors-blue-brand-blue-brand-700)', - - 'util-colors-red-red-50': 'var(--color-util-colors-red-red-50)', - 'util-colors-red-red-100': 'var(--color-util-colors-red-red-100)', - 'util-colors-red-red-200': 'var(--color-util-colors-red-red-200)', - 'util-colors-red-red-300': 'var(--color-util-colors-red-red-300)', - 'util-colors-red-red-400': 'var(--color-util-colors-red-red-400)', - 'util-colors-red-red-500': 'var(--color-util-colors-red-red-500)', - 'util-colors-red-red-600': 'var(--color-util-colors-red-red-600)', - 'util-colors-red-red-700': 'var(--color-util-colors-red-red-700)', - - 'util-colors-green-green-50': 'var(--color-util-colors-green-green-50)', - 'util-colors-green-green-100': 'var(--color-util-colors-green-green-100)', - 'util-colors-green-green-200': 'var(--color-util-colors-green-green-200)', - 'util-colors-green-green-300': 'var(--color-util-colors-green-green-300)', - 'util-colors-green-green-400': 'var(--color-util-colors-green-green-400)', - 'util-colors-green-green-500': 'var(--color-util-colors-green-green-500)', - 'util-colors-green-green-600': 'var(--color-util-colors-green-green-600)', - 'util-colors-green-green-700': 'var(--color-util-colors-green-green-700)', - - 'util-colors-warning-warning-50': 'var(--color-util-colors-warning-warning-50)', - 'util-colors-warning-warning-100': 'var(--color-util-colors-warning-warning-100)', - 'util-colors-warning-warning-200': 'var(--color-util-colors-warning-warning-200)', - 'util-colors-warning-warning-300': 'var(--color-util-colors-warning-warning-300)', - 'util-colors-warning-warning-400': 'var(--color-util-colors-warning-warning-400)', - 'util-colors-warning-warning-500': 'var(--color-util-colors-warning-warning-500)', - 'util-colors-warning-warning-600': 'var(--color-util-colors-warning-warning-600)', - 'util-colors-warning-warning-700': 'var(--color-util-colors-warning-warning-700)', - - 'util-colors-yellow-yellow-50': 'var(--color-util-colors-yellow-yellow-50)', - 'util-colors-yellow-yellow-100': 'var(--color-util-colors-yellow-yellow-100)', - 'util-colors-yellow-yellow-200': 'var(--color-util-colors-yellow-yellow-200)', - 'util-colors-yellow-yellow-300': 'var(--color-util-colors-yellow-yellow-300)', - 'util-colors-yellow-yellow-400': 'var(--color-util-colors-yellow-yellow-400)', - 'util-colors-yellow-yellow-500': 'var(--color-util-colors-yellow-yellow-500)', - 'util-colors-yellow-yellow-600': 'var(--color-util-colors-yellow-yellow-600)', - 'util-colors-yellow-yellow-700': 'var(--color-util-colors-yellow-yellow-700)', - - 'util-colors-teal-teal-50': 'var(--color-util-colors-teal-teal-50)', - 'util-colors-teal-teal-100': 'var(--color-util-colors-teal-teal-100)', - 'util-colors-teal-teal-200': 'var(--color-util-colors-teal-teal-200)', - 'util-colors-teal-teal-300': 'var(--color-util-colors-teal-teal-300)', - 'util-colors-teal-teal-400': 'var(--color-util-colors-teal-teal-400)', - 'util-colors-teal-teal-500': 'var(--color-util-colors-teal-teal-500)', - 'util-colors-teal-teal-600': 'var(--color-util-colors-teal-teal-600)', - 'util-colors-teal-teal-700': 'var(--color-util-colors-teal-teal-700)', - - 'util-colors-cyan-cyan-50': 'var(--color-util-colors-cyan-cyan-50)', - 'util-colors-cyan-cyan-100': 'var(--color-util-colors-cyan-cyan-100)', - 'util-colors-cyan-cyan-200': 'var(--color-util-colors-cyan-cyan-200)', - 'util-colors-cyan-cyan-300': 'var(--color-util-colors-cyan-cyan-300)', - 'util-colors-cyan-cyan-400': 'var(--color-util-colors-cyan-cyan-400)', - 'util-colors-cyan-cyan-500': 'var(--color-util-colors-cyan-cyan-500)', - 'util-colors-cyan-cyan-600': 'var(--color-util-colors-cyan-cyan-600)', - 'util-colors-cyan-cyan-700': 'var(--color-util-colors-cyan-cyan-700)', - - 'util-colors-violet-violet-50': 'var(--color-util-colors-violet-violet-50)', - 'util-colors-violet-violet-100': 'var(--color-util-colors-violet-violet-100)', - 'util-colors-violet-violet-200': 'var(--color-util-colors-violet-violet-200)', - 'util-colors-violet-violet-300': 'var(--color-util-colors-violet-violet-300)', - 'util-colors-violet-violet-400': 'var(--color-util-colors-violet-violet-400)', - 'util-colors-violet-violet-500': 'var(--color-util-colors-violet-violet-500)', - 'util-colors-violet-violet-600': 'var(--color-util-colors-violet-violet-600)', - 'util-colors-violet-violet-700': 'var(--color-util-colors-violet-violet-700)', - - 'util-colors-gray-gray-50': 'var(--color-util-colors-gray-gray-50)', - 'util-colors-gray-gray-100': 'var(--color-util-colors-gray-gray-100)', - 'util-colors-gray-gray-200': 'var(--color-util-colors-gray-gray-200)', - 'util-colors-gray-gray-300': 'var(--color-util-colors-gray-gray-300)', - 'util-colors-gray-gray-400': 'var(--color-util-colors-gray-gray-400)', - 'util-colors-gray-gray-500': 'var(--color-util-colors-gray-gray-500)', - 'util-colors-gray-gray-600': 'var(--color-util-colors-gray-gray-600)', - 'util-colors-gray-gray-700': 'var(--color-util-colors-gray-gray-700)', - - 'util-colors-green-light-green-light-50': 'var(--color-util-colors-green-light-green-light-50)', - 'util-colors-green-light-green-light-100': 'var(--color-util-colors-green-light-green-light-100)', - 'util-colors-green-light-green-light-200': 'var(--color-util-colors-green-light-green-light-200)', - 'util-colors-green-light-green-light-300': 'var(--color-util-colors-green-light-green-light-300)', - 'util-colors-green-light-green-light-500': 'var(--color-util-colors-green-light-green-light-500)', - 'util-colors-green-light-green-light-400': 'var(--color-util-colors-green-light-green-light-400)', - 'util-colors-green-light-green-light-600': 'var(--color-util-colors-green-light-green-light-600)', - 'util-colors-green-light-green-light-700': 'var(--color-util-colors-green-light-green-light-700)', - - 'util-colors-rose-rose-50': 'var(--color-util-colors-rose-rose-50)', - 'util-colors-rose-rose-100': 'var(--color-util-colors-rose-rose-100)', - 'util-colors-rose-rose-200': 'var(--color-util-colors-rose-rose-200)', - 'util-colors-rose-rose-300': 'var(--color-util-colors-rose-rose-300)', - 'util-colors-rose-rose-400': 'var(--color-util-colors-rose-rose-400)', - 'util-colors-rose-rose-500': 'var(--color-util-colors-rose-rose-500)', - 'util-colors-rose-rose-600': 'var(--color-util-colors-rose-rose-600)', - 'util-colors-rose-rose-700': 'var(--color-util-colors-rose-rose-700)', - - 'util-colors-midnight-midnight-50': 'var(--color-util-colors-midnight-midnight-50)', - 'util-colors-midnight-midnight-100': 'var(--color-util-colors-midnight-midnight-100)', - 'util-colors-midnight-midnight-200': 'var(--color-util-colors-midnight-midnight-200)', - 'util-colors-midnight-midnight-300': 'var(--color-util-colors-midnight-midnight-300)', - 'util-colors-midnight-midnight-400': 'var(--color-util-colors-midnight-midnight-400)', - 'util-colors-midnight-midnight-500': 'var(--color-util-colors-midnight-midnight-500)', - 'util-colors-midnight-midnight-600': 'var(--color-util-colors-midnight-midnight-600)', - 'util-colors-midnight-midnight-700': 'var(--color-util-colors-midnight-midnight-700)', - - 'third-party-LangChain': 'var(--color-third-party-LangChain)', - 'third-party-Langfuse': 'var(--color-third-party-Langfuse)', - 'third-party-Github': 'var(--color-third-party-Github)', - 'third-party-Github-tertiary': 'var(--color-third-party-Github-tertiary)', - 'third-party-Github-secondary': 'var(--color-third-party-Github-secondary)', - 'third-party-model-bg-openai': 'var(--color-third-party-model-bg-openai)', - 'third-party-model-bg-anthropic': 'var(--color-third-party-model-bg-anthropic)', - 'third-party-model-bg-default': 'var(--color-third-party-model-bg-default)', - - 'third-party-aws': 'var(--color-third-party-aws)', - 'third-party-aws-alt': 'var(--color-third-party-aws-alt)', - - 'saas-background': 'var(--color-saas-background)', - 'saas-pricing-grid-bg': 'var(--color-saas-pricing-grid-bg)', - 'saas-dify-blue-static': 'var(--color-saas-dify-blue-static)', - 'saas-dify-blue-static-hover': 'var(--color-saas-dify-blue-static-hover)', - 'saas-dify-blue-accessible': 'var(--color-saas-dify-blue-accessible)', - 'saas-dify-blue-inverted': 'var(--color-saas-dify-blue-inverted)', - 'saas-dify-blue-inverted-dimmed': 'var(--color-saas-dify-blue-inverted-dimmed)', - - 'saas-background-inverted': 'var(--color-saas-background-inverted)', - 'saas-background-inverted-hover': 'var(--color-saas-background-inverted-hover)', - - 'dify-logo-blue': 'var(--color-dify-logo-blue)', - 'dify-logo-black': 'var(--color-dify-logo-black)', - 'dify-logo-outline-1': 'var(--color-dify-logo-outline-1)', - 'dify-logo-outline-2': 'var(--color-dify-logo-outline-2)', - -} -export default vars diff --git a/packages/dify-ui/src/themes/theme.css b/packages/dify-ui/src/themes/theme.css new file mode 100644 index 0000000000..6fad0f39fd --- /dev/null +++ b/packages/dify-ui/src/themes/theme.css @@ -0,0 +1,822 @@ +/* Attention: Generated. Do not edit by hand. */ +/* + * Semantic design tokens. Each entry registers a Tailwind v4 utility + * (e.g. bg-components-input-bg-normal) that resolves to var(--color-...). + * Runtime values come from themes/light.css and themes/dark.css scoped + * under html[data-theme=...] — @theme inline avoids duplicating them at :root. + */ + +@theme inline { + --color-components-input-bg-normal: var(--color-components-input-bg-normal); + --color-components-input-text-placeholder: var(--color-components-input-text-placeholder); + --color-components-input-bg-hover: var(--color-components-input-bg-hover); + --color-components-input-bg-active: var(--color-components-input-bg-active); + --color-components-input-border-active: var(--color-components-input-border-active); + --color-components-input-border-destructive: var(--color-components-input-border-destructive); + --color-components-input-text-filled: var(--color-components-input-text-filled); + --color-components-input-bg-destructive: var(--color-components-input-bg-destructive); + --color-components-input-bg-disabled: var(--color-components-input-bg-disabled); + --color-components-input-text-disabled: var(--color-components-input-text-disabled); + --color-components-input-text-filled-disabled: var(--color-components-input-text-filled-disabled); + --color-components-input-border-hover: var(--color-components-input-border-hover); + --color-components-input-border-active-prompt-1: var(--color-components-input-border-active-prompt-1); + --color-components-input-border-active-prompt-2: var(--color-components-input-border-active-prompt-2); + + --color-components-kbd-bg-gray: var(--color-components-kbd-bg-gray); + --color-components-kbd-bg-white: var(--color-components-kbd-bg-white); + + --color-components-tooltip-bg: var(--color-components-tooltip-bg); + + --color-components-button-primary-text: var(--color-components-button-primary-text); + --color-components-button-primary-bg: var(--color-components-button-primary-bg); + --color-components-button-primary-border: var(--color-components-button-primary-border); + --color-components-button-primary-bg-hover: var(--color-components-button-primary-bg-hover); + --color-components-button-primary-border-hover: var(--color-components-button-primary-border-hover); + --color-components-button-primary-bg-disabled: var(--color-components-button-primary-bg-disabled); + --color-components-button-primary-border-disabled: var(--color-components-button-primary-border-disabled); + --color-components-button-primary-text-disabled: var(--color-components-button-primary-text-disabled); + + --color-components-button-secondary-text: var(--color-components-button-secondary-text); + --color-components-button-secondary-text-disabled: var(--color-components-button-secondary-text-disabled); + --color-components-button-secondary-bg: var(--color-components-button-secondary-bg); + --color-components-button-secondary-bg-hover: var(--color-components-button-secondary-bg-hover); + --color-components-button-secondary-bg-disabled: var(--color-components-button-secondary-bg-disabled); + --color-components-button-secondary-border: var(--color-components-button-secondary-border); + --color-components-button-secondary-border-hover: var(--color-components-button-secondary-border-hover); + --color-components-button-secondary-border-disabled: var(--color-components-button-secondary-border-disabled); + + --color-components-button-tertiary-text: var(--color-components-button-tertiary-text); + --color-components-button-tertiary-text-disabled: var(--color-components-button-tertiary-text-disabled); + --color-components-button-tertiary-bg: var(--color-components-button-tertiary-bg); + --color-components-button-tertiary-bg-hover: var(--color-components-button-tertiary-bg-hover); + --color-components-button-tertiary-bg-disabled: var(--color-components-button-tertiary-bg-disabled); + + --color-components-button-ghost-text: var(--color-components-button-ghost-text); + --color-components-button-ghost-text-disabled: var(--color-components-button-ghost-text-disabled); + --color-components-button-ghost-bg-hover: var(--color-components-button-ghost-bg-hover); + + --color-components-button-destructive-primary-text: var(--color-components-button-destructive-primary-text); + --color-components-button-destructive-primary-text-disabled: var(--color-components-button-destructive-primary-text-disabled); + --color-components-button-destructive-primary-bg: var(--color-components-button-destructive-primary-bg); + --color-components-button-destructive-primary-bg-hover: var(--color-components-button-destructive-primary-bg-hover); + --color-components-button-destructive-primary-bg-disabled: var(--color-components-button-destructive-primary-bg-disabled); + --color-components-button-destructive-primary-border: var(--color-components-button-destructive-primary-border); + --color-components-button-destructive-primary-border-hover: var(--color-components-button-destructive-primary-border-hover); + --color-components-button-destructive-primary-border-disabled: var(--color-components-button-destructive-primary-border-disabled); + + --color-components-button-destructive-secondary-text: var(--color-components-button-destructive-secondary-text); + --color-components-button-destructive-secondary-text-disabled: var(--color-components-button-destructive-secondary-text-disabled); + --color-components-button-destructive-secondary-bg: var(--color-components-button-destructive-secondary-bg); + --color-components-button-destructive-secondary-bg-hover: var(--color-components-button-destructive-secondary-bg-hover); + --color-components-button-destructive-secondary-bg-disabled: var(--color-components-button-destructive-secondary-bg-disabled); + --color-components-button-destructive-secondary-border: var(--color-components-button-destructive-secondary-border); + --color-components-button-destructive-secondary-border-hover: var(--color-components-button-destructive-secondary-border-hover); + --color-components-button-destructive-secondary-border-disabled: var(--color-components-button-destructive-secondary-border-disabled); + + --color-components-button-destructive-tertiary-text: var(--color-components-button-destructive-tertiary-text); + --color-components-button-destructive-tertiary-text-disabled: var(--color-components-button-destructive-tertiary-text-disabled); + --color-components-button-destructive-tertiary-bg: var(--color-components-button-destructive-tertiary-bg); + --color-components-button-destructive-tertiary-bg-hover: var(--color-components-button-destructive-tertiary-bg-hover); + --color-components-button-destructive-tertiary-bg-disabled: var(--color-components-button-destructive-tertiary-bg-disabled); + + --color-components-button-destructive-ghost-text: var(--color-components-button-destructive-ghost-text); + --color-components-button-destructive-ghost-text-disabled: var(--color-components-button-destructive-ghost-text-disabled); + --color-components-button-destructive-ghost-bg-hover: var(--color-components-button-destructive-ghost-bg-hover); + + --color-components-button-secondary-accent-text: var(--color-components-button-secondary-accent-text); + --color-components-button-secondary-accent-text-disabled: var(--color-components-button-secondary-accent-text-disabled); + --color-components-button-secondary-accent-bg: var(--color-components-button-secondary-accent-bg); + --color-components-button-secondary-accent-bg-hover: var(--color-components-button-secondary-accent-bg-hover); + --color-components-button-secondary-accent-bg-disabled: var(--color-components-button-secondary-accent-bg-disabled); + --color-components-button-secondary-accent-border: var(--color-components-button-secondary-accent-border); + --color-components-button-secondary-accent-border-hover: var(--color-components-button-secondary-accent-border-hover); + --color-components-button-secondary-accent-border-disabled: var(--color-components-button-secondary-accent-border-disabled); + + --color-components-button-indigo-bg: var(--color-components-button-indigo-bg); + --color-components-button-indigo-bg-hover: var(--color-components-button-indigo-bg-hover); + --color-components-button-indigo-bg-disabled: var(--color-components-button-indigo-bg-disabled); + + --color-components-button-debug-text: var(--color-components-button-debug-text); + --color-components-button-debug-text-disabled: var(--color-components-button-debug-text-disabled); + --color-components-button-debug-bg: var(--color-components-button-debug-bg); + --color-components-button-debug-bg-hover: var(--color-components-button-debug-bg-hover); + --color-components-button-debug-bg-disabled: var(--color-components-button-debug-bg-disabled); + --color-components-button-debug-border: var(--color-components-button-debug-border); + --color-components-button-debug-border-hover: var(--color-components-button-debug-border-hover); + --color-components-button-debug-border-disabled: var(--color-components-button-debug-border-disabled); + + --color-components-button-button-seam: var(--color-components-button-button-seam); + + --color-components-checkbox-icon: var(--color-components-checkbox-icon); + --color-components-checkbox-icon-disabled: var(--color-components-checkbox-icon-disabled); + --color-components-checkbox-bg: var(--color-components-checkbox-bg); + --color-components-checkbox-bg-hover: var(--color-components-checkbox-bg-hover); + --color-components-checkbox-bg-disabled: var(--color-components-checkbox-bg-disabled); + --color-components-checkbox-border: var(--color-components-checkbox-border); + --color-components-checkbox-border-hover: var(--color-components-checkbox-border-hover); + --color-components-checkbox-border-disabled: var(--color-components-checkbox-border-disabled); + --color-components-checkbox-bg-unchecked: var(--color-components-checkbox-bg-unchecked); + --color-components-checkbox-bg-unchecked-hover: var(--color-components-checkbox-bg-unchecked-hover); + --color-components-checkbox-bg-disabled-checked: var(--color-components-checkbox-bg-disabled-checked); + + --color-components-radio-border-checked: var(--color-components-radio-border-checked); + --color-components-radio-border-checked-hover: var(--color-components-radio-border-checked-hover); + --color-components-radio-border-checked-disabled: var(--color-components-radio-border-checked-disabled); + --color-components-radio-bg-disabled: var(--color-components-radio-bg-disabled); + --color-components-radio-border: var(--color-components-radio-border); + --color-components-radio-border-hover: var(--color-components-radio-border-hover); + --color-components-radio-border-disabled: var(--color-components-radio-border-disabled); + --color-components-radio-bg: var(--color-components-radio-bg); + --color-components-radio-bg-hover: var(--color-components-radio-bg-hover); + + --color-components-toggle-knob: var(--color-components-toggle-knob); + --color-components-toggle-knob-disabled: var(--color-components-toggle-knob-disabled); + --color-components-toggle-bg: var(--color-components-toggle-bg); + --color-components-toggle-bg-hover: var(--color-components-toggle-bg-hover); + --color-components-toggle-bg-disabled: var(--color-components-toggle-bg-disabled); + --color-components-toggle-bg-unchecked: var(--color-components-toggle-bg-unchecked); + --color-components-toggle-bg-unchecked-hover: var(--color-components-toggle-bg-unchecked-hover); + --color-components-toggle-bg-unchecked-disabled: var(--color-components-toggle-bg-unchecked-disabled); + --color-components-toggle-knob-hover: var(--color-components-toggle-knob-hover); + + --color-components-card-bg: var(--color-components-card-bg); + --color-components-card-border: var(--color-components-card-border); + --color-components-card-bg-alt: var(--color-components-card-bg-alt); + --color-components-card-bg-transparent: var(--color-components-card-bg-transparent); + --color-components-card-bg-alt-transparent: var(--color-components-card-bg-alt-transparent); + + --color-components-menu-item-text: var(--color-components-menu-item-text); + --color-components-menu-item-text-active: var(--color-components-menu-item-text-active); + --color-components-menu-item-text-hover: var(--color-components-menu-item-text-hover); + --color-components-menu-item-text-active-accent: var(--color-components-menu-item-text-active-accent); + --color-components-menu-item-bg-active: var(--color-components-menu-item-bg-active); + --color-components-menu-item-bg-hover: var(--color-components-menu-item-bg-hover); + + --color-components-panel-bg: var(--color-components-panel-bg); + --color-components-panel-bg-blur: var(--color-components-panel-bg-blur); + --color-components-panel-border: var(--color-components-panel-border); + --color-components-panel-border-subtle: var(--color-components-panel-border-subtle); + --color-components-panel-gradient-2: var(--color-components-panel-gradient-2); + --color-components-panel-gradient-1: var(--color-components-panel-gradient-1); + --color-components-panel-bg-alt: var(--color-components-panel-bg-alt); + --color-components-panel-on-panel-item-bg: var(--color-components-panel-on-panel-item-bg); + --color-components-panel-on-panel-item-bg-hover: var(--color-components-panel-on-panel-item-bg-hover); + --color-components-panel-on-panel-item-bg-alt: var(--color-components-panel-on-panel-item-bg-alt); + --color-components-panel-on-panel-item-bg-transparent: var(--color-components-panel-on-panel-item-bg-transparent); + --color-components-panel-on-panel-item-bg-hover-transparent: var(--color-components-panel-on-panel-item-bg-hover-transparent); + --color-components-panel-on-panel-item-bg-destructive-hover-transparent: var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent); + + --color-components-panel-bg-transparent: var(--color-components-panel-bg-transparent); + --color-components-panel-bg-blur-burn: var(--color-components-panel-bg-blur-burn); + + --color-components-main-nav-nav-button-text: var(--color-components-main-nav-nav-button-text); + --color-components-main-nav-nav-button-text-active: var(--color-components-main-nav-nav-button-text-active); + --color-components-main-nav-nav-button-bg: var(--color-components-main-nav-nav-button-bg); + --color-components-main-nav-nav-button-bg-active: var(--color-components-main-nav-nav-button-bg-active); + --color-components-main-nav-nav-button-border: var(--color-components-main-nav-nav-button-border); + --color-components-main-nav-nav-button-bg-hover: var(--color-components-main-nav-nav-button-bg-hover); + + --color-components-main-nav-nav-user-border: var(--color-components-main-nav-nav-user-border); + + --color-components-main-nav-text: var(--color-components-main-nav-text); + --color-components-main-nav-text-active: var(--color-components-main-nav-text-active); + --color-components-main-nav-glass-edge-highlight-first: var(--color-components-main-nav-glass-edge-highlight-first); + --color-components-main-nav-glass-edge-highlight-middle: var(--color-components-main-nav-glass-edge-highlight-middle); + --color-components-main-nav-glass-edge-highlight-end: var(--color-components-main-nav-glass-edge-highlight-end); + + --color-components-main-nav-glass-edge-reflection-first: var(--color-components-main-nav-glass-edge-reflection-first); + --color-components-main-nav-glass-edge-reflection-middle: var(--color-components-main-nav-glass-edge-reflection-middle); + --color-components-main-nav-glass-edge-reflection-end: var(--color-components-main-nav-glass-edge-reflection-end); + + --color-components-main-nav-glass-surface-first: var(--color-components-main-nav-glass-surface-first); + --color-components-main-nav-glass-surface-middle-1: var(--color-components-main-nav-glass-surface-middle-1); + --color-components-main-nav-glass-surface-middle-2: var(--color-components-main-nav-glass-surface-middle-2); + --color-components-main-nav-glass-surface-end: var(--color-components-main-nav-glass-surface-end); + + --color-components-main-nav-glass-inner-glow: var(--color-components-main-nav-glass-inner-glow); + --color-components-main-nav-glass-shadow-reflection: var(--color-components-main-nav-glass-shadow-reflection); + --color-components-main-nav-glass-shadow-reflection-glow: var(--color-components-main-nav-glass-shadow-reflection-glow); + --color-components-main-nav-glass-text-glow: var(--color-components-main-nav-glass-text-glow); + + --color-components-slider-knob: var(--color-components-slider-knob); + --color-components-slider-knob-hover: var(--color-components-slider-knob-hover); + --color-components-slider-knob-disabled: var(--color-components-slider-knob-disabled); + --color-components-slider-range: var(--color-components-slider-range); + --color-components-slider-track: var(--color-components-slider-track); + --color-components-slider-knob-border-hover: var(--color-components-slider-knob-border-hover); + --color-components-slider-knob-border: var(--color-components-slider-knob-border); + + --color-components-segmented-control-item-active-bg: var(--color-components-segmented-control-item-active-bg); + --color-components-segmented-control-item-active-border: var(--color-components-segmented-control-item-active-border); + --color-components-segmented-control-bg-normal: var(--color-components-segmented-control-bg-normal); + --color-components-segmented-control-item-active-accent-bg: var(--color-components-segmented-control-item-active-accent-bg); + --color-components-segmented-control-item-active-accent-border: var(--color-components-segmented-control-item-active-accent-border); + + --color-components-option-card-option-bg: var(--color-components-option-card-option-bg); + --color-components-option-card-option-selected-bg: var(--color-components-option-card-option-selected-bg); + --color-components-option-card-option-selected-border: var(--color-components-option-card-option-selected-border); + --color-components-option-card-option-border: var(--color-components-option-card-option-border); + --color-components-option-card-option-bg-hover: var(--color-components-option-card-option-bg-hover); + --color-components-option-card-option-border-hover: var(--color-components-option-card-option-border-hover); + + --color-components-tab-active: var(--color-components-tab-active); + + --color-components-badge-white-to-dark: var(--color-components-badge-white-to-dark); + --color-components-badge-status-light-success-bg: var(--color-components-badge-status-light-success-bg); + --color-components-badge-status-light-success-border-inner: var(--color-components-badge-status-light-success-border-inner); + --color-components-badge-status-light-success-halo: var(--color-components-badge-status-light-success-halo); + + --color-components-badge-status-light-border-outer: var(--color-components-badge-status-light-border-outer); + --color-components-badge-status-light-high-light: var(--color-components-badge-status-light-high-light); + --color-components-badge-status-light-warning-bg: var(--color-components-badge-status-light-warning-bg); + --color-components-badge-status-light-warning-border-inner: var(--color-components-badge-status-light-warning-border-inner); + --color-components-badge-status-light-warning-halo: var(--color-components-badge-status-light-warning-halo); + + --color-components-badge-status-light-error-bg: var(--color-components-badge-status-light-error-bg); + --color-components-badge-status-light-error-border-inner: var(--color-components-badge-status-light-error-border-inner); + --color-components-badge-status-light-error-halo: var(--color-components-badge-status-light-error-halo); + + --color-components-badge-status-light-normal-bg: var(--color-components-badge-status-light-normal-bg); + --color-components-badge-status-light-normal-border-inner: var(--color-components-badge-status-light-normal-border-inner); + --color-components-badge-status-light-normal-halo: var(--color-components-badge-status-light-normal-halo); + + --color-components-badge-status-light-disabled-bg: var(--color-components-badge-status-light-disabled-bg); + --color-components-badge-status-light-disabled-border-inner: var(--color-components-badge-status-light-disabled-border-inner); + --color-components-badge-status-light-disabled-halo: var(--color-components-badge-status-light-disabled-halo); + + --color-components-badge-bg-green-soft: var(--color-components-badge-bg-green-soft); + --color-components-badge-bg-orange-soft: var(--color-components-badge-bg-orange-soft); + --color-components-badge-bg-red-soft: var(--color-components-badge-bg-red-soft); + --color-components-badge-bg-blue-light-soft: var(--color-components-badge-bg-blue-light-soft); + --color-components-badge-bg-gray-soft: var(--color-components-badge-bg-gray-soft); + --color-components-badge-bg-dimm: var(--color-components-badge-bg-dimm); + + --color-components-chart-line: var(--color-components-chart-line); + --color-components-chart-area-1: var(--color-components-chart-area-1); + --color-components-chart-area-2: var(--color-components-chart-area-2); + --color-components-chart-current-1: var(--color-components-chart-current-1); + --color-components-chart-current-2: var(--color-components-chart-current-2); + --color-components-chart-bg: var(--color-components-chart-bg); + + --color-components-actionbar-bg: var(--color-components-actionbar-bg); + --color-components-actionbar-border: var(--color-components-actionbar-border); + --color-components-actionbar-bg-accent: var(--color-components-actionbar-bg-accent); + --color-components-actionbar-border-accent: var(--color-components-actionbar-border-accent); + + --color-components-dropzone-bg-alt: var(--color-components-dropzone-bg-alt); + --color-components-dropzone-bg: var(--color-components-dropzone-bg); + --color-components-dropzone-bg-accent: var(--color-components-dropzone-bg-accent); + --color-components-dropzone-border: var(--color-components-dropzone-border); + --color-components-dropzone-border-alt: var(--color-components-dropzone-border-alt); + --color-components-dropzone-border-accent: var(--color-components-dropzone-border-accent); + + --color-components-progress-brand-progress: var(--color-components-progress-brand-progress); + --color-components-progress-brand-border: var(--color-components-progress-brand-border); + --color-components-progress-brand-bg: var(--color-components-progress-brand-bg); + + --color-components-progress-white-progress: var(--color-components-progress-white-progress); + --color-components-progress-white-border: var(--color-components-progress-white-border); + --color-components-progress-white-bg: var(--color-components-progress-white-bg); + + --color-components-progress-gray-progress: var(--color-components-progress-gray-progress); + --color-components-progress-gray-border: var(--color-components-progress-gray-border); + --color-components-progress-gray-bg: var(--color-components-progress-gray-bg); + + --color-components-progress-warning-progress: var(--color-components-progress-warning-progress); + --color-components-progress-warning-border: var(--color-components-progress-warning-border); + --color-components-progress-warning-bg: var(--color-components-progress-warning-bg); + + --color-components-progress-error-progress: var(--color-components-progress-error-progress); + --color-components-progress-error-border: var(--color-components-progress-error-border); + --color-components-progress-error-bg: var(--color-components-progress-error-bg); + + --color-components-chat-input-audio-bg: var(--color-components-chat-input-audio-bg); + --color-components-chat-input-audio-wave-default: var(--color-components-chat-input-audio-wave-default); + --color-components-chat-input-bg-mask-1: var(--color-components-chat-input-bg-mask-1); + --color-components-chat-input-bg-mask-2: var(--color-components-chat-input-bg-mask-2); + --color-components-chat-input-border: var(--color-components-chat-input-border); + --color-components-chat-input-audio-wave-active: var(--color-components-chat-input-audio-wave-active); + --color-components-chat-input-audio-bg-alt: var(--color-components-chat-input-audio-bg-alt); + + --color-components-avatar-shape-fill-stop-0: var(--color-components-avatar-shape-fill-stop-0); + --color-components-avatar-shape-fill-stop-100: var(--color-components-avatar-shape-fill-stop-100); + + --color-components-avatar-bg-mask-stop-0: var(--color-components-avatar-bg-mask-stop-0); + --color-components-avatar-bg-mask-stop-100: var(--color-components-avatar-bg-mask-stop-100); + + --color-components-avatar-default-avatar-bg: var(--color-components-avatar-default-avatar-bg); + --color-components-avatar-mask-darkmode-dimmed: var(--color-components-avatar-mask-darkmode-dimmed); + + --color-components-label-gray: var(--color-components-label-gray); + + --color-components-premium-badge-blue-bg-stop-0: var(--color-components-premium-badge-blue-bg-stop-0); + --color-components-premium-badge-blue-bg-stop-100: var(--color-components-premium-badge-blue-bg-stop-100); + --color-components-premium-badge-blue-stroke-stop-0: var(--color-components-premium-badge-blue-stroke-stop-0); + --color-components-premium-badge-blue-stroke-stop-100: var(--color-components-premium-badge-blue-stroke-stop-100); + --color-components-premium-badge-blue-text-stop-0: var(--color-components-premium-badge-blue-text-stop-0); + --color-components-premium-badge-blue-text-stop-100: var(--color-components-premium-badge-blue-text-stop-100); + --color-components-premium-badge-blue-glow: var(--color-components-premium-badge-blue-glow); + --color-components-premium-badge-blue-bg-stop-0-hover: var(--color-components-premium-badge-blue-bg-stop-0-hover); + --color-components-premium-badge-blue-bg-stop-100-hover: var(--color-components-premium-badge-blue-bg-stop-100-hover); + --color-components-premium-badge-blue-glow-hover: var(--color-components-premium-badge-blue-glow-hover); + --color-components-premium-badge-blue-stroke-stop-0-hover: var(--color-components-premium-badge-blue-stroke-stop-0-hover); + --color-components-premium-badge-blue-stroke-stop-100-hover: var(--color-components-premium-badge-blue-stroke-stop-100-hover); + + --color-components-premium-badge-highlight-stop-0: var(--color-components-premium-badge-highlight-stop-0); + --color-components-premium-badge-highlight-stop-100: var(--color-components-premium-badge-highlight-stop-100); + --color-components-premium-badge-indigo-bg-stop-0: var(--color-components-premium-badge-indigo-bg-stop-0); + --color-components-premium-badge-indigo-bg-stop-100: var(--color-components-premium-badge-indigo-bg-stop-100); + --color-components-premium-badge-indigo-stroke-stop-0: var(--color-components-premium-badge-indigo-stroke-stop-0); + --color-components-premium-badge-indigo-stroke-stop-100: var(--color-components-premium-badge-indigo-stroke-stop-100); + --color-components-premium-badge-indigo-text-stop-0: var(--color-components-premium-badge-indigo-text-stop-0); + --color-components-premium-badge-indigo-text-stop-100: var(--color-components-premium-badge-indigo-text-stop-100); + --color-components-premium-badge-indigo-glow: var(--color-components-premium-badge-indigo-glow); + --color-components-premium-badge-indigo-glow-hover: var(--color-components-premium-badge-indigo-glow-hover); + --color-components-premium-badge-indigo-bg-stop-0-hover: var(--color-components-premium-badge-indigo-bg-stop-0-hover); + --color-components-premium-badge-indigo-bg-stop-100-hover: var(--color-components-premium-badge-indigo-bg-stop-100-hover); + --color-components-premium-badge-indigo-stroke-stop-0-hover: var(--color-components-premium-badge-indigo-stroke-stop-0-hover); + --color-components-premium-badge-indigo-stroke-stop-100-hover: var(--color-components-premium-badge-indigo-stroke-stop-100-hover); + + --color-components-premium-badge-grey-bg-stop-0: var(--color-components-premium-badge-grey-bg-stop-0); + --color-components-premium-badge-grey-bg-stop-100: var(--color-components-premium-badge-grey-bg-stop-100); + --color-components-premium-badge-grey-stroke-stop-0: var(--color-components-premium-badge-grey-stroke-stop-0); + --color-components-premium-badge-grey-stroke-stop-100: var(--color-components-premium-badge-grey-stroke-stop-100); + --color-components-premium-badge-grey-text-stop-0: var(--color-components-premium-badge-grey-text-stop-0); + --color-components-premium-badge-grey-text-stop-100: var(--color-components-premium-badge-grey-text-stop-100); + --color-components-premium-badge-grey-glow: var(--color-components-premium-badge-grey-glow); + --color-components-premium-badge-grey-glow-hover: var(--color-components-premium-badge-grey-glow-hover); + --color-components-premium-badge-grey-bg-stop-0-hover: var(--color-components-premium-badge-grey-bg-stop-0-hover); + --color-components-premium-badge-grey-bg-stop-100-hover: var(--color-components-premium-badge-grey-bg-stop-100-hover); + --color-components-premium-badge-grey-stroke-stop-0-hover: var(--color-components-premium-badge-grey-stroke-stop-0-hover); + --color-components-premium-badge-grey-stroke-stop-100-hover: var(--color-components-premium-badge-grey-stroke-stop-100-hover); + + --color-components-premium-badge-orange-bg-stop-0: var(--color-components-premium-badge-orange-bg-stop-0); + --color-components-premium-badge-orange-bg-stop-100: var(--color-components-premium-badge-orange-bg-stop-100); + --color-components-premium-badge-orange-stroke-stop-0: var(--color-components-premium-badge-orange-stroke-stop-0); + --color-components-premium-badge-orange-stroke-stop-100: var(--color-components-premium-badge-orange-stroke-stop-100); + --color-components-premium-badge-orange-text-stop-0: var(--color-components-premium-badge-orange-text-stop-0); + --color-components-premium-badge-orange-text-stop-100: var(--color-components-premium-badge-orange-text-stop-100); + --color-components-premium-badge-orange-glow: var(--color-components-premium-badge-orange-glow); + --color-components-premium-badge-orange-glow-hover: var(--color-components-premium-badge-orange-glow-hover); + --color-components-premium-badge-orange-bg-stop-0-hover: var(--color-components-premium-badge-orange-bg-stop-0-hover); + --color-components-premium-badge-orange-bg-stop-100-hover: var(--color-components-premium-badge-orange-bg-stop-100-hover); + --color-components-premium-badge-orange-stroke-stop-0-hover: var(--color-components-premium-badge-orange-stroke-stop-0-hover); + --color-components-premium-badge-orange-stroke-stop-100-hover: var(--color-components-premium-badge-orange-stroke-stop-100-hover); + + --color-components-progress-bar-bg: var(--color-components-progress-bar-bg); + --color-components-progress-bar-progress: var(--color-components-progress-bar-progress); + --color-components-progress-bar-border: var(--color-components-progress-bar-border); + --color-components-progress-bar-progress-solid: var(--color-components-progress-bar-progress-solid); + --color-components-progress-bar-progress-highlight: var(--color-components-progress-bar-progress-highlight); + + --color-components-icon-bg-red-solid: var(--color-components-icon-bg-red-solid); + --color-components-icon-bg-rose-solid: var(--color-components-icon-bg-rose-solid); + --color-components-icon-bg-pink-solid: var(--color-components-icon-bg-pink-solid); + --color-components-icon-bg-orange-dark-solid: var(--color-components-icon-bg-orange-dark-solid); + --color-components-icon-bg-yellow-solid: var(--color-components-icon-bg-yellow-solid); + --color-components-icon-bg-green-solid: var(--color-components-icon-bg-green-solid); + --color-components-icon-bg-teal-solid: var(--color-components-icon-bg-teal-solid); + --color-components-icon-bg-blue-light-solid: var(--color-components-icon-bg-blue-light-solid); + --color-components-icon-bg-blue-solid: var(--color-components-icon-bg-blue-solid); + --color-components-icon-bg-indigo-solid: var(--color-components-icon-bg-indigo-solid); + --color-components-icon-bg-violet-solid: var(--color-components-icon-bg-violet-solid); + --color-components-icon-bg-midnight-solid: var(--color-components-icon-bg-midnight-solid); + --color-components-icon-bg-rose-soft: var(--color-components-icon-bg-rose-soft); + --color-components-icon-bg-pink-soft: var(--color-components-icon-bg-pink-soft); + --color-components-icon-bg-orange-dark-soft: var(--color-components-icon-bg-orange-dark-soft); + --color-components-icon-bg-yellow-soft: var(--color-components-icon-bg-yellow-soft); + --color-components-icon-bg-green-soft: var(--color-components-icon-bg-green-soft); + --color-components-icon-bg-teal-soft: var(--color-components-icon-bg-teal-soft); + --color-components-icon-bg-blue-light-soft: var(--color-components-icon-bg-blue-light-soft); + --color-components-icon-bg-blue-soft: var(--color-components-icon-bg-blue-soft); + --color-components-icon-bg-indigo-soft: var(--color-components-icon-bg-indigo-soft); + --color-components-icon-bg-violet-soft: var(--color-components-icon-bg-violet-soft); + --color-components-icon-bg-midnight-soft: var(--color-components-icon-bg-midnight-soft); + --color-components-icon-bg-red-soft: var(--color-components-icon-bg-red-soft); + --color-components-icon-bg-orange-solid: var(--color-components-icon-bg-orange-solid); + --color-components-icon-bg-orange-soft: var(--color-components-icon-bg-orange-soft); + + --color-components-marketplace-header-bg: var(--color-components-marketplace-header-bg); + + --color-text-primary: var(--color-text-primary); + --color-text-secondary: var(--color-text-secondary); + --color-text-tertiary: var(--color-text-tertiary); + --color-text-quaternary: var(--color-text-quaternary); + --color-text-destructive: var(--color-text-destructive); + --color-text-success: var(--color-text-success); + --color-text-warning: var(--color-text-warning); + --color-text-destructive-secondary: var(--color-text-destructive-secondary); + --color-text-success-secondary: var(--color-text-success-secondary); + --color-text-warning-secondary: var(--color-text-warning-secondary); + --color-text-accent: var(--color-text-accent); + --color-text-primary-on-surface: var(--color-text-primary-on-surface); + --color-text-placeholder: var(--color-text-placeholder); + --color-text-disabled: var(--color-text-disabled); + --color-text-accent-secondary: var(--color-text-accent-secondary); + --color-text-accent-light-mode-only: var(--color-text-accent-light-mode-only); + --color-text-text-selected: var(--color-text-text-selected); + --color-text-secondary-on-surface: var(--color-text-secondary-on-surface); + --color-text-logo-text: var(--color-text-logo-text); + --color-text-empty-state-icon: var(--color-text-empty-state-icon); + --color-text-inverted: var(--color-text-inverted); + --color-text-inverted-dimmed: var(--color-text-inverted-dimmed); + + --color-background-body: var(--color-background-body); + --color-background-default-subtle: var(--color-background-default-subtle); + --color-background-neutral-subtle: var(--color-background-neutral-subtle); + --color-background-sidenav-bg: var(--color-background-sidenav-bg); + --color-background-default: var(--color-background-default); + --color-background-soft: var(--color-background-soft); + --color-background-gradient-bg-fill-chat-bg-1: var(--color-background-gradient-bg-fill-chat-bg-1); + --color-background-gradient-bg-fill-chat-bg-2: var(--color-background-gradient-bg-fill-chat-bg-2); + --color-background-gradient-bg-fill-chat-bubble-bg-1: var(--color-background-gradient-bg-fill-chat-bubble-bg-1); + --color-background-gradient-bg-fill-chat-bubble-bg-2: var(--color-background-gradient-bg-fill-chat-bubble-bg-2); + --color-background-gradient-bg-fill-debug-bg-1: var(--color-background-gradient-bg-fill-debug-bg-1); + --color-background-gradient-bg-fill-debug-bg-2: var(--color-background-gradient-bg-fill-debug-bg-2); + + --color-background-gradient-mask-gray: var(--color-background-gradient-mask-gray); + --color-background-gradient-mask-transparent: var(--color-background-gradient-mask-transparent); + --color-background-gradient-mask-input-clear-2: var(--color-background-gradient-mask-input-clear-2); + --color-background-gradient-mask-input-clear-1: var(--color-background-gradient-mask-input-clear-1); + --color-background-gradient-mask-transparent-dark: var(--color-background-gradient-mask-transparent-dark); + --color-background-gradient-mask-side-panel-2: var(--color-background-gradient-mask-side-panel-2); + --color-background-gradient-mask-side-panel-1: var(--color-background-gradient-mask-side-panel-1); + + --color-background-default-burn: var(--color-background-default-burn); + --color-background-overlay-fullscreen: var(--color-background-overlay-fullscreen); + --color-background-default-lighter: var(--color-background-default-lighter); + --color-background-section: var(--color-background-section); + --color-background-interaction-from-bg-1: var(--color-background-interaction-from-bg-1); + --color-background-interaction-from-bg-2: var(--color-background-interaction-from-bg-2); + --color-background-section-burn: var(--color-background-section-burn); + --color-background-default-dodge: var(--color-background-default-dodge); + --color-background-overlay: var(--color-background-overlay); + --color-background-default-dimmed: var(--color-background-default-dimmed); + --color-background-default-hover: var(--color-background-default-hover); + --color-background-overlay-alt: var(--color-background-overlay-alt); + --color-background-surface-white: var(--color-background-surface-white); + --color-background-overlay-destructive: var(--color-background-overlay-destructive); + --color-background-overlay-backdrop: var(--color-background-overlay-backdrop); + --color-background-body-transparent: var(--color-background-body-transparent); + --color-background-section-burn-inverted: var(--color-background-section-burn-inverted); + --color-background-default-hover-alpha-0: var(--color-background-default-hover-alpha-0); + + --color-shadow-shadow-1: var(--color-shadow-shadow-1); + --color-shadow-shadow-3: var(--color-shadow-shadow-3); + --color-shadow-shadow-4: var(--color-shadow-shadow-4); + --color-shadow-shadow-5: var(--color-shadow-shadow-5); + --color-shadow-shadow-6: var(--color-shadow-shadow-6); + --color-shadow-shadow-7: var(--color-shadow-shadow-7); + --color-shadow-shadow-8: var(--color-shadow-shadow-8); + --color-shadow-shadow-9: var(--color-shadow-shadow-9); + --color-shadow-shadow-2: var(--color-shadow-shadow-2); + --color-shadow-shadow-10: var(--color-shadow-shadow-10); + + --color-workflow-block-border: var(--color-workflow-block-border); + --color-workflow-block-parma-bg: var(--color-workflow-block-parma-bg); + --color-workflow-block-bg: var(--color-workflow-block-bg); + --color-workflow-block-bg-transparent: var(--color-workflow-block-bg-transparent); + --color-workflow-block-border-highlight: var(--color-workflow-block-border-highlight); + --color-workflow-block-wrapper-bg-1: var(--color-workflow-block-wrapper-bg-1); + --color-workflow-block-wrapper-bg-2: var(--color-workflow-block-wrapper-bg-2); + + --color-workflow-canvas-workflow-dot-color: var(--color-workflow-canvas-workflow-dot-color); + --color-workflow-canvas-workflow-bg: var(--color-workflow-canvas-workflow-bg); + --color-workflow-canvas-workflow-top-bar-1: var(--color-workflow-canvas-workflow-top-bar-1); + --color-workflow-canvas-workflow-top-bar-2: var(--color-workflow-canvas-workflow-top-bar-2); + --color-workflow-canvas-canvas-overlay: var(--color-workflow-canvas-canvas-overlay); + + --color-workflow-link-line-active: var(--color-workflow-link-line-active); + --color-workflow-link-line-normal: var(--color-workflow-link-line-normal); + --color-workflow-link-line-handle: var(--color-workflow-link-line-handle); + --color-workflow-link-line-normal-transparent: var(--color-workflow-link-line-normal-transparent); + --color-workflow-link-line-failure-active: var(--color-workflow-link-line-failure-active); + --color-workflow-link-line-failure-handle: var(--color-workflow-link-line-failure-handle); + --color-workflow-link-line-failure-button-bg: var(--color-workflow-link-line-failure-button-bg); + --color-workflow-link-line-failure-button-hover: var(--color-workflow-link-line-failure-button-hover); + + --color-workflow-link-line-success-active: var(--color-workflow-link-line-success-active); + --color-workflow-link-line-success-handle: var(--color-workflow-link-line-success-handle); + + --color-workflow-link-line-error-active: var(--color-workflow-link-line-error-active); + --color-workflow-link-line-error-handle: var(--color-workflow-link-line-error-handle); + + --color-workflow-minimap-bg: var(--color-workflow-minimap-bg); + --color-workflow-minimap-block: var(--color-workflow-minimap-block); + + --color-workflow-display-success-bg: var(--color-workflow-display-success-bg); + --color-workflow-display-success-border-1: var(--color-workflow-display-success-border-1); + --color-workflow-display-success-border-2: var(--color-workflow-display-success-border-2); + --color-workflow-display-success-vignette-color: var(--color-workflow-display-success-vignette-color); + --color-workflow-display-success-bg-line-pattern: var(--color-workflow-display-success-bg-line-pattern); + + --color-workflow-display-glass-1: var(--color-workflow-display-glass-1); + --color-workflow-display-glass-2: var(--color-workflow-display-glass-2); + --color-workflow-display-vignette-dark: var(--color-workflow-display-vignette-dark); + --color-workflow-display-highlight: var(--color-workflow-display-highlight); + --color-workflow-display-outline: var(--color-workflow-display-outline); + --color-workflow-display-error-bg: var(--color-workflow-display-error-bg); + --color-workflow-display-error-bg-line-pattern: var(--color-workflow-display-error-bg-line-pattern); + --color-workflow-display-error-border-1: var(--color-workflow-display-error-border-1); + --color-workflow-display-error-border-2: var(--color-workflow-display-error-border-2); + --color-workflow-display-error-vignette-color: var(--color-workflow-display-error-vignette-color); + + --color-workflow-display-warning-bg: var(--color-workflow-display-warning-bg); + --color-workflow-display-warning-bg-line-pattern: var(--color-workflow-display-warning-bg-line-pattern); + --color-workflow-display-warning-border-1: var(--color-workflow-display-warning-border-1); + --color-workflow-display-warning-border-2: var(--color-workflow-display-warning-border-2); + --color-workflow-display-warning-vignette-color: var(--color-workflow-display-warning-vignette-color); + + --color-workflow-display-normal-bg: var(--color-workflow-display-normal-bg); + --color-workflow-display-normal-bg-line-pattern: var(--color-workflow-display-normal-bg-line-pattern); + --color-workflow-display-normal-border-1: var(--color-workflow-display-normal-border-1); + --color-workflow-display-normal-border-2: var(--color-workflow-display-normal-border-2); + --color-workflow-display-normal-vignette-color: var(--color-workflow-display-normal-vignette-color); + + --color-workflow-display-disabled-bg: var(--color-workflow-display-disabled-bg); + --color-workflow-display-disabled-bg-line-pattern: var(--color-workflow-display-disabled-bg-line-pattern); + --color-workflow-display-disabled-border-1: var(--color-workflow-display-disabled-border-1); + --color-workflow-display-disabled-border-2: var(--color-workflow-display-disabled-border-2); + --color-workflow-display-disabled-vignette-color: var(--color-workflow-display-disabled-vignette-color); + --color-workflow-display-disabled-outline: var(--color-workflow-display-disabled-outline); + + --color-workflow-workflow-progress-bg-1: var(--color-workflow-workflow-progress-bg-1); + --color-workflow-workflow-progress-bg-2: var(--color-workflow-workflow-progress-bg-2); + + --color-workflow-debug-run-status-bg: var(--color-workflow-debug-run-status-bg); + --color-workflow-debug-breakpoint: var(--color-workflow-debug-breakpoint); + --color-workflow-debug-text: var(--color-workflow-debug-text); + --color-workflow-debug-text-disabled: var(--color-workflow-debug-text-disabled); + --color-workflow-debug-run-status-bg-alt: var(--color-workflow-debug-run-status-bg-alt); + + --color-workflow-test-run-run-status-bg: var(--color-workflow-test-run-run-status-bg); + --color-workflow-test-run-text: var(--color-workflow-test-run-text); + --color-workflow-test-run-run-status-bg-alt: var(--color-workflow-test-run-run-status-bg-alt); + --color-workflow-test-run-paused-bg: var(--color-workflow-test-run-paused-bg); + --color-workflow-test-run-paused-text: var(--color-workflow-test-run-paused-text); + + --color-divider-subtle: var(--color-divider-subtle); + --color-divider-regular: var(--color-divider-regular); + --color-divider-deep: var(--color-divider-deep); + --color-divider-burn: var(--color-divider-burn); + --color-divider-intense: var(--color-divider-intense); + --color-divider-solid: var(--color-divider-solid); + --color-divider-solid-alt: var(--color-divider-solid-alt); + --color-divider-accent: var(--color-divider-accent); + + --color-state-base-hover: var(--color-state-base-hover); + --color-state-base-active: var(--color-state-base-active); + --color-state-base-hover-alt: var(--color-state-base-hover-alt); + --color-state-base-handle: var(--color-state-base-handle); + --color-state-base-handle-hover: var(--color-state-base-handle-hover); + --color-state-base-hover-subtle: var(--color-state-base-hover-subtle); + + --color-state-accent-hover: var(--color-state-accent-hover); + --color-state-accent-active: var(--color-state-accent-active); + --color-state-accent-hover-alt: var(--color-state-accent-hover-alt); + --color-state-accent-solid: var(--color-state-accent-solid); + --color-state-accent-active-alt: var(--color-state-accent-active-alt); + + --color-state-destructive-hover: var(--color-state-destructive-hover); + --color-state-destructive-hover-alt: var(--color-state-destructive-hover-alt); + --color-state-destructive-active: var(--color-state-destructive-active); + --color-state-destructive-solid: var(--color-state-destructive-solid); + --color-state-destructive-border: var(--color-state-destructive-border); + --color-state-destructive-hover-transparent: var(--color-state-destructive-hover-transparent); + + --color-state-success-hover: var(--color-state-success-hover); + --color-state-success-hover-alt: var(--color-state-success-hover-alt); + --color-state-success-active: var(--color-state-success-active); + --color-state-success-solid: var(--color-state-success-solid); + + --color-state-warning-hover: var(--color-state-warning-hover); + --color-state-warning-hover-alt: var(--color-state-warning-hover-alt); + --color-state-warning-active: var(--color-state-warning-active); + --color-state-warning-solid: var(--color-state-warning-solid); + --color-state-warning-hover-transparent: var(--color-state-warning-hover-transparent); + + --color-effects-highlight: var(--color-effects-highlight); + --color-effects-highlight-lightmode-off: var(--color-effects-highlight-lightmode-off); + --color-effects-image-frame: var(--color-effects-image-frame); + --color-effects-icon-border: var(--color-effects-icon-border); + --color-effects-highlight-subtle: var(--color-effects-highlight-subtle); + + --color-util-colors-orange-dark-orange-dark-50: var(--color-util-colors-orange-dark-orange-dark-50); + --color-util-colors-orange-dark-orange-dark-100: var(--color-util-colors-orange-dark-orange-dark-100); + --color-util-colors-orange-dark-orange-dark-200: var(--color-util-colors-orange-dark-orange-dark-200); + --color-util-colors-orange-dark-orange-dark-300: var(--color-util-colors-orange-dark-orange-dark-300); + --color-util-colors-orange-dark-orange-dark-400: var(--color-util-colors-orange-dark-orange-dark-400); + --color-util-colors-orange-dark-orange-dark-500: var(--color-util-colors-orange-dark-orange-dark-500); + --color-util-colors-orange-dark-orange-dark-600: var(--color-util-colors-orange-dark-orange-dark-600); + --color-util-colors-orange-dark-orange-dark-700: var(--color-util-colors-orange-dark-orange-dark-700); + + --color-util-colors-orange-orange-50: var(--color-util-colors-orange-orange-50); + --color-util-colors-orange-orange-100: var(--color-util-colors-orange-orange-100); + --color-util-colors-orange-orange-200: var(--color-util-colors-orange-orange-200); + --color-util-colors-orange-orange-300: var(--color-util-colors-orange-orange-300); + --color-util-colors-orange-orange-400: var(--color-util-colors-orange-orange-400); + --color-util-colors-orange-orange-500: var(--color-util-colors-orange-orange-500); + --color-util-colors-orange-orange-600: var(--color-util-colors-orange-orange-600); + --color-util-colors-orange-orange-700: var(--color-util-colors-orange-orange-700); + --color-util-colors-orange-orange-100-transparent: var(--color-util-colors-orange-orange-100-transparent); + + --color-util-colors-pink-pink-50: var(--color-util-colors-pink-pink-50); + --color-util-colors-pink-pink-100: var(--color-util-colors-pink-pink-100); + --color-util-colors-pink-pink-200: var(--color-util-colors-pink-pink-200); + --color-util-colors-pink-pink-300: var(--color-util-colors-pink-pink-300); + --color-util-colors-pink-pink-400: var(--color-util-colors-pink-pink-400); + --color-util-colors-pink-pink-500: var(--color-util-colors-pink-pink-500); + --color-util-colors-pink-pink-600: var(--color-util-colors-pink-pink-600); + --color-util-colors-pink-pink-700: var(--color-util-colors-pink-pink-700); + + --color-util-colors-fuchsia-fuchsia-50: var(--color-util-colors-fuchsia-fuchsia-50); + --color-util-colors-fuchsia-fuchsia-100: var(--color-util-colors-fuchsia-fuchsia-100); + --color-util-colors-fuchsia-fuchsia-200: var(--color-util-colors-fuchsia-fuchsia-200); + --color-util-colors-fuchsia-fuchsia-300: var(--color-util-colors-fuchsia-fuchsia-300); + --color-util-colors-fuchsia-fuchsia-400: var(--color-util-colors-fuchsia-fuchsia-400); + --color-util-colors-fuchsia-fuchsia-500: var(--color-util-colors-fuchsia-fuchsia-500); + --color-util-colors-fuchsia-fuchsia-600: var(--color-util-colors-fuchsia-fuchsia-600); + --color-util-colors-fuchsia-fuchsia-700: var(--color-util-colors-fuchsia-fuchsia-700); + + --color-util-colors-purple-purple-50: var(--color-util-colors-purple-purple-50); + --color-util-colors-purple-purple-100: var(--color-util-colors-purple-purple-100); + --color-util-colors-purple-purple-200: var(--color-util-colors-purple-purple-200); + --color-util-colors-purple-purple-300: var(--color-util-colors-purple-purple-300); + --color-util-colors-purple-purple-400: var(--color-util-colors-purple-purple-400); + --color-util-colors-purple-purple-500: var(--color-util-colors-purple-purple-500); + --color-util-colors-purple-purple-600: var(--color-util-colors-purple-purple-600); + --color-util-colors-purple-purple-700: var(--color-util-colors-purple-purple-700); + + --color-util-colors-indigo-indigo-50: var(--color-util-colors-indigo-indigo-50); + --color-util-colors-indigo-indigo-100: var(--color-util-colors-indigo-indigo-100); + --color-util-colors-indigo-indigo-200: var(--color-util-colors-indigo-indigo-200); + --color-util-colors-indigo-indigo-300: var(--color-util-colors-indigo-indigo-300); + --color-util-colors-indigo-indigo-400: var(--color-util-colors-indigo-indigo-400); + --color-util-colors-indigo-indigo-500: var(--color-util-colors-indigo-indigo-500); + --color-util-colors-indigo-indigo-600: var(--color-util-colors-indigo-indigo-600); + --color-util-colors-indigo-indigo-700: var(--color-util-colors-indigo-indigo-700); + + --color-util-colors-blue-blue-50: var(--color-util-colors-blue-blue-50); + --color-util-colors-blue-blue-100: var(--color-util-colors-blue-blue-100); + --color-util-colors-blue-blue-200: var(--color-util-colors-blue-blue-200); + --color-util-colors-blue-blue-300: var(--color-util-colors-blue-blue-300); + --color-util-colors-blue-blue-400: var(--color-util-colors-blue-blue-400); + --color-util-colors-blue-blue-500: var(--color-util-colors-blue-blue-500); + --color-util-colors-blue-blue-600: var(--color-util-colors-blue-blue-600); + --color-util-colors-blue-blue-700: var(--color-util-colors-blue-blue-700); + + --color-util-colors-blue-light-blue-light-50: var(--color-util-colors-blue-light-blue-light-50); + --color-util-colors-blue-light-blue-light-100: var(--color-util-colors-blue-light-blue-light-100); + --color-util-colors-blue-light-blue-light-200: var(--color-util-colors-blue-light-blue-light-200); + --color-util-colors-blue-light-blue-light-300: var(--color-util-colors-blue-light-blue-light-300); + --color-util-colors-blue-light-blue-light-400: var(--color-util-colors-blue-light-blue-light-400); + --color-util-colors-blue-light-blue-light-500: var(--color-util-colors-blue-light-blue-light-500); + --color-util-colors-blue-light-blue-light-600: var(--color-util-colors-blue-light-blue-light-600); + --color-util-colors-blue-light-blue-light-700: var(--color-util-colors-blue-light-blue-light-700); + + --color-util-colors-gray-blue-gray-blue-50: var(--color-util-colors-gray-blue-gray-blue-50); + --color-util-colors-gray-blue-gray-blue-100: var(--color-util-colors-gray-blue-gray-blue-100); + --color-util-colors-gray-blue-gray-blue-200: var(--color-util-colors-gray-blue-gray-blue-200); + --color-util-colors-gray-blue-gray-blue-300: var(--color-util-colors-gray-blue-gray-blue-300); + --color-util-colors-gray-blue-gray-blue-400: var(--color-util-colors-gray-blue-gray-blue-400); + --color-util-colors-gray-blue-gray-blue-500: var(--color-util-colors-gray-blue-gray-blue-500); + --color-util-colors-gray-blue-gray-blue-600: var(--color-util-colors-gray-blue-gray-blue-600); + --color-util-colors-gray-blue-gray-blue-700: var(--color-util-colors-gray-blue-gray-blue-700); + + --color-util-colors-blue-brand-blue-brand-50: var(--color-util-colors-blue-brand-blue-brand-50); + --color-util-colors-blue-brand-blue-brand-100: var(--color-util-colors-blue-brand-blue-brand-100); + --color-util-colors-blue-brand-blue-brand-200: var(--color-util-colors-blue-brand-blue-brand-200); + --color-util-colors-blue-brand-blue-brand-300: var(--color-util-colors-blue-brand-blue-brand-300); + --color-util-colors-blue-brand-blue-brand-400: var(--color-util-colors-blue-brand-blue-brand-400); + --color-util-colors-blue-brand-blue-brand-500: var(--color-util-colors-blue-brand-blue-brand-500); + --color-util-colors-blue-brand-blue-brand-600: var(--color-util-colors-blue-brand-blue-brand-600); + --color-util-colors-blue-brand-blue-brand-700: var(--color-util-colors-blue-brand-blue-brand-700); + + --color-util-colors-red-red-50: var(--color-util-colors-red-red-50); + --color-util-colors-red-red-100: var(--color-util-colors-red-red-100); + --color-util-colors-red-red-200: var(--color-util-colors-red-red-200); + --color-util-colors-red-red-300: var(--color-util-colors-red-red-300); + --color-util-colors-red-red-400: var(--color-util-colors-red-red-400); + --color-util-colors-red-red-500: var(--color-util-colors-red-red-500); + --color-util-colors-red-red-600: var(--color-util-colors-red-red-600); + --color-util-colors-red-red-700: var(--color-util-colors-red-red-700); + + --color-util-colors-green-green-50: var(--color-util-colors-green-green-50); + --color-util-colors-green-green-100: var(--color-util-colors-green-green-100); + --color-util-colors-green-green-200: var(--color-util-colors-green-green-200); + --color-util-colors-green-green-300: var(--color-util-colors-green-green-300); + --color-util-colors-green-green-400: var(--color-util-colors-green-green-400); + --color-util-colors-green-green-500: var(--color-util-colors-green-green-500); + --color-util-colors-green-green-600: var(--color-util-colors-green-green-600); + --color-util-colors-green-green-700: var(--color-util-colors-green-green-700); + + --color-util-colors-warning-warning-50: var(--color-util-colors-warning-warning-50); + --color-util-colors-warning-warning-100: var(--color-util-colors-warning-warning-100); + --color-util-colors-warning-warning-200: var(--color-util-colors-warning-warning-200); + --color-util-colors-warning-warning-300: var(--color-util-colors-warning-warning-300); + --color-util-colors-warning-warning-400: var(--color-util-colors-warning-warning-400); + --color-util-colors-warning-warning-500: var(--color-util-colors-warning-warning-500); + --color-util-colors-warning-warning-600: var(--color-util-colors-warning-warning-600); + --color-util-colors-warning-warning-700: var(--color-util-colors-warning-warning-700); + + --color-util-colors-yellow-yellow-50: var(--color-util-colors-yellow-yellow-50); + --color-util-colors-yellow-yellow-100: var(--color-util-colors-yellow-yellow-100); + --color-util-colors-yellow-yellow-200: var(--color-util-colors-yellow-yellow-200); + --color-util-colors-yellow-yellow-300: var(--color-util-colors-yellow-yellow-300); + --color-util-colors-yellow-yellow-400: var(--color-util-colors-yellow-yellow-400); + --color-util-colors-yellow-yellow-500: var(--color-util-colors-yellow-yellow-500); + --color-util-colors-yellow-yellow-600: var(--color-util-colors-yellow-yellow-600); + --color-util-colors-yellow-yellow-700: var(--color-util-colors-yellow-yellow-700); + + --color-util-colors-teal-teal-50: var(--color-util-colors-teal-teal-50); + --color-util-colors-teal-teal-100: var(--color-util-colors-teal-teal-100); + --color-util-colors-teal-teal-200: var(--color-util-colors-teal-teal-200); + --color-util-colors-teal-teal-300: var(--color-util-colors-teal-teal-300); + --color-util-colors-teal-teal-400: var(--color-util-colors-teal-teal-400); + --color-util-colors-teal-teal-500: var(--color-util-colors-teal-teal-500); + --color-util-colors-teal-teal-600: var(--color-util-colors-teal-teal-600); + --color-util-colors-teal-teal-700: var(--color-util-colors-teal-teal-700); + + --color-util-colors-cyan-cyan-50: var(--color-util-colors-cyan-cyan-50); + --color-util-colors-cyan-cyan-100: var(--color-util-colors-cyan-cyan-100); + --color-util-colors-cyan-cyan-200: var(--color-util-colors-cyan-cyan-200); + --color-util-colors-cyan-cyan-300: var(--color-util-colors-cyan-cyan-300); + --color-util-colors-cyan-cyan-400: var(--color-util-colors-cyan-cyan-400); + --color-util-colors-cyan-cyan-500: var(--color-util-colors-cyan-cyan-500); + --color-util-colors-cyan-cyan-600: var(--color-util-colors-cyan-cyan-600); + --color-util-colors-cyan-cyan-700: var(--color-util-colors-cyan-cyan-700); + + --color-util-colors-violet-violet-50: var(--color-util-colors-violet-violet-50); + --color-util-colors-violet-violet-100: var(--color-util-colors-violet-violet-100); + --color-util-colors-violet-violet-200: var(--color-util-colors-violet-violet-200); + --color-util-colors-violet-violet-300: var(--color-util-colors-violet-violet-300); + --color-util-colors-violet-violet-400: var(--color-util-colors-violet-violet-400); + --color-util-colors-violet-violet-500: var(--color-util-colors-violet-violet-500); + --color-util-colors-violet-violet-600: var(--color-util-colors-violet-violet-600); + --color-util-colors-violet-violet-700: var(--color-util-colors-violet-violet-700); + + --color-util-colors-gray-gray-50: var(--color-util-colors-gray-gray-50); + --color-util-colors-gray-gray-100: var(--color-util-colors-gray-gray-100); + --color-util-colors-gray-gray-200: var(--color-util-colors-gray-gray-200); + --color-util-colors-gray-gray-300: var(--color-util-colors-gray-gray-300); + --color-util-colors-gray-gray-400: var(--color-util-colors-gray-gray-400); + --color-util-colors-gray-gray-500: var(--color-util-colors-gray-gray-500); + --color-util-colors-gray-gray-600: var(--color-util-colors-gray-gray-600); + --color-util-colors-gray-gray-700: var(--color-util-colors-gray-gray-700); + + --color-util-colors-green-light-green-light-50: var(--color-util-colors-green-light-green-light-50); + --color-util-colors-green-light-green-light-100: var(--color-util-colors-green-light-green-light-100); + --color-util-colors-green-light-green-light-200: var(--color-util-colors-green-light-green-light-200); + --color-util-colors-green-light-green-light-300: var(--color-util-colors-green-light-green-light-300); + --color-util-colors-green-light-green-light-500: var(--color-util-colors-green-light-green-light-500); + --color-util-colors-green-light-green-light-400: var(--color-util-colors-green-light-green-light-400); + --color-util-colors-green-light-green-light-600: var(--color-util-colors-green-light-green-light-600); + --color-util-colors-green-light-green-light-700: var(--color-util-colors-green-light-green-light-700); + + --color-util-colors-rose-rose-50: var(--color-util-colors-rose-rose-50); + --color-util-colors-rose-rose-100: var(--color-util-colors-rose-rose-100); + --color-util-colors-rose-rose-200: var(--color-util-colors-rose-rose-200); + --color-util-colors-rose-rose-300: var(--color-util-colors-rose-rose-300); + --color-util-colors-rose-rose-400: var(--color-util-colors-rose-rose-400); + --color-util-colors-rose-rose-500: var(--color-util-colors-rose-rose-500); + --color-util-colors-rose-rose-600: var(--color-util-colors-rose-rose-600); + --color-util-colors-rose-rose-700: var(--color-util-colors-rose-rose-700); + + --color-util-colors-midnight-midnight-50: var(--color-util-colors-midnight-midnight-50); + --color-util-colors-midnight-midnight-100: var(--color-util-colors-midnight-midnight-100); + --color-util-colors-midnight-midnight-200: var(--color-util-colors-midnight-midnight-200); + --color-util-colors-midnight-midnight-300: var(--color-util-colors-midnight-midnight-300); + --color-util-colors-midnight-midnight-400: var(--color-util-colors-midnight-midnight-400); + --color-util-colors-midnight-midnight-500: var(--color-util-colors-midnight-midnight-500); + --color-util-colors-midnight-midnight-600: var(--color-util-colors-midnight-midnight-600); + --color-util-colors-midnight-midnight-700: var(--color-util-colors-midnight-midnight-700); + + --color-third-party-LangChain: var(--color-third-party-LangChain); + --color-third-party-Langfuse: var(--color-third-party-Langfuse); + --color-third-party-Github: var(--color-third-party-Github); + --color-third-party-Github-tertiary: var(--color-third-party-Github-tertiary); + --color-third-party-Github-secondary: var(--color-third-party-Github-secondary); + --color-third-party-model-bg-openai: var(--color-third-party-model-bg-openai); + --color-third-party-model-bg-anthropic: var(--color-third-party-model-bg-anthropic); + --color-third-party-model-bg-default: var(--color-third-party-model-bg-default); + + --color-third-party-aws: var(--color-third-party-aws); + --color-third-party-aws-alt: var(--color-third-party-aws-alt); + + --color-saas-background: var(--color-saas-background); + --color-saas-pricing-grid-bg: var(--color-saas-pricing-grid-bg); + --color-saas-dify-blue-static: var(--color-saas-dify-blue-static); + --color-saas-dify-blue-static-hover: var(--color-saas-dify-blue-static-hover); + --color-saas-dify-blue-accessible: var(--color-saas-dify-blue-accessible); + --color-saas-dify-blue-inverted: var(--color-saas-dify-blue-inverted); + --color-saas-dify-blue-inverted-dimmed: var(--color-saas-dify-blue-inverted-dimmed); + + --color-saas-background-inverted: var(--color-saas-background-inverted); + --color-saas-background-inverted-hover: var(--color-saas-background-inverted-hover); + + --color-dify-logo-blue: var(--color-dify-logo-blue); + --color-dify-logo-black: var(--color-dify-logo-black); + --color-dify-logo-outline-1: var(--color-dify-logo-outline-1); + --color-dify-logo-outline-2: var(--color-dify-logo-outline-2); + +} diff --git a/packages/dify-ui/tailwind.config.ts b/packages/dify-ui/tailwind.config.ts deleted file mode 100644 index bcf1731775..0000000000 --- a/packages/dify-ui/tailwind.config.ts +++ /dev/null @@ -1,23 +0,0 @@ -import type { Config } from 'tailwindcss' -import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons' -import difyUIPreset from './src/tailwind-preset' - -const config: Config = { - content: [ - './src/**/*.{js,ts,jsx,tsx,mdx}', - './.storybook/**/*.{js,ts,jsx,tsx,mdx}', - ], - presets: [difyUIPreset], - plugins: [ - iconsPlugin({ - collections: getIconCollections(['ri']), - extraProperties: { - width: '1rem', - height: '1rem', - display: 'block', - }, - }), - ], -} - -export default config diff --git a/packages/dify-ui/tsconfig.json b/packages/dify-ui/tsconfig.json index 514954c807..ae1a2b78dd 100644 --- a/packages/dify-ui/tsconfig.json +++ b/packages/dify-ui/tsconfig.json @@ -3,6 +3,6 @@ "compilerOptions": { "types": ["vite-plus/test/globals"] }, - "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts", "tailwind.config.ts"], + "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.ts"], "exclude": ["node_modules", "dist", "storybook-static", "coverage"] } diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx index bcfcb5cbe6..8f8313eb24 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx @@ -28,6 +28,21 @@ import { FormTypeEnum } from '../declarations' import { useLanguage } from '../hooks' import Input from './Input' +const radioGridColumnsClassNames: Record = { + 1: 'grid-cols-1', + 2: 'grid-cols-2', + 3: 'grid-cols-3', + 4: 'grid-cols-4', + 5: 'grid-cols-5', + 6: 'grid-cols-6', + 7: 'grid-cols-7', + 8: 'grid-cols-8', + 9: 'grid-cols-9', + 10: 'grid-cols-10', + 11: 'grid-cols-11', + 12: 'grid-cols-12', +} + type FormProps< CustomFormSchema extends Omit & { type: string } = never, > = { @@ -201,6 +216,7 @@ function Form< return null const disabled = isEditMode && (variable === '__model_type' || variable === '__model_name') + const gridColumnsClassName = radioGridColumnsClassNames[options.length] ?? 'grid-cols-1' return (
@@ -211,8 +227,7 @@ function Form< )} {tooltipContent}
- {/* eslint-disable-next-line tailwindcss/no-unknown-classes */} -
+
{options.filter((option) => { if (option.show_on.length) return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value) diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx index 8f62c27bb1..fead81fb19 100644 --- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx +++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx @@ -17,9 +17,6 @@ import Item from './class-item' const i18nPrefix = 'nodes.questionClassifiers' -// Layout constants -const HANDLE_SIDE_WIDTH = 3 // Width offset for drag handle spacing - type Props = { nodeId: string list: Topic[] @@ -107,7 +104,7 @@ const ClassList: FC = ({ {!collapsed && (
({ ...item }))} @@ -130,8 +127,7 @@ const ClassList: FC = ({