@vector-im/compound-design-tokens 6.3.0 → 6.4.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 (11) hide show
  1. package/README.md +4 -2
  2. package/assets/web/css/cpd-common-semantic.css +3 -0
  3. package/assets/web/js/cpdDark.d.ts +3 -0
  4. package/assets/web/js/cpdDark.js +3 -0
  5. package/assets/web/js/cpdDarkHc.d.ts +3 -0
  6. package/assets/web/js/cpdDarkHc.js +3 -0
  7. package/assets/web/js/cpdLight.d.ts +3 -0
  8. package/assets/web/js/cpdLight.js +3 -0
  9. package/assets/web/js/cpdLightHc.d.ts +3 -0
  10. package/assets/web/js/cpdLightHc.js +3 -0
  11. package/package.json +13 -8
package/README.md CHANGED
@@ -24,14 +24,16 @@ Tokens are exported to three platforms
24
24
 
25
25
  - [Development](./docs/development.md)
26
26
  - [Icons](./docs/icons.md)
27
+ - [Colors](./docs/colors.md)
27
28
  - [Release](./docs/release.md)
28
29
  - [Synchronise with Figma](https://compound.element.io/?path=/docs/design-get-started--docs)
29
30
 
30
31
  ## Copyright and License
31
32
 
32
- Copyright (c) 2023 - 2025 New Vector Ltd
33
+ Copyright (c) 2025 Element Creations Ltd.
34
+ Copyright (c) 2023 - 2025 New Vector Ltd.
33
35
 
34
- This software is dual licensed by New Vector Ltd (Element). It can be used either:
36
+ This software is dual licensed by Element Creations Ltd. (Element). It can be used either:
35
37
 
36
38
  (1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
37
39
 
package/assets/web/css/cpd-common-semantic.css CHANGED
@@ -28,6 +28,9 @@
28
28
  --cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
29
29
  --cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
30
30
  --cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
31
+ --cpd-color-bg-action-tertiary-rest: var(--cpd-color-theme-bg);
32
+ --cpd-color-bg-action-tertiary-hovered: var(--cpd-color-gray-300);
33
+ --cpd-color-bg-action-tertiary-selected: var(--cpd-color-gray-400);
31
34
  --cpd-color-bg-critical-primary: var(--cpd-color-red-900);
32
35
  --cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
33
36
  --cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
package/assets/web/js/cpdDark.d.ts CHANGED
@@ -620,6 +620,9 @@ export const cpdColorBgActionPrimaryDisabled: string;
620
620
  export const cpdColorBgActionSecondaryRest: string;
621
621
  export const cpdColorBgActionSecondaryHovered: string;
622
622
  export const cpdColorBgActionSecondaryPressed: string;
623
+ export const cpdColorBgActionTertiaryRest: string;
624
+ export const cpdColorBgActionTertiaryHovered: string;
625
+ export const cpdColorBgActionTertiarySelected: string;
623
626
  export const cpdColorBgCriticalPrimary: string;
624
627
  export const cpdColorBgCriticalHovered: string;
625
628
  export const cpdColorBgCriticalSubtle: string;
package/assets/web/js/cpdDark.js CHANGED
@@ -645,6 +645,9 @@ export const cpdColorBgActionPrimaryDisabled = "#4a4f55";
645
645
  export const cpdColorBgActionSecondaryRest = "#101317";
646
646
  export const cpdColorBgActionSecondaryHovered = "hsla(286, 31%, 82%, 0.04)";
647
647
  export const cpdColorBgActionSecondaryPressed = "hsla(280, 41%, 90%, 0.06)";
648
+ export const cpdColorBgActionTertiaryRest = "#101317";
649
+ export const cpdColorBgActionTertiaryHovered = "#1d1f24";
650
+ export const cpdColorBgActionTertiarySelected = "#26282d";
648
651
  export const cpdColorBgCriticalPrimary = "#fd3e3c";
649
652
  export const cpdColorBgCriticalHovered = "#ff665d";
650
653
  export const cpdColorBgCriticalSubtle = "#3e0000";
package/assets/web/js/cpdDarkHc.d.ts CHANGED
@@ -620,6 +620,9 @@ export const cpdColorBgActionPrimaryDisabled: string;
620
620
  export const cpdColorBgActionSecondaryRest: string;
621
621
  export const cpdColorBgActionSecondaryHovered: string;
622
622
  export const cpdColorBgActionSecondaryPressed: string;
623
+ export const cpdColorBgActionTertiaryRest: string;
624
+ export const cpdColorBgActionTertiaryHovered: string;
625
+ export const cpdColorBgActionTertiarySelected: string;
623
626
  export const cpdColorBgCriticalPrimary: string;
624
627
  export const cpdColorBgCriticalHovered: string;
625
628
  export const cpdColorBgCriticalSubtle: string;
package/assets/web/js/cpdDarkHc.js CHANGED
@@ -645,6 +645,9 @@ export const cpdColorBgActionPrimaryDisabled = "#606770";
645
645
  export const cpdColorBgActionSecondaryRest = "#101317";
646
646
  export const cpdColorBgActionSecondaryHovered = "hsla(280, 41%, 90%, 0.06)";
647
647
  export const cpdColorBgActionSecondaryPressed = "hsla(270, 37%, 93%, 0.1)";
648
+ export const cpdColorBgActionTertiaryRest = "#101317";
649
+ export const cpdColorBgActionTertiaryHovered = "#26282d";
650
+ export const cpdColorBgActionTertiarySelected = "#2b2e33";
648
651
  export const cpdColorBgCriticalPrimary = "#ff968c";
649
652
  export const cpdColorBgCriticalHovered = "#ffa79d";
650
653
  export const cpdColorBgCriticalSubtle = "#470000";
package/assets/web/js/cpdLight.d.ts CHANGED
@@ -620,6 +620,9 @@ export const cpdColorBgActionPrimaryDisabled: string;
620
620
  export const cpdColorBgActionSecondaryRest: string;
621
621
  export const cpdColorBgActionSecondaryHovered: string;
622
622
  export const cpdColorBgActionSecondaryPressed: string;
623
+ export const cpdColorBgActionTertiaryRest: string;
624
+ export const cpdColorBgActionTertiaryHovered: string;
625
+ export const cpdColorBgActionTertiarySelected: string;
623
626
  export const cpdColorBgCriticalPrimary: string;
624
627
  export const cpdColorBgCriticalHovered: string;
625
628
  export const cpdColorBgCriticalSubtle: string;
package/assets/web/js/cpdLight.js CHANGED
@@ -645,6 +645,9 @@ export const cpdColorBgActionPrimaryDisabled = "#a6adb7";
645
645
  export const cpdColorBgActionSecondaryRest = "#ffffff";
646
646
  export const cpdColorBgActionSecondaryHovered = "hsla(200, 41%, 36%, 0.04)";
647
647
  export const cpdColorBgActionSecondaryPressed = "hsla(216, 89%, 18%, 0.06)";
648
+ export const cpdColorBgActionTertiaryRest = "#ffffff";
649
+ export const cpdColorBgActionTertiaryHovered = "#f0f2f5";
650
+ export const cpdColorBgActionTertiarySelected = "#e1e6ec";
648
651
  export const cpdColorBgCriticalPrimary = "#d51928";
649
652
  export const cpdColorBgCriticalHovered = "#bc0f22";
650
653
  export const cpdColorBgCriticalSubtle = "#fff7f6";
package/assets/web/js/cpdLightHc.d.ts CHANGED
@@ -620,6 +620,9 @@ export const cpdColorBgActionPrimaryDisabled: string;
620
620
  export const cpdColorBgActionSecondaryRest: string;
621
621
  export const cpdColorBgActionSecondaryHovered: string;
622
622
  export const cpdColorBgActionSecondaryPressed: string;
623
+ export const cpdColorBgActionTertiaryRest: string;
624
+ export const cpdColorBgActionTertiaryHovered: string;
625
+ export const cpdColorBgActionTertiarySelected: string;
623
626
  export const cpdColorBgCriticalPrimary: string;
624
627
  export const cpdColorBgCriticalHovered: string;
625
628
  export const cpdColorBgCriticalSubtle: string;
package/assets/web/js/cpdLightHc.js CHANGED
@@ -645,6 +645,9 @@ export const cpdColorBgActionPrimaryDisabled = "#878f9b";
645
645
  export const cpdColorBgActionSecondaryRest = "#ffffff";
646
646
  export const cpdColorBgActionSecondaryHovered = "hsla(216, 89%, 18%, 0.06)";
647
647
  export const cpdColorBgActionSecondaryPressed = "hsla(213, 90%, 20%, 0.12)";
648
+ export const cpdColorBgActionTertiaryRest = "#ffffff";
649
+ export const cpdColorBgActionTertiaryHovered = "#e1e6ec";
650
+ export const cpdColorBgActionTertiarySelected = "#d7dce3";
648
651
  export const cpdColorBgCriticalPrimary = "#99001a";
649
652
  export const cpdColorBgCriticalHovered = "#8b000c";
650
653
  export const cpdColorBgCriticalSubtle = "#ffefec";
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@vector-im/compound-design-tokens",
3
- "version": "6.3.0",
3
+ "version": "6.4.0",
4
4
  "description": "Compound design tokens",
5
5
  "sideEffects": false,
6
6
  "scripts": {
7
- "build": "tsx ./build.ts",
7
+ "build": "vite build && tsx ./build.ts",
8
8
  "sync:icons": "tsx src/syncIcons.ts",
9
9
  "dev": "http-server .",
10
+ "dev:colors": "vite --open src/colors/applet.html",
10
11
  "format": "yarn exec biome -- format",
11
12
  "lint": "yarn exec biome -- lint",
12
13
  "check": "yarn exec biome -- check",
@@ -28,18 +29,18 @@
28
29
  "./*": "./*",
29
30
  "./assets/web/js": "./assets/web/js/index.js",
30
31
  "./assets/web/js/*": {
31
- "import": "./assets/web/js/*.js",
32
- "types": "./assets/web/js/*.d.ts"
32
+ "types": "./assets/web/js/*.d.ts",
33
+ "import": "./assets/web/js/*.js"
33
34
  },
34
35
  "./assets/web/icons": {
36
+ "types": "./assets/web/icons/index.d.ts",
35
37
  "import": "./assets/web/icons/index.js",
36
- "require": "./assets/web/icons/index.cjs",
37
- "types": "./assets/web/icons/index.d.ts"
38
+ "require": "./assets/web/icons/index.cjs"
38
39
  },
39
40
  "./assets/web/icons/*": {
41
+ "types": "./assets/web/icons/*.d.ts",
40
42
  "import": "./assets/web/icons/*.js",
41
- "require": "./assets/web/icons/*.cjs",
42
- "types": "./assets/web/icons/*.d.ts"
43
+ "require": "./assets/web/icons/*.cjs"
43
44
  }
44
45
  },
45
46
  "author": "",
@@ -53,6 +54,7 @@
53
54
  "url": "https://github.com/element-hq/compound-design-tokens"
54
55
  },
55
56
  "devDependencies": {
57
+ "@adobe/leonardo-contrast-colors": "^1.0.0",
56
58
  "@babel/core": "^7.24.7",
57
59
  "@babel/generator": "^7.24.7",
58
60
  "@babel/plugin-transform-react-jsx": "^7.24.7",
@@ -67,6 +69,8 @@
67
69
  "@types/fs-extra": "^11.0.4",
68
70
  "@types/lodash-es": "^4.17.12",
69
71
  "@types/node": "^24.0.0",
72
+ "apca-w3": "^0.1.9",
73
+ "chroma-js": "^3.0.0",
70
74
  "fast-glob": "^3.3.2",
71
75
  "fs-extra": "^11.3.1",
72
76
  "http-server": "^14.1.1",
@@ -77,6 +81,7 @@
77
81
  "tsx": "^4.15.6",
78
82
  "typescript": "^5.4.5",
79
83
  "undici": "^7.2.0",
84
+ "vite": "^7.1.12",
80
85
  "zod": "^4.0.0"
81
86
  },
82
87
  "dependencies": {},