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

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

@@ -47,6 +47,12 @@
   --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
   --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
   --cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
+  --cpd-color-bg-badge-accent: var(--cpd-color-green-400);
+  --cpd-color-bg-badge-info: var(--cpd-color-blue-400);
+  --cpd-color-bg-badge-default: var(--cpd-color-theme-bg);
+  --cpd-color-bg-badge-primary: var(--cpd-color-gray-1400);
+  --cpd-color-bg-badge-secondary: var(--cpd-color-gray-400);
+  --cpd-color-bg-badge-critical: var(--cpd-color-red-300);
   --cpd-color-border-disabled: var(--cpd-color-gray-500);
   --cpd-color-border-focused: var(--cpd-color-blue-900);
   --cpd-color-border-interactive-primary: var(--cpd-color-gray-800);

package/assets/web/css/cpd-theme-dark-hc-semantic-mq.css

@@ -1,9 +1,6 @@
 :root {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);

package/assets/web/css/cpd-theme-dark-hc-semantic.css

@@ -1,9 +1,6 @@
 .cpd-theme-dark-hc.cpd-theme-dark-hc {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);

package/assets/web/css/cpd-theme-dark-semantic-mq.css

@@ -1,9 +1,6 @@
 :root {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);

package/assets/web/css/cpd-theme-dark-semantic.css

@@ -1,9 +1,6 @@
 .cpd-theme-dark.cpd-theme-dark {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);

package/assets/web/css/cpd-theme-light-hc-semantic-mq.css

@@ -1,9 +1,6 @@
 :root {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);

package/assets/web/css/cpd-theme-light-hc-semantic.css

@@ -1,9 +1,6 @@
 .cpd-theme-light-hc.cpd-theme-light-hc {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);

package/assets/web/css/cpd-theme-light-semantic-mq.css

@@ -1,9 +1,6 @@
 :root {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);

package/assets/web/css/cpd-theme-light-semantic.css

@@ -1,9 +1,6 @@
 .cpd-theme-light.cpd-theme-light {
   --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
   --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
-  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
-  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
-  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
   --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
   --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
   --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);

package/assets/web/icons/folder.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function FolderIcon(props, ref) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("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"
+    })
+  });
+}
+;
+FolderIcon.displayName = "FolderIcon";
+module.exports = React.forwardRef(FolderIcon);

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+/**
+ * folder.svg
+ */
+declare const FolderIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export default FolderIcon;

package/assets/web/icons/folder.js

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function FolderIcon(props, ref) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx("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"
+    })
+  });
+}
+;
+FolderIcon.displayName = "FolderIcon";
+export default forwardRef(FolderIcon);

package/assets/web/icons/index.cjs

@@ -1,7 +1,6 @@
 module.exports = {
   AdminIcon: require("./admin.cjs"),
   AdvancedSettingsIcon: require("./advanced-settings.cjs"),
-  AiIcon: require("./ai.cjs"),
   ArrowDownIcon: require("./arrow-down.cjs"),
   ArrowLeftIcon: require("./arrow-left.cjs"),
   ArrowRightIcon: require("./arrow-right.cjs"),
@@ -69,6 +68,7 @@ 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

@@ -1,6 +1,5 @@
 export { default as AdminIcon } from "./admin.js";
 export { default as AdvancedSettingsIcon } from "./advanced-settings.js";
-export { default as AiIcon } from "./ai.js";
 export { default as ArrowDownIcon } from "./arrow-down.js";
 export { default as ArrowLeftIcon } from "./arrow-left.js";
 export { default as ArrowRightIcon } from "./arrow-right.js";
@@ -68,6 +67,7 @@ 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

@@ -1,6 +1,5 @@
 export { default as AdminIcon } from "./admin.js";
 export { default as AdvancedSettingsIcon } from "./advanced-settings.js";
-export { default as AiIcon } from "./ai.js";
 export { default as ArrowDownIcon } from "./arrow-down.js";
 export { default as ArrowLeftIcon } from "./arrow-left.js";
 export { default as ArrowRightIcon } from "./arrow-right.js";
@@ -68,6 +67,7 @@ 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,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconAi: string;
+export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -662,10 +662,13 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
-export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
+export const cpdColorBgBadgePrimary: string;
+export const cpdColorBgBadgeSecondary: string;
+export const cpdColorBgBadgeCritical: string;
+export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;
 export const cpdColorBorderInteractivePrimary: string;

package/assets/web/js/cpdDark.js

@@ -330,7 +330,7 @@ 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 cpdIconAi = "icons/ai.svg";
+export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#14171b";
 export const cpdColorGray200 = "#181a1f";
@@ -690,10 +690,13 @@ export const cpdColorBgAccentRest = "#129a78";
 export const cpdColorBgAccentHovered = "#17ac84";
 export const cpdColorBgAccentPressed = "#1fc090";
 export const cpdColorBgAccentSelected = "hsl(151, 100%, 7%, 1)";
+export const cpdColorBgBadgeAccent = "#002e1b";
+export const cpdColorBgBadgeInfo = "#001e6f";
+export const cpdColorBgBadgeDefault = "#101317";
+export const cpdColorBgBadgePrimary = "#ebeef2";
+export const cpdColorBgBadgeSecondary = "#26282d";
+export const cpdColorBgBadgeCritical = "#470000";
 export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
-export const cpdColorBgBadgeAccent = "hsl(160, 100%, 12%, 1)";
-export const cpdColorBgBadgeInfo = "hsla(221, 100%, 37%, 0.63)";
-export const cpdColorBgBadgeDefault = "hsla(214, 41%, 97%, 0.15)";
 export const cpdColorBorderDisabled = "#323539";
 export const cpdColorBorderFocused = "#4187eb";
 export const cpdColorBorderInteractivePrimary = "#656c76";

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

@@ -302,7 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconAi: string;
+export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -662,10 +662,13 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
-export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
+export const cpdColorBgBadgePrimary: string;
+export const cpdColorBgBadgeSecondary: string;
+export const cpdColorBgBadgeCritical: string;
+export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;
 export const cpdColorBorderInteractivePrimary: string;

package/assets/web/js/cpdDarkHc.js

@@ -330,7 +330,7 @@ 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 cpdIconAi = "icons/ai.svg";
+export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#181a1f";
 export const cpdColorGray200 = "#1d1f24";
@@ -690,10 +690,13 @@ export const cpdColorBgAccentRest = "#37c998";
 export const cpdColorBgAccentHovered = "#61d2a6";
 export const cpdColorBgAccentPressed = "#8fddbc";
 export const cpdColorBgAccentSelected = "hsl(155, 100%, 9%, 1)";
+export const cpdColorBgBadgeAccent = "#003622";
+export const cpdColorBgBadgeInfo = "#032677";
+export const cpdColorBgBadgeDefault = "#101317";
+export const cpdColorBgBadgePrimary = "#f2f5f7";
+export const cpdColorBgBadgeSecondary = "#2b2e33";
+export const cpdColorBgBadgeCritical = "#590000";
 export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
-export const cpdColorBgBadgeAccent = "hsl(162, 100%, 14%, 1)";
-export const cpdColorBgBadgeInfo = "hsla(219, 99%, 50%, 0.53)";
-export const cpdColorBgBadgeDefault = "hsla(225, 46%, 95%, 0.2)";
 export const cpdColorBorderDisabled = "#3c3f44";
 export const cpdColorBorderFocused = "#89b5f6";
 export const cpdColorBorderInteractivePrimary = "#79818d";

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

@@ -302,7 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconAi: string;
+export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -662,10 +662,13 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
-export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
+export const cpdColorBgBadgePrimary: string;
+export const cpdColorBgBadgeSecondary: string;
+export const cpdColorBgBadgeCritical: string;
+export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;
 export const cpdColorBorderInteractivePrimary: string;

package/assets/web/js/cpdLight.js

@@ -330,7 +330,7 @@ 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 cpdIconAi = "icons/ai.svg";
+export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#fbfcfd";
 export const cpdColorGray200 = "#f7f9fa";
@@ -690,10 +690,13 @@ export const cpdColorBgAccentRest = "#007a61";
 export const cpdColorBgAccentHovered = "#006b52";
 export const cpdColorBgAccentPressed = "#005c45";
 export const cpdColorBgAccentSelected = "hsla(150, 100%, 36%, 0.11)";
+export const cpdColorBgBadgeAccent = "#c6eedb";
+export const cpdColorBgBadgeInfo = "#d8e7fe";
+export const cpdColorBgBadgeDefault = "#ffffff";
+export const cpdColorBgBadgePrimary = "#1b1d22";
+export const cpdColorBgBadgeSecondary = "#e1e6ec";
+export const cpdColorBgBadgeCritical = "#ffefec";
 export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
-export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
-export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
-export const cpdColorBgBadgeDefault = "hsla(213, 90%, 20%, 0.12)";
 export const cpdColorBorderDisabled = "#cdd3da";
 export const cpdColorBorderFocused = "#0467dd";
 export const cpdColorBorderInteractivePrimary = "#818a95";

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

@@ -302,7 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
-export const cpdIconAi: string;
+export const cpdIconFolder: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -662,10 +662,13 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
-export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
+export const cpdColorBgBadgePrimary: string;
+export const cpdColorBgBadgeSecondary: string;
+export const cpdColorBgBadgeCritical: string;
+export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;
 export const cpdColorBorderInteractivePrimary: string;

package/assets/web/js/cpdLightHc.js

@@ -330,7 +330,7 @@ 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 cpdIconAi = "icons/ai.svg";
+export const cpdIconFolder = "icons/folder.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#f7f9fa";
 export const cpdColorGray200 = "#f0f2f5";
@@ -690,10 +690,13 @@ export const cpdColorBgAccentRest = "#00553d";
 export const cpdColorBgAccentHovered = "#004d36";
 export const cpdColorBgAccentPressed = "#00402b";
 export const cpdColorBgAccentSelected = "hsla(151, 93%, 37%, 0.23)";
+export const cpdColorBgBadgeAccent = "#afe8ce";
+export const cpdColorBgBadgeInfo = "#c8ddfd";
+export const cpdColorBgBadgeDefault = "#ffffff";
+export const cpdColorBgBadgePrimary = "#1a1c21";
+export const cpdColorBgBadgeSecondary = "#d7dce3";
+export const cpdColorBgBadgeCritical = "#ffdfda";
 export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
-export const cpdColorBgBadgeAccent = "hsla(153, 95%, 37%, 0.32)";
-export const cpdColorBgBadgeInfo = "hsla(216, 96%, 49%, 0.22)";
-export const cpdColorBgBadgeDefault = "hsla(215, 88%, 17%, 0.16)";
 export const cpdColorBorderDisabled = "#bdc4cc";
 export const cpdColorBorderFocused = "#0543a7";
 export const cpdColorBorderInteractivePrimary = "#6c737e";

package/icons/$icons.json

@@ -900,8 +900,8 @@
       "value": "icons/section.svg",
       "type": "icon"
     },
-    "ai": {
-      "value": "icons/ai.svg",
+    "folder": {
+      "value": "icons/folder.svg",
       "type": "icon"
     }
   }

package/icons/folder.svg

@@ -0,0 +1 @@
+<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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "6.10.2",
+  "version": "8.0.0",
   "description": "Compound design tokens",
   "sideEffects": false,
   "scripts": {

package/icons/ai.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="M9.5 2 11 6.5 15.5 8 11 9.5 9.5 14 8 9.5 3.5 8 8 6.5zm9.5 9 1 3 3 1-3 1-1 3-1-3-3-1 3-1zm-7 6 .75 2.25L15 20l-2.25.75L12 23l-.75-2.25L9 20l2.25-.75z"/></svg>