@vector-im/compound-design-tokens 4.0.0 → 4.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 +4 -0
- package/assets/web/js/cpdDark.d.ts +4 -0
- package/assets/web/js/cpdDark.js +4 -0
- package/assets/web/js/cpdDarkHc.d.ts +4 -0
- package/assets/web/js/cpdDarkHc.js +4 -0
- package/assets/web/js/cpdLight.d.ts +4 -0
- package/assets/web/js/cpdLight.js +4 -0
- package/assets/web/js/cpdLightHc.d.ts +4 -0
- package/assets/web/js/cpdLightHc.js +4 -0
- package/package.json +1 -1
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
--cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
|
|
16
16
|
--cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
|
|
17
17
|
--cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
|
|
18
|
+
--cpd-color-text-badge-accent: var(--cpd-color-green-1100);
|
|
19
|
+
--cpd-color-text-badge-info: var(--cpd-color-blue-1100);
|
|
18
20
|
--cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
|
|
19
21
|
--cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
|
|
20
22
|
--cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
|
|
@@ -41,6 +43,8 @@
|
|
|
41
43
|
--cpd-color-bg-accent-rest: var(--cpd-color-green-900);
|
|
42
44
|
--cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
|
|
43
45
|
--cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
|
|
46
|
+
--cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
|
|
47
|
+
--cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
|
|
44
48
|
--cpd-color-border-disabled: var(--cpd-color-gray-500);
|
|
45
49
|
--cpd-color-border-focused: var(--cpd-color-blue-900);
|
|
46
50
|
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
|
|
@@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string;
|
|
|
597
597
|
export const cpdColorTextDecorative4: string;
|
|
598
598
|
export const cpdColorTextDecorative5: string;
|
|
599
599
|
export const cpdColorTextDecorative6: string;
|
|
600
|
+
export const cpdColorTextBadgeAccent: string;
|
|
601
|
+
export const cpdColorTextBadgeInfo: string;
|
|
600
602
|
export const cpdColorBgSubtlePrimary: string;
|
|
601
603
|
export const cpdColorBgSubtleSecondary: string;
|
|
602
604
|
export const cpdColorBgCanvasDefault: string;
|
|
@@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string;
|
|
|
624
626
|
export const cpdColorBgAccentRest: string;
|
|
625
627
|
export const cpdColorBgAccentHovered: string;
|
|
626
628
|
export const cpdColorBgAccentPressed: string;
|
|
629
|
+
export const cpdColorBgBadgeAccent: string;
|
|
630
|
+
export const cpdColorBgBadgeInfo: string;
|
|
627
631
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
628
632
|
export const cpdColorBorderDisabled: string;
|
|
629
633
|
export const cpdColorBorderFocused: string;
|
package/assets/web/js/cpdDark.js
CHANGED
|
@@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#d991de";
|
|
|
622
622
|
export const cpdColorTextDecorative4 = "#ad9cfe";
|
|
623
623
|
export const cpdColorTextDecorative5 = "#fe84a2";
|
|
624
624
|
export const cpdColorTextDecorative6 = "#f6913d";
|
|
625
|
+
export const cpdColorTextBadgeAccent = "#1fc090";
|
|
626
|
+
export const cpdColorTextBadgeInfo = "#7aacf4";
|
|
625
627
|
export const cpdColorBgSubtlePrimary = "#26282d";
|
|
626
628
|
export const cpdColorBgSubtleSecondary = "#1d1f24";
|
|
627
629
|
export const cpdColorBgCanvasDefault = "#101317";
|
|
@@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#470000";
|
|
|
649
651
|
export const cpdColorBgAccentRest = "#129a78";
|
|
650
652
|
export const cpdColorBgAccentHovered = "#17ac84";
|
|
651
653
|
export const cpdColorBgAccentPressed = "#1fc090";
|
|
654
|
+
export const cpdColorBgBadgeAccent = "hsl(151, 100%, 7%, 1)";
|
|
655
|
+
export const cpdColorBgBadgeInfo = "hsl(229, 100%, 20%, 1)";
|
|
652
656
|
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
653
657
|
export const cpdColorBorderDisabled = "#323539";
|
|
654
658
|
export const cpdColorBorderFocused = "#4187eb";
|
|
@@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string;
|
|
|
597
597
|
export const cpdColorTextDecorative4: string;
|
|
598
598
|
export const cpdColorTextDecorative5: string;
|
|
599
599
|
export const cpdColorTextDecorative6: string;
|
|
600
|
+
export const cpdColorTextBadgeAccent: string;
|
|
601
|
+
export const cpdColorTextBadgeInfo: string;
|
|
600
602
|
export const cpdColorBgSubtlePrimary: string;
|
|
601
603
|
export const cpdColorBgSubtleSecondary: string;
|
|
602
604
|
export const cpdColorBgCanvasDefault: string;
|
|
@@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string;
|
|
|
624
626
|
export const cpdColorBgAccentRest: string;
|
|
625
627
|
export const cpdColorBgAccentHovered: string;
|
|
626
628
|
export const cpdColorBgAccentPressed: string;
|
|
629
|
+
export const cpdColorBgBadgeAccent: string;
|
|
630
|
+
export const cpdColorBgBadgeInfo: string;
|
|
627
631
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
628
632
|
export const cpdColorBorderDisabled: string;
|
|
629
633
|
export const cpdColorBorderFocused: string;
|
|
@@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#eac0ed";
|
|
|
622
622
|
export const cpdColorTextDecorative4 = "#cec7ff";
|
|
623
623
|
export const cpdColorTextDecorative5 = "#ffbbca";
|
|
624
624
|
export const cpdColorTextDecorative6 = "#fdc197";
|
|
625
|
+
export const cpdColorTextBadgeAccent = "#8fddbc";
|
|
626
|
+
export const cpdColorTextBadgeInfo = "#b2cffa";
|
|
625
627
|
export const cpdColorBgSubtlePrimary = "#2b2e33";
|
|
626
628
|
export const cpdColorBgSubtleSecondary = "#26282d";
|
|
627
629
|
export const cpdColorBgCanvasDefault = "#101317";
|
|
@@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#580000";
|
|
|
649
651
|
export const cpdColorBgAccentRest = "#37c998";
|
|
650
652
|
export const cpdColorBgAccentHovered = "#61d2a6";
|
|
651
653
|
export const cpdColorBgAccentPressed = "#8fddbc";
|
|
654
|
+
export const cpdColorBgBadgeAccent = "hsl(155, 100%, 9%, 1)";
|
|
655
|
+
export const cpdColorBgBadgeInfo = "hsl(224, 100%, 22%, 1)";
|
|
652
656
|
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
653
657
|
export const cpdColorBorderDisabled = "#3c3f44";
|
|
654
658
|
export const cpdColorBorderFocused = "#89b5f6";
|
|
@@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string;
|
|
|
597
597
|
export const cpdColorTextDecorative4: string;
|
|
598
598
|
export const cpdColorTextDecorative5: string;
|
|
599
599
|
export const cpdColorTextDecorative6: string;
|
|
600
|
+
export const cpdColorTextBadgeAccent: string;
|
|
601
|
+
export const cpdColorTextBadgeInfo: string;
|
|
600
602
|
export const cpdColorBgSubtlePrimary: string;
|
|
601
603
|
export const cpdColorBgSubtleSecondary: string;
|
|
602
604
|
export const cpdColorBgCanvasDefault: string;
|
|
@@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string;
|
|
|
624
626
|
export const cpdColorBgAccentRest: string;
|
|
625
627
|
export const cpdColorBgAccentHovered: string;
|
|
626
628
|
export const cpdColorBgAccentPressed: string;
|
|
629
|
+
export const cpdColorBgBadgeAccent: string;
|
|
630
|
+
export const cpdColorBgBadgeInfo: string;
|
|
627
631
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
628
632
|
export const cpdColorBorderDisabled: string;
|
|
629
633
|
export const cpdColorBorderFocused: string;
|
|
@@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#822198";
|
|
|
622
622
|
export const cpdColorTextDecorative4 = "#5d26cd";
|
|
623
623
|
export const cpdColorTextDecorative5 = "#9f0850";
|
|
624
624
|
export const cpdColorTextDecorative6 = "#9b2200";
|
|
625
|
+
export const cpdColorTextBadgeAccent = "#005c45";
|
|
626
|
+
export const cpdColorTextBadgeInfo = "#064ab1";
|
|
625
627
|
export const cpdColorBgSubtlePrimary = "#e1e6ec";
|
|
626
628
|
export const cpdColorBgSubtleSecondary = "#f0f2f5";
|
|
627
629
|
export const cpdColorBgCanvasDefault = "#ffffff";
|
|
@@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#ffefe4";
|
|
|
649
651
|
export const cpdColorBgAccentRest = "#007a61";
|
|
650
652
|
export const cpdColorBgAccentHovered = "#006b52";
|
|
651
653
|
export const cpdColorBgAccentPressed = "#005c45";
|
|
654
|
+
export const cpdColorBgBadgeAccent = "hsla(150, 100%, 36%, 0.11)";
|
|
655
|
+
export const cpdColorBgBadgeInfo = "hsla(215, 100%, 52%, 0.09)";
|
|
652
656
|
export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
|
|
653
657
|
export const cpdColorBorderDisabled = "#cdd3da";
|
|
654
658
|
export const cpdColorBorderFocused = "#0467dd";
|
|
@@ -597,6 +597,8 @@ export const cpdColorTextDecorative3: string;
|
|
|
597
597
|
export const cpdColorTextDecorative4: string;
|
|
598
598
|
export const cpdColorTextDecorative5: string;
|
|
599
599
|
export const cpdColorTextDecorative6: string;
|
|
600
|
+
export const cpdColorTextBadgeAccent: string;
|
|
601
|
+
export const cpdColorTextBadgeInfo: string;
|
|
600
602
|
export const cpdColorBgSubtlePrimary: string;
|
|
601
603
|
export const cpdColorBgSubtleSecondary: string;
|
|
602
604
|
export const cpdColorBgCanvasDefault: string;
|
|
@@ -624,6 +626,8 @@ export const cpdColorBgDecorative6: string;
|
|
|
624
626
|
export const cpdColorBgAccentRest: string;
|
|
625
627
|
export const cpdColorBgAccentHovered: string;
|
|
626
628
|
export const cpdColorBgAccentPressed: string;
|
|
629
|
+
export const cpdColorBgBadgeAccent: string;
|
|
630
|
+
export const cpdColorBgBadgeInfo: string;
|
|
627
631
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
628
632
|
export const cpdColorBorderDisabled: string;
|
|
629
633
|
export const cpdColorBorderFocused: string;
|
|
@@ -622,6 +622,8 @@ export const cpdColorTextDecorative3 = "#5c0f76";
|
|
|
622
622
|
export const cpdColorTextDecorative4 = "#4200a6";
|
|
623
623
|
export const cpdColorTextDecorative5 = "#72003a";
|
|
624
624
|
export const cpdColorTextDecorative6 = "#770000";
|
|
625
|
+
export const cpdColorTextBadgeAccent = "#00402b";
|
|
626
|
+
export const cpdColorTextBadgeInfo = "#043088";
|
|
625
627
|
export const cpdColorBgSubtlePrimary = "#d7dce3";
|
|
626
628
|
export const cpdColorBgSubtleSecondary = "#e1e6ec";
|
|
627
629
|
export const cpdColorBgCanvasDefault = "#ffffff";
|
|
@@ -649,6 +651,8 @@ export const cpdColorBgDecorative6 = "#ffdfc8";
|
|
|
649
651
|
export const cpdColorBgAccentRest = "#00553d";
|
|
650
652
|
export const cpdColorBgAccentHovered = "#004d36";
|
|
651
653
|
export const cpdColorBgAccentPressed = "#00402b";
|
|
654
|
+
export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
|
|
655
|
+
export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
|
|
652
656
|
export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
|
|
653
657
|
export const cpdColorBorderDisabled = "#bdc4cc";
|
|
654
658
|
export const cpdColorBorderFocused = "#0543a7";
|