@purpur/library 9.1.3 → 9.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpur/library",
-  "version": "9.1.3",
+  "version": "9.2.1",
   "license": "AGPL-3.0-only",
   "sideEffects": [
     "*.css",
@@ -87,92 +87,94 @@
   },
   "source": "src/library.ts",
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.52.8",
-    "@microsoft/rush-lib": "5.171.0",
+    "@microsoft/api-extractor": "7.58.7",
+    "@microsoft/rush-lib": "5.175.1",
     "@storybook/react-vite": "10.3.1",
-    "@testing-library/dom": "~10.4.1",
+    "@testing-library/dom": "10.4.1",
     "@types/node": "24.10.9",
-    "change-case": "~5.4.4",
+    "change-case": "5.4.4",
     "eslint": "9.39.2",
-    "fs-extra": "~11.3.0",
+    "fs-extra": "11.3.4",
     "lint-staged": "16.2.6",
-    "prettier": "~2.8.8",
-    "react-dom": "^19.2.1",
-    "react": "^19.2.1",
+    "prettier": "2.8.8",
+    "react-dom": "19.2.4",
+    "react": "19.2.4",
     "storybook": "10.3.1",
-    "tsx": "^4.20.6",
-    "typescript": "^5.9.3",
+    "tsx": "4.21.0",
+    "typescript": "5.9.3",
     "vite-plugin-dts": "4.5.4",
-    "vite-plugin-static-copy": "~3.1.4",
-    "vite": "^7.2.2",
-    "shx": "~0.4.0",
+    "vite-plugin-static-copy": "3.1.6",
+    "vite": "7.3.2",
+    "shx": "0.4.0",
     "@purpur/accordion": "8.21.0",
-    "@purpur/alert-badge": "8.21.0",
     "@purpur/action": "8.21.0",
+    "@purpur/alert-badge": "8.21.0",
     "@purpur/badge": "8.21.0",
     "@purpur/autocomplete": "8.21.0",
     "@purpur/breadcrumbs": "8.21.0",
     "@purpur/button": "8.21.0",
-    "@purpur/card": "8.21.0",
-    "@purpur/checkbox": "8.21.0",
     "@purpur/calendar": "8.21.0",
+    "@purpur/checkbox": "8.21.0",
+    "@purpur/card": "8.21.0",
     "@purpur/chip-group": "8.21.0",
-    "@purpur/color-dot": "8.21.0",
     "@purpur/common-types": "8.21.0",
-    "@purpur/component-rig": "1.0.0",
+    "@purpur/color-dot": "8.21.0",
     "@purpur/container": "8.21.0",
-    "@purpur/countdown": "8.21.0",
+    "@purpur/component-rig": "1.0.0",
     "@purpur/content-block": "8.21.0",
-    "@purpur/counter-badge": "8.21.0",
+    "@purpur/countdown": "8.21.0",
     "@purpur/cta-link": "8.21.0",
     "@purpur/date-field": "8.21.0",
+    "@purpur/counter-badge": "8.21.0",
     "@purpur/date-picker": "8.21.0",
-    "@purpur/dismissable-chip-group": "8.21.0",
     "@purpur/drawer": "8.21.0",
+    "@purpur/dismissable-chip-group": "8.21.0",
+    "@purpur/field-helper-text": "8.21.0",
     "@purpur/field-error-text": "8.21.0",
-    "@purpur/grid": "8.21.0",
-    "@purpur/footer": "8.21.0",
     "@purpur/heading": "8.21.0",
+    "@purpur/footer": "8.21.0",
     "@purpur/hero-banner": "8.21.0",
+    "@purpur/grid": "8.21.0",
     "@purpur/icon": "8.21.0",
-    "@purpur/field-helper-text": "8.21.0",
     "@purpur/illustrative-icon": "8.21.0",
-    "@purpur/listbox": "8.21.0",
     "@purpur/link": "8.21.0",
     "@purpur/label": "8.21.0",
+    "@purpur/listbox": "8.21.0",
     "@purpur/logo": "8.21.0",
-    "@purpur/modal": "8.21.0",
     "@purpur/notification-banner": "8.21.0",
-    "@purpur/notification": "8.21.0",
-    "@purpur/pagination": "8.21.0",
+    "@purpur/modal": "8.21.0",
     "@purpur/paragraph": "8.21.0",
-    "@purpur/popover": "8.21.0",
+    "@purpur/pagination": "8.21.0",
     "@purpur/password-field": "8.21.0",
+    "@purpur/popover": "8.21.0",
+    "@purpur/notification": "8.21.0",
     "@purpur/product-card": "8.21.0",
-    "@purpur/promotion-card": "8.21.0",
     "@purpur/quantity-selector": "8.21.0",
-    "@purpur/radio-button-group": "8.21.0",
+    "@purpur/promotion-card": "8.21.0",
     "@purpur/radio-card-group": "8.21.0",
-    "@purpur/search-field": "8.21.0",
+    "@purpur/radio-button-group": "8.21.0",
     "@purpur/select": "8.21.0",
-    "@purpur/skeleton": "8.21.0",
     "@purpur/rich-text": "8.21.0",
+    "@purpur/search-field": "8.21.0",
+    "@purpur/skeleton": "8.21.0",
     "@purpur/slider": "8.21.0",
-    "@purpur/spacer": "8.21.0",
     "@purpur/spinner": "8.21.0",
+    "@purpur/spacer": "8.21.0",
     "@purpur/stepper": "8.21.0",
     "@purpur/table": "8.21.0",
-    "@purpur/tabs": "8.21.0",
     "@purpur/text-area": "8.21.0",
-    "@purpur/text-field": "8.21.0",
     "@purpur/text-spacing": "8.21.0",
+    "@purpur/text-field": "8.21.0",
+    "@purpur/tabs": "8.21.0",
     "@purpur/toggle": "8.21.0",
     "@purpur/theme": "8.21.0",
+    "@purpur/tooltip": "8.21.0",
     "@purpur/tokens": "8.21.0",
     "@purpur/visually-hidden": "8.21.0",
-    "@purpur/tooltip": "8.21.0",
-    "@purpur/chat-field": "9.1.3",
-    "@purpur/dropdown": "0.1.0"
+    "@purpur/chat-field": "9.2.1",
+    "@purpur/comparison-table": "8.21.0",
+    "@purpur/dropdown": "0.1.0",
+    "@purpur/carousel": "8.21.0"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/aliases.ts

@@ -41,6 +41,10 @@ export const aliases = [
     find: /^@purpur\/card$/,
     replacement: resolve(__dirname, "../../../components/card/src/card.tsx"),
   },
+  {
+    find: /^@purpur\/carousel$/,
+    replacement: resolve(__dirname, "../../../components/carousel/src/carousel.tsx"),
+  },
   {
     find: /^@purpur\/chat-field$/,
     replacement: resolve(__dirname, "../../../components/chat-field/src/chat-field.tsx"),
@@ -57,6 +61,13 @@ export const aliases = [
     find: /^@purpur\/color-dot$/,
     replacement: resolve(__dirname, "../../../components/color-dot/src/color-dot.tsx"),
   },
+  {
+    find: /^@purpur\/comparison-table$/,
+    replacement: resolve(
+      __dirname,
+      "../../../components/comparison-table/src/comparison-table.tsx"
+    ),
+  },
   {
     find: /^@purpur\/container$/,
     replacement: resolve(__dirname, "../../../components/container/src/container.tsx"),

package/src/carousel.ts

@@ -0,0 +1,6 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually
+ */
+
+export * from "@purpur/carousel";

package/src/comparison-table.ts

@@ -0,0 +1,6 @@
+/**
+ * ⚠️ WARNING ⚠️
+ * This file is automatically generated, do not edit it manually
+ */
+
+export * from "@purpur/comparison-table";

package/src/entries.js

@@ -12,10 +12,12 @@ export const entries = [
   "button",
   "calendar",
   "card",
+  "carousel",
   "chat-field",
   "checkbox",
   "chip-group",
   "color-dot",
+  "comparison-table",
   "container",
   "content-block",
   "countdown",

package/src/library.ts

@@ -29,6 +29,8 @@ export * from "@purpur/calendar";
 
 export * from "@purpur/card";
 
+export * from "@purpur/carousel";
+
 export * from "@purpur/chat-field";
 
 export * from "@purpur/checkbox";
@@ -37,6 +39,8 @@ export * from "@purpur/chip-group";
 
 export * from "@purpur/color-dot";
 
+export * from "@purpur/comparison-table";
+
 export * from "@purpur/container";
 
 export * from "@purpur/content-block";

package/tokens/color/variables.css

@@ -134,14 +134,14 @@
   --purpur-color-text-default-negative: var(--purpur-color-transparent-white-950);
   --purpur-color-text-medium-negative: var(--purpur-color-transparent-white-700);
   --purpur-color-text-weak-negative: var(--purpur-color-transparent-white-400);
-  --purpur-color-text-interactive-primary: var(--purpur-color-purple-600);
-  --purpur-color-text-interactive-primary-hover: var(--purpur-color-purple-700);
-  --purpur-color-text-interactive-primary-active: var(--purpur-color-purple-800);
+  --purpur-color-text-interactive-primary: var(--purpur-color-purple-700);
+  --purpur-color-text-interactive-primary-hover: var(--purpur-color-purple-800);
+  --purpur-color-text-interactive-primary-active: var(--purpur-color-purple-900);
   --purpur-color-text-interactive-on-primary: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-primary-negative: var(--purpur-color-purple-800);
-  --purpur-color-text-interactive-primary-negative: var(--purpur-color-purple-200);
-  --purpur-color-text-interactive-primary-hover-negative: var(--purpur-color-purple-100);
-  --purpur-color-text-interactive-primary-active-negative: var(--purpur-color-purple-50);
+  --purpur-color-text-interactive-primary-negative: var(--purpur-color-purple-100);
+  --purpur-color-text-interactive-primary-hover-negative: var(--purpur-color-purple-50);
+  --purpur-color-text-interactive-primary-active-negative: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-expressive: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-expressive-negative: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-expressive-hover: var(--purpur-color-functional-white);
@@ -235,12 +235,12 @@
   --purpur-color-border-weak: var(--purpur-color-transparent-black-150);
   --purpur-color-border-weak-negative: var(--purpur-color-transparent-white-150);
   --purpur-color-border-interactive-focus: var(--purpur-color-purple-500);
-  --purpur-color-border-interactive-primary: var(--purpur-color-purple-600);
-  --purpur-color-border-interactive-primary-negative: var(--purpur-color-purple-200);
-  --purpur-color-border-interactive-primary-hover: var(--purpur-color-purple-700);
-  --purpur-color-border-interactive-primary-active: var(--purpur-color-purple-800);
-  --purpur-color-border-interactive-primary-hover-negative: var(--purpur-color-purple-100);
-  --purpur-color-border-interactive-primary-active-negative: var(--purpur-color-purple-50);
+  --purpur-color-border-interactive-primary: var(--purpur-color-purple-700);
+  --purpur-color-border-interactive-primary-negative: var(--purpur-color-purple-100);
+  --purpur-color-border-interactive-primary-hover: var(--purpur-color-purple-800);
+  --purpur-color-border-interactive-primary-active: var(--purpur-color-purple-900);
+  --purpur-color-border-interactive-primary-hover-negative: var(--purpur-color-purple-50);
+  --purpur-color-border-interactive-primary-active-negative: var(--purpur-color-functional-white);
   --purpur-color-border-interactive-expressive: var(--purpur-color-purple-550);
   --purpur-color-border-interactive-selected: var(--purpur-color-purple-550);
   --purpur-color-border-interactive-subtle: var(--purpur-color-transparent-black-400);

package/tokens/color/variables.dark.css

@@ -133,14 +133,14 @@
   --purpur-color-text-default-negative: var(--purpur-color-transparent-black-800);
   --purpur-color-text-medium-negative: var(--purpur-color-transparent-black-500);
   --purpur-color-text-weak-negative: var(--purpur-color-transparent-black-400);
-  --purpur-color-text-interactive-primary: var(--purpur-color-purple-200);
-  --purpur-color-text-interactive-primary-hover: var(--purpur-color-purple-100);
-  --purpur-color-text-interactive-primary-active: var(--purpur-color-purple-50);
+  --purpur-color-text-interactive-primary: var(--purpur-color-purple-100);
+  --purpur-color-text-interactive-primary-hover: var(--purpur-color-purple-50);
+  --purpur-color-text-interactive-primary-active: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-primary: var(--purpur-color-purple-800);
   --purpur-color-text-interactive-on-primary-negative: var(--purpur-color-functional-white);
-  --purpur-color-text-interactive-primary-negative: var(--purpur-color-purple-600);
-  --purpur-color-text-interactive-primary-hover-negative: var(--purpur-color-purple-700);
-  --purpur-color-text-interactive-primary-active-negative: var(--purpur-color-purple-800);
+  --purpur-color-text-interactive-primary-negative: var(--purpur-color-purple-700);
+  --purpur-color-text-interactive-primary-hover-negative: var(--purpur-color-purple-800);
+  --purpur-color-text-interactive-primary-active-negative: var(--purpur-color-purple-900);
   --purpur-color-text-interactive-on-expressive: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-expressive-negative: var(--purpur-color-functional-white);
   --purpur-color-text-interactive-on-expressive-hover: var(--purpur-color-purple-900);
@@ -235,12 +235,12 @@
   --purpur-color-border-weak: var(--purpur-color-transparent-white-150);
   --purpur-color-border-weak-negative: var(--purpur-color-transparent-black-150);
   --purpur-color-border-interactive-focus: var(--purpur-color-purple-400);
-  --purpur-color-border-interactive-primary: var(--purpur-color-purple-200);
-  --purpur-color-border-interactive-primary-negative: var(--purpur-color-purple-600);
-  --purpur-color-border-interactive-primary-hover: var(--purpur-color-purple-100);
-  --purpur-color-border-interactive-primary-active: var(--purpur-color-purple-50);
-  --purpur-color-border-interactive-primary-hover-negative: var(--purpur-color-purple-700);
-  --purpur-color-border-interactive-primary-active-negative: var(--purpur-color-purple-800);
+  --purpur-color-border-interactive-primary: var(--purpur-color-purple-100);
+  --purpur-color-border-interactive-primary-negative: var(--purpur-color-purple-700);
+  --purpur-color-border-interactive-primary-hover: var(--purpur-color-purple-50);
+  --purpur-color-border-interactive-primary-active: var(--purpur-color-functional-white);
+  --purpur-color-border-interactive-primary-hover-negative: var(--purpur-color-purple-800);
+  --purpur-color-border-interactive-primary-active-negative: var(--purpur-color-purple-900);
   --purpur-color-border-interactive-expressive: var(--purpur-color-purple-550);
   --purpur-color-border-interactive-selected: var(--purpur-color-purple-300);
   --purpur-color-border-interactive-subtle: var(--purpur-color-transparent-white-400);
@@ -253,7 +253,7 @@
   --purpur-color-border-status-info: var(--purpur-color-blue-400);
   --purpur-color-border-status-success: var(--purpur-color-green-400);
   --purpur-color-border-status-success-negative: var(--purpur-color-green-500);
-  --purpur-color-overlay-default: var(--purpur-color-transparent-black-300);
+  --purpur-color-overlay-default: var(--purpur-color-transparent-black-700);
   --purpur-color-gradient-ai-bottom: var(--purpur-color-blue-300);
   --purpur-color-gradient-ai-bottom-negative: var(--purpur-color-blue-400);
   --purpur-color-gradient-ai-top: var(--purpur-color-purple-300);

package/tokens/color/variables.dark.js

@@ -132,14 +132,14 @@ export const purpurColorTextWeak = "rgba(255, 255, 255, 0.37)";
 export const purpurColorTextDefaultNegative = "rgba(0, 0, 0, 0.8)";
 export const purpurColorTextMediumNegative = "rgba(0, 0, 0, 0.54)";
 export const purpurColorTextWeakNegative = "rgba(0, 0, 0, 0.44)";
-export const purpurColorTextInteractivePrimary = "#e4b6fb";
-export const purpurColorTextInteractivePrimaryHover = "#f4e0ff";
-export const purpurColorTextInteractivePrimaryActive = "#faf0ff";
+export const purpurColorTextInteractivePrimary = "#f4e0ff";
+export const purpurColorTextInteractivePrimaryHover = "#faf0ff";
+export const purpurColorTextInteractivePrimaryActive = "#ffffff";
 export const purpurColorTextInteractiveOnPrimary = "#4e0174";
 export const purpurColorTextInteractiveOnPrimaryNegative = "#ffffff";
-export const purpurColorTextInteractivePrimaryNegative = "#8c07d0";
-export const purpurColorTextInteractivePrimaryHoverNegative = "#6d02a3";
-export const purpurColorTextInteractivePrimaryActiveNegative = "#4e0174";
+export const purpurColorTextInteractivePrimaryNegative = "#6d02a3";
+export const purpurColorTextInteractivePrimaryHoverNegative = "#4e0174";
+export const purpurColorTextInteractivePrimaryActiveNegative = "#29003e";
 export const purpurColorTextInteractiveOnExpressive = "#ffffff";
 export const purpurColorTextInteractiveOnExpressiveNegative = "#ffffff";
 export const purpurColorTextInteractiveOnExpressiveHover = "#29003e";
@@ -226,12 +226,12 @@ export const purpurColorBorderStrongNegative = "rgba(0, 0, 0, 0.54)";
 export const purpurColorBorderWeak = "rgba(255, 255, 255, 0.16)";
 export const purpurColorBorderWeakNegative = "rgba(0, 0, 0, 0.16)";
 export const purpurColorBorderInteractiveFocus = "#c461f7";
-export const purpurColorBorderInteractivePrimary = "#e4b6fb";
-export const purpurColorBorderInteractivePrimaryNegative = "#8c07d0";
-export const purpurColorBorderInteractivePrimaryHover = "#f4e0ff";
-export const purpurColorBorderInteractivePrimaryActive = "#faf0ff";
-export const purpurColorBorderInteractivePrimaryHoverNegative = "#6d02a3";
-export const purpurColorBorderInteractivePrimaryActiveNegative = "#4e0174";
+export const purpurColorBorderInteractivePrimary = "#f4e0ff";
+export const purpurColorBorderInteractivePrimaryNegative = "#6d02a3";
+export const purpurColorBorderInteractivePrimaryHover = "#faf0ff";
+export const purpurColorBorderInteractivePrimaryActive = "#ffffff";
+export const purpurColorBorderInteractivePrimaryHoverNegative = "#4e0174";
+export const purpurColorBorderInteractivePrimaryActiveNegative = "#29003e";
 export const purpurColorBorderInteractiveExpressive = "#990ae3";
 export const purpurColorBorderInteractiveSelected = "#d58df9";
 export const purpurColorBorderInteractiveSubtle = "rgba(255, 255, 255, 0.37)";
@@ -244,7 +244,7 @@ export const purpurColorBorderStatusWarning = "#f39200";
 export const purpurColorBorderStatusInfo = "#3694d3";
 export const purpurColorBorderStatusSuccess = "#1fa15e";
 export const purpurColorBorderStatusSuccessNegative = "#018842";
-export const purpurColorOverlayDefault = "rgba(0, 0, 0, 0.33)";
+export const purpurColorOverlayDefault = "rgba(0, 0, 0, 0.71)";
 export const purpurColorGradientAiBottom = "#62b2e7";
 export const purpurColorGradientAiBottomNegative = "#3694d3";
 export const purpurColorGradientAiTop = "#d58df9";

package/tokens/color/variables.dark.json

@@ -160,14 +160,14 @@
       "medium-negative": "rgba(0, 0, 0, 0.54)",
       "weak-negative": "rgba(0, 0, 0, 0.44)",
       "interactive": {
-        "primary": "#e4b6fb",
-        "primary-hover": "#f4e0ff",
-        "primary-active": "#faf0ff",
+        "primary": "#f4e0ff",
+        "primary-hover": "#faf0ff",
+        "primary-active": "#ffffff",
         "on-primary": "#4e0174",
         "on-primary-negative": "#ffffff",
-        "primary-negative": "#8c07d0",
-        "primary-hover-negative": "#6d02a3",
-        "primary-active-negative": "#4e0174",
+        "primary-negative": "#6d02a3",
+        "primary-hover-negative": "#4e0174",
+        "primary-active-negative": "#29003e",
         "on-expressive": "#ffffff",
         "on-expressive-negative": "#ffffff",
         "on-expressive-hover": "#29003e",
@@ -270,12 +270,12 @@
       "weak-negative": "rgba(0, 0, 0, 0.16)",
       "interactive": {
         "focus": "#c461f7",
-        "primary": "#e4b6fb",
-        "primary-negative": "#8c07d0",
-        "primary-hover": "#f4e0ff",
-        "primary-active": "#faf0ff",
-        "primary-hover-negative": "#6d02a3",
-        "primary-active-negative": "#4e0174",
+        "primary": "#f4e0ff",
+        "primary-negative": "#6d02a3",
+        "primary-hover": "#faf0ff",
+        "primary-active": "#ffffff",
+        "primary-hover-negative": "#4e0174",
+        "primary-active-negative": "#29003e",
         "expressive": "#990ae3",
         "selected": "#d58df9",
         "subtle": "rgba(255, 255, 255, 0.37)",
@@ -293,7 +293,7 @@
       }
     },
     "overlay": {
-      "default": "rgba(0, 0, 0, 0.33)"
+      "default": "rgba(0, 0, 0, 0.71)"
     },
     "gradient-ai": {
       "bottom": "#62b2e7",

package/tokens/color/variables.dark.scss

@@ -132,14 +132,14 @@ $purpur-color-text-weak: $purpur-color-transparent-white-400;
 $purpur-color-text-default-negative: $purpur-color-transparent-black-800;
 $purpur-color-text-medium-negative: $purpur-color-transparent-black-500;
 $purpur-color-text-weak-negative: $purpur-color-transparent-black-400;
-$purpur-color-text-interactive-primary: $purpur-color-purple-200;
-$purpur-color-text-interactive-primary-hover: $purpur-color-purple-100;
-$purpur-color-text-interactive-primary-active: $purpur-color-purple-50;
+$purpur-color-text-interactive-primary: $purpur-color-purple-100;
+$purpur-color-text-interactive-primary-hover: $purpur-color-purple-50;
+$purpur-color-text-interactive-primary-active: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-primary: $purpur-color-purple-800;
 $purpur-color-text-interactive-on-primary-negative: $purpur-color-functional-white;
-$purpur-color-text-interactive-primary-negative: $purpur-color-purple-600;
-$purpur-color-text-interactive-primary-hover-negative: $purpur-color-purple-700;
-$purpur-color-text-interactive-primary-active-negative: $purpur-color-purple-800;
+$purpur-color-text-interactive-primary-negative: $purpur-color-purple-700;
+$purpur-color-text-interactive-primary-hover-negative: $purpur-color-purple-800;
+$purpur-color-text-interactive-primary-active-negative: $purpur-color-purple-900;
 $purpur-color-text-interactive-on-expressive: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-expressive-negative: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-expressive-hover: $purpur-color-purple-900;
@@ -226,12 +226,12 @@ $purpur-color-border-strong-negative: $purpur-color-transparent-black-500;
 $purpur-color-border-weak: $purpur-color-transparent-white-150;
 $purpur-color-border-weak-negative: $purpur-color-transparent-black-150;
 $purpur-color-border-interactive-focus: $purpur-color-purple-400;
-$purpur-color-border-interactive-primary: $purpur-color-purple-200;
-$purpur-color-border-interactive-primary-negative: $purpur-color-purple-600;
-$purpur-color-border-interactive-primary-hover: $purpur-color-purple-100;
-$purpur-color-border-interactive-primary-active: $purpur-color-purple-50;
-$purpur-color-border-interactive-primary-hover-negative: $purpur-color-purple-700;
-$purpur-color-border-interactive-primary-active-negative: $purpur-color-purple-800;
+$purpur-color-border-interactive-primary: $purpur-color-purple-100;
+$purpur-color-border-interactive-primary-negative: $purpur-color-purple-700;
+$purpur-color-border-interactive-primary-hover: $purpur-color-purple-50;
+$purpur-color-border-interactive-primary-active: $purpur-color-functional-white;
+$purpur-color-border-interactive-primary-hover-negative: $purpur-color-purple-800;
+$purpur-color-border-interactive-primary-active-negative: $purpur-color-purple-900;
 $purpur-color-border-interactive-expressive: $purpur-color-purple-550;
 $purpur-color-border-interactive-selected: $purpur-color-purple-300;
 $purpur-color-border-interactive-subtle: $purpur-color-transparent-white-400;
@@ -244,7 +244,7 @@ $purpur-color-border-status-warning: $purpur-color-orange-300;
 $purpur-color-border-status-info: $purpur-color-blue-400;
 $purpur-color-border-status-success: $purpur-color-green-400;
 $purpur-color-border-status-success-negative: $purpur-color-green-500;
-$purpur-color-overlay-default: $purpur-color-transparent-black-300;
+$purpur-color-overlay-default: $purpur-color-transparent-black-700;
 $purpur-color-gradient-ai-bottom: $purpur-color-blue-300;
 $purpur-color-gradient-ai-bottom-negative: $purpur-color-blue-400;
 $purpur-color-gradient-ai-top: $purpur-color-purple-300;

package/tokens/color/variables.js

@@ -132,14 +132,14 @@ export const purpurColorTextWeak = "rgba(0, 0, 0, 0.44)";
 export const purpurColorTextDefaultNegative = "rgba(255, 255, 255, 0.95)";
 export const purpurColorTextMediumNegative = "rgba(255, 255, 255, 0.66)";
 export const purpurColorTextWeakNegative = "rgba(255, 255, 255, 0.37)";
-export const purpurColorTextInteractivePrimary = "#8c07d0";
-export const purpurColorTextInteractivePrimaryHover = "#6d02a3";
-export const purpurColorTextInteractivePrimaryActive = "#4e0174";
+export const purpurColorTextInteractivePrimary = "#6d02a3";
+export const purpurColorTextInteractivePrimaryHover = "#4e0174";
+export const purpurColorTextInteractivePrimaryActive = "#29003e";
 export const purpurColorTextInteractiveOnPrimary = "#ffffff";
 export const purpurColorTextInteractiveOnPrimaryNegative = "#4e0174";
-export const purpurColorTextInteractivePrimaryNegative = "#e4b6fb";
-export const purpurColorTextInteractivePrimaryHoverNegative = "#f4e0ff";
-export const purpurColorTextInteractivePrimaryActiveNegative = "#faf0ff";
+export const purpurColorTextInteractivePrimaryNegative = "#f4e0ff";
+export const purpurColorTextInteractivePrimaryHoverNegative = "#faf0ff";
+export const purpurColorTextInteractivePrimaryActiveNegative = "#ffffff";
 export const purpurColorTextInteractiveOnExpressive = "#ffffff";
 export const purpurColorTextInteractiveOnExpressiveNegative = "#ffffff";
 export const purpurColorTextInteractiveOnExpressiveHover = "#ffffff";
@@ -227,12 +227,12 @@ export const purpurColorBorderStrongNegative = "rgba(255, 255, 255, 0.46)";
 export const purpurColorBorderWeak = "rgba(0, 0, 0, 0.16)";
 export const purpurColorBorderWeakNegative = "rgba(255, 255, 255, 0.16)";
 export const purpurColorBorderInteractiveFocus = "#b12df4";
-export const purpurColorBorderInteractivePrimary = "#8c07d0";
-export const purpurColorBorderInteractivePrimaryNegative = "#e4b6fb";
-export const purpurColorBorderInteractivePrimaryHover = "#6d02a3";
-export const purpurColorBorderInteractivePrimaryActive = "#4e0174";
-export const purpurColorBorderInteractivePrimaryHoverNegative = "#f4e0ff";
-export const purpurColorBorderInteractivePrimaryActiveNegative = "#faf0ff";
+export const purpurColorBorderInteractivePrimary = "#6d02a3";
+export const purpurColorBorderInteractivePrimaryNegative = "#f4e0ff";
+export const purpurColorBorderInteractivePrimaryHover = "#4e0174";
+export const purpurColorBorderInteractivePrimaryActive = "#29003e";
+export const purpurColorBorderInteractivePrimaryHoverNegative = "#faf0ff";
+export const purpurColorBorderInteractivePrimaryActiveNegative = "#ffffff";
 export const purpurColorBorderInteractiveExpressive = "#990ae3";
 export const purpurColorBorderInteractiveSelected = "#990ae3";
 export const purpurColorBorderInteractiveSubtle = "rgba(0, 0, 0, 0.44)";

package/tokens/color/variables.json

@@ -160,14 +160,14 @@
       "medium-negative": "rgba(255, 255, 255, 0.66)",
       "weak-negative": "rgba(255, 255, 255, 0.37)",
       "interactive": {
-        "primary": "#8c07d0",
-        "primary-hover": "#6d02a3",
-        "primary-active": "#4e0174",
+        "primary": "#6d02a3",
+        "primary-hover": "#4e0174",
+        "primary-active": "#29003e",
         "on-primary": "#ffffff",
         "on-primary-negative": "#4e0174",
-        "primary-negative": "#e4b6fb",
-        "primary-hover-negative": "#f4e0ff",
-        "primary-active-negative": "#faf0ff",
+        "primary-negative": "#f4e0ff",
+        "primary-hover-negative": "#faf0ff",
+        "primary-active-negative": "#ffffff",
         "on-expressive": "#ffffff",
         "on-expressive-negative": "#ffffff",
         "on-expressive-hover": "#ffffff",
@@ -271,12 +271,12 @@
       "weak-negative": "rgba(255, 255, 255, 0.16)",
       "interactive": {
         "focus": "#b12df4",
-        "primary": "#8c07d0",
-        "primary-negative": "#e4b6fb",
-        "primary-hover": "#6d02a3",
-        "primary-active": "#4e0174",
-        "primary-hover-negative": "#f4e0ff",
-        "primary-active-negative": "#faf0ff",
+        "primary": "#6d02a3",
+        "primary-negative": "#f4e0ff",
+        "primary-hover": "#4e0174",
+        "primary-active": "#29003e",
+        "primary-hover-negative": "#faf0ff",
+        "primary-active-negative": "#ffffff",
         "expressive": "#990ae3",
         "selected": "#990ae3",
         "subtle": "rgba(0, 0, 0, 0.44)",

package/tokens/color/variables.scss

@@ -132,14 +132,14 @@ $purpur-color-text-weak: $purpur-color-transparent-black-400;
 $purpur-color-text-default-negative: $purpur-color-transparent-white-950;
 $purpur-color-text-medium-negative: $purpur-color-transparent-white-700;
 $purpur-color-text-weak-negative: $purpur-color-transparent-white-400;
-$purpur-color-text-interactive-primary: $purpur-color-purple-600;
-$purpur-color-text-interactive-primary-hover: $purpur-color-purple-700;
-$purpur-color-text-interactive-primary-active: $purpur-color-purple-800;
+$purpur-color-text-interactive-primary: $purpur-color-purple-700;
+$purpur-color-text-interactive-primary-hover: $purpur-color-purple-800;
+$purpur-color-text-interactive-primary-active: $purpur-color-purple-900;
 $purpur-color-text-interactive-on-primary: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-primary-negative: $purpur-color-purple-800;
-$purpur-color-text-interactive-primary-negative: $purpur-color-purple-200;
-$purpur-color-text-interactive-primary-hover-negative: $purpur-color-purple-100;
-$purpur-color-text-interactive-primary-active-negative: $purpur-color-purple-50;
+$purpur-color-text-interactive-primary-negative: $purpur-color-purple-100;
+$purpur-color-text-interactive-primary-hover-negative: $purpur-color-purple-50;
+$purpur-color-text-interactive-primary-active-negative: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-expressive: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-expressive-negative: $purpur-color-functional-white;
 $purpur-color-text-interactive-on-expressive-hover: $purpur-color-functional-white;
@@ -227,12 +227,12 @@ $purpur-color-border-strong-negative: $purpur-color-transparent-white-500;
 $purpur-color-border-weak: $purpur-color-transparent-black-150;
 $purpur-color-border-weak-negative: $purpur-color-transparent-white-150;
 $purpur-color-border-interactive-focus: $purpur-color-purple-500;
-$purpur-color-border-interactive-primary: $purpur-color-purple-600;
-$purpur-color-border-interactive-primary-negative: $purpur-color-purple-200;
-$purpur-color-border-interactive-primary-hover: $purpur-color-purple-700;
-$purpur-color-border-interactive-primary-active: $purpur-color-purple-800;
-$purpur-color-border-interactive-primary-hover-negative: $purpur-color-purple-100;
-$purpur-color-border-interactive-primary-active-negative: $purpur-color-purple-50;
+$purpur-color-border-interactive-primary: $purpur-color-purple-700;
+$purpur-color-border-interactive-primary-negative: $purpur-color-purple-100;
+$purpur-color-border-interactive-primary-hover: $purpur-color-purple-800;
+$purpur-color-border-interactive-primary-active: $purpur-color-purple-900;
+$purpur-color-border-interactive-primary-hover-negative: $purpur-color-purple-50;
+$purpur-color-border-interactive-primary-active-negative: $purpur-color-functional-white;
 $purpur-color-border-interactive-expressive: $purpur-color-purple-550;
 $purpur-color-border-interactive-selected: $purpur-color-purple-550;
 $purpur-color-border-interactive-subtle: $purpur-color-transparent-black-400;

package/tokens/gradient/variables.dark.js

@@ -1,7 +1,7 @@
 export const purpurGradientAiTextInteractivePrimary =
-  "linear-gradient(289deg, #62b2e7 -13%, #e4b6fb 58%)";
+  "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)";
 export const purpurGradientAiTextInteractivePrimaryNegative =
-  "linear-gradient(289deg, #3694d3 -13%, #8c07d0 58%)";
+  "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)";
 export const purpurGradientAiBackgroundInteractiveExpressive =
   "linear-gradient(291deg, #62b2e7 -15%, #990ae3 44%)";
 export const purpurGradientAiBackgroundInteractiveExpressiveNegative =
@@ -13,6 +13,6 @@ export const purpurGradientAiBackgroundInteractivePrimaryNegative =
 export const purpurGradientAiBackgroundPrimaryNegative =
   "linear-gradient(291deg, #b12df4, #ffffff, #3694d3)";
 export const purpurGradientAiBorderInteractivePrimary =
-  "linear-gradient(289deg, #62b2e7 -13%, #e4b6fb 58%)";
+  "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)";
 export const purpurGradientAiBorderInteractivePrimaryNegative =
-  "linear-gradient(289deg, #3694d3 -13%, #8c07d0 58%)";
+  "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)";

package/tokens/gradient/variables.dark.json

@@ -3,8 +3,8 @@
     "ai": {
       "text": {
         "interactive": {
-          "primary": "linear-gradient(289deg, #62b2e7 -13%, #e4b6fb 58%)",
-          "primary-negative": "linear-gradient(289deg, #3694d3 -13%, #8c07d0 58%)"
+          "primary": "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)",
+          "primary-negative": "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)"
         }
       },
       "background": {
@@ -18,8 +18,8 @@
       },
       "border": {
         "interactive": {
-          "primary": "linear-gradient(289deg, #62b2e7 -13%, #e4b6fb 58%)",
-          "primary-negative": "linear-gradient(289deg, #3694d3 -13%, #8c07d0 58%)"
+          "primary": "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)",
+          "primary-negative": "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)"
         }
       }
     }