@vector-im/compound-design-tokens 4.0.5 → 5.0.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.
- package/assets/web/css/cpd-common-semantic.css +18 -1
- package/assets/web/css/cpd-theme-dark-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-dark-base.css +1 -0
- package/assets/web/css/cpd-theme-dark-hc-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-dark-hc-base.css +1 -0
- package/assets/web/css/cpd-theme-dark-hc-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-dark-hc-semantic.css +5 -0
- package/assets/web/css/cpd-theme-dark-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-dark-semantic.css +5 -0
- package/assets/web/css/cpd-theme-light-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-light-base.css +1 -0
- package/assets/web/css/cpd-theme-light-hc-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-light-hc-base.css +1 -0
- package/assets/web/css/cpd-theme-light-hc-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-light-hc-semantic.css +5 -0
- package/assets/web/css/cpd-theme-light-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-light-semantic.css +5 -0
- package/assets/web/js/cpdDark.d.ts +23 -0
- package/assets/web/js/cpdDark.js +27 -1
- package/assets/web/js/cpdDarkHc.d.ts +23 -0
- package/assets/web/js/cpdDarkHc.js +27 -1
- package/assets/web/js/cpdLight.d.ts +23 -0
- package/assets/web/js/cpdLight.js +27 -1
- package/assets/web/js/cpdLightHc.d.ts +23 -0
- package/assets/web/js/cpdLightHc.js +27 -1
- package/package.json +13 -5
|
@@ -43,8 +43,10 @@
|
|
|
43
43
|
--cpd-color-bg-accent-rest: var(--cpd-color-green-900);
|
|
44
44
|
--cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
|
|
45
45
|
--cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
|
|
46
|
+
--cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
|
|
46
47
|
--cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
|
|
47
48
|
--cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
|
|
49
|
+
--cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-300);
|
|
48
50
|
--cpd-color-border-disabled: var(--cpd-color-gray-500);
|
|
49
51
|
--cpd-color-border-focused: var(--cpd-color-blue-900);
|
|
50
52
|
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
|
|
@@ -54,7 +56,8 @@
|
|
|
54
56
|
--cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
|
|
55
57
|
--cpd-color-border-critical-subtle: var(--cpd-color-red-500);
|
|
56
58
|
--cpd-color-border-success-subtle: var(--cpd-color-green-500);
|
|
57
|
-
--cpd-color-border-info-subtle: var(--cpd-color-blue-
|
|
59
|
+
--cpd-color-border-info-subtle: var(--cpd-color-blue-700);
|
|
60
|
+
--cpd-color-border-accent-subtle: var(--cpd-color-green-700);
|
|
58
61
|
--cpd-color-icon-primary: var(--cpd-color-gray-1400);
|
|
59
62
|
--cpd-color-icon-secondary: var(--cpd-color-gray-900);
|
|
60
63
|
--cpd-color-icon-tertiary: var(--cpd-color-gray-800);
|
|
@@ -70,4 +73,18 @@
|
|
|
70
73
|
--cpd-color-icon-success-primary: var(--cpd-color-green-900);
|
|
71
74
|
--cpd-color-icon-info-primary: var(--cpd-color-blue-900);
|
|
72
75
|
--cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
|
|
76
|
+
--cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-green-500);
|
|
77
|
+
--cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-green-400);
|
|
78
|
+
--cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-green-300);
|
|
79
|
+
--cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
|
|
80
|
+
--cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
|
|
81
|
+
--cpd-color-gradient-subtle-stop6: var(--cpd-color-transparent);
|
|
82
|
+
--cpd-color-gradient-info-stop1: var(--cpd-color-alpha-blue-500);
|
|
83
|
+
--cpd-color-gradient-info-stop2: var(--cpd-color-alpha-blue-400);
|
|
84
|
+
--cpd-color-gradient-info-stop3: var(--cpd-color-alpha-blue-300);
|
|
85
|
+
--cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
|
|
86
|
+
--cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
|
|
87
|
+
--cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
|
|
88
|
+
--cpd-color-gradient-subtle-linear: linear-gradient(180deg, var(--cpd-color-gradient-subtle-stop1) 0%, var(--cpd-color-gradient-subtle-stop2) 20%, var(--cpd-color-gradient-subtle-stop3) 40%, var(--cpd-color-gradient-subtle-stop4) 60%, var(--cpd-color-gradient-subtle-stop5) 80%, var(--cpd-color-gradient-subtle-stop6) 100%);
|
|
89
|
+
--cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 20%, var(--cpd-color-gradient-info-stop3) 40%, var(--cpd-color-gradient-info-stop4) 60%, var(--cpd-color-gradient-info-stop5) 80%, var(--cpd-color-gradient-info-stop6) 100%);
|
|
73
90
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-dark-hc.cpd-theme-dark-hc {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-dark.cpd-theme-dark {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-light-hc.cpd-theme-light-hc {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-light.cpd-theme-light {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -586,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
586
586
|
export const cpdColorAlphaPink1200: string;
|
|
587
587
|
export const cpdColorAlphaPink1300: string;
|
|
588
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
589
590
|
export const cpdColorTextPrimary: string;
|
|
590
591
|
export const cpdColorTextSecondary: string;
|
|
591
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -631,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
631
632
|
export const cpdColorBgAccentRest: string;
|
|
632
633
|
export const cpdColorBgAccentHovered: string;
|
|
633
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
634
636
|
export const cpdColorBgBadgeAccent: string;
|
|
635
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
636
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
637
640
|
export const cpdColorBorderDisabled: string;
|
|
638
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -644,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
644
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
645
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
646
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
647
651
|
export const cpdColorIconPrimary: string;
|
|
648
652
|
export const cpdColorIconSecondary: string;
|
|
649
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -659,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
659
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
660
664
|
export const cpdColorIconInfoPrimary: string;
|
|
661
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
package/assets/web/js/cpdDark.js
CHANGED
|
@@ -611,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsl(345, 98%, 76%, 1)";
|
|
|
611
611
|
export const cpdColorAlphaPink1200 = "hsl(346, 100%, 84%, 1)";
|
|
612
612
|
export const cpdColorAlphaPink1300 = "hsl(347, 100%, 91%, 1)";
|
|
613
613
|
export const cpdColorAlphaPink1400 = "hsl(347, 100%, 96%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
614
615
|
export const cpdColorTextPrimary = "#ebeef2";
|
|
615
616
|
export const cpdColorTextSecondary = "#808994";
|
|
616
617
|
export const cpdColorTextDisabled = "#656c76";
|
|
@@ -656,8 +657,10 @@ export const cpdColorBgDecorative6 = "#470000";
|
|
|
656
657
|
export const cpdColorBgAccentRest = "#129a78";
|
|
657
658
|
export const cpdColorBgAccentHovered = "#17ac84";
|
|
658
659
|
export const cpdColorBgAccentPressed = "#1fc090";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsl(151, 100%, 7%, 1)";
|
|
659
661
|
export const cpdColorBgBadgeAccent = "hsl(151, 100%, 7%, 1)";
|
|
660
662
|
export const cpdColorBgBadgeInfo = "hsl(229, 100%, 20%, 1)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(280, 41%, 90%, 0.06)";
|
|
661
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
662
665
|
export const cpdColorBorderDisabled = "#323539";
|
|
663
666
|
export const cpdColorBorderFocused = "#4187eb";
|
|
@@ -668,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#fd3e3c";
|
|
|
668
671
|
export const cpdColorBorderCriticalHovered = "#ff665d";
|
|
669
672
|
export const cpdColorBorderCriticalSubtle = "#710000";
|
|
670
673
|
export const cpdColorBorderSuccessSubtle = "#003d29";
|
|
671
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#0b49ab";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#005a43";
|
|
672
676
|
export const cpdColorIconPrimary = "#ebeef2";
|
|
673
677
|
export const cpdColorIconSecondary = "#808994";
|
|
674
678
|
export const cpdColorIconTertiary = "#656c76";
|
|
@@ -684,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#fd3e3c";
|
|
|
684
688
|
export const cpdColorIconSuccessPrimary = "#129a78";
|
|
685
689
|
export const cpdColorIconInfoPrimary = "#4187eb";
|
|
686
690
|
export const cpdColorIconOnSolidPrimary = "#101317";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsl(160, 100%, 12%, 1)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsl(155, 100%, 9%, 1)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsl(151, 100%, 7%, 1)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsl(147, 100%, 6%, 1)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsl(144, 100%, 6%, 1)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"linear-gradient(180deg, hsl(160, 100%, 12%, 1) 0%, hsl(155, 100%, 9%, 1) 20%, hsl(151, 100%, 7%, 1) 40%, hsl(147, 100%, 6%, 1) 60%, hsl(144, 100%, 6%, 1) 80%, rgba(0,0,0,0) 100%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(221, 100%, 37%, 0.63)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsl(224, 100%, 22%, 1)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsl(229, 100%, 20%, 1)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsl(234, 100%, 18%, 1)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsl(237, 100%, 18%, 1)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"linear-gradient(180deg, hsla(221, 100%, 37%, 0.63) 0%, hsl(224, 100%, 22%, 1) 20%, hsl(229, 100%, 20%, 1) 40%, hsl(234, 100%, 18%, 1) 60%, hsl(237, 100%, 18%, 1) 80%, rgba(0,0,0,0) 100%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#1fc090";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#129a78";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#005a43";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#003d29";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #1fc090 0%, #129a78 33%, #005a43 66%, #003d29 100%)";
|
|
@@ -586,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
586
586
|
export const cpdColorAlphaPink1200: string;
|
|
587
587
|
export const cpdColorAlphaPink1300: string;
|
|
588
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
589
590
|
export const cpdColorTextPrimary: string;
|
|
590
591
|
export const cpdColorTextSecondary: string;
|
|
591
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -631,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
631
632
|
export const cpdColorBgAccentRest: string;
|
|
632
633
|
export const cpdColorBgAccentHovered: string;
|
|
633
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
634
636
|
export const cpdColorBgBadgeAccent: string;
|
|
635
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
636
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
637
640
|
export const cpdColorBorderDisabled: string;
|
|
638
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -644,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
644
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
645
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
646
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
647
651
|
export const cpdColorIconPrimary: string;
|
|
648
652
|
export const cpdColorIconSecondary: string;
|
|
649
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -659,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
659
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
660
664
|
export const cpdColorIconInfoPrimary: string;
|
|
661
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
|
@@ -611,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsl(347, 100%, 87%, 1)";
|
|
|
611
611
|
export const cpdColorAlphaPink1200 = "hsl(347, 100%, 90%, 1)";
|
|
612
612
|
export const cpdColorAlphaPink1300 = "hsl(347, 100%, 96%, 1)";
|
|
613
613
|
export const cpdColorAlphaPink1400 = "hsl(347, 100%, 97%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
614
615
|
export const cpdColorTextPrimary = "#f2f5f7";
|
|
615
616
|
export const cpdColorTextSecondary = "#acb4bd";
|
|
616
617
|
export const cpdColorTextDisabled = "#79818d";
|
|
@@ -656,8 +657,10 @@ export const cpdColorBgDecorative6 = "#580000";
|
|
|
656
657
|
export const cpdColorBgAccentRest = "#37c998";
|
|
657
658
|
export const cpdColorBgAccentHovered = "#61d2a6";
|
|
658
659
|
export const cpdColorBgAccentPressed = "#8fddbc";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsl(155, 100%, 9%, 1)";
|
|
659
661
|
export const cpdColorBgBadgeAccent = "hsl(155, 100%, 9%, 1)";
|
|
660
662
|
export const cpdColorBgBadgeInfo = "hsl(224, 100%, 22%, 1)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(270, 37%, 93%, 0.1)";
|
|
661
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
662
665
|
export const cpdColorBorderDisabled = "#3c3f44";
|
|
663
666
|
export const cpdColorBorderFocused = "#89b5f6";
|
|
@@ -668,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#ff968c";
|
|
|
668
671
|
export const cpdColorBorderCriticalHovered = "#ffa79d";
|
|
669
672
|
export const cpdColorBorderCriticalSubtle = "#830009";
|
|
670
673
|
export const cpdColorBorderSuccessSubtle = "#004832";
|
|
671
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#0e61d1";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#00745c";
|
|
672
676
|
export const cpdColorIconPrimary = "#f2f5f7";
|
|
673
677
|
export const cpdColorIconSecondary = "#acb4bd";
|
|
674
678
|
export const cpdColorIconTertiary = "#79818d";
|
|
@@ -684,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#ff968c";
|
|
|
684
688
|
export const cpdColorIconSuccessPrimary = "#37c998";
|
|
685
689
|
export const cpdColorIconInfoPrimary = "#89b5f6";
|
|
686
690
|
export const cpdColorIconOnSolidPrimary = "#101317";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsl(162, 100%, 14%, 1)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsl(158, 100%, 11%, 1)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsl(155, 100%, 9%, 1)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsl(151, 100%, 7%, 1)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsl(147, 100%, 6%, 1)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"linear-gradient(180deg, hsl(162, 100%, 14%, 1) 0%, hsl(158, 100%, 11%, 1) 20%, hsl(155, 100%, 9%, 1) 40%, hsl(151, 100%, 7%, 1) 60%, hsl(147, 100%, 6%, 1) 80%, rgba(0,0,0,0) 100%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(219, 99%, 50%, 0.53)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsla(222, 100%, 28%, 0.82)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsl(224, 100%, 22%, 1)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsl(229, 100%, 20%, 1)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsl(234, 100%, 18%, 1)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"linear-gradient(180deg, hsla(219, 99%, 50%, 0.53) 0%, hsla(222, 100%, 28%, 0.82) 20%, hsl(224, 100%, 22%, 1) 40%, hsl(229, 100%, 20%, 1) 60%, hsl(234, 100%, 18%, 1) 80%, rgba(0,0,0,0) 100%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#8fddbc";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#37c998";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#00745c";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#004832";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #8fddbc 0%, #37c998 33%, #00745c 66%, #004832 100%)";
|
|
@@ -586,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
586
586
|
export const cpdColorAlphaPink1200: string;
|
|
587
587
|
export const cpdColorAlphaPink1300: string;
|
|
588
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
589
590
|
export const cpdColorTextPrimary: string;
|
|
590
591
|
export const cpdColorTextSecondary: string;
|
|
591
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -631,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
631
632
|
export const cpdColorBgAccentRest: string;
|
|
632
633
|
export const cpdColorBgAccentHovered: string;
|
|
633
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
634
636
|
export const cpdColorBgBadgeAccent: string;
|
|
635
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
636
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
637
640
|
export const cpdColorBorderDisabled: string;
|
|
638
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -644,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
644
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
645
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
646
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
647
651
|
export const cpdColorIconPrimary: string;
|
|
648
652
|
export const cpdColorIconSecondary: string;
|
|
649
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -659,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
659
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
660
664
|
export const cpdColorIconInfoPrimary: string;
|
|
661
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
|
@@ -611,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsla(331, 100%, 31%, 0.97)";
|
|
|
611
611
|
export const cpdColorAlphaPink1200 = "hsla(330, 98%, 24%, 0.98)";
|
|
612
612
|
export const cpdColorAlphaPink1300 = "hsl(333, 100%, 19%, 1)";
|
|
613
613
|
export const cpdColorAlphaPink1400 = "hsl(339, 100%, 13%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
614
615
|
export const cpdColorTextPrimary = "#1b1d22";
|
|
615
616
|
export const cpdColorTextSecondary = "#656d77";
|
|
616
617
|
export const cpdColorTextDisabled = "#818a95";
|
|
@@ -656,8 +657,10 @@ export const cpdColorBgDecorative6 = "#ffefe4";
|
|
|
656
657
|
export const cpdColorBgAccentRest = "#007a61";
|
|
657
658
|
export const cpdColorBgAccentHovered = "#006b52";
|
|
658
659
|
export const cpdColorBgAccentPressed = "#005c45";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsla(150, 100%, 36%, 0.11)";
|
|
659
661
|
export const cpdColorBgBadgeAccent = "hsla(150, 100%, 36%, 0.11)";
|
|
660
662
|
export const cpdColorBgBadgeInfo = "hsla(215, 100%, 52%, 0.09)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(216, 89%, 18%, 0.06)";
|
|
661
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
|
|
662
665
|
export const cpdColorBorderDisabled = "#cdd3da";
|
|
663
666
|
export const cpdColorBorderFocused = "#0467dd";
|
|
@@ -668,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#d51928";
|
|
|
668
671
|
export const cpdColorBorderCriticalHovered = "#bc0f22";
|
|
669
672
|
export const cpdColorBorderCriticalSubtle = "#ffc5bc";
|
|
670
673
|
export const cpdColorBorderSuccessSubtle = "#98e1c1";
|
|
671
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#7eaff6";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#0bc491";
|
|
672
676
|
export const cpdColorIconPrimary = "#1b1d22";
|
|
673
677
|
export const cpdColorIconSecondary = "#656d77";
|
|
674
678
|
export const cpdColorIconTertiary = "#818a95";
|
|
@@ -684,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#d51928";
|
|
|
684
688
|
export const cpdColorIconSuccessPrimary = "#007a61";
|
|
685
689
|
export const cpdColorIconInfoPrimary = "#0467dd";
|
|
686
690
|
export const cpdColorIconOnSolidPrimary = "#ffffff";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsla(154, 96%, 37%, 0.41)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsla(151, 93%, 37%, 0.23)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsla(150, 100%, 36%, 0.11)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsla(150, 79%, 41%, 0.06)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsla(156, 79%, 41%, 0.03)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"linear-gradient(180deg, hsla(154, 96%, 37%, 0.41) 0%, hsla(151, 93%, 37%, 0.23) 20%, hsla(150, 100%, 36%, 0.11) 40%, hsla(150, 79%, 41%, 0.06) 60%, hsla(156, 79%, 41%, 0.03) 80%, rgba(0,0,0,0) 100%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(215, 93%, 50%, 0.28)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsla(216, 95%, 51%, 0.16)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsla(215, 100%, 52%, 0.09)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsla(218, 100%, 57%, 0.05)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsla(210, 100%, 61%, 0.03)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"linear-gradient(180deg, hsla(215, 93%, 50%, 0.28) 0%, hsla(216, 95%, 51%, 0.16) 20%, hsla(215, 100%, 52%, 0.09) 40%, hsla(218, 100%, 57%, 0.05) 60%, hsla(210, 100%, 61%, 0.03) 80%, rgba(0,0,0,0) 100%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#98e1c1";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#0bc491";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#007a61";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#005c45";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #98e1c1 0%, #0bc491 33%, #007a61 66%, #005c45 100%)";
|
|
@@ -586,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
586
586
|
export const cpdColorAlphaPink1200: string;
|
|
587
587
|
export const cpdColorAlphaPink1300: string;
|
|
588
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
589
590
|
export const cpdColorTextPrimary: string;
|
|
590
591
|
export const cpdColorTextSecondary: string;
|
|
591
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -631,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
631
632
|
export const cpdColorBgAccentRest: string;
|
|
632
633
|
export const cpdColorBgAccentHovered: string;
|
|
633
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
634
636
|
export const cpdColorBgBadgeAccent: string;
|
|
635
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
636
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
637
640
|
export const cpdColorBorderDisabled: string;
|
|
638
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -644,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
644
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
645
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
646
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
647
651
|
export const cpdColorIconPrimary: string;
|
|
648
652
|
export const cpdColorIconSecondary: string;
|
|
649
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -659,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
659
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
660
664
|
export const cpdColorIconInfoPrimary: string;
|
|
661
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
|
@@ -611,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsl(329, 100%, 22%, 1)";
|
|
|
611
611
|
export const cpdColorAlphaPink1200 = "hsl(332, 100%, 20%, 1)";
|
|
612
612
|
export const cpdColorAlphaPink1300 = "hsl(337, 100%, 15%, 1)";
|
|
613
613
|
export const cpdColorAlphaPink1400 = "hsl(341, 100%, 13%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
614
615
|
export const cpdColorTextPrimary = "#1a1c21";
|
|
615
616
|
export const cpdColorTextSecondary = "#474a51";
|
|
616
617
|
export const cpdColorTextDisabled = "#6c737e";
|
|
@@ -656,8 +657,10 @@ export const cpdColorBgDecorative6 = "#ffdfc8";
|
|
|
656
657
|
export const cpdColorBgAccentRest = "#00553d";
|
|
657
658
|
export const cpdColorBgAccentHovered = "#004d36";
|
|
658
659
|
export const cpdColorBgAccentPressed = "#00402b";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsla(151, 93%, 37%, 0.23)";
|
|
659
661
|
export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
|
|
660
662
|
export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(213, 90%, 20%, 0.12)";
|
|
661
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
|
|
662
665
|
export const cpdColorBorderDisabled = "#bdc4cc";
|
|
663
666
|
export const cpdColorBorderFocused = "#0543a7";
|
|
@@ -668,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#99001a";
|
|
|
668
671
|
export const cpdColorBorderCriticalHovered = "#8b000c";
|
|
669
672
|
export const cpdColorBorderCriticalSubtle = "#ffafa5";
|
|
670
673
|
export const cpdColorBorderSuccessSubtle = "#71d7ae";
|
|
671
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#4a8ef0";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#00a27c";
|
|
672
676
|
export const cpdColorIconPrimary = "#1a1c21";
|
|
673
677
|
export const cpdColorIconSecondary = "#474a51";
|
|
674
678
|
export const cpdColorIconTertiary = "#6c737e";
|
|
@@ -684,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#99001a";
|
|
|
684
688
|
export const cpdColorIconSuccessPrimary = "#00553d";
|
|
685
689
|
export const cpdColorIconInfoPrimary = "#0543a7";
|
|
686
690
|
export const cpdColorIconOnSolidPrimary = "#ffffff";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsla(156, 99%, 36%, 0.56)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsla(153, 95%, 37%, 0.32)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsla(151, 93%, 37%, 0.23)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsla(150, 100%, 36%, 0.11)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsla(150, 79%, 41%, 0.06)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"linear-gradient(180deg, hsla(156, 99%, 36%, 0.56) 0%, hsla(153, 95%, 37%, 0.32) 20%, hsla(151, 93%, 37%, 0.23) 40%, hsla(150, 100%, 36%, 0.11) 60%, hsla(150, 79%, 41%, 0.06) 80%, rgba(0,0,0,0) 100%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(216, 95%, 48%, 0.37)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsla(216, 96%, 49%, 0.22)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsla(216, 95%, 51%, 0.16)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsla(215, 100%, 52%, 0.09)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsla(218, 100%, 57%, 0.05)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"linear-gradient(180deg, hsla(216, 95%, 48%, 0.37) 0%, hsla(216, 96%, 49%, 0.22) 20%, hsla(216, 95%, 51%, 0.16) 40%, hsla(215, 100%, 52%, 0.09) 60%, hsla(218, 100%, 57%, 0.05) 80%, rgba(0,0,0,0) 100%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#71d7ae";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#00a27c";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#00553d";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#00402b";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #71d7ae 0%, #00a27c 33%, #00553d 66%, #00402b 100%)";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vector-im/compound-design-tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.1",
|
|
4
4
|
"description": "Compound design tokens",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"scripts": {
|
|
@@ -12,8 +12,16 @@
|
|
|
12
12
|
"check": "yarn exec biome -- check",
|
|
13
13
|
"types": "yarn exec tsc -- --noEmit"
|
|
14
14
|
},
|
|
15
|
-
"keywords": [
|
|
16
|
-
|
|
15
|
+
"keywords": [
|
|
16
|
+
"compound",
|
|
17
|
+
"design tokens",
|
|
18
|
+
"style dictionary",
|
|
19
|
+
"css"
|
|
20
|
+
],
|
|
21
|
+
"files": [
|
|
22
|
+
"./assets/web/**/*",
|
|
23
|
+
"./icons/**/*"
|
|
24
|
+
],
|
|
17
25
|
"main": "assets/web/js/index.js",
|
|
18
26
|
"type": "module",
|
|
19
27
|
"exports": {
|
|
@@ -49,7 +57,7 @@
|
|
|
49
57
|
"@babel/generator": "^7.24.7",
|
|
50
58
|
"@babel/plugin-transform-react-jsx": "^7.24.7",
|
|
51
59
|
"@babel/types": "^7.24.7",
|
|
52
|
-
"@biomejs/biome": "^
|
|
60
|
+
"@biomejs/biome": "^2.0.0",
|
|
53
61
|
"@capsizecss/core": "^4.1.2",
|
|
54
62
|
"@capsizecss/metrics": "^3.3.0",
|
|
55
63
|
"@svgr/core": "^8.1.0",
|
|
@@ -65,7 +73,7 @@
|
|
|
65
73
|
"prettier": "^3.3.3",
|
|
66
74
|
"style-dictionary": "^5.0.0",
|
|
67
75
|
"svg2vectordrawable": "^2.9.1",
|
|
68
|
-
"svgo": "^
|
|
76
|
+
"svgo": "^4.0.0",
|
|
69
77
|
"tsx": "^4.15.6",
|
|
70
78
|
"typescript": "^5.4.5",
|
|
71
79
|
"undici": "^7.2.0",
|