@eocrm/design-system 0.7.0 → 0.8.1

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 +2 -2
  2. package/dist/components/FunnelChart/FunnelChart.css +1 -1
  3. package/dist/components/FunnelChart/funnelModel.d.ts +1 -1
  4. package/dist/styles/global.css +168 -22
  5. package/dist/styles/tokens.css +168 -22
  6. package/dist/styles.css +169 -23
  7. package/docs/components/Chart.md +12 -1
  8. package/docs/components/FunnelChart.md +2 -2
  9. package/package.json +2 -2
package/README.md CHANGED
@@ -78,9 +78,9 @@ The accent family defaults to blue. To switch the whole app to another accent, s
78
78
  | `ocean` | Cyan-blue | `EocrmOceanLightTokens` / `EocrmOceanDarkTokens` |
79
79
  | `moss` | Olive green | `EocrmMossLightTokens` / `EocrmMossDarkTokens` |
80
80
 
81
- Each accent swaps `--color-accent`, `-hover`, `-pressed`, `-fg`, `-bg-subtle`, `-subtle-bg` and `--ring-accent`, plus the default `Link` colour (`--color-link-fg` / `-hover`), in light, forced dark (`data-theme="dark"`) and OS dark. They ship in the existing `tokens.css` / `global.css`, so there is no new import. `AppProvider`'s `tokens` / `darkTokens` overrides win over `data-accent` in every theme (see [docs/setup.md](docs/setup.md)). Info colours stay blue under any accent; DropdownMenu checked items, the OptionsPicker selected row and StagePath done states follow the accent. In light theme, Teal pine's default `Link`s use a slightly brighter teal than the accent (`#007676`, AA on every grey surface) at medium weight (not inside headings, `<strong>` or `<th>`), because the accent alone sits too close to the navy body text to read as a link. Slate's default `Link`s are medium weight for the same reason. Indigo and Berry also set a slightly different link colour from their accent (`#4342c4`, `#a82c68`) to keep links at AA on every grey surface.
81
+ Each accent swaps `--color-accent`, `-hover`, `-pressed`, `-fg`, `-bg-subtle`, `-subtle-bg` and `--ring-accent`, plus the default `Link` colour (`--color-link-fg` / `-hover`), in light, forced dark (`data-theme="dark"`) and OS dark. They ship in the existing `tokens.css` / `global.css`, so there is no new import. `AppProvider`'s `tokens` / `darkTokens` overrides win over `data-accent` in every theme (see [docs/setup.md](docs/setup.md)). Info colours stay blue under any accent; DropdownMenu checked items, the OptionsPicker selected row and StagePath done states follow the accent. Chart colours (`--color-chart-series-1`…`8`, the Brand palette) keep the same eight hues but re-order so slot 1 matches the accent, so `Chart`'s first series and `FunnelChart`'s ramp follow it: blue and Slate lead with blue, Indigo and Grape with violet, Berry with magenta, Ocean and Teal pine with teal, Moss with green. The full orders are in [docs/components/Chart.md](docs/components/Chart.md); under Moss the first three slots separate less for deutan viewers, an accepted exception like the success-colour note below. In light theme, Teal pine's default `Link`s use a slightly brighter teal than the accent (`#007676`, AA on every grey surface) at medium weight (not inside headings, `<strong>` or `<th>`), because the accent alone sits too close to the navy body text to read as a link. Slate's default `Link`s are medium weight for the same reason. Indigo and Berry also set a slightly different link colour from their accent (`#4342c4`, `#a82c68`) to keep links at AA on every grey surface.
82
82
 
83
- Compose: each accent's Light / Dark objects sit beside `EocrmLightTokens` / `EocrmDarkTokens`; only accent colours differ. The link colour tokens are web-only (Compose has no `Link`), so Compose links keep the accent colour.
83
+ Compose: each accent's Light / Dark objects sit beside `EocrmLightTokens` / `EocrmDarkTokens`; only accent colours differ. The link colour and chart series tokens are web-only (Compose has no `Link` or `Chart`), so Compose links keep the accent colour.
84
84
 
85
85
  There is deliberately no red, orange or yellow accent: a primary button in those hues reads as a danger or warning action.
86
86
 
package/dist/components/FunnelChart/FunnelChart.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --funnel-chart-ramp-color: var(--chart-series-1);
57
57
  --funnel-chart-surface: var(--color-bg);
58
58
  --funnel-chart-ramp-target: var(--funnel-chart-surface);
59
- --funnel-chart-ramp-max-mix: 48%;
59
+ --funnel-chart-ramp-max-mix: 38%;
60
60
  --funnel-chart-hero-fg: var(--color-bg);
61
61
  --funnel-chart-hero-value-size: var(--font-size-2xl);
62
62
  --funnel-chart-hero-label-size: var(--font-size-xl);
package/dist/components/FunnelChart/funnelModel.d.ts CHANGED
@@ -10,7 +10,7 @@ export interface FunnelStage {
10
10
  label: string;
11
11
  /** Count for this stage. Non-finite or negative values are treated as 0. */
12
12
  value: number;
13
- /** Palette slot to highlight this stage with (e.g. Won in green); omit to follow the one-hue ramp. */
13
+ /** Palette slot to highlight this stage with. Slot hues follow `data-accent` and carry no meaning, so choose for contrast: slot 2 always contrasts with the ramp. Omit to follow the one-hue ramp. */
14
14
  color?: FunnelSlot;
15
15
  }
16
16
  /** A stage with sanitised value, resolved colour slot and derived ratios. */
package/dist/styles/global.css CHANGED
@@ -185,14 +185,14 @@
185
185
  --color-bg-sunken: #ebecf0;
186
186
  --color-border: #dfe1e6;
187
187
  --color-border-strong: #c1c7d0;
188
- --color-chart-series-1: #2a78d6;
189
- --color-chart-series-2: #e0602c;
190
- --color-chart-series-3: #13946a;
191
- --color-chart-series-4: #a87600;
192
- --color-chart-series-5: #d0558a;
193
- --color-chart-series-6: #008300;
194
- --color-chart-series-7: #6250d6;
195
- --color-chart-series-8: #e34948;
188
+ --color-chart-series-1: #2062ce;
189
+ --color-chart-series-2: #c5372f;
190
+ --color-chart-series-3: #0a999f;
191
+ --color-chart-series-4: #dd7b2b;
192
+ --color-chart-series-5: #c3518d;
193
+ --color-chart-series-6: #cfa529;
194
+ --color-chart-series-7: #624bbc;
195
+ --color-chart-series-8: #15915c;
196
196
  --color-danger: #c8300a;
197
197
  --color-danger-bg-subtle: #ffebe6;
198
198
  --color-danger-fg: #ffffff;
@@ -431,6 +431,14 @@
431
431
  --color-accent-hover: #92265b;
432
432
  --color-accent-pressed: #741e48;
433
433
  --color-accent-subtle-bg: #fbe6ef;
434
+ --color-chart-series-1: #c3518d;
435
+ --color-chart-series-2: #dd7b2b;
436
+ --color-chart-series-3: #2062ce;
437
+ --color-chart-series-4: #c5372f;
438
+ --color-chart-series-5: #0a999f;
439
+ --color-chart-series-6: #cfa529;
440
+ --color-chart-series-7: #624bbc;
441
+ --color-chart-series-8: #15915c;
434
442
  --color-link-fg: #a82c68;
435
443
  --color-link-fg-hover: #8c2456;
436
444
  --ring-accent: #b0306e;
@@ -443,6 +451,14 @@
443
451
  --color-accent-hover: #5c2e8c;
444
452
  --color-accent-pressed: #48226e;
445
453
  --color-accent-subtle-bg: #f1e8fa;
454
+ --color-chart-series-1: #624bbc;
455
+ --color-chart-series-2: #c5372f;
456
+ --color-chart-series-3: #0a999f;
457
+ --color-chart-series-4: #dd7b2b;
458
+ --color-chart-series-5: #c3518d;
459
+ --color-chart-series-6: #cfa529;
460
+ --color-chart-series-7: #2062ce;
461
+ --color-chart-series-8: #15915c;
446
462
  --color-link-fg: #7b3fb3;
447
463
  --color-link-fg-hover: #5c2e8c;
448
464
  --ring-accent: #7b3fb3;
@@ -455,6 +471,14 @@
455
471
  --color-accent-hover: #3d3cb0;
456
472
  --color-accent-pressed: #2f2e8c;
457
473
  --color-accent-subtle-bg: #e8e8fb;
474
+ --color-chart-series-1: #624bbc;
475
+ --color-chart-series-2: #c5372f;
476
+ --color-chart-series-3: #0a999f;
477
+ --color-chart-series-4: #dd7b2b;
478
+ --color-chart-series-5: #c3518d;
479
+ --color-chart-series-6: #cfa529;
480
+ --color-chart-series-7: #2062ce;
481
+ --color-chart-series-8: #15915c;
458
482
  --color-link-fg: #4342c4;
459
483
  --color-link-fg-hover: #3534a3;
460
484
  --ring-accent: #4c4bd1;
@@ -467,6 +491,14 @@
467
491
  --color-accent-hover: #364c15;
468
492
  --color-accent-pressed: #283a0f;
469
493
  --color-accent-subtle-bg: #ebf1df;
494
+ --color-chart-series-1: #15915c;
495
+ --color-chart-series-2: #624bbc;
496
+ --color-chart-series-3: #c3518d;
497
+ --color-chart-series-4: #dd7b2b;
498
+ --color-chart-series-5: #2062ce;
499
+ --color-chart-series-6: #cfa529;
500
+ --color-chart-series-7: #0a999f;
501
+ --color-chart-series-8: #c5372f;
470
502
  --color-link-fg: #45601b;
471
503
  --color-link-fg-hover: #364c15;
472
504
  --ring-accent: #45601b;
@@ -479,6 +511,14 @@
479
511
  --color-accent-hover: #085673;
480
512
  --color-accent-pressed: #06435a;
481
513
  --color-accent-subtle-bg: #ddeff6;
514
+ --color-chart-series-1: #0a999f;
515
+ --color-chart-series-2: #c5372f;
516
+ --color-chart-series-3: #2062ce;
517
+ --color-chart-series-4: #dd7b2b;
518
+ --color-chart-series-5: #c3518d;
519
+ --color-chart-series-6: #cfa529;
520
+ --color-chart-series-7: #624bbc;
521
+ --color-chart-series-8: #15915c;
482
522
  --color-link-fg: #0a6a8c;
483
523
  --color-link-fg-hover: #085673;
484
524
  --ring-accent: #0a6a8c;
@@ -503,6 +543,14 @@
503
543
  --color-accent-hover: #085752;
504
544
  --color-accent-pressed: #054440;
505
545
  --color-accent-subtle-bg: #ddeeec;
546
+ --color-chart-series-1: #0a999f;
547
+ --color-chart-series-2: #c5372f;
548
+ --color-chart-series-3: #2062ce;
549
+ --color-chart-series-4: #dd7b2b;
550
+ --color-chart-series-5: #c3518d;
551
+ --color-chart-series-6: #cfa529;
552
+ --color-chart-series-7: #624bbc;
553
+ --color-chart-series-8: #15915c;
506
554
  --color-link-fg: #007676;
507
555
  --color-link-fg-hover: #006666;
508
556
  --ring-accent: #0b6d67;
@@ -527,13 +575,14 @@
527
575
  --color-bg-sunken: #161a1d;
528
576
  --color-border: #38414a;
529
577
  --color-border-strong: #50585f;
530
- --color-chart-series-1: #3987e5;
531
- --color-chart-series-2: #d95926;
532
- --color-chart-series-3: #199e70;
533
- --color-chart-series-4: #c98500;
534
- --color-chart-series-5: #d55181;
535
- --color-chart-series-7: #9085e9;
536
- --color-chart-series-8: #e66767;
578
+ --color-chart-series-1: #3f82f0;
579
+ --color-chart-series-2: #d6483e;
580
+ --color-chart-series-3: #069fa6;
581
+ --color-chart-series-4: #cf6f19;
582
+ --color-chart-series-5: #ca5794;
583
+ --color-chart-series-6: #b48c05;
584
+ --color-chart-series-7: #7e6ade;
585
+ --color-chart-series-8: #219761;
537
586
  --color-danger: #f87168;
538
587
  --color-danger-bg-subtle: #42201d;
539
588
  --color-danger-fg: #1d2125;
@@ -645,6 +694,14 @@
645
694
  --color-accent-hover: #f7b2d0;
646
695
  --color-accent-pressed: #fbd3e4;
647
696
  --color-accent-subtle-bg: #4d2236;
697
+ --color-chart-series-1: #ca5794;
698
+ --color-chart-series-2: #cf6f19;
699
+ --color-chart-series-3: #3f82f0;
700
+ --color-chart-series-4: #d6483e;
701
+ --color-chart-series-5: #069fa6;
702
+ --color-chart-series-6: #b48c05;
703
+ --color-chart-series-7: #7e6ade;
704
+ --color-chart-series-8: #219761;
648
705
  --color-link-fg: #f28cb8;
649
706
  --color-link-fg-hover: #f7b2d0;
650
707
  --ring-accent: #f28cb8;
@@ -657,6 +714,14 @@
657
714
  --color-accent-hover: #dcc0f6;
658
715
  --color-accent-pressed: #ecdcfa;
659
716
  --color-accent-subtle-bg: #3b2752;
717
+ --color-chart-series-1: #7e6ade;
718
+ --color-chart-series-2: #d6483e;
719
+ --color-chart-series-3: #069fa6;
720
+ --color-chart-series-4: #cf6f19;
721
+ --color-chart-series-5: #ca5794;
722
+ --color-chart-series-6: #b48c05;
723
+ --color-chart-series-7: #3f82f0;
724
+ --color-chart-series-8: #219761;
660
725
  --color-link-fg: #c9a0f0;
661
726
  --color-link-fg-hover: #dcc0f6;
662
727
  --ring-accent: #c9a0f0;
@@ -669,6 +734,14 @@
669
734
  --color-accent-hover: #c2c5ff;
670
735
  --color-accent-pressed: #dfe1ff;
671
736
  --color-accent-subtle-bg: #2b2d5c;
737
+ --color-chart-series-1: #7e6ade;
738
+ --color-chart-series-2: #d6483e;
739
+ --color-chart-series-3: #069fa6;
740
+ --color-chart-series-4: #cf6f19;
741
+ --color-chart-series-5: #ca5794;
742
+ --color-chart-series-6: #b48c05;
743
+ --color-chart-series-7: #3f82f0;
744
+ --color-chart-series-8: #219761;
672
745
  --color-link-fg: #a3a8ff;
673
746
  --color-link-fg-hover: #c2c5ff;
674
747
  --ring-accent: #a3a8ff;
@@ -681,6 +754,14 @@
681
754
  --color-accent-hover: #c2dc95;
682
755
  --color-accent-pressed: #dcebc0;
683
756
  --color-accent-subtle-bg: #2e3b1a;
757
+ --color-chart-series-1: #219761;
758
+ --color-chart-series-2: #7e6ade;
759
+ --color-chart-series-3: #ca5794;
760
+ --color-chart-series-4: #cf6f19;
761
+ --color-chart-series-5: #3f82f0;
762
+ --color-chart-series-6: #b48c05;
763
+ --color-chart-series-7: #069fa6;
764
+ --color-chart-series-8: #d6483e;
684
765
  --color-link-fg: #a6c96a;
685
766
  --color-link-fg-hover: #c2dc95;
686
767
  --ring-accent: #a6c96a;
@@ -693,6 +774,14 @@
693
774
  --color-accent-hover: #9dd8ef;
694
775
  --color-accent-pressed: #c9eaf6;
695
776
  --color-accent-subtle-bg: #163e4d;
777
+ --color-chart-series-1: #069fa6;
778
+ --color-chart-series-2: #d6483e;
779
+ --color-chart-series-3: #3f82f0;
780
+ --color-chart-series-4: #cf6f19;
781
+ --color-chart-series-5: #ca5794;
782
+ --color-chart-series-6: #b48c05;
783
+ --color-chart-series-7: #7e6ade;
784
+ --color-chart-series-8: #219761;
696
785
  --color-link-fg: #6cc4e6;
697
786
  --color-link-fg-hover: #9dd8ef;
698
787
  --ring-accent: #6cc4e6;
@@ -717,6 +806,14 @@
717
806
  --color-accent-hover: #9ddfd7;
718
807
  --color-accent-pressed: #c6efea;
719
808
  --color-accent-subtle-bg: #173f3c;
809
+ --color-chart-series-1: #069fa6;
810
+ --color-chart-series-2: #d6483e;
811
+ --color-chart-series-3: #3f82f0;
812
+ --color-chart-series-4: #cf6f19;
813
+ --color-chart-series-5: #ca5794;
814
+ --color-chart-series-6: #b48c05;
815
+ --color-chart-series-7: #7e6ade;
816
+ --color-chart-series-8: #219761;
720
817
  --color-link-fg: #6dcfc4;
721
818
  --color-link-fg-hover: #9ddfd7;
722
819
  --ring-accent: #6dcfc4;
@@ -742,13 +839,14 @@
742
839
  --color-bg-sunken: #161a1d;
743
840
  --color-border: #38414a;
744
841
  --color-border-strong: #50585f;
745
- --color-chart-series-1: #3987e5;
746
- --color-chart-series-2: #d95926;
747
- --color-chart-series-3: #199e70;
748
- --color-chart-series-4: #c98500;
749
- --color-chart-series-5: #d55181;
750
- --color-chart-series-7: #9085e9;
751
- --color-chart-series-8: #e66767;
842
+ --color-chart-series-1: #3f82f0;
843
+ --color-chart-series-2: #d6483e;
844
+ --color-chart-series-3: #069fa6;
845
+ --color-chart-series-4: #cf6f19;
846
+ --color-chart-series-5: #ca5794;
847
+ --color-chart-series-6: #b48c05;
848
+ --color-chart-series-7: #7e6ade;
849
+ --color-chart-series-8: #219761;
752
850
  --color-danger: #f87168;
753
851
  --color-danger-bg-subtle: #42201d;
754
852
  --color-danger-fg: #1d2125;
@@ -859,6 +957,14 @@
859
957
  --color-accent-hover: #f7b2d0;
860
958
  --color-accent-pressed: #fbd3e4;
861
959
  --color-accent-subtle-bg: #4d2236;
960
+ --color-chart-series-1: #ca5794;
961
+ --color-chart-series-2: #cf6f19;
962
+ --color-chart-series-3: #3f82f0;
963
+ --color-chart-series-4: #d6483e;
964
+ --color-chart-series-5: #069fa6;
965
+ --color-chart-series-6: #b48c05;
966
+ --color-chart-series-7: #7e6ade;
967
+ --color-chart-series-8: #219761;
862
968
  --color-link-fg: #f28cb8;
863
969
  --color-link-fg-hover: #f7b2d0;
864
970
  --ring-accent: #f28cb8;
@@ -870,6 +976,14 @@
870
976
  --color-accent-hover: #dcc0f6;
871
977
  --color-accent-pressed: #ecdcfa;
872
978
  --color-accent-subtle-bg: #3b2752;
979
+ --color-chart-series-1: #7e6ade;
980
+ --color-chart-series-2: #d6483e;
981
+ --color-chart-series-3: #069fa6;
982
+ --color-chart-series-4: #cf6f19;
983
+ --color-chart-series-5: #ca5794;
984
+ --color-chart-series-6: #b48c05;
985
+ --color-chart-series-7: #3f82f0;
986
+ --color-chart-series-8: #219761;
873
987
  --color-link-fg: #c9a0f0;
874
988
  --color-link-fg-hover: #dcc0f6;
875
989
  --ring-accent: #c9a0f0;
@@ -881,6 +995,14 @@
881
995
  --color-accent-hover: #c2c5ff;
882
996
  --color-accent-pressed: #dfe1ff;
883
997
  --color-accent-subtle-bg: #2b2d5c;
998
+ --color-chart-series-1: #7e6ade;
999
+ --color-chart-series-2: #d6483e;
1000
+ --color-chart-series-3: #069fa6;
1001
+ --color-chart-series-4: #cf6f19;
1002
+ --color-chart-series-5: #ca5794;
1003
+ --color-chart-series-6: #b48c05;
1004
+ --color-chart-series-7: #3f82f0;
1005
+ --color-chart-series-8: #219761;
884
1006
  --color-link-fg: #a3a8ff;
885
1007
  --color-link-fg-hover: #c2c5ff;
886
1008
  --ring-accent: #a3a8ff;
@@ -892,6 +1014,14 @@
892
1014
  --color-accent-hover: #c2dc95;
893
1015
  --color-accent-pressed: #dcebc0;
894
1016
  --color-accent-subtle-bg: #2e3b1a;
1017
+ --color-chart-series-1: #219761;
1018
+ --color-chart-series-2: #7e6ade;
1019
+ --color-chart-series-3: #ca5794;
1020
+ --color-chart-series-4: #cf6f19;
1021
+ --color-chart-series-5: #3f82f0;
1022
+ --color-chart-series-6: #b48c05;
1023
+ --color-chart-series-7: #069fa6;
1024
+ --color-chart-series-8: #d6483e;
895
1025
  --color-link-fg: #a6c96a;
896
1026
  --color-link-fg-hover: #c2dc95;
897
1027
  --ring-accent: #a6c96a;
@@ -903,6 +1033,14 @@
903
1033
  --color-accent-hover: #9dd8ef;
904
1034
  --color-accent-pressed: #c9eaf6;
905
1035
  --color-accent-subtle-bg: #163e4d;
1036
+ --color-chart-series-1: #069fa6;
1037
+ --color-chart-series-2: #d6483e;
1038
+ --color-chart-series-3: #3f82f0;
1039
+ --color-chart-series-4: #cf6f19;
1040
+ --color-chart-series-5: #ca5794;
1041
+ --color-chart-series-6: #b48c05;
1042
+ --color-chart-series-7: #7e6ade;
1043
+ --color-chart-series-8: #219761;
906
1044
  --color-link-fg: #6cc4e6;
907
1045
  --color-link-fg-hover: #9dd8ef;
908
1046
  --ring-accent: #6cc4e6;
@@ -925,6 +1063,14 @@
925
1063
  --color-accent-hover: #9ddfd7;
926
1064
  --color-accent-pressed: #c6efea;
927
1065
  --color-accent-subtle-bg: #173f3c;
1066
+ --color-chart-series-1: #069fa6;
1067
+ --color-chart-series-2: #d6483e;
1068
+ --color-chart-series-3: #3f82f0;
1069
+ --color-chart-series-4: #cf6f19;
1070
+ --color-chart-series-5: #ca5794;
1071
+ --color-chart-series-6: #b48c05;
1072
+ --color-chart-series-7: #7e6ade;
1073
+ --color-chart-series-8: #219761;
928
1074
  --color-link-fg: #6dcfc4;
929
1075
  --color-link-fg-hover: #9ddfd7;
930
1076
  --ring-accent: #6dcfc4;
package/dist/styles/tokens.css CHANGED
@@ -185,14 +185,14 @@
185
185
  --color-bg-sunken: #ebecf0;
186
186
  --color-border: #dfe1e6;
187
187
  --color-border-strong: #c1c7d0;
188
- --color-chart-series-1: #2a78d6;
189
- --color-chart-series-2: #e0602c;
190
- --color-chart-series-3: #13946a;
191
- --color-chart-series-4: #a87600;
192
- --color-chart-series-5: #d0558a;
193
- --color-chart-series-6: #008300;
194
- --color-chart-series-7: #6250d6;
195
- --color-chart-series-8: #e34948;
188
+ --color-chart-series-1: #2062ce;
189
+ --color-chart-series-2: #c5372f;
190
+ --color-chart-series-3: #0a999f;
191
+ --color-chart-series-4: #dd7b2b;
192
+ --color-chart-series-5: #c3518d;
193
+ --color-chart-series-6: #cfa529;
194
+ --color-chart-series-7: #624bbc;
195
+ --color-chart-series-8: #15915c;
196
196
  --color-danger: #c8300a;
197
197
  --color-danger-bg-subtle: #ffebe6;
198
198
  --color-danger-fg: #ffffff;
@@ -431,6 +431,14 @@
431
431
  --color-accent-hover: #92265b;
432
432
  --color-accent-pressed: #741e48;
433
433
  --color-accent-subtle-bg: #fbe6ef;
434
+ --color-chart-series-1: #c3518d;
435
+ --color-chart-series-2: #dd7b2b;
436
+ --color-chart-series-3: #2062ce;
437
+ --color-chart-series-4: #c5372f;
438
+ --color-chart-series-5: #0a999f;
439
+ --color-chart-series-6: #cfa529;
440
+ --color-chart-series-7: #624bbc;
441
+ --color-chart-series-8: #15915c;
434
442
  --color-link-fg: #a82c68;
435
443
  --color-link-fg-hover: #8c2456;
436
444
  --ring-accent: #b0306e;
@@ -443,6 +451,14 @@
443
451
  --color-accent-hover: #5c2e8c;
444
452
  --color-accent-pressed: #48226e;
445
453
  --color-accent-subtle-bg: #f1e8fa;
454
+ --color-chart-series-1: #624bbc;
455
+ --color-chart-series-2: #c5372f;
456
+ --color-chart-series-3: #0a999f;
457
+ --color-chart-series-4: #dd7b2b;
458
+ --color-chart-series-5: #c3518d;
459
+ --color-chart-series-6: #cfa529;
460
+ --color-chart-series-7: #2062ce;
461
+ --color-chart-series-8: #15915c;
446
462
  --color-link-fg: #7b3fb3;
447
463
  --color-link-fg-hover: #5c2e8c;
448
464
  --ring-accent: #7b3fb3;
@@ -455,6 +471,14 @@
455
471
  --color-accent-hover: #3d3cb0;
456
472
  --color-accent-pressed: #2f2e8c;
457
473
  --color-accent-subtle-bg: #e8e8fb;
474
+ --color-chart-series-1: #624bbc;
475
+ --color-chart-series-2: #c5372f;
476
+ --color-chart-series-3: #0a999f;
477
+ --color-chart-series-4: #dd7b2b;
478
+ --color-chart-series-5: #c3518d;
479
+ --color-chart-series-6: #cfa529;
480
+ --color-chart-series-7: #2062ce;
481
+ --color-chart-series-8: #15915c;
458
482
  --color-link-fg: #4342c4;
459
483
  --color-link-fg-hover: #3534a3;
460
484
  --ring-accent: #4c4bd1;
@@ -467,6 +491,14 @@
467
491
  --color-accent-hover: #364c15;
468
492
  --color-accent-pressed: #283a0f;
469
493
  --color-accent-subtle-bg: #ebf1df;
494
+ --color-chart-series-1: #15915c;
495
+ --color-chart-series-2: #624bbc;
496
+ --color-chart-series-3: #c3518d;
497
+ --color-chart-series-4: #dd7b2b;
498
+ --color-chart-series-5: #2062ce;
499
+ --color-chart-series-6: #cfa529;
500
+ --color-chart-series-7: #0a999f;
501
+ --color-chart-series-8: #c5372f;
470
502
  --color-link-fg: #45601b;
471
503
  --color-link-fg-hover: #364c15;
472
504
  --ring-accent: #45601b;
@@ -479,6 +511,14 @@
479
511
  --color-accent-hover: #085673;
480
512
  --color-accent-pressed: #06435a;
481
513
  --color-accent-subtle-bg: #ddeff6;
514
+ --color-chart-series-1: #0a999f;
515
+ --color-chart-series-2: #c5372f;
516
+ --color-chart-series-3: #2062ce;
517
+ --color-chart-series-4: #dd7b2b;
518
+ --color-chart-series-5: #c3518d;
519
+ --color-chart-series-6: #cfa529;
520
+ --color-chart-series-7: #624bbc;
521
+ --color-chart-series-8: #15915c;
482
522
  --color-link-fg: #0a6a8c;
483
523
  --color-link-fg-hover: #085673;
484
524
  --ring-accent: #0a6a8c;
@@ -503,6 +543,14 @@
503
543
  --color-accent-hover: #085752;
504
544
  --color-accent-pressed: #054440;
505
545
  --color-accent-subtle-bg: #ddeeec;
546
+ --color-chart-series-1: #0a999f;
547
+ --color-chart-series-2: #c5372f;
548
+ --color-chart-series-3: #2062ce;
549
+ --color-chart-series-4: #dd7b2b;
550
+ --color-chart-series-5: #c3518d;
551
+ --color-chart-series-6: #cfa529;
552
+ --color-chart-series-7: #624bbc;
553
+ --color-chart-series-8: #15915c;
506
554
  --color-link-fg: #007676;
507
555
  --color-link-fg-hover: #006666;
508
556
  --ring-accent: #0b6d67;
@@ -527,13 +575,14 @@
527
575
  --color-bg-sunken: #161a1d;
528
576
  --color-border: #38414a;
529
577
  --color-border-strong: #50585f;
530
- --color-chart-series-1: #3987e5;
531
- --color-chart-series-2: #d95926;
532
- --color-chart-series-3: #199e70;
533
- --color-chart-series-4: #c98500;
534
- --color-chart-series-5: #d55181;
535
- --color-chart-series-7: #9085e9;
536
- --color-chart-series-8: #e66767;
578
+ --color-chart-series-1: #3f82f0;
579
+ --color-chart-series-2: #d6483e;
580
+ --color-chart-series-3: #069fa6;
581
+ --color-chart-series-4: #cf6f19;
582
+ --color-chart-series-5: #ca5794;
583
+ --color-chart-series-6: #b48c05;
584
+ --color-chart-series-7: #7e6ade;
585
+ --color-chart-series-8: #219761;
537
586
  --color-danger: #f87168;
538
587
  --color-danger-bg-subtle: #42201d;
539
588
  --color-danger-fg: #1d2125;
@@ -645,6 +694,14 @@
645
694
  --color-accent-hover: #f7b2d0;
646
695
  --color-accent-pressed: #fbd3e4;
647
696
  --color-accent-subtle-bg: #4d2236;
697
+ --color-chart-series-1: #ca5794;
698
+ --color-chart-series-2: #cf6f19;
699
+ --color-chart-series-3: #3f82f0;
700
+ --color-chart-series-4: #d6483e;
701
+ --color-chart-series-5: #069fa6;
702
+ --color-chart-series-6: #b48c05;
703
+ --color-chart-series-7: #7e6ade;
704
+ --color-chart-series-8: #219761;
648
705
  --color-link-fg: #f28cb8;
649
706
  --color-link-fg-hover: #f7b2d0;
650
707
  --ring-accent: #f28cb8;
@@ -657,6 +714,14 @@
657
714
  --color-accent-hover: #dcc0f6;
658
715
  --color-accent-pressed: #ecdcfa;
659
716
  --color-accent-subtle-bg: #3b2752;
717
+ --color-chart-series-1: #7e6ade;
718
+ --color-chart-series-2: #d6483e;
719
+ --color-chart-series-3: #069fa6;
720
+ --color-chart-series-4: #cf6f19;
721
+ --color-chart-series-5: #ca5794;
722
+ --color-chart-series-6: #b48c05;
723
+ --color-chart-series-7: #3f82f0;
724
+ --color-chart-series-8: #219761;
660
725
  --color-link-fg: #c9a0f0;
661
726
  --color-link-fg-hover: #dcc0f6;
662
727
  --ring-accent: #c9a0f0;
@@ -669,6 +734,14 @@
669
734
  --color-accent-hover: #c2c5ff;
670
735
  --color-accent-pressed: #dfe1ff;
671
736
  --color-accent-subtle-bg: #2b2d5c;
737
+ --color-chart-series-1: #7e6ade;
738
+ --color-chart-series-2: #d6483e;
739
+ --color-chart-series-3: #069fa6;
740
+ --color-chart-series-4: #cf6f19;
741
+ --color-chart-series-5: #ca5794;
742
+ --color-chart-series-6: #b48c05;
743
+ --color-chart-series-7: #3f82f0;
744
+ --color-chart-series-8: #219761;
672
745
  --color-link-fg: #a3a8ff;
673
746
  --color-link-fg-hover: #c2c5ff;
674
747
  --ring-accent: #a3a8ff;
@@ -681,6 +754,14 @@
681
754
  --color-accent-hover: #c2dc95;
682
755
  --color-accent-pressed: #dcebc0;
683
756
  --color-accent-subtle-bg: #2e3b1a;
757
+ --color-chart-series-1: #219761;
758
+ --color-chart-series-2: #7e6ade;
759
+ --color-chart-series-3: #ca5794;
760
+ --color-chart-series-4: #cf6f19;
761
+ --color-chart-series-5: #3f82f0;
762
+ --color-chart-series-6: #b48c05;
763
+ --color-chart-series-7: #069fa6;
764
+ --color-chart-series-8: #d6483e;
684
765
  --color-link-fg: #a6c96a;
685
766
  --color-link-fg-hover: #c2dc95;
686
767
  --ring-accent: #a6c96a;
@@ -693,6 +774,14 @@
693
774
  --color-accent-hover: #9dd8ef;
694
775
  --color-accent-pressed: #c9eaf6;
695
776
  --color-accent-subtle-bg: #163e4d;
777
+ --color-chart-series-1: #069fa6;
778
+ --color-chart-series-2: #d6483e;
779
+ --color-chart-series-3: #3f82f0;
780
+ --color-chart-series-4: #cf6f19;
781
+ --color-chart-series-5: #ca5794;
782
+ --color-chart-series-6: #b48c05;
783
+ --color-chart-series-7: #7e6ade;
784
+ --color-chart-series-8: #219761;
696
785
  --color-link-fg: #6cc4e6;
697
786
  --color-link-fg-hover: #9dd8ef;
698
787
  --ring-accent: #6cc4e6;
@@ -717,6 +806,14 @@
717
806
  --color-accent-hover: #9ddfd7;
718
807
  --color-accent-pressed: #c6efea;
719
808
  --color-accent-subtle-bg: #173f3c;
809
+ --color-chart-series-1: #069fa6;
810
+ --color-chart-series-2: #d6483e;
811
+ --color-chart-series-3: #3f82f0;
812
+ --color-chart-series-4: #cf6f19;
813
+ --color-chart-series-5: #ca5794;
814
+ --color-chart-series-6: #b48c05;
815
+ --color-chart-series-7: #7e6ade;
816
+ --color-chart-series-8: #219761;
720
817
  --color-link-fg: #6dcfc4;
721
818
  --color-link-fg-hover: #9ddfd7;
722
819
  --ring-accent: #6dcfc4;
@@ -742,13 +839,14 @@
742
839
  --color-bg-sunken: #161a1d;
743
840
  --color-border: #38414a;
744
841
  --color-border-strong: #50585f;
745
- --color-chart-series-1: #3987e5;
746
- --color-chart-series-2: #d95926;
747
- --color-chart-series-3: #199e70;
748
- --color-chart-series-4: #c98500;
749
- --color-chart-series-5: #d55181;
750
- --color-chart-series-7: #9085e9;
751
- --color-chart-series-8: #e66767;
842
+ --color-chart-series-1: #3f82f0;
843
+ --color-chart-series-2: #d6483e;
844
+ --color-chart-series-3: #069fa6;
845
+ --color-chart-series-4: #cf6f19;
846
+ --color-chart-series-5: #ca5794;
847
+ --color-chart-series-6: #b48c05;
848
+ --color-chart-series-7: #7e6ade;
849
+ --color-chart-series-8: #219761;
752
850
  --color-danger: #f87168;
753
851
  --color-danger-bg-subtle: #42201d;
754
852
  --color-danger-fg: #1d2125;
@@ -859,6 +957,14 @@
859
957
  --color-accent-hover: #f7b2d0;
860
958
  --color-accent-pressed: #fbd3e4;
861
959
  --color-accent-subtle-bg: #4d2236;
960
+ --color-chart-series-1: #ca5794;
961
+ --color-chart-series-2: #cf6f19;
962
+ --color-chart-series-3: #3f82f0;
963
+ --color-chart-series-4: #d6483e;
964
+ --color-chart-series-5: #069fa6;
965
+ --color-chart-series-6: #b48c05;
966
+ --color-chart-series-7: #7e6ade;
967
+ --color-chart-series-8: #219761;
862
968
  --color-link-fg: #f28cb8;
863
969
  --color-link-fg-hover: #f7b2d0;
864
970
  --ring-accent: #f28cb8;
@@ -870,6 +976,14 @@
870
976
  --color-accent-hover: #dcc0f6;
871
977
  --color-accent-pressed: #ecdcfa;
872
978
  --color-accent-subtle-bg: #3b2752;
979
+ --color-chart-series-1: #7e6ade;
980
+ --color-chart-series-2: #d6483e;
981
+ --color-chart-series-3: #069fa6;
982
+ --color-chart-series-4: #cf6f19;
983
+ --color-chart-series-5: #ca5794;
984
+ --color-chart-series-6: #b48c05;
985
+ --color-chart-series-7: #3f82f0;
986
+ --color-chart-series-8: #219761;
873
987
  --color-link-fg: #c9a0f0;
874
988
  --color-link-fg-hover: #dcc0f6;
875
989
  --ring-accent: #c9a0f0;
@@ -881,6 +995,14 @@
881
995
  --color-accent-hover: #c2c5ff;
882
996
  --color-accent-pressed: #dfe1ff;
883
997
  --color-accent-subtle-bg: #2b2d5c;
998
+ --color-chart-series-1: #7e6ade;
999
+ --color-chart-series-2: #d6483e;
1000
+ --color-chart-series-3: #069fa6;
1001
+ --color-chart-series-4: #cf6f19;
1002
+ --color-chart-series-5: #ca5794;
1003
+ --color-chart-series-6: #b48c05;
1004
+ --color-chart-series-7: #3f82f0;
1005
+ --color-chart-series-8: #219761;
884
1006
  --color-link-fg: #a3a8ff;
885
1007
  --color-link-fg-hover: #c2c5ff;
886
1008
  --ring-accent: #a3a8ff;
@@ -892,6 +1014,14 @@
892
1014
  --color-accent-hover: #c2dc95;
893
1015
  --color-accent-pressed: #dcebc0;
894
1016
  --color-accent-subtle-bg: #2e3b1a;
1017
+ --color-chart-series-1: #219761;
1018
+ --color-chart-series-2: #7e6ade;
1019
+ --color-chart-series-3: #ca5794;
1020
+ --color-chart-series-4: #cf6f19;
1021
+ --color-chart-series-5: #3f82f0;
1022
+ --color-chart-series-6: #b48c05;
1023
+ --color-chart-series-7: #069fa6;
1024
+ --color-chart-series-8: #d6483e;
895
1025
  --color-link-fg: #a6c96a;
896
1026
  --color-link-fg-hover: #c2dc95;
897
1027
  --ring-accent: #a6c96a;
@@ -903,6 +1033,14 @@
903
1033
  --color-accent-hover: #9dd8ef;
904
1034
  --color-accent-pressed: #c9eaf6;
905
1035
  --color-accent-subtle-bg: #163e4d;
1036
+ --color-chart-series-1: #069fa6;
1037
+ --color-chart-series-2: #d6483e;
1038
+ --color-chart-series-3: #3f82f0;
1039
+ --color-chart-series-4: #cf6f19;
1040
+ --color-chart-series-5: #ca5794;
1041
+ --color-chart-series-6: #b48c05;
1042
+ --color-chart-series-7: #7e6ade;
1043
+ --color-chart-series-8: #219761;
906
1044
  --color-link-fg: #6cc4e6;
907
1045
  --color-link-fg-hover: #9dd8ef;
908
1046
  --ring-accent: #6cc4e6;
@@ -925,6 +1063,14 @@
925
1063
  --color-accent-hover: #9ddfd7;
926
1064
  --color-accent-pressed: #c6efea;
927
1065
  --color-accent-subtle-bg: #173f3c;
1066
+ --color-chart-series-1: #069fa6;
1067
+ --color-chart-series-2: #d6483e;
1068
+ --color-chart-series-3: #3f82f0;
1069
+ --color-chart-series-4: #cf6f19;
1070
+ --color-chart-series-5: #ca5794;
1071
+ --color-chart-series-6: #b48c05;
1072
+ --color-chart-series-7: #7e6ade;
1073
+ --color-chart-series-8: #219761;
928
1074
  --color-link-fg: #6dcfc4;
929
1075
  --color-link-fg-hover: #9ddfd7;
930
1076
  --ring-accent: #6dcfc4;
package/dist/styles.css CHANGED
@@ -185,14 +185,14 @@
185
185
  --color-bg-sunken: #ebecf0;
186
186
  --color-border: #dfe1e6;
187
187
  --color-border-strong: #c1c7d0;
188
- --color-chart-series-1: #2a78d6;
189
- --color-chart-series-2: #e0602c;
190
- --color-chart-series-3: #13946a;
191
- --color-chart-series-4: #a87600;
192
- --color-chart-series-5: #d0558a;
193
- --color-chart-series-6: #008300;
194
- --color-chart-series-7: #6250d6;
195
- --color-chart-series-8: #e34948;
188
+ --color-chart-series-1: #2062ce;
189
+ --color-chart-series-2: #c5372f;
190
+ --color-chart-series-3: #0a999f;
191
+ --color-chart-series-4: #dd7b2b;
192
+ --color-chart-series-5: #c3518d;
193
+ --color-chart-series-6: #cfa529;
194
+ --color-chart-series-7: #624bbc;
195
+ --color-chart-series-8: #15915c;
196
196
  --color-danger: #c8300a;
197
197
  --color-danger-bg-subtle: #ffebe6;
198
198
  --color-danger-fg: #ffffff;
@@ -431,6 +431,14 @@
431
431
  --color-accent-hover: #92265b;
432
432
  --color-accent-pressed: #741e48;
433
433
  --color-accent-subtle-bg: #fbe6ef;
434
+ --color-chart-series-1: #c3518d;
435
+ --color-chart-series-2: #dd7b2b;
436
+ --color-chart-series-3: #2062ce;
437
+ --color-chart-series-4: #c5372f;
438
+ --color-chart-series-5: #0a999f;
439
+ --color-chart-series-6: #cfa529;
440
+ --color-chart-series-7: #624bbc;
441
+ --color-chart-series-8: #15915c;
434
442
  --color-link-fg: #a82c68;
435
443
  --color-link-fg-hover: #8c2456;
436
444
  --ring-accent: #b0306e;
@@ -443,6 +451,14 @@
443
451
  --color-accent-hover: #5c2e8c;
444
452
  --color-accent-pressed: #48226e;
445
453
  --color-accent-subtle-bg: #f1e8fa;
454
+ --color-chart-series-1: #624bbc;
455
+ --color-chart-series-2: #c5372f;
456
+ --color-chart-series-3: #0a999f;
457
+ --color-chart-series-4: #dd7b2b;
458
+ --color-chart-series-5: #c3518d;
459
+ --color-chart-series-6: #cfa529;
460
+ --color-chart-series-7: #2062ce;
461
+ --color-chart-series-8: #15915c;
446
462
  --color-link-fg: #7b3fb3;
447
463
  --color-link-fg-hover: #5c2e8c;
448
464
  --ring-accent: #7b3fb3;
@@ -455,6 +471,14 @@
455
471
  --color-accent-hover: #3d3cb0;
456
472
  --color-accent-pressed: #2f2e8c;
457
473
  --color-accent-subtle-bg: #e8e8fb;
474
+ --color-chart-series-1: #624bbc;
475
+ --color-chart-series-2: #c5372f;
476
+ --color-chart-series-3: #0a999f;
477
+ --color-chart-series-4: #dd7b2b;
478
+ --color-chart-series-5: #c3518d;
479
+ --color-chart-series-6: #cfa529;
480
+ --color-chart-series-7: #2062ce;
481
+ --color-chart-series-8: #15915c;
458
482
  --color-link-fg: #4342c4;
459
483
  --color-link-fg-hover: #3534a3;
460
484
  --ring-accent: #4c4bd1;
@@ -467,6 +491,14 @@
467
491
  --color-accent-hover: #364c15;
468
492
  --color-accent-pressed: #283a0f;
469
493
  --color-accent-subtle-bg: #ebf1df;
494
+ --color-chart-series-1: #15915c;
495
+ --color-chart-series-2: #624bbc;
496
+ --color-chart-series-3: #c3518d;
497
+ --color-chart-series-4: #dd7b2b;
498
+ --color-chart-series-5: #2062ce;
499
+ --color-chart-series-6: #cfa529;
500
+ --color-chart-series-7: #0a999f;
501
+ --color-chart-series-8: #c5372f;
470
502
  --color-link-fg: #45601b;
471
503
  --color-link-fg-hover: #364c15;
472
504
  --ring-accent: #45601b;
@@ -479,6 +511,14 @@
479
511
  --color-accent-hover: #085673;
480
512
  --color-accent-pressed: #06435a;
481
513
  --color-accent-subtle-bg: #ddeff6;
514
+ --color-chart-series-1: #0a999f;
515
+ --color-chart-series-2: #c5372f;
516
+ --color-chart-series-3: #2062ce;
517
+ --color-chart-series-4: #dd7b2b;
518
+ --color-chart-series-5: #c3518d;
519
+ --color-chart-series-6: #cfa529;
520
+ --color-chart-series-7: #624bbc;
521
+ --color-chart-series-8: #15915c;
482
522
  --color-link-fg: #0a6a8c;
483
523
  --color-link-fg-hover: #085673;
484
524
  --ring-accent: #0a6a8c;
@@ -503,6 +543,14 @@
503
543
  --color-accent-hover: #085752;
504
544
  --color-accent-pressed: #054440;
505
545
  --color-accent-subtle-bg: #ddeeec;
546
+ --color-chart-series-1: #0a999f;
547
+ --color-chart-series-2: #c5372f;
548
+ --color-chart-series-3: #2062ce;
549
+ --color-chart-series-4: #dd7b2b;
550
+ --color-chart-series-5: #c3518d;
551
+ --color-chart-series-6: #cfa529;
552
+ --color-chart-series-7: #624bbc;
553
+ --color-chart-series-8: #15915c;
506
554
  --color-link-fg: #007676;
507
555
  --color-link-fg-hover: #006666;
508
556
  --ring-accent: #0b6d67;
@@ -527,13 +575,14 @@
527
575
  --color-bg-sunken: #161a1d;
528
576
  --color-border: #38414a;
529
577
  --color-border-strong: #50585f;
530
- --color-chart-series-1: #3987e5;
531
- --color-chart-series-2: #d95926;
532
- --color-chart-series-3: #199e70;
533
- --color-chart-series-4: #c98500;
534
- --color-chart-series-5: #d55181;
535
- --color-chart-series-7: #9085e9;
536
- --color-chart-series-8: #e66767;
578
+ --color-chart-series-1: #3f82f0;
579
+ --color-chart-series-2: #d6483e;
580
+ --color-chart-series-3: #069fa6;
581
+ --color-chart-series-4: #cf6f19;
582
+ --color-chart-series-5: #ca5794;
583
+ --color-chart-series-6: #b48c05;
584
+ --color-chart-series-7: #7e6ade;
585
+ --color-chart-series-8: #219761;
537
586
  --color-danger: #f87168;
538
587
  --color-danger-bg-subtle: #42201d;
539
588
  --color-danger-fg: #1d2125;
@@ -645,6 +694,14 @@
645
694
  --color-accent-hover: #f7b2d0;
646
695
  --color-accent-pressed: #fbd3e4;
647
696
  --color-accent-subtle-bg: #4d2236;
697
+ --color-chart-series-1: #ca5794;
698
+ --color-chart-series-2: #cf6f19;
699
+ --color-chart-series-3: #3f82f0;
700
+ --color-chart-series-4: #d6483e;
701
+ --color-chart-series-5: #069fa6;
702
+ --color-chart-series-6: #b48c05;
703
+ --color-chart-series-7: #7e6ade;
704
+ --color-chart-series-8: #219761;
648
705
  --color-link-fg: #f28cb8;
649
706
  --color-link-fg-hover: #f7b2d0;
650
707
  --ring-accent: #f28cb8;
@@ -657,6 +714,14 @@
657
714
  --color-accent-hover: #dcc0f6;
658
715
  --color-accent-pressed: #ecdcfa;
659
716
  --color-accent-subtle-bg: #3b2752;
717
+ --color-chart-series-1: #7e6ade;
718
+ --color-chart-series-2: #d6483e;
719
+ --color-chart-series-3: #069fa6;
720
+ --color-chart-series-4: #cf6f19;
721
+ --color-chart-series-5: #ca5794;
722
+ --color-chart-series-6: #b48c05;
723
+ --color-chart-series-7: #3f82f0;
724
+ --color-chart-series-8: #219761;
660
725
  --color-link-fg: #c9a0f0;
661
726
  --color-link-fg-hover: #dcc0f6;
662
727
  --ring-accent: #c9a0f0;
@@ -669,6 +734,14 @@
669
734
  --color-accent-hover: #c2c5ff;
670
735
  --color-accent-pressed: #dfe1ff;
671
736
  --color-accent-subtle-bg: #2b2d5c;
737
+ --color-chart-series-1: #7e6ade;
738
+ --color-chart-series-2: #d6483e;
739
+ --color-chart-series-3: #069fa6;
740
+ --color-chart-series-4: #cf6f19;
741
+ --color-chart-series-5: #ca5794;
742
+ --color-chart-series-6: #b48c05;
743
+ --color-chart-series-7: #3f82f0;
744
+ --color-chart-series-8: #219761;
672
745
  --color-link-fg: #a3a8ff;
673
746
  --color-link-fg-hover: #c2c5ff;
674
747
  --ring-accent: #a3a8ff;
@@ -681,6 +754,14 @@
681
754
  --color-accent-hover: #c2dc95;
682
755
  --color-accent-pressed: #dcebc0;
683
756
  --color-accent-subtle-bg: #2e3b1a;
757
+ --color-chart-series-1: #219761;
758
+ --color-chart-series-2: #7e6ade;
759
+ --color-chart-series-3: #ca5794;
760
+ --color-chart-series-4: #cf6f19;
761
+ --color-chart-series-5: #3f82f0;
762
+ --color-chart-series-6: #b48c05;
763
+ --color-chart-series-7: #069fa6;
764
+ --color-chart-series-8: #d6483e;
684
765
  --color-link-fg: #a6c96a;
685
766
  --color-link-fg-hover: #c2dc95;
686
767
  --ring-accent: #a6c96a;
@@ -693,6 +774,14 @@
693
774
  --color-accent-hover: #9dd8ef;
694
775
  --color-accent-pressed: #c9eaf6;
695
776
  --color-accent-subtle-bg: #163e4d;
777
+ --color-chart-series-1: #069fa6;
778
+ --color-chart-series-2: #d6483e;
779
+ --color-chart-series-3: #3f82f0;
780
+ --color-chart-series-4: #cf6f19;
781
+ --color-chart-series-5: #ca5794;
782
+ --color-chart-series-6: #b48c05;
783
+ --color-chart-series-7: #7e6ade;
784
+ --color-chart-series-8: #219761;
696
785
  --color-link-fg: #6cc4e6;
697
786
  --color-link-fg-hover: #9dd8ef;
698
787
  --ring-accent: #6cc4e6;
@@ -717,6 +806,14 @@
717
806
  --color-accent-hover: #9ddfd7;
718
807
  --color-accent-pressed: #c6efea;
719
808
  --color-accent-subtle-bg: #173f3c;
809
+ --color-chart-series-1: #069fa6;
810
+ --color-chart-series-2: #d6483e;
811
+ --color-chart-series-3: #3f82f0;
812
+ --color-chart-series-4: #cf6f19;
813
+ --color-chart-series-5: #ca5794;
814
+ --color-chart-series-6: #b48c05;
815
+ --color-chart-series-7: #7e6ade;
816
+ --color-chart-series-8: #219761;
720
817
  --color-link-fg: #6dcfc4;
721
818
  --color-link-fg-hover: #9ddfd7;
722
819
  --ring-accent: #6dcfc4;
@@ -742,13 +839,14 @@
742
839
  --color-bg-sunken: #161a1d;
743
840
  --color-border: #38414a;
744
841
  --color-border-strong: #50585f;
745
- --color-chart-series-1: #3987e5;
746
- --color-chart-series-2: #d95926;
747
- --color-chart-series-3: #199e70;
748
- --color-chart-series-4: #c98500;
749
- --color-chart-series-5: #d55181;
750
- --color-chart-series-7: #9085e9;
751
- --color-chart-series-8: #e66767;
842
+ --color-chart-series-1: #3f82f0;
843
+ --color-chart-series-2: #d6483e;
844
+ --color-chart-series-3: #069fa6;
845
+ --color-chart-series-4: #cf6f19;
846
+ --color-chart-series-5: #ca5794;
847
+ --color-chart-series-6: #b48c05;
848
+ --color-chart-series-7: #7e6ade;
849
+ --color-chart-series-8: #219761;
752
850
  --color-danger: #f87168;
753
851
  --color-danger-bg-subtle: #42201d;
754
852
  --color-danger-fg: #1d2125;
@@ -859,6 +957,14 @@
859
957
  --color-accent-hover: #f7b2d0;
860
958
  --color-accent-pressed: #fbd3e4;
861
959
  --color-accent-subtle-bg: #4d2236;
960
+ --color-chart-series-1: #ca5794;
961
+ --color-chart-series-2: #cf6f19;
962
+ --color-chart-series-3: #3f82f0;
963
+ --color-chart-series-4: #d6483e;
964
+ --color-chart-series-5: #069fa6;
965
+ --color-chart-series-6: #b48c05;
966
+ --color-chart-series-7: #7e6ade;
967
+ --color-chart-series-8: #219761;
862
968
  --color-link-fg: #f28cb8;
863
969
  --color-link-fg-hover: #f7b2d0;
864
970
  --ring-accent: #f28cb8;
@@ -870,6 +976,14 @@
870
976
  --color-accent-hover: #dcc0f6;
871
977
  --color-accent-pressed: #ecdcfa;
872
978
  --color-accent-subtle-bg: #3b2752;
979
+ --color-chart-series-1: #7e6ade;
980
+ --color-chart-series-2: #d6483e;
981
+ --color-chart-series-3: #069fa6;
982
+ --color-chart-series-4: #cf6f19;
983
+ --color-chart-series-5: #ca5794;
984
+ --color-chart-series-6: #b48c05;
985
+ --color-chart-series-7: #3f82f0;
986
+ --color-chart-series-8: #219761;
873
987
  --color-link-fg: #c9a0f0;
874
988
  --color-link-fg-hover: #dcc0f6;
875
989
  --ring-accent: #c9a0f0;
@@ -881,6 +995,14 @@
881
995
  --color-accent-hover: #c2c5ff;
882
996
  --color-accent-pressed: #dfe1ff;
883
997
  --color-accent-subtle-bg: #2b2d5c;
998
+ --color-chart-series-1: #7e6ade;
999
+ --color-chart-series-2: #d6483e;
1000
+ --color-chart-series-3: #069fa6;
1001
+ --color-chart-series-4: #cf6f19;
1002
+ --color-chart-series-5: #ca5794;
1003
+ --color-chart-series-6: #b48c05;
1004
+ --color-chart-series-7: #3f82f0;
1005
+ --color-chart-series-8: #219761;
884
1006
  --color-link-fg: #a3a8ff;
885
1007
  --color-link-fg-hover: #c2c5ff;
886
1008
  --ring-accent: #a3a8ff;
@@ -892,6 +1014,14 @@
892
1014
  --color-accent-hover: #c2dc95;
893
1015
  --color-accent-pressed: #dcebc0;
894
1016
  --color-accent-subtle-bg: #2e3b1a;
1017
+ --color-chart-series-1: #219761;
1018
+ --color-chart-series-2: #7e6ade;
1019
+ --color-chart-series-3: #ca5794;
1020
+ --color-chart-series-4: #cf6f19;
1021
+ --color-chart-series-5: #3f82f0;
1022
+ --color-chart-series-6: #b48c05;
1023
+ --color-chart-series-7: #069fa6;
1024
+ --color-chart-series-8: #d6483e;
895
1025
  --color-link-fg: #a6c96a;
896
1026
  --color-link-fg-hover: #c2dc95;
897
1027
  --ring-accent: #a6c96a;
@@ -903,6 +1033,14 @@
903
1033
  --color-accent-hover: #9dd8ef;
904
1034
  --color-accent-pressed: #c9eaf6;
905
1035
  --color-accent-subtle-bg: #163e4d;
1036
+ --color-chart-series-1: #069fa6;
1037
+ --color-chart-series-2: #d6483e;
1038
+ --color-chart-series-3: #3f82f0;
1039
+ --color-chart-series-4: #cf6f19;
1040
+ --color-chart-series-5: #ca5794;
1041
+ --color-chart-series-6: #b48c05;
1042
+ --color-chart-series-7: #7e6ade;
1043
+ --color-chart-series-8: #219761;
906
1044
  --color-link-fg: #6cc4e6;
907
1045
  --color-link-fg-hover: #9dd8ef;
908
1046
  --ring-accent: #6cc4e6;
@@ -925,6 +1063,14 @@
925
1063
  --color-accent-hover: #9ddfd7;
926
1064
  --color-accent-pressed: #c6efea;
927
1065
  --color-accent-subtle-bg: #173f3c;
1066
+ --color-chart-series-1: #069fa6;
1067
+ --color-chart-series-2: #d6483e;
1068
+ --color-chart-series-3: #3f82f0;
1069
+ --color-chart-series-4: #cf6f19;
1070
+ --color-chart-series-5: #ca5794;
1071
+ --color-chart-series-6: #b48c05;
1072
+ --color-chart-series-7: #7e6ade;
1073
+ --color-chart-series-8: #219761;
928
1074
  --color-link-fg: #6dcfc4;
929
1075
  --color-link-fg-hover: #9ddfd7;
930
1076
  --ring-accent: #6dcfc4;
@@ -21721,7 +21867,7 @@ figure[data-attachment][data-align=right] {
21721
21867
  --funnel-chart-ramp-color: var(--chart-series-1);
21722
21868
  --funnel-chart-surface: var(--color-bg);
21723
21869
  --funnel-chart-ramp-target: var(--funnel-chart-surface);
21724
- --funnel-chart-ramp-max-mix: 48%;
21870
+ --funnel-chart-ramp-max-mix: 38%;
21725
21871
  --funnel-chart-hero-fg: var(--color-bg);
21726
21872
  --funnel-chart-hero-value-size: var(--font-size-2xl);
21727
21873
  --funnel-chart-hero-label-size: var(--font-size-xl);
package/docs/components/Chart.md CHANGED
@@ -86,7 +86,18 @@ import { Chart, DashboardWidget, ErrorState } from '@eocrm/design-system';
86
86
  - **Types.** `line` (trend), `bar` (grouped per bucket), `stacked-bar` (parts of a total), `area` (always stacked; overlapping areas hide each other).
87
87
  - **Smoothing.** Every line (comparisons and the `stacked-bar` total included) and `area` is drawn with a monotone curve: it passes through every value and never leaves the range of the two values it joins, so there is no dip before a step, no bump after it, no peak above a real maximum and no negative between counts. Peaks, troughs and flat runs ease in flat. Two-point runs are straight. Stacked areas are the exception: each layer stays within its own values, but where layers trade places the stacked top can rise slightly above the largest real total; the y axis grows to keep it inside the plot. Stacked areas smooth each series on its own and stack the curves, so a steady layer stays steady whatever its neighbours do, a series that is 0 has no thickness, and with non-negative data no layer turns inside out or crosses its neighbour. A `'total'` comparison equal to the stack stays close to its top but is smoothed on its own, so next to a spike or a series' zero it can drift up to about a tenth of the plot height (typically 2–4%). Markers and the tooltip sit on the real points; the data table has the exact values. Not configurable.
88
88
  - **Y axis** always includes 0, with rounded ticks formatted by `formatValue`. In `bar` and `line`, negative values grow down from 0; `stacked-bar` diverges around 0 (positives up, negatives down); `area` stacks without a diverging offset, so negatives accumulate.
89
- - **Colour** follows a series' position among non-comparison series: 1–8 get the 8 validated palette colours (light + dark). Keep the order stable so filtering never repaints survivors.
89
+ - **Colour** follows a series' position among non-comparison series: 1–8 get the 8 slots of the Brand palette (`--chart-series-1`…`8`, light + dark). Slot order follows `data-accent` so slot 1 matches the accent:
90
+
91
+ | Accent | Slots 1–8 |
92
+ | ----------------------- | ----------------------------------------------------- |
93
+ | default (blue), `slate` | blue, red, teal, orange, magenta, gold, violet, green |
94
+ | `indigo`, `grape` | violet, red, teal, orange, magenta, gold, blue, green |
95
+ | `berry` | magenta, orange, blue, red, teal, gold, violet, green |
96
+ | `ocean`, `tealpine` | teal, red, blue, orange, magenta, gold, violet, green |
97
+ | `moss` | green, violet, magenta, orange, blue, gold, teal, red |
98
+
99
+ Every order is validated in normal vision and protan/deutan colour blindness: adjacent slots are distinct, and so is every pair among slots 1–3, so a chart with up to three series never relies on two close hues. **Exception:** under `moss`, green sits close to every warm hue for deutan viewers, so slots 1–3 separate less there; label series directly or keep moss charts to two series. Light gold sits under 3:1 on white, so it is held back to slot 6; the data table carries identity. Slot hues carry no meaning (red is not "bad"), so don't pick a series position to signal status. Keep the series order stable so filtering never repaints survivors.
100
+
90
101
  - **Comparison series** (`comparisonOf`): in `line` / `bar`, name the parent's key — it inherits the parent's colour, dashed (line) or outlined with a light fill (bar), sits after its parent in legend and tooltip, and hides with it. In `stacked-bar` / `area`, use `comparisonOf: 'total'` — a dashed neutral line of the previous period's total. Mismatches are ignored with a dev warning.
91
102
  - **Markers** (`markers`) are static annotations pinned to `categories`: `{ key, label?, at }` draws a dashed vertical line at the centre of one category; `{ key, label?, from, to }` shades whole buckets from `from` to `to` (inclusive, either order). Positions snap to buckets: there is no sub-bucket time. `tone: 'neutral'` (default) for events, `'subtle'` for recurring context such as weekends (one marker per weekend). Bands sit behind the grid and data, lines behind the data. Labels are drawn at the top of the plot when they fit (earlier markers win a collision; hidden when the chart is compact) and are always listed in the tooltip, the keyboard announcement and a "Markers" column of the data table. Unlabelled markers are decorative. A marker naming an unknown category is ignored with a dev warning. Building markers with `.map` inside an array literal widens `tone` to `string`: write `'subtle' as const`. Don't encode status with markers (no red "incident" tone): put the meaning in the label.
92
103
  - **Footnote** (`footnote`) is a short muted note in its own row under the plot, e.g. excluded currencies or why a comparison was dropped. It wraps (never truncates) and the plot shrinks to make room, so keep it to a line or two. It is also the plot's accessible description (after the key hint), and stays visible in the empty state, where it often explains why there is no data. Don't use it for errors (use `ErrorState`) or for legends.
package/docs/components/FunnelChart.md CHANGED
@@ -69,8 +69,8 @@ const [active, setActive] = useState<FunnelStage | null>(null);
69
69
 
70
70
  - **Percent semantics.** The pill between two stages is the _step conversion_ (next value ÷ this value). The tooltip and data table add the _share of the first stage_. Both are computed by the component; pass raw counts.
71
71
  - **Heights** are relative to the largest value; stages are drawn top of funnel first, in the order given.
72
- - **Colour** is a one-hue ramp, because stages are ordered: the first stage is `--chart-series-1` at full strength, each later stage a lighter tint mixed toward `--funnel-chart-ramp-target` (the surface in light, 48% max; `--color-fg` in dark, 65% max, so later stages get paler and stay crisp on the dark surface; also `--funnel-chart-ramp-color`, `--funnel-chart-ramp-max-mix`). The lightest stage stays clearly visible against the surface in both themes. With 5+ stages adjacent tints get close; the labels, table and tooltip carry identity. To highlight a stage (e.g. Won in green), give it `color` (a palette slot 1–8); it then uses `--chart-series-N` at full strength. There is no stage limit.
73
- - **Hero first stage** (horizontal): the first stage's value (large) and label sit inside its band, and its footer cell stays empty. When the band is too short or narrow for that text, or the first stage has a `color` slot, the first stage falls back to the normal footer, so nothing is hidden. The hero text is `--funnel-chart-hero-fg` (the surface colour) set as WCAG large text, since it clears 3:1 but not 4.5:1 on `--chart-series-1`; recheck it if you override `--funnel-chart-ramp-color`. Later stages show the conversion pill in the band and value + label underneath, with dashed rules between footer columns.
72
+ - **Colour** is a one-hue ramp, because stages are ordered: the first stage is `--chart-series-1` (the accent-matching Brand hue; see [Chart](Chart.md)) at full strength, each later stage a lighter tint mixed toward `--funnel-chart-ramp-target` (the surface in light, 38% max; `--color-fg` in dark, 65% max, so later stages get paler and stay crisp on the dark surface; also `--funnel-chart-ramp-color`, `--funnel-chart-ramp-max-mix`). The lightest stage stays clearly visible against the surface in both themes under every accent (a CI gate checks each accent). With 4+ stages (light) adjacent tints get close; the labels, table and tooltip carry identity. To highlight a stage (e.g. the stage a dashboard is about), give it `color` (a palette slot 1–8); it then uses `--chart-series-N` at full strength. Slot hues follow `data-accent` and carry no meaning (slot 2 is red under most accents), so choose the slot for contrast, not for meaning: slot 2 always contrasts with slot 1 (the ramp). Don't use a highlight to say "won" or "lost"; put that in the label. There is no stage limit.
73
+ - **Hero first stage** (horizontal): the first stage's value (large) and label sit inside its band, and its footer cell stays empty. When the band is too short or narrow for that text, or the first stage has a `color` slot, the first stage falls back to the normal footer, so nothing is hidden. The hero text is `--funnel-chart-hero-fg` (the surface colour) set as WCAG large text, since `--chart-series-1` follows the accent and not every accent's lead hue clears 4.5:1 with it (all clear 3:1); recheck it if you override `--funnel-chart-ramp-color`. Later stages show the conversion pill in the band and value + label underneath, with dashed rules between footer columns.
74
74
  - **Shape** (both layouts): `'taper'` (default) holds each stage's size for most of its column, then a short straight diagonal leads into the next; `'sharp'` draws full-column trapezoids. The last stage has no neck.
75
75
  - **Layout.** Horizontal while every stage gets at least 96px of width. Narrower, it switches to vertical: one funnel slice per row (the same `shape`, turned on its side, thin gaps between slices) beside a table-like grid with a header (Stage, Value, vs previous) and per row a colour swatch, the label (wrapping, never truncated), the value and the step pill (the first row shows "—"). The visible header is hidden from screen readers; the hidden data table is their source. As a last resort the rows scroll inside the plot. Unmeasured (first paint, SSR) it assumes horizontal.
76
76
  - **Clickable stages.** `onStageClick(stage, index)` makes every stage cell a button (Tab, Enter / Space) and receives your original stage object. Omit it for a read-only funnel. Escape dismisses the active stage.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eocrm/design-system",
3
- "version": "0.7.0",
3
+ "version": "0.8.1",
4
4
  "description": "Design system for the EOCRM product — React 19 + CSS custom properties.",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -51,7 +51,7 @@
51
51
  "qrcode-generator": "^2.0.4"
52
52
  },
53
53
  "devDependencies": {
54
- "@eocrm/design-tokens": "0.7.0",
54
+ "@eocrm/design-tokens": "0.8.1",
55
55
  "@testing-library/jest-dom": "^6.9.1",
56
56
  "@testing-library/react": "^16.3.2",
57
57
  "@testing-library/user-event": "^14.6.1",