@vector-im/compound-design-tokens 10.0.0 → 10.1.0

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

@@ -91,6 +91,7 @@
   --cpd-color-gradient-critical-stop1: var(--cpd-color-red-200);
   --cpd-color-gradient-critical-stop2: var(--cpd-color-theme-bg);
   --cpd-color-separator-primary: var(--cpd-color-gray-400);
+  --cpd-color-separator-secondary: var(--cpd-color-gray-300);
   --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/collapse-all.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function CollapseAllIcon(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: "M20.338 5.007 17.4 7.945l-2.938-2.938a.7.7 0 0 0-.527-.207q-.321 0-.528.207a.7.7 0 0 0-.207.528q0 .32.207.527l2.92 2.92q.432.432 1.073.432.64 0 1.074-.433l2.919-2.92a.7.7 0 0 0 .207-.526q0-.321-.207-.528a.7.7 0 0 0-.528-.207q-.32 0-.527.207m-5.876 13.8L17.4 15.87l2.938 2.938a.7.7 0 0 0 .527.207q.321 0 .528-.207a.7.7 0 0 0 .207-.527q0-.321-.207-.528l-2.92-2.919A1.46 1.46 0 0 0 17.4 14.4q-.64 0-1.074.433l-2.919 2.92a.7.7 0 0 0-.207.527q0 .32.207.527a.7.7 0 0 0 .527.207q.321 0 .528-.207M3.075 18c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9z"
+    })
+  });
+}
+;
+CollapseAllIcon.displayName = "CollapseAllIcon";
+module.exports = React.forwardRef(CollapseAllIcon);

package/assets/web/icons/collapse-all.d.ts

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

package/assets/web/icons/collapse-all.js

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function CollapseAllIcon(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: "M20.338 5.007 17.4 7.945l-2.938-2.938a.7.7 0 0 0-.527-.207q-.321 0-.528.207a.7.7 0 0 0-.207.528q0 .32.207.527l2.92 2.92q.432.432 1.073.432.64 0 1.074-.433l2.919-2.92a.7.7 0 0 0 .207-.526q0-.321-.207-.528a.7.7 0 0 0-.528-.207q-.32 0-.527.207m-5.876 13.8L17.4 15.87l2.938 2.938a.7.7 0 0 0 .527.207q.321 0 .528-.207a.7.7 0 0 0 .207-.527q0-.321-.207-.528l-2.92-2.919A1.46 1.46 0 0 0 17.4 14.4q-.64 0-1.074.433l-2.919 2.92a.7.7 0 0 0-.207.527q0 .32.207.527a.7.7 0 0 0 .527.207q.321 0 .528-.207M3.075 18c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9z"
+    })
+  });
+}
+;
+CollapseAllIcon.displayName = "CollapseAllIcon";
+export default forwardRef(CollapseAllIcon);

package/assets/web/icons/index.cjs

@@ -34,6 +34,7 @@ module.exports = {
   CloudSolidIcon: require("./cloud-solid.cjs"),
   CloudIcon: require("./cloud.cjs"),
   CodeIcon: require("./code.cjs"),
+  CollapseAllIcon: require("./collapse-all.cjs"),
   CollapseIcon: require("./collapse.cjs"),
   CompanyIcon: require("./company.cjs"),
   ComposeIcon: require("./compose.cjs"),

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

@@ -33,6 +33,7 @@ export { default as CloseIcon } from "./close.js";
 export { default as CloudSolidIcon } from "./cloud-solid.js";
 export { default as CloudIcon } from "./cloud.js";
 export { default as CodeIcon } from "./code.js";
+export { default as CollapseAllIcon } from "./collapse-all.js";
 export { default as CollapseIcon } from "./collapse.js";
 export { default as CompanyIcon } from "./company.js";
 export { default as ComposeIcon } from "./compose.js";

package/assets/web/icons/index.js

@@ -33,6 +33,7 @@ export { default as CloseIcon } from "./close.js";
 export { default as CloudSolidIcon } from "./cloud-solid.js";
 export { default as CloudIcon } from "./cloud.js";
 export { default as CodeIcon } from "./code.js";
+export { default as CollapseAllIcon } from "./collapse-all.js";
 export { default as CollapseIcon } from "./collapse.js";
 export { default as CompanyIcon } from "./company.js";
 export { default as ComposeIcon } from "./compose.js";

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

@@ -302,6 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
+export const cpdIconCollapseAll: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -714,3 +715,4 @@ export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
 export const cpdColorSeparatorPrimary: string;
+export const cpdColorSeparatorSecondary: string;

package/assets/web/js/cpdDark.js

@@ -330,6 +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 cpdIconCollapseAll = "icons/collapse-all.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#14171b";
 export const cpdColorGray200 = "#181a1f";
@@ -746,3 +747,4 @@ export const cpdColorGradientActionStop4 = "#003d29";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #1fc090 0%, #129a78 33%, #005a43 66%, #003d29 100%)";
 export const cpdColorSeparatorPrimary = "#26282d";
+export const cpdColorSeparatorSecondary = "#1d1f24";

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

@@ -302,6 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
+export const cpdIconCollapseAll: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -714,3 +715,4 @@ export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
 export const cpdColorSeparatorPrimary: string;
+export const cpdColorSeparatorSecondary: string;

package/assets/web/js/cpdDarkHc.js

@@ -330,6 +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 cpdIconCollapseAll = "icons/collapse-all.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#181a1f";
 export const cpdColorGray200 = "#1d1f24";
@@ -746,3 +747,4 @@ export const cpdColorGradientActionStop4 = "#004832";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #8fddbc 0%, #37c998 33%, #00745c 66%, #004832 100%)";
 export const cpdColorSeparatorPrimary = "#2b2e33";
+export const cpdColorSeparatorSecondary = "#26282d";

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

@@ -302,6 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
+export const cpdIconCollapseAll: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -714,3 +715,4 @@ export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
 export const cpdColorSeparatorPrimary: string;
+export const cpdColorSeparatorSecondary: string;

package/assets/web/js/cpdLight.js

@@ -330,6 +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 cpdIconCollapseAll = "icons/collapse-all.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#fbfcfd";
 export const cpdColorGray200 = "#f7f9fa";
@@ -746,3 +747,4 @@ export const cpdColorGradientActionStop4 = "#005c45";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #98e1c1 0%, #0bc491 33%, #007a61 66%, #005c45 100%)";
 export const cpdColorSeparatorPrimary = "#e1e6ec";
+export const cpdColorSeparatorSecondary = "#f0f2f5";

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

@@ -302,6 +302,7 @@ export const cpdIconStopSolid: string;
 export const cpdIconStop: string;
 export const cpdIconTheme: string;
 export const cpdIconSection: string;
+export const cpdIconCollapseAll: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -714,3 +715,4 @@ export const cpdColorGradientActionStop3: string;
 export const cpdColorGradientActionStop4: string;
 export const cpdColorGradientActionLinear: string;
 export const cpdColorSeparatorPrimary: string;
+export const cpdColorSeparatorSecondary: string;

package/assets/web/js/cpdLightHc.js

@@ -330,6 +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 cpdIconCollapseAll = "icons/collapse-all.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#f7f9fa";
 export const cpdColorGray200 = "#f0f2f5";
@@ -746,3 +747,4 @@ export const cpdColorGradientActionStop4 = "#00402b";
 export const cpdColorGradientActionLinear =
   "linear-gradient(180deg, #71d7ae 0%, #00a27c 33%, #00553d 66%, #00402b 100%)";
 export const cpdColorSeparatorPrimary = "#d7dce3";
+export const cpdColorSeparatorSecondary = "#e1e6ec";

package/icons/$icons.json

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

package/icons/collapse-all.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="M20.338 5.007 17.4 7.945l-2.938-2.938a.7.7 0 0 0-.527-.207q-.321 0-.528.207a.7.7 0 0 0-.207.528q0 .32.207.527l2.92 2.92q.432.432 1.073.432.64 0 1.074-.433l2.919-2.92a.7.7 0 0 0 .207-.526q0-.321-.207-.528a.7.7 0 0 0-.528-.207q-.32 0-.527.207m-5.876 13.8L17.4 15.87l2.938 2.938a.7.7 0 0 0 .527.207q.321 0 .528-.207a.7.7 0 0 0 .207-.527q0-.321-.207-.528l-2.92-2.919A1.46 1.46 0 0 0 17.4 14.4q-.64 0-1.074.433l-2.919 2.92a.7.7 0 0 0-.207.527q0 .32.207.527a.7.7 0 0 0 .527.207q.321 0 .528-.207M3.075 18c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9zm0-4.8c-.373 0-.675.403-.675.9s.302.9.675.9h7.05c.373 0 .675-.403.675-.9s-.302-.9-.675-.9z"/></svg>

package/package.json

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