@vector-im/compound-design-tokens 6.3.0 → 6.4.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.
Files changed (17) hide show
  1. package/README.md +4 -2
  2. package/assets/web/css/cpd-common-semantic.css +3 -0
  3. package/assets/web/icons/threads-solid.cjs +4 -8
  4. package/assets/web/icons/threads-solid.js +5 -9
  5. package/assets/web/icons/threads.cjs +2 -4
  6. package/assets/web/icons/threads.js +2 -4
  7. package/assets/web/js/cpdDark.d.ts +3 -0
  8. package/assets/web/js/cpdDark.js +3 -0
  9. package/assets/web/js/cpdDarkHc.d.ts +3 -0
  10. package/assets/web/js/cpdDarkHc.js +3 -0
  11. package/assets/web/js/cpdLight.d.ts +3 -0
  12. package/assets/web/js/cpdLight.js +3 -0
  13. package/assets/web/js/cpdLightHc.d.ts +3 -0
  14. package/assets/web/js/cpdLightHc.js +3 -0
  15. package/icons/threads-solid.svg +1 -1
  16. package/icons/threads.svg +1 -1
  17. 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/icons/threads-solid.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  var _reactJsxRuntime = require("react/jsx-runtime");
2
2
  var React = require("react");
3
3
  function ThreadsSolidIcon(props, ref) {
4
- return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
4
+ return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
5
5
  xmlns: "http://www.w3.org/2000/svg",
6
6
  width: "1em",
7
7
  height: "1em",
@@ -9,13 +9,9 @@ function ThreadsSolidIcon(props, ref) {
9
9
  viewBox: "0 0 24 24",
10
10
  ref: ref,
11
11
  ...props,
12
- children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
13
- fillRule: "evenodd",
14
- d: "M15.792 3A4 4 0 0 0 22 7.621V17a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2zM7 12a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .425.287.713Q6.575 14 7 14h6a.97.97 0 0 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12zm0-4a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .425.287.713Q6.575 10 7 10h10a.97.97 0 0 0 .713-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 17 8z",
15
- clipRule: "evenodd"
16
- }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
17
- d: "M19.5 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"
18
- })]
12
+ children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
13
+ d: "M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
14
+ })
19
15
  });
20
16
  }
21
17
  ;
package/assets/web/icons/threads-solid.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { forwardRef } from "react";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  function ThreadsSolidIcon(props, ref) {
4
- return /*#__PURE__*/_jsxs("svg", {
4
+ return /*#__PURE__*/_jsx("svg", {
5
5
  xmlns: "http://www.w3.org/2000/svg",
6
6
  width: "1em",
7
7
  height: "1em",
@@ -9,13 +9,9 @@ function ThreadsSolidIcon(props, ref) {
9
9
  viewBox: "0 0 24 24",
10
10
  ref: ref,
11
11
  ...props,
12
- children: [/*#__PURE__*/_jsx("path", {
13
- fillRule: "evenodd",
14
- d: "M15.792 3A4 4 0 0 0 22 7.621V17a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2zM7 12a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .425.287.713Q6.575 14 7 14h6a.97.97 0 0 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12zm0-4a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .425.287.713Q6.575 10 7 10h10a.97.97 0 0 0 .713-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 17 8z",
15
- clipRule: "evenodd"
16
- }), /*#__PURE__*/_jsx("path", {
17
- d: "M19.5 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"
18
- })]
12
+ children: /*#__PURE__*/_jsx("path", {
13
+ d: "M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
14
+ })
19
15
  });
20
16
  }
21
17
  ;
package/assets/web/icons/threads.cjs CHANGED
@@ -10,11 +10,9 @@ function ThreadsIcon(props, ref) {
10
10
  ref: ref,
11
11
  ...props,
12
12
  children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
13
- d: "M13 14H7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14m4-4H7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10"
13
+ d: "M7 10a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10zm0 4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14z"
14
14
  }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
15
- d: "M15.792 3a4 4 0 0 0-.26 2H4v13.172l.586-.586.146-.133A2 2 0 0 1 6 17h14V8.468a4 4 0 0 0 2-.847V17a2 2 0 0 1-2 2H6l-2.293 2.293-.123.105a1 1 0 0 1-1.571-.65L2 20.585V5a2 2 0 0 1 2-2z"
16
- }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
17
- d: "M19.5 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"
15
+ d: "M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6zM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17"
18
16
  })]
19
17
  });
20
18
  }
package/assets/web/icons/threads.js CHANGED
@@ -10,11 +10,9 @@ function ThreadsIcon(props, ref) {
10
10
  ref: ref,
11
11
  ...props,
12
12
  children: [/*#__PURE__*/_jsx("path", {
13
- d: "M13 14H7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14m4-4H7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10"
13
+ d: "M7 10a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10zm0 4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14z"
14
14
  }), /*#__PURE__*/_jsx("path", {
15
- d: "M15.792 3a4 4 0 0 0-.26 2H4v13.172l.586-.586.146-.133A2 2 0 0 1 6 17h14V8.468a4 4 0 0 0 2-.847V17a2 2 0 0 1-2 2H6l-2.293 2.293-.123.105a1 1 0 0 1-1.571-.65L2 20.585V5a2 2 0 0 1 2-2z"
16
- }), /*#__PURE__*/_jsx("path", {
17
- d: "M19.5 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"
15
+ d: "M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6zM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17"
18
16
  })]
19
17
  });
20
18
  }
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/icons/threads-solid.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M15.792 3A4 4 0 0 0 22 7.621V17a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2zM7 12a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .425.287.713Q6.575 14 7 14h6a.97.97 0 0 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12zm0-4a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .425.287.713Q6.575 10 7 10h10a.97.97 0 0 0 .713-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.287-.713A.97.97 0 0 0 17 8z" clip-rule="evenodd"/><path d="M19.5 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"/></svg>
package/icons/threads.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13 14H7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14m4-4H7a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10"/><path d="M15.792 3a4 4 0 0 0-.26 2H4v13.172l.586-.586.146-.133A2 2 0 0 1 6 17h14V8.468a4 4 0 0 0 2-.847V17a2 2 0 0 1-2 2H6l-2.293 2.293-.123.105a1 1 0 0 1-1.571-.65L2 20.585V5a2 2 0 0 1 2-2z"/><path d="M19.5 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M7 10a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 9q0-.424.287-.713A.97.97 0 0 1 7 8h10q.424 0 .712.287Q18 8.576 18 9t-.288.713A.97.97 0 0 1 17 10zm0 4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 6 13q0-.424.287-.713A.97.97 0 0 1 7 12h6q.424 0 .713.287.287.288.287.713 0 .424-.287.713A.97.97 0 0 1 13 14z"/><path d="M3.707 21.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6zM6 17h14V5H4v13.172l.586-.586A2 2 0 0 1 6 17"/></svg>
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.1",
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": {},