@kupola/kupola 1.9.13 → 1.9.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +132 -0
  2. package/css/kupola.css +1 -2
  3. package/css/{theme-dark.css → theme.css} +567 -340
  4. package/dist/kupola.css +566 -637
  5. package/package.json +1 -1
  6. package/plugins/vite-plugin-kupola.js +3 -3
  7. package/plugins/webpack-plugin-kupola.js +3 -3
  8. package/scripts/build-css.cjs +1 -2
  9. package/css/theme-light.css +0 -298
package/dist/kupola.css CHANGED
@@ -407,644 +407,573 @@
407
407
  --border-1: var(--border-neutral-l1);
408
408
  }
409
409
 
410
- /* ===== Dark Theme (Default) ===== */
411
-
412
- :root {
413
- --bg-base-default: #0C0C0D;
414
- --bg-base-secondary: #1A1B1D;
415
- --bg-base-tertiary: #222427;
416
- --bg-overlay-l1: rgba(255, 255, 255, 0.04);
417
- --bg-overlay-l2: rgba(255, 255, 255, 0.06);
418
- --bg-overlay-l3: rgba(255, 255, 255, 0.08);
419
- --bg-overlay-l4: rgba(255, 255, 255, 0.12);
420
- --bg-menu: #1A1B1D;
421
- --bg-tooltip: #1A1B1D;
422
- --bg-invert: #FFFFFF;
423
- --bg-invert-hover: #F5F5F5;
424
- --bg-invert-active: #E5E5E5;
425
- --bg-invert-disabled: rgba(255, 255, 255, 0.2);
426
- --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
427
- --text-default: #E5E7EB;
428
- --text-default-hover: #FFFFFF;
429
- --text-default-active: #FFFFFF;
430
- --text-secondary: #B8BDCA;
431
- --text-secondary-hover: #E5E7EB;
432
- --text-secondary-active: #E5E7EB;
433
- --text-tertiary: #9CA3AF;
434
- --text-disabled: #8B93A1;
435
- --text-onbrand: #FFFFFF;
436
- --text-onaccent: #FFFFFF;
437
- --icon-default: #E5E7EB;
438
- --icon-default-hover: #FFFFFF;
439
- --icon-default-active: #FFFFFF;
440
- --icon-secondary: #B8BDCA;
441
- --icon-secondary-hover: #E5E7EB;
442
- --icon-secondary-active: #E5E7EB;
443
- --icon-tertiary: #9CA3AF;
444
- --icon-disabled: #8B93A1;
445
- --icon-onbrand: #FFFFFF;
446
- --icon-onaccent: #FFFFFF;
447
- --border-neutral-l1: rgba(255, 255, 255, 0.12);
448
- --border-neutral-l2: rgba(255, 255, 255, 0.18);
449
- --border-neutral-l3: rgba(255, 255, 255, 0.25);
450
- --border-contrast: #0C0C0D;
451
- --bg-brand-popup: rgba(83, 81, 100, 0.15);
452
- --icon-filter: brightness(0) saturate(0) invert(0.9);
453
- }
454
-
455
- [data-theme="dark"] {
456
- --bg-base-default: #0C0C0D;
457
- --bg-base-secondary: #1A1B1D;
458
- --bg-base-tertiary: #222427;
459
- --bg-overlay-l1: rgba(255, 255, 255, 0.04);
460
- --bg-overlay-l2: rgba(255, 255, 255, 0.06);
461
- --bg-overlay-l3: rgba(255, 255, 255, 0.08);
462
- --bg-overlay-l4: rgba(255, 255, 255, 0.12);
463
- --bg-menu: #1A1B1D;
464
- --bg-tooltip: #1A1B1D;
465
- --bg-invert: #FFFFFF;
466
- --bg-invert-hover: #F5F5F5;
467
- --bg-invert-active: #E5E5E5;
468
- --bg-invert-disabled: rgba(255, 255, 255, 0.2);
469
-
470
- --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
471
-
472
- --text-default: #E5E7EB;
473
- --text-default-hover: #FFFFFF;
474
- --text-default-active: #FFFFFF;
475
- --text-secondary: #B8BDCA;
476
- --text-secondary-hover: #E5E7EB;
477
- --text-secondary-active: #E5E7EB;
478
- --text-tertiary: #9CA3AF;
479
- --text-disabled: #8B93A1;
480
- --text-onbrand: #FFFFFF;
481
- --text-onaccent: #FFFFFF;
482
-
483
- --icon-default: #E5E7EB;
484
- --icon-default-hover: #FFFFFF;
485
- --icon-default-active: #FFFFFF;
486
- --icon-secondary: #B8BDCA;
487
- --icon-secondary-hover: #E5E7EB;
488
- --icon-secondary-active: #E5E7EB;
489
- --icon-tertiary: #9CA3AF;
490
- --icon-disabled: #8B93A1;
491
- --icon-onbrand: #FFFFFF;
492
- --icon-onaccent: #FFFFFF;
493
-
494
- --border-neutral-l1: rgba(255, 255, 255, 0.12);
495
- --border-neutral-l2: rgba(255, 255, 255, 0.18);
496
- --border-neutral-l3: rgba(255, 255, 255, 0.25);
497
- --border-contrast: #0C0C0D;
498
-
499
- --bg-brand-popup: rgba(83, 81, 100, 0.15);
500
-
501
- --code-text: #D1D3DB;
502
- --code-doc: #9599A6;
503
- --code-link: #79B8FF;
504
- --code-number: #FF9CA8;
505
- --code-action: #D3ADF7;
506
- --code-instruction: #B37FEB;
507
- --code-function: #FFAD5B;
508
- --code-constant: #61AFEF;
509
- --code-parameter: #98C379;
510
- --code-attribute: #E5C07B;
511
- --code-tag: #E06C75;
512
-
513
- --accent-teal: #32F08C;
514
- --accent-coral: #FF9CA8;
515
- --accent-amber: #FFAD5B;
516
- --accent-lime: #A6EA39;
517
- --accent-cyan: #78F2F2;
518
- --accent-blue: #79B8FF;
519
- --accent-magenta: #FB9DD7;
520
- --accent-violet: #D3ADF7;
521
- --accent-slate: #859EAD;
522
-
523
- --color-background: var(--bg-base-default);
524
- --color-surface: var(--bg-base-secondary);
525
- --color-surface-variant: var(--bg-base-tertiary);
526
- --color-overlay-1: var(--bg-overlay-l1);
527
- --color-overlay-2: var(--bg-overlay-l2);
528
- --color-overlay-3: var(--bg-overlay-l3);
529
- --color-overlay-4: var(--bg-overlay-l4);
530
- --color-card: var(--bg-base-secondary);
531
- --color-tooltip: var(--bg-tooltip);
532
- --color-menu: var(--bg-menu);
533
- --color-foreground: var(--text-default);
534
- --color-foreground-hover: var(--text-default-hover);
535
- --color-on-surface: var(--text-default);
536
- --color-on-surface-variant: var(--text-secondary);
537
- --color-muted-foreground: var(--text-secondary);
538
- --color-disabled-foreground: var(--text-disabled);
539
- --color-on-primary: var(--text-onbrand);
540
- --color-border: var(--border-neutral-l1);
541
- --color-border-strong: var(--border-neutral-l2);
542
- --color-border-stronger: var(--border-neutral-l3);
543
- --color-border-contrast: var(--border-contrast);
544
- --color-outline: var(--border-neutral-l1);
545
-
546
- --status-primary-default: #79B8FF;
547
- --status-primary-hover: #A3CFFF;
548
- --status-primary-active: #4FA3E8;
549
- --status-primary-surface-l1: rgba(121, 184, 255, 0.12);
550
- --status-primary-surface-l2: rgba(121, 184, 255, 0.18);
551
- --status-primary-surface-l3: rgba(121, 184, 255, 0.24);
552
- --status-info-default: #78F2F2;
553
- --status-info-hover: #A5FFFF;
554
- --status-info-active: #4FE5E5;
555
- --status-info-surface-l1: rgba(120, 242, 242, 0.15);
556
- --status-info-surface-l2: rgba(120, 242, 242, 0.22);
557
- --status-info-surface-l3: rgba(120, 242, 242, 0.3);
558
-
559
- --status-success-default: #32F08C;
560
- --status-success-hover: #53F4A2;
561
- --status-success-active: #22D678;
562
- --status-success-surface-l1: rgba(50, 240, 140, 0.12);
563
- --status-success-surface-l2: rgba(50, 240, 140, 0.18);
564
- --status-success-surface-l3: rgba(50, 240, 140, 0.24);
565
-
566
- --status-warning-default: #FFAD5B;
567
- --status-warning-hover: #FFC080;
568
- --status-warning-active: #E0954A;
569
- --status-warning-surface-l1: rgba(255, 173, 91, 0.12);
570
- --status-warning-surface-l2: rgba(255, 173, 91, 0.18);
571
- --status-warning-surface-l3: rgba(255, 173, 91, 0.24);
572
-
573
- --status-error-default: #FF9CA8;
574
- --status-error-hover: #FFB8C0;
575
- --status-error-active: #E07E88;
576
- --status-error-surface-l1: rgba(255, 156, 168, 0.12);
577
- --status-error-surface-l2: rgba(255, 156, 168, 0.18);
578
- --status-error-surface-l3: rgba(255, 156, 168, 0.24);
579
-
580
- --status-alert-default: #FFAD5B;
581
- --status-alert-hover: #FFC080;
582
- --status-alert-active: #E0954A;
583
- --status-alert-surface-l1: rgba(255, 173, 91, 0.12);
584
- --status-alert-surface-l2: rgba(255, 173, 91, 0.18);
585
- --status-alert-surface-l3: rgba(255, 173, 91, 0.24);
586
-
587
- --brand-green-100: #0A3A22;
588
- --brand-green-200: #0F5A32;
589
- --brand-green-300: #147A42;
590
- --brand-green-400: #199A52;
591
- --brand-green-500: #32F08C;
592
- --brand-green-600: #53F4A2;
593
- --brand-green-700: #74F7B8;
594
- --brand-green-800: #95FBCE;
595
- --brand-green-900: #B6FFE4;
596
- --brand-green-1000: #D7FFF9;
597
-
598
- --brand-red-100: #4D0000;
599
- --brand-red-200: #8F0505;
600
- --brand-red-300: #CB1010;
601
- --brand-red-400: #E63737;
602
- --brand-red-500: #FF6464;
603
- --brand-red-600: #FF8080;
604
- --brand-red-700: #FF9999;
605
- --brand-red-800: #FFB3B3;
606
- --brand-red-900: #FFCCCC;
607
- --brand-red-1000: #FFE6E6;
608
-
609
- --brand-yellow-100: #4D3000;
610
- --brand-yellow-200: #8F5C05;
611
- --brand-yellow-300: #CB8710;
612
- --brand-yellow-400: #E6A637;
613
- --brand-yellow-500: #FFD080;
614
- --brand-yellow-600: #FFDA99;
615
- --brand-yellow-700: #FFE3B2;
616
- --brand-yellow-800: #FFECCC;
617
- --brand-yellow-900: #FFF6E5;
618
- --brand-yellow-1000: #FFFDF0;
619
-
620
- --brand-blue-100: #00284D;
621
- --brand-blue-200: #054C8F;
622
- --brand-blue-300: #1071CB;
623
- --brand-blue-400: #3792E6;
624
- --brand-blue-500: #64B4FF;
625
- --brand-blue-600: #80C1FF;
626
- --brand-blue-700: #99CEFF;
627
- --brand-blue-800: #B2DAFF;
628
- --brand-blue-900: #CCE6FF;
629
- --brand-blue-1000: #E5F3FF;
630
-
631
- --brand-purple-100: #09004D;
632
- --brand-purple-200: #15058F;
633
- --brand-purple-300: #2610CB;
634
- --brand-purple-400: #4C37E6;
635
- --brand-purple-500: #7864FF;
636
- --brand-purple-600: #8E80FF;
637
- --brand-purple-700: #A599FF;
638
- --brand-purple-800: #BBB2FF;
639
- --brand-purple-900: #D2CCFF;
640
- --brand-purple-1000: #E8E5FF;
641
-
642
- --brand-gray-100: #030712;
643
- --brand-gray-200: #111827;
644
- --brand-gray-300: #1F2937;
645
- --brand-gray-400: #374151;
646
- --brand-gray-500: #4B5563;
647
- --brand-gray-600: #6B7280;
648
- --brand-gray-700: #9CA3AF;
649
- --brand-gray-800: #D1D5DB;
650
- --brand-gray-900: #E5E7EB;
651
- --brand-gray-1000: #F3F4F6;
652
-
653
- --viz-graph-bg: #1A1B1D;
654
- --viz-graph-line: rgba(255, 255, 255, 0.08);
655
- --viz-series-1: #32F08C;
656
- --viz-series-2: #79B8FF;
657
- --viz-series-3: #D3ADF7;
658
- --viz-series-4: #FFAD5B;
659
- --viz-series-5: #FB9DD7;
660
- --viz-series-6: #78F2F2;
661
-
662
- --border-brand: rgba(83, 81, 100, 0.4);
663
- --border-brand-hover: rgba(83, 81, 100, 0.6);
664
- --border-brand-active: rgba(83, 81, 100, 0.8);
665
-
666
- --bg-brand: #535164;
667
- --bg-brand-hover: #636174;
668
- --bg-brand-disabled: rgba(83, 81, 100, 0.3);
669
- --bg-brand-overlay: rgba(83, 81, 100, 0.12);
670
-
671
- --bg-error-default: #FF9CA8;
672
- --bg-warning-default: #FFAD5B;
673
- --bg-success-default: #32F08C;
674
-
675
- --text-brand: #636174;
676
- --text-brand-hover: #737184;
677
- --text-brand-active: #838194;
678
-
679
- --icon-brand: #636174;
680
- --icon-brand-hover: #737184;
681
- --icon-brand-active: #838194;
682
-
683
- --bg-progress-success: #32F08C;
684
- --bg-progress-warning: #FFAD5B;
685
- --bg-progress-error: #FF9CA8;
686
- --bg-progress-info: #79B8FF;
687
-
688
- --bg-slider-track: rgba(255, 255, 255, 0.06);
689
- --bg-slider-fill: #32F08C;
690
- --bg-slider-thumb: #32F08C;
691
-
692
- --bg-calendar-hover: rgba(255, 255, 255, 0.04);
693
- --bg-calendar-selected: #32F08C;
694
- --text-calendar-selected: #0C0C0D;
695
-
696
- --bg-fileupload-border: rgba(255, 255, 255, 0.12);
697
- --bg-fileupload-hover: rgba(50, 240, 140, 0.12);
698
- --bg-fileupload-dragging: rgba(50, 240, 140, 0.18);
699
-
700
- --bg-timeline-line: rgba(255, 255, 255, 0.12);
701
- --bg-timeline-marker: #32F08C;
702
-
703
- --body-xs-font-size: 11px;
704
- --body-xs-line-height: 16px;
705
- --body-sm-font-size: 12px;
706
- --body-sm-line-height: 18px;
707
- --body-base-font-size: 13px;
708
- --body-base-line-height: 20px;
709
- --body-strong-xs-font-weight: 500;
710
- --body-strong-sm-font-weight: 500;
711
- --body-strong-base-font-weight: 500;
712
-
713
- --heading-3xs-font-size: 11px;
714
- --heading-3xs-line-height: 16px;
715
- --heading-2xs-font-size: 12px;
716
- --heading-2xs-line-height: 16px;
717
- --heading-xs-font-size: 13px;
718
- --heading-xs-line-height: 18px;
719
- --heading-sm-font-size: 14px;
720
- --heading-sm-line-height: 20px;
721
- --heading-base-font-size: 16px;
722
- --heading-base-line-height: 22px;
723
- --heading-md-font-size: 18px;
724
- --heading-md-line-height: 28px;
725
- --heading-lg-font-size: 24px;
726
- --heading-lg-line-height: 32px;
727
- --heading-xl-font-size: 28px;
728
- --heading-xl-line-height: 36px;
729
- --heading-2xl-font-size: 32px;
730
- --heading-2xl-line-height: 40px;
731
- --heading-3xl-font-size: 36px;
732
- --heading-3xl-line-height: 44px;
733
- --heading-font-weight: 600;
734
-
735
- --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
736
- --code-editor-font-size: 13px;
737
- --code-editor-font-weight: 450;
738
- --code-editor-line-height: 20px;
739
- --code-editor-letter-spacing: -0.02em;
740
- --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
741
- --code-terminal-font-size: 13px;
742
- --code-terminal-font-weight: 450;
743
- --code-terminal-line-height: 20px;
744
-
745
- --icon-filter: brightness(0) saturate(0) invert(0.9);
746
-
747
- .ds-input--prefix {
748
- 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;
749
- }
410
+ /* ===== Theme Variables ===== */
411
+
412
+ :root {
413
+ --bg-base-default: #0C0C0D;
414
+ --bg-base-secondary: #1A1B1D;
415
+ --bg-base-tertiary: #222427;
416
+ --bg-overlay-l1: rgba(255, 255, 255, 0.04);
417
+ --bg-overlay-l2: rgba(255, 255, 255, 0.06);
418
+ --bg-overlay-l3: rgba(255, 255, 255, 0.08);
419
+ --bg-overlay-l4: rgba(255, 255, 255, 0.12);
420
+ --bg-menu: #1A1B1D;
421
+ --bg-tooltip: #1A1B1D;
422
+ --bg-invert: #FFFFFF;
423
+ --bg-invert-hover: #F5F5F5;
424
+ --bg-invert-active: #E5E5E5;
425
+ --bg-invert-disabled: rgba(255, 255, 255, 0.2);
426
+ --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
427
+ --text-default: #E5E7EB;
428
+ --text-default-hover: #FFFFFF;
429
+ --text-default-active: #FFFFFF;
430
+ --text-secondary: #B8BDCA;
431
+ --text-secondary-hover: #E5E7EB;
432
+ --text-secondary-active: #E5E7EB;
433
+ --text-tertiary: #9CA3AF;
434
+ --text-disabled: #8B93A1;
435
+ --text-onbrand: #FFFFFF;
436
+ --text-onaccent: #FFFFFF;
437
+ --icon-default: #E5E7EB;
438
+ --icon-default-hover: #FFFFFF;
439
+ --icon-default-active: #FFFFFF;
440
+ --icon-secondary: #B8BDCA;
441
+ --icon-secondary-hover: #E5E7EB;
442
+ --icon-secondary-active: #E5E7EB;
443
+ --icon-tertiary: #9CA3AF;
444
+ --icon-disabled: #8B93A1;
445
+ --icon-onbrand: #FFFFFF;
446
+ --icon-onaccent: #FFFFFF;
447
+ --border-neutral-l1: rgba(255, 255, 255, 0.12);
448
+ --border-neutral-l2: rgba(255, 255, 255, 0.18);
449
+ --border-neutral-l3: rgba(255, 255, 255, 0.25);
450
+ --border-contrast: #0C0C0D;
451
+ --bg-brand-popup: rgba(83, 81, 100, 0.15);
452
+ --icon-filter: brightness(0) saturate(0) invert(0.9);
750
453
  }
751
- /* ===== Light Theme ===== */
752
-
753
- [data-theme="light"] {
754
- --bg-base-default: #FFFFFF;
755
- --bg-base-secondary: #F5F6F8;
756
- --bg-base-tertiary: #EDF0F5;
757
- --bg-overlay-l1: rgba(0, 0, 0, 0.04);
758
- --bg-overlay-l2: rgba(0, 0, 0, 0.06);
759
- --bg-overlay-l3: rgba(0, 0, 0, 0.08);
760
- --bg-overlay-l4: rgba(0, 0, 0, 0.12);
761
- --bg-menu: #FFFFFF;
762
- --bg-tooltip: #FFFFFF;
763
- --bg-invert: #1A1B1D;
764
- --bg-invert-hover: #222427;
765
- --bg-invert-active: #3A3E44;
766
- --bg-invert-disabled: rgba(0, 0, 0, 0.2);
767
-
768
- --special-bgtabsoverlay: rgba(0, 0, 0, 0.03);
769
-
770
- --text-default: #0F1117;
771
- --text-default-hover: #000000;
772
- --text-default-active: #000000;
773
- --text-secondary: #4B5563;
774
- --text-secondary-hover: #374151;
775
- --text-secondary-active: #374151;
776
- --text-tertiary: #5B6370;
777
- --text-disabled: #525A68;
778
- --text-onbrand: #FFFFFF;
779
- --text-onaccent: #FFFFFF;
780
-
781
- --icon-default: #0F1117;
782
- --icon-default-hover: #000000;
783
- --icon-default-active: #000000;
784
- --icon-secondary: #4B5563;
785
- --icon-secondary-hover: #374151;
786
- --icon-secondary-active: #374151;
787
- --icon-tertiary: #5B6370;
788
- --icon-disabled: #525A68;
789
- --icon-onbrand: #FFFFFF;
790
- --icon-onaccent: #FFFFFF;
791
-
792
- --border-neutral-l1: rgba(0, 0, 0, 0.12);
793
- --border-neutral-l2: rgba(0, 0, 0, 0.18);
794
- --border-neutral-l3: rgba(0, 0, 0, 0.25);
795
- --border-contrast: #FFFFFF;
796
-
797
- --bg-brand-popup: rgba(83, 81, 100, 0.15);
798
-
799
- --code-text: #1A1B1D;
800
- --code-doc: #9599A6;
801
- --code-link: #2E69FF;
802
- --code-number: #CE5D97;
803
- --code-action: #8B5CF6;
804
- --code-instruction: #7C3AED;
805
- --code-function: #EA580C;
806
- --code-constant: #0EA5E9;
807
- --code-parameter: #16A34A;
808
- --code-attribute: #CA8A04;
809
- --code-tag: #DC2626;
810
-
811
- --accent-teal: #16A34A;
812
- --accent-coral: #EF4444;
813
- --accent-amber: #CA8A04;
814
- --accent-lime: #65A30D;
815
- --accent-cyan: #0891B2;
816
- --accent-blue: #2563EB;
817
- --accent-magenta: #D946EF;
818
- --accent-violet: #7C3AED;
819
- --accent-slate: #475569;
820
-
821
- --color-background: var(--bg-base-default);
822
- --color-surface: var(--bg-base-secondary);
823
- --color-surface-variant: var(--bg-base-tertiary);
824
- --color-overlay-1: var(--bg-overlay-l1);
825
- --color-overlay-2: var(--bg-overlay-l2);
826
- --color-overlay-3: var(--bg-overlay-l3);
827
- --color-overlay-4: var(--bg-overlay-l4);
828
- --color-card: var(--bg-base-secondary);
829
- --color-tooltip: var(--bg-tooltip);
830
- --color-menu: var(--bg-menu);
831
- --color-foreground: var(--text-default);
832
- --color-foreground-hover: var(--text-default-hover);
833
- --color-on-surface: var(--text-default);
834
- --color-on-surface-variant: var(--text-secondary);
835
- --color-muted-foreground: var(--text-secondary);
836
- --color-disabled-foreground: var(--text-disabled);
837
- --color-on-primary: var(--text-onbrand);
838
- --color-border: var(--border-neutral-l1);
839
- --color-border-strong: var(--border-neutral-l2);
840
- --color-border-stronger: var(--border-neutral-l3);
841
- --color-border-contrast: var(--border-contrast);
842
- --color-outline: var(--border-neutral-l1);
843
-
844
- --status-primary-default: #2E69FF;
845
- --status-primary-hover: #255AEA;
846
- --status-primary-active: #1D4FD9;
847
- --status-primary-surface-l1: rgba(46, 105, 255, 0.08);
848
- --status-primary-surface-l2: rgba(46, 105, 255, 0.12);
849
- --status-primary-surface-l3: rgba(46, 105, 255, 0.16);
850
- --status-info-default: #33b9c1;
851
- --status-info-hover: #47c5cc;
852
- --status-info-active: #269fa6;
853
- --status-info-surface-l1: rgba(51, 185, 193, 0.1);
854
- --status-info-surface-l2: rgba(51, 185, 193, 0.15);
855
- --status-info-surface-l3: rgba(51, 185, 193, 0.2);
856
-
857
- --status-success-default: #16A34A;
858
- --status-success-hover: #15803D;
859
- --status-success-active: #166534;
860
- --status-success-surface-l1: rgba(22, 163, 74, 0.08);
861
- --status-success-surface-l2: rgba(22, 163, 74, 0.12);
862
- --status-success-surface-l3: rgba(22, 163, 74, 0.16);
863
-
864
- --status-warning-default: #CA8A04;
865
- --status-warning-hover: #A16207;
866
- --status-warning-active: #854D0E;
867
- --status-warning-surface-l1: rgba(202, 138, 4, 0.08);
868
- --status-warning-surface-l2: rgba(202, 138, 4, 0.12);
869
- --status-warning-surface-l3: rgba(202, 138, 4, 0.16);
870
-
871
- --status-error-default: #DC2626;
872
- --status-error-hover: #B91C1C;
873
- --status-error-active: #991B1B;
874
- --status-error-surface-l1: rgba(220, 38, 38, 0.08);
875
- --status-error-surface-l2: rgba(220, 38, 38, 0.12);
876
- --status-error-surface-l3: rgba(220, 38, 38, 0.16);
877
-
878
- --status-alert-default: #F97316;
879
- --status-alert-hover: #EA580C;
880
- --status-alert-active: #C2410C;
881
- --status-alert-surface-l1: rgba(249, 115, 22, 0.08);
882
- --status-alert-surface-l2: rgba(249, 115, 22, 0.12);
883
- --status-alert-surface-l3: rgba(249, 115, 22, 0.16);
884
-
885
- --brand-green-100: #DCFCE7;
886
- --brand-green-200: #BBF7D0;
887
- --brand-green-300: #86EFAC;
888
- --brand-green-400: #4ADE80;
889
- --brand-green-500: #22C55E;
890
- --brand-green-600: #16A34A;
891
- --brand-green-700: #15803D;
892
- --brand-green-800: #166534;
893
- --brand-green-900: #14532D;
894
- --brand-green-1000: #0D3F23;
895
-
896
- --brand-red-100: #FEE2E2;
897
- --brand-red-200: #FECACA;
898
- --brand-red-300: #FCA5A5;
899
- --brand-red-400: #F87171;
900
- --brand-red-500: #EF4444;
901
- --brand-red-600: #DC2626;
902
- --brand-red-700: #B91C1C;
903
- --brand-red-800: #991B1B;
904
- --brand-red-900: #7F1D1D;
905
- --brand-red-1000: #5C1313;
906
-
907
- --brand-yellow-100: #FEFCE8;
908
- --brand-yellow-200: #FEF9C3;
909
- --brand-yellow-300: #FEF08A;
910
- --brand-yellow-400: #FDE047;
911
- --brand-yellow-500: #FACC15;
912
- --brand-yellow-600: #EAB308;
913
- --brand-yellow-700: #CA8A04;
914
- --brand-yellow-800: #A16207;
915
- --brand-yellow-900: #854D0E;
916
- --brand-yellow-1000: #6B3B09;
917
-
918
- --brand-blue-100: #EFF6FF;
919
- --brand-blue-200: #DBEAFE;
920
- --brand-blue-300: #BFDBFE;
921
- --brand-blue-400: #93C5FD;
922
- --brand-blue-500: #60A5FA;
923
- --brand-blue-600: #3B82F6;
924
- --brand-blue-700: #2563EB;
925
- --brand-blue-800: #1D4ED8;
926
- --brand-blue-900: #1E40AF;
927
- --brand-blue-1000: #1E3A8A;
928
-
929
- --brand-purple-100: #F5F3FF;
930
- --brand-purple-200: #EDE9FE;
931
- --brand-purple-300: #DDD6FE;
932
- --brand-purple-400: #C4B5FD;
933
- --brand-purple-500: #A78BFA;
934
- --brand-purple-600: #8B5CF6;
935
- --brand-purple-700: #7C3AED;
936
- --brand-purple-800: #6D28D9;
937
- --brand-purple-900: #5B21B6;
938
- --brand-purple-1000: #4C1D95;
939
-
940
- --brand-gray-100: #F3F4F6;
941
- --brand-gray-200: #E5E7EB;
942
- --brand-gray-300: #D1D5DB;
943
- --brand-gray-400: #9CA3AF;
944
- --brand-gray-500: #6B7280;
945
- --brand-gray-600: #4B5563;
946
- --brand-gray-700: #374151;
947
- --brand-gray-800: #1F2937;
948
- --brand-gray-900: #111827;
949
- --brand-gray-1000: #030712;
950
-
951
- --viz-graph-bg: #F5F6F8;
952
- --viz-graph-line: rgba(0, 0, 0, 0.08);
953
- --viz-series-1: #22C55E;
954
- --viz-series-2: #2E69FF;
955
- --viz-series-3: #8B5CF6;
956
- --viz-series-4: #F97316;
957
- --viz-series-5: #EC4899;
958
- --viz-series-6: #06B6D4;
959
-
960
- --border-brand: rgba(83, 81, 100, 0.4);
961
- --border-brand-hover: rgba(83, 81, 100, 0.6);
962
- --border-brand-active: rgba(83, 81, 100, 0.8);
963
-
964
- --bg-brand: #535164;
965
- --bg-brand-hover: #434154;
966
- --bg-brand-disabled: rgba(83, 81, 100, 0.3);
967
- --bg-brand-overlay: rgba(83, 81, 100, 0.08);
968
-
969
- --bg-error-default: #EF4444;
970
- --bg-warning-default: #F59E0B;
971
- --bg-success-default: #10B981;
972
-
973
- --text-brand: #434154;
974
- --text-brand-hover: #333144;
975
- --text-brand-active: #232134;
976
-
977
- --icon-brand: #434154;
978
- --icon-brand-hover: #333144;
979
- --icon-brand-active: #232134;
980
-
981
- --bg-progress-success: #16A34A;
982
- --bg-progress-warning: #CA8A04;
983
- --bg-progress-error: #DC2626;
984
- --bg-progress-info: #2E69FF;
985
-
986
- --bg-slider-track: rgba(0, 0, 0, 0.06);
987
- --bg-slider-fill: #22C55E;
988
- --bg-slider-thumb: #22C55E;
989
-
990
- --bg-calendar-hover: rgba(0, 0, 0, 0.04);
991
- --bg-calendar-selected: #22C55E;
992
- --text-calendar-selected: #FFFFFF;
993
-
994
- --bg-fileupload-border: rgba(0, 0, 0, 0.12);
995
- --bg-fileupload-hover: rgba(34, 197, 94, 0.08);
996
- --bg-fileupload-dragging: rgba(34, 197, 94, 0.12);
997
-
998
- --bg-timeline-line: rgba(0, 0, 0, 0.12);
999
- --bg-timeline-marker: #22C55E;
1000
-
1001
- --body-xs-font-size: 11px;
1002
- --body-xs-line-height: 16px;
1003
- --body-sm-font-size: 12px;
1004
- --body-sm-line-height: 18px;
1005
- --body-base-font-size: 13px;
1006
- --body-base-line-height: 20px;
1007
- --body-strong-xs-font-weight: 500;
1008
- --body-strong-sm-font-weight: 500;
1009
- --body-strong-base-font-weight: 500;
1010
-
1011
- --heading-3xs-font-size: 11px;
1012
- --heading-3xs-line-height: 16px;
1013
- --heading-2xs-font-size: 12px;
1014
- --heading-2xs-line-height: 16px;
1015
- --heading-xs-font-size: 13px;
1016
- --heading-xs-line-height: 18px;
1017
- --heading-sm-font-size: 14px;
1018
- --heading-sm-line-height: 20px;
1019
- --heading-base-font-size: 16px;
1020
- --heading-base-line-height: 22px;
1021
- --heading-md-font-size: 18px;
1022
- --heading-md-line-height: 24px;
1023
- --heading-lg-font-size: 20px;
1024
- --heading-lg-line-height: 28px;
1025
- --heading-xl-font-size: 24px;
1026
- --heading-xl-line-height: 32px;
1027
- --heading-2xl-font-size: 28px;
1028
- --heading-2xl-line-height: 36px;
1029
- --heading-3xl-font-size: 32px;
1030
- --heading-3xl-line-height: 40px;
1031
- --heading-font-weight: 600;
1032
-
1033
- --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
1034
- --code-editor-font-size: 13px;
1035
- --code-editor-font-weight: 450;
1036
- --code-editor-line-height: 20px;
1037
- --code-editor-letter-spacing: -0.02em;
1038
- --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
1039
- --code-terminal-font-size: 13px;
1040
- --code-terminal-font-weight: 450;
1041
- --code-terminal-line-height: 20px;
1042
-
1043
- --icon-filter: brightness(0) saturate(0) invert(0.4);
1044
-
1045
- .ds-input--prefix {
1046
- 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;
1047
- }
454
+
455
+ [data-theme="dark"] {
456
+ --bg-base-default: #0C0C0D;
457
+ --bg-base-secondary: #1A1B1D;
458
+ --bg-base-tertiary: #222427;
459
+ --bg-overlay-l1: rgba(255, 255, 255, 0.04);
460
+ --bg-overlay-l2: rgba(255, 255, 255, 0.06);
461
+ --bg-overlay-l3: rgba(255, 255, 255, 0.08);
462
+ --bg-overlay-l4: rgba(255, 255, 255, 0.12);
463
+ --bg-menu: #1A1B1D;
464
+ --bg-tooltip: #1A1B1D;
465
+ --bg-invert: #FFFFFF;
466
+ --bg-invert-hover: #F5F5F5;
467
+ --bg-invert-active: #E5E5E5;
468
+ --bg-invert-disabled: rgba(255, 255, 255, 0.2);
469
+ --special-bgtabsoverlay: rgba(0, 0, 0, 0.2);
470
+ --text-default: #E5E7EB;
471
+ --text-default-hover: #FFFFFF;
472
+ --text-default-active: #FFFFFF;
473
+ --text-secondary: #B8BDCA;
474
+ --text-secondary-hover: #E5E7EB;
475
+ --text-secondary-active: #E5E7EB;
476
+ --text-tertiary: #9CA3AF;
477
+ --text-disabled: #8B93A1;
478
+ --text-onbrand: #FFFFFF;
479
+ --text-onaccent: #FFFFFF;
480
+ --icon-default: #E5E7EB;
481
+ --icon-default-hover: #FFFFFF;
482
+ --icon-default-active: #FFFFFF;
483
+ --icon-secondary: #B8BDCA;
484
+ --icon-secondary-hover: #E5E7EB;
485
+ --icon-secondary-active: #E5E7EB;
486
+ --icon-tertiary: #9CA3AF;
487
+ --icon-disabled: #8B93A1;
488
+ --icon-onbrand: #FFFFFF;
489
+ --icon-onaccent: #FFFFFF;
490
+ --border-neutral-l1: rgba(255, 255, 255, 0.12);
491
+ --border-neutral-l2: rgba(255, 255, 255, 0.18);
492
+ --border-neutral-l3: rgba(255, 255, 255, 0.25);
493
+ --border-contrast: #0C0C0D;
494
+ --bg-brand-popup: rgba(83, 81, 100, 0.15);
495
+ --code-text: #D1D3DB;
496
+ --code-doc: #9599A6;
497
+ --code-link: #79B8FF;
498
+ --code-number: #FF9CA8;
499
+ --code-action: #D3ADF7;
500
+ --code-instruction: #B37FEB;
501
+ --code-function: #FFAD5B;
502
+ --code-constant: #61AFEF;
503
+ --code-parameter: #98C379;
504
+ --code-attribute: #E5C07B;
505
+ --code-tag: #E06C75;
506
+ --accent-teal: #32F08C;
507
+ --accent-coral: #FF9CA8;
508
+ --accent-amber: #FFAD5B;
509
+ --accent-lime: #A6EA39;
510
+ --accent-cyan: #78F2F2;
511
+ --accent-blue: #79B8FF;
512
+ --accent-magenta: #FB9DD7;
513
+ --accent-violet: #D3ADF7;
514
+ --accent-slate: #859EAD;
515
+ --color-background: var(--bg-base-default);
516
+ --color-surface: var(--bg-base-secondary);
517
+ --color-surface-variant: var(--bg-base-tertiary);
518
+ --color-overlay-1: var(--bg-overlay-l1);
519
+ --color-overlay-2: var(--bg-overlay-l2);
520
+ --color-overlay-3: var(--bg-overlay-l3);
521
+ --color-overlay-4: var(--bg-overlay-l4);
522
+ --color-card: var(--bg-base-secondary);
523
+ --color-tooltip: var(--bg-tooltip);
524
+ --color-menu: var(--bg-menu);
525
+ --color-foreground: var(--text-default);
526
+ --color-foreground-hover: var(--text-default-hover);
527
+ --color-on-surface: var(--text-default);
528
+ --color-on-surface-variant: var(--text-secondary);
529
+ --color-muted-foreground: var(--text-secondary);
530
+ --color-disabled-foreground: var(--text-disabled);
531
+ --color-on-primary: var(--text-onbrand);
532
+ --color-border: var(--border-neutral-l1);
533
+ --color-border-strong: var(--border-neutral-l2);
534
+ --color-border-stronger: var(--border-neutral-l3);
535
+ --color-border-contrast: var(--border-contrast);
536
+ --color-outline: var(--border-neutral-l1);
537
+ --status-primary-default: #79B8FF;
538
+ --status-primary-hover: #A3CFFF;
539
+ --status-primary-active: #4FA3E8;
540
+ --status-primary-surface-l1: rgba(121, 184, 255, 0.12);
541
+ --status-primary-surface-l2: rgba(121, 184, 255, 0.18);
542
+ --status-primary-surface-l3: rgba(121, 184, 255, 0.24);
543
+ --status-info-default: #78F2F2;
544
+ --status-info-hover: #A5FFFF;
545
+ --status-info-active: #4FE5E5;
546
+ --status-info-surface-l1: rgba(120, 242, 242, 0.15);
547
+ --status-info-surface-l2: rgba(120, 242, 242, 0.22);
548
+ --status-info-surface-l3: rgba(120, 242, 242, 0.3);
549
+ --status-success-default: #32F08C;
550
+ --status-success-hover: #53F4A2;
551
+ --status-success-active: #22D678;
552
+ --status-success-surface-l1: rgba(50, 240, 140, 0.12);
553
+ --status-success-surface-l2: rgba(50, 240, 140, 0.18);
554
+ --status-success-surface-l3: rgba(50, 240, 140, 0.24);
555
+ --status-warning-default: #FFAD5B;
556
+ --status-warning-hover: #FFC080;
557
+ --status-warning-active: #E0954A;
558
+ --status-warning-surface-l1: rgba(255, 173, 91, 0.12);
559
+ --status-warning-surface-l2: rgba(255, 173, 91, 0.18);
560
+ --status-warning-surface-l3: rgba(255, 173, 91, 0.24);
561
+ --status-error-default: #FF9CA8;
562
+ --status-error-hover: #FFB8C0;
563
+ --status-error-active: #E07E88;
564
+ --status-error-surface-l1: rgba(255, 156, 168, 0.12);
565
+ --status-error-surface-l2: rgba(255, 156, 168, 0.18);
566
+ --status-error-surface-l3: rgba(255, 156, 168, 0.24);
567
+ --status-alert-default: #FFAD5B;
568
+ --status-alert-hover: #FFC080;
569
+ --status-alert-active: #E0954A;
570
+ --status-alert-surface-l1: rgba(255, 173, 91, 0.12);
571
+ --status-alert-surface-l2: rgba(255, 173, 91, 0.18);
572
+ --status-alert-surface-l3: rgba(255, 173, 91, 0.24);
573
+ --brand-green-100: #0A3A22;
574
+ --brand-green-200: #0F5A32;
575
+ --brand-green-300: #147A42;
576
+ --brand-green-400: #199A52;
577
+ --brand-green-500: #32F08C;
578
+ --brand-green-600: #53F4A2;
579
+ --brand-green-700: #74F7B8;
580
+ --brand-green-800: #95FBCE;
581
+ --brand-green-900: #B6FFE4;
582
+ --brand-green-1000: #D7FFF9;
583
+ --brand-red-100: #4D0000;
584
+ --brand-red-200: #8F0505;
585
+ --brand-red-300: #CB1010;
586
+ --brand-red-400: #E63737;
587
+ --brand-red-500: #FF6464;
588
+ --brand-red-600: #FF8080;
589
+ --brand-red-700: #FF9999;
590
+ --brand-red-800: #FFB3B3;
591
+ --brand-red-900: #FFCCCC;
592
+ --brand-red-1000: #FFE6E6;
593
+ --brand-yellow-100: #4D3000;
594
+ --brand-yellow-200: #8F5C05;
595
+ --brand-yellow-300: #CB8710;
596
+ --brand-yellow-400: #E6A637;
597
+ --brand-yellow-500: #FFD080;
598
+ --brand-yellow-600: #FFDA99;
599
+ --brand-yellow-700: #FFE3B2;
600
+ --brand-yellow-800: #FFECCC;
601
+ --brand-yellow-900: #FFF6E5;
602
+ --brand-yellow-1000: #FFFDF0;
603
+ --brand-blue-100: #00284D;
604
+ --brand-blue-200: #054C8F;
605
+ --brand-blue-300: #1071CB;
606
+ --brand-blue-400: #3792E6;
607
+ --brand-blue-500: #64B4FF;
608
+ --brand-blue-600: #80C1FF;
609
+ --brand-blue-700: #99CEFF;
610
+ --brand-blue-800: #B2DAFF;
611
+ --brand-blue-900: #CCE6FF;
612
+ --brand-blue-1000: #E5F3FF;
613
+ --brand-purple-100: #09004D;
614
+ --brand-purple-200: #15058F;
615
+ --brand-purple-300: #2610CB;
616
+ --brand-purple-400: #4C37E6;
617
+ --brand-purple-500: #7864FF;
618
+ --brand-purple-600: #8E80FF;
619
+ --brand-purple-700: #A599FF;
620
+ --brand-purple-800: #BBB2FF;
621
+ --brand-purple-900: #D2CCFF;
622
+ --brand-purple-1000: #E8E5FF;
623
+ --brand-gray-100: #030712;
624
+ --brand-gray-200: #111827;
625
+ --brand-gray-300: #1F2937;
626
+ --brand-gray-400: #374151;
627
+ --brand-gray-500: #4B5563;
628
+ --brand-gray-600: #6B7280;
629
+ --brand-gray-700: #9CA3AF;
630
+ --brand-gray-800: #D1D5DB;
631
+ --brand-gray-900: #E5E7EB;
632
+ --brand-gray-1000: #F3F4F6;
633
+ --viz-graph-bg: #1A1B1D;
634
+ --viz-graph-line: rgba(255, 255, 255, 0.08);
635
+ --viz-series-1: #32F08C;
636
+ --viz-series-2: #79B8FF;
637
+ --viz-series-3: #D3ADF7;
638
+ --viz-series-4: #FFAD5B;
639
+ --viz-series-5: #FB9DD7;
640
+ --viz-series-6: #78F2F2;
641
+ --border-brand: rgba(83, 81, 100, 0.4);
642
+ --border-brand-hover: rgba(83, 81, 100, 0.6);
643
+ --border-brand-active: rgba(83, 81, 100, 0.8);
644
+ --bg-brand: #535164;
645
+ --bg-brand-hover: #636174;
646
+ --bg-brand-disabled: rgba(83, 81, 100, 0.3);
647
+ --bg-brand-overlay: rgba(83, 81, 100, 0.12);
648
+ --bg-error-default: #FF9CA8;
649
+ --bg-warning-default: #FFAD5B;
650
+ --bg-success-default: #32F08C;
651
+ --text-brand: #636174;
652
+ --text-brand-hover: #737184;
653
+ --text-brand-active: #838194;
654
+ --icon-brand: #636174;
655
+ --icon-brand-hover: #737184;
656
+ --icon-brand-active: #838194;
657
+ --bg-progress-success: #32F08C;
658
+ --bg-progress-warning: #FFAD5B;
659
+ --bg-progress-error: #FF9CA8;
660
+ --bg-progress-info: #79B8FF;
661
+ --bg-slider-track: rgba(255, 255, 255, 0.06);
662
+ --bg-slider-fill: #32F08C;
663
+ --bg-slider-thumb: #32F08C;
664
+ --bg-calendar-hover: rgba(255, 255, 255, 0.04);
665
+ --bg-calendar-selected: #32F08C;
666
+ --text-calendar-selected: #0C0C0D;
667
+ --bg-fileupload-border: rgba(255, 255, 255, 0.12);
668
+ --bg-fileupload-hover: rgba(50, 240, 140, 0.12);
669
+ --bg-fileupload-dragging: rgba(50, 240, 140, 0.18);
670
+ --bg-timeline-line: rgba(255, 255, 255, 0.12);
671
+ --bg-timeline-marker: #32F08C;
672
+ --body-xs-font-size: 11px;
673
+ --body-xs-line-height: 16px;
674
+ --body-sm-font-size: 12px;
675
+ --body-sm-line-height: 18px;
676
+ --body-base-font-size: 13px;
677
+ --body-base-line-height: 20px;
678
+ --body-strong-xs-font-weight: 500;
679
+ --body-strong-sm-font-weight: 500;
680
+ --body-strong-base-font-weight: 500;
681
+ --heading-3xs-font-size: 11px;
682
+ --heading-3xs-line-height: 16px;
683
+ --heading-2xs-font-size: 12px;
684
+ --heading-2xs-line-height: 16px;
685
+ --heading-xs-font-size: 13px;
686
+ --heading-xs-line-height: 18px;
687
+ --heading-sm-font-size: 14px;
688
+ --heading-sm-line-height: 20px;
689
+ --heading-base-font-size: 16px;
690
+ --heading-base-line-height: 22px;
691
+ --heading-md-font-size: 18px;
692
+ --heading-md-line-height: 28px;
693
+ --heading-lg-font-size: 24px;
694
+ --heading-lg-line-height: 32px;
695
+ --heading-xl-font-size: 28px;
696
+ --heading-xl-line-height: 36px;
697
+ --heading-2xl-font-size: 32px;
698
+ --heading-2xl-line-height: 40px;
699
+ --heading-3xl-font-size: 36px;
700
+ --heading-3xl-line-height: 44px;
701
+ --heading-font-weight: 600;
702
+ --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
703
+ --code-editor-font-size: 13px;
704
+ --code-editor-font-weight: 450;
705
+ --code-editor-line-height: 20px;
706
+ --code-editor-letter-spacing: -0.02em;
707
+ --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
708
+ --code-terminal-font-size: 13px;
709
+ --code-terminal-font-weight: 450;
710
+ --code-terminal-line-height: 20px;
711
+ --icon-filter: brightness(0) saturate(0) invert(0.9);
712
+ .ds-input--prefix {
713
+ 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;
714
+ }
715
+ }
716
+
717
+ [data-theme="light"] {
718
+ --bg-base-default: #FFFFFF;
719
+ --bg-base-secondary: #F5F6F8;
720
+ --bg-base-tertiary: #EDF0F5;
721
+ --bg-overlay-l1: rgba(0, 0, 0, 0.04);
722
+ --bg-overlay-l2: rgba(0, 0, 0, 0.06);
723
+ --bg-overlay-l3: rgba(0, 0, 0, 0.08);
724
+ --bg-overlay-l4: rgba(0, 0, 0, 0.12);
725
+ --bg-menu: #FFFFFF;
726
+ --bg-tooltip: #FFFFFF;
727
+ --bg-invert: #1A1B1D;
728
+ --bg-invert-hover: #222427;
729
+ --bg-invert-active: #3A3E44;
730
+ --bg-invert-disabled: rgba(0, 0, 0, 0.2);
731
+ --special-bgtabsoverlay: rgba(0, 0, 0, 0.03);
732
+ --text-default: #0F1117;
733
+ --text-default-hover: #000000;
734
+ --text-default-active: #000000;
735
+ --text-secondary: #4B5563;
736
+ --text-secondary-hover: #374151;
737
+ --text-secondary-active: #374151;
738
+ --text-tertiary: #5B6370;
739
+ --text-disabled: #525A68;
740
+ --text-onbrand: #FFFFFF;
741
+ --text-onaccent: #FFFFFF;
742
+ --icon-default: #0F1117;
743
+ --icon-default-hover: #000000;
744
+ --icon-default-active: #000000;
745
+ --icon-secondary: #4B5563;
746
+ --icon-secondary-hover: #374151;
747
+ --icon-secondary-active: #374151;
748
+ --icon-tertiary: #5B6370;
749
+ --icon-disabled: #525A68;
750
+ --icon-onbrand: #FFFFFF;
751
+ --icon-onaccent: #FFFFFF;
752
+ --border-neutral-l1: rgba(0, 0, 0, 0.12);
753
+ --border-neutral-l2: rgba(0, 0, 0, 0.18);
754
+ --border-neutral-l3: rgba(0, 0, 0, 0.25);
755
+ --border-contrast: #FFFFFF;
756
+ --bg-brand-popup: rgba(83, 81, 100, 0.15);
757
+ --code-text: #1A1B1D;
758
+ --code-doc: #9599A6;
759
+ --code-link: #2E69FF;
760
+ --code-number: #CE5D97;
761
+ --code-action: #8B5CF6;
762
+ --code-instruction: #7C3AED;
763
+ --code-function: #EA580C;
764
+ --code-constant: #0EA5E9;
765
+ --code-parameter: #16A34A;
766
+ --code-attribute: #CA8A04;
767
+ --code-tag: #DC2626;
768
+ --accent-teal: #16A34A;
769
+ --accent-coral: #EF4444;
770
+ --accent-amber: #CA8A04;
771
+ --accent-lime: #65A30D;
772
+ --accent-cyan: #0891B2;
773
+ --accent-blue: #2563EB;
774
+ --accent-magenta: #D946EF;
775
+ --accent-violet: #7C3AED;
776
+ --accent-slate: #475569;
777
+ --color-background: var(--bg-base-default);
778
+ --color-surface: var(--bg-base-secondary);
779
+ --color-surface-variant: var(--bg-base-tertiary);
780
+ --color-overlay-1: var(--bg-overlay-l1);
781
+ --color-overlay-2: var(--bg-overlay-l2);
782
+ --color-overlay-3: var(--bg-overlay-l3);
783
+ --color-overlay-4: var(--bg-overlay-l4);
784
+ --color-card: var(--bg-base-secondary);
785
+ --color-tooltip: var(--bg-tooltip);
786
+ --color-menu: var(--bg-menu);
787
+ --color-foreground: var(--text-default);
788
+ --color-foreground-hover: var(--text-default-hover);
789
+ --color-on-surface: var(--text-default);
790
+ --color-on-surface-variant: var(--text-secondary);
791
+ --color-muted-foreground: var(--text-secondary);
792
+ --color-disabled-foreground: var(--text-disabled);
793
+ --color-on-primary: var(--text-onbrand);
794
+ --color-border: var(--border-neutral-l1);
795
+ --color-border-strong: var(--border-neutral-l2);
796
+ --color-border-stronger: var(--border-neutral-l3);
797
+ --color-border-contrast: var(--border-contrast);
798
+ --color-outline: var(--border-neutral-l1);
799
+ --status-primary-default: #2E69FF;
800
+ --status-primary-hover: #255AEA;
801
+ --status-primary-active: #1D4FD9;
802
+ --status-primary-surface-l1: rgba(46, 105, 255, 0.08);
803
+ --status-primary-surface-l2: rgba(46, 105, 255, 0.12);
804
+ --status-primary-surface-l3: rgba(46, 105, 255, 0.16);
805
+ --status-info-default: #33b9c1;
806
+ --status-info-hover: #47c5cc;
807
+ --status-info-active: #269fa6;
808
+ --status-info-surface-l1: rgba(51, 185, 193, 0.1);
809
+ --status-info-surface-l2: rgba(51, 185, 193, 0.15);
810
+ --status-info-surface-l3: rgba(51, 185, 193, 0.2);
811
+ --status-success-default: #16A34A;
812
+ --status-success-hover: #15803D;
813
+ --status-success-active: #166534;
814
+ --status-success-surface-l1: rgba(22, 163, 74, 0.08);
815
+ --status-success-surface-l2: rgba(22, 163, 74, 0.12);
816
+ --status-success-surface-l3: rgba(22, 163, 74, 0.16);
817
+ --status-warning-default: #CA8A04;
818
+ --status-warning-hover: #A16207;
819
+ --status-warning-active: #854D0E;
820
+ --status-warning-surface-l1: rgba(202, 138, 4, 0.08);
821
+ --status-warning-surface-l2: rgba(202, 138, 4, 0.12);
822
+ --status-warning-surface-l3: rgba(202, 138, 4, 0.16);
823
+ --status-error-default: #DC2626;
824
+ --status-error-hover: #B91C1C;
825
+ --status-error-active: #991B1B;
826
+ --status-error-surface-l1: rgba(220, 38, 38, 0.08);
827
+ --status-error-surface-l2: rgba(220, 38, 38, 0.12);
828
+ --status-error-surface-l3: rgba(220, 38, 38, 0.16);
829
+ --status-alert-default: #F97316;
830
+ --status-alert-hover: #EA580C;
831
+ --status-alert-active: #C2410C;
832
+ --status-alert-surface-l1: rgba(249, 115, 22, 0.08);
833
+ --status-alert-surface-l2: rgba(249, 115, 22, 0.12);
834
+ --status-alert-surface-l3: rgba(249, 115, 22, 0.16);
835
+ --brand-green-100: #DCFCE7;
836
+ --brand-green-200: #BBF7D0;
837
+ --brand-green-300: #86EFAC;
838
+ --brand-green-400: #4ADE80;
839
+ --brand-green-500: #22C55E;
840
+ --brand-green-600: #16A34A;
841
+ --brand-green-700: #15803D;
842
+ --brand-green-800: #166534;
843
+ --brand-green-900: #14532D;
844
+ --brand-green-1000: #0D3F23;
845
+ --brand-red-100: #FEE2E2;
846
+ --brand-red-200: #FECACA;
847
+ --brand-red-300: #FCA5A5;
848
+ --brand-red-400: #F87171;
849
+ --brand-red-500: #EF4444;
850
+ --brand-red-600: #DC2626;
851
+ --brand-red-700: #B91C1C;
852
+ --brand-red-800: #991B1B;
853
+ --brand-red-900: #7F1D1D;
854
+ --brand-red-1000: #5C1313;
855
+ --brand-yellow-100: #FEFCE8;
856
+ --brand-yellow-200: #FEF9C3;
857
+ --brand-yellow-300: #FEF08A;
858
+ --brand-yellow-400: #FDE047;
859
+ --brand-yellow-500: #FACC15;
860
+ --brand-yellow-600: #EAB308;
861
+ --brand-yellow-700: #CA8A04;
862
+ --brand-yellow-800: #A16207;
863
+ --brand-yellow-900: #854D0E;
864
+ --brand-yellow-1000: #6B3B09;
865
+ --brand-blue-100: #EFF6FF;
866
+ --brand-blue-200: #DBEAFE;
867
+ --brand-blue-300: #BFDBFE;
868
+ --brand-blue-400: #93C5FD;
869
+ --brand-blue-500: #60A5FA;
870
+ --brand-blue-600: #3B82F6;
871
+ --brand-blue-700: #2563EB;
872
+ --brand-blue-800: #1D4ED8;
873
+ --brand-blue-900: #1E40AF;
874
+ --brand-blue-1000: #1E3A8A;
875
+ --brand-purple-100: #F5F3FF;
876
+ --brand-purple-200: #EDE9FE;
877
+ --brand-purple-300: #DDD6FE;
878
+ --brand-purple-400: #C4B5FD;
879
+ --brand-purple-500: #A78BFA;
880
+ --brand-purple-600: #8B5CF6;
881
+ --brand-purple-700: #7C3AED;
882
+ --brand-purple-800: #6D28D9;
883
+ --brand-purple-900: #5B21B6;
884
+ --brand-purple-1000: #4C1D95;
885
+ --brand-gray-100: #F3F4F6;
886
+ --brand-gray-200: #E5E7EB;
887
+ --brand-gray-300: #D1D5DB;
888
+ --brand-gray-400: #9CA3AF;
889
+ --brand-gray-500: #6B7280;
890
+ --brand-gray-600: #4B5563;
891
+ --brand-gray-700: #374151;
892
+ --brand-gray-800: #1F2937;
893
+ --brand-gray-900: #111827;
894
+ --brand-gray-1000: #030712;
895
+ --viz-graph-bg: #F5F6F8;
896
+ --viz-graph-line: rgba(0, 0, 0, 0.08);
897
+ --viz-series-1: #22C55E;
898
+ --viz-series-2: #2E69FF;
899
+ --viz-series-3: #8B5CF6;
900
+ --viz-series-4: #F97316;
901
+ --viz-series-5: #EC4899;
902
+ --viz-series-6: #06B6D4;
903
+ --border-brand: rgba(83, 81, 100, 0.4);
904
+ --border-brand-hover: rgba(83, 81, 100, 0.6);
905
+ --border-brand-active: rgba(83, 81, 100, 0.8);
906
+ --bg-brand: #535164;
907
+ --bg-brand-hover: #434154;
908
+ --bg-brand-disabled: rgba(83, 81, 100, 0.3);
909
+ --bg-brand-overlay: rgba(83, 81, 100, 0.08);
910
+ --bg-error-default: #EF4444;
911
+ --bg-warning-default: #F59E0B;
912
+ --bg-success-default: #10B981;
913
+ --text-brand: #434154;
914
+ --text-brand-hover: #333144;
915
+ --text-brand-active: #232134;
916
+ --icon-brand: #434154;
917
+ --icon-brand-hover: #333144;
918
+ --icon-brand-active: #232134;
919
+ --bg-progress-success: #16A34A;
920
+ --bg-progress-warning: #CA8A04;
921
+ --bg-progress-error: #DC2626;
922
+ --bg-progress-info: #2E69FF;
923
+ --bg-slider-track: rgba(0, 0, 0, 0.06);
924
+ --bg-slider-fill: #22C55E;
925
+ --bg-slider-thumb: #22C55E;
926
+ --bg-calendar-hover: rgba(0, 0, 0, 0.04);
927
+ --bg-calendar-selected: #22C55E;
928
+ --text-calendar-selected: #FFFFFF;
929
+ --bg-fileupload-border: rgba(0, 0, 0, 0.12);
930
+ --bg-fileupload-hover: rgba(34, 197, 94, 0.08);
931
+ --bg-fileupload-dragging: rgba(34, 197, 94, 0.12);
932
+ --bg-timeline-line: rgba(0, 0, 0, 0.12);
933
+ --bg-timeline-marker: #22C55E;
934
+ --body-xs-font-size: 11px;
935
+ --body-xs-line-height: 16px;
936
+ --body-sm-font-size: 12px;
937
+ --body-sm-line-height: 18px;
938
+ --body-base-font-size: 13px;
939
+ --body-base-line-height: 20px;
940
+ --body-strong-xs-font-weight: 500;
941
+ --body-strong-sm-font-weight: 500;
942
+ --body-strong-base-font-weight: 500;
943
+ --heading-3xs-font-size: 11px;
944
+ --heading-3xs-line-height: 16px;
945
+ --heading-2xs-font-size: 12px;
946
+ --heading-2xs-line-height: 16px;
947
+ --heading-xs-font-size: 13px;
948
+ --heading-xs-line-height: 18px;
949
+ --heading-sm-font-size: 14px;
950
+ --heading-sm-line-height: 20px;
951
+ --heading-base-font-size: 16px;
952
+ --heading-base-line-height: 22px;
953
+ --heading-md-font-size: 18px;
954
+ --heading-md-line-height: 24px;
955
+ --heading-lg-font-size: 20px;
956
+ --heading-lg-line-height: 28px;
957
+ --heading-xl-font-size: 24px;
958
+ --heading-xl-line-height: 32px;
959
+ --heading-2xl-font-size: 28px;
960
+ --heading-2xl-line-height: 36px;
961
+ --heading-3xl-font-size: 32px;
962
+ --heading-3xl-line-height: 40px;
963
+ --heading-font-weight: 600;
964
+ --code-editor-font-family: 'JetBrains Mono', 'Fira Code', monospace;
965
+ --code-editor-font-size: 13px;
966
+ --code-editor-font-weight: 450;
967
+ --code-editor-line-height: 20px;
968
+ --code-editor-letter-spacing: -0.02em;
969
+ --code-terminal-font-family: 'JetBrains Mono', 'Fira Code', monospace;
970
+ --code-terminal-font-size: 13px;
971
+ --code-terminal-font-weight: 450;
972
+ --code-terminal-line-height: 20px;
973
+ --icon-filter: brightness(0) saturate(0) invert(0.4);
974
+ .ds-input--prefix {
975
+ 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;
976
+ }
1048
977
  }
1049
978
  /* ===== Brand Color Themes ===== */
1050
979
  /* 仅替换品牌绿色系，其他颜色保持不变 */