@vector-im/compound-design-tokens 10.2.3 → 11.0.0

package/assets/web/icons/hourglass-solid.cjs

@@ -0,0 +1,21 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function HourglassSolidIcon(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", {
+      fillRule: "evenodd",
+      d: "M20 2a1 1 0 1 1 0 2h-1v3.146l-.004.124a2 2 0 0 1-.865 1.526L13.458 12l4.673 3.204q.085.06.165.127l.023.02q.022.02.043.042.065.058.122.122.029.031.054.065.05.06.097.123l.047.073q.036.058.07.117.027.048.05.1.028.057.052.115l.033.092a2 2 0 0 1 .087.35q.024.15.026.303V20h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-3.146a2 2 0 0 1 .071-.522 2 2 0 0 1 .041-.132l.034-.092.051-.115q.024-.052.05-.1.034-.06.07-.117l.047-.073q.046-.063.097-.123.026-.033.054-.065.058-.064.122-.122.02-.022.043-.042l.023-.02a2 2 0 0 1 .166-.127L10.541 12 5.869 8.796a2 2 0 0 1-.865-1.526L5 7.146V4H4a1 1 0 0 1 0-2zM7 7.146l5 3.43 5-3.43V4H7z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+HourglassSolidIcon.displayName = "HourglassSolidIcon";
+module.exports = React.forwardRef(HourglassSolidIcon);

package/assets/web/icons/hourglass-solid.d.ts

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

package/assets/web/icons/hourglass-solid.js

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function HourglassSolidIcon(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", {
+      fillRule: "evenodd",
+      d: "M20 2a1 1 0 1 1 0 2h-1v3.146l-.004.124a2 2 0 0 1-.865 1.526L13.458 12l4.673 3.204q.085.06.165.127l.023.02q.022.02.043.042.065.058.122.122.029.031.054.065.05.06.097.123l.047.073q.036.058.07.117.027.048.05.1.028.057.052.115l.033.092a2 2 0 0 1 .087.35q.024.15.026.303V20h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-3.146a2 2 0 0 1 .071-.522 2 2 0 0 1 .041-.132l.034-.092.051-.115q.024-.052.05-.1.034-.06.07-.117l.047-.073q.046-.063.097-.123.026-.033.054-.065.058-.064.122-.122.02-.022.043-.042l.023-.02a2 2 0 0 1 .166-.127L10.541 12 5.869 8.796a2 2 0 0 1-.865-1.526L5 7.146V4H4a1 1 0 0 1 0-2zM7 7.146l5 3.43 5-3.43V4H7z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+HourglassSolidIcon.displayName = "HourglassSolidIcon";
+export default forwardRef(HourglassSolidIcon);

package/assets/web/icons/hourglass.cjs

@@ -0,0 +1,21 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function HourglassIcon(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", {
+      fillRule: "evenodd",
+      d: "M20 2a1 1 0 1 1 0 2h-1v3.146l-.004.124a2 2 0 0 1-.865 1.526L13.458 12l4.673 3.204a2 2 0 0 1 .865 1.526l.004.123V20h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-3.146l.004-.123a2 2 0 0 1 .865-1.527L10.541 12 5.869 8.796a2 2 0 0 1-.865-1.526L5 7.146V4H4a1 1 0 0 1 0-2zM7 16.854V20h10v-3.146l-5-3.43zm0-9.708 5 3.43 5-3.43V4H7z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+HourglassIcon.displayName = "HourglassIcon";
+module.exports = React.forwardRef(HourglassIcon);

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

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

package/assets/web/icons/hourglass.js

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function HourglassIcon(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", {
+      fillRule: "evenodd",
+      d: "M20 2a1 1 0 1 1 0 2h-1v3.146l-.004.124a2 2 0 0 1-.865 1.526L13.458 12l4.673 3.204a2 2 0 0 1 .865 1.526l.004.123V20h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-3.146l.004-.123a2 2 0 0 1 .865-1.527L10.541 12 5.869 8.796a2 2 0 0 1-.865-1.526L5 7.146V4H4a1 1 0 0 1 0-2zM7 16.854V20h10v-3.146l-5-3.43zm0-9.708 5 3.43 5-3.43V4H7z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+HourglassIcon.displayName = "HourglassIcon";
+export default forwardRef(HourglassIcon);

package/assets/web/icons/index.cjs

@@ -87,6 +87,8 @@ module.exports = {
   HomeSolidIcon: require("./home-solid.cjs"),
   HomeIcon: require("./home.cjs"),
   HostIcon: require("./host.cjs"),
+  HourglassSolidIcon: require("./hourglass-solid.cjs"),
+  HourglassIcon: require("./hourglass.cjs"),
   ImageErrorIcon: require("./image-error.cjs"),
   ImageIcon: require("./image.cjs"),
   IndentDecreaseIcon: require("./indent-decrease.cjs"),

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

@@ -86,6 +86,8 @@ export { default as HistoryIcon } from "./history.js";
 export { default as HomeSolidIcon } from "./home-solid.js";
 export { default as HomeIcon } from "./home.js";
 export { default as HostIcon } from "./host.js";
+export { default as HourglassSolidIcon } from "./hourglass-solid.js";
+export { default as HourglassIcon } from "./hourglass.js";
 export { default as ImageErrorIcon } from "./image-error.js";
 export { default as ImageIcon } from "./image.js";
 export { default as IndentDecreaseIcon } from "./indent-decrease.js";

package/assets/web/icons/index.js

@@ -86,6 +86,8 @@ export { default as HistoryIcon } from "./history.js";
 export { default as HomeSolidIcon } from "./home-solid.js";
 export { default as HomeIcon } from "./home.js";
 export { default as HostIcon } from "./host.js";
+export { default as HourglassSolidIcon } from "./hourglass-solid.js";
+export { default as HourglassIcon } from "./hourglass.js";
 export { default as ImageErrorIcon } from "./image-error.js";
 export { default as ImageIcon } from "./image.js";
 export { default as IndentDecreaseIcon } from "./indent-decrease.js";

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

@@ -311,6 +311,8 @@ export const cpdIconFolder: string;
 export const cpdIconSave: string;
 export const cpdIconUnsave: string;
 export const cpdIconSaveSolid: string;
+export const cpdIconHourglassSolid: string;
+export const cpdIconHourglass: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;

package/assets/web/js/cpdDark.js

@@ -339,6 +339,8 @@ export const cpdIconFolder = "icons/folder.svg";
 export const cpdIconSave = "icons/save.svg";
 export const cpdIconUnsave = "icons/unsave.svg";
 export const cpdIconSaveSolid = "icons/save-solid.svg";
+export const cpdIconHourglassSolid = "icons/hourglass-solid.svg";
+export const cpdIconHourglass = "icons/hourglass.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#14171b";
 export const cpdColorGray200 = "#181a1f";

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

@@ -311,6 +311,8 @@ export const cpdIconFolder: string;
 export const cpdIconSave: string;
 export const cpdIconUnsave: string;
 export const cpdIconSaveSolid: string;
+export const cpdIconHourglassSolid: string;
+export const cpdIconHourglass: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;

package/assets/web/js/cpdDarkHc.js

@@ -339,6 +339,8 @@ export const cpdIconFolder = "icons/folder.svg";
 export const cpdIconSave = "icons/save.svg";
 export const cpdIconUnsave = "icons/unsave.svg";
 export const cpdIconSaveSolid = "icons/save-solid.svg";
+export const cpdIconHourglassSolid = "icons/hourglass-solid.svg";
+export const cpdIconHourglass = "icons/hourglass.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#181a1f";
 export const cpdColorGray200 = "#1d1f24";

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

@@ -311,6 +311,8 @@ export const cpdIconFolder: string;
 export const cpdIconSave: string;
 export const cpdIconUnsave: string;
 export const cpdIconSaveSolid: string;
+export const cpdIconHourglassSolid: string;
+export const cpdIconHourglass: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;

package/assets/web/js/cpdLight.js

@@ -339,6 +339,8 @@ export const cpdIconFolder = "icons/folder.svg";
 export const cpdIconSave = "icons/save.svg";
 export const cpdIconUnsave = "icons/unsave.svg";
 export const cpdIconSaveSolid = "icons/save-solid.svg";
+export const cpdIconHourglassSolid = "icons/hourglass-solid.svg";
+export const cpdIconHourglass = "icons/hourglass.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#fbfcfd";
 export const cpdColorGray200 = "#f7f9fa";

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

@@ -311,6 +311,8 @@ export const cpdIconFolder: string;
 export const cpdIconSave: string;
 export const cpdIconUnsave: string;
 export const cpdIconSaveSolid: string;
+export const cpdIconHourglassSolid: string;
+export const cpdIconHourglass: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;

package/assets/web/js/cpdLightHc.js

@@ -339,6 +339,8 @@ export const cpdIconFolder = "icons/folder.svg";
 export const cpdIconSave = "icons/save.svg";
 export const cpdIconUnsave = "icons/unsave.svg";
 export const cpdIconSaveSolid = "icons/save-solid.svg";
+export const cpdIconHourglassSolid = "icons/hourglass-solid.svg";
+export const cpdIconHourglass = "icons/hourglass.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#f7f9fa";
 export const cpdColorGray200 = "#f0f2f5";

package/icons/$icons.json

@@ -935,6 +935,14 @@
     "save-solid": {
       "value": "icons/save-solid.svg",
       "type": "icon"
+    },
+    "hourglass-solid": {
+      "value": "icons/hourglass-solid.svg",
+      "type": "icon"
+    },
+    "hourglass": {
+      "value": "icons/hourglass.svg",
+      "type": "icon"
     }
   }
 }

package/icons/hourglass-solid.svg

@@ -0,0 +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="M20 2a1 1 0 1 1 0 2h-1v3.146l-.004.124a2 2 0 0 1-.865 1.526L13.458 12l4.673 3.204q.085.06.165.127l.023.02q.022.02.043.042.065.058.122.122.029.031.054.065.05.06.097.123l.047.073q.036.058.07.117.027.048.05.1.028.057.052.115l.033.092a2 2 0 0 1 .087.35q.024.15.026.303V20h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-3.146a2 2 0 0 1 .071-.522 2 2 0 0 1 .041-.132l.034-.092.051-.115q.024-.052.05-.1.034-.06.07-.117l.047-.073q.046-.063.097-.123.026-.033.054-.065.058-.064.122-.122.02-.022.043-.042l.023-.02a2 2 0 0 1 .166-.127L10.541 12 5.869 8.796a2 2 0 0 1-.865-1.526L5 7.146V4H4a1 1 0 0 1 0-2zM7 7.146l5 3.43 5-3.43V4H7z" clip-rule="evenodd"/></svg>

package/icons/hourglass.svg

@@ -0,0 +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="M20 2a1 1 0 1 1 0 2h-1v3.146l-.004.124a2 2 0 0 1-.865 1.526L13.458 12l4.673 3.204a2 2 0 0 1 .865 1.526l.004.123V20h1a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2h1v-3.146l.004-.123a2 2 0 0 1 .865-1.527L10.541 12 5.869 8.796a2 2 0 0 1-.865-1.526L5 7.146V4H4a1 1 0 0 1 0-2zM7 16.854V20h10v-3.146l-5-3.43zm0-9.708 5 3.43 5-3.43V4H7z" clip-rule="evenodd"/></svg>

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "10.2.3",
+  "version": "11.0.0",
   "description": "Compound design tokens",
-  "packageManager": "pnpm@11.9.0+sha512.bd682d5d03fe525ef7c9fd6780c6884d1e756ac4c9c9fe00c538782824310dcf90e3ddc4f53835f06dfaebd5085e41855e0bcbb3b60de2ac5bbab89e5036f03b",
+  "packageManager": "pnpm@11.22.0+sha512.1ff870c4c6133dfd88fb2afc46dd13d47f09c9794b438c6fdb47ca98caf3bc16381ee0be93a091b8e3824cf01f889f46d7d9e20910fb0be1ab0fb5baa80dd621",
   "sideEffects": false,
   "scripts": {
     "build": "vite build && tsx ./build.ts",
@@ -22,7 +22,8 @@
   ],
   "files": [
     "./assets/web/**/*",
-    "./icons/**/*"
+    "./icons/**/*",
+    "./src/colors/**/*"
   ],
   "main": "assets/web/js/index.js",
   "type": "module",
@@ -82,16 +83,24 @@
     "style-dictionary": "^5.0.0",
     "svgo": "^4.0.0",
     "tsx": "^4.15.6",
-    "typescript": "^6.0.0",
+    "typescript": "^7.0.0",
     "undici": "^8.0.0",
     "vite": "^8.0.0",
     "zod": "^4.0.0"
   },
   "peerDependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.0.0",
     "@types/react": "*",
+    "chroma-js": "^3.0.0",
     "react": "^17 || ^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {
+    "@adobe/leonardo-contrast-colors": {
+      "optional": true
+    },
+    "chroma-js": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },

package/src/colors/alphredo.js

@@ -0,0 +1,139 @@
+// https://alphredo.app/js/_calculations.js
+
+function roundToTwo(num) {
+  return +`${Math.ceil(`${num}e+2`)}e-2`;
+}
+
+export const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+const hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return [
+    Number.parseInt(result[1], 16),
+    Number.parseInt(result[2], 16),
+    Number.parseInt(result[3], 16),
+  ];
+};
+
+const rgbToHsl = (r255, g255, b255) => {
+  // https://css-tricks.com/converting-color-spaces-in-javascript/
+
+  // Make r, g, and b fractions of 1
+  const r = r255 / 255;
+  const g = g255 / 255;
+  const b = b255 / 255;
+
+  // Find greatest and smallest channel values
+  const cmin = Math.min(r, g, b);
+  const cmax = Math.max(r, g, b);
+  const delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+
+  // Calculate hue
+  // No difference
+  if (delta === 0) h = 0;
+  // Red is max
+  else if (cmax === r) h = ((g - b) / delta) % 6;
+  // Green is max
+  else if (cmax === g) h = (b - r) / delta + 2;
+  // Blue is max
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  // Make negative hues positive behind 360°
+  if (h < 0) h += 360;
+
+  // Calculate lightness
+  l = (cmax + cmin) / 2;
+
+  // Calculate saturation
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+
+  // Multiply l and s by 100
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return [h, s, Math.round(l)];
+};
+
+export const hslaToHex = (h, s, l100, alpha) => {
+  const l = l100 / 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, "0")
+      .toUpperCase(); // convert to Hex and prefix "0" if needed
+  };
+
+  const r = f(0);
+  const g = f(8);
+  const b = f(4);
+
+  // Clamp alpha to [0,1], convert to 0-255 then to two-digit hex
+  const clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+  const alphaClamped = clamp(alpha, 0, 1);
+  const aHex = Math.round(alphaClamped * 255)
+    .toString(16)
+    .padStart(2, "0")
+    .toUpperCase();
+
+  return `#${r}${g}${b}${aHex}`;
+};
+
+export const getAlphaColor = (colorHex, backgroundHex, strength = 1) => {
+  // Convert input HEXes to RGBs (arrays)
+  const color = hexToRgb(colorHex);
+  const surface = hexToRgb(
+    backgroundHex === "white"
+      ? "#FFFFFF"
+      : backgroundHex === "black"
+        ? "#000000"
+        : backgroundHex,
+  );
+
+  // Calculate alpha value per channel, pick the highest value
+  const alphaPerChannel = color.map((channel, i) => {
+    return [
+      (channel - surface[i]) / (255 - surface[i]),
+      (channel - surface[i]) / (0 - surface[i]),
+    ];
+  });
+
+  const alpha = roundToTwo(
+    Math.max(
+      ...alphaPerChannel.flat().filter((value) => /^-?\d+\.?\d*$/.test(value)),
+    ),
+  );
+
+  // Force minimum alpha for opaque colors
+  // alpha = Math.min(0.96, alpha);
+
+  // Calculate new RGB values based on the alpha
+  const alphaColor = color.map((channel, i) => {
+    return Math.round((channel - surface[i] + surface[i] * alpha) / alpha);
+  });
+
+  // If no alpha color was found, return original, otherwise return alpha color
+  if (alphaColor.includes(Number.NaN)) {
+    const hsl = rgbToHsl(color[0], color[1], color[2]);
+    return {
+      h: hsl[0],
+      s: Math.round(hsl[1] * strength),
+      l: hsl[2],
+      a: 1,
+    };
+  }
+  const hsl = rgbToHsl(alphaColor[0], alphaColor[1], alphaColor[2]);
+  return {
+    h: hsl[0],
+    s: Math.round(hsl[1] * strength),
+    l: hsl[2],
+    a: alpha,
+  };
+};

package/src/colors/applet.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Leonardo Color</title>
+    <meta charset="UTF-8" />
+    <style></style>
+  </head>
+
+  <body>
+    <div id="app">
+      <h3>Key Colours</h3>
+      <div class="key-colors"></div>
+      <h3>Themes</h3>
+      <div class="themes"></div>
+      <details>
+        <summary>Show Alpha</summary>
+        <div class="themes-alpha"></div>
+      </details>
+      <div class="tests"></div>
+      <h3>Tokens Studio</h3>
+      <div class="tokens-studio"></div>
+      <h3>CSS Vars</h3>
+      <div class="css-vars">
+        <details>
+          <summary>Show</summary>
+          <pre class="css-vars__output"></pre>
+        </details>
+      </div>
+      <h3>Leonardo Editor</h3>
+      <div class="leonardo-editor">
+        <details>
+          <summary>Show</summary>
+          <div class="leonardo-editor__links"></div>
+        </details>
+      </div>
+    </div>
+
+    <script type="module" src="applet.js"></script>
+  </body>
+</html>