@vobs/ui 0.3.0 → 1.1.0

package/dist/tokens.css

@@ -1,570 +0,0 @@
-@layer vobs.tokens, vobs.base, vobs.components, vobs.utilities, vobs.application;
-@layer vobs.tokens {
-  :root {
-    --radius-2: 2px;
-    --radius-4: 4px;
-    --radius-6: 6px;
-    --radius-8: 8px;
-    --radius-10: 10px;
-    --radius-full: 9999px;
-    --spacer-0: 0px;
-    --spacer-2: 2px;
-    --spacer-4: 4px;
-    --spacer-6: 6px;
-    --spacer-8: 8px;
-    --spacer-10: 10px;
-    --spacer-12: 12px;
-    --spacer-14: 14px;
-    --spacer-16: 16px;
-    --spacer-20: 20px;
-    --spacer-24: 24px;
-    --spacer-32: 32px;
-    --spacer-40: 40px;
-    --k-icon-xs: 14px;
-    --k-icon-sm: 16px;
-    --k-icon-md: 20px;
-    --k-icon-lg: 24px;
-    --font-family-default: SF Pro Text;
-    --font-family-heading: SF Pro;
-    --font-family-mono: JetBrains Mono;
-    --font-family-base: var(--font-family-default);
-    --font-family-heading-alias: var(--font-family-heading);
-    --font-family-mono-alias: var(--font-family-mono);
-    --body-xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-xs-font-size: 10px;
-    --body-xs-font-weight: 400;
-    --body-xs-line-height: 14px;
-    --body-sm-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-sm-font-size: 11px;
-    --body-sm-font-weight: 400;
-    --body-sm-line-height: 16px;
-    --body-sm-strong-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-sm-strong-font-size: 11px;
-    --body-sm-strong-font-weight: 500;
-    --body-sm-strong-line-height: 16px;
-    --body-md-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-md-font-size: 12px;
-    --body-md-font-weight: 400;
-    --body-md-line-height: 18px;
-    --body-md-strong-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-md-strong-font-size: 12px;
-    --body-md-strong-font-weight: 500;
-    --body-md-strong-line-height: 18px;
-    --body-base-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-base-font-size: 13px;
-    --body-base-font-weight: 400;
-    --body-base-line-height: 20px;
-    --body-base-strong-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --body-base-strong-font-size: 13px;
-    --body-base-strong-font-weight: 500;
-    --body-base-strong-line-height: 20px;
-    --heading-3xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-3xs-font-size: 11px;
-    --heading-3xs-font-weight: 600;
-    --heading-3xs-line-height: 16px;
-    --heading-2xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-2xs-font-size: 12px;
-    --heading-2xs-font-weight: 600;
-    --heading-2xs-line-height: 18px;
-    --heading-xs-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-xs-font-size: 13px;
-    --heading-xs-font-weight: 600;
-    --heading-xs-line-height: 20px;
-    --heading-sm-font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
-    --heading-sm-font-size: 16px;
-    --heading-sm-font-weight: 600;
-    --heading-sm-line-height: 24px;
-    --heading-md-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-md-font-size: 20px;
-    --heading-md-font-weight: 600;
-    --heading-md-line-height: 28px;
-    --heading-lg-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-lg-font-size: 22px;
-    --heading-lg-font-weight: 600;
-    --heading-lg-line-height: 30px;
-    --heading-xl-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-xl-font-size: 24px;
-    --heading-xl-font-weight: 600;
-    --heading-xl-line-height: 32px;
-    --heading-2xl-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-2xl-font-size: 28px;
-    --heading-2xl-font-weight: 600;
-    --heading-2xl-line-height: 36px;
-    --heading-3xl-font-family: "SF Pro", system-ui, -apple-system, sans-serif;
-    --heading-3xl-font-size: 32px;
-    --heading-3xl-font-weight: 600;
-    --heading-3xl-line-height: 40px;
-    --code-editor-font-family: "JetBrains Mono", system-ui, -apple-system, sans-serif;
-    --code-editor-font-size: 13px;
-    --code-editor-font-weight: 450;
-    --code-editor-line-height: 20px;
-    --code-terminal-font-family: "JetBrains Mono", system-ui, -apple-system, sans-serif;
-    --code-terminal-font-size: 12px;
-    --code-terminal-font-weight: 450;
-    --code-terminal-line-height: 18px;
-    --font-weight-default: 400;
-    --font-weight-regular: var(--font-weight-default);
-    --font-weight-code: 450;
-    --font-weight-medium: 500;
-    --font-weight-strong: 600;
-    --font-weight-semibold: var(--font-weight-strong);
-    --z-index-dropdown: 2000;
-    --z-index-drawer: 2500;
-    --z-index-modal: 3000;
-    --z-index-notification: 3500;
-    --z-index-tooltip: 4000;
-    --transition-fast: 0.12s ease;
-    --transition-normal: 0.2s ease;
-    --transition-slow: 0.3s ease;
-    --breakpoint-sm: 576px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 1024px;
-    --breakpoint-xl: 1280px;
-  }
-
-  :root,
-  [data-theme="dark"] {
-    color-scheme: dark;
-    --bg-base-default: #1A1B1D;
-    --bg-base-secondary: #222427;
-    --bg-base-tertiary: #2A2D31;
-    --bg-tooltip: #1A1B1D;
-    --bg-menu: #202123;
-    --bg-invert: #DADDE5;
-    --bg-invert-hover: #EDEFF2;
-    --bg-invert-active: #979AA4;
-    --bg-invert-disabled: rgba(224, 226, 242, 0.12);
-    --bg-overlay-l1: rgba(224, 226, 242, 0.04);
-    --bg-overlay-l2: rgba(224, 226, 242, 0.06);
-    --bg-overlay-l3: rgba(224, 226, 242, 0.08);
-    --bg-overlay-l4: rgba(224, 226, 242, 0.12);
-    --text-default: #D1D3DB;
-    --text-default-hover: #F5F9FE;
-    --text-default-active: #F5F9FE;
-    --text-secondary: #9599A6;
-    --text-secondary-hover: #D1D3DB;
-    --text-secondary-active: #D1D3DB;
-    --text-tertiary: #666B75;
-    --text-disabled: #666B75;
-    --text-onbrand: #0C0C0D;
-    --text-onaccent: #0C0C0D;
-    --icon-default: #D1D3DB;
-    --icon-default-hover: #F5F9FE;
-    --icon-default-active: #F5F9FE;
-    --icon-secondary: #9599A6;
-    --icon-secondary-hover: #D1D3DB;
-    --icon-secondary-active: #D1D3DB;
-    --icon-tertiary: #666B75;
-    --icon-disabled: #666B75;
-    --icon-onbrand: #0C0C0D;
-    --icon-onaccent: #0C0C0D;
-    --border-neutral-l1: rgba(224, 226, 242, 0.1);
-    --border-neutral-l2: rgba(224, 226, 242, 0.16);
-    --border-neutral-l3: rgba(224, 226, 242, 0.2);
-    --border-contrast: #FFFFFF;
-    --status-primary-default: #387BFF;
-    --status-primary-hover: #4C88FF;
-    --status-primary-active: #1759DD;
-    --status-primary-surface-l1: rgba(53, 121, 255, 0.18);
-    --status-primary-surface-l2: rgba(53, 121, 255, 0.28);
-    --status-primary-surface-l3: rgba(53, 121, 255, 0.36);
-    --status-info-default: var(--status-primary-default);
-    --status-info-surface-l1: var(--status-primary-surface-l1);
-    --status-success-default: #33C192;
-    --status-success-hover: #5ED4AD;
-    --status-success-active: #27B082;
-    --status-success-surface-l1: rgba(0, 165, 110, 0.18);
-    --status-success-surface-l2: rgba(0, 165, 110, 0.28);
-    --status-success-surface-l3: rgba(0, 165, 110, 0.36);
-    --status-alert-default: #D29D00;
-    --status-alert-hover: #DFB949;
-    --status-alert-active: #AB8820;
-    --status-alert-surface-l1: rgba(210, 157, 0, 0.16);
-    --status-alert-surface-l2: rgba(210, 157, 0, 0.28);
-    --status-alert-surface-l3: rgba(210, 157, 0, 0.36);
-    --status-warning-default: #D27E24;
-    --status-warning-hover: #D78B28;
-    --status-warning-active: #B46510;
-    --status-warning-surface-l1: rgba(210, 126, 36, 0.16);
-    --status-warning-surface-l2: rgba(210, 126, 36, 0.28);
-    --status-warning-surface-l3: rgba(210, 126, 36, 0.36);
-    --status-error-default: #F65A5A;
-    --status-error-hover: #F86262;
-    --status-error-active: #B33636;
-    --status-error-surface-l1: rgba(246, 70, 70, 0.18);
-    --status-error-surface-l2: rgba(246, 70, 70, 0.28);
-    --status-error-surface-l3: rgba(246, 70, 70, 0.36);
-    --code-text: #E0E3EE;
-    --code-doc: #7F838C;
-    --code-link: #3C7EFF;
-    --code-number: #F48CCA;
-    --code-action: #B38CFF;
-    --code-instruction: #F0D8FF;
-    --code-function: #F29D79;
-    --code-constant: #80BBFF;
-    --code-parameter: #82D99F;
-    --code-attribute: #DED47E;
-    --code-tag: #F2858C;
-    --color-background: var(--bg-base-default);
-    --color-surface: var(--bg-base-secondary);
-    --color-surface-variant: var(--bg-base-tertiary);
-    --color-overlay-1: var(--bg-overlay-l1);
-    --color-overlay-2: var(--bg-overlay-l2);
-    --color-overlay-3: var(--bg-overlay-l3);
-    --color-overlay-4: var(--bg-overlay-l4);
-    --color-card: var(--bg-base-secondary);
-    --color-tooltip: var(--bg-tooltip);
-    --color-menu: var(--bg-menu);
-    --color-foreground: var(--text-default);
-    --color-foreground-hover: var(--text-default-hover);
-    --color-on-surface: var(--text-default);
-    --color-on-surface-variant: var(--text-secondary);
-    --color-muted-foreground: var(--text-secondary);
-    --color-disabled-foreground: var(--text-disabled);
-    --color-border: var(--border-neutral-l1);
-    --color-border-strong: var(--border-neutral-l2);
-    --color-border-stronger: var(--border-neutral-l3);
-    --color-border-contrast: var(--border-contrast);
-    --color-outline: var(--border-neutral-l1);
-    --color-primary: var(--bg-brand);
-    --color-primary-hover: var(--bg-brand-hover);
-    --color-primary-disabled: var(--bg-brand-disabled);
-    --color-primary-soft: var(--bg-brand-popup);
-    --color-accent: var(--bg-brand);
-    --color-on-primary: var(--text-onbrand);
-    --color-info: var(--status-primary-default);
-    --color-success: var(--status-success-default);
-    --color-warning: var(--status-warning-default);
-    --color-error: var(--status-error-default);
-    --color-error-soft: var(--status-error-surface-l1);
-    --color-foreground-muted: var(--text-secondary);
-    --accent-blue: var(--status-primary-default);
-    --code-string: var(--code-text);
-  }
-
-  [data-theme="light"] {
-    color-scheme: light;
-    --bg-base-default: #FFFFFF;
-    --bg-base-secondary: #F5F6F8;
-    --bg-base-tertiary: #EDF0F5;
-    --bg-tooltip: #0F1117;
-    --bg-menu: #FFFFFF;
-    --bg-invert: #0F1117;
-    --bg-invert-hover: #1F2937;
-    --bg-invert-active: #374151;
-    --bg-invert-disabled: rgba(15, 17, 23, 0.12);
-    --bg-overlay-l1: rgba(0, 0, 0, 0.04);
-    --bg-overlay-l2: rgba(0, 0, 0, 0.06);
-    --bg-overlay-l3: rgba(0, 0, 0, 0.08);
-    --bg-overlay-l4: rgba(0, 0, 0, 0.12);
-    --text-default: #0F1117;
-    --text-default-hover: #000000;
-    --text-default-active: #000000;
-    --text-secondary: #4B5563;
-    --text-secondary-hover: #1F2937;
-    --text-secondary-active: #1F2937;
-    --text-tertiary: #5B6370;
-    --text-disabled: #525A68;
-    --text-onbrand: #FFFFFF;
-    --text-onaccent: #FFFFFF;
-    --icon-default: #0F1117;
-    --icon-default-hover: #000000;
-    --icon-default-active: #000000;
-    --icon-secondary: #4B5563;
-    --icon-secondary-hover: #1F2937;
-    --icon-secondary-active: #1F2937;
-    --icon-tertiary: #5B6370;
-    --icon-disabled: #525A68;
-    --icon-onbrand: #FFFFFF;
-    --icon-onaccent: #FFFFFF;
-    --border-neutral-l1: rgba(0, 0, 0, 0.12);
-    --border-neutral-l2: rgba(0, 0, 0, 0.18);
-    --border-neutral-l3: rgba(0, 0, 0, 0.25);
-    --border-contrast: #0F1117;
-    --status-success-default: #16A34A;
-    --status-warning-default: #CA8A04;
-    --status-error-default: #DC2626;
-    --status-info-default: #2E69FF;
-    --status-success-surface-l1: rgba(22, 163, 74, 0.08);
-    --status-warning-surface-l1: rgba(202, 138, 4, 0.08);
-    --status-error-surface-l1: rgba(220, 38, 38, 0.08);
-    --status-info-surface-l1: rgba(46, 105, 255, 0.08);
-    --color-background: var(--bg-base-default);
-    --color-surface: var(--bg-base-secondary);
-    --color-surface-variant: var(--bg-base-tertiary);
-    --color-overlay-1: var(--bg-overlay-l1);
-    --color-overlay-2: var(--bg-overlay-l2);
-    --color-overlay-3: var(--bg-overlay-l3);
-    --color-overlay-4: var(--bg-overlay-l4);
-    --color-card: var(--bg-base-secondary);
-    --color-tooltip: var(--bg-tooltip);
-    --color-menu: var(--bg-menu);
-    --color-foreground: var(--text-default);
-    --color-foreground-hover: var(--text-default-hover);
-    --color-on-surface: var(--text-default);
-    --color-on-surface-variant: var(--text-secondary);
-    --color-muted-foreground: var(--text-secondary);
-    --color-disabled-foreground: var(--text-disabled);
-    --color-border: var(--border-neutral-l1);
-    --color-border-strong: var(--border-neutral-l2);
-    --color-border-stronger: var(--border-neutral-l3);
-    --color-border-contrast: var(--border-contrast);
-    --color-outline: var(--border-neutral-l1);
-    --color-primary: var(--bg-brand);
-    --color-primary-hover: var(--bg-brand-hover);
-    --color-primary-disabled: var(--bg-brand-disabled);
-    --color-primary-soft: var(--bg-brand-popup);
-    --color-accent: var(--bg-brand);
-    --color-on-primary: var(--text-onbrand);
-    --color-info: var(--status-primary-default);
-    --color-success: var(--status-success-default);
-    --color-warning: var(--status-warning-default);
-    --color-error: var(--status-error-default);
-    --color-error-soft: var(--status-error-surface-l1);
-    --color-foreground-muted: var(--text-secondary);
-    --accent-blue: var(--status-primary-default);
-    --code-string: var(--code-text);
-  }
-
-  :root,
-  [data-brand="green"] {
-    --bg-brand: #32F08C;
-    --bg-brand-hover: #0FDC78;
-    --bg-brand-disabled: rgba(50, 240, 140, 0.2);
-    --bg-brand-popup: rgba(50, 240, 140, 0.12);
-    --bg-brand-overlay: rgba(50, 240, 140, 0.12);
-    --text-brand: #32F08C;
-    --text-brand-hover: #0FDC78;
-    --icon-brand: #32F08C;
-    --icon-brand-hover: #0FDC78;
-    --border-brand: #32F08C;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"],
-  [data-theme="light"][data-brand="green"],
-  [data-theme="light"] [data-brand="green"] {
-    --text-brand: #1C874F;
-    --text-brand-hover: #09884A;
-    --icon-brand: #1C874F;
-    --icon-brand-hover: #09884A;
-    --border-brand: #1C874F;
-  }
-
-  [data-brand="blue"] {
-    --bg-brand: #80C1FF;
-    --bg-brand-hover: #6EA6DB;
-    --bg-brand-disabled: rgba(128, 193, 255, 0.3);
-    --bg-brand-popup: rgba(128, 193, 255, 0.12);
-    --bg-brand-overlay: rgba(128, 193, 255, 0.12);
-    --text-brand: #80C1FF;
-    --text-brand-hover: #6EA6DB;
-    --icon-brand: #80C1FF;
-    --icon-brand-hover: #6EA6DB;
-    --border-brand: #80C1FF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="blue"],
-  [data-theme="light"] [data-brand="blue"] {
-    --text-brand: #517AA2;
-    --text-brand-hover: #517AA2;
-    --icon-brand: #517AA2;
-    --icon-brand-hover: #517AA2;
-    --border-brand: #517AA2;
-  }
-
-  [data-brand="purple"] {
-    --bg-brand: #8E80FF;
-    --bg-brand-hover: #9E92FF;
-    --bg-brand-disabled: rgba(142, 128, 255, 0.3);
-    --bg-brand-popup: rgba(142, 128, 255, 0.12);
-    --bg-brand-overlay: rgba(142, 128, 255, 0.12);
-    --text-brand: #8E80FF;
-    --text-brand-hover: #9E92FF;
-    --icon-brand: #8E80FF;
-    --icon-brand-hover: #9E92FF;
-    --border-brand: #8E80FF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="purple"],
-  [data-theme="light"] [data-brand="purple"] {
-    --text-brand: #7468D0;
-    --text-brand-hover: #756CBE;
-    --icon-brand: #7468D0;
-    --icon-brand-hover: #756CBE;
-    --border-brand: #7468D0;
-  }
-
-  [data-brand="yellow"] {
-    --bg-brand: #FFD080;
-    --bg-brand-hover: #DBB36E;
-    --bg-brand-disabled: rgba(255, 208, 128, 0.3);
-    --bg-brand-popup: rgba(255, 208, 128, 0.12);
-    --bg-brand-overlay: rgba(255, 208, 128, 0.12);
-    --text-brand: #FFD080;
-    --text-brand-hover: #DBB36E;
-    --icon-brand: #FFD080;
-    --icon-brand-hover: #DBB36E;
-    --border-brand: #FFD080;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="yellow"],
-  [data-theme="light"] [data-brand="yellow"] {
-    --text-brand: #8C7347;
-    --text-brand-hover: #8C7347;
-    --icon-brand: #8C7347;
-    --icon-brand-hover: #8C7347;
-    --border-brand: #8C7347;
-  }
-
-  [data-brand="red"] {
-    --bg-brand: #FF8080;
-    --bg-brand-hover: #DB6E6E;
-    --bg-brand-disabled: rgba(255, 128, 128, 0.3);
-    --bg-brand-popup: rgba(255, 128, 128, 0.12);
-    --bg-brand-overlay: rgba(255, 128, 128, 0.12);
-    --text-brand: #FF8080;
-    --text-brand-hover: #DB6E6E;
-    --icon-brand: #FF8080;
-    --icon-brand-hover: #DB6E6E;
-    --border-brand: #FF8080;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="red"],
-  [data-theme="light"] [data-brand="red"] {
-    --text-brand: #B65B5B;
-    --text-brand-hover: #B65B5B;
-    --icon-brand: #B65B5B;
-    --icon-brand-hover: #B65B5B;
-    --border-brand: #B65B5B;
-  }
-
-  [data-brand="teal"] {
-    --bg-brand: #2DD288;
-    --bg-brand-hover: #27B575;
-    --bg-brand-disabled: rgba(45, 210, 136, 0.3);
-    --bg-brand-popup: rgba(45, 210, 136, 0.12);
-    --bg-brand-overlay: rgba(45, 210, 136, 0.12);
-    --text-brand: #2DD288;
-    --text-brand-hover: #27B575;
-    --icon-brand: #2DD288;
-    --icon-brand-hover: #27B575;
-    --border-brand: #2DD288;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="teal"],
-  [data-theme="light"] [data-brand="teal"] {
-    --text-brand: #1D8758;
-    --text-brand-hover: #1D8758;
-    --icon-brand: #1D8758;
-    --icon-brand-hover: #1D8758;
-    --border-brand: #1D8758;
-  }
-
-  [data-brand="cyan"] {
-    --bg-brand: #04CBE5;
-    --bg-brand-hover: #27D2E9;
-    --bg-brand-disabled: rgba(4, 203, 229, 0.3);
-    --bg-brand-popup: rgba(4, 203, 229, 0.12);
-    --bg-brand-overlay: rgba(4, 203, 229, 0.12);
-    --text-brand: #04CBE5;
-    --text-brand-hover: #27D2E9;
-    --icon-brand: #04CBE5;
-    --icon-brand-hover: #27D2E9;
-    --border-brand: #04CBE5;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="cyan"],
-  [data-theme="light"] [data-brand="cyan"] {
-    --text-brand: #038293;
-    --text-brand-hover: #188291;
-    --icon-brand: #038293;
-    --icon-brand-hover: #188291;
-    --border-brand: #038293;
-  }
-
-  [data-brand="violet"] {
-    --bg-brand: #BFA5FF;
-    --bg-brand-hover: #A48EDB;
-    --bg-brand-disabled: rgba(191, 165, 255, 0.3);
-    --bg-brand-popup: rgba(191, 165, 255, 0.12);
-    --bg-brand-overlay: rgba(191, 165, 255, 0.12);
-    --text-brand: #BFA5FF;
-    --text-brand-hover: #A48EDB;
-    --icon-brand: #BFA5FF;
-    --icon-brand-hover: #A48EDB;
-    --border-brand: #BFA5FF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="violet"],
-  [data-theme="light"] [data-brand="violet"] {
-    --text-brand: #7F6DA9;
-    --text-brand-hover: #7E6DA9;
-    --icon-brand: #7F6DA9;
-    --icon-brand-hover: #7E6DA9;
-    --border-brand: #7F6DA9;
-  }
-
-  [data-brand="slate"] {
-    --bg-brand: #AFB9CF;
-    --bg-brand-hover: #979FB2;
-    --bg-brand-disabled: rgba(175, 185, 207, 0.3);
-    --bg-brand-popup: rgba(175, 185, 207, 0.12);
-    --bg-brand-overlay: rgba(175, 185, 207, 0.12);
-    --text-brand: #AFB9CF;
-    --text-brand-hover: #979FB2;
-    --icon-brand: #AFB9CF;
-    --icon-brand-hover: #979FB2;
-    --border-brand: #AFB9CF;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="slate"],
-  [data-theme="light"] [data-brand="slate"] {
-    --text-brand: #707785;
-    --text-brand-hover: #717685;
-    --icon-brand: #707785;
-    --icon-brand-hover: #717685;
-    --border-brand: #707785;
-  }
-
-  [data-brand="neutral"] {
-    --bg-brand: #BABABA;
-    --bg-brand-hover: #A0A0A0;
-    --bg-brand-disabled: rgba(186, 186, 186, 0.3);
-    --bg-brand-popup: rgba(186, 186, 186, 0.12);
-    --bg-brand-overlay: rgba(186, 186, 186, 0.12);
-    --text-brand: #BABABA;
-    --text-brand-hover: #A0A0A0;
-    --icon-brand: #BABABA;
-    --icon-brand-hover: #A0A0A0;
-    --border-brand: #BABABA;
-    --text-onbrand: #0C0C0D;
-    --icon-onbrand: #0C0C0D;
-  }
-
-  [data-theme="light"][data-brand="neutral"],
-  [data-theme="light"] [data-brand="neutral"] {
-    --text-brand: #767676;
-    --text-brand-hover: #767676;
-    --icon-brand: #767676;
-    --icon-brand-hover: #767676;
-    --border-brand: #767676;
-  }
-}