@texturehq/edges 1.8.2 → 1.9.1

package/dist/styles/computed.css

@@ -74,7 +74,7 @@
   --control-active-opacity: 0.8;
   --control-pressed-opacity: 0.7;
 
-  --control-focus-ring-color: var(--color-neutral-black);
+  --control-focus-ring-color: var(--color-action-default);
   --control-focus-ring-color-error: var(--color-feedback-error-border);
   --control-focus-ring-color-success: var(--color-feedback-success-border);
 

package/dist/styles.css

@@ -137,9 +137,15 @@
   --color-action-primary-hover: #383ccb;
   --color-action-primary-text: #ffffff;
   --color-action-primary-light: rgba(68, 74, 225, 0.1);
+  --color-action-brand: #444ae1;
+  --color-action-brand-hover: #383ccb;
+  --color-action-brand-text: #ffffff;
   --color-action-secondary: #333333;
   --color-action-secondary-hover: #4b5563;
   --color-action-secondary-text: #ffffff;
+  --color-action-default: #333333;
+  --color-action-default-hover: #4b5563;
+  --color-action-default-text: #ffffff;
   --color-state-charging: #f3e8ff;
   --color-state-charging-border: #c084fc;
   --color-state-charging-text: #6b21a8;
@@ -198,7 +204,7 @@
   --control-text-lg: var(--text-base);
   --control-text-xl: var(--text-lg);
   --control-hover-opacity: 0.9;
-  --control-focus-ring-color: var(--color-neutral-black);
+  --control-focus-ring-color: var(--color-action-default);
   --control-focus-ring-color-error: var(--color-feedback-error-border);
   --control-transition-duration: 150ms;
   --control-transition-timing: var(--ease-in-out);
@@ -511,9 +517,15 @@
   --action-primary-background: #444ae1;
   --action-primary-hover: #363ccb;
   --action-primary-text: #ffffff;
+  --action-brand-background: #444ae1;
+  --action-brand-hover: #363ccb;
+  --action-brand-text: #ffffff;
   --action-secondary-background: #111827;
   --action-secondary-hover: #374151;
   --action-secondary-text: #ffffff;
+  --action-default-background: #111827;
+  --action-default-hover: #374151;
+  --action-default-text: #ffffff;
   --action-destructive-background: oklch(0.505 0.213 27.518);
   --action-destructive-hover: oklch(0.444 0.177 26.899);
   --action-destructive-text: #ffffff;
@@ -573,9 +585,15 @@
   --color-action-primary-hover: #6a6fcc;
   --color-action-primary-text: #ffffff;
   --color-action-primary-light: rgba(122, 142, 225, 0.15);
+  --color-action-brand: #7a8ee1;
+  --color-action-brand-hover: #6a6fcc;
+  --color-action-brand-text: #ffffff;
   --color-action-secondary: #e5e7eb;
   --color-action-secondary-hover: #f3f4f6;
   --color-action-secondary-text: #111827;
+  --color-action-default: #374151;
+  --color-action-default-hover: #4b5563;
+  --color-action-default-text: #ffffff;
   --color-state-charging: #581c87;
   --color-state-charging-border: #a855f7;
   --color-state-charging-text: #e9d5ff;
@@ -1656,6 +1674,9 @@
   .h-\[400px\] {
     height: 400px;
   }
+  .h-\[420px\] {
+    height: 420px;
+  }
   .h-\[500px\] {
     height: 500px;
   }
@@ -1713,6 +1734,9 @@
   .min-h-\[200px\] {
     min-height: 200px;
   }
+  .min-h-\[320px\] {
+    min-height: 320px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -2594,17 +2618,20 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .border-action-primary {
-    border-color: var(--color-action-primary);
+  .border-action-brand {
+    border-color: var(--color-action-brand);
   }
-  .border-action-primary\/20 {
+  .border-action-brand\/20 {
     border-color: color-mix(in srgb, #444ae1 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
+      border-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
     }
   }
-  .border-action-secondary {
-    border-color: var(--color-action-secondary);
+  .border-action-default {
+    border-color: var(--color-action-default);
+  }
+  .border-action-primary {
+    border-color: var(--color-action-primary);
   }
   .border-background-surface {
     border-color: var(--color-background-surface);
@@ -2708,9 +2735,6 @@
   .border-text-body {
     border-color: var(--color-text-body);
   }
-  .border-text-heading {
-    border-color: var(--color-text-heading);
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -2723,8 +2747,8 @@
   .border-r-transparent {
     border-right-color: transparent;
   }
-  .border-l-action-primary {
-    border-left-color: var(--color-action-primary);
+  .border-l-action-default {
+    border-left-color: var(--color-action-default);
   }
   .border-l-border-muted {
     border-left-color: var(--color-border-muted);
@@ -2741,28 +2765,43 @@
   .bg-\[var\(--skeleton-base\)\] {
     background-color: var(--skeleton-base);
   }
-  .bg-action-primary {
-    background-color: var(--color-action-primary);
-  }
-  .bg-action-primary-light {
-    background-color: var(--color-action-primary-light);
+  .bg-action-brand {
+    background-color: var(--color-action-brand);
   }
-  .bg-action-primary\/5 {
+  .bg-action-brand\/5 {
     background-color: color-mix(in srgb, #444ae1 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-action-primary) 5%, transparent);
+      background-color: color-mix(in oklab, var(--color-action-brand) 5%, transparent);
     }
   }
-  .bg-action-primary\/10 {
+  .bg-action-brand\/10 {
     background-color: color-mix(in srgb, #444ae1 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-action-primary) 10%, transparent);
+      background-color: color-mix(in oklab, var(--color-action-brand) 10%, transparent);
     }
   }
-  .bg-action-secondary\/10 {
+  .bg-action-default {
+    background-color: var(--color-action-default);
+  }
+  .bg-action-default\/5 {
+    background-color: color-mix(in srgb, #333333 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-action-default) 5%, transparent);
+    }
+  }
+  .bg-action-default\/10 {
     background-color: color-mix(in srgb, #333333 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-action-secondary) 10%, transparent);
+      background-color: color-mix(in oklab, var(--color-action-default) 10%, transparent);
+    }
+  }
+  .bg-action-primary {
+    background-color: var(--color-action-primary);
+  }
+  .bg-action-primary\/5 {
+    background-color: color-mix(in srgb, #444ae1 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-action-primary) 5%, transparent);
     }
   }
   .bg-background-body {
@@ -2885,9 +2924,6 @@
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
-  .bg-gray-700 {
-    background-color: var(--color-gray-700);
-  }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
@@ -2933,9 +2969,6 @@
   .bg-slate-700 {
     background-color: var(--color-slate-700);
   }
-  .bg-text-body {
-    background-color: var(--color-text-body);
-  }
   .bg-text-muted {
     background-color: var(--color-text-muted);
   }
@@ -3148,6 +3181,9 @@
   .px-8 {
     padding-inline: var(--spacing-8);
   }
+  .px-10 {
+    padding-inline: var(--spacing-10);
+  }
   .px-\[var\(--control-padding-lg\)\] {
     padding-inline: var(--control-padding-lg);
   }
@@ -3202,6 +3238,9 @@
   .py-12 {
     padding-block: var(--spacing-12);
   }
+  .py-16 {
+    padding-block: var(--spacing-16);
+  }
   .pt-0 {
     padding-top: var(--spacing-0);
   }
@@ -3384,6 +3423,18 @@
   .text-\[length\:var\(--control-text-xl\)\] {
     font-size: var(--control-text-xl);
   }
+  .leading-6 {
+    --tw-leading: var(--spacing-6);
+    line-height: var(--spacing-6);
+  }
+  .leading-7 {
+    --tw-leading: var(--spacing-7);
+    line-height: var(--spacing-7);
+  }
+  .leading-8 {
+    --tw-leading: var(--spacing-8);
+    line-height: var(--spacing-8);
+  }
   .leading-\[2\.25\] {
     --tw-leading: 2.25;
     line-height: 2.25;
@@ -3443,8 +3494,8 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .\!text-action-primary {
-    color: var(--color-action-primary) !important;
+  .\!text-action-brand {
+    color: var(--color-action-brand) !important;
   }
   .\!text-text-caption {
     color: var(--color-text-caption) !important;
@@ -3458,12 +3509,21 @@
   .text-\[\#ffffff\] {
     color: #ffffff;
   }
+  .text-\[color\:var\(--color-action-brand-text\)\] {
+    color: var(--color-action-brand-text);
+  }
+  .text-\[color\:var\(--color-action-default-text\)\] {
+    color: var(--color-action-default-text);
+  }
+  .text-action-brand {
+    color: var(--color-action-brand);
+  }
+  .text-action-default {
+    color: var(--color-action-default);
+  }
   .text-action-primary {
     color: var(--color-action-primary);
   }
-  .text-action-secondary {
-    color: var(--color-action-secondary);
-  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -3938,12 +3998,12 @@
       }
     }
   }
-  .group-hover\:bg-action-primary\/50 {
+  .group-hover\:bg-action-brand\/50 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
         background-color: color-mix(in srgb, #444ae1 50%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-action-primary) 50%, transparent);
+          background-color: color-mix(in oklab, var(--color-action-brand) 50%, transparent);
         }
       }
     }
@@ -4151,9 +4211,9 @@
       padding-right: var(--spacing-0);
     }
   }
-  .visited\:text-action-primary {
+  .visited\:text-action-brand {
     &:visited {
-      color: var(--color-action-primary);
+      color: var(--color-action-brand);
     }
   }
   .visited\:text-text-link-default {
@@ -4206,13 +4266,6 @@
       }
     }
   }
-  .hover\:border-action-primary-hover {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-action-primary-hover);
-      }
-    }
-  }
   .hover\:border-border-default {
     &:hover {
       @media (hover: hover) {
@@ -4227,23 +4280,37 @@
       }
     }
   }
-  .hover\:bg-action-primary-hover {
+  .hover\:bg-action-brand-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-action-primary-hover);
+        background-color: var(--color-action-brand-hover);
       }
     }
   }
-  .hover\:bg-action-primary\/15 {
+  .hover\:bg-action-brand\/15 {
     &:hover {
       @media (hover: hover) {
         background-color: color-mix(in srgb, #444ae1 15%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-action-primary) 15%, transparent);
+          background-color: color-mix(in oklab, var(--color-action-brand) 15%, transparent);
         }
       }
     }
   }
+  .hover\:bg-action-default-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-action-default-hover);
+      }
+    }
+  }
+  .hover\:bg-action-primary-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-action-primary-hover);
+      }
+    }
+  }
   .hover\:bg-background-hover {
     &:hover {
       @media (hover: hover) {
@@ -4359,27 +4426,34 @@
       }
     }
   }
-  .hover\:text-action-primary {
+  .hover\:text-action-brand-hover {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-action-primary);
+        color: var(--color-action-brand-hover);
       }
     }
   }
-  .hover\:text-action-primary-hover {
+  .hover\:text-action-brand\/90 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-action-primary-hover);
+        color: color-mix(in srgb, #444ae1 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-action-brand) 90%, transparent);
+        }
       }
     }
   }
-  .hover\:text-action-primary\/90 {
+  .hover\:text-action-primary {
     &:hover {
       @media (hover: hover) {
-        color: color-mix(in srgb, #444ae1 90%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-action-primary) 90%, transparent);
-        }
+        color: var(--color-action-primary);
+      }
+    }
+  }
+  .hover\:text-action-primary-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-action-primary-hover);
       }
     }
   }
@@ -4460,22 +4534,6 @@
       }
     }
   }
-  .hover\:brightness-90 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-brightness: brightness(90%);
-        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-      }
-    }
-  }
-  .hover\:brightness-\[var\(--control-hover-opacity\)\] {
-    &:hover {
-      @media (hover: hover) {
-        --tw-brightness: brightness(var(--control-hover-opacity));
-        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-      }
-    }
-  }
   .focus\:not-sr-only {
     &:focus {
       position: static;
@@ -4525,6 +4583,16 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-action-brand {
+    &:focus {
+      --tw-ring-color: var(--color-action-brand);
+    }
+  }
+  .focus\:ring-action-default {
+    &:focus {
+      --tw-ring-color: var(--color-action-default);
+    }
+  }
   .focus\:ring-action-primary {
     &:focus {
       --tw-ring-color: var(--color-action-primary);
@@ -4552,9 +4620,9 @@
       outline-offset: 0px;
     }
   }
-  .focus\:outline-border-focus {
+  .focus\:outline-action-default {
     &:focus {
-      outline-color: var(--color-border-focus);
+      outline-color: var(--color-action-default);
     }
   }
   .focus\:outline-none {
@@ -4580,9 +4648,14 @@
       outline-offset: 0px;
     }
   }
-  .focus-visible\:outline-border-focus {
+  .focus-visible\:outline-action-brand {
+    &:focus-visible {
+      outline-color: var(--color-action-brand);
+    }
+  }
+  .focus-visible\:outline-action-default {
     &:focus-visible {
-      outline-color: var(--color-border-focus);
+      outline-color: var(--color-action-default);
     }
   }
   .disabled\:cursor-not-allowed {
@@ -5668,11 +5741,6 @@
       background-color: var(--color-slate-600);
     }
   }
-  .dark\:bg-zinc-300 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-zinc-300);
-    }
-  }
   .dark\:bg-zinc-400 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-zinc-400);
@@ -6242,17 +6310,37 @@
       list-style-type: disc;
     }
   }
-  .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-primary\/20 {
+  .\[\&_\.empty-state-actions\]\:justify-center {
+    & .empty-state-actions {
+      justify-content: center;
+    }
+  }
+  .\[\&_\.empty-state-actions\]\:justify-start {
+    & .empty-state-actions {
+      justify-content: flex-start;
+    }
+  }
+  .\[\&_\.empty-state-actions\]\:text-center {
+    & .empty-state-actions {
+      text-align: center;
+    }
+  }
+  .\[\&_\.empty-state-actions\]\:text-left {
+    & .empty-state-actions {
+      text-align: left;
+    }
+  }
+  .\[\&_\[data-chip-id\]\:\:selection\]\:bg-action-brand\/20 {
     & [data-chip-id]::-moz-selection {
       background-color: color-mix(in srgb, #444ae1 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
       }
     }
     & [data-chip-id]::selection {
       background-color: color-mix(in srgb, #444ae1 20%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-action-primary) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-action-brand) 20%, transparent);
       }
     }
   }
@@ -6315,10 +6403,10 @@
       }
     }
   }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:outline-border-focus {
+  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:outline-action-default {
     &:focus-visible {
       &::-moz-range-thumb {
-        outline-color: var(--color-border-focus);
+        outline-color: var(--color-action-default);
       }
     }
   }
@@ -6389,10 +6477,10 @@
       }
     }
   }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:outline-border-focus {
+  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:outline-action-default {
     &:focus-visible {
       &::-webkit-slider-thumb {
-        outline-color: var(--color-border-focus);
+        outline-color: var(--color-action-default);
       }
     }
   }

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.8.2",
-  "generatedAt": "2025-10-21T16:01:17.559Z",
+  "version": "1.9.1",
+  "generatedAt": "2025-10-22T00:53:47.427Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.8.2",
+  "version": "1.9.1",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",

package/scripts/generate-edges-docs.js

@@ -741,7 +741,9 @@ The theme includes ${Object.keys(colorVars).length} color variables organized by
 
 ### Action Colors
 - \`action-primary\` - Primary actions
+- \`action-brand\` - Brand-focused actions
 - \`action-secondary\` - Secondary actions
+- \`action-default\` - Default gray actions
 - \`action-destructive\` - Destructive actions
 
 ### Feedback Colors