@vector-im/compound-design-tokens 10.2.2 → 10.2.4

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";
@@ -654,6 +656,7 @@ export const cpdColorTextSecondary = "#474a51";
 export const cpdColorTextDisabled = "#6c737e";
 export const cpdColorTextActionPrimary = "#1a1c21";
 export const cpdColorTextActionAccent = "#00553d";
+export const cpdColorTextActionSuccess = "#00553d";
 export const cpdColorTextLinkExternal = "#043088";
 export const cpdColorTextCriticalPrimary = "#99001a";
 export const cpdColorTextSuccessPrimary = "#00553d";
@@ -667,8 +670,10 @@ export const cpdColorTextDecorative5 = "#72003a";
 export const cpdColorTextDecorative6 = "#770000";
 export const cpdColorTextBadgeAccent = "#00402b";
 export const cpdColorTextBadgeInfo = "#043088";
+export const cpdColorTextWarningPrimary = "#931700";
 export const cpdColorBgSubtlePrimary = "#d7dce3";
 export const cpdColorBgSubtleSecondary = "#e1e6ec";
+export const cpdColorBgSubtleTertiary = "#f7f9fa";
 export const cpdColorBgCanvasDefault = "#ffffff";
 export const cpdColorBgCanvasDisabled = "#f0f2f5";
 export const cpdColorBgCanvasDefaultLevel1 = "#ffffff";
@@ -687,6 +692,9 @@ export const cpdColorBgCriticalHovered = "#8b000c";
 export const cpdColorBgCriticalSubtle = "#ffefec";
 export const cpdColorBgCriticalSubtleHovered = "#ffdfda";
 export const cpdColorBgSuccessSubtle = "#e3f7ed";
+export const cpdColorBgSuccessRest = "#00553d";
+export const cpdColorBgSuccessHovered = "#004d36";
+export const cpdColorBgSuccessPressed = "#00402b";
 export const cpdColorBgInfoSubtle = "#e9f2ff";
 export const cpdColorBgDecorative1 = "#c8f1ba";
 export const cpdColorBgDecorative2 = "#c7ecf0";
@@ -698,6 +706,7 @@ export const cpdColorBgAccentRest = "#00553d";
 export const cpdColorBgAccentHovered = "#004d36";
 export const cpdColorBgAccentPressed = "#00402b";
 export const cpdColorBgAccentSelected = "hsla(151, 93%, 37%, 0.23)";
+export const cpdColorBgAccentSubtle = "#e3f7ed";
 export const cpdColorBgBadgeAccent = "#afe8ce";
 export const cpdColorBgBadgeInfo = "#c8ddfd";
 export const cpdColorBgBadgeDefault = "#ffffff";
@@ -714,6 +723,7 @@ export const cpdColorBorderCriticalPrimary = "#99001a";
 export const cpdColorBorderCriticalHovered = "#8b000c";
 export const cpdColorBorderCriticalSubtle = "#ffafa5";
 export const cpdColorBorderSuccessSubtle = "#71d7ae";
+export const cpdColorBorderSuccessPrimary = "#00553d";
 export const cpdColorBorderInfoSubtle = "#4a8ef0";
 export const cpdColorBorderAccentSubtle = "#00a27c";
 export const cpdColorBorderAccentPrimary = "#00553d";
@@ -732,6 +742,7 @@ export const cpdColorIconCriticalPrimary = "#99001a";
 export const cpdColorIconSuccessPrimary = "#00553d";
 export const cpdColorIconInfoPrimary = "#043088";
 export const cpdColorIconOnSolidPrimary = "#ffffff";
+export const cpdColorIconWarningPrimary = "#931700";
 export const cpdColorGradientSubtleStop1 = "hsla(156, 99%, 36%, 0.56)";
 export const cpdColorGradientSubtleStop2 = "hsla(153, 95%, 37%, 0.32)";
 export const cpdColorGradientSubtleStop3 = "hsla(151, 93%, 37%, 0.23)";

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,17 +1,18 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "10.2.2",
+  "version": "10.2.4",
   "description": "Compound design tokens",
+  "packageManager": "pnpm@11.13.0+sha512.88d94724d8f2e6c186744a5584c6e59ecac869ec7ba15e9cb4cd628e8dc7066820b2481d8ee3b51ea8da323a7378068aa58c556a3720d32b7c20a051d088363a",
   "sideEffects": false,
   "scripts": {
     "build": "vite build && tsx ./build.ts",
     "sync:icons": "tsx src/syncIcons.ts",
     "dev": "http-server .",
     "dev:colors": "vite --open src/colors/applet.html",
-    "format": "yarn exec biome -- format",
-    "lint": "yarn exec biome -- lint",
-    "check": "yarn exec biome -- check",
-    "types": "yarn exec tsc -- --noEmit"
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check",
+    "types": "tsc --noEmit"
   },
   "keywords": [
     "compound",
@@ -21,7 +22,8 @@
   ],
   "files": [
     "./assets/web/**/*",
-    "./icons/**/*"
+    "./icons/**/*",
+    "./src/colors/**/*"
   ],
   "main": "assets/web/js/index.js",
   "type": "module",
@@ -67,6 +69,7 @@
     "@svgr/plugin-svgo": "^8.1.0",
     "@tokens-studio/sd-transforms": "^2.0.0",
     "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.6.8",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.0.0",
@@ -80,17 +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"
   },
-  "dependencies": {},
   "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>