@vector-im/compound-design-tokens 5.0.0 → 5.0.2

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 (18) hide show
  1. package/assets/web/css/cpd-common-semantic.css +0 -3
  2. package/assets/web/css/cpd-theme-dark-hc-semantic-mq.css +3 -0
  3. package/assets/web/css/cpd-theme-dark-hc-semantic.css +3 -0
  4. package/assets/web/css/cpd-theme-dark-semantic-mq.css +3 -0
  5. package/assets/web/css/cpd-theme-dark-semantic.css +3 -0
  6. package/assets/web/css/cpd-theme-light-hc-semantic-mq.css +3 -0
  7. package/assets/web/css/cpd-theme-light-hc-semantic.css +3 -0
  8. package/assets/web/css/cpd-theme-light-semantic-mq.css +3 -0
  9. package/assets/web/css/cpd-theme-light-semantic.css +3 -0
  10. package/assets/web/js/cpdDark.d.ts +1 -1
  11. package/assets/web/js/cpdDark.js +3 -3
  12. package/assets/web/js/cpdDarkHc.d.ts +1 -1
  13. package/assets/web/js/cpdDarkHc.js +3 -3
  14. package/assets/web/js/cpdLight.d.ts +1 -1
  15. package/assets/web/js/cpdLight.js +3 -3
  16. package/assets/web/js/cpdLightHc.d.ts +1 -1
  17. package/assets/web/js/cpdLightHc.js +3 -3
  18. package/package.json +1 -1
package/assets/web/css/cpd-common-semantic.css CHANGED
@@ -44,9 +44,6 @@
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
46
  --cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
47
- --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
48
- --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
49
- --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-300);
50
47
  --cpd-color-border-disabled: var(--cpd-color-gray-500);
51
48
  --cpd-color-border-focused: var(--cpd-color-blue-900);
52
49
  --cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
package/assets/web/css/cpd-theme-dark-hc-semantic-mq.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-500);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
package/assets/web/css/cpd-theme-dark-hc-semantic.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-500);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
package/assets/web/css/cpd-theme-dark-semantic-mq.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-500);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
package/assets/web/css/cpd-theme-dark-semantic.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-500);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
package/assets/web/css/cpd-theme-light-hc-semantic-mq.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-400);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
package/assets/web/css/cpd-theme-light-hc-semantic.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-400);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
package/assets/web/css/cpd-theme-light-semantic-mq.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-400);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
package/assets/web/css/cpd-theme-light-semantic.css CHANGED
@@ -1,6 +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-bg-badge-accent: var(--cpd-color-alpha-green-400);
5
+ --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
6
+ --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
4
7
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
5
8
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
6
9
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
package/assets/web/js/cpdDark.d.ts CHANGED
@@ -633,10 +633,10 @@ export const cpdColorBgAccentRest: string;
633
633
  export const cpdColorBgAccentHovered: string;
634
634
  export const cpdColorBgAccentPressed: string;
635
635
  export const cpdColorBgAccentSelected: string;
636
+ export const cpdColorBgSubtleSecondaryLevel0: string;
636
637
  export const cpdColorBgBadgeAccent: string;
637
638
  export const cpdColorBgBadgeInfo: string;
638
639
  export const cpdColorBgBadgeDefault: string;
639
- export const cpdColorBgSubtleSecondaryLevel0: string;
640
640
  export const cpdColorBorderDisabled: string;
641
641
  export const cpdColorBorderFocused: string;
642
642
  export const cpdColorBorderInteractivePrimary: string;
package/assets/web/js/cpdDark.js CHANGED
@@ -658,10 +658,10 @@ export const cpdColorBgAccentRest = "#129a78";
658
658
  export const cpdColorBgAccentHovered = "#17ac84";
659
659
  export const cpdColorBgAccentPressed = "#1fc090";
660
660
  export const cpdColorBgAccentSelected = "hsl(151, 100%, 7%, 1)";
661
- export const cpdColorBgBadgeAccent = "hsl(151, 100%, 7%, 1)";
662
- export const cpdColorBgBadgeInfo = "hsl(229, 100%, 20%, 1)";
663
- export const cpdColorBgBadgeDefault = "hsla(280, 41%, 90%, 0.06)";
664
661
  export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
662
+ export const cpdColorBgBadgeAccent = "hsl(160, 100%, 12%, 1)";
663
+ export const cpdColorBgBadgeInfo = "hsla(221, 100%, 37%, 0.63)";
664
+ export const cpdColorBgBadgeDefault = "hsla(214, 41%, 97%, 0.15)";
665
665
  export const cpdColorBorderDisabled = "#323539";
666
666
  export const cpdColorBorderFocused = "#4187eb";
667
667
  export const cpdColorBorderInteractivePrimary = "#656c76";
package/assets/web/js/cpdDarkHc.d.ts CHANGED
@@ -633,10 +633,10 @@ export const cpdColorBgAccentRest: string;
633
633
  export const cpdColorBgAccentHovered: string;
634
634
  export const cpdColorBgAccentPressed: string;
635
635
  export const cpdColorBgAccentSelected: string;
636
+ export const cpdColorBgSubtleSecondaryLevel0: string;
636
637
  export const cpdColorBgBadgeAccent: string;
637
638
  export const cpdColorBgBadgeInfo: string;
638
639
  export const cpdColorBgBadgeDefault: string;
639
- export const cpdColorBgSubtleSecondaryLevel0: string;
640
640
  export const cpdColorBorderDisabled: string;
641
641
  export const cpdColorBorderFocused: string;
642
642
  export const cpdColorBorderInteractivePrimary: string;
package/assets/web/js/cpdDarkHc.js CHANGED
@@ -658,10 +658,10 @@ export const cpdColorBgAccentRest = "#37c998";
658
658
  export const cpdColorBgAccentHovered = "#61d2a6";
659
659
  export const cpdColorBgAccentPressed = "#8fddbc";
660
660
  export const cpdColorBgAccentSelected = "hsl(155, 100%, 9%, 1)";
661
- export const cpdColorBgBadgeAccent = "hsl(155, 100%, 9%, 1)";
662
- export const cpdColorBgBadgeInfo = "hsl(224, 100%, 22%, 1)";
663
- export const cpdColorBgBadgeDefault = "hsla(270, 37%, 93%, 0.1)";
664
661
  export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
662
+ export const cpdColorBgBadgeAccent = "hsl(162, 100%, 14%, 1)";
663
+ export const cpdColorBgBadgeInfo = "hsla(219, 99%, 50%, 0.53)";
664
+ export const cpdColorBgBadgeDefault = "hsla(225, 46%, 95%, 0.2)";
665
665
  export const cpdColorBorderDisabled = "#3c3f44";
666
666
  export const cpdColorBorderFocused = "#89b5f6";
667
667
  export const cpdColorBorderInteractivePrimary = "#79818d";
package/assets/web/js/cpdLight.d.ts CHANGED
@@ -633,10 +633,10 @@ export const cpdColorBgAccentRest: string;
633
633
  export const cpdColorBgAccentHovered: string;
634
634
  export const cpdColorBgAccentPressed: string;
635
635
  export const cpdColorBgAccentSelected: string;
636
+ export const cpdColorBgSubtleSecondaryLevel0: string;
636
637
  export const cpdColorBgBadgeAccent: string;
637
638
  export const cpdColorBgBadgeInfo: string;
638
639
  export const cpdColorBgBadgeDefault: string;
639
- export const cpdColorBgSubtleSecondaryLevel0: string;
640
640
  export const cpdColorBorderDisabled: string;
641
641
  export const cpdColorBorderFocused: string;
642
642
  export const cpdColorBorderInteractivePrimary: string;
package/assets/web/js/cpdLight.js CHANGED
@@ -658,10 +658,10 @@ export const cpdColorBgAccentRest = "#007a61";
658
658
  export const cpdColorBgAccentHovered = "#006b52";
659
659
  export const cpdColorBgAccentPressed = "#005c45";
660
660
  export const cpdColorBgAccentSelected = "hsla(150, 100%, 36%, 0.11)";
661
- export const cpdColorBgBadgeAccent = "hsla(150, 100%, 36%, 0.11)";
662
- export const cpdColorBgBadgeInfo = "hsla(215, 100%, 52%, 0.09)";
663
- export const cpdColorBgBadgeDefault = "hsla(216, 89%, 18%, 0.06)";
664
661
  export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
662
+ export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
663
+ export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
664
+ export const cpdColorBgBadgeDefault = "hsla(213, 90%, 20%, 0.12)";
665
665
  export const cpdColorBorderDisabled = "#cdd3da";
666
666
  export const cpdColorBorderFocused = "#0467dd";
667
667
  export const cpdColorBorderInteractivePrimary = "#818a95";
package/assets/web/js/cpdLightHc.d.ts CHANGED
@@ -633,10 +633,10 @@ export const cpdColorBgAccentRest: string;
633
633
  export const cpdColorBgAccentHovered: string;
634
634
  export const cpdColorBgAccentPressed: string;
635
635
  export const cpdColorBgAccentSelected: string;
636
+ export const cpdColorBgSubtleSecondaryLevel0: string;
636
637
  export const cpdColorBgBadgeAccent: string;
637
638
  export const cpdColorBgBadgeInfo: string;
638
639
  export const cpdColorBgBadgeDefault: string;
639
- export const cpdColorBgSubtleSecondaryLevel0: string;
640
640
  export const cpdColorBorderDisabled: string;
641
641
  export const cpdColorBorderFocused: string;
642
642
  export const cpdColorBorderInteractivePrimary: string;
package/assets/web/js/cpdLightHc.js CHANGED
@@ -658,10 +658,10 @@ export const cpdColorBgAccentRest = "#00553d";
658
658
  export const cpdColorBgAccentHovered = "#004d36";
659
659
  export const cpdColorBgAccentPressed = "#00402b";
660
660
  export const cpdColorBgAccentSelected = "hsla(151, 93%, 37%, 0.23)";
661
- export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
662
- export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
663
- export const cpdColorBgBadgeDefault = "hsla(213, 90%, 20%, 0.12)";
664
661
  export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
662
+ export const cpdColorBgBadgeAccent = "hsla(153, 95%, 37%, 0.32)";
663
+ export const cpdColorBgBadgeInfo = "hsla(216, 96%, 49%, 0.22)";
664
+ export const cpdColorBgBadgeDefault = "hsla(215, 88%, 17%, 0.16)";
665
665
  export const cpdColorBorderDisabled = "#bdc4cc";
666
666
  export const cpdColorBorderFocused = "#0543a7";
667
667
  export const cpdColorBorderInteractivePrimary = "#6c737e";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vector-im/compound-design-tokens",
3
- "version": "5.0.0",
3
+ "version": "5.0.2",
4
4
  "description": "Compound design tokens",
5
5
  "sideEffects": false,
6
6
  "scripts": {