@trading-game/design-intelligence-layer 0.8.7 → 0.8.8

package/README.md

@@ -247,6 +247,8 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `bg-popover` | `--popover` | `#FFFFFF` | Popover/dropdown surface |
 | `bg-subtle` | `--subtle` | `#F5F5F5` | Subtle tinted surface |
 | `bg-overlay` | `--overlay` | black 50% | Modal/dialog backdrop only |
+| `bg-tabs` | `--tabs` | black 4% alpha | Tab container background (`variant="default"`) |
+| `bg-tabs-active` | `--tabs-active` | `#FFFFFF` | Active / selected tab pill |
 | `bg-primary` | `--primary` | `#2323FF` | Brand blue — CTAs |
 | `bg-primary-hover` | `--primary-hover` | `#0B0BD2` | Primary button hover (darker blue) |
 | `bg-secondary-hover` | `--secondary-hover` | `#EEEEEE` | Outline/secondary hover (light grey) |
@@ -320,6 +322,23 @@ Opacity on tokens is allowed and encouraged:
 ❌ bg-white                → NOT a token, use bg-background or bg-card
 ```
 
+### Primitive alpha scales
+
+For structured alpha surfaces, the design system ships two internal alpha primitive scales. These are **CSS variables only** — not exposed as Tailwind utility classes. Always reference them via a semantic token, never directly in components.
+
+```
+--primitive-mono-alpha-4  through --primitive-mono-alpha-80   (black at N%)
+--primitive-blue-alpha-4  through --primitive-blue-alpha-80   (brand blue at N%)
+Stops: 4 · 8 · 16 · 24 · 32 · 40 · 50 · 64 · 80
+```
+
+Example — how `--tabs` uses the alpha scale:
+```css
+--tabs: var(--primitive-mono-alpha-4); /* black at 4% — tab container background */
+```
+
+> `--primitive-black-50` is deprecated. It now aliases `--primitive-mono-alpha-50`. The `--overlay` semantic token is unaffected.
+
 ---
 
 ## Typography

package/dist/index.cjs

@@ -4884,10 +4884,12 @@ function SelectTrigger(_a) {
   var _b = _a, {
     className,
     size = "default",
+    readOnly = false,
     children
   } = _b, props = __objRest(_b, [
     "className",
     "size",
+    "readOnly",
     "children"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
@@ -4895,14 +4897,16 @@ function SelectTrigger(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "select-trigger",
       "data-size": size,
+      "data-readonly": readOnly ? "" : void 0,
+      disabled: readOnly || props.disabled,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle",
+        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-background appearance-none px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
         className
       )
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui26.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui26.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react18.ChevronDownIcon, { className: cn("size-4", readOnly ? "opacity-30" : "opacity-50") }) })
       ]
     })
   );
@@ -6207,7 +6211,7 @@ var tabsListVariants = (0, import_class_variance_authority11.cva)(
   {
     variants: {
       variant: {
-        default: "bg-subtle",
+        default: "bg-tabs",
         line: "gap-1 bg-transparent"
       },
       size: {
@@ -6260,7 +6264,7 @@ function TabsTrigger(_a) {
         "group-data-[size=sm]/tabs-list:gap-1 group-data-[size=sm]/tabs-list:rounded-sm group-data-[size=sm]/tabs-list:px-2 group-data-[size=sm]/tabs-list:text-xs",
         "group-data-[size=lg]/tabs-list:gap-2 group-data-[size=lg]/tabs-list:rounded-lg group-data-[size=lg]/tabs-list:px-4 group-data-[size=lg]/tabs-list:text-base",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:hover:bg-transparent group-data-[variant=line]/tabs-list:hover:text-primary group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent",
-        "data-[state=active]:bg-background data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
+        "data-[state=active]:bg-tabs-active data-[state=active]:border-transparent data-[state=active]:text-primary data-[state=active]:font-semibold",
         "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         iconPosition === "top" && "h-auto flex-col gap-1 py-2",
         iconPosition === "top" && "group-data-[size=sm]/tabs-list:gap-0.5 group-data-[size=sm]/tabs-list:py-1.5",