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

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

@@ -4,6 +4,7 @@
   --cpd-color-text-disabled: var(--cpd-color-gray-800);
   --cpd-color-text-action-primary: var(--cpd-color-gray-1400);
   --cpd-color-text-action-accent: var(--cpd-color-green-900);
+  --cpd-color-text-action-success: var(--cpd-color-green-900);
   --cpd-color-text-link-external: var(--cpd-color-blue-1100);
   --cpd-color-text-critical-primary: var(--cpd-color-red-900);
   --cpd-color-text-success-primary: var(--cpd-color-green-900);
@@ -17,8 +18,10 @@
   --cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
   --cpd-color-text-badge-accent: var(--cpd-color-green-1100);
   --cpd-color-text-badge-info: var(--cpd-color-blue-1100);
+  --cpd-color-text-warning-primary: var(--cpd-color-orange-900);
   --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
   --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
+  --cpd-color-bg-subtle-tertiary: var(--cpd-color-gray-100);
   --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
   --cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
   --cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
@@ -36,6 +39,9 @@
   --cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
   --cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
   --cpd-color-bg-success-subtle: var(--cpd-color-green-200);
+  --cpd-color-bg-success-rest: var(--cpd-color-green-900);
+  --cpd-color-bg-success-hovered: var(--cpd-color-green-1000);
+  --cpd-color-bg-success-pressed: var(--cpd-color-green-1100);
   --cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
   --cpd-color-bg-decorative-1: var(--cpd-color-lime-300);
   --cpd-color-bg-decorative-2: var(--cpd-color-cyan-300);
@@ -47,6 +53,7 @@
   --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-accent-subtle: var(--cpd-color-green-200);
   --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);
@@ -62,6 +69,7 @@
   --cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
   --cpd-color-border-critical-subtle: var(--cpd-color-red-500);
   --cpd-color-border-success-subtle: var(--cpd-color-green-500);
+  --cpd-color-border-success-primary: var(--cpd-color-green-900);
   --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);
@@ -80,6 +88,7 @@
   --cpd-color-icon-success-primary: var(--cpd-color-green-900);
   --cpd-color-icon-info-primary: var(--cpd-color-blue-1100);
   --cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
+  --cpd-color-icon-warning-primary: var(--cpd-color-orange-900);
   --cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-green-500);
   --cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-green-400);
   --cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-green-300);

package/assets/web/icons/crop.cjs

@@ -10,9 +10,11 @@ function CropIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
-      d: "M6 2a1 1 0 0 1 1 1v13a1 1 0 0 0 1 1h13a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2H8a3 3 0 0 1-3-3V7H3a1 1 0 0 1 0-2h2V3a1 1 0 0 1 1-1"
+      fillRule: "evenodd",
+      d: "M6 4a1 1 0 0 0-1 1v2H3a1 1 0 1 0 0 2h2v8a3 3 0 0 0 3 3h8v2a1 1 0 0 0 2 0v-2h2a1 1 0 1 0 0-2h-2v-8a3 3 0 0 0-3-3H7V5a1 1 0 0 0-1-1m9 5a1 1 0 0 1 1 1v8H8a1 1 0 0 1-1-1V9z",
+      clipRule: "evenodd"
     }), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
-      d: "M16 5a3 3 0 0 1 3 3v7h-2V8a1 1 0 0 0-1-1H9V5z"
+      d: "M15.707.293a1 1 0 0 0-1.414 0l-2 2a1 1 0 0 0 0 1.414l2 2a1 1 0 1 0 1.414-1.414l-.275-.276A6 6 0 0 1 21 10a1 1 0 1 0 2 0 8 8 0 0 0-7.596-7.99l.303-.303a1 1 0 0 0 0-1.414"
     })]
   });
 }

package/assets/web/icons/crop.js

@@ -10,9 +10,11 @@ function CropIcon(props, ref) {
     ref: ref,
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M6 2a1 1 0 0 1 1 1v13a1 1 0 0 0 1 1h13a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2H8a3 3 0 0 1-3-3V7H3a1 1 0 0 1 0-2h2V3a1 1 0 0 1 1-1"
+      fillRule: "evenodd",
+      d: "M6 4a1 1 0 0 0-1 1v2H3a1 1 0 1 0 0 2h2v8a3 3 0 0 0 3 3h8v2a1 1 0 0 0 2 0v-2h2a1 1 0 1 0 0-2h-2v-8a3 3 0 0 0-3-3H7V5a1 1 0 0 0-1-1m9 5a1 1 0 0 1 1 1v8H8a1 1 0 0 1-1-1V9z",
+      clipRule: "evenodd"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M16 5a3 3 0 0 1 3 3v7h-2V8a1 1 0 0 0-1-1H9V5z"
+      d: "M15.707.293a1 1 0 0 0-1.414 0l-2 2a1 1 0 0 0 0 1.414l2 2a1 1 0 1 0 1.414-1.414l-.275-.276A6 6 0 0 1 21 10a1 1 0 1 0 2 0 8 8 0 0 0-7.596-7.99l.303-.303a1 1 0 0 0 0-1.414"
     })]
   });
 }

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

@@ -626,6 +626,7 @@ export const cpdColorTextSecondary: string;
 export const cpdColorTextDisabled: string;
 export const cpdColorTextActionPrimary: string;
 export const cpdColorTextActionAccent: string;
+export const cpdColorTextActionSuccess: string;
 export const cpdColorTextLinkExternal: string;
 export const cpdColorTextCriticalPrimary: string;
 export const cpdColorTextSuccessPrimary: string;
@@ -639,8 +640,10 @@ export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
 export const cpdColorTextBadgeAccent: string;
 export const cpdColorTextBadgeInfo: string;
+export const cpdColorTextWarningPrimary: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
+export const cpdColorBgSubtleTertiary: string;
 export const cpdColorBgCanvasDefault: string;
 export const cpdColorBgCanvasDisabled: string;
 export const cpdColorBgCanvasDefaultLevel1: string;
@@ -659,6 +662,9 @@ export const cpdColorBgCriticalHovered: string;
 export const cpdColorBgCriticalSubtle: string;
 export const cpdColorBgCriticalSubtleHovered: string;
 export const cpdColorBgSuccessSubtle: string;
+export const cpdColorBgSuccessRest: string;
+export const cpdColorBgSuccessHovered: string;
+export const cpdColorBgSuccessPressed: string;
 export const cpdColorBgInfoSubtle: string;
 export const cpdColorBgDecorative1: string;
 export const cpdColorBgDecorative2: string;
@@ -670,6 +676,7 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
+export const cpdColorBgAccentSubtle: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
@@ -686,6 +693,7 @@ export const cpdColorBorderCriticalPrimary: string;
 export const cpdColorBorderCriticalHovered: string;
 export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
+export const cpdColorBorderSuccessPrimary: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
 export const cpdColorBorderAccentPrimary: string;
@@ -704,6 +712,7 @@ export const cpdColorIconCriticalPrimary: string;
 export const cpdColorIconSuccessPrimary: string;
 export const cpdColorIconInfoPrimary: string;
 export const cpdColorIconOnSolidPrimary: string;
+export const cpdColorIconWarningPrimary: string;
 export const cpdColorGradientSubtleStop1: string;
 export const cpdColorGradientSubtleStop2: string;
 export const cpdColorGradientSubtleStop3: string;

package/assets/web/js/cpdDark.js

@@ -654,6 +654,7 @@ export const cpdColorTextSecondary = "#808994";
 export const cpdColorTextDisabled = "#656c76";
 export const cpdColorTextActionPrimary = "#ebeef2";
 export const cpdColorTextActionAccent = "#129a78";
+export const cpdColorTextActionSuccess = "#129a78";
 export const cpdColorTextLinkExternal = "#7aacf4";
 export const cpdColorTextCriticalPrimary = "#fd3e3c";
 export const cpdColorTextSuccessPrimary = "#129a78";
@@ -667,8 +668,10 @@ export const cpdColorTextDecorative5 = "#fe84a2";
 export const cpdColorTextDecorative6 = "#f6913d";
 export const cpdColorTextBadgeAccent = "#1fc090";
 export const cpdColorTextBadgeInfo = "#7aacf4";
+export const cpdColorTextWarningPrimary = "#da670d";
 export const cpdColorBgSubtlePrimary = "#26282d";
 export const cpdColorBgSubtleSecondary = "#1d1f24";
+export const cpdColorBgSubtleTertiary = "#14171b";
 export const cpdColorBgCanvasDefault = "#101317";
 export const cpdColorBgCanvasDisabled = "#181a1f";
 export const cpdColorBgCanvasDefaultLevel1 = "#1d1f24";
@@ -687,6 +690,9 @@ export const cpdColorBgCriticalHovered = "#ff665d";
 export const cpdColorBgCriticalSubtle = "#3e0000";
 export const cpdColorBgCriticalSubtleHovered = "#470000";
 export const cpdColorBgSuccessSubtle = "#001f0e";
+export const cpdColorBgSuccessRest = "#129a78";
+export const cpdColorBgSuccessHovered = "#17ac84";
+export const cpdColorBgSuccessPressed = "#1fc090";
 export const cpdColorBgInfoSubtle = "#00095d";
 export const cpdColorBgDecorative1 = "#002600";
 export const cpdColorBgDecorative2 = "#001b4e";
@@ -698,6 +704,7 @@ export const cpdColorBgAccentRest = "#129a78";
 export const cpdColorBgAccentHovered = "#17ac84";
 export const cpdColorBgAccentPressed = "#1fc090";
 export const cpdColorBgAccentSelected = "hsl(151, 100%, 7%, 1)";
+export const cpdColorBgAccentSubtle = "#001f0e";
 export const cpdColorBgBadgeAccent = "#002e1b";
 export const cpdColorBgBadgeInfo = "#001e6f";
 export const cpdColorBgBadgeDefault = "#101317";
@@ -714,6 +721,7 @@ export const cpdColorBorderCriticalPrimary = "#fd3e3c";
 export const cpdColorBorderCriticalHovered = "#ff665d";
 export const cpdColorBorderCriticalSubtle = "#710000";
 export const cpdColorBorderSuccessSubtle = "#003d29";
+export const cpdColorBorderSuccessPrimary = "#129a78";
 export const cpdColorBorderInfoSubtle = "#0b49ab";
 export const cpdColorBorderAccentSubtle = "#005a43";
 export const cpdColorBorderAccentPrimary = "#129a78";
@@ -732,6 +740,7 @@ export const cpdColorIconCriticalPrimary = "#fd3e3c";
 export const cpdColorIconSuccessPrimary = "#129a78";
 export const cpdColorIconInfoPrimary = "#7aacf4";
 export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorIconWarningPrimary = "#da670d";
 export const cpdColorGradientSubtleStop1 = "hsl(160, 100%, 12%, 1)";
 export const cpdColorGradientSubtleStop2 = "hsl(155, 100%, 9%, 1)";
 export const cpdColorGradientSubtleStop3 = "hsl(151, 100%, 7%, 1)";

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

@@ -626,6 +626,7 @@ export const cpdColorTextSecondary: string;
 export const cpdColorTextDisabled: string;
 export const cpdColorTextActionPrimary: string;
 export const cpdColorTextActionAccent: string;
+export const cpdColorTextActionSuccess: string;
 export const cpdColorTextLinkExternal: string;
 export const cpdColorTextCriticalPrimary: string;
 export const cpdColorTextSuccessPrimary: string;
@@ -639,8 +640,10 @@ export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
 export const cpdColorTextBadgeAccent: string;
 export const cpdColorTextBadgeInfo: string;
+export const cpdColorTextWarningPrimary: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
+export const cpdColorBgSubtleTertiary: string;
 export const cpdColorBgCanvasDefault: string;
 export const cpdColorBgCanvasDisabled: string;
 export const cpdColorBgCanvasDefaultLevel1: string;
@@ -659,6 +662,9 @@ export const cpdColorBgCriticalHovered: string;
 export const cpdColorBgCriticalSubtle: string;
 export const cpdColorBgCriticalSubtleHovered: string;
 export const cpdColorBgSuccessSubtle: string;
+export const cpdColorBgSuccessRest: string;
+export const cpdColorBgSuccessHovered: string;
+export const cpdColorBgSuccessPressed: string;
 export const cpdColorBgInfoSubtle: string;
 export const cpdColorBgDecorative1: string;
 export const cpdColorBgDecorative2: string;
@@ -670,6 +676,7 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
+export const cpdColorBgAccentSubtle: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
@@ -686,6 +693,7 @@ export const cpdColorBorderCriticalPrimary: string;
 export const cpdColorBorderCriticalHovered: string;
 export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
+export const cpdColorBorderSuccessPrimary: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
 export const cpdColorBorderAccentPrimary: string;
@@ -704,6 +712,7 @@ export const cpdColorIconCriticalPrimary: string;
 export const cpdColorIconSuccessPrimary: string;
 export const cpdColorIconInfoPrimary: string;
 export const cpdColorIconOnSolidPrimary: string;
+export const cpdColorIconWarningPrimary: string;
 export const cpdColorGradientSubtleStop1: string;
 export const cpdColorGradientSubtleStop2: string;
 export const cpdColorGradientSubtleStop3: string;

package/assets/web/js/cpdDarkHc.js

@@ -654,6 +654,7 @@ export const cpdColorTextSecondary = "#acb4bd";
 export const cpdColorTextDisabled = "#79818d";
 export const cpdColorTextActionPrimary = "#f2f5f7";
 export const cpdColorTextActionAccent = "#37c998";
+export const cpdColorTextActionSuccess = "#37c998";
 export const cpdColorTextLinkExternal = "#b2cffa";
 export const cpdColorTextCriticalPrimary = "#ff968c";
 export const cpdColorTextSuccessPrimary = "#37c998";
@@ -667,8 +668,10 @@ export const cpdColorTextDecorative5 = "#ffbbca";
 export const cpdColorTextDecorative6 = "#fdc197";
 export const cpdColorTextBadgeAccent = "#8fddbc";
 export const cpdColorTextBadgeInfo = "#b2cffa";
+export const cpdColorTextWarningPrimary = "#f89d58";
 export const cpdColorBgSubtlePrimary = "#2b2e33";
 export const cpdColorBgSubtleSecondary = "#26282d";
+export const cpdColorBgSubtleTertiary = "#181a1f";
 export const cpdColorBgCanvasDefault = "#101317";
 export const cpdColorBgCanvasDisabled = "#1d1f24";
 export const cpdColorBgCanvasDefaultLevel1 = "#26282d";
@@ -687,6 +690,9 @@ export const cpdColorBgCriticalHovered = "#ffa79d";
 export const cpdColorBgCriticalSubtle = "#470000";
 export const cpdColorBgCriticalSubtleHovered = "#590000";
 export const cpdColorBgSuccessSubtle = "#002513";
+export const cpdColorBgSuccessRest = "#37c998";
+export const cpdColorBgSuccessHovered = "#61d2a6";
+export const cpdColorBgSuccessPressed = "#8fddbc";
 export const cpdColorBgInfoSubtle = "#001264";
 export const cpdColorBgDecorative1 = "#003000";
 export const cpdColorBgDecorative2 = "#002559";
@@ -698,6 +704,7 @@ export const cpdColorBgAccentRest = "#37c998";
 export const cpdColorBgAccentHovered = "#61d2a6";
 export const cpdColorBgAccentPressed = "#8fddbc";
 export const cpdColorBgAccentSelected = "hsl(155, 100%, 9%, 1)";
+export const cpdColorBgAccentSubtle = "#002513";
 export const cpdColorBgBadgeAccent = "#003622";
 export const cpdColorBgBadgeInfo = "#032677";
 export const cpdColorBgBadgeDefault = "#101317";
@@ -714,6 +721,7 @@ export const cpdColorBorderCriticalPrimary = "#ff968c";
 export const cpdColorBorderCriticalHovered = "#ffa79d";
 export const cpdColorBorderCriticalSubtle = "#830009";
 export const cpdColorBorderSuccessSubtle = "#004832";
+export const cpdColorBorderSuccessPrimary = "#37c998";
 export const cpdColorBorderInfoSubtle = "#0e61d1";
 export const cpdColorBorderAccentSubtle = "#00745c";
 export const cpdColorBorderAccentPrimary = "#37c998";
@@ -732,6 +740,7 @@ export const cpdColorIconCriticalPrimary = "#ff968c";
 export const cpdColorIconSuccessPrimary = "#37c998";
 export const cpdColorIconInfoPrimary = "#b2cffa";
 export const cpdColorIconOnSolidPrimary = "#101317";
+export const cpdColorIconWarningPrimary = "#f89d58";
 export const cpdColorGradientSubtleStop1 = "hsl(162, 100%, 14%, 1)";
 export const cpdColorGradientSubtleStop2 = "hsl(158, 100%, 11%, 1)";
 export const cpdColorGradientSubtleStop3 = "hsl(155, 100%, 9%, 1)";

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

@@ -626,6 +626,7 @@ export const cpdColorTextSecondary: string;
 export const cpdColorTextDisabled: string;
 export const cpdColorTextActionPrimary: string;
 export const cpdColorTextActionAccent: string;
+export const cpdColorTextActionSuccess: string;
 export const cpdColorTextLinkExternal: string;
 export const cpdColorTextCriticalPrimary: string;
 export const cpdColorTextSuccessPrimary: string;
@@ -639,8 +640,10 @@ export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
 export const cpdColorTextBadgeAccent: string;
 export const cpdColorTextBadgeInfo: string;
+export const cpdColorTextWarningPrimary: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
+export const cpdColorBgSubtleTertiary: string;
 export const cpdColorBgCanvasDefault: string;
 export const cpdColorBgCanvasDisabled: string;
 export const cpdColorBgCanvasDefaultLevel1: string;
@@ -659,6 +662,9 @@ export const cpdColorBgCriticalHovered: string;
 export const cpdColorBgCriticalSubtle: string;
 export const cpdColorBgCriticalSubtleHovered: string;
 export const cpdColorBgSuccessSubtle: string;
+export const cpdColorBgSuccessRest: string;
+export const cpdColorBgSuccessHovered: string;
+export const cpdColorBgSuccessPressed: string;
 export const cpdColorBgInfoSubtle: string;
 export const cpdColorBgDecorative1: string;
 export const cpdColorBgDecorative2: string;
@@ -670,6 +676,7 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
+export const cpdColorBgAccentSubtle: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
@@ -686,6 +693,7 @@ export const cpdColorBorderCriticalPrimary: string;
 export const cpdColorBorderCriticalHovered: string;
 export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
+export const cpdColorBorderSuccessPrimary: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
 export const cpdColorBorderAccentPrimary: string;
@@ -704,6 +712,7 @@ export const cpdColorIconCriticalPrimary: string;
 export const cpdColorIconSuccessPrimary: string;
 export const cpdColorIconInfoPrimary: string;
 export const cpdColorIconOnSolidPrimary: string;
+export const cpdColorIconWarningPrimary: string;
 export const cpdColorGradientSubtleStop1: string;
 export const cpdColorGradientSubtleStop2: string;
 export const cpdColorGradientSubtleStop3: string;

package/assets/web/js/cpdLight.js

@@ -654,6 +654,7 @@ export const cpdColorTextSecondary = "#656d77";
 export const cpdColorTextDisabled = "#818a95";
 export const cpdColorTextActionPrimary = "#1b1d22";
 export const cpdColorTextActionAccent = "#007a61";
+export const cpdColorTextActionSuccess = "#007a61";
 export const cpdColorTextLinkExternal = "#064ab1";
 export const cpdColorTextCriticalPrimary = "#d51928";
 export const cpdColorTextSuccessPrimary = "#007a61";
@@ -667,8 +668,10 @@ export const cpdColorTextDecorative5 = "#9f0850";
 export const cpdColorTextDecorative6 = "#9b2200";
 export const cpdColorTextBadgeAccent = "#005c45";
 export const cpdColorTextBadgeInfo = "#064ab1";
+export const cpdColorTextWarningPrimary = "#bc4500";
 export const cpdColorBgSubtlePrimary = "#e1e6ec";
 export const cpdColorBgSubtleSecondary = "#f0f2f5";
+export const cpdColorBgSubtleTertiary = "#fbfcfd";
 export const cpdColorBgCanvasDefault = "#ffffff";
 export const cpdColorBgCanvasDisabled = "#f7f9fa";
 export const cpdColorBgCanvasDefaultLevel1 = "#ffffff";
@@ -687,6 +690,9 @@ export const cpdColorBgCriticalHovered = "#bc0f22";
 export const cpdColorBgCriticalSubtle = "#fff7f6";
 export const cpdColorBgCriticalSubtleHovered = "#ffefec";
 export const cpdColorBgSuccessSubtle = "#f1fbf6";
+export const cpdColorBgSuccessRest = "#007a61";
+export const cpdColorBgSuccessHovered = "#006b52";
+export const cpdColorBgSuccessPressed = "#005c45";
 export const cpdColorBgInfoSubtle = "#f4f8ff";
 export const cpdColorBgDecorative1 = "#e0f8d9";
 export const cpdColorBgDecorative2 = "#e3f5f8";
@@ -698,6 +704,7 @@ export const cpdColorBgAccentRest = "#007a61";
 export const cpdColorBgAccentHovered = "#006b52";
 export const cpdColorBgAccentPressed = "#005c45";
 export const cpdColorBgAccentSelected = "hsla(150, 100%, 36%, 0.11)";
+export const cpdColorBgAccentSubtle = "#f1fbf6";
 export const cpdColorBgBadgeAccent = "#c6eedb";
 export const cpdColorBgBadgeInfo = "#d8e7fe";
 export const cpdColorBgBadgeDefault = "#ffffff";
@@ -714,6 +721,7 @@ export const cpdColorBorderCriticalPrimary = "#d51928";
 export const cpdColorBorderCriticalHovered = "#bc0f22";
 export const cpdColorBorderCriticalSubtle = "#ffc5bc";
 export const cpdColorBorderSuccessSubtle = "#98e1c1";
+export const cpdColorBorderSuccessPrimary = "#007a61";
 export const cpdColorBorderInfoSubtle = "#7eaff6";
 export const cpdColorBorderAccentSubtle = "#0bc491";
 export const cpdColorBorderAccentPrimary = "#007a61";
@@ -732,6 +740,7 @@ export const cpdColorIconCriticalPrimary = "#d51928";
 export const cpdColorIconSuccessPrimary = "#007a61";
 export const cpdColorIconInfoPrimary = "#064ab1";
 export const cpdColorIconOnSolidPrimary = "#ffffff";
+export const cpdColorIconWarningPrimary = "#bc4500";
 export const cpdColorGradientSubtleStop1 = "hsla(154, 96%, 37%, 0.41)";
 export const cpdColorGradientSubtleStop2 = "hsla(151, 93%, 37%, 0.23)";
 export const cpdColorGradientSubtleStop3 = "hsla(150, 100%, 36%, 0.11)";

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

@@ -626,6 +626,7 @@ export const cpdColorTextSecondary: string;
 export const cpdColorTextDisabled: string;
 export const cpdColorTextActionPrimary: string;
 export const cpdColorTextActionAccent: string;
+export const cpdColorTextActionSuccess: string;
 export const cpdColorTextLinkExternal: string;
 export const cpdColorTextCriticalPrimary: string;
 export const cpdColorTextSuccessPrimary: string;
@@ -639,8 +640,10 @@ export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
 export const cpdColorTextBadgeAccent: string;
 export const cpdColorTextBadgeInfo: string;
+export const cpdColorTextWarningPrimary: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
+export const cpdColorBgSubtleTertiary: string;
 export const cpdColorBgCanvasDefault: string;
 export const cpdColorBgCanvasDisabled: string;
 export const cpdColorBgCanvasDefaultLevel1: string;
@@ -659,6 +662,9 @@ export const cpdColorBgCriticalHovered: string;
 export const cpdColorBgCriticalSubtle: string;
 export const cpdColorBgCriticalSubtleHovered: string;
 export const cpdColorBgSuccessSubtle: string;
+export const cpdColorBgSuccessRest: string;
+export const cpdColorBgSuccessHovered: string;
+export const cpdColorBgSuccessPressed: string;
 export const cpdColorBgInfoSubtle: string;
 export const cpdColorBgDecorative1: string;
 export const cpdColorBgDecorative2: string;
@@ -670,6 +676,7 @@ export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
 export const cpdColorBgAccentSelected: string;
+export const cpdColorBgAccentSubtle: string;
 export const cpdColorBgBadgeAccent: string;
 export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgBadgeDefault: string;
@@ -686,6 +693,7 @@ export const cpdColorBorderCriticalPrimary: string;
 export const cpdColorBorderCriticalHovered: string;
 export const cpdColorBorderCriticalSubtle: string;
 export const cpdColorBorderSuccessSubtle: string;
+export const cpdColorBorderSuccessPrimary: string;
 export const cpdColorBorderInfoSubtle: string;
 export const cpdColorBorderAccentSubtle: string;
 export const cpdColorBorderAccentPrimary: string;
@@ -704,6 +712,7 @@ export const cpdColorIconCriticalPrimary: string;
 export const cpdColorIconSuccessPrimary: string;
 export const cpdColorIconInfoPrimary: string;
 export const cpdColorIconOnSolidPrimary: string;
+export const cpdColorIconWarningPrimary: string;
 export const cpdColorGradientSubtleStop1: string;
 export const cpdColorGradientSubtleStop2: string;
 export const cpdColorGradientSubtleStop3: string;

package/assets/web/js/cpdLightHc.js

@@ -654,6 +654,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 +668,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 +690,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 +704,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 +721,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 +740,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/crop.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M6 2a1 1 0 0 1 1 1v13a1 1 0 0 0 1 1h13a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2H8a3 3 0 0 1-3-3V7H3a1 1 0 0 1 0-2h2V3a1 1 0 0 1 1-1"/><path d="M16 5a3 3 0 0 1 3 3v7h-2V8a1 1 0 0 0-1-1H9V5z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M6 4a1 1 0 0 0-1 1v2H3a1 1 0 1 0 0 2h2v8a3 3 0 0 0 3 3h8v2a1 1 0 0 0 2 0v-2h2a1 1 0 1 0 0-2h-2v-8a3 3 0 0 0-3-3H7V5a1 1 0 0 0-1-1m9 5a1 1 0 0 1 1 1v8H8a1 1 0 0 1-1-1V9z" clip-rule="evenodd"/><path d="M15.707.293a1 1 0 0 0-1.414 0l-2 2a1 1 0 0 0 0 1.414l2 2a1 1 0 1 0 1.414-1.414l-.275-.276A6 6 0 0 1 21 10a1 1 0 1 0 2 0 8 8 0 0 0-7.596-7.99l.303-.303a1 1 0 0 0 0-1.414"/></svg>

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "10.2.1",
+  "version": "10.2.3",
   "description": "Compound design tokens",
+  "packageManager": "pnpm@11.9.0+sha512.bd682d5d03fe525ef7c9fd6780c6884d1e756ac4c9c9fe00c538782824310dcf90e3ddc4f53835f06dfaebd5085e41855e0bcbb3b60de2ac5bbab89e5036f03b",
   "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",
@@ -61,12 +62,13 @@
     "@babel/types": "^7.24.7",
     "@biomejs/biome": "^2.0.0",
     "@capsizecss/core": "^4.1.2",
-    "@capsizecss/metrics": "^3.3.0",
+    "@capsizecss/metrics": "^4.0.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@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",
@@ -85,7 +87,6 @@
     "vite": "^8.0.0",
     "zod": "^4.0.0"
   },
-  "dependencies": {},
   "peerDependencies": {
     "@types/react": "*",
     "react": "^17 || ^18 || ^19.0.0"