@vector-im/compound-design-tokens 8.0.0 → 9.0.0

package/assets/web/css/cpd-common-semantic.css

@@ -64,6 +64,7 @@
   --cpd-color-border-success-subtle: var(--cpd-color-green-500);
   --cpd-color-border-info-subtle: var(--cpd-color-blue-700);
   --cpd-color-border-accent-subtle: var(--cpd-color-green-700);
+  --cpd-color-border-accent-primary: var(--cpd-color-green-900);
   --cpd-color-icon-primary: var(--cpd-color-gray-1400);
   --cpd-color-icon-secondary: var(--cpd-color-gray-900);
   --cpd-color-icon-tertiary: var(--cpd-color-gray-800);
@@ -89,6 +90,7 @@
   --cpd-color-gradient-info-stop2: var(--cpd-color-theme-bg);
   --cpd-color-gradient-critical-stop1: var(--cpd-color-red-200);
   --cpd-color-gradient-critical-stop2: var(--cpd-color-theme-bg);
+  --cpd-color-separator-canvas: var(--cpd-color-gray-400);
   --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%);
   --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 100%);
   --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 100%);

package/assets/web/icons/index.cjs

@@ -68,7 +68,6 @@ module.exports = {
   FileErrorIcon: require("./file-error.cjs"),
   FilesIcon: require("./files.cjs"),
   FilterIcon: require("./filter.cjs"),
-  FolderIcon: require("./folder.cjs"),
   ForwardIcon: require("./forward.cjs"),
   FullScreenIcon: require("./full-screen.cjs"),
   GridIcon: require("./grid.cjs"),

package/assets/web/icons/index.d.ts

@@ -67,7 +67,6 @@ export { default as FavouriteIcon } from "./favourite.js";
 export { default as FileErrorIcon } from "./file-error.js";
 export { default as FilesIcon } from "./files.js";
 export { default as FilterIcon } from "./filter.js";
-export { default as FolderIcon } from "./folder.js";
 export { default as ForwardIcon } from "./forward.js";
 export { default as FullScreenIcon } from "./full-screen.js";
 export { default as GridIcon } from "./grid.js";

package/assets/web/icons/index.js

@@ -67,7 +67,6 @@ export { default as FavouriteIcon } from "./favourite.js";
 export { default as FileErrorIcon } from "./file-error.js";
 export { default as FilesIcon } from "./files.js";
 export { default as FilterIcon } from "./filter.js";
-export { default as FolderIcon } from "./folder.js";
 export { default as ForwardIcon } from "./forward.js";
 export { default as FullScreenIcon } from "./full-screen.js";
 export { default as GridIcon } from "./grid.js";

package/assets/web/js/cpdDark.d.ts

@@ -302,7 +302,6 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -680,6 +679,7 @@ export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
+export const cpdColorBorderAccentPrimary: string;
 export const cpdColorIconPrimary: string;
 export const cpdColorIconSecondary: string;
 export const cpdColorIconTertiary: string;
@@ -713,3 +713,4 @@ export const cpdColorGradientActionStop2: string;
 export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
+export const cpdColorSeparatorCanvas: string;

package/assets/web/js/cpdDark.js

@@ -330,7 +330,6 @@ export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
 export const cpdIconSection = "icons/section.svg";
-export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#14171b";
 export const cpdColorGray200 = "#181a1f";
@@ -708,6 +707,7 @@ export const cpdColorBorderCriticalSubtle = "#710000";
 export const cpdColorBorderSuccessSubtle = "#003d29";
 export const cpdColorBorderInfoSubtle = "#0b49ab";
 export const cpdColorBorderAccentSubtle = "#005a43";
+export const cpdColorBorderAccentPrimary = "#129a78";
 export const cpdColorIconPrimary = "#ebeef2";
 export const cpdColorIconSecondary = "#808994";
 export const cpdColorIconTertiary = "#656c76";
@@ -745,3 +745,4 @@ export const cpdColorGradientActionStop3 = "#005a43";
 export const cpdColorGradientActionStop4 = "#003d29";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #1fc090 0%, #129a78 33%, #005a43 66%, #003d29 100%)";
+export const cpdColorSeparatorCanvas = "#26282d";

package/assets/web/js/cpdDarkHc.d.ts

@@ -302,7 +302,6 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -680,6 +679,7 @@ export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
+export const cpdColorBorderAccentPrimary: string;
 export const cpdColorIconPrimary: string;
 export const cpdColorIconSecondary: string;
 export const cpdColorIconTertiary: string;
@@ -713,3 +713,4 @@ export const cpdColorGradientActionStop2: string;
 export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
+export const cpdColorSeparatorCanvas: string;

package/assets/web/js/cpdDarkHc.js

@@ -330,7 +330,6 @@ export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
 export const cpdIconSection = "icons/section.svg";
-export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#181a1f";
 export const cpdColorGray200 = "#1d1f24";
@@ -708,6 +707,7 @@ export const cpdColorBorderCriticalSubtle = "#830009";
 export const cpdColorBorderSuccessSubtle = "#004832";
 export const cpdColorBorderInfoSubtle = "#0e61d1";
 export const cpdColorBorderAccentSubtle = "#00745c";
+export const cpdColorBorderAccentPrimary = "#37c998";
 export const cpdColorIconPrimary = "#f2f5f7";
 export const cpdColorIconSecondary = "#acb4bd";
 export const cpdColorIconTertiary = "#79818d";
@@ -745,3 +745,4 @@ export const cpdColorGradientActionStop3 = "#00745c";
 export const cpdColorGradientActionStop4 = "#004832";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #8fddbc 0%, #37c998 33%, #00745c 66%, #004832 100%)";
+export const cpdColorSeparatorCanvas = "#2b2e33";

package/assets/web/js/cpdLight.d.ts

@@ -302,7 +302,6 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -680,6 +679,7 @@ export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
+export const cpdColorBorderAccentPrimary: string;
 export const cpdColorIconPrimary: string;
 export const cpdColorIconSecondary: string;
 export const cpdColorIconTertiary: string;
@@ -713,3 +713,4 @@ export const cpdColorGradientActionStop2: string;
 export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
+export const cpdColorSeparatorCanvas: string;

package/assets/web/js/cpdLight.js

@@ -330,7 +330,6 @@ export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
 export const cpdIconSection = "icons/section.svg";
-export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#fbfcfd";
 export const cpdColorGray200 = "#f7f9fa";
@@ -708,6 +707,7 @@ export const cpdColorBorderCriticalSubtle = "#ffc5bc";
 export const cpdColorBorderSuccessSubtle = "#98e1c1";
 export const cpdColorBorderInfoSubtle = "#7eaff6";
 export const cpdColorBorderAccentSubtle = "#0bc491";
+export const cpdColorBorderAccentPrimary = "#007a61";
 export const cpdColorIconPrimary = "#1b1d22";
 export const cpdColorIconSecondary = "#656d77";
 export const cpdColorIconTertiary = "#818a95";
@@ -745,3 +745,4 @@ export const cpdColorGradientActionStop3 = "#007a61";
 export const cpdColorGradientActionStop4 = "#005c45";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #98e1c1 0%, #0bc491 33%, #007a61 66%, #005c45 100%)";
+export const cpdColorSeparatorCanvas = "#e1e6ec";

package/assets/web/js/cpdLightHc.d.ts

@@ -302,7 +302,6 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -680,6 +679,7 @@ export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
+export const cpdColorBorderAccentPrimary: string;
 export const cpdColorIconPrimary: string;
 export const cpdColorIconSecondary: string;
 export const cpdColorIconTertiary: string;
@@ -713,3 +713,4 @@ export const cpdColorGradientActionStop2: string;
 export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
+export const cpdColorSeparatorCanvas: string;

package/assets/web/js/cpdLightHc.js

@@ -330,7 +330,6 @@ export const cpdIconStopSolid = "icons/stop-solid.svg";
 export const cpdIconStop = "icons/stop.svg";
 export const cpdIconTheme = "icons/theme.svg";
 export const cpdIconSection = "icons/section.svg";
-export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#f7f9fa";
 export const cpdColorGray200 = "#f0f2f5";
@@ -708,6 +707,7 @@ export const cpdColorBorderCriticalSubtle = "#ffafa5";
 export const cpdColorBorderSuccessSubtle = "#71d7ae";
 export const cpdColorBorderInfoSubtle = "#4a8ef0";
 export const cpdColorBorderAccentSubtle = "#00a27c";
+export const cpdColorBorderAccentPrimary = "#00553d";
 export const cpdColorIconPrimary = "#1a1c21";
 export const cpdColorIconSecondary = "#474a51";
 export const cpdColorIconTertiary = "#6c737e";
@@ -745,3 +745,4 @@ export const cpdColorGradientActionStop3 = "#00553d";
 export const cpdColorGradientActionStop4 = "#00402b";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #71d7ae 0%, #00a27c 33%, #00553d 66%, #00402b 100%)";
+export const cpdColorSeparatorCanvas = "#d7dce3";

package/icons/$icons.json

@@ -899,10 +899,6 @@
     "section": {
       "value": "icons/section.svg",
       "type": "icon"
-    },
-    "folder": {
-      "value": "icons/folder.svg",
-      "type": "icon"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Compound design tokens",
   "sideEffects": false,
   "scripts": {
@@ -80,9 +80,9 @@
     "style-dictionary": "^5.0.0",
     "svgo": "^4.0.0",
     "tsx": "^4.15.6",
-    "typescript": "^5.4.5",
+    "typescript": "^6.0.0",
     "undici": "^7.2.0",
-    "vite": "^7.1.12",
+    "vite": "^8.0.0",
     "zod": "^4.0.0"
   },
   "dependencies": {},

package/icons/folder.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M4 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 2 18V6q0-.824.587-1.412A1.93 1.93 0 0 1 4 4h6l2 2h8q.824 0 1.413.588Q22 7.175 22 8v10q0 .824-.587 1.413A1.93 1.93 0 0 1 20 20zm0-2h16V8h-8.825l-2-2H4z"/></svg>