@speakeasy-api/moonshine 1.25.1 → 1.26.0

package/dist/types.d.ts

@@ -1,7 +1,9 @@
-export declare const buttonVariants: readonly ["default", "destructive", "outline", "secondary", "ghost", "link"];
+export declare const buttonVariants: readonly ["brand", "primary", "secondary", "tertiary", "destructive-primary", "destructive-secondary"];
 export type ButtonVariant = (typeof buttonVariants)[number];
-export declare const buttonSizes: readonly ["default", "sm", "lg", "icon"];
+export declare const buttonSizes: readonly ["xs", "sm", "md", "lg"];
 export type ButtonSize = (typeof buttonSizes)[number];
+export declare const buttonContexts: readonly ["product", "marketing"];
+export type ButtonContext = (typeof buttonContexts)[number];
 export type Orientation = 'horizontal' | 'vertical';
 export declare const sizes: readonly ["small", "medium", "large", "xl", "2xl"];
 export type Size = (typeof sizes)[number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@speakeasy-api/moonshine",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "packageManager": "pnpm@9.0.0",
   "description": "Speakeasy's design system Moonshine",
   "main": "dist/moonshine.cjs.js",

package/src/base.css

@@ -70,15 +70,15 @@
 
   --gradient-brand-red: radial-gradient(
     138.34% 138.34% at 0% 4.4%,
-    var(--color-destructive-900) 0%,
-    var(--color-destructive-800) 12.5%,
-    var(--color-destructive-700) 25%,
-    var(--color-destructive-600) 37.5%,
-    var(--color-destructive-500) 50%,
-    var(--color-destructive-400) 62.5%,
-    var(--color-destructive-300) 75%,
-    var(--color-destructive-200) 87.5%,
-    var(--color-destructive-100) 100%
+    var(--color-brand-red-900) 0%,
+    var(--color-brand-red-800) 12.5%,
+    var(--color-brand-red-700) 25%,
+    var(--color-brand-red-600) 37.5%,
+    var(--color-brand-red-500) 50%,
+    var(--color-brand-red-400) 62.5%,
+    var(--color-brand-red-300) 75%,
+    var(--color-brand-red-200) 87.5%,
+    var(--color-brand-red-100) 100%
   );
 
   /* Brand green */

package/src/utilities.css

@@ -412,11 +412,208 @@
   color: var(--text-link-warning);
 }
 
+/* Button Text Colors */
+@utility text-btn-brand {
+  color: var(--color-neutral-900);
+  
+  @variant dark {
+    color: var(--color-neutral-100);
+  }
+}
+
+@utility text-btn-brand-hover {
+  color: var(--color-base-black);
+  
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-brand-active {
+  color: var(--color-base-black);
+  
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-brand-disabled {
+  color: var(--color-neutral-900);
+  opacity: 0.4;
+  
+  @variant dark {
+    color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-primary {
+  color: var(--color-base-white);
+  
+  @variant dark {
+    color: var(--color-base-black);
+  }
+}
+
+@utility text-btn-primary-hover {
+  color: var(--color-base-white);
+  
+  @variant dark {
+    color: var(--color-base-black);
+  }
+}
+
+@utility text-btn-primary-active {
+  color: var(--color-base-white);
+  
+  @variant dark {
+    color: var(--color-base-black);
+  }
+}
+
+@utility text-btn-primary-disabled {
+  color: var(--color-base-white);
+  opacity: 0.4;
+  
+  @variant dark {
+    color: var(--color-base-black);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-secondary {
+  color: var(--color-neutral-900);
+  
+  @variant dark {
+    color: var(--color-neutral-100);
+  }
+}
+
+@utility text-btn-secondary-hover {
+  color: var(--color-base-black);
+  
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-secondary-active {
+  color: var(--color-base-black);
+  
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-secondary-disabled {
+  color: var(--color-neutral-900);
+  opacity: 0.4;
+  
+  @variant dark {
+    color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-tertiary {
+  color: var(--color-neutral-900);
+  
+  @variant dark {
+    color: var(--color-neutral-100);
+  }
+}
+
+@utility text-btn-tertiary-hover {
+  color: var(--color-base-black);
+  
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-tertiary-active {
+  color: var(--color-base-black);
+  
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-tertiary-disabled {
+  color: var(--color-neutral-900);
+  opacity: 0.4;
+  
+  @variant dark {
+    color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-destructive-primary {
+  color: var(--color-base-white);
+}
+
+@utility text-btn-destructive-primary-hover {
+  color: var(--color-base-white);
+}
+
+@utility text-btn-destructive-primary-active {
+  color: var(--color-base-white);
+}
+
+@utility text-btn-destructive-primary-disabled {
+  color: var(--color-base-white);
+  opacity: 0.4;
+}
+
+@utility text-btn-destructive-secondary {
+  color: var(--color-feedback-red-600);
+  
+  @variant dark {
+    color: var(--color-feedback-red-400);
+  }
+}
+
+@utility text-btn-destructive-secondary-hover {
+  color: var(--color-feedback-red-700);
+  
+  @variant dark {
+    color: var(--color-feedback-red-500);
+  }
+}
+
+@utility text-btn-destructive-secondary-active {
+  color: var(--color-feedback-red-800);
+  
+  @variant dark {
+    color: var(--color-feedback-red-600);
+  }
+}
+
+@utility text-btn-destructive-secondary-disabled {
+  color: var(--color-feedback-red-600);
+  opacity: 0.4;
+  
+  @variant dark {
+    color: var(--color-feedback-red-400);
+    opacity: 0.4;
+  }
+}
+
 
 @utility bg-gradient-primary {
   background: var(--gradient-brand-primary);
 }
 
+/* TODO: check with others on the naming convention for brand gradient utilities */
+@utility bg-gradient-green {
+  background: var(--gradient-brand-green);
+}
+
+@utility bg-gradient-red {
+  background: var(--gradient-brand-red);
+}
+
 @utility border-gradient-primary {
   border-image: var(--gradient-brand-primary) 1;
 }
@@ -831,6 +1028,145 @@
 /* ============================================
 * BACKGROUNDS
 * ============================================ */
+
+/* Button Background utilities
+ * Figma: Surface/Button/{Variant}/bg-{state} → Code: bg-btn-{variant}-{state}
+ * Follows Tailwind conventions: bg-*, rest state has no suffix */
+@utility bg-btn-brand {
+  background-color: var(--color-base-white);
+  
+  @variant dark {
+    background-color: var(--color-base-black);
+  }
+}
+
+@utility bg-btn-brand-hover {
+  background-color: var(--color-neutral-100);
+  
+  @variant dark {
+    background-color: var(--color-neutral-900);
+  }
+}
+
+@utility bg-btn-brand-active {
+  background-color: var(--color-neutral-200);
+  
+  @variant dark {
+    background-color: var(--color-neutral-800);
+  }
+}
+
+@utility bg-btn-brand-disabled {
+  background-color: var(--color-base-white);
+  
+  @variant dark {
+    background-color: var(--color-base-black);
+  }
+}
+
+@utility bg-btn-primary {
+  background-color: var(--color-neutral-700);
+  
+  @variant dark {
+    background-color: var(--color-neutral-300);
+  }
+}
+
+@utility bg-btn-primary-hover {
+  background-color: var(--color-neutral-800);
+  
+  @variant dark {
+    background-color: var(--color-neutral-200);
+  }
+}
+
+@utility bg-btn-primary-active {
+  background-color: var(--color-neutral-900);
+  
+  @variant dark {
+    background-color: var(--color-neutral-100);
+  }
+}
+
+@utility bg-btn-primary-disabled {
+  background-color: var(--color-neutral-900);
+  opacity: 0.4;
+  
+  @variant dark {
+    background-color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility bg-btn-secondary {
+  background-color: var(--color-neutral-200);
+  
+  @variant dark {
+    background-color: var(--color-neutral-800);
+  }
+}
+
+@utility bg-btn-secondary-hover {
+  background-color: var(--color-neutral-300);
+  
+  @variant dark {
+    background-color: var(--color-neutral-700);
+  }
+}
+
+@utility bg-btn-secondary-active {
+  background-color: var(--color-neutral-400);
+  
+  @variant dark {
+    background-color: var(--color-neutral-600);
+  }
+}
+
+@utility bg-btn-secondary-disabled {
+  background-color: var(--color-neutral-200);
+  opacity: 0.4;
+  
+  @variant dark {
+    background-color: var(--color-neutral-800);
+    opacity: 0.4;
+  }
+}
+
+@utility bg-btn-destructive {
+  background-color: var(--color-feedback-red-600);
+  
+  @variant dark {
+    background-color: var(--color-feedback-red-400);
+  }
+}
+
+@utility bg-btn-destructive-hover {
+  background-color: var(--color-feedback-red-700);
+  
+  @variant dark {
+    background-color: var(--color-feedback-red-500);
+  }
+}
+
+@utility bg-btn-destructive-active {
+  background-color: var(--color-feedback-red-800);
+  
+  @variant dark {
+    background-color: var(--color-feedback-red-600);
+  }
+}
+
+@utility bg-btn-destructive-disabled {
+  background-color: var(--color-feedback-red-600);
+  opacity: 0.4;
+  
+  @variant dark {
+    background-color: var(--color-feedback-red-400);
+    opacity: 0.4;
+  }
+}
+
+/* Surface Background utilities */
 @utility bg-surface-primary-default {
   background-color: var(--bg-surface-primary-default);
 }

package/types/utilities.d.ts

@@ -1,6 +1,6 @@
 /**
  * Auto-generated TypeScript definitions for Moonshine utilities
- * Generated on: 2025-09-04T14:27:18.280Z
+ * Generated on: 2025-09-10T14:50:47.442Z
  *
  * DO NOT EDIT THIS FILE DIRECTLY
  * Run 'pnpm generate:docs' to update
@@ -68,7 +68,33 @@ export type MoonshineUtilities =
   | 'text-link-success'
   | 'text-default-warning'
   | 'text-link-warning'
+  | 'text-btn-brand'
+  | 'text-btn-brand-hover'
+  | 'text-btn-brand-active'
+  | 'text-btn-brand-disabled'
+  | 'text-btn-primary'
+  | 'text-btn-primary-hover'
+  | 'text-btn-primary-active'
+  | 'text-btn-primary-disabled'
+  | 'text-btn-secondary'
+  | 'text-btn-secondary-hover'
+  | 'text-btn-secondary-active'
+  | 'text-btn-secondary-disabled'
+  | 'text-btn-tertiary'
+  | 'text-btn-tertiary-hover'
+  | 'text-btn-tertiary-active'
+  | 'text-btn-tertiary-disabled'
+  | 'text-btn-destructive-primary'
+  | 'text-btn-destructive-primary-hover'
+  | 'text-btn-destructive-primary-active'
+  | 'text-btn-destructive-primary-disabled'
+  | 'text-btn-destructive-secondary'
+  | 'text-btn-destructive-secondary-hover'
+  | 'text-btn-destructive-secondary-active'
+  | 'text-btn-destructive-secondary-disabled'
   | 'bg-gradient-primary'
+  | 'bg-gradient-green'
+  | 'bg-gradient-red'
   | 'border-gradient-primary'
   | 'bg-surface-primary'
   | 'bg-surface-secondary'
@@ -158,6 +184,22 @@ export type MoonshineUtilities =
   | 'stroke-warning-highlight'
   | 'stroke-warning-default'
   | 'stroke-warning-muted'
+  | 'bg-btn-brand'
+  | 'bg-btn-brand-hover'
+  | 'bg-btn-brand-active'
+  | 'bg-btn-brand-disabled'
+  | 'bg-btn-primary'
+  | 'bg-btn-primary-hover'
+  | 'bg-btn-primary-active'
+  | 'bg-btn-primary-disabled'
+  | 'bg-btn-secondary'
+  | 'bg-btn-secondary-hover'
+  | 'bg-btn-secondary-active'
+  | 'bg-btn-secondary-disabled'
+  | 'bg-btn-destructive'
+  | 'bg-btn-destructive-hover'
+  | 'bg-btn-destructive-active'
+  | 'bg-btn-destructive-disabled'
   | 'bg-surface-primary-default'
   | 'bg-surface-primary-inverse'
   | 'bg-surface-secondary-default'