@vectramindnpm/unified-design-system 0.1.0 → 0.2.0

package/README.md

@@ -111,36 +111,39 @@ independently confirmed visually.)
 
 `Button` originally had **19 `variant` values** conflating four unrelated things: color/
 emphasis, shape (pill vs. rounded), fixed footer sizing, and one-off page-specific skins.
-Redesigned into three independent, composable axes instead:
+Redesigned into independent, composable axes instead:
 
 ```tsx
-variant: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link"   // 6
+variant: "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link"   // 6 semantic colors
+        | "borderPrimary" | "deptedit" | "submenu"                               // page-context presets
+        | "cancel" | "save" | "close"
+        | "formButtonSubmit" | "formButtonCancel" | "formButtonBack"
 size:    "default" | "sm" | "lg" | "icon" | "iconLg"                              // unchanged
 shape?:  "default" | "pill"                                                       // NEW
 selected?: boolean                                                                // unchanged
 ```
 
-Nothing else in this package used any variant beyond `"ghost"` internally (checked before
-making this change), and the package has no external consumers yet, so this was a clean
-breaking change with nothing to migrate. Mapping from the old 19 to the new API:
+Originally shipped (v0.1.x) with only the 6 semantic colors — the 9 "preset" variants below
+were deliberately left out, on the theory that fixed page-context styling (specific sizing +
+a one-off color skin) belonged in a consumer's own `className`, not the shared component.
+That held up fine in isolation, but once a real consumer (Firstpass-Neo) migrated ~90 call
+sites, the same `className` string ended up duplicated across dozens of files with no single
+place to update it. Re-added in v0.2.0 as named variants for exactly that reason — each is a
+self-contained preset (see `PRESET_BASE`/`PRESET_OVERRIDE` in `button.tsx`) that doesn't
+interact with `shape`/`selected` at all, so it's safe to combine with them if you ever need to
+(you generally won't - just use the variant alone).
 
-| Old `variant` | New equivalent | Note |
+Mapping from the original 19 to the current API:
+
+| Old `variant` | Current equivalent | Note |
 |---|---|---|
-| `default` (purple) **and** `primary` (blue) | `variant="primary"` | Consolidated to one color — the token-driven `interactive-brand` (purple), not the hardcoded blue. If you specifically need the old blue, add `className="bg-[var(--color-brand-blue)]"`. |
+| `default` (purple) **and** `primary` (blue) | `variant="primary"` | Consolidated to one color — the token-driven `interactive-brand` (purple), not the hardcoded blue. The two hex values are ~identical anyway (`#5D62B5` vs `#5c62bc`), so this is not a visible change. |
 | `secondary`, `destructive`, `outline`, `ghost` | same name, unchanged | No visual change. |
+| `lang` | `variant="ghost"` | One-off page skin, not worth a dedicated preset for its single call site — the only difference from `ghost` was a missing hover effect, not worth preserving. |
 | `pill` | `shape="pill"` (with any `variant`) | Combine, e.g. `variant="outline" shape="pill"`. |
-| `borderPrimary` | `variant="outline"` | Brand-colored border was a one-off tint — add `className="border-interactive-brand text-interactive-brand"` to restore it exactly. |
+| `borderPrimary`, `deptedit`, `submenu`, `cancel`, `save`, `close`, `formButtonSubmit`, `formButtonCancel`, `formButtonBack` | same name, now a real `variant` again | Just `variant="cancel"` etc. — no `shape`/`className` needed, each preset is fully self-contained. `deptedit` no longer includes the legacy `dept-edit-btn` className-sniffing hack (pass the variant explicitly). |
 | `refreshIcon` | **removed** — use `<ButtonIcon variant="refresh" />` | That's already `ButtonIcon`'s job; `Button` doesn't need to duplicate it. |
 | `selectedIcon` | **removed** — use `<ButtonIcon variant="filled" />` or `<Button variant="primary" size="icon">` | Same reasoning. |
-| `lang` | `variant="ghost"` + `className` | One-off page skin, not a reusable color. |
-| `submenu` | `variant="outline" shape="pill" size="sm"` + `className` | Same. |
-| `deptedit` | `variant="ghost"` + `className="text-interactive-brand hover:bg-[var(--color-ext-eef2ff)]"` | Also drops the legacy `dept-edit-btn` className-sniffing hack entirely. |
-| `cancel` | `variant="outline"` + `className="h-9 px-5 border-[var(--color-button-cancel)] text-[var(--color-button-cancel)]"` | Footer trio: fixed sizing + color both become explicit `className`, since they're page-context, not a semantic color. |
-| `save` | `variant="primary"` + `className="h-9 px-5"` | |
-| `close` | `variant="secondary"` + `className="h-9 px-5"` | |
-| `formButtonSubmit` | `variant="primary" shape="pill"` + `className="h-9 px-6"` | |
-| `formButtonCancel` | `variant="outline" shape="pill"` + `className` for the soft-pink tone | |
-| `formButtonBack` | `variant="outline" shape="pill"` + `className="h-9 px-6"` | |
 
 `link` is genuinely new (no old equivalent) — a text-only, underline-on-hover variant with
 no padding/height, the one common pattern the original 19 never actually had.

package/dist/index.cjs

@@ -748,7 +748,17 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
         destructive: "",
         outline: "",
         ghost: "",
-        link: ""
+        link: "",
+        // Page-context presets - see PRESET_BASE/PRESET_OVERRIDE.
+        borderPrimary: "",
+        deptedit: "",
+        submenu: "",
+        cancel: "",
+        save: "",
+        close: "",
+        formButtonSubmit: "",
+        formButtonCancel: "",
+        formButtonBack: ""
       },
       size: {
         default: "",
@@ -784,6 +794,28 @@ var variantClasses = {
 var variantStyles = {
   secondary: { ["--btn-secondary-color"]: color3.text.cancel }
 };
+var PRESET_BASE = {
+  borderPrimary: "outline",
+  deptedit: "ghost",
+  submenu: "outline",
+  cancel: "outline",
+  save: "primary",
+  close: "secondary",
+  formButtonSubmit: "primary",
+  formButtonCancel: "outline",
+  formButtonBack: "outline"
+};
+var PRESET_OVERRIDE = {
+  borderPrimary: "border-interactive-brand text-interactive-brand rounded-lg",
+  deptedit: "rounded-lg transition-colors text-interactive-brand hover:bg-[var(--color-ext-eef2ff)]",
+  submenu: "px-[1.375rem] py-[0.1875rem] rounded-[0.7rem] text-[0.75rem] font-medium text-[var(--color-button-submenu-text)] border border-[var(--color-ext-0000001a)] bg-transparent whitespace-nowrap shrink-0 transition-colors",
+  cancel: "h-9 px-5 rounded-lg border border-[var(--color-button-cancel)] text-[var(--color-button-cancel)] bg-transparent hover:bg-[var(--color-button-cancel-hover-bg)] text-[0.8125rem] font-medium transition-colors",
+  save: "h-9 px-5 rounded-lg text-white bg-[var(--color-brand-blue)] hover:opacity-85 text-[0.8125rem] font-semibold transition-colors disabled:cursor-not-allowed",
+  close: "h-9 px-5 rounded-lg border border-neutral-350 text-neutral-700 bg-neutral-white hover:bg-neutral-100 text-[0.8125rem] font-medium transition-colors",
+  formButtonSubmit: "h-9 px-6 rounded-[50px] font-medium text-[0.8125rem] active:scale-[0.98] transition-all bg-interactive-brand text-white hover:bg-[var(--color-button-formsubmit-hover-bg)] shadow-sm hover:shadow-md disabled:bg-neutral-450 disabled:text-neutral-900 disabled:cursor-not-allowed disabled:hover:bg-neutral-350 disabled:shadow-none",
+  formButtonCancel: "h-9 px-6 rounded-[50px] font-medium text-[0.8125rem] active:scale-[0.98] transition-all bg-[var(--color-button-formcancel-bg)] hover:bg-[var(--color-button-formcancel-hover-bg)] text-[var(--color-toast-danger-bg)] shadow-none hover:shadow-none",
+  formButtonBack: "h-9 px-6 rounded-[50px] font-medium text-[0.8125rem] active:scale-[0.98] transition-all bg-neutral-white hover:bg-neutral-100 text-interactive-brand border border-interactive-brand shadow-none hover:shadow-none"
+};
 var sizeClasses = {
   default: "px-4 py-1",
   sm: "h-8 px-3 py-2 rounded-md",
@@ -809,6 +841,8 @@ var Button = React4.forwardRef(
     const isPill = shape === "pill";
     const isLink = finalVariant === "link";
     const isIconButton = finalSize === "icon" || finalSize === "iconLg";
+    const colorBase = PRESET_BASE[finalVariant] ?? finalVariant;
+    const presetOverride = PRESET_OVERRIDE[finalVariant];
     const baseClasses2 = cn(
       "inline-flex items-center justify-center gap-2 font-medium text-body rounded-md disabled:opacity-50",
       isIconButton ? "focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-within:ring-0" : "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-interactive-brand"
@@ -816,15 +850,18 @@ var Button = React4.forwardRef(
     const composed = cn(
       baseClasses2,
       isPill ? "rounded-full" : "",
-      variantClasses[finalVariant],
+      variantClasses[colorBase],
       // Link never carries the size scale's own padding/height — it reads as inline text.
       isLink ? "h-auto p-0" : isPill ? pillSizeClasses[finalSize] : sizeClasses[finalSize],
       isPill ? selected ? pillSelected : pillUnselected : selected ? selectedGradient : "",
       isPill && props.disabled ? pillDisabled : "",
+      // Preset's own styling always wins over the base variant/size classes above it, but
+      // still loses to a `className` the consumer explicitly passes (buttonVariants(), next).
+      presetOverride,
       buttonVariants({ variant: finalVariant, size: finalSize, shape, className })
     );
     const mergedStyle = {
-      ...variantStyles[finalVariant],
+      ...variantStyles[colorBase],
       ...isPill && selected ? { ["--pill-selected-bg"]: `${color3.text.blue}24` } : void 0,
       ...style
     };