@smicolon/fasla-ui 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -24,8 +24,9 @@ var baseTokens = {
 };
 
 // src/tokens/tailwind.ts
-var semanticColor = (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+var semanticColor = (name) => `color-mix(in oklab, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
 var c = semanticColor;
+var inverse = (name, fallback) => `color-mix(in oklab, var(--${name}, ${fallback}) calc(<alpha-value> * 100%), transparent)`;
 var tailwindSemanticColors = {
   // Surfaces
   background: c("background"),
@@ -51,21 +52,46 @@ var tailwindSemanticColors = {
   success: { DEFAULT: c("success"), foreground: c("success-foreground") },
   warning: { DEFAULT: c("warning"), foreground: c("warning-foreground") },
   info: { DEFAULT: c("info"), foreground: c("info-foreground") },
-  // Soft tints — Figma's `opacity/*` variables, already translucent. The Badge
-  // Soft type lays one over `card`, exactly as Figma stacks the two fills, so
-  // the chip reads the same on any surface. Only `primary` changes in Dark.
+  // Soft tints — Figma's `opacity/*` variables, already translucent. Badge and
+  // Button Soft lay one over `card`, exactly as Figma stacks the two fills, so
+  // they read the same on any surface. `primary` and `secondary` change in
+  // Dark. The `-20` and `-30` steps are Soft Button's Hover and Clicked.
   soft: {
     primary: c("soft-primary"),
+    "primary-20": c("soft-primary-20"),
+    "primary-30": c("soft-primary-30"),
     secondary: c("soft-secondary"),
+    "secondary-20": c("soft-secondary-20"),
+    "secondary-30": c("soft-secondary-30"),
     info: c("soft-info"),
+    "info-20": c("soft-info-20"),
+    "info-30": c("soft-info-30"),
+    neutral: c("soft-neutral"),
     success: c("soft-success"),
+    "success-20": c("soft-success-20"),
+    "success-30": c("soft-success-30"),
     warning: c("soft-warning"),
-    destructive: c("soft-destructive")
+    "warning-5": c("soft-warning-5"),
+    "warning-20": c("soft-warning-20"),
+    "warning-30": c("soft-warning-30"),
+    destructive: c("soft-destructive"),
+    "destructive-20": c("soft-destructive-20"),
+    "destructive-30": c("soft-destructive-30")
   },
+  // The overlay behind a modal: Figma's `custom/backdrop-overlay`, already
+  // translucent, and denser in Dark.
+  "backdrop-overlay": c("backdrop-overlay"),
   // Inverse — a fixed contrast band, not a mode-reactive surface.
-  "background-inverse": c("background-inverse"),
-  "foreground-inverse": c("foreground-inverse"),
-  "muted-foreground-inverse": c("muted-foreground-inverse"),
+  "background-inverse": inverse("background-inverse", "theme(colors.foreground)"),
+  "foreground-inverse": inverse("foreground-inverse", "theme(colors.background)"),
+  "muted-foreground-inverse": inverse(
+    "muted-foreground-inverse",
+    "color-mix(in oklab, theme(colors.background) 75%, theme(colors.foreground))"
+  ),
+  // Fixed black and white: Figma's `colors/base` primitives, the same in Light
+  // and Dark. For a surface that must not flip, such as a phone's body.
+  "base-black": c("base-black"),
+  "base-white": c("base-white"),
   // Charts
   "chart-1": c("chart-1"),
   "chart-2": c("chart-2"),
@@ -116,6 +142,18 @@ function useMotionPresets() {
       exit: { opacity: 0, y: 6 },
       transition: { duration: durations.base, ease: easing.standard }
     }),
+    /**
+     * A story or panel changing sideways: the outgoing one leaves 24px toward
+     * the start of the swap and the incoming one arrives from the other side
+     * (`initial.x`), fading. Flip the sign of `x` for a right-to-left page.
+     * The exit is fast (120ms), the entrance base (180ms).
+     */
+    slideX: safe({
+      initial: { opacity: 0, x: 24 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: -24, transition: { duration: durations.fast, ease: easing.standard } },
+      transition: { duration: durations.base, ease: easing.standard }
+    }),
     modalScale: safe({
       initial: { opacity: 0, scale: 0.98 },
       animate: { opacity: 1, scale: 1 },
@@ -145,7 +183,7 @@ var registry = [
     name: "button",
     type: "ui",
     title: "Button",
-    description: "A button component with multiple variants, sizes, and loading state.",
+    description: "A button in five types (solid, soft, outline, ghost, link) and three tones, four sizes and the matching icon-button sizes, two radii, and a loading state.",
     sourcePath: "registry/ui/button",
     dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
     categories: ["primitives", "forms"]
@@ -154,9 +192,9 @@ var registry = [
     name: "input",
     type: "ui",
     title: "Input",
-    description: "An input component with variants for validation states and icon support.",
+    description: "A text field with a label, helper labels, start and end icons, success and invalid states, four sizes and two radii.",
     sourcePath: "registry/ui/input",
-    dependencies: ["class-variance-authority"],
+    dependencies: ["@base-ui/react", "class-variance-authority"],
     categories: ["primitives", "forms"]
   },
   {
@@ -250,7 +288,7 @@ var registry = [
     name: "data-table",
     type: "block",
     title: "Data Table",
-    description: "Data table with sorting, pagination, and custom cell rendering.",
+    description: "Data table with row selection, a sticky header, loading and empty states, and custom cell rendering. Pair it with Pagination to page through rows.",
     sourcePath: "registry/blocks/data-table",
     categories: ["data-display", "tables"]
   },

package/dist/index.js

@@ -22,8 +22,9 @@ var baseTokens = {
 };
 
 // src/tokens/tailwind.ts
-var semanticColor = (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+var semanticColor = (name) => `color-mix(in oklab, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
 var c = semanticColor;
+var inverse = (name, fallback) => `color-mix(in oklab, var(--${name}, ${fallback}) calc(<alpha-value> * 100%), transparent)`;
 var tailwindSemanticColors = {
   // Surfaces
   background: c("background"),
@@ -49,21 +50,46 @@ var tailwindSemanticColors = {
   success: { DEFAULT: c("success"), foreground: c("success-foreground") },
   warning: { DEFAULT: c("warning"), foreground: c("warning-foreground") },
   info: { DEFAULT: c("info"), foreground: c("info-foreground") },
-  // Soft tints — Figma's `opacity/*` variables, already translucent. The Badge
-  // Soft type lays one over `card`, exactly as Figma stacks the two fills, so
-  // the chip reads the same on any surface. Only `primary` changes in Dark.
+  // Soft tints — Figma's `opacity/*` variables, already translucent. Badge and
+  // Button Soft lay one over `card`, exactly as Figma stacks the two fills, so
+  // they read the same on any surface. `primary` and `secondary` change in
+  // Dark. The `-20` and `-30` steps are Soft Button's Hover and Clicked.
   soft: {
     primary: c("soft-primary"),
+    "primary-20": c("soft-primary-20"),
+    "primary-30": c("soft-primary-30"),
     secondary: c("soft-secondary"),
+    "secondary-20": c("soft-secondary-20"),
+    "secondary-30": c("soft-secondary-30"),
     info: c("soft-info"),
+    "info-20": c("soft-info-20"),
+    "info-30": c("soft-info-30"),
+    neutral: c("soft-neutral"),
     success: c("soft-success"),
+    "success-20": c("soft-success-20"),
+    "success-30": c("soft-success-30"),
     warning: c("soft-warning"),
-    destructive: c("soft-destructive")
+    "warning-5": c("soft-warning-5"),
+    "warning-20": c("soft-warning-20"),
+    "warning-30": c("soft-warning-30"),
+    destructive: c("soft-destructive"),
+    "destructive-20": c("soft-destructive-20"),
+    "destructive-30": c("soft-destructive-30")
   },
+  // The overlay behind a modal: Figma's `custom/backdrop-overlay`, already
+  // translucent, and denser in Dark.
+  "backdrop-overlay": c("backdrop-overlay"),
   // Inverse — a fixed contrast band, not a mode-reactive surface.
-  "background-inverse": c("background-inverse"),
-  "foreground-inverse": c("foreground-inverse"),
-  "muted-foreground-inverse": c("muted-foreground-inverse"),
+  "background-inverse": inverse("background-inverse", "theme(colors.foreground)"),
+  "foreground-inverse": inverse("foreground-inverse", "theme(colors.background)"),
+  "muted-foreground-inverse": inverse(
+    "muted-foreground-inverse",
+    "color-mix(in oklab, theme(colors.background) 75%, theme(colors.foreground))"
+  ),
+  // Fixed black and white: Figma's `colors/base` primitives, the same in Light
+  // and Dark. For a surface that must not flip, such as a phone's body.
+  "base-black": c("base-black"),
+  "base-white": c("base-white"),
   // Charts
   "chart-1": c("chart-1"),
   "chart-2": c("chart-2"),
@@ -114,6 +140,18 @@ function useMotionPresets() {
       exit: { opacity: 0, y: 6 },
       transition: { duration: durations.base, ease: easing.standard }
     }),
+    /**
+     * A story or panel changing sideways: the outgoing one leaves 24px toward
+     * the start of the swap and the incoming one arrives from the other side
+     * (`initial.x`), fading. Flip the sign of `x` for a right-to-left page.
+     * The exit is fast (120ms), the entrance base (180ms).
+     */
+    slideX: safe({
+      initial: { opacity: 0, x: 24 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: -24, transition: { duration: durations.fast, ease: easing.standard } },
+      transition: { duration: durations.base, ease: easing.standard }
+    }),
     modalScale: safe({
       initial: { opacity: 0, scale: 0.98 },
       animate: { opacity: 1, scale: 1 },
@@ -143,7 +181,7 @@ var registry = [
     name: "button",
     type: "ui",
     title: "Button",
-    description: "A button component with multiple variants, sizes, and loading state.",
+    description: "A button in five types (solid, soft, outline, ghost, link) and three tones, four sizes and the matching icon-button sizes, two radii, and a loading state.",
     sourcePath: "registry/ui/button",
     dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
     categories: ["primitives", "forms"]
@@ -152,9 +190,9 @@ var registry = [
     name: "input",
     type: "ui",
     title: "Input",
-    description: "An input component with variants for validation states and icon support.",
+    description: "A text field with a label, helper labels, start and end icons, success and invalid states, four sizes and two radii.",
     sourcePath: "registry/ui/input",
-    dependencies: ["class-variance-authority"],
+    dependencies: ["@base-ui/react", "class-variance-authority"],
     categories: ["primitives", "forms"]
   },
   {
@@ -248,7 +286,7 @@ var registry = [
     name: "data-table",
     type: "block",
     title: "Data Table",
-    description: "Data table with sorting, pagination, and custom cell rendering.",
+    description: "Data table with row selection, a sticky header, loading and empty states, and custom cell rendering. Pair it with Pagination to page through rows.",
     sourcePath: "registry/blocks/data-table",
     categories: ["data-display", "tables"]
   },

package/dist/motion/index.cjs

@@ -36,6 +36,18 @@ function useMotionPresets() {
       exit: { opacity: 0, y: 6 },
       transition: { duration: durations.base, ease: easing.standard }
     }),
+    /**
+     * A story or panel changing sideways: the outgoing one leaves 24px toward
+     * the start of the swap and the incoming one arrives from the other side
+     * (`initial.x`), fading. Flip the sign of `x` for a right-to-left page.
+     * The exit is fast (120ms), the entrance base (180ms).
+     */
+    slideX: safe({
+      initial: { opacity: 0, x: 24 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: -24, transition: { duration: durations.fast, ease: easing.standard } },
+      transition: { duration: durations.base, ease: easing.standard }
+    }),
     modalScale: safe({
       initial: { opacity: 0, scale: 0.98 },
       animate: { opacity: 1, scale: 1 },

package/dist/motion/index.d.cts

@@ -11,6 +11,13 @@ type MotionPreset = {
 declare function useMotionPresets(): {
     fadeIn: MotionPreset;
     slideUp: MotionPreset;
+    /**
+     * A story or panel changing sideways: the outgoing one leaves 24px toward
+     * the start of the swap and the incoming one arrives from the other side
+     * (`initial.x`), fading. Flip the sign of `x` for a right-to-left page.
+     * The exit is fast (120ms), the entrance base (180ms).
+     */
+    slideX: MotionPreset;
     modalScale: MotionPreset;
     stagger: {
         container: MotionPreset;

package/dist/motion/index.d.ts

@@ -11,6 +11,13 @@ type MotionPreset = {
 declare function useMotionPresets(): {
     fadeIn: MotionPreset;
     slideUp: MotionPreset;
+    /**
+     * A story or panel changing sideways: the outgoing one leaves 24px toward
+     * the start of the swap and the incoming one arrives from the other side
+     * (`initial.x`), fading. Flip the sign of `x` for a right-to-left page.
+     * The exit is fast (120ms), the entrance base (180ms).
+     */
+    slideX: MotionPreset;
     modalScale: MotionPreset;
     stagger: {
         container: MotionPreset;

package/dist/motion/index.js

@@ -34,6 +34,18 @@ function useMotionPresets() {
       exit: { opacity: 0, y: 6 },
       transition: { duration: durations.base, ease: easing.standard }
     }),
+    /**
+     * A story or panel changing sideways: the outgoing one leaves 24px toward
+     * the start of the swap and the incoming one arrives from the other side
+     * (`initial.x`), fading. Flip the sign of `x` for a right-to-left page.
+     * The exit is fast (120ms), the entrance base (180ms).
+     */
+    slideX: safe({
+      initial: { opacity: 0, x: 24 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: -24, transition: { duration: durations.fast, ease: easing.standard } },
+      transition: { duration: durations.base, ease: easing.standard }
+    }),
     modalScale: safe({
       initial: { opacity: 0, scale: 0.98 },
       animate: { opacity: 1, scale: 1 },

package/dist/registry/index.cjs

@@ -7,7 +7,7 @@ var registry = [
     name: "button",
     type: "ui",
     title: "Button",
-    description: "A button component with multiple variants, sizes, and loading state.",
+    description: "A button in five types (solid, soft, outline, ghost, link) and three tones, four sizes and the matching icon-button sizes, two radii, and a loading state.",
     sourcePath: "registry/ui/button",
     dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
     categories: ["primitives", "forms"]
@@ -16,9 +16,9 @@ var registry = [
     name: "input",
     type: "ui",
     title: "Input",
-    description: "An input component with variants for validation states and icon support.",
+    description: "A text field with a label, helper labels, start and end icons, success and invalid states, four sizes and two radii.",
     sourcePath: "registry/ui/input",
-    dependencies: ["class-variance-authority"],
+    dependencies: ["@base-ui/react", "class-variance-authority"],
     categories: ["primitives", "forms"]
   },
   {
@@ -112,7 +112,7 @@ var registry = [
     name: "data-table",
     type: "block",
     title: "Data Table",
-    description: "Data table with sorting, pagination, and custom cell rendering.",
+    description: "Data table with row selection, a sticky header, loading and empty states, and custom cell rendering. Pair it with Pagination to page through rows.",
     sourcePath: "registry/blocks/data-table",
     categories: ["data-display", "tables"]
   },

package/dist/registry/index.js

@@ -5,7 +5,7 @@ var registry = [
     name: "button",
     type: "ui",
     title: "Button",
-    description: "A button component with multiple variants, sizes, and loading state.",
+    description: "A button in five types (solid, soft, outline, ghost, link) and three tones, four sizes and the matching icon-button sizes, two radii, and a loading state.",
     sourcePath: "registry/ui/button",
     dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
     categories: ["primitives", "forms"]
@@ -14,9 +14,9 @@ var registry = [
     name: "input",
     type: "ui",
     title: "Input",
-    description: "An input component with variants for validation states and icon support.",
+    description: "A text field with a label, helper labels, start and end icons, success and invalid states, four sizes and two radii.",
     sourcePath: "registry/ui/input",
-    dependencies: ["class-variance-authority"],
+    dependencies: ["@base-ui/react", "class-variance-authority"],
     categories: ["primitives", "forms"]
   },
   {
@@ -110,7 +110,7 @@ var registry = [
     name: "data-table",
     type: "block",
     title: "Data Table",
-    description: "Data table with sorting, pagination, and custom cell rendering.",
+    description: "Data table with row selection, a sticky header, loading and empty states, and custom cell rendering. Pair it with Pagination to page through rows.",
     sourcePath: "registry/blocks/data-table",
     categories: ["data-display", "tables"]
   },

package/dist/tokens/index.cjs

@@ -12,8 +12,9 @@ var baseTokens = {
 };
 
 // src/tokens/tailwind.ts
-var semanticColor = (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+var semanticColor = (name) => `color-mix(in oklab, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
 var c = semanticColor;
+var inverse = (name, fallback) => `color-mix(in oklab, var(--${name}, ${fallback}) calc(<alpha-value> * 100%), transparent)`;
 var tailwindSemanticColors = {
   // Surfaces
   background: c("background"),
@@ -39,21 +40,46 @@ var tailwindSemanticColors = {
   success: { DEFAULT: c("success"), foreground: c("success-foreground") },
   warning: { DEFAULT: c("warning"), foreground: c("warning-foreground") },
   info: { DEFAULT: c("info"), foreground: c("info-foreground") },
-  // Soft tints — Figma's `opacity/*` variables, already translucent. The Badge
-  // Soft type lays one over `card`, exactly as Figma stacks the two fills, so
-  // the chip reads the same on any surface. Only `primary` changes in Dark.
+  // Soft tints — Figma's `opacity/*` variables, already translucent. Badge and
+  // Button Soft lay one over `card`, exactly as Figma stacks the two fills, so
+  // they read the same on any surface. `primary` and `secondary` change in
+  // Dark. The `-20` and `-30` steps are Soft Button's Hover and Clicked.
   soft: {
     primary: c("soft-primary"),
+    "primary-20": c("soft-primary-20"),
+    "primary-30": c("soft-primary-30"),
     secondary: c("soft-secondary"),
+    "secondary-20": c("soft-secondary-20"),
+    "secondary-30": c("soft-secondary-30"),
     info: c("soft-info"),
+    "info-20": c("soft-info-20"),
+    "info-30": c("soft-info-30"),
+    neutral: c("soft-neutral"),
     success: c("soft-success"),
+    "success-20": c("soft-success-20"),
+    "success-30": c("soft-success-30"),
     warning: c("soft-warning"),
-    destructive: c("soft-destructive")
+    "warning-5": c("soft-warning-5"),
+    "warning-20": c("soft-warning-20"),
+    "warning-30": c("soft-warning-30"),
+    destructive: c("soft-destructive"),
+    "destructive-20": c("soft-destructive-20"),
+    "destructive-30": c("soft-destructive-30")
   },
+  // The overlay behind a modal: Figma's `custom/backdrop-overlay`, already
+  // translucent, and denser in Dark.
+  "backdrop-overlay": c("backdrop-overlay"),
   // Inverse — a fixed contrast band, not a mode-reactive surface.
-  "background-inverse": c("background-inverse"),
-  "foreground-inverse": c("foreground-inverse"),
-  "muted-foreground-inverse": c("muted-foreground-inverse"),
+  "background-inverse": inverse("background-inverse", "theme(colors.foreground)"),
+  "foreground-inverse": inverse("foreground-inverse", "theme(colors.background)"),
+  "muted-foreground-inverse": inverse(
+    "muted-foreground-inverse",
+    "color-mix(in oklab, theme(colors.background) 75%, theme(colors.foreground))"
+  ),
+  // Fixed black and white: Figma's `colors/base` primitives, the same in Light
+  // and Dark. For a surface that must not flip, such as a phone's body.
+  "base-black": c("base-black"),
+  "base-white": c("base-white"),
   // Charts
   "chart-1": c("chart-1"),
   "chart-2": c("chart-2"),

package/dist/tokens/index.d.cts

@@ -28,7 +28,7 @@ declare const baseTokens: TokenSet;
  * Tailwind mapping for the Fasla semantic colour tokens.
  *
  * These are the 41 `theme/*` variables of the Figma "☾ Mode" collection, plus
- * the six `opacity/*` Soft tints. Figma
+ * the twelve `opacity/*` Soft tints and `custom/backdrop-overlay`. Figma
  * is the source of truth; `design/tokens/mode.json` holds the committed
  * snapshot, and both apps declare the same values in their own `globals.css`.
  *
@@ -44,6 +44,11 @@ declare const baseTokens: TokenSet;
  * placeholder keeps both `bg-primary` and `bg-primary/10` working, while letting
  * the CSS variables stay full colours rather than bare channel triplets.
  *
+ * Mixed in OKLab, not OKLCH: in OKLCH a near-neutral colour loses its hue
+ * against `transparent` and is drawn at hue 0, so zinc-700 #3f3f46 rendered a
+ * reddish grey and #f8fafc a pinkish white. OKLab has no hue to lose, and
+ * every Fasla token draws exactly.
+ *
  * Needs Chrome 111+, Safari 16.2+, Firefox 113+.
  */
 declare const semanticColor: (name: string) => string;
@@ -95,15 +100,32 @@ declare const tailwindSemanticColors: {
     };
     soft: {
         primary: string;
+        "primary-20": string;
+        "primary-30": string;
         secondary: string;
+        "secondary-20": string;
+        "secondary-30": string;
         info: string;
+        "info-20": string;
+        "info-30": string;
+        neutral: string;
         success: string;
+        "success-20": string;
+        "success-30": string;
         warning: string;
+        "warning-5": string;
+        "warning-20": string;
+        "warning-30": string;
         destructive: string;
+        "destructive-20": string;
+        "destructive-30": string;
     };
+    "backdrop-overlay": string;
     "background-inverse": string;
     "foreground-inverse": string;
     "muted-foreground-inverse": string;
+    "base-black": string;
+    "base-white": string;
     "chart-1": string;
     "chart-2": string;
     "chart-3": string;

package/dist/tokens/index.d.ts

@@ -28,7 +28,7 @@ declare const baseTokens: TokenSet;
  * Tailwind mapping for the Fasla semantic colour tokens.
  *
  * These are the 41 `theme/*` variables of the Figma "☾ Mode" collection, plus
- * the six `opacity/*` Soft tints. Figma
+ * the twelve `opacity/*` Soft tints and `custom/backdrop-overlay`. Figma
  * is the source of truth; `design/tokens/mode.json` holds the committed
  * snapshot, and both apps declare the same values in their own `globals.css`.
  *
@@ -44,6 +44,11 @@ declare const baseTokens: TokenSet;
  * placeholder keeps both `bg-primary` and `bg-primary/10` working, while letting
  * the CSS variables stay full colours rather than bare channel triplets.
  *
+ * Mixed in OKLab, not OKLCH: in OKLCH a near-neutral colour loses its hue
+ * against `transparent` and is drawn at hue 0, so zinc-700 #3f3f46 rendered a
+ * reddish grey and #f8fafc a pinkish white. OKLab has no hue to lose, and
+ * every Fasla token draws exactly.
+ *
  * Needs Chrome 111+, Safari 16.2+, Firefox 113+.
  */
 declare const semanticColor: (name: string) => string;
@@ -95,15 +100,32 @@ declare const tailwindSemanticColors: {
     };
     soft: {
         primary: string;
+        "primary-20": string;
+        "primary-30": string;
         secondary: string;
+        "secondary-20": string;
+        "secondary-30": string;
         info: string;
+        "info-20": string;
+        "info-30": string;
+        neutral: string;
         success: string;
+        "success-20": string;
+        "success-30": string;
         warning: string;
+        "warning-5": string;
+        "warning-20": string;
+        "warning-30": string;
         destructive: string;
+        "destructive-20": string;
+        "destructive-30": string;
     };
+    "backdrop-overlay": string;
     "background-inverse": string;
     "foreground-inverse": string;
     "muted-foreground-inverse": string;
+    "base-black": string;
+    "base-white": string;
     "chart-1": string;
     "chart-2": string;
     "chart-3": string;

package/dist/tokens/index.js

@@ -10,8 +10,9 @@ var baseTokens = {
 };
 
 // src/tokens/tailwind.ts
-var semanticColor = (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+var semanticColor = (name) => `color-mix(in oklab, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
 var c = semanticColor;
+var inverse = (name, fallback) => `color-mix(in oklab, var(--${name}, ${fallback}) calc(<alpha-value> * 100%), transparent)`;
 var tailwindSemanticColors = {
   // Surfaces
   background: c("background"),
@@ -37,21 +38,46 @@ var tailwindSemanticColors = {
   success: { DEFAULT: c("success"), foreground: c("success-foreground") },
   warning: { DEFAULT: c("warning"), foreground: c("warning-foreground") },
   info: { DEFAULT: c("info"), foreground: c("info-foreground") },
-  // Soft tints — Figma's `opacity/*` variables, already translucent. The Badge
-  // Soft type lays one over `card`, exactly as Figma stacks the two fills, so
-  // the chip reads the same on any surface. Only `primary` changes in Dark.
+  // Soft tints — Figma's `opacity/*` variables, already translucent. Badge and
+  // Button Soft lay one over `card`, exactly as Figma stacks the two fills, so
+  // they read the same on any surface. `primary` and `secondary` change in
+  // Dark. The `-20` and `-30` steps are Soft Button's Hover and Clicked.
   soft: {
     primary: c("soft-primary"),
+    "primary-20": c("soft-primary-20"),
+    "primary-30": c("soft-primary-30"),
     secondary: c("soft-secondary"),
+    "secondary-20": c("soft-secondary-20"),
+    "secondary-30": c("soft-secondary-30"),
     info: c("soft-info"),
+    "info-20": c("soft-info-20"),
+    "info-30": c("soft-info-30"),
+    neutral: c("soft-neutral"),
     success: c("soft-success"),
+    "success-20": c("soft-success-20"),
+    "success-30": c("soft-success-30"),
     warning: c("soft-warning"),
-    destructive: c("soft-destructive")
+    "warning-5": c("soft-warning-5"),
+    "warning-20": c("soft-warning-20"),
+    "warning-30": c("soft-warning-30"),
+    destructive: c("soft-destructive"),
+    "destructive-20": c("soft-destructive-20"),
+    "destructive-30": c("soft-destructive-30")
   },
+  // The overlay behind a modal: Figma's `custom/backdrop-overlay`, already
+  // translucent, and denser in Dark.
+  "backdrop-overlay": c("backdrop-overlay"),
   // Inverse — a fixed contrast band, not a mode-reactive surface.
-  "background-inverse": c("background-inverse"),
-  "foreground-inverse": c("foreground-inverse"),
-  "muted-foreground-inverse": c("muted-foreground-inverse"),
+  "background-inverse": inverse("background-inverse", "theme(colors.foreground)"),
+  "foreground-inverse": inverse("foreground-inverse", "theme(colors.background)"),
+  "muted-foreground-inverse": inverse(
+    "muted-foreground-inverse",
+    "color-mix(in oklab, theme(colors.background) 75%, theme(colors.foreground))"
+  ),
+  // Fixed black and white: Figma's `colors/base` primitives, the same in Light
+  // and Dark. For a surface that must not flip, such as a phone's body.
+  "base-black": c("base-black"),
+  "base-white": c("base-white"),
   // Charts
   "chart-1": c("chart-1"),
   "chart-2": c("chart-2"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smicolon/fasla-ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Arabic-first React components and blocks, built on shadcn/ui. RTL by default, bilingual by design.",
   "license": "MIT",
   "author": "Smicolon",
@@ -79,25 +79,30 @@
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
+    "@base-ui/react": "^1.9.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^14.2.0",
     "@types/fs-extra": "^11.0.0",
     "@types/prompts": "^2.4.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/semver": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.0",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
     "eslint": "^8.57.0",
     "framer-motion": "^11.0.0",
     "fs-extra": "^11.2.0",
+    "input-otp": "1.5.0",
     "jsdom": "^24.0.0",
     "jsonc-parser": "^3.3.1",
     "lucide-react": "^1.48.0",
     "ora": "^8.0.0",
     "prompts": "^2.4.0",
     "react": "^18.2.0",
+    "react-day-picker": "10.0.2",
     "react-dom": "^18.2.0",
+    "semver": "^7.7.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "vitest": "^1.6.0"