@vector-im/compound-design-tokens 6.8.0 → 6.9.0

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 (10) hide show
  1. package/assets/web/css/cpd-common-semantic.css +7 -0
  2. package/assets/web/js/cpdDark.d.ts +7 -0
  3. package/assets/web/js/cpdDark.js +8 -0
  4. package/assets/web/js/cpdDarkHc.d.ts +7 -0
  5. package/assets/web/js/cpdDarkHc.js +8 -0
  6. package/assets/web/js/cpdLight.d.ts +7 -0
  7. package/assets/web/js/cpdLight.js +8 -0
  8. package/assets/web/js/cpdLightHc.d.ts +7 -0
  9. package/assets/web/js/cpdLightHc.js +8 -0
  10. package/package.json +1 -1
package/assets/web/css/cpd-common-semantic.css CHANGED
@@ -85,6 +85,13 @@
85
85
  --cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
86
86
  --cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
87
87
  --cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
88
+ --cpd-color-gradient-critical-stop1: var(--cpd-color-alpha-red-500);
89
+ --cpd-color-gradient-critical-stop2: var(--cpd-color-alpha-red-400);
90
+ --cpd-color-gradient-critical-stop3: var(--cpd-color-alpha-red-300);
91
+ --cpd-color-gradient-critical-stop4: var(--cpd-color-alpha-red-200);
92
+ --cpd-color-gradient-critical-stop5: var(--cpd-color-alpha-red-100);
93
+ --cpd-color-gradient-critical-stop6: var(--cpd-color-transparent);
88
94
  --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
95
  --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%);
96
+ --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 20%, var(--cpd-color-gradient-critical-stop3) 40%, var(--cpd-color-gradient-critical-stop4) 60%, var(--cpd-color-gradient-critical-stop5) 80%, var(--cpd-color-gradient-critical-stop6) 100%);
90
97
  }
package/assets/web/js/cpdDark.d.ts CHANGED
@@ -702,6 +702,13 @@ export const cpdColorGradientInfoStop4: string;
702
702
  export const cpdColorGradientInfoStop5: string;
703
703
  export const cpdColorGradientInfoStop6: string;
704
704
  export const cpdColorGradientInfoLinear: string;
705
+ export const cpdColorGradientCriticalStop1: string;
706
+ export const cpdColorGradientCriticalStop2: string;
707
+ export const cpdColorGradientCriticalStop3: string;
708
+ export const cpdColorGradientCriticalStop4: string;
709
+ export const cpdColorGradientCriticalStop5: string;
710
+ export const cpdColorGradientCriticalStop6: string;
711
+ export const cpdColorGradientCriticalLinear: string;
705
712
  export const cpdColorGradientActionStop1: string;
706
713
  export const cpdColorGradientActionStop2: string;
707
714
  export const cpdColorGradientActionStop3: string;
package/assets/web/js/cpdDark.js CHANGED
@@ -732,6 +732,14 @@ export const cpdColorGradientInfoStop5 = "hsl(237, 100%, 18%, 1)";
732
732
  export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
733
733
  export const cpdColorGradientInfoLinear =
734
734
  "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%)";
735
+ export const cpdColorGradientCriticalStop1 = "hsl(0, 100%, 22%, 1)";
736
+ export const cpdColorGradientCriticalStop2 = "hsl(0, 100%, 18%, 1)";
737
+ export const cpdColorGradientCriticalStop3 = "hsl(0, 100%, 14%, 1)";
738
+ export const cpdColorGradientCriticalStop4 = "hsl(0, 100%, 12%, 1)";
739
+ export const cpdColorGradientCriticalStop5 = "hsl(0, 100%, 11%, 1)";
740
+ export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
741
+ export const cpdColorGradientCriticalLinear =
742
+ "linear-gradient(180deg, hsl(0, 100%, 22%, 1) 0%, hsl(0, 100%, 18%, 1) 20%, hsl(0, 100%, 14%, 1) 40%, hsl(0, 100%, 12%, 1) 60%, hsl(0, 100%, 11%, 1) 80%, rgba(0,0,0,0) 100%)";
735
743
  export const cpdColorGradientActionStop1 = "#1fc090";
736
744
  export const cpdColorGradientActionStop2 = "#129a78";
737
745
  export const cpdColorGradientActionStop3 = "#005a43";
package/assets/web/js/cpdDarkHc.d.ts CHANGED
@@ -702,6 +702,13 @@ export const cpdColorGradientInfoStop4: string;
702
702
  export const cpdColorGradientInfoStop5: string;
703
703
  export const cpdColorGradientInfoStop6: string;
704
704
  export const cpdColorGradientInfoLinear: string;
705
+ export const cpdColorGradientCriticalStop1: string;
706
+ export const cpdColorGradientCriticalStop2: string;
707
+ export const cpdColorGradientCriticalStop3: string;
708
+ export const cpdColorGradientCriticalStop4: string;
709
+ export const cpdColorGradientCriticalStop5: string;
710
+ export const cpdColorGradientCriticalStop6: string;
711
+ export const cpdColorGradientCriticalLinear: string;
705
712
  export const cpdColorGradientActionStop1: string;
706
713
  export const cpdColorGradientActionStop2: string;
707
714
  export const cpdColorGradientActionStop3: string;
package/assets/web/js/cpdDarkHc.js CHANGED
@@ -732,6 +732,14 @@ export const cpdColorGradientInfoStop5 = "hsl(234, 100%, 18%, 1)";
732
732
  export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
733
733
  export const cpdColorGradientInfoLinear =
734
734
  "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%)";
735
+ export const cpdColorGradientCriticalStop1 = "hsl(356, 100%, 26%, 1)";
736
+ export const cpdColorGradientCriticalStop2 = "hsl(0, 100%, 20%, 1)";
737
+ export const cpdColorGradientCriticalStop3 = "hsl(0, 100%, 18%, 1)";
738
+ export const cpdColorGradientCriticalStop4 = "hsl(0, 100%, 14%, 1)";
739
+ export const cpdColorGradientCriticalStop5 = "hsl(0, 100%, 12%, 1)";
740
+ export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
741
+ export const cpdColorGradientCriticalLinear =
742
+ "linear-gradient(180deg, hsl(356, 100%, 26%, 1) 0%, hsl(0, 100%, 20%, 1) 20%, hsl(0, 100%, 18%, 1) 40%, hsl(0, 100%, 14%, 1) 60%, hsl(0, 100%, 12%, 1) 80%, rgba(0,0,0,0) 100%)";
735
743
  export const cpdColorGradientActionStop1 = "#8fddbc";
736
744
  export const cpdColorGradientActionStop2 = "#37c998";
737
745
  export const cpdColorGradientActionStop3 = "#00745c";
package/assets/web/js/cpdLight.d.ts CHANGED
@@ -702,6 +702,13 @@ export const cpdColorGradientInfoStop4: string;
702
702
  export const cpdColorGradientInfoStop5: string;
703
703
  export const cpdColorGradientInfoStop6: string;
704
704
  export const cpdColorGradientInfoLinear: string;
705
+ export const cpdColorGradientCriticalStop1: string;
706
+ export const cpdColorGradientCriticalStop2: string;
707
+ export const cpdColorGradientCriticalStop3: string;
708
+ export const cpdColorGradientCriticalStop4: string;
709
+ export const cpdColorGradientCriticalStop5: string;
710
+ export const cpdColorGradientCriticalStop6: string;
711
+ export const cpdColorGradientCriticalLinear: string;
705
712
  export const cpdColorGradientActionStop1: string;
706
713
  export const cpdColorGradientActionStop2: string;
707
714
  export const cpdColorGradientActionStop3: string;
package/assets/web/js/cpdLight.js CHANGED
@@ -732,6 +732,14 @@ export const cpdColorGradientInfoStop5 = "hsla(210, 100%, 61%, 0.03)";
732
732
  export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
733
733
  export const cpdColorGradientInfoLinear =
734
734
  "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%)";
735
+ export const cpdColorGradientCriticalStop1 = "hsla(8, 100%, 51%, 0.27)";
736
+ export const cpdColorGradientCriticalStop2 = "hsla(8, 100%, 52%, 0.15)";
737
+ export const cpdColorGradientCriticalStop3 = "hsla(9, 100%, 54%, 0.08)";
738
+ export const cpdColorGradientCriticalStop4 = "hsla(7, 100%, 56%, 0.04)";
739
+ export const cpdColorGradientCriticalStop5 = "hsla(10, 100%, 61%, 0.03)";
740
+ export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
741
+ export const cpdColorGradientCriticalLinear =
742
+ "linear-gradient(180deg, hsla(8, 100%, 51%, 0.27) 0%, hsla(8, 100%, 52%, 0.15) 20%, hsla(9, 100%, 54%, 0.08) 40%, hsla(7, 100%, 56%, 0.04) 60%, hsla(10, 100%, 61%, 0.03) 80%, rgba(0,0,0,0) 100%)";
735
743
  export const cpdColorGradientActionStop1 = "#98e1c1";
736
744
  export const cpdColorGradientActionStop2 = "#0bc491";
737
745
  export const cpdColorGradientActionStop3 = "#007a61";
package/assets/web/js/cpdLightHc.d.ts CHANGED
@@ -702,6 +702,13 @@ export const cpdColorGradientInfoStop4: string;
702
702
  export const cpdColorGradientInfoStop5: string;
703
703
  export const cpdColorGradientInfoStop6: string;
704
704
  export const cpdColorGradientInfoLinear: string;
705
+ export const cpdColorGradientCriticalStop1: string;
706
+ export const cpdColorGradientCriticalStop2: string;
707
+ export const cpdColorGradientCriticalStop3: string;
708
+ export const cpdColorGradientCriticalStop4: string;
709
+ export const cpdColorGradientCriticalStop5: string;
710
+ export const cpdColorGradientCriticalStop6: string;
711
+ export const cpdColorGradientCriticalLinear: string;
705
712
  export const cpdColorGradientActionStop1: string;
706
713
  export const cpdColorGradientActionStop2: string;
707
714
  export const cpdColorGradientActionStop3: string;
package/assets/web/js/cpdLightHc.js CHANGED
@@ -732,6 +732,14 @@ export const cpdColorGradientInfoStop5 = "hsla(218, 100%, 57%, 0.05)";
732
732
  export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
733
733
  export const cpdColorGradientInfoLinear =
734
734
  "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%)";
735
+ export const cpdColorGradientCriticalStop1 = "hsla(7, 100%, 51%, 0.36)";
736
+ export const cpdColorGradientCriticalStop2 = "hsla(8, 100%, 51%, 0.21)";
737
+ export const cpdColorGradientCriticalStop3 = "hsla(8, 100%, 52%, 0.15)";
738
+ export const cpdColorGradientCriticalStop4 = "hsla(9, 100%, 54%, 0.08)";
739
+ export const cpdColorGradientCriticalStop5 = "hsla(7, 100%, 56%, 0.04)";
740
+ export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
741
+ export const cpdColorGradientCriticalLinear =
742
+ "linear-gradient(180deg, hsla(7, 100%, 51%, 0.36) 0%, hsla(8, 100%, 51%, 0.21) 20%, hsla(8, 100%, 52%, 0.15) 40%, hsla(9, 100%, 54%, 0.08) 60%, hsla(7, 100%, 56%, 0.04) 80%, rgba(0,0,0,0) 100%)";
735
743
  export const cpdColorGradientActionStop1 = "#71d7ae";
736
744
  export const cpdColorGradientActionStop2 = "#00a27c";
737
745
  export const cpdColorGradientActionStop3 = "#00553d";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vector-im/compound-design-tokens",
3
- "version": "6.8.0",
3
+ "version": "6.9.0",
4
4
  "description": "Compound design tokens",
5
5
  "sideEffects": false,
6
6
  "scripts": {