mirror of
https://mirror.skon.top/github.com/langgenius/dify.git
synced 2026-04-20 15:20:15 +08:00
feat(ui): scaffold @langgenius/dify-ui and migrate design tokens (#35256)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
yyh
GitHub
27
packages/dify-ui/AGENTS.md
Normal file
27
packages/dify-ui/AGENTS.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# @langgenius/dify-ui
|
||||
|
||||
This package provides shared design tokens (colors, shadows, typography), the `cn()` utility, and a Tailwind CSS preset consumed by `web/`.
|
||||
|
||||
## Border Radius: Figma Token → Tailwind Class Mapping
|
||||
|
||||
The Figma design system uses `--radius/*` tokens whose scale is **offset by one step** from Tailwind CSS v4 defaults. When translating Figma specs to code, always use this mapping — never use `radius-*` as a CSS class, and never extend `borderRadius` in the preset.
|
||||
|
||||
| Figma Token | Value | Tailwind Class |
|
||||
|---|---|---|
|
||||
| `--radius/2xs` | 2px | `rounded-xs` |
|
||||
| `--radius/xs` | 4px | `rounded-sm` |
|
||||
| `--radius/sm` | 6px | `rounded-md` |
|
||||
| `--radius/md` | 8px | `rounded-lg` |
|
||||
| `--radius/lg` | 10px | `rounded-[10px]` |
|
||||
| `--radius/xl` | 12px | `rounded-xl` |
|
||||
| `--radius/2xl` | 16px | `rounded-2xl` |
|
||||
| `--radius/3xl` | 20px | `rounded-[20px]` |
|
||||
| `--radius/6xl` | 28px | `rounded-[28px]` |
|
||||
| `--radius/full` | 999px | `rounded-full` |
|
||||
|
||||
### 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** 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]`.
|
||||
24
packages/dify-ui/package.json
Normal file
24
packages/dify-ui/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@langgenius/dify-ui",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./styles.css": "./src/styles/styles.css",
|
||||
"./tailwind-preset": {
|
||||
"import": "./src/tailwind-preset.ts",
|
||||
"types": "./src/tailwind-preset.ts"
|
||||
},
|
||||
"./cn": {
|
||||
"import": "./src/cn.ts",
|
||||
"types": "./src/cn.ts"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "catalog:",
|
||||
"tailwind-merge": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "catalog:"
|
||||
}
|
||||
}
|
||||
7
packages/dify-ui/src/cn.ts
Normal file
7
packages/dify-ui/src/cn.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { ClassValue } from 'clsx'
|
||||
import { clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
3
packages/dify-ui/src/styles/styles.css
Normal file
3
packages/dify-ui/src/styles/styles.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@import '../themes/light.css' layer(base);
|
||||
@import '../themes/dark.css' layer(base);
|
||||
@import './utilities.css';
|
||||
272
packages/dify-ui/src/styles/utilities.css
Normal file
272
packages/dify-ui/src/styles/utilities.css
Normal file
@@ -0,0 +1,272 @@
|
||||
@utility system-kbd {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-2xs-regular-uppercase {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@utility system-2xs-regular {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@utility system-2xs-medium {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@utility system-2xs-medium-uppercase {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@utility system-2xs-semibold-uppercase {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
@utility system-xs-regular {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-xs-regular-uppercase {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-xs-medium {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-xs-medium-uppercase {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-xs-semibold {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-xs-semibold-uppercase {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-sm-regular {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-sm-medium {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-sm-medium-uppercase {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-sm-semibold {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-sm-semibold-uppercase {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility system-md-regular {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility system-md-medium {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility system-md-semibold {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility system-md-semibold-uppercase {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility system-xl-medium {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@utility system-xl-semibold {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@utility code-xs-regular {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@utility code-sm-regular {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@utility code-sm-semibold {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@utility body-xs-regular {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility body-xs-medium {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility body-sm-regular {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility body-sm-medium {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility body-md-regular {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility body-md-medium {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility body-lg-regular {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility body-2xl-regular {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@utility title-xs-semi-bold {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility title-sm-semi-bold {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@utility title-md-semi-bold {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@utility title-lg-bold {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@utility title-xl-semi-bold {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@utility title-2xl-semi-bold {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@utility title-3xl-semi-bold {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@utility title-3xl-bold {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@utility title-4xl-semi-bold {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@utility title-5xl-bold {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
87
packages/dify-ui/src/tailwind-preset.ts
Normal file
87
packages/dify-ui/src/tailwind-preset.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
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
|
||||
827
packages/dify-ui/src/themes/dark.css
Normal file
827
packages/dify-ui/src/themes/dark.css
Normal file
@@ -0,0 +1,827 @@
|
||||
/* Attention: Generate by code. Don't update by hand!!! */
|
||||
html[data-theme="dark"] {
|
||||
--color-components-input-bg-normal: rgb(255 255 255 / 0.08);
|
||||
--color-components-input-text-placeholder: rgb(200 206 218 / 0.3);
|
||||
--color-components-input-bg-hover: rgb(255 255 255 / 0.03);
|
||||
--color-components-input-bg-active: rgb(255 255 255 / 0.05);
|
||||
--color-components-input-border-active: #747481;
|
||||
--color-components-input-border-destructive: #f97066;
|
||||
|
||||
/* Sticky header / Monaco editor sticky scroll colors (dark mode) */
|
||||
/* Use solid panel background to ensure visibility when elements become sticky */
|
||||
--color-components-sticky-header-bg: var(--color-components-panel-bg);
|
||||
--color-components-sticky-header-bg-hover: var(--color-components-panel-on-panel-item-bg-hover);
|
||||
--color-components-sticky-header-border: var(--color-components-panel-border);
|
||||
|
||||
/* Override Monaco/VSCode CSS variables for sticky scroll so the sticky header is opaque */
|
||||
--vscode-editorStickyScroll-background: var(--color-components-sticky-header-bg);
|
||||
--vscode-editorStickyScrollHover-background: var(--color-components-sticky-header-bg-hover);
|
||||
--vscode-editorStickyScroll-border: var(--color-components-sticky-header-border);
|
||||
--vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0.6);
|
||||
--color-components-input-text-filled: #f4f4f5;
|
||||
--color-components-input-bg-destructive: rgb(255 255 255 / 0.01);
|
||||
--color-components-input-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
--color-components-input-text-disabled: rgb(200 206 218 / 0.3);
|
||||
--color-components-input-text-filled-disabled: rgb(200 206 218 / 0.6);
|
||||
--color-components-input-border-hover: #3a3a40;
|
||||
--color-components-input-border-active-prompt-1: #36bffa;
|
||||
--color-components-input-border-active-prompt-2: #296dff;
|
||||
|
||||
--color-components-kbd-bg-gray: rgb(255 255 255 / 0.03);
|
||||
--color-components-kbd-bg-white: rgb(255 255 255 / 0.12);
|
||||
|
||||
--color-components-tooltip-bg: rgb(24 24 27 / 0.95);
|
||||
|
||||
--color-components-button-primary-text: rgb(255 255 255 / 0.95);
|
||||
--color-components-button-primary-bg: #155aef;
|
||||
--color-components-button-primary-border: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-primary-bg-hover: #296dff;
|
||||
--color-components-button-primary-border-hover: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-primary-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
--color-components-button-primary-border-disabled: rgb(255 255 255 / 0.08);
|
||||
--color-components-button-primary-text-disabled: rgb(255 255 255 / 0.2);
|
||||
|
||||
--color-components-button-secondary-text: rgb(255 255 255 / 0.8);
|
||||
--color-components-button-secondary-text-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-secondary-bg: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-secondary-bg-hover: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-secondary-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
--color-components-button-secondary-border: rgb(255 255 255 / 0.08);
|
||||
--color-components-button-secondary-border-hover: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-secondary-border-disabled: rgb(255 255 255 / 0.05);
|
||||
|
||||
--color-components-button-tertiary-text: #d9d9de;
|
||||
--color-components-button-tertiary-text-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-tertiary-bg: rgb(255 255 255 / 0.08);
|
||||
--color-components-button-tertiary-bg-hover: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-tertiary-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
|
||||
--color-components-button-ghost-text: #d9d9de;
|
||||
--color-components-button-ghost-text-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-ghost-bg-hover: rgb(200 206 218 / 0.08);
|
||||
|
||||
--color-components-button-destructive-primary-text: rgb(255 255 255 / 0.95);
|
||||
--color-components-button-destructive-primary-text-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-destructive-primary-bg: #d92d20;
|
||||
--color-components-button-destructive-primary-bg-hover: #f04438;
|
||||
--color-components-button-destructive-primary-bg-disabled: rgb(240 68 56 / 0.14);
|
||||
--color-components-button-destructive-primary-border: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-destructive-primary-border-hover: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-destructive-primary-border-disabled: rgb(255 255 255 / 0.08);
|
||||
|
||||
--color-components-button-destructive-secondary-text: #f97066;
|
||||
--color-components-button-destructive-secondary-text-disabled: rgb(240 68 56 / 0.2);
|
||||
--color-components-button-destructive-secondary-bg: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-destructive-secondary-bg-hover: rgb(240 68 56 / 0.14);
|
||||
--color-components-button-destructive-secondary-bg-disabled: rgb(240 68 56 / 0.08);
|
||||
--color-components-button-destructive-secondary-border: rgb(255 255 255 / 0.08);
|
||||
--color-components-button-destructive-secondary-border-hover: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-destructive-secondary-border-disabled: rgb(240 68 56 / 0.08);
|
||||
|
||||
--color-components-button-destructive-tertiary-text: #f97066;
|
||||
--color-components-button-destructive-tertiary-text-disabled: rgb(240 68 56 / 0.2);
|
||||
--color-components-button-destructive-tertiary-bg: rgb(240 68 56 / 0.14);
|
||||
--color-components-button-destructive-tertiary-bg-hover: rgb(240 68 56 / 0.25);
|
||||
--color-components-button-destructive-tertiary-bg-disabled: rgb(240 68 56 / 0.08);
|
||||
|
||||
--color-components-button-destructive-ghost-text: #f97066;
|
||||
--color-components-button-destructive-ghost-text-disabled: rgb(240 68 56 / 0.2);
|
||||
--color-components-button-destructive-ghost-bg-hover: rgb(240 68 56 / 0.14);
|
||||
|
||||
--color-components-button-secondary-accent-text: rgb(255 255 255 / 0.8);
|
||||
--color-components-button-secondary-accent-text-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-secondary-accent-bg: rgb(255 255 255 / 0.05);
|
||||
--color-components-button-secondary-accent-bg-hover: rgb(255 255 255 / 0.08);
|
||||
--color-components-button-secondary-accent-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
--color-components-button-secondary-accent-border: rgb(255 255 255 / 0.08);
|
||||
--color-components-button-secondary-accent-border-hover: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-secondary-accent-border-disabled: rgb(255 255 255 / 0.05);
|
||||
|
||||
--color-components-button-indigo-bg: #444ce7;
|
||||
--color-components-button-indigo-bg-hover: #6172f3;
|
||||
--color-components-button-indigo-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
|
||||
--color-components-button-debug-text: rgb(255 255 255 / 0.95);
|
||||
--color-components-button-debug-text-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-debug-bg: #ff4405;
|
||||
--color-components-button-debug-bg-hover: #ff692e;
|
||||
--color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.08);
|
||||
--color-components-button-debug-border: rgb(255 255 255 / 0.12);
|
||||
--color-components-button-debug-border-hover: rgb(255 255 255 / 0.2);
|
||||
--color-components-button-debug-border-disabled: rgb(255 255 255 / 0.08);
|
||||
|
||||
--color-components-button-button-seam: rgb(0 0 0 / 0.15);
|
||||
|
||||
--color-components-checkbox-icon: rgb(255 255 255 / 0.95);
|
||||
--color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-checkbox-bg: #296dff;
|
||||
--color-components-checkbox-bg-hover: #5289ff;
|
||||
--color-components-checkbox-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
--color-components-checkbox-border: rgb(255 255 255 / 0.4);
|
||||
--color-components-checkbox-border-hover: rgb(255 255 255 / 0.6);
|
||||
--color-components-checkbox-border-disabled: rgb(255 255 255 / 0.01);
|
||||
--color-components-checkbox-bg-unchecked: rgb(255 255 255 / 0.03);
|
||||
--color-components-checkbox-bg-unchecked-hover: rgb(255 255 255 / 0.05);
|
||||
--color-components-checkbox-bg-disabled-checked: rgb(21 90 239 / 0.2);
|
||||
|
||||
--color-components-radio-border-checked: #296dff;
|
||||
--color-components-radio-border-checked-hover: #5289ff;
|
||||
--color-components-radio-border-checked-disabled: rgb(21 90 239 / 0.2);
|
||||
--color-components-radio-bg-disabled: rgb(255 255 255 / 0.03);
|
||||
--color-components-radio-border: rgb(255 255 255 / 0.4);
|
||||
--color-components-radio-border-hover: rgb(255 255 255 / 0.6);
|
||||
--color-components-radio-border-disabled: rgb(255 255 255 / 0.01);
|
||||
--color-components-radio-bg: rgb(255 255 255 / 0);
|
||||
--color-components-radio-bg-hover: rgb(255 255 255 / 0.05);
|
||||
|
||||
--color-components-toggle-knob: #f4f4f5;
|
||||
--color-components-toggle-knob-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-toggle-bg: #296dff;
|
||||
--color-components-toggle-bg-hover: #5289ff;
|
||||
--color-components-toggle-bg-disabled: rgb(255 255 255 / 0.08);
|
||||
--color-components-toggle-bg-unchecked: rgb(255 255 255 / 0.2);
|
||||
--color-components-toggle-bg-unchecked-hover: rgb(255 255 255 / 0.3);
|
||||
--color-components-toggle-bg-unchecked-disabled: rgb(255 255 255 / 0.08);
|
||||
--color-components-toggle-knob-hover: #fefefe;
|
||||
|
||||
--color-components-card-bg: #222225;
|
||||
--color-components-card-border: rgb(255 255 255 / 0.03);
|
||||
--color-components-card-bg-alt: #27272b;
|
||||
--color-components-card-bg-transparent: rgb(34 34 37 / 0);
|
||||
--color-components-card-bg-alt-transparent: rgb(39 39 43 / 0);
|
||||
|
||||
--color-components-menu-item-text: rgb(200 206 218 / 0.6);
|
||||
--color-components-menu-item-text-active: rgb(255 255 255 / 0.95);
|
||||
--color-components-menu-item-text-hover: rgb(200 206 218 / 0.8);
|
||||
--color-components-menu-item-text-active-accent: rgb(255 255 255 / 0.95);
|
||||
--color-components-menu-item-bg-active: rgb(200 206 218 / 0.14);
|
||||
--color-components-menu-item-bg-hover: rgb(200 206 218 / 0.08);
|
||||
|
||||
--color-components-panel-bg: #222225;
|
||||
--color-components-panel-bg-blur: rgb(44 44 48 / 0.95);
|
||||
--color-components-panel-border: rgb(200 206 218 / 0.14);
|
||||
--color-components-panel-border-subtle: rgb(200 206 218 / 0.08);
|
||||
--color-components-panel-gradient-2: #222225;
|
||||
--color-components-panel-gradient-1: #27272b;
|
||||
--color-components-panel-bg-alt: #222225;
|
||||
--color-components-panel-on-panel-item-bg: #27272b;
|
||||
--color-components-panel-on-panel-item-bg-hover: #3a3a40;
|
||||
--color-components-panel-on-panel-item-bg-alt: #3a3a40;
|
||||
--color-components-panel-on-panel-item-bg-transparent: rgb(44 44 48 / 0.95);
|
||||
--color-components-panel-on-panel-item-bg-hover-transparent: rgb(58 58 64 / 0);
|
||||
--color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(255 251 250 / 0);
|
||||
|
||||
--color-components-panel-bg-transparent: rgb(34 34 37 / 0);
|
||||
--color-components-panel-bg-blur-burn: rgb(31 31 35 / 0.9);
|
||||
|
||||
--color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6);
|
||||
--color-components-main-nav-nav-button-text-active: #f4f4f5;
|
||||
--color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0);
|
||||
--color-components-main-nav-nav-button-bg-active: rgb(200 206 218 / 0.14);
|
||||
--color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.08);
|
||||
--color-components-main-nav-nav-button-bg-hover: rgb(200 206 218 / 0.04);
|
||||
|
||||
--color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05);
|
||||
|
||||
--color-components-main-nav-text: #a8a8b3;
|
||||
--color-components-main-nav-text-active: #ffffff;
|
||||
--color-components-main-nav-glass-edge-highlight-first: rgb(196 207 255 / 0.15);
|
||||
--color-components-main-nav-glass-edge-highlight-middle: rgb(72 108 255 / 0);
|
||||
--color-components-main-nav-glass-edge-highlight-end: rgb(196 207 255 / 0.05);
|
||||
|
||||
--color-components-main-nav-glass-edge-reflection-first: rgb(92 124 255 / 0);
|
||||
--color-components-main-nav-glass-edge-reflection-middle: rgb(210 219 255 / 0.8);
|
||||
--color-components-main-nav-glass-edge-reflection-end: rgb(92 124 255 / 0);
|
||||
|
||||
--color-components-main-nav-glass-surface-first: rgb(196 207 255 / 0.08);
|
||||
--color-components-main-nav-glass-surface-middle-1: rgb(210 219 255 / 0.12);
|
||||
--color-components-main-nav-glass-surface-middle-2: rgb(210 219 255 / 0.1);
|
||||
--color-components-main-nav-glass-surface-end: rgb(196 207 255 / 0.08);
|
||||
|
||||
--color-components-main-nav-glass-inner-glow: rgb(210 219 255 / 0.05);
|
||||
--color-components-main-nav-glass-shadow-reflection: rgb(210 219 255 / 0.04);
|
||||
--color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0.02);
|
||||
--color-components-main-nav-glass-text-glow: rgb(245 246 255 / 0.27);
|
||||
|
||||
--color-components-slider-knob: #f4f4f5;
|
||||
--color-components-slider-knob-hover: #fefefe;
|
||||
--color-components-slider-knob-disabled: rgb(255 255 255 / 0.2);
|
||||
--color-components-slider-range: #296dff;
|
||||
--color-components-slider-track: rgb(255 255 255 / 0.2);
|
||||
--color-components-slider-knob-border-hover: rgb(16 24 40 / 0.3);
|
||||
--color-components-slider-knob-border: rgb(16 24 40 / 0.2);
|
||||
|
||||
--color-components-segmented-control-item-active-bg: rgb(255 255 255 / 0.08);
|
||||
--color-components-segmented-control-item-active-border: rgb(200 206 218 / 0.08);
|
||||
--color-components-segmented-control-bg-normal: rgb(24 24 27 / 0.7);
|
||||
--color-components-segmented-control-item-active-accent-bg: rgb(21 90 239 / 0.2);
|
||||
--color-components-segmented-control-item-active-accent-border: rgb(21 90 239 / 0.3);
|
||||
|
||||
--color-components-option-card-option-bg: rgb(200 206 218 / 0.04);
|
||||
--color-components-option-card-option-selected-bg: rgb(255 255 255 / 0.05);
|
||||
--color-components-option-card-option-selected-border: #5289ff;
|
||||
--color-components-option-card-option-border: rgb(200 206 218 / 0.2);
|
||||
--color-components-option-card-option-bg-hover: rgb(200 206 218 / 0.14);
|
||||
--color-components-option-card-option-border-hover: rgb(200 206 218 / 0.3);
|
||||
|
||||
--color-components-tab-active: #296dff;
|
||||
|
||||
--color-components-badge-white-to-dark: rgb(24 24 27 / 0.8);
|
||||
--color-components-badge-status-light-success-bg: #17b26a;
|
||||
--color-components-badge-status-light-success-border-inner: #47cd89;
|
||||
--color-components-badge-status-light-success-halo: rgb(23 178 106 / 0.3);
|
||||
|
||||
--color-components-badge-status-light-border-outer: #222225;
|
||||
--color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3);
|
||||
--color-components-badge-status-light-warning-bg: #f79009;
|
||||
--color-components-badge-status-light-warning-border-inner: #fdb022;
|
||||
--color-components-badge-status-light-warning-halo: rgb(247 144 9 / 0.3);
|
||||
|
||||
--color-components-badge-status-light-error-bg: #f04438;
|
||||
--color-components-badge-status-light-error-border-inner: #f97066;
|
||||
--color-components-badge-status-light-error-halo: rgb(240 68 56 / 0.3);
|
||||
|
||||
--color-components-badge-status-light-normal-bg: #0ba5ec;
|
||||
--color-components-badge-status-light-normal-border-inner: #36bffa;
|
||||
--color-components-badge-status-light-normal-halo: rgb(11 165 236 / 0.3);
|
||||
|
||||
--color-components-badge-status-light-disabled-bg: #676f83;
|
||||
--color-components-badge-status-light-disabled-border-inner: #98a2b2;
|
||||
--color-components-badge-status-light-disabled-halo: rgb(200 206 218 / 0.08);
|
||||
|
||||
--color-components-badge-bg-green-soft: rgb(23 178 106 / 0.14);
|
||||
--color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.14);
|
||||
--color-components-badge-bg-red-soft: rgb(240 68 56 / 0.14);
|
||||
--color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.14);
|
||||
--color-components-badge-bg-gray-soft: rgb(200 206 218 / 0.08);
|
||||
--color-components-badge-bg-dimm: rgb(255 255 255 / 0.03);
|
||||
|
||||
--color-components-chart-line: #5289ff;
|
||||
--color-components-chart-area-1: rgb(21 90 239 / 0.2);
|
||||
--color-components-chart-area-2: rgb(21 90 239 / 0.04);
|
||||
--color-components-chart-current-1: #5289ff;
|
||||
--color-components-chart-current-2: rgb(21 90 239 / 0.3);
|
||||
--color-components-chart-bg: rgb(24 24 27 / 0.95);
|
||||
|
||||
--color-components-actionbar-bg: #222225;
|
||||
--color-components-actionbar-border: rgb(200 206 218 / 0.08);
|
||||
--color-components-actionbar-bg-accent: #27272b;
|
||||
--color-components-actionbar-border-accent: #5289ff;
|
||||
|
||||
--color-components-dropzone-bg-alt: rgb(24 24 27 / 0.8);
|
||||
--color-components-dropzone-bg: rgb(24 24 27 / 0.4);
|
||||
--color-components-dropzone-bg-accent: rgb(21 90 239 / 0.2);
|
||||
--color-components-dropzone-border: rgb(200 206 218 / 0.14);
|
||||
--color-components-dropzone-border-alt: rgb(200 206 218 / 0.2);
|
||||
--color-components-dropzone-border-accent: #84abff;
|
||||
|
||||
--color-components-progress-brand-progress: #5289ff;
|
||||
--color-components-progress-brand-border: #5289ff;
|
||||
--color-components-progress-brand-bg: rgb(21 90 239 / 0.04);
|
||||
|
||||
--color-components-progress-white-progress: #ffffff;
|
||||
--color-components-progress-white-border: rgb(255 255 255 / 0.95);
|
||||
--color-components-progress-white-bg: rgb(255 255 255 / 0.01);
|
||||
|
||||
--color-components-progress-gray-progress: #98a2b2;
|
||||
--color-components-progress-gray-border: #98a2b2;
|
||||
--color-components-progress-gray-bg: rgb(200 206 218 / 0.02);
|
||||
|
||||
--color-components-progress-warning-progress: #fdb022;
|
||||
--color-components-progress-warning-border: #fdb022;
|
||||
--color-components-progress-warning-bg: rgb(247 144 9 / 0.04);
|
||||
|
||||
--color-components-progress-error-progress: #f97066;
|
||||
--color-components-progress-error-border: #f97066;
|
||||
--color-components-progress-error-bg: rgb(240 68 56 / 0.04);
|
||||
|
||||
--color-components-chat-input-audio-bg: rgb(21 90 239 / 0.2);
|
||||
--color-components-chat-input-audio-wave-default: rgb(200 206 218 / 0.14);
|
||||
--color-components-chat-input-bg-mask-1: rgb(24 24 27 / 0.04);
|
||||
--color-components-chat-input-bg-mask-2: rgb(24 24 27 / 0.6);
|
||||
--color-components-chat-input-border: rgb(200 206 218 / 0.2);
|
||||
--color-components-chat-input-audio-wave-active: #84abff;
|
||||
--color-components-chat-input-audio-bg-alt: rgb(24 24 27 / 0.9);
|
||||
|
||||
--color-components-avatar-shape-fill-stop-0: rgb(255 255 255 / 0.95);
|
||||
--color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.8);
|
||||
|
||||
--color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.2);
|
||||
--color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.03);
|
||||
|
||||
--color-components-avatar-default-avatar-bg: #222225;
|
||||
--color-components-avatar-mask-darkmode-dimmed: rgb(0 0 0 / 0.12);
|
||||
|
||||
--color-components-label-gray: rgb(200 206 218 / 0.14);
|
||||
|
||||
--color-components-premium-badge-blue-bg-stop-0: #5289ff;
|
||||
--color-components-premium-badge-blue-bg-stop-100: #296dff;
|
||||
--color-components-premium-badge-blue-stroke-stop-0: rgb(255 255 255 / 0.2);
|
||||
--color-components-premium-badge-blue-stroke-stop-100: #296dff;
|
||||
--color-components-premium-badge-blue-text-stop-0: #eff4ff;
|
||||
--color-components-premium-badge-blue-text-stop-100: #b2caff;
|
||||
--color-components-premium-badge-blue-glow: #004aeb;
|
||||
--color-components-premium-badge-blue-bg-stop-0-hover: #84abff;
|
||||
--color-components-premium-badge-blue-bg-stop-100-hover: #004aeb;
|
||||
--color-components-premium-badge-blue-glow-hover: #d1e0ff;
|
||||
--color-components-premium-badge-blue-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
|
||||
--color-components-premium-badge-blue-stroke-stop-100-hover: #296dff;
|
||||
|
||||
--color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12);
|
||||
--color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.2);
|
||||
--color-components-premium-badge-indigo-bg-stop-0: #6172f3;
|
||||
--color-components-premium-badge-indigo-bg-stop-100: #3538cd;
|
||||
--color-components-premium-badge-indigo-stroke-stop-0: rgb(255 255 255 / 0.2);
|
||||
--color-components-premium-badge-indigo-stroke-stop-100: #444ce7;
|
||||
--color-components-premium-badge-indigo-text-stop-0: #eef4ff;
|
||||
--color-components-premium-badge-indigo-text-stop-100: #c7d7fe;
|
||||
--color-components-premium-badge-indigo-glow: #3538cd;
|
||||
--color-components-premium-badge-indigo-glow-hover: #e0eaff;
|
||||
--color-components-premium-badge-indigo-bg-stop-0-hover: #a4bcfd;
|
||||
--color-components-premium-badge-indigo-bg-stop-100-hover: #3538cd;
|
||||
--color-components-premium-badge-indigo-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
|
||||
--color-components-premium-badge-indigo-stroke-stop-100-hover: #444ce7;
|
||||
|
||||
--color-components-premium-badge-grey-bg-stop-0: #676f83;
|
||||
--color-components-premium-badge-grey-bg-stop-100: #495464;
|
||||
--color-components-premium-badge-grey-stroke-stop-0: rgb(255 255 255 / 0.12);
|
||||
--color-components-premium-badge-grey-stroke-stop-100: #495464;
|
||||
--color-components-premium-badge-grey-text-stop-0: #f9fafb;
|
||||
--color-components-premium-badge-grey-text-stop-100: #e9ebf0;
|
||||
--color-components-premium-badge-grey-glow: #354052;
|
||||
--color-components-premium-badge-grey-glow-hover: #f2f4f7;
|
||||
--color-components-premium-badge-grey-bg-stop-0-hover: #98a2b2;
|
||||
--color-components-premium-badge-grey-bg-stop-100-hover: #354052;
|
||||
--color-components-premium-badge-grey-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
|
||||
--color-components-premium-badge-grey-stroke-stop-100-hover: #676f83;
|
||||
|
||||
--color-components-premium-badge-orange-bg-stop-0: #ff692e;
|
||||
--color-components-premium-badge-orange-bg-stop-100: #e04f16;
|
||||
--color-components-premium-badge-orange-stroke-stop-0: rgb(255 255 255 / 0.2);
|
||||
--color-components-premium-badge-orange-stroke-stop-100: #ff4405;
|
||||
--color-components-premium-badge-orange-text-stop-0: #fef6ee;
|
||||
--color-components-premium-badge-orange-text-stop-100: #f9dbaf;
|
||||
--color-components-premium-badge-orange-glow: #b93815;
|
||||
--color-components-premium-badge-orange-glow-hover: #fdead7;
|
||||
--color-components-premium-badge-orange-bg-stop-0-hover: #ff692e;
|
||||
--color-components-premium-badge-orange-bg-stop-100-hover: #b93815;
|
||||
--color-components-premium-badge-orange-stroke-stop-0-hover: rgb(255 255 255 / 0.5);
|
||||
--color-components-premium-badge-orange-stroke-stop-100-hover: #ff4405;
|
||||
|
||||
--color-components-progress-bar-bg: rgb(200 206 218 / 0.08);
|
||||
--color-components-progress-bar-progress: rgb(200 206 218 / 0.14);
|
||||
--color-components-progress-bar-border: rgb(255 255 255 / 0.03);
|
||||
--color-components-progress-bar-progress-solid: rgb(255 255 255 / 0.95);
|
||||
--color-components-progress-bar-progress-highlight: rgb(200 206 218 / 0.2);
|
||||
|
||||
--color-components-icon-bg-red-solid: #d92d20;
|
||||
--color-components-icon-bg-rose-solid: #e31b54;
|
||||
--color-components-icon-bg-pink-solid: #dd2590;
|
||||
--color-components-icon-bg-orange-dark-solid: #ff4405;
|
||||
--color-components-icon-bg-yellow-solid: #eaaa08;
|
||||
--color-components-icon-bg-green-solid: #4ca30d;
|
||||
--color-components-icon-bg-teal-solid: #0e9384;
|
||||
--color-components-icon-bg-blue-light-solid: #0ba5ec;
|
||||
--color-components-icon-bg-blue-solid: #155aef;
|
||||
--color-components-icon-bg-indigo-solid: #444ce7;
|
||||
--color-components-icon-bg-violet-solid: #7839ee;
|
||||
--color-components-icon-bg-midnight-solid: #5d698d;
|
||||
--color-components-icon-bg-rose-soft: rgb(246 61 104 / 0.2);
|
||||
--color-components-icon-bg-pink-soft: rgb(238 70 188 / 0.2);
|
||||
--color-components-icon-bg-orange-dark-soft: rgb(255 68 5 / 0.2);
|
||||
--color-components-icon-bg-yellow-soft: rgb(234 170 8 / 0.2);
|
||||
--color-components-icon-bg-green-soft: rgb(102 198 28 / 0.2);
|
||||
--color-components-icon-bg-teal-soft: rgb(21 183 158 / 0.2);
|
||||
--color-components-icon-bg-blue-light-soft: rgb(11 165 236 / 0.2);
|
||||
--color-components-icon-bg-blue-soft: rgb(21 90 239 / 0.2);
|
||||
--color-components-icon-bg-indigo-soft: rgb(97 114 243 / 0.2);
|
||||
--color-components-icon-bg-violet-soft: rgb(135 91 247 / 0.2);
|
||||
--color-components-icon-bg-midnight-soft: rgb(130 141 173 / 0.2);
|
||||
--color-components-icon-bg-red-soft: rgb(240 68 56 / 0.2);
|
||||
--color-components-icon-bg-orange-solid: #f79009;
|
||||
--color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2);
|
||||
|
||||
--color-components-marketplace-header-bg: rgb(31 31 35 / 0.9);
|
||||
|
||||
--color-text-primary: #fbfbfc;
|
||||
--color-text-secondary: #d9d9de;
|
||||
--color-text-tertiary: rgb(200 206 218 / 0.6);
|
||||
--color-text-quaternary: rgb(200 206 218 / 0.4);
|
||||
--color-text-destructive: #f97066;
|
||||
--color-text-success: #17b26a;
|
||||
--color-text-warning: #f79009;
|
||||
--color-text-destructive-secondary: #f97066;
|
||||
--color-text-success-secondary: #47cd89;
|
||||
--color-text-warning-secondary: #fdb022;
|
||||
--color-text-accent: #5289ff;
|
||||
--color-text-primary-on-surface: rgb(255 255 255 / 0.95);
|
||||
--color-text-placeholder: rgb(200 206 218 / 0.3);
|
||||
--color-text-disabled: rgb(200 206 218 / 0.3);
|
||||
--color-text-accent-secondary: #84abff;
|
||||
--color-text-accent-light-mode-only: #d9d9de;
|
||||
--color-text-text-selected: rgb(21 90 239 / 0.3);
|
||||
--color-text-secondary-on-surface: rgb(255 255 255 / 0.9);
|
||||
--color-text-logo-text: #e9e9ec;
|
||||
--color-text-empty-state-icon: rgb(200 206 218 / 0.3);
|
||||
--color-text-inverted: #ffffff;
|
||||
--color-text-inverted-dimmed: rgb(255 255 255 / 0.8);
|
||||
|
||||
--color-background-body: #1d1d20;
|
||||
--color-background-default-subtle: #222225;
|
||||
--color-background-neutral-subtle: #1d1d20;
|
||||
--color-background-sidenav-bg: rgb(39 39 42 / 0.92);
|
||||
--color-background-default: #222225;
|
||||
--color-background-soft: rgb(24 24 27 / 0.25);
|
||||
--color-background-gradient-bg-fill-chat-bg-1: #222225;
|
||||
--color-background-gradient-bg-fill-chat-bg-2: #1d1d20;
|
||||
--color-background-gradient-bg-fill-chat-bubble-bg-1: rgb(200 206 218 / 0.08);
|
||||
--color-background-gradient-bg-fill-chat-bubble-bg-2: rgb(200 206 218 / 0.02);
|
||||
--color-background-gradient-bg-fill-debug-bg-1: rgb(200 206 218 / 0.08);
|
||||
--color-background-gradient-bg-fill-debug-bg-2: rgb(24 24 27 / 0.04);
|
||||
|
||||
--color-background-gradient-mask-gray: rgb(24 24 27 / 0.08);
|
||||
--color-background-gradient-mask-transparent: rgb(0 0 0 / 0);
|
||||
--color-background-gradient-mask-input-clear-2: rgb(57 58 62 / 0);
|
||||
--color-background-gradient-mask-input-clear-1: #393a3e;
|
||||
--color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0);
|
||||
--color-background-gradient-mask-side-panel-2: rgb(24 24 27 / 0.9);
|
||||
--color-background-gradient-mask-side-panel-1: rgb(24 24 27 / 0.04);
|
||||
|
||||
--color-background-default-burn: #1d1d20;
|
||||
--color-background-overlay-fullscreen: rgb(39 39 42 / 0.97);
|
||||
--color-background-default-lighter: rgb(200 206 218 / 0.04);
|
||||
--color-background-section: rgb(24 24 27 / 0.4);
|
||||
--color-background-interaction-from-bg-1: rgb(24 24 27 / 0.4);
|
||||
--color-background-interaction-from-bg-2: rgb(24 24 27 / 0.14);
|
||||
--color-background-section-burn: rgb(24 24 27 / 0.6);
|
||||
--color-background-default-dodge: #3a3a40;
|
||||
--color-background-overlay: rgb(24 24 27 / 0.8);
|
||||
--color-background-default-dimmed: #27272b;
|
||||
--color-background-default-hover: #27272b;
|
||||
--color-background-overlay-alt: rgb(24 24 27 / 0.4);
|
||||
--color-background-surface-white: rgb(255 255 255 / 0.9);
|
||||
--color-background-overlay-destructive: rgb(240 68 56 / 0.3);
|
||||
--color-background-overlay-backdrop: rgb(24 24 27 / 0.95);
|
||||
--color-background-body-transparent: rgb(29 29 32 / 0);
|
||||
--color-background-section-burn-inverted: #27272b;
|
||||
--color-background-default-hover-alpha-0: rgb(39 39 43 / 0);
|
||||
|
||||
--color-shadow-shadow-1: rgb(0 0 0 / 0.05);
|
||||
--color-shadow-shadow-3: rgb(0 0 0 / 0.1);
|
||||
--color-shadow-shadow-4: rgb(0 0 0 / 0.12);
|
||||
--color-shadow-shadow-5: rgb(0 0 0 / 0.16);
|
||||
--color-shadow-shadow-6: rgb(0 0 0 / 0.2);
|
||||
--color-shadow-shadow-7: rgb(0 0 0 / 0.24);
|
||||
--color-shadow-shadow-8: rgb(0 0 0 / 0.28);
|
||||
--color-shadow-shadow-9: rgb(0 0 0 / 0.36);
|
||||
--color-shadow-shadow-2: rgb(0 0 0 / 0.08);
|
||||
--color-shadow-shadow-10: rgb(0 0 0 / 0.4);
|
||||
|
||||
--color-workflow-block-border: rgb(255 255 255 / 0.08);
|
||||
--color-workflow-block-parma-bg: rgb(255 255 255 / 0.05);
|
||||
--color-workflow-block-bg: #27272b;
|
||||
--color-workflow-block-bg-transparent: rgb(39 39 43 / 0.96);
|
||||
--color-workflow-block-border-highlight: rgb(200 206 218 / 0.2);
|
||||
--color-workflow-block-wrapper-bg-1: #27272b;
|
||||
--color-workflow-block-wrapper-bg-2: rgb(39 39 43 / 0.2);
|
||||
|
||||
--color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11);
|
||||
--color-workflow-canvas-workflow-bg: #1d1d20;
|
||||
--color-workflow-canvas-workflow-top-bar-1: rgb(29 29 32 / 0.9);
|
||||
--color-workflow-canvas-workflow-top-bar-2: rgb(29 29 32 / 0.08);
|
||||
--color-workflow-canvas-canvas-overlay: rgb(29 29 32 / 0.8);
|
||||
|
||||
--color-workflow-link-line-active: #5289ff;
|
||||
--color-workflow-link-line-normal: #676f83;
|
||||
--color-workflow-link-line-handle: #5289ff;
|
||||
--color-workflow-link-line-normal-transparent: rgb(103 111 131 / 0.2);
|
||||
--color-workflow-link-line-failure-active: #fdb022;
|
||||
--color-workflow-link-line-failure-handle: #fdb022;
|
||||
--color-workflow-link-line-failure-button-bg: #f79009;
|
||||
--color-workflow-link-line-failure-button-hover: #dc6803;
|
||||
|
||||
--color-workflow-link-line-success-active: #47cd89;
|
||||
--color-workflow-link-line-success-handle: #47cd89;
|
||||
|
||||
--color-workflow-link-line-error-active: #f97066;
|
||||
--color-workflow-link-line-error-handle: #f97066;
|
||||
|
||||
--color-workflow-minimap-bg: #27272b;
|
||||
--color-workflow-minimap-block: rgb(200 206 218 / 0.08);
|
||||
|
||||
--color-workflow-display-success-bg: rgb(23 178 106 / 0.2);
|
||||
--color-workflow-display-success-border-1: rgb(23 178 106 / 0.9);
|
||||
--color-workflow-display-success-border-2: rgb(23 178 106 / 0.8);
|
||||
--color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.25);
|
||||
--color-workflow-display-success-bg-line-pattern: rgb(24 24 27 / 0.8);
|
||||
|
||||
--color-workflow-display-glass-1: rgb(255 255 255 / 0.03);
|
||||
--color-workflow-display-glass-2: rgb(255 255 255 / 0.05);
|
||||
--color-workflow-display-vignette-dark: rgb(0 0 0 / 0.4);
|
||||
--color-workflow-display-highlight: rgb(255 255 255 / 0.12);
|
||||
--color-workflow-display-outline: rgb(24 24 27 / 0.95);
|
||||
--color-workflow-display-error-bg: rgb(240 68 56 / 0.2);
|
||||
--color-workflow-display-error-bg-line-pattern: rgb(24 24 27 / 0.8);
|
||||
--color-workflow-display-error-border-1: rgb(240 68 56 / 0.9);
|
||||
--color-workflow-display-error-border-2: rgb(240 68 56 / 0.8);
|
||||
--color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.25);
|
||||
|
||||
--color-workflow-display-warning-bg: rgb(247 144 9 / 0.2);
|
||||
--color-workflow-display-warning-bg-line-pattern: rgb(24 24 27 / 0.8);
|
||||
--color-workflow-display-warning-border-1: rgb(247 144 9 / 0.9);
|
||||
--color-workflow-display-warning-border-2: rgb(247 144 9 / 0.8);
|
||||
--color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.25);
|
||||
|
||||
--color-workflow-display-normal-bg: rgb(11 165 236 / 0.2);
|
||||
--color-workflow-display-normal-bg-line-pattern: rgb(24 24 27 / 0.8);
|
||||
--color-workflow-display-normal-border-1: rgb(11 165 236 / 0.9);
|
||||
--color-workflow-display-normal-border-2: rgb(11 165 236 / 0.8);
|
||||
--color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.25);
|
||||
|
||||
--color-workflow-display-disabled-bg: rgb(200 206 218 / 0.2);
|
||||
--color-workflow-display-disabled-bg-line-pattern: rgb(24 24 27 / 0.8);
|
||||
--color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6);
|
||||
--color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.25);
|
||||
--color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.25);
|
||||
--color-workflow-display-disabled-outline: rgb(24 24 27 / 0.95);
|
||||
|
||||
--color-workflow-workflow-progress-bg-1: rgb(24 24 27 / 0.25);
|
||||
--color-workflow-workflow-progress-bg-2: rgb(24 24 27 / 0.04);
|
||||
|
||||
--color-workflow-debug-run-status-bg: rgb(230 46 5 / 0.4);
|
||||
--color-workflow-debug-breakpoint: #ff692e;
|
||||
--color-workflow-debug-text: #ff9c66;
|
||||
--color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2);
|
||||
--color-workflow-debug-run-status-bg-alt: rgb(255 46 0 / 0.5);
|
||||
|
||||
--color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.5);
|
||||
--color-workflow-test-run-text: #d1e0ff;
|
||||
--color-workflow-test-run-run-status-bg-alt: rgb(45 90 190 / 0.9);
|
||||
--color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.3);
|
||||
--color-workflow-test-run-paused-text: #fdb022;
|
||||
|
||||
--color-divider-subtle: rgb(200 206 218 / 0.08);
|
||||
--color-divider-regular: rgb(200 206 218 / 0.14);
|
||||
--color-divider-deep: rgb(200 206 218 / 0.2);
|
||||
--color-divider-burn: rgb(24 24 27 / 0.95);
|
||||
--color-divider-intense: rgb(200 206 218 / 0.4);
|
||||
--color-divider-solid: #3a3a40;
|
||||
--color-divider-solid-alt: #747481;
|
||||
--color-divider-accent: rgb(200 206 218 / 0.14);
|
||||
|
||||
--color-state-base-hover: rgb(200 206 218 / 0.08);
|
||||
--color-state-base-active: rgb(200 206 218 / 0.2);
|
||||
--color-state-base-hover-alt: rgb(200 206 218 / 0.14);
|
||||
--color-state-base-handle: rgb(200 206 218 / 0.3);
|
||||
--color-state-base-handle-hover: rgb(200 206 218 / 0.5);
|
||||
--color-state-base-hover-subtle: rgb(200 206 218 / 0.04);
|
||||
|
||||
--color-state-accent-hover: rgb(21 90 239 / 0.14);
|
||||
--color-state-accent-active: rgb(21 90 239 / 0.14);
|
||||
--color-state-accent-hover-alt: rgb(21 90 239 / 0.25);
|
||||
--color-state-accent-solid: #5289ff;
|
||||
--color-state-accent-active-alt: rgb(21 90 239 / 0.2);
|
||||
|
||||
--color-state-destructive-hover: rgb(240 68 56 / 0.14);
|
||||
--color-state-destructive-hover-alt: rgb(240 68 56 / 0.25);
|
||||
--color-state-destructive-active: rgb(240 68 56 / 0.3);
|
||||
--color-state-destructive-solid: #f97066;
|
||||
--color-state-destructive-border: #f97066;
|
||||
--color-state-destructive-hover-transparent: rgb(240 68 56 / 0);
|
||||
|
||||
--color-state-success-hover: rgb(23 178 106 / 0.14);
|
||||
--color-state-success-hover-alt: rgb(23 178 106 / 0.25);
|
||||
--color-state-success-active: rgb(23 178 106 / 0.3);
|
||||
--color-state-success-solid: #47cd89;
|
||||
|
||||
--color-state-warning-hover: rgb(247 144 9 / 0.14);
|
||||
--color-state-warning-hover-alt: rgb(247 144 9 / 0.25);
|
||||
--color-state-warning-active: rgb(247 144 9 / 0.3);
|
||||
--color-state-warning-solid: #f79009;
|
||||
--color-state-warning-hover-transparent: rgb(247 144 9 / 0);
|
||||
|
||||
--color-effects-highlight: rgb(200 206 218 / 0.08);
|
||||
--color-effects-highlight-lightmode-off: rgb(200 206 218 / 0.08);
|
||||
--color-effects-image-frame: #ffffff;
|
||||
--color-effects-icon-border: rgb(255 255 255 / 0.15);
|
||||
--color-effects-highlight-subtle: rgb(200 206 218 / 0.04);
|
||||
|
||||
--color-util-colors-orange-dark-orange-dark-50: #57130a;
|
||||
--color-util-colors-orange-dark-orange-dark-100: #771a0d;
|
||||
--color-util-colors-orange-dark-orange-dark-200: #97180c;
|
||||
--color-util-colors-orange-dark-orange-dark-300: #bc1b06;
|
||||
--color-util-colors-orange-dark-orange-dark-400: #e62e05;
|
||||
--color-util-colors-orange-dark-orange-dark-500: #ff4405;
|
||||
--color-util-colors-orange-dark-orange-dark-600: #ff692e;
|
||||
--color-util-colors-orange-dark-orange-dark-700: #ff9c66;
|
||||
|
||||
--color-util-colors-orange-orange-50: #511c10;
|
||||
--color-util-colors-orange-orange-100: #772917;
|
||||
--color-util-colors-orange-orange-200: #932f19;
|
||||
--color-util-colors-orange-orange-300: #b93815;
|
||||
--color-util-colors-orange-orange-400: #e04f16;
|
||||
--color-util-colors-orange-orange-500: #ef6820;
|
||||
--color-util-colors-orange-orange-600: #f38744;
|
||||
--color-util-colors-orange-orange-700: #f7b27a;
|
||||
--color-util-colors-orange-orange-100-transparent: rgb(119 41 23 / 0);
|
||||
|
||||
--color-util-colors-pink-pink-50: #4e0d30;
|
||||
--color-util-colors-pink-pink-100: #851651;
|
||||
--color-util-colors-pink-pink-200: #9e165f;
|
||||
--color-util-colors-pink-pink-300: #c11574;
|
||||
--color-util-colors-pink-pink-400: #dd2590;
|
||||
--color-util-colors-pink-pink-500: #ee46bc;
|
||||
--color-util-colors-pink-pink-600: #f670c7;
|
||||
--color-util-colors-pink-pink-700: #faa7e0;
|
||||
|
||||
--color-util-colors-fuchsia-fuchsia-50: #47104c;
|
||||
--color-util-colors-fuchsia-fuchsia-100: #6f1877;
|
||||
--color-util-colors-fuchsia-fuchsia-200: #821890;
|
||||
--color-util-colors-fuchsia-fuchsia-300: #9f1ab1;
|
||||
--color-util-colors-fuchsia-fuchsia-400: #ba24d5;
|
||||
--color-util-colors-fuchsia-fuchsia-500: #d444f1;
|
||||
--color-util-colors-fuchsia-fuchsia-600: #e478fa;
|
||||
--color-util-colors-fuchsia-fuchsia-700: #eeaafd;
|
||||
|
||||
--color-util-colors-purple-purple-50: #27115f;
|
||||
--color-util-colors-purple-purple-100: #3e1c96;
|
||||
--color-util-colors-purple-purple-200: #4a1fb8;
|
||||
--color-util-colors-purple-purple-300: #5925dc;
|
||||
--color-util-colors-purple-purple-400: #6938ef;
|
||||
--color-util-colors-purple-purple-500: #7a5af8;
|
||||
--color-util-colors-purple-purple-600: #9b8afb;
|
||||
--color-util-colors-purple-purple-700: #bdb4fe;
|
||||
|
||||
--color-util-colors-indigo-indigo-50: #1f235b;
|
||||
--color-util-colors-indigo-indigo-100: #2d3282;
|
||||
--color-util-colors-indigo-indigo-200: #2d31a6;
|
||||
--color-util-colors-indigo-indigo-300: #3538cd;
|
||||
--color-util-colors-indigo-indigo-400: #444ce7;
|
||||
--color-util-colors-indigo-indigo-500: #6172f3;
|
||||
--color-util-colors-indigo-indigo-600: #8098f9;
|
||||
--color-util-colors-indigo-indigo-700: #a4bcfd;
|
||||
|
||||
--color-util-colors-blue-blue-50: #102a56;
|
||||
--color-util-colors-blue-blue-100: #194185;
|
||||
--color-util-colors-blue-blue-200: #1849a9;
|
||||
--color-util-colors-blue-blue-300: #175cd3;
|
||||
--color-util-colors-blue-blue-400: #1570ef;
|
||||
--color-util-colors-blue-blue-500: #2e90fa;
|
||||
--color-util-colors-blue-blue-600: #53b1fd;
|
||||
--color-util-colors-blue-blue-700: #84caff;
|
||||
|
||||
--color-util-colors-blue-light-blue-light-50: #062c41;
|
||||
--color-util-colors-blue-light-blue-light-100: #0b4a6f;
|
||||
--color-util-colors-blue-light-blue-light-200: #065986;
|
||||
--color-util-colors-blue-light-blue-light-300: #026aa2;
|
||||
--color-util-colors-blue-light-blue-light-400: #0086c9;
|
||||
--color-util-colors-blue-light-blue-light-500: #0ba5ec;
|
||||
--color-util-colors-blue-light-blue-light-600: #36bffa;
|
||||
--color-util-colors-blue-light-blue-light-700: #7cd4fd;
|
||||
|
||||
--color-util-colors-gray-blue-gray-blue-50: #0d0f1c;
|
||||
--color-util-colors-gray-blue-gray-blue-100: #101323;
|
||||
--color-util-colors-gray-blue-gray-blue-200: #293056;
|
||||
--color-util-colors-gray-blue-gray-blue-300: #363f72;
|
||||
--color-util-colors-gray-blue-gray-blue-400: #3e4784;
|
||||
--color-util-colors-gray-blue-gray-blue-500: #4e5ba6;
|
||||
--color-util-colors-gray-blue-gray-blue-600: #717bbc;
|
||||
--color-util-colors-gray-blue-gray-blue-700: #b3b8db;
|
||||
|
||||
--color-util-colors-blue-brand-blue-brand-50: #002066;
|
||||
--color-util-colors-blue-brand-blue-brand-100: #00329e;
|
||||
--color-util-colors-blue-brand-blue-brand-200: #003dc1;
|
||||
--color-util-colors-blue-brand-blue-brand-300: #004aeb;
|
||||
--color-util-colors-blue-brand-blue-brand-400: #155aef;
|
||||
--color-util-colors-blue-brand-blue-brand-500: #296dff;
|
||||
--color-util-colors-blue-brand-blue-brand-600: #5289ff;
|
||||
--color-util-colors-blue-brand-blue-brand-700: #84abff;
|
||||
|
||||
--color-util-colors-red-red-50: #55160c;
|
||||
--color-util-colors-red-red-100: #7a271a;
|
||||
--color-util-colors-red-red-200: #912018;
|
||||
--color-util-colors-red-red-300: #b42318;
|
||||
--color-util-colors-red-red-400: #d92d20;
|
||||
--color-util-colors-red-red-500: #f04438;
|
||||
--color-util-colors-red-red-600: #f97066;
|
||||
--color-util-colors-red-red-700: #fda29b;
|
||||
|
||||
--color-util-colors-green-green-50: #053321;
|
||||
--color-util-colors-green-green-100: #074d31;
|
||||
--color-util-colors-green-green-200: #085d3a;
|
||||
--color-util-colors-green-green-300: #067647;
|
||||
--color-util-colors-green-green-400: #079455;
|
||||
--color-util-colors-green-green-500: #17b26a;
|
||||
--color-util-colors-green-green-600: #47cd89;
|
||||
--color-util-colors-green-green-700: #75e0a7;
|
||||
|
||||
--color-util-colors-warning-warning-50: #4e1d09;
|
||||
--color-util-colors-warning-warning-100: #7a2e0e;
|
||||
--color-util-colors-warning-warning-200: #93370d;
|
||||
--color-util-colors-warning-warning-300: #b54708;
|
||||
--color-util-colors-warning-warning-400: #dc6803;
|
||||
--color-util-colors-warning-warning-500: #f79009;
|
||||
--color-util-colors-warning-warning-600: #fdb022;
|
||||
--color-util-colors-warning-warning-700: #fec84b;
|
||||
|
||||
--color-util-colors-yellow-yellow-50: #542c0d;
|
||||
--color-util-colors-yellow-yellow-100: #713b12;
|
||||
--color-util-colors-yellow-yellow-200: #854a0e;
|
||||
--color-util-colors-yellow-yellow-300: #a15c07;
|
||||
--color-util-colors-yellow-yellow-400: #ca8504;
|
||||
--color-util-colors-yellow-yellow-500: #eaaa08;
|
||||
--color-util-colors-yellow-yellow-600: #fac515;
|
||||
--color-util-colors-yellow-yellow-700: #fde272;
|
||||
|
||||
--color-util-colors-teal-teal-50: #0a2926;
|
||||
--color-util-colors-teal-teal-100: #134e48;
|
||||
--color-util-colors-teal-teal-200: #125d56;
|
||||
--color-util-colors-teal-teal-300: #107569;
|
||||
--color-util-colors-teal-teal-400: #0e9384;
|
||||
--color-util-colors-teal-teal-500: #15b79e;
|
||||
--color-util-colors-teal-teal-600: #2ed3b7;
|
||||
--color-util-colors-teal-teal-700: #5fe9d0;
|
||||
|
||||
--color-util-colors-cyan-cyan-50: #0d2d3a;
|
||||
--color-util-colors-cyan-cyan-100: #164c63;
|
||||
--color-util-colors-cyan-cyan-200: #155b75;
|
||||
--color-util-colors-cyan-cyan-300: #0e7090;
|
||||
--color-util-colors-cyan-cyan-400: #088ab2;
|
||||
--color-util-colors-cyan-cyan-500: #06aed4;
|
||||
--color-util-colors-cyan-cyan-600: #22ccee;
|
||||
--color-util-colors-cyan-cyan-700: #67e3f9;
|
||||
|
||||
--color-util-colors-violet-violet-50: #2e125e;
|
||||
--color-util-colors-violet-violet-100: #491c96;
|
||||
--color-util-colors-violet-violet-200: #5720b7;
|
||||
--color-util-colors-violet-violet-300: #6927da;
|
||||
--color-util-colors-violet-violet-400: #7839ee;
|
||||
--color-util-colors-violet-violet-500: #875bf7;
|
||||
--color-util-colors-violet-violet-600: #a48afb;
|
||||
--color-util-colors-violet-violet-700: #c3b5fd;
|
||||
|
||||
--color-util-colors-gray-gray-50: #0c111c;
|
||||
--color-util-colors-gray-gray-100: #101828;
|
||||
--color-util-colors-gray-gray-200: #18222f;
|
||||
--color-util-colors-gray-gray-300: #354052;
|
||||
--color-util-colors-gray-gray-400: #495464;
|
||||
--color-util-colors-gray-gray-500: #676f83;
|
||||
--color-util-colors-gray-gray-600: #98a2b2;
|
||||
--color-util-colors-gray-gray-700: #d0d5dc;
|
||||
|
||||
--color-util-colors-green-light-green-light-50: #15290a;
|
||||
--color-util-colors-green-light-green-light-100: #2b5314;
|
||||
--color-util-colors-green-light-green-light-200: #326212;
|
||||
--color-util-colors-green-light-green-light-300: #3b7c0f;
|
||||
--color-util-colors-green-light-green-light-500: #66c61c;
|
||||
--color-util-colors-green-light-green-light-400: #4ca30d;
|
||||
--color-util-colors-green-light-green-light-600: #85e13a;
|
||||
--color-util-colors-green-light-green-light-700: #a6ef67;
|
||||
|
||||
--color-util-colors-rose-rose-50: #510b24;
|
||||
--color-util-colors-rose-rose-100: #89123e;
|
||||
--color-util-colors-rose-rose-200: #a11043;
|
||||
--color-util-colors-rose-rose-300: #c01048;
|
||||
--color-util-colors-rose-rose-400: #e31b54;
|
||||
--color-util-colors-rose-rose-500: #f63d68;
|
||||
--color-util-colors-rose-rose-600: #fd6f8e;
|
||||
--color-util-colors-rose-rose-700: #fea3b4;
|
||||
|
||||
--color-util-colors-midnight-midnight-50: #171c22;
|
||||
--color-util-colors-midnight-midnight-100: #202431;
|
||||
--color-util-colors-midnight-midnight-200: #2f3648;
|
||||
--color-util-colors-midnight-midnight-300: #3e465e;
|
||||
--color-util-colors-midnight-midnight-400: #5d698d;
|
||||
--color-util-colors-midnight-midnight-500: #828dad;
|
||||
--color-util-colors-midnight-midnight-600: #a7aec5;
|
||||
--color-util-colors-midnight-midnight-700: #c6cbd9;
|
||||
|
||||
--color-third-party-LangChain: #ffffff;
|
||||
--color-third-party-Langfuse: #ffffff;
|
||||
--color-third-party-Github: #ffffff;
|
||||
--color-third-party-Github-tertiary: rgb(200 206 218 / 0.6);
|
||||
--color-third-party-Github-secondary: #d9d9de;
|
||||
--color-third-party-model-bg-openai: #121212;
|
||||
--color-third-party-model-bg-anthropic: #1d1917;
|
||||
--color-third-party-model-bg-default: #1d1d20;
|
||||
|
||||
--color-third-party-aws: #141f2e;
|
||||
--color-third-party-aws-alt: #192639;
|
||||
|
||||
--color-saas-background: #0b0b0e;
|
||||
--color-saas-pricing-grid-bg: rgb(200 206 218 / 0.2);
|
||||
--color-saas-dify-blue-static: #0033ff;
|
||||
--color-saas-dify-blue-static-hover: #002cd6;
|
||||
--color-saas-dify-blue-accessible: #0a68ff;
|
||||
--color-saas-dify-blue-inverted: #ffffff;
|
||||
--color-saas-dify-blue-inverted-dimmed: rgb(255 255 255 / 0.88);
|
||||
|
||||
--color-saas-background-inverted: rgb(255 255 255 / 0.9);
|
||||
--color-saas-background-inverted-hover: #ffffff;
|
||||
|
||||
--color-dify-logo-blue: #e8e8e8;
|
||||
--color-dify-logo-black: #e8e8e8;
|
||||
--color-dify-logo-outline-1: #ffffff;
|
||||
--color-dify-logo-outline-2: #e8e8e8;
|
||||
|
||||
}
|
||||
815
packages/dify-ui/src/themes/light.css
Normal file
815
packages/dify-ui/src/themes/light.css
Normal file
@@ -0,0 +1,815 @@
|
||||
/* Attention: Generate by code. Don't update by hand!!! */
|
||||
html[data-theme="light"] {
|
||||
--color-components-input-bg-normal: rgb(200 206 218 / 0.25);
|
||||
--color-components-input-text-placeholder: #98a2b2;
|
||||
--color-components-input-bg-hover: rgb(200 206 218 / 0.14);
|
||||
--color-components-input-bg-active: #f9fafb;
|
||||
--color-components-input-border-active: #d0d5dc;
|
||||
--color-components-input-border-destructive: #fda29b;
|
||||
--color-components-input-text-filled: #101828;
|
||||
--color-components-input-bg-destructive: #ffffff;
|
||||
--color-components-input-bg-disabled: rgb(200 206 218 / 0.14);
|
||||
--color-components-input-text-disabled: #d0d5dc;
|
||||
--color-components-input-text-filled-disabled: #676f83;
|
||||
--color-components-input-border-hover: #d0d5dc;
|
||||
--color-components-input-border-active-prompt-1: #0ba5ec;
|
||||
--color-components-input-border-active-prompt-2: #155aef;
|
||||
|
||||
--color-components-kbd-bg-gray: rgb(16 24 40 / 0.04);
|
||||
--color-components-kbd-bg-white: rgb(255 255 255 / 0.12);
|
||||
|
||||
--color-components-tooltip-bg: rgb(255 255 255 / 0.95);
|
||||
|
||||
--color-components-button-primary-text: #ffffff;
|
||||
--color-components-button-primary-bg: #155aef;
|
||||
--color-components-button-primary-border: rgb(16 24 40 / 0.04);
|
||||
--color-components-button-primary-bg-hover: #004aeb;
|
||||
--color-components-button-primary-border-hover: rgb(16 24 40 / 0.08);
|
||||
--color-components-button-primary-bg-disabled: rgb(21 90 239 / 0.14);
|
||||
--color-components-button-primary-border-disabled: rgb(255 255 255 / 0);
|
||||
--color-components-button-primary-text-disabled: rgb(255 255 255 / 0.6);
|
||||
|
||||
--color-components-button-secondary-text: #354052;
|
||||
--color-components-button-secondary-text-disabled: rgb(16 24 40 / 0.25);
|
||||
--color-components-button-secondary-bg: #ffffff;
|
||||
--color-components-button-secondary-bg-hover: #f9fafb;
|
||||
--color-components-button-secondary-bg-disabled: #f9fafb;
|
||||
--color-components-button-secondary-border: rgb(16 24 40 / 0.14);
|
||||
--color-components-button-secondary-border-hover: rgb(16 24 40 / 0.2);
|
||||
--color-components-button-secondary-border-disabled: rgb(16 24 40 / 0.04);
|
||||
|
||||
--color-components-button-tertiary-text: #354052;
|
||||
--color-components-button-tertiary-text-disabled: rgb(16 24 40 / 0.25);
|
||||
--color-components-button-tertiary-bg: #f2f4f7;
|
||||
--color-components-button-tertiary-bg-hover: #e9ebf0;
|
||||
--color-components-button-tertiary-bg-disabled: #f9fafb;
|
||||
|
||||
--color-components-button-ghost-text: #354052;
|
||||
--color-components-button-ghost-text-disabled: rgb(16 24 40 / 0.25);
|
||||
--color-components-button-ghost-bg-hover: rgb(200 206 218 / 0.2);
|
||||
|
||||
--color-components-button-destructive-primary-text: #ffffff;
|
||||
--color-components-button-destructive-primary-text-disabled: rgb(255 255 255 / 0.6);
|
||||
--color-components-button-destructive-primary-bg: #d92d20;
|
||||
--color-components-button-destructive-primary-bg-hover: #b42318;
|
||||
--color-components-button-destructive-primary-bg-disabled: #fee4e2;
|
||||
--color-components-button-destructive-primary-border: rgb(24 24 27 / 0.04);
|
||||
--color-components-button-destructive-primary-border-hover: rgb(24 24 27 / 0.08);
|
||||
--color-components-button-destructive-primary-border-disabled: rgb(255 255 255 / 0);
|
||||
|
||||
--color-components-button-destructive-secondary-text: #d92d20;
|
||||
--color-components-button-destructive-secondary-text-disabled: rgb(240 68 56 / 0.2);
|
||||
--color-components-button-destructive-secondary-bg: #ffffff;
|
||||
--color-components-button-destructive-secondary-bg-hover: #fef3f2;
|
||||
--color-components-button-destructive-secondary-bg-disabled: #fef3f2;
|
||||
--color-components-button-destructive-secondary-border: rgb(24 24 27 / 0.08);
|
||||
--color-components-button-destructive-secondary-border-hover: rgb(240 68 56 / 0.25);
|
||||
--color-components-button-destructive-secondary-border-disabled: rgb(240 68 56 / 0.04);
|
||||
|
||||
--color-components-button-destructive-tertiary-text: #d92d20;
|
||||
--color-components-button-destructive-tertiary-text-disabled: rgb(240 68 56 / 0.2);
|
||||
--color-components-button-destructive-tertiary-bg: #fee4e2;
|
||||
--color-components-button-destructive-tertiary-bg-hover: #fecdca;
|
||||
--color-components-button-destructive-tertiary-bg-disabled: rgb(240 68 56 / 0.04);
|
||||
|
||||
--color-components-button-destructive-ghost-text: #d92d20;
|
||||
--color-components-button-destructive-ghost-text-disabled: rgb(240 68 56 / 0.2);
|
||||
--color-components-button-destructive-ghost-bg-hover: #fee4e2;
|
||||
|
||||
--color-components-button-secondary-accent-text: #155aef;
|
||||
--color-components-button-secondary-accent-text-disabled: #b2caff;
|
||||
--color-components-button-secondary-accent-bg: #ffffff;
|
||||
--color-components-button-secondary-accent-bg-hover: #f2f4f7;
|
||||
--color-components-button-secondary-accent-bg-disabled: #f9fafb;
|
||||
--color-components-button-secondary-accent-border: rgb(16 24 40 / 0.14);
|
||||
--color-components-button-secondary-accent-border-hover: rgb(16 24 40 / 0.14);
|
||||
--color-components-button-secondary-accent-border-disabled: rgb(16 24 40 / 0.04);
|
||||
|
||||
--color-components-button-indigo-bg: #444ce7;
|
||||
--color-components-button-indigo-bg-hover: #3538cd;
|
||||
--color-components-button-indigo-bg-disabled: rgb(97 114 243 / 0.14);
|
||||
|
||||
--color-components-button-debug-text: #ffffff;
|
||||
--color-components-button-debug-text-disabled: rgb(255 255 255 / 0.6);
|
||||
--color-components-button-debug-bg: #ff4405;
|
||||
--color-components-button-debug-bg-hover: #e62e05;
|
||||
--color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.2);
|
||||
--color-components-button-debug-border: rgb(16 24 40 / 0.04);
|
||||
--color-components-button-debug-border-hover: rgb(16 24 40 / 0.08);
|
||||
--color-components-button-debug-border-disabled: rgb(255 255 255 / 0);
|
||||
|
||||
--color-components-button-button-seam: rgb(0 0 0 / 0.03);
|
||||
|
||||
--color-components-checkbox-icon: #ffffff;
|
||||
--color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.5);
|
||||
--color-components-checkbox-bg: #155aef;
|
||||
--color-components-checkbox-bg-hover: #004aeb;
|
||||
--color-components-checkbox-bg-disabled: #f2f4f7;
|
||||
--color-components-checkbox-border: #d0d5dc;
|
||||
--color-components-checkbox-border-hover: #98a2b2;
|
||||
--color-components-checkbox-border-disabled: rgb(24 24 27 / 0.04);
|
||||
--color-components-checkbox-bg-unchecked: #ffffff;
|
||||
--color-components-checkbox-bg-unchecked-hover: #ffffff;
|
||||
--color-components-checkbox-bg-disabled-checked: #b2caff;
|
||||
|
||||
--color-components-radio-border-checked: #155aef;
|
||||
--color-components-radio-border-checked-hover: #004aeb;
|
||||
--color-components-radio-border-checked-disabled: #b2caff;
|
||||
--color-components-radio-bg-disabled: rgb(255 255 255 / 0);
|
||||
--color-components-radio-border: #d0d5dc;
|
||||
--color-components-radio-border-hover: #98a2b2;
|
||||
--color-components-radio-border-disabled: rgb(24 24 27 / 0.04);
|
||||
--color-components-radio-bg: rgb(255 255 255 / 0);
|
||||
--color-components-radio-bg-hover: rgb(255 255 255 / 0);
|
||||
|
||||
--color-components-toggle-knob: #ffffff;
|
||||
--color-components-toggle-knob-disabled: rgb(255 255 255 / 0.95);
|
||||
--color-components-toggle-bg: #155aef;
|
||||
--color-components-toggle-bg-hover: #004aeb;
|
||||
--color-components-toggle-bg-disabled: #d1e0ff;
|
||||
--color-components-toggle-bg-unchecked: #e9ebf0;
|
||||
--color-components-toggle-bg-unchecked-hover: #d0d5dc;
|
||||
--color-components-toggle-bg-unchecked-disabled: #f2f4f7;
|
||||
--color-components-toggle-knob-hover: #ffffff;
|
||||
|
||||
--color-components-card-bg: #fcfcfd;
|
||||
--color-components-card-border: #ffffff;
|
||||
--color-components-card-bg-alt: #ffffff;
|
||||
--color-components-card-bg-transparent: rgb(252 252 253 / 0);
|
||||
--color-components-card-bg-alt-transparent: rgb(255 255 255 / 0);
|
||||
|
||||
--color-components-menu-item-text: #495464;
|
||||
--color-components-menu-item-text-active: #18222f;
|
||||
--color-components-menu-item-text-hover: #354052;
|
||||
--color-components-menu-item-text-active-accent: #18222f;
|
||||
--color-components-menu-item-bg-active: rgb(21 90 239 / 0.08);
|
||||
--color-components-menu-item-bg-hover: rgb(200 206 218 / 0.2);
|
||||
|
||||
--color-components-panel-bg: #ffffff;
|
||||
--color-components-panel-bg-blur: rgb(255 255 255 / 0.95);
|
||||
--color-components-panel-border: rgb(16 24 40 / 0.08);
|
||||
--color-components-panel-border-subtle: rgb(16 24 40 / 0.08);
|
||||
--color-components-panel-gradient-2: #f9fafb;
|
||||
--color-components-panel-gradient-1: #ffffff;
|
||||
--color-components-panel-bg-alt: #f9fafb;
|
||||
--color-components-panel-on-panel-item-bg: #ffffff;
|
||||
--color-components-panel-on-panel-item-bg-hover: #f9fafb;
|
||||
--color-components-panel-on-panel-item-bg-alt: #f9fafb;
|
||||
--color-components-panel-on-panel-item-bg-transparent: rgb(255 255 255 / 0.95);
|
||||
--color-components-panel-on-panel-item-bg-hover-transparent: rgb(249 250 251 / 0);
|
||||
--color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(254 243 242 / 0);
|
||||
|
||||
--color-components-panel-bg-transparent: rgb(255 255 255 / 0);
|
||||
--color-components-panel-bg-blur-burn: rgb(255 255 255 / 0.9);
|
||||
|
||||
--color-components-main-nav-nav-button-text: #495464;
|
||||
--color-components-main-nav-nav-button-text-active: #155aef;
|
||||
--color-components-main-nav-nav-button-bg: rgb(255 255 255 / 0);
|
||||
--color-components-main-nav-nav-button-bg-active: #fcfcfd;
|
||||
--color-components-main-nav-nav-button-border: rgb(255 255 255 / 0.95);
|
||||
--color-components-main-nav-nav-button-bg-hover: rgb(16 24 40 / 0.04);
|
||||
|
||||
--color-components-main-nav-nav-user-border: #ffffff;
|
||||
|
||||
--color-components-main-nav-text: #495464;
|
||||
--color-components-main-nav-text-active: #0033ff;
|
||||
--color-components-main-nav-glass-edge-highlight-first: rgb(255 255 255 / 0.98);
|
||||
--color-components-main-nav-glass-edge-highlight-middle: rgb(255 255 255 / 0);
|
||||
--color-components-main-nav-glass-edge-highlight-end: rgb(255 255 255 / 0.42);
|
||||
|
||||
--color-components-main-nav-glass-edge-reflection-first: rgb(0 51 255 / 0);
|
||||
--color-components-main-nav-glass-edge-reflection-middle: rgb(0 51 255 / 0.6);
|
||||
--color-components-main-nav-glass-edge-reflection-end: rgb(0 51 255 / 0);
|
||||
|
||||
--color-components-main-nav-glass-surface-first: rgb(0 51 255 / 0.08);
|
||||
--color-components-main-nav-glass-surface-middle-1: rgb(0 51 255 / 0.12);
|
||||
--color-components-main-nav-glass-surface-middle-2: rgb(0 51 255 / 0.1);
|
||||
--color-components-main-nav-glass-surface-end: rgb(0 51 255 / 0.08);
|
||||
|
||||
--color-components-main-nav-glass-inner-glow: rgb(255 255 255 / 0.3);
|
||||
--color-components-main-nav-glass-shadow-reflection: rgb(0 51 255 / 0.06);
|
||||
--color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0);
|
||||
--color-components-main-nav-glass-text-glow: rgb(49 70 255 / 0.18);
|
||||
|
||||
--color-components-slider-knob: #ffffff;
|
||||
--color-components-slider-knob-hover: #ffffff;
|
||||
--color-components-slider-knob-disabled: rgb(255 255 255 / 0.95);
|
||||
--color-components-slider-range: #296dff;
|
||||
--color-components-slider-track: #e9ebf0;
|
||||
--color-components-slider-knob-border-hover: rgb(16 24 40 / 0.2);
|
||||
--color-components-slider-knob-border: rgb(16 24 40 / 0.14);
|
||||
|
||||
--color-components-segmented-control-item-active-bg: #ffffff;
|
||||
--color-components-segmented-control-item-active-border: #ffffff;
|
||||
--color-components-segmented-control-bg-normal: rgb(200 206 218 / 0.2);
|
||||
--color-components-segmented-control-item-active-accent-bg: #ffffff;
|
||||
--color-components-segmented-control-item-active-accent-border: #ffffff;
|
||||
|
||||
--color-components-option-card-option-bg: #fcfcfd;
|
||||
--color-components-option-card-option-selected-bg: #ffffff;
|
||||
--color-components-option-card-option-selected-border: #296dff;
|
||||
--color-components-option-card-option-border: #e9ebf0;
|
||||
--color-components-option-card-option-bg-hover: #ffffff;
|
||||
--color-components-option-card-option-border-hover: #d0d5dc;
|
||||
|
||||
--color-components-tab-active: #155aef;
|
||||
|
||||
--color-components-badge-white-to-dark: #ffffff;
|
||||
--color-components-badge-status-light-success-bg: #47cd89;
|
||||
--color-components-badge-status-light-success-border-inner: #17b26a;
|
||||
--color-components-badge-status-light-success-halo: rgb(23 178 106 / 0.25);
|
||||
|
||||
--color-components-badge-status-light-border-outer: #ffffff;
|
||||
--color-components-badge-status-light-high-light: rgb(255 255 255 / 0.3);
|
||||
--color-components-badge-status-light-warning-bg: #fdb022;
|
||||
--color-components-badge-status-light-warning-border-inner: #f79009;
|
||||
--color-components-badge-status-light-warning-halo: rgb(247 144 9 / 0.25);
|
||||
|
||||
--color-components-badge-status-light-error-bg: #f97066;
|
||||
--color-components-badge-status-light-error-border-inner: #f04438;
|
||||
--color-components-badge-status-light-error-halo: rgb(240 68 56 / 0.25);
|
||||
|
||||
--color-components-badge-status-light-normal-bg: #36bffa;
|
||||
--color-components-badge-status-light-normal-border-inner: #0ba5ec;
|
||||
--color-components-badge-status-light-normal-halo: rgb(11 165 236 / 0.25);
|
||||
|
||||
--color-components-badge-status-light-disabled-bg: #98a2b2;
|
||||
--color-components-badge-status-light-disabled-border-inner: #676f83;
|
||||
--color-components-badge-status-light-disabled-halo: rgb(16 24 40 / 0.04);
|
||||
|
||||
--color-components-badge-bg-green-soft: rgb(23 178 106 / 0.08);
|
||||
--color-components-badge-bg-orange-soft: rgb(247 144 9 / 0.08);
|
||||
--color-components-badge-bg-red-soft: rgb(240 68 56 / 0.08);
|
||||
--color-components-badge-bg-blue-light-soft: rgb(11 165 236 / 0.08);
|
||||
--color-components-badge-bg-gray-soft: rgb(16 24 40 / 0.04);
|
||||
--color-components-badge-bg-dimm: rgb(255 255 255 / 0.05);
|
||||
|
||||
--color-components-chart-line: #296dff;
|
||||
--color-components-chart-area-1: rgb(21 90 239 / 0.14);
|
||||
--color-components-chart-area-2: rgb(21 90 239 / 0.04);
|
||||
--color-components-chart-current-1: #155aef;
|
||||
--color-components-chart-current-2: #d1e0ff;
|
||||
--color-components-chart-bg: #ffffff;
|
||||
|
||||
--color-components-actionbar-bg: rgb(255 255 255 / 0.95);
|
||||
--color-components-actionbar-border: rgb(16 24 40 / 0.04);
|
||||
--color-components-actionbar-bg-accent: #f5f7ff;
|
||||
--color-components-actionbar-border-accent: #b2caff;
|
||||
|
||||
--color-components-dropzone-bg-alt: #f2f4f7;
|
||||
--color-components-dropzone-bg: #f9fafb;
|
||||
--color-components-dropzone-bg-accent: rgb(21 90 239 / 0.14);
|
||||
--color-components-dropzone-border: rgb(16 24 40 / 0.08);
|
||||
--color-components-dropzone-border-alt: rgb(16 24 40 / 0.2);
|
||||
--color-components-dropzone-border-accent: #84abff;
|
||||
|
||||
--color-components-progress-brand-progress: #296dff;
|
||||
--color-components-progress-brand-border: #296dff;
|
||||
--color-components-progress-brand-bg: rgb(21 90 239 / 0.04);
|
||||
|
||||
--color-components-progress-white-progress: #ffffff;
|
||||
--color-components-progress-white-border: rgb(255 255 255 / 0.95);
|
||||
--color-components-progress-white-bg: rgb(255 255 255 / 0.01);
|
||||
|
||||
--color-components-progress-gray-progress: #98a2b2;
|
||||
--color-components-progress-gray-border: #98a2b2;
|
||||
--color-components-progress-gray-bg: rgb(200 206 218 / 0.02);
|
||||
|
||||
--color-components-progress-warning-progress: #f79009;
|
||||
--color-components-progress-warning-border: #f79009;
|
||||
--color-components-progress-warning-bg: rgb(247 144 9 / 0.04);
|
||||
|
||||
--color-components-progress-error-progress: #f04438;
|
||||
--color-components-progress-error-border: #f04438;
|
||||
--color-components-progress-error-bg: rgb(240 68 56 / 0.04);
|
||||
|
||||
--color-components-chat-input-audio-bg: #eff4ff;
|
||||
--color-components-chat-input-audio-wave-default: rgb(21 90 239 / 0.2);
|
||||
--color-components-chat-input-bg-mask-1: rgb(255 255 255 / 0.01);
|
||||
--color-components-chat-input-bg-mask-2: #f2f4f7;
|
||||
--color-components-chat-input-border: #ffffff;
|
||||
--color-components-chat-input-audio-wave-active: #296dff;
|
||||
--color-components-chat-input-audio-bg-alt: #fcfcfd;
|
||||
|
||||
--color-components-avatar-shape-fill-stop-0: #ffffff;
|
||||
--color-components-avatar-shape-fill-stop-100: rgb(255 255 255 / 0.9);
|
||||
|
||||
--color-components-avatar-bg-mask-stop-0: rgb(255 255 255 / 0.12);
|
||||
--color-components-avatar-bg-mask-stop-100: rgb(255 255 255 / 0.08);
|
||||
|
||||
--color-components-avatar-default-avatar-bg: #d0d5dc;
|
||||
--color-components-avatar-mask-darkmode-dimmed: rgb(255 255 255 / 0);
|
||||
|
||||
--color-components-label-gray: #f2f4f7;
|
||||
|
||||
--color-components-premium-badge-blue-bg-stop-0: #5289ff;
|
||||
--color-components-premium-badge-blue-bg-stop-100: #155aef;
|
||||
--color-components-premium-badge-blue-stroke-stop-0: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-blue-stroke-stop-100: #155aef;
|
||||
--color-components-premium-badge-blue-text-stop-0: #f5f7ff;
|
||||
--color-components-premium-badge-blue-text-stop-100: #d1e0ff;
|
||||
--color-components-premium-badge-blue-glow: #00329e;
|
||||
--color-components-premium-badge-blue-bg-stop-0-hover: #296dff;
|
||||
--color-components-premium-badge-blue-bg-stop-100-hover: #004aeb;
|
||||
--color-components-premium-badge-blue-glow-hover: #84abff;
|
||||
--color-components-premium-badge-blue-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-blue-stroke-stop-100-hover: #00329e;
|
||||
|
||||
--color-components-premium-badge-highlight-stop-0: rgb(255 255 255 / 0.12);
|
||||
--color-components-premium-badge-highlight-stop-100: rgb(255 255 255 / 0.3);
|
||||
--color-components-premium-badge-indigo-bg-stop-0: #8098f9;
|
||||
--color-components-premium-badge-indigo-bg-stop-100: #444ce7;
|
||||
--color-components-premium-badge-indigo-stroke-stop-0: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-indigo-stroke-stop-100: #6172f3;
|
||||
--color-components-premium-badge-indigo-text-stop-0: #f5f8ff;
|
||||
--color-components-premium-badge-indigo-text-stop-100: #e0eaff;
|
||||
--color-components-premium-badge-indigo-glow: #2d3282;
|
||||
--color-components-premium-badge-indigo-glow-hover: #a4bcfd;
|
||||
--color-components-premium-badge-indigo-bg-stop-0-hover: #6172f3;
|
||||
--color-components-premium-badge-indigo-bg-stop-100-hover: #2d31a6;
|
||||
--color-components-premium-badge-indigo-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-indigo-stroke-stop-100-hover: #2d31a6;
|
||||
|
||||
--color-components-premium-badge-grey-bg-stop-0: #98a2b2;
|
||||
--color-components-premium-badge-grey-bg-stop-100: #676f83;
|
||||
--color-components-premium-badge-grey-stroke-stop-0: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-grey-stroke-stop-100: #676f83;
|
||||
--color-components-premium-badge-grey-text-stop-0: #fcfcfd;
|
||||
--color-components-premium-badge-grey-text-stop-100: #f2f4f7;
|
||||
--color-components-premium-badge-grey-glow: #101828;
|
||||
--color-components-premium-badge-grey-glow-hover: #d0d5dc;
|
||||
--color-components-premium-badge-grey-bg-stop-0-hover: #676f83;
|
||||
--color-components-premium-badge-grey-bg-stop-100-hover: #354052;
|
||||
--color-components-premium-badge-grey-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-grey-stroke-stop-100-hover: #354052;
|
||||
|
||||
--color-components-premium-badge-orange-bg-stop-0: #ff692e;
|
||||
--color-components-premium-badge-orange-bg-stop-100: #e04f16;
|
||||
--color-components-premium-badge-orange-stroke-stop-0: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-orange-stroke-stop-100: #e62e05;
|
||||
--color-components-premium-badge-orange-text-stop-0: #fefaf5;
|
||||
--color-components-premium-badge-orange-text-stop-100: #fdead7;
|
||||
--color-components-premium-badge-orange-glow: #772917;
|
||||
--color-components-premium-badge-orange-glow-hover: #f7b27a;
|
||||
--color-components-premium-badge-orange-bg-stop-0-hover: #ff4405;
|
||||
--color-components-premium-badge-orange-bg-stop-100-hover: #b93815;
|
||||
--color-components-premium-badge-orange-stroke-stop-0-hover: rgb(255 255 255 / 0.95);
|
||||
--color-components-premium-badge-orange-stroke-stop-100-hover: #bc1b06;
|
||||
|
||||
--color-components-progress-bar-bg: rgb(21 90 239 / 0.04);
|
||||
--color-components-progress-bar-progress: rgb(21 90 239 / 0.14);
|
||||
--color-components-progress-bar-border: rgb(16 24 40 / 0.04);
|
||||
--color-components-progress-bar-progress-solid: #296dff;
|
||||
--color-components-progress-bar-progress-highlight: rgb(21 90 239 / 0.2);
|
||||
|
||||
--color-components-icon-bg-red-solid: #d92d20;
|
||||
--color-components-icon-bg-rose-solid: #e31b54;
|
||||
--color-components-icon-bg-pink-solid: #dd2590;
|
||||
--color-components-icon-bg-orange-dark-solid: #ff4405;
|
||||
--color-components-icon-bg-yellow-solid: #eaaa08;
|
||||
--color-components-icon-bg-green-solid: #4ca30d;
|
||||
--color-components-icon-bg-teal-solid: #0e9384;
|
||||
--color-components-icon-bg-blue-light-solid: #0ba5ec;
|
||||
--color-components-icon-bg-blue-solid: #155aef;
|
||||
--color-components-icon-bg-indigo-solid: #444ce7;
|
||||
--color-components-icon-bg-violet-solid: #7839ee;
|
||||
--color-components-icon-bg-midnight-solid: #828dad;
|
||||
--color-components-icon-bg-rose-soft: #fff1f3;
|
||||
--color-components-icon-bg-pink-soft: #fdf2fa;
|
||||
--color-components-icon-bg-orange-dark-soft: #fff4ed;
|
||||
--color-components-icon-bg-yellow-soft: #fefbe8;
|
||||
--color-components-icon-bg-green-soft: #f3fee7;
|
||||
--color-components-icon-bg-teal-soft: #f0fdf9;
|
||||
--color-components-icon-bg-blue-light-soft: #f0f9ff;
|
||||
--color-components-icon-bg-blue-soft: #eff4ff;
|
||||
--color-components-icon-bg-indigo-soft: #eef4ff;
|
||||
--color-components-icon-bg-violet-soft: #f5f3ff;
|
||||
--color-components-icon-bg-midnight-soft: #f0f2f5;
|
||||
--color-components-icon-bg-red-soft: #fef3f2;
|
||||
--color-components-icon-bg-orange-solid: #f79009;
|
||||
--color-components-icon-bg-orange-soft: #fffaeb;
|
||||
|
||||
--color-components-marketplace-header-bg: rgb(255 255 255 / 0.98);
|
||||
|
||||
--color-text-primary: #101828;
|
||||
--color-text-secondary: #354052;
|
||||
--color-text-tertiary: #676f83;
|
||||
--color-text-quaternary: rgb(16 24 40 / 0.3);
|
||||
--color-text-destructive: #d92d20;
|
||||
--color-text-success: #079455;
|
||||
--color-text-warning: #dc6803;
|
||||
--color-text-destructive-secondary: #f04438;
|
||||
--color-text-success-secondary: #17b26a;
|
||||
--color-text-warning-secondary: #f79009;
|
||||
--color-text-accent: #155aef;
|
||||
--color-text-primary-on-surface: #ffffff;
|
||||
--color-text-placeholder: #98a2b2;
|
||||
--color-text-disabled: #d0d5dc;
|
||||
--color-text-accent-secondary: #296dff;
|
||||
--color-text-accent-light-mode-only: #155aef;
|
||||
--color-text-text-selected: rgb(21 90 239 / 0.14);
|
||||
--color-text-secondary-on-surface: rgb(255 255 255 / 0.9);
|
||||
--color-text-logo-text: #18222f;
|
||||
--color-text-empty-state-icon: #d0d5dc;
|
||||
--color-text-inverted: #000000;
|
||||
--color-text-inverted-dimmed: rgb(0 0 0 / 0.95);
|
||||
|
||||
--color-background-body: #f2f4f7;
|
||||
--color-background-default-subtle: #fcfcfd;
|
||||
--color-background-neutral-subtle: #f9fafb;
|
||||
--color-background-sidenav-bg: rgb(255 255 255 / 0.8);
|
||||
--color-background-default: #ffffff;
|
||||
--color-background-soft: #f9fafb;
|
||||
--color-background-gradient-bg-fill-chat-bg-1: #f9fafb;
|
||||
--color-background-gradient-bg-fill-chat-bg-2: #f2f4f7;
|
||||
--color-background-gradient-bg-fill-chat-bubble-bg-1: #ffffff;
|
||||
--color-background-gradient-bg-fill-chat-bubble-bg-2: rgb(255 255 255 / 0.6);
|
||||
--color-background-gradient-bg-fill-debug-bg-1: rgb(255 255 255 / 0);
|
||||
--color-background-gradient-bg-fill-debug-bg-2: rgb(200 206 218 / 0.14);
|
||||
|
||||
--color-background-gradient-mask-gray: rgb(200 206 218 / 0.2);
|
||||
--color-background-gradient-mask-transparent: rgb(255 255 255 / 0);
|
||||
--color-background-gradient-mask-input-clear-2: rgb(233 235 240 / 0);
|
||||
--color-background-gradient-mask-input-clear-1: #e9ebf0;
|
||||
--color-background-gradient-mask-transparent-dark: rgb(0 0 0 / 0);
|
||||
--color-background-gradient-mask-side-panel-2: rgb(16 24 40 / 0.3);
|
||||
--color-background-gradient-mask-side-panel-1: rgb(16 24 40 / 0.02);
|
||||
|
||||
--color-background-default-burn: #e9ebf0;
|
||||
--color-background-overlay-fullscreen: rgb(249 250 251 / 0.95);
|
||||
--color-background-default-lighter: rgb(255 255 255 / 0.5);
|
||||
--color-background-section: #f9fafb;
|
||||
--color-background-interaction-from-bg-1: rgb(200 206 218 / 0.2);
|
||||
--color-background-interaction-from-bg-2: rgb(200 206 218 / 0.14);
|
||||
--color-background-section-burn: #f2f4f7;
|
||||
--color-background-default-dodge: #ffffff;
|
||||
--color-background-overlay: rgb(16 24 40 / 0.6);
|
||||
--color-background-default-dimmed: #e9ebf0;
|
||||
--color-background-default-hover: #f9fafb;
|
||||
--color-background-overlay-alt: rgb(16 24 40 / 0.4);
|
||||
--color-background-surface-white: rgb(255 255 255 / 0.95);
|
||||
--color-background-overlay-destructive: rgb(240 68 56 / 0.3);
|
||||
--color-background-overlay-backdrop: rgb(242 244 247 / 0.95);
|
||||
--color-background-body-transparent: rgb(242 244 247 / 0);
|
||||
--color-background-section-burn-inverted: #f2f4f7;
|
||||
--color-background-default-hover-alpha-0: rgb(249 250 251 / 0);
|
||||
|
||||
--color-shadow-shadow-1: rgb(9 9 11 / 0.03);
|
||||
--color-shadow-shadow-3: rgb(9 9 11 / 0.05);
|
||||
--color-shadow-shadow-4: rgb(9 9 11 / 0.06);
|
||||
--color-shadow-shadow-5: rgb(9 9 11 / 0.08);
|
||||
--color-shadow-shadow-6: rgb(9 9 11 / 0.1);
|
||||
--color-shadow-shadow-7: rgb(9 9 11 / 0.12);
|
||||
--color-shadow-shadow-8: rgb(9 9 11 / 0.14);
|
||||
--color-shadow-shadow-9: rgb(9 9 11 / 0.18);
|
||||
--color-shadow-shadow-2: rgb(9 9 11 / 0.04);
|
||||
--color-shadow-shadow-10: rgb(9 9 11 / 0.05);
|
||||
|
||||
--color-workflow-block-border: #ffffff;
|
||||
--color-workflow-block-parma-bg: #f2f4f7;
|
||||
--color-workflow-block-bg: #fcfcfd;
|
||||
--color-workflow-block-bg-transparent: rgb(252 252 253 / 0.9);
|
||||
--color-workflow-block-border-highlight: rgb(21 90 239 / 0.14);
|
||||
--color-workflow-block-wrapper-bg-1: #e9ebf0;
|
||||
--color-workflow-block-wrapper-bg-2: rgb(233 235 240 / 0.2);
|
||||
|
||||
--color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.15);
|
||||
--color-workflow-canvas-workflow-bg: #f2f4f7;
|
||||
--color-workflow-canvas-workflow-top-bar-1: rgb(242 244 247 / 0.9);
|
||||
--color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.05);
|
||||
--color-workflow-canvas-canvas-overlay: rgb(242 244 247 / 0.8);
|
||||
|
||||
--color-workflow-link-line-active: #296dff;
|
||||
--color-workflow-link-line-normal: #d0d5dc;
|
||||
--color-workflow-link-line-handle: #296dff;
|
||||
--color-workflow-link-line-normal-transparent: rgb(208 213 220 / 0.2);
|
||||
--color-workflow-link-line-failure-active: #f79009;
|
||||
--color-workflow-link-line-failure-handle: #f79009;
|
||||
--color-workflow-link-line-failure-button-bg: #dc6803;
|
||||
--color-workflow-link-line-failure-button-hover: #b54708;
|
||||
|
||||
--color-workflow-link-line-success-active: #17b26a;
|
||||
--color-workflow-link-line-success-handle: #17b26a;
|
||||
|
||||
--color-workflow-link-line-error-active: #f04438;
|
||||
--color-workflow-link-line-error-handle: #f04438;
|
||||
|
||||
--color-workflow-minimap-bg: #e9ebf0;
|
||||
--color-workflow-minimap-block: rgb(200 206 218 / 0.3);
|
||||
|
||||
--color-workflow-display-success-bg: #ecfdf3;
|
||||
--color-workflow-display-success-border-1: rgb(23 178 106 / 0.8);
|
||||
--color-workflow-display-success-border-2: rgb(23 178 106 / 0.5);
|
||||
--color-workflow-display-success-vignette-color: rgb(23 178 106 / 0.2);
|
||||
--color-workflow-display-success-bg-line-pattern: rgb(23 178 106 / 0.3);
|
||||
|
||||
--color-workflow-display-glass-1: rgb(255 255 255 / 0.12);
|
||||
--color-workflow-display-glass-2: rgb(255 255 255 / 0.5);
|
||||
--color-workflow-display-vignette-dark: rgb(0 0 0 / 0.12);
|
||||
--color-workflow-display-highlight: rgb(255 255 255 / 0.5);
|
||||
--color-workflow-display-outline: rgb(0 0 0 / 0.05);
|
||||
--color-workflow-display-error-bg: #fef3f2;
|
||||
--color-workflow-display-error-bg-line-pattern: rgb(240 68 56 / 0.3);
|
||||
--color-workflow-display-error-border-1: rgb(240 68 56 / 0.8);
|
||||
--color-workflow-display-error-border-2: rgb(240 68 56 / 0.5);
|
||||
--color-workflow-display-error-vignette-color: rgb(240 68 56 / 0.2);
|
||||
|
||||
--color-workflow-display-warning-bg: #fffaeb;
|
||||
--color-workflow-display-warning-bg-line-pattern: rgb(247 144 9 / 0.3);
|
||||
--color-workflow-display-warning-border-1: rgb(247 144 9 / 0.8);
|
||||
--color-workflow-display-warning-border-2: rgb(247 144 9 / 0.5);
|
||||
--color-workflow-display-warning-vignette-color: rgb(247 144 9 / 0.2);
|
||||
|
||||
--color-workflow-display-normal-bg: #f0f9ff;
|
||||
--color-workflow-display-normal-bg-line-pattern: rgb(11 165 236 / 0.3);
|
||||
--color-workflow-display-normal-border-1: rgb(11 165 236 / 0.8);
|
||||
--color-workflow-display-normal-border-2: rgb(11 165 236 / 0.5);
|
||||
--color-workflow-display-normal-vignette-color: rgb(11 165 236 / 0.2);
|
||||
|
||||
--color-workflow-display-disabled-bg: #f9fafb;
|
||||
--color-workflow-display-disabled-bg-line-pattern: rgb(200 206 218 / 0.3);
|
||||
--color-workflow-display-disabled-border-1: rgb(200 206 218 / 0.6);
|
||||
--color-workflow-display-disabled-border-2: rgb(200 206 218 / 0.4);
|
||||
--color-workflow-display-disabled-vignette-color: rgb(200 206 218 / 0.4);
|
||||
--color-workflow-display-disabled-outline: rgb(0 0 0 / 0);
|
||||
|
||||
--color-workflow-workflow-progress-bg-1: rgb(200 206 218 / 0.2);
|
||||
--color-workflow-workflow-progress-bg-2: rgb(200 206 218 / 0.04);
|
||||
|
||||
--color-workflow-debug-run-status-bg: rgb(255 68 5 / 0.08);
|
||||
--color-workflow-debug-breakpoint: #e62e05;
|
||||
--color-workflow-debug-text: #e62e05;
|
||||
--color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2);
|
||||
--color-workflow-debug-run-status-bg-alt: rgb(255 68 5 / 0.14);
|
||||
|
||||
--color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.08);
|
||||
--color-workflow-test-run-text: #004aeb;
|
||||
--color-workflow-test-run-run-status-bg-alt: rgb(21 90 239 / 0.14);
|
||||
--color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.14);
|
||||
--color-workflow-test-run-paused-text: #dc6803;
|
||||
|
||||
--color-divider-subtle: rgb(16 24 40 / 0.04);
|
||||
--color-divider-regular: rgb(16 24 40 / 0.08);
|
||||
--color-divider-deep: rgb(16 24 40 / 0.14);
|
||||
--color-divider-burn: rgb(16 24 40 / 0.04);
|
||||
--color-divider-intense: rgb(16 24 40 / 0.3);
|
||||
--color-divider-solid: #d0d5dc;
|
||||
--color-divider-solid-alt: #98a2b2;
|
||||
--color-divider-accent: #e5eaff;
|
||||
|
||||
--color-state-base-hover: rgb(200 206 218 / 0.2);
|
||||
--color-state-base-active: rgb(200 206 218 / 0.4);
|
||||
--color-state-base-hover-alt: rgb(200 206 218 / 0.4);
|
||||
--color-state-base-handle: rgb(16 24 40 / 0.2);
|
||||
--color-state-base-handle-hover: rgb(16 24 40 / 0.3);
|
||||
--color-state-base-hover-subtle: rgb(200 206 218 / 0.08);
|
||||
|
||||
--color-state-accent-hover: #eff4ff;
|
||||
--color-state-accent-active: rgb(21 90 239 / 0.08);
|
||||
--color-state-accent-hover-alt: #d1e0ff;
|
||||
--color-state-accent-solid: #296dff;
|
||||
--color-state-accent-active-alt: rgb(21 90 239 / 0.14);
|
||||
|
||||
--color-state-destructive-hover: #fef3f2;
|
||||
--color-state-destructive-hover-alt: #fee4e2;
|
||||
--color-state-destructive-active: #fecdca;
|
||||
--color-state-destructive-solid: #f04438;
|
||||
--color-state-destructive-border: #fda29b;
|
||||
--color-state-destructive-hover-transparent: rgb(254 243 242 / 0);
|
||||
|
||||
--color-state-success-hover: #ecfdf3;
|
||||
--color-state-success-hover-alt: #dcfae6;
|
||||
--color-state-success-active: #abefc6;
|
||||
--color-state-success-solid: #17b26a;
|
||||
|
||||
--color-state-warning-hover: #fffaeb;
|
||||
--color-state-warning-hover-alt: #fef0c7;
|
||||
--color-state-warning-active: #fedf89;
|
||||
--color-state-warning-solid: #f79009;
|
||||
--color-state-warning-hover-transparent: rgb(255 250 235 / 0);
|
||||
|
||||
--color-effects-highlight: #ffffff;
|
||||
--color-effects-highlight-lightmode-off: rgb(255 255 255 / 0);
|
||||
--color-effects-image-frame: #ffffff;
|
||||
--color-effects-icon-border: rgb(16 24 40 / 0.08);
|
||||
--color-effects-highlight-subtle: rgb(255 255 255 / 0.5);
|
||||
|
||||
--color-util-colors-orange-dark-orange-dark-50: #fff4ed;
|
||||
--color-util-colors-orange-dark-orange-dark-100: #ffe6d5;
|
||||
--color-util-colors-orange-dark-orange-dark-200: #ffd6ae;
|
||||
--color-util-colors-orange-dark-orange-dark-300: #ff9c66;
|
||||
--color-util-colors-orange-dark-orange-dark-400: #ff692e;
|
||||
--color-util-colors-orange-dark-orange-dark-500: #ff4405;
|
||||
--color-util-colors-orange-dark-orange-dark-600: #e62e05;
|
||||
--color-util-colors-orange-dark-orange-dark-700: #bc1b06;
|
||||
|
||||
--color-util-colors-orange-orange-50: #fef6ee;
|
||||
--color-util-colors-orange-orange-100: #fdead7;
|
||||
--color-util-colors-orange-orange-200: #f9dbaf;
|
||||
--color-util-colors-orange-orange-300: #f7b27a;
|
||||
--color-util-colors-orange-orange-400: #f38744;
|
||||
--color-util-colors-orange-orange-500: #ef6820;
|
||||
--color-util-colors-orange-orange-600: #e04f16;
|
||||
--color-util-colors-orange-orange-700: #b93815;
|
||||
--color-util-colors-orange-orange-100-transparent: rgb(253 234 215 / 0);
|
||||
|
||||
--color-util-colors-pink-pink-50: #fdf2fa;
|
||||
--color-util-colors-pink-pink-100: #fce7f6;
|
||||
--color-util-colors-pink-pink-200: #fcceee;
|
||||
--color-util-colors-pink-pink-300: #faa7e0;
|
||||
--color-util-colors-pink-pink-400: #f670c7;
|
||||
--color-util-colors-pink-pink-500: #ee46bc;
|
||||
--color-util-colors-pink-pink-600: #dd2590;
|
||||
--color-util-colors-pink-pink-700: #c11574;
|
||||
|
||||
--color-util-colors-fuchsia-fuchsia-50: #fdf4ff;
|
||||
--color-util-colors-fuchsia-fuchsia-100: #fbe8ff;
|
||||
--color-util-colors-fuchsia-fuchsia-200: #f6d0fe;
|
||||
--color-util-colors-fuchsia-fuchsia-300: #eeaafd;
|
||||
--color-util-colors-fuchsia-fuchsia-400: #e478fa;
|
||||
--color-util-colors-fuchsia-fuchsia-500: #d444f1;
|
||||
--color-util-colors-fuchsia-fuchsia-600: #ba24d5;
|
||||
--color-util-colors-fuchsia-fuchsia-700: #9f1ab1;
|
||||
|
||||
--color-util-colors-purple-purple-50: #f4f3ff;
|
||||
--color-util-colors-purple-purple-100: #ebe9fe;
|
||||
--color-util-colors-purple-purple-200: #d9d6fe;
|
||||
--color-util-colors-purple-purple-300: #bdb4fe;
|
||||
--color-util-colors-purple-purple-400: #9b8afb;
|
||||
--color-util-colors-purple-purple-500: #7a5af8;
|
||||
--color-util-colors-purple-purple-600: #6938ef;
|
||||
--color-util-colors-purple-purple-700: #5925dc;
|
||||
|
||||
--color-util-colors-indigo-indigo-50: #eef4ff;
|
||||
--color-util-colors-indigo-indigo-100: #e0eaff;
|
||||
--color-util-colors-indigo-indigo-200: #c7d7fe;
|
||||
--color-util-colors-indigo-indigo-300: #a4bcfd;
|
||||
--color-util-colors-indigo-indigo-400: #8098f9;
|
||||
--color-util-colors-indigo-indigo-500: #6172f3;
|
||||
--color-util-colors-indigo-indigo-600: #444ce7;
|
||||
--color-util-colors-indigo-indigo-700: #3538cd;
|
||||
|
||||
--color-util-colors-blue-blue-50: #eff8ff;
|
||||
--color-util-colors-blue-blue-100: #d1e9ff;
|
||||
--color-util-colors-blue-blue-200: #b2ddff;
|
||||
--color-util-colors-blue-blue-300: #84caff;
|
||||
--color-util-colors-blue-blue-400: #53b1fd;
|
||||
--color-util-colors-blue-blue-500: #2e90fa;
|
||||
--color-util-colors-blue-blue-600: #1570ef;
|
||||
--color-util-colors-blue-blue-700: #175cd3;
|
||||
|
||||
--color-util-colors-blue-light-blue-light-50: #f0f9ff;
|
||||
--color-util-colors-blue-light-blue-light-100: #e0f2fe;
|
||||
--color-util-colors-blue-light-blue-light-200: #b9e6fe;
|
||||
--color-util-colors-blue-light-blue-light-300: #7cd4fd;
|
||||
--color-util-colors-blue-light-blue-light-400: #36bffa;
|
||||
--color-util-colors-blue-light-blue-light-500: #0ba5ec;
|
||||
--color-util-colors-blue-light-blue-light-600: #0086c9;
|
||||
--color-util-colors-blue-light-blue-light-700: #026aa2;
|
||||
|
||||
--color-util-colors-gray-blue-gray-blue-50: #f8f9fc;
|
||||
--color-util-colors-gray-blue-gray-blue-100: #eaecf5;
|
||||
--color-util-colors-gray-blue-gray-blue-200: #d5d9eb;
|
||||
--color-util-colors-gray-blue-gray-blue-300: #b3b8db;
|
||||
--color-util-colors-gray-blue-gray-blue-400: #717bbc;
|
||||
--color-util-colors-gray-blue-gray-blue-500: #4e5ba6;
|
||||
--color-util-colors-gray-blue-gray-blue-600: #3e4784;
|
||||
--color-util-colors-gray-blue-gray-blue-700: #363f72;
|
||||
|
||||
--color-util-colors-blue-brand-blue-brand-50: #f5f7ff;
|
||||
--color-util-colors-blue-brand-blue-brand-100: #d1e0ff;
|
||||
--color-util-colors-blue-brand-blue-brand-200: #b2caff;
|
||||
--color-util-colors-blue-brand-blue-brand-300: #84abff;
|
||||
--color-util-colors-blue-brand-blue-brand-400: #5289ff;
|
||||
--color-util-colors-blue-brand-blue-brand-500: #296dff;
|
||||
--color-util-colors-blue-brand-blue-brand-600: #155aef;
|
||||
--color-util-colors-blue-brand-blue-brand-700: #004aeb;
|
||||
|
||||
--color-util-colors-red-red-50: #fef3f2;
|
||||
--color-util-colors-red-red-100: #fee4e2;
|
||||
--color-util-colors-red-red-200: #fecdca;
|
||||
--color-util-colors-red-red-300: #fda29b;
|
||||
--color-util-colors-red-red-400: #f97066;
|
||||
--color-util-colors-red-red-500: #f04438;
|
||||
--color-util-colors-red-red-600: #d92d20;
|
||||
--color-util-colors-red-red-700: #b42318;
|
||||
|
||||
--color-util-colors-green-green-50: #ecfdf3;
|
||||
--color-util-colors-green-green-100: #dcfae6;
|
||||
--color-util-colors-green-green-200: #abefc6;
|
||||
--color-util-colors-green-green-300: #75e0a7;
|
||||
--color-util-colors-green-green-400: #47cd89;
|
||||
--color-util-colors-green-green-500: #17b26a;
|
||||
--color-util-colors-green-green-600: #079455;
|
||||
--color-util-colors-green-green-700: #067647;
|
||||
|
||||
--color-util-colors-warning-warning-50: #fffaeb;
|
||||
--color-util-colors-warning-warning-100: #fef0c7;
|
||||
--color-util-colors-warning-warning-200: #fedf89;
|
||||
--color-util-colors-warning-warning-300: #fec84b;
|
||||
--color-util-colors-warning-warning-400: #fdb022;
|
||||
--color-util-colors-warning-warning-500: #f79009;
|
||||
--color-util-colors-warning-warning-600: #dc6803;
|
||||
--color-util-colors-warning-warning-700: #b54708;
|
||||
|
||||
--color-util-colors-yellow-yellow-50: #fefbe8;
|
||||
--color-util-colors-yellow-yellow-100: #fef7c3;
|
||||
--color-util-colors-yellow-yellow-200: #feee95;
|
||||
--color-util-colors-yellow-yellow-300: #fde272;
|
||||
--color-util-colors-yellow-yellow-400: #fac515;
|
||||
--color-util-colors-yellow-yellow-500: #eaaa08;
|
||||
--color-util-colors-yellow-yellow-600: #ca8504;
|
||||
--color-util-colors-yellow-yellow-700: #a15c07;
|
||||
|
||||
--color-util-colors-teal-teal-50: #f0fdf9;
|
||||
--color-util-colors-teal-teal-100: #ccfbef;
|
||||
--color-util-colors-teal-teal-200: #99f6e0;
|
||||
--color-util-colors-teal-teal-300: #5fe9d0;
|
||||
--color-util-colors-teal-teal-400: #2ed3b7;
|
||||
--color-util-colors-teal-teal-500: #15b79e;
|
||||
--color-util-colors-teal-teal-600: #0e9384;
|
||||
--color-util-colors-teal-teal-700: #107569;
|
||||
|
||||
--color-util-colors-cyan-cyan-50: #ecfdff;
|
||||
--color-util-colors-cyan-cyan-100: #cff9fe;
|
||||
--color-util-colors-cyan-cyan-200: #a5f0fc;
|
||||
--color-util-colors-cyan-cyan-300: #67e3f9;
|
||||
--color-util-colors-cyan-cyan-400: #22ccee;
|
||||
--color-util-colors-cyan-cyan-500: #06aed4;
|
||||
--color-util-colors-cyan-cyan-600: #088ab2;
|
||||
--color-util-colors-cyan-cyan-700: #0e7090;
|
||||
|
||||
--color-util-colors-violet-violet-50: #f5f3ff;
|
||||
--color-util-colors-violet-violet-100: #ece9fe;
|
||||
--color-util-colors-violet-violet-200: #ddd6fe;
|
||||
--color-util-colors-violet-violet-300: #c3b5fd;
|
||||
--color-util-colors-violet-violet-400: #a48afb;
|
||||
--color-util-colors-violet-violet-500: #875bf7;
|
||||
--color-util-colors-violet-violet-600: #7839ee;
|
||||
--color-util-colors-violet-violet-700: #6927da;
|
||||
|
||||
--color-util-colors-gray-gray-50: #f9fafb;
|
||||
--color-util-colors-gray-gray-100: #f2f4f7;
|
||||
--color-util-colors-gray-gray-200: #e9ebf0;
|
||||
--color-util-colors-gray-gray-300: #d0d5dc;
|
||||
--color-util-colors-gray-gray-400: #98a2b2;
|
||||
--color-util-colors-gray-gray-500: #676f83;
|
||||
--color-util-colors-gray-gray-600: #495464;
|
||||
--color-util-colors-gray-gray-700: #354052;
|
||||
|
||||
--color-util-colors-green-light-green-light-50: #f3fee7;
|
||||
--color-util-colors-green-light-green-light-100: #e3fbcc;
|
||||
--color-util-colors-green-light-green-light-200: #d0f8ab;
|
||||
--color-util-colors-green-light-green-light-300: #a6ef67;
|
||||
--color-util-colors-green-light-green-light-500: #66c61c;
|
||||
--color-util-colors-green-light-green-light-400: #85e13a;
|
||||
--color-util-colors-green-light-green-light-600: #4ca30d;
|
||||
--color-util-colors-green-light-green-light-700: #3b7c0f;
|
||||
|
||||
--color-util-colors-rose-rose-50: #fff1f3;
|
||||
--color-util-colors-rose-rose-100: #ffe4e8;
|
||||
--color-util-colors-rose-rose-200: #fecdd6;
|
||||
--color-util-colors-rose-rose-300: #fea3b4;
|
||||
--color-util-colors-rose-rose-400: #fd6f8e;
|
||||
--color-util-colors-rose-rose-500: #f63d68;
|
||||
--color-util-colors-rose-rose-600: #e31b54;
|
||||
--color-util-colors-rose-rose-700: #c01048;
|
||||
|
||||
--color-util-colors-midnight-midnight-50: #fbfbfc;
|
||||
--color-util-colors-midnight-midnight-100: #f0f2f5;
|
||||
--color-util-colors-midnight-midnight-200: #dfe1ea;
|
||||
--color-util-colors-midnight-midnight-300: #c6cbd9;
|
||||
--color-util-colors-midnight-midnight-400: #a7aec5;
|
||||
--color-util-colors-midnight-midnight-500: #828dad;
|
||||
--color-util-colors-midnight-midnight-600: #5d698d;
|
||||
--color-util-colors-midnight-midnight-700: #3e465e;
|
||||
|
||||
--color-third-party-LangChain: #1c3c3c;
|
||||
--color-third-party-Langfuse: #000000;
|
||||
--color-third-party-Github: #1b1f24;
|
||||
--color-third-party-Github-tertiary: #1b1f24;
|
||||
--color-third-party-Github-secondary: #1b1f24;
|
||||
--color-third-party-model-bg-openai: #e3e5e8;
|
||||
--color-third-party-model-bg-anthropic: #eeede7;
|
||||
--color-third-party-model-bg-default: #f9fafb;
|
||||
|
||||
--color-third-party-aws: #141f2e;
|
||||
--color-third-party-aws-alt: #0f1824;
|
||||
|
||||
--color-saas-background: #ffffff;
|
||||
--color-saas-pricing-grid-bg: rgb(200 206 218 / 0.5);
|
||||
--color-saas-dify-blue-static: #0033ff;
|
||||
--color-saas-dify-blue-static-hover: #002cd6;
|
||||
--color-saas-dify-blue-accessible: #0033ff;
|
||||
--color-saas-dify-blue-inverted: #0033ff;
|
||||
--color-saas-dify-blue-inverted-dimmed: #0033ff;
|
||||
|
||||
--color-saas-background-inverted: #0b0b0e;
|
||||
--color-saas-background-inverted-hover: #222225;
|
||||
|
||||
--color-dify-logo-blue: #0033ff;
|
||||
--color-dify-logo-black: #000000;
|
||||
--color-dify-logo-outline-1: rgb(0 0 0 / 0);
|
||||
--color-dify-logo-outline-2: rgb(0 0 0 / 0);
|
||||
|
||||
}
|
||||
816
packages/dify-ui/src/themes/tailwind-theme-var-define.ts
Normal file
816
packages/dify-ui/src/themes/tailwind-theme-var-define.ts
Normal file
@@ -0,0 +1,816 @@
|
||||
/* 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
|
||||
18
packages/dify-ui/tsconfig.json
Normal file
18
packages/dify-ui/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"outDir": "dist",
|
||||
"rootDir": "src",
|
||||
"isolatedModules": true,
|
||||
"verbatimModuleSyntax": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
Reference in New Issue
Block a user