@kupola/kupola 1.2.0 → 1.4.0

package/dist/css/theme-dark.css

@@ -0,0 +1,296 @@
+/* ===== Dark Theme ===== */
+
+[data-theme="dark"] {
+  --bg-base-default: #0C0C0D;
+  --bg-base-secondary: #1A1B1D;
+  --bg-base-tertiary: #222427;
+  --bg-overlay-l1: rgba(255, 255, 255, 0.04);
+  --bg-overlay-l2: rgba(255, 255, 255, 0.06);
+  --bg-overlay-l3: rgba(255, 255, 255, 0.08);
+  --bg-overlay-l4: rgba(255, 255, 255, 0.12);
+  --bg-menu: #1A1B1D;
+  --bg-tooltip: #1A1B1D;
+  --bg-invert: #FFFFFF;
+  --bg-invert-hover: #F5F5F5;
+  --bg-invert-active: #E5E5E5;
+  --bg-invert-disabled: rgba(255, 255, 255, 0.2);
+
+  --text-default: #D1D3DB;
+  --text-default-hover: #FFFFFF;
+  --text-default-active: #FFFFFF;
+  --text-secondary: #9599A6;
+  --text-secondary-hover: #D1D3DB;
+  --text-secondary-active: #D1D3DB;
+  --text-tertiary: #6B7280;
+  --text-disabled: #6F7482;
+  --text-onbrand: #FFFFFF;
+  --text-onaccent: #FFFFFF;
+
+  --icon-default: #D1D3DB;
+  --icon-default-hover: #FFFFFF;
+  --icon-default-active: #FFFFFF;
+  --icon-secondary: #9599A6;
+  --icon-secondary-hover: #D1D3DB;
+  --icon-secondary-active: #D1D3DB;
+  --icon-tertiary: #6B7280;
+  --icon-disabled: #6F7482;
+  --icon-onbrand: #FFFFFF;
+  --icon-onaccent: #FFFFFF;
+
+  --border-neutral-l1: rgba(255, 255, 255, 0.12);
+  --border-neutral-l2: rgba(255, 255, 255, 0.18);
+  --border-neutral-l3: rgba(255, 255, 255, 0.25);
+  --border-contrast: #0C0C0D;
+
+  --bg-brand-popup: rgba(83, 81, 100, 0.15);
+
+  --code-text: #D1D3DB;
+  --code-doc: #9599A6;
+  --code-link: #79B8FF;
+  --code-number: #FF9CA8;
+  --code-action: #D3ADF7;
+  --code-instruction: #B37FEB;
+  --code-function: #FFAD5B;
+  --code-constant: #61AFEF;
+  --code-parameter: #98C379;
+  --code-attribute: #E5C07B;
+  --code-tag: #E06C75;
+
+  --accent-teal: #32F08C;
+  --accent-coral: #FF9CA8;
+  --accent-amber: #FFAD5B;
+  --accent-lime: #A6EA39;
+  --accent-cyan: #78F2F2;
+  --accent-blue: #79B8FF;
+  --accent-magenta: #FB9DD7;
+  --accent-violet: #D3ADF7;
+  --accent-slate: #859EAD;
+
+  --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-on-primary: var(--text-onbrand);
+  --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);
+
+  --status-primary-default: #79B8FF;
+  --status-primary-hover: #A3CFFF;
+  --status-primary-active: #4FA3E8;
+  --status-primary-surface-l1: rgba(121, 184, 255, 0.12);
+  --status-primary-surface-l2: rgba(121, 184, 255, 0.18);
+  --status-primary-surface-l3: rgba(121, 184, 255, 0.24);
+  --status-info-default: #78F2F2;
+  --status-info-hover: #A5FFFF;
+  --status-info-active: #4FE5E5;
+  --status-info-surface-l1: rgba(120, 242, 242, 0.15);
+  --status-info-surface-l2: rgba(120, 242, 242, 0.22);
+  --status-info-surface-l3: rgba(120, 242, 242, 0.3);
+
+  --status-success-default: #32F08C;
+  --status-success-hover: #53F4A2;
+  --status-success-active: #22D678;
+  --status-success-surface-l1: rgba(50, 240, 140, 0.12);
+  --status-success-surface-l2: rgba(50, 240, 140, 0.18);
+  --status-success-surface-l3: rgba(50, 240, 140, 0.24);
+
+  --status-warning-default: #FFAD5B;
+  --status-warning-hover: #FFC080;
+  --status-warning-active: #E0954A;
+  --status-warning-surface-l1: rgba(255, 173, 91, 0.12);
+  --status-warning-surface-l2: rgba(255, 173, 91, 0.18);
+  --status-warning-surface-l3: rgba(255, 173, 91, 0.24);
+
+  --status-error-default: #FF9CA8;
+  --status-error-hover: #FFB8C0;
+  --status-error-active: #E07E88;
+  --status-error-surface-l1: rgba(255, 156, 168, 0.12);
+  --status-error-surface-l2: rgba(255, 156, 168, 0.18);
+  --status-error-surface-l3: rgba(255, 156, 168, 0.24);
+
+  --status-alert-default: #FFAD5B;
+  --status-alert-hover: #FFC080;
+  --status-alert-active: #E0954A;
+  --status-alert-surface-l1: rgba(255, 173, 91, 0.12);
+  --status-alert-surface-l2: rgba(255, 173, 91, 0.18);
+  --status-alert-surface-l3: rgba(255, 173, 91, 0.24);
+
+  --brand-green-100: #0A3A22;
+  --brand-green-200: #0F5A32;
+  --brand-green-300: #147A42;
+  --brand-green-400: #199A52;
+  --brand-green-500: #32F08C;
+  --brand-green-600: #53F4A2;
+  --brand-green-700: #74F7B8;
+  --brand-green-800: #95FBCE;
+  --brand-green-900: #B6FFE4;
+  --brand-green-1000: #D7FFF9;
+
+  --brand-red-100: #4D0000;
+  --brand-red-200: #8F0505;
+  --brand-red-300: #CB1010;
+  --brand-red-400: #E63737;
+  --brand-red-500: #FF6464;
+  --brand-red-600: #FF8080;
+  --brand-red-700: #FF9999;
+  --brand-red-800: #FFB3B3;
+  --brand-red-900: #FFCCCC;
+  --brand-red-1000: #FFE6E6;
+
+  --brand-yellow-100: #4D3000;
+  --brand-yellow-200: #8F5C05;
+  --brand-yellow-300: #CB8710;
+  --brand-yellow-400: #E6A637;
+  --brand-yellow-500: #FFD080;
+  --brand-yellow-600: #FFDA99;
+  --brand-yellow-700: #FFE3B2;
+  --brand-yellow-800: #FFECCC;
+  --brand-yellow-900: #FFF6E5;
+  --brand-yellow-1000: #FFFDF0;
+
+  --brand-blue-100: #00284D;
+  --brand-blue-200: #054C8F;
+  --brand-blue-300: #1071CB;
+  --brand-blue-400: #3792E6;
+  --brand-blue-500: #64B4FF;
+  --brand-blue-600: #80C1FF;
+  --brand-blue-700: #99CEFF;
+  --brand-blue-800: #B2DAFF;
+  --brand-blue-900: #CCE6FF;
+  --brand-blue-1000: #E5F3FF;
+
+  --brand-purple-100: #09004D;
+  --brand-purple-200: #15058F;
+  --brand-purple-300: #2610CB;
+  --brand-purple-400: #4C37E6;
+  --brand-purple-500: #7864FF;
+  --brand-purple-600: #8E80FF;
+  --brand-purple-700: #A599FF;
+  --brand-purple-800: #BBB2FF;
+  --brand-purple-900: #D2CCFF;
+  --brand-purple-1000: #E8E5FF;
+
+  --brand-gray-100: #030712;
+  --brand-gray-200: #111827;
+  --brand-gray-300: #1F2937;
+  --brand-gray-400: #374151;
+  --brand-gray-500: #4B5563;
+  --brand-gray-600: #6B7280;
+  --brand-gray-700: #9CA3AF;
+  --brand-gray-800: #D1D5DB;
+  --brand-gray-900: #E5E7EB;
+  --brand-gray-1000: #F3F4F6;
+
+  --viz-graph-bg: #1A1B1D;
+  --viz-graph-line: rgba(255, 255, 255, 0.08);
+  --viz-series-1: #32F08C;
+  --viz-series-2: #79B8FF;
+  --viz-series-3: #D3ADF7;
+  --viz-series-4: #FFAD5B;
+  --viz-series-5: #FB9DD7;
+  --viz-series-6: #78F2F2;
+
+  --border-brand: rgba(83, 81, 100, 0.4);
+  --border-brand-hover: rgba(83, 81, 100, 0.6);
+  --border-brand-active: rgba(83, 81, 100, 0.8);
+
+  --bg-brand: #535164;
+  --bg-brand-hover: #636174;
+  --bg-brand-disabled: rgba(83, 81, 100, 0.3);
+  --bg-brand-overlay: rgba(83, 81, 100, 0.12);
+  
+  --bg-error-default: #FF9CA8;
+  --bg-warning-default: #FFAD5B;
+  --bg-success-default: #32F08C;
+
+  --text-brand: #636174;
+  --text-brand-hover: #737184;
+  --text-brand-active: #838194;
+
+  --icon-brand: #636174;
+  --icon-brand-hover: #737184;
+  --icon-brand-active: #838194;
+
+  --bg-progress-success: #32F08C;
+  --bg-progress-warning: #FFAD5B;
+  --bg-progress-error: #FF9CA8;
+  --bg-progress-info: #79B8FF;
+
+  --bg-slider-track: rgba(255, 255, 255, 0.06);
+  --bg-slider-fill: #32F08C;
+  --bg-slider-thumb: #32F08C;
+
+  --bg-calendar-hover: rgba(255, 255, 255, 0.04);
+  --bg-calendar-selected: #32F08C;
+  --text-calendar-selected: #0C0C0D;
+
+  --bg-fileupload-border: rgba(255, 255, 255, 0.12);
+  --bg-fileupload-hover: rgba(50, 240, 140, 0.12);
+  --bg-fileupload-dragging: rgba(50, 240, 140, 0.18);
+
+  --bg-timeline-line: rgba(255, 255, 255, 0.12);
+  --bg-timeline-marker: #32F08C;
+
+  --body-xs-font-size: 10px;
+  --body-xs-line-height: 14px;
+  --body-sm-font-size: 11px;
+  --body-sm-line-height: 16px;
+  --body-base-font-size: 13px;
+  --body-base-line-height: 20px;
+  --body-strong-xs-font-weight: 500;
+  --body-strong-sm-font-weight: 500;
+  --body-strong-base-font-weight: 500;
+
+  --heading-3xs-font-size: 11px;
+  --heading-3xs-line-height: 16px;
+  --heading-2xs-font-size: 12px;
+  --heading-2xs-line-height: 18px;
+  --heading-xs-font-size: 13px;
+  --heading-xs-line-height: 20px;
+  --heading-sm-font-size: 16px;
+  --heading-sm-line-height: 24px;
+  --heading-base-font-size: 16px;
+  --heading-base-line-height: 22px;
+  --heading-md-font-size: 20px;
+  --heading-md-line-height: 28px;
+  --heading-lg-font-size: 24px;
+  --heading-lg-line-height: 32px;
+  --heading-xl-font-size: 28px;
+  --heading-xl-line-height: 36px;
+  --heading-2xl-font-size: 32px;
+  --heading-2xl-line-height: 40px;
+  --heading-3xl-font-size: 36px;
+  --heading-3xl-line-height: 44px;
+  --heading-font-weight: 600;
+
+  --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --code-editor-font-size: 13px;
+  --code-editor-font-weight: 450;
+  --code-editor-line-height: 20px;
+  --code-editor-letter-spacing: -0.02em;
+  --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --code-terminal-font-size: 13px;
+  --code-terminal-font-weight: 450;
+  --code-terminal-line-height: 20px;
+  
+  --icon-filter: brightness(0) saturate(0) invert(0.9);
+
+  .ds-input--prefix {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239599A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
+  }
+}

package/dist/css/theme-light.css

@@ -0,0 +1,296 @@
+/* ===== Light Theme ===== */
+
+[data-theme="light"] {
+  --bg-base-default: #FFFFFF;
+  --bg-base-secondary: #F5F6F8;
+  --bg-base-tertiary: #EDF0F5;
+  --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);
+  --bg-menu: #FFFFFF;
+  --bg-tooltip: #FFFFFF;
+  --bg-invert: #1A1B1D;
+  --bg-invert-hover: #222427;
+  --bg-invert-active: #3A3E44;
+  --bg-invert-disabled: rgba(0, 0, 0, 0.2);
+
+  --text-default: #1A1B1D;
+  --text-default-hover: #0C0C0D;
+  --text-default-active: #0C0C0D;
+  --text-secondary: #666B75;
+  --text-secondary-hover: #3A3E44;
+  --text-secondary-active: #3A3E44;
+  --text-tertiary: #6B7280;
+  --text-disabled: #6F7482;
+  --text-onbrand: #FFFFFF;
+  --text-onaccent: #FFFFFF;
+
+  --icon-default: #1A1B1D;
+  --icon-default-hover: #0C0C0D;
+  --icon-default-active: #0C0C0D;
+  --icon-secondary: #666B75;
+  --icon-secondary-hover: #3A3E44;
+  --icon-secondary-active: #3A3E44;
+  --icon-tertiary: #6B7280;
+  --icon-disabled: #6F7482;
+  --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: #FFFFFF;
+
+  --bg-brand-popup: rgba(83, 81, 100, 0.15);
+
+  --code-text: #1A1B1D;
+  --code-doc: #9599A6;
+  --code-link: #2E69FF;
+  --code-number: #CE5D97;
+  --code-action: #8B5CF6;
+  --code-instruction: #7C3AED;
+  --code-function: #EA580C;
+  --code-constant: #0EA5E9;
+  --code-parameter: #16A34A;
+  --code-attribute: #CA8A04;
+  --code-tag: #DC2626;
+
+  --accent-teal: #16A34A;
+  --accent-coral: #EF4444;
+  --accent-amber: #CA8A04;
+  --accent-lime: #65A30D;
+  --accent-cyan: #0891B2;
+  --accent-blue: #2563EB;
+  --accent-magenta: #D946EF;
+  --accent-violet: #7C3AED;
+  --accent-slate: #475569;
+
+  --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-on-primary: var(--text-onbrand);
+  --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);
+
+  --status-primary-default: #2E69FF;
+  --status-primary-hover: #255AEA;
+  --status-primary-active: #1D4FD9;
+  --status-primary-surface-l1: rgba(46, 105, 255, 0.08);
+  --status-primary-surface-l2: rgba(46, 105, 255, 0.12);
+  --status-primary-surface-l3: rgba(46, 105, 255, 0.16);
+  --status-info-default: #33b9c1;
+  --status-info-hover: #47c5cc;
+  --status-info-active: #269fa6;
+  --status-info-surface-l1: rgba(51, 185, 193, 0.1);
+  --status-info-surface-l2: rgba(51, 185, 193, 0.15);
+  --status-info-surface-l3: rgba(51, 185, 193, 0.2);
+
+  --status-success-default: #16A34A;
+  --status-success-hover: #15803D;
+  --status-success-active: #166534;
+  --status-success-surface-l1: rgba(22, 163, 74, 0.08);
+  --status-success-surface-l2: rgba(22, 163, 74, 0.12);
+  --status-success-surface-l3: rgba(22, 163, 74, 0.16);
+
+  --status-warning-default: #CA8A04;
+  --status-warning-hover: #A16207;
+  --status-warning-active: #854D0E;
+  --status-warning-surface-l1: rgba(202, 138, 4, 0.08);
+  --status-warning-surface-l2: rgba(202, 138, 4, 0.12);
+  --status-warning-surface-l3: rgba(202, 138, 4, 0.16);
+
+  --status-error-default: #DC2626;
+  --status-error-hover: #B91C1C;
+  --status-error-active: #991B1B;
+  --status-error-surface-l1: rgba(220, 38, 38, 0.08);
+  --status-error-surface-l2: rgba(220, 38, 38, 0.12);
+  --status-error-surface-l3: rgba(220, 38, 38, 0.16);
+
+  --status-alert-default: #F97316;
+  --status-alert-hover: #EA580C;
+  --status-alert-active: #C2410C;
+  --status-alert-surface-l1: rgba(249, 115, 22, 0.08);
+  --status-alert-surface-l2: rgba(249, 115, 22, 0.12);
+  --status-alert-surface-l3: rgba(249, 115, 22, 0.16);
+
+  --brand-green-100: #DCFCE7;
+  --brand-green-200: #BBF7D0;
+  --brand-green-300: #86EFAC;
+  --brand-green-400: #4ADE80;
+  --brand-green-500: #22C55E;
+  --brand-green-600: #16A34A;
+  --brand-green-700: #15803D;
+  --brand-green-800: #166534;
+  --brand-green-900: #14532D;
+  --brand-green-1000: #0D3F23;
+
+  --brand-red-100: #FEE2E2;
+  --brand-red-200: #FECACA;
+  --brand-red-300: #FCA5A5;
+  --brand-red-400: #F87171;
+  --brand-red-500: #EF4444;
+  --brand-red-600: #DC2626;
+  --brand-red-700: #B91C1C;
+  --brand-red-800: #991B1B;
+  --brand-red-900: #7F1D1D;
+  --brand-red-1000: #5C1313;
+
+  --brand-yellow-100: #FEFCE8;
+  --brand-yellow-200: #FEF9C3;
+  --brand-yellow-300: #FEF08A;
+  --brand-yellow-400: #FDE047;
+  --brand-yellow-500: #FACC15;
+  --brand-yellow-600: #EAB308;
+  --brand-yellow-700: #CA8A04;
+  --brand-yellow-800: #A16207;
+  --brand-yellow-900: #854D0E;
+  --brand-yellow-1000: #6B3B09;
+
+  --brand-blue-100: #EFF6FF;
+  --brand-blue-200: #DBEAFE;
+  --brand-blue-300: #BFDBFE;
+  --brand-blue-400: #93C5FD;
+  --brand-blue-500: #60A5FA;
+  --brand-blue-600: #3B82F6;
+  --brand-blue-700: #2563EB;
+  --brand-blue-800: #1D4ED8;
+  --brand-blue-900: #1E40AF;
+  --brand-blue-1000: #1E3A8A;
+
+  --brand-purple-100: #F5F3FF;
+  --brand-purple-200: #EDE9FE;
+  --brand-purple-300: #DDD6FE;
+  --brand-purple-400: #C4B5FD;
+  --brand-purple-500: #A78BFA;
+  --brand-purple-600: #8B5CF6;
+  --brand-purple-700: #7C3AED;
+  --brand-purple-800: #6D28D9;
+  --brand-purple-900: #5B21B6;
+  --brand-purple-1000: #4C1D95;
+
+  --brand-gray-100: #F3F4F6;
+  --brand-gray-200: #E5E7EB;
+  --brand-gray-300: #D1D5DB;
+  --brand-gray-400: #9CA3AF;
+  --brand-gray-500: #6B7280;
+  --brand-gray-600: #4B5563;
+  --brand-gray-700: #374151;
+  --brand-gray-800: #1F2937;
+  --brand-gray-900: #111827;
+  --brand-gray-1000: #030712;
+
+  --viz-graph-bg: #F5F6F8;
+  --viz-graph-line: rgba(0, 0, 0, 0.08);
+  --viz-series-1: #22C55E;
+  --viz-series-2: #2E69FF;
+  --viz-series-3: #8B5CF6;
+  --viz-series-4: #F97316;
+  --viz-series-5: #EC4899;
+  --viz-series-6: #06B6D4;
+
+  --border-brand: rgba(83, 81, 100, 0.4);
+  --border-brand-hover: rgba(83, 81, 100, 0.6);
+  --border-brand-active: rgba(83, 81, 100, 0.8);
+
+  --bg-brand: #535164;
+  --bg-brand-hover: #434154;
+  --bg-brand-disabled: rgba(83, 81, 100, 0.3);
+  --bg-brand-overlay: rgba(83, 81, 100, 0.08);
+  
+  --bg-error-default: #EF4444;
+  --bg-warning-default: #F59E0B;
+  --bg-success-default: #10B981;
+
+  --text-brand: #434154;
+  --text-brand-hover: #333144;
+  --text-brand-active: #232134;
+
+  --icon-brand: #434154;
+  --icon-brand-hover: #333144;
+  --icon-brand-active: #232134;
+
+  --bg-progress-success: #16A34A;
+  --bg-progress-warning: #CA8A04;
+  --bg-progress-error: #DC2626;
+  --bg-progress-info: #2E69FF;
+
+  --bg-slider-track: rgba(0, 0, 0, 0.06);
+  --bg-slider-fill: #22C55E;
+  --bg-slider-thumb: #22C55E;
+
+  --bg-calendar-hover: rgba(0, 0, 0, 0.04);
+  --bg-calendar-selected: #22C55E;
+  --text-calendar-selected: #FFFFFF;
+
+  --bg-fileupload-border: rgba(0, 0, 0, 0.12);
+  --bg-fileupload-hover: rgba(34, 197, 94, 0.08);
+  --bg-fileupload-dragging: rgba(34, 197, 94, 0.12);
+
+  --bg-timeline-line: rgba(0, 0, 0, 0.12);
+  --bg-timeline-marker: #22C55E;
+
+  --body-xs-font-size: 11px;
+  --body-xs-line-height: 16px;
+  --body-sm-font-size: 12px;
+  --body-sm-line-height: 18px;
+  --body-base-font-size: 13px;
+  --body-base-line-height: 20px;
+  --body-strong-xs-font-weight: 500;
+  --body-strong-sm-font-weight: 500;
+  --body-strong-base-font-weight: 500;
+
+  --heading-3xs-font-size: 11px;
+  --heading-3xs-line-height: 16px;
+  --heading-2xs-font-size: 12px;
+  --heading-2xs-line-height: 16px;
+  --heading-xs-font-size: 13px;
+  --heading-xs-line-height: 18px;
+  --heading-sm-font-size: 14px;
+  --heading-sm-line-height: 20px;
+  --heading-base-font-size: 16px;
+  --heading-base-line-height: 22px;
+  --heading-md-font-size: 18px;
+  --heading-md-line-height: 24px;
+  --heading-lg-font-size: 20px;
+  --heading-lg-line-height: 28px;
+  --heading-xl-font-size: 24px;
+  --heading-xl-line-height: 32px;
+  --heading-2xl-font-size: 28px;
+  --heading-2xl-line-height: 36px;
+  --heading-3xl-font-size: 32px;
+  --heading-3xl-line-height: 40px;
+  --heading-font-weight: 600;
+
+  --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --code-editor-font-size: 13px;
+  --code-editor-font-weight: 450;
+  --code-editor-line-height: 20px;
+  --code-editor-letter-spacing: -0.02em;
+  --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --code-terminal-font-size: 13px;
+  --code-terminal-font-weight: 450;
+  --code-terminal-line-height: 20px;
+  
+  --icon-filter: brightness(0) saturate(0) invert(0.4);
+
+  .ds-input--prefix {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666B75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line></svg>") !important;
+  }
+}