@evinvest/uikit 0.17.1 → 0.18.0

package/README.md

@@ -51,7 +51,7 @@ your Tailwind v4 entrypoint — this is the load-bearing part of the kit:
 | surfaces | `background` `card` `popover` `muted` `hover` |
 | ink | `ink` `ink-mid` `ink-soft` — hierarchy, loudest first |
 | lines | `border` `input` `ring` |
-| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled |
+| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface (`#128377` fill under a white `on-primary`, `#2a9d8f` ink) |
 | scalars | `radius` `control-radius` `control-py` `display-scale` `band-py` `page-max` `page-px` `shadow-*` `font-*` |
 | charts | `chart-1` … `chart-5` |
 
@@ -63,6 +63,17 @@ A surface takes its ink from the scope, so it carries no `-foreground`. A
 **filled role** does not — gold wants black and navy wants white regardless of
 polarity — so `on-{role}` exists exactly there.
 
+A fill and an ink are different jobs, and `primary` is the one role that
+names them separately: `primary` is the fill (`bg-primary text-on-primary` on
+a button, a checked switch or checkbox — `#128377`, white reads on it at
+4.63:1 and it clears 3:1 against `background`, `secondary`, `card` and
+`popover`) and `primary-ink` is the same hue as ink (`text-primary-ink` on a
+link or eyebrow, a radio dot, a slider range, `border-primary-ink` on a checked
+outline, the focus `ring` — `#2a9d8f`, 5.85:1 on `background`, 4.72:1 on
+`card`). Every other role holds its own label and reads as ink with one value.
+A consumer sheet must define `--primary-ink`; see
+[`docs/spec/accents.md`](../../docs/spec/accents.md).
+
 Accents are decorative and **ordered by significance**, quiet to loud. Pick a
 rung by how loud the thing should be, never by what it means; see
 [`docs/spec/accents.md`](../../docs/spec/accents.md). Every consumer defines all
@@ -78,11 +89,6 @@ state, never its appearance (`Red`) and never its selection (`Default`); see
 and carries EV's values: a single dark palette on `:root, .dark`. A consumer
 with two polarities writes its own sheet against the same names.
 
-`text-main-mist`, `bg-sidebar`, `text-muted-foreground` and the rest keep
-working, and the current tokens are re-pointed at the old values so rendered
-colour is unchanged. Import it instead while migrating; it goes away once every
-consumer has moved.
-
 ## Usage
 
 ```tsx

package/dist/index.d.ts

@@ -254,7 +254,7 @@ declare const buttonVariantClasses: {
     readonly outline: "border bg-transparent shadow-xs hover:bg-hover hover:text-ink";
     readonly ghost: "hover:bg-hover hover:text-ink";
     readonly destructive: "bg-accent-error text-on-accent-error hover:bg-accent-error/90 focus-visible:ring-accent-error/20";
-    readonly link: "text-primary underline-offset-4 hover:underline";
+    readonly link: "text-primary-ink underline-offset-4 hover:underline";
 };
 type ButtonVariant = keyof typeof buttonVariantClasses;
 declare const buttonSizeClasses: {

package/dist/index.js

@@ -718,7 +718,7 @@ var buttonVariantClasses = {
   "outline": "border bg-transparent shadow-xs hover:bg-hover hover:text-ink",
   "ghost": "hover:bg-hover hover:text-ink",
   "destructive": "bg-accent-error text-on-accent-error hover:bg-accent-error/90 focus-visible:ring-accent-error/20",
-  "link": "text-primary underline-offset-4 hover:underline"
+  "link": "text-primary-ink underline-offset-4 hover:underline"
 };
 var buttonSizeClasses = {
   "xs": "h-7 gap-1 px-2 text-xs has-[>svg]:px-1.5",
@@ -940,7 +940,7 @@ var emptyMediaVariants = {
   "icon": "bg-muted text-ink flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
 };
 var EMPTY_TITLE = "text-lg font-medium tracking-tight";
-var EMPTY_DESCRIPTION = "text-ink-soft [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4";
+var EMPTY_DESCRIPTION = "text-ink-soft [&>a:hover]:text-primary-ink text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4";
 var EMPTY_CONTENT = "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance";
 
 // src/components/empty.tsx
@@ -1042,9 +1042,9 @@ var FIELD_SET = "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has
 var FIELD_LEGEND = "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm";
 var FIELD_GROUP = "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4";
 var FIELD_CONTENT = "group/field-content flex flex-1 flex-col gap-1.5 leading-snug";
-var FIELD_LABEL = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary";
+var FIELD_LABEL = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary-ink/5 has-data-[state=checked]:border-primary-ink";
 var FIELD_TITLE = "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50";
-var FIELD_DESCRIPTION = "text-ink-soft text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4";
+var FIELD_DESCRIPTION = "text-ink-soft text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary-ink [&>a]:underline [&>a]:underline-offset-4";
 var FIELD_SEPARATOR = "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2";
 var FIELD_SEPARATOR_LINE = "absolute inset-0 top-1/2 shrink-0 bg-border h-px w-full";
 var FIELD_SEPARATOR_CONTENT = "bg-background text-ink-soft relative mx-auto block w-fit px-2";
@@ -1653,7 +1653,7 @@ var itemMediaVariants = {
 };
 var ITEM_CONTENT = "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none";
 var ITEM_TITLE = "flex w-fit items-center gap-2 text-sm leading-snug font-medium";
-var ITEM_DESCRIPTION = "text-ink-soft line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4";
+var ITEM_DESCRIPTION = "text-ink-soft line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary-ink [&>a]:underline [&>a]:underline-offset-4";
 var ITEM_ACTIONS = "flex items-center gap-2";
 var ITEM_HEADER = "flex basis-full items-center justify-between gap-2";
 var ITEM_FOOTER = "flex basis-full items-center justify-between gap-2";
@@ -1957,8 +1957,8 @@ function PaginationEllipsis({
 import "react";
 
 // src/generated/progress.ts
-var PROGRESS_TRACK = "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full";
-var PROGRESS_INDICATOR = "bg-primary h-full w-full flex-1 transition-all";
+var PROGRESS_TRACK = "bg-primary-ink/20 relative h-2 w-full overflow-hidden rounded-full";
+var PROGRESS_INDICATOR = "bg-primary-ink h-full w-full flex-1 transition-all";
 
 // src/components/progress.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -2476,7 +2476,7 @@ var SECTION_BASE = "w-full px-[var(--page-px)]";
 var SECTION_PY = "py-[var(--band-py)]";
 var SECTION_PY_TIGHT = "py-[var(--band-py-tight)]";
 var SECTION_HEAD = "flex flex-col gap-2 md:gap-3.5";
-var EYEBROW = "font-medium text-[10px] md:text-[11.5px] tracking-[0.15em] md:tracking-[0.16em] text-primary";
+var EYEBROW = "font-medium text-[10px] md:text-[11.5px] tracking-[0.15em] md:tracking-[0.16em] text-primary-ink [.bg-primary_&]:text-on-primary";
 var DISPLAY_BASE = "font-display [font-weight:700] max-w-[54rem] tracking-[-0.005em] leading-[1.16] md:leading-[1.14] text-[calc(1.5625rem*var(--display-scale))] md:text-[calc(2.625rem*var(--display-scale))]";
 var LEDE = "max-w-[52rem] text-[15px] md:text-[17px] leading-[1.58] text-ink-soft";
 var PROSE = "text-[14px] md:text-[15px] leading-[1.62] text-ink-soft";
@@ -2934,7 +2934,7 @@ import * as React45 from "react";
 
 // src/generated/radio-group.ts
 var RADIO_GROUP_ROOT = "grid gap-3";
-var RADIO_GROUP_ITEM = "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+var RADIO_GROUP_ITEM = "border-input text-primary-ink focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
 
 // src/components/radio-group.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
@@ -3028,7 +3028,7 @@ function RadioGroupItem({
           children: /* @__PURE__ */ jsx35(
             "svg",
             {
-              className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
+              className: "fill-primary-ink absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
               viewBox: "0 0 24 24",
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsx35("circle", { cx: "12", cy: "12", r: "10" })
@@ -3046,8 +3046,8 @@ import * as React46 from "react";
 // src/generated/slider.ts
 var SLIDER_ROOT = "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col";
 var SLIDER_TRACK = "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5";
-var SLIDER_RANGE = "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full";
-var SLIDER_THUMB = "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-ink shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
+var SLIDER_RANGE = "bg-primary-ink absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full";
+var SLIDER_THUMB = "border-primary-ink ring-ring/50 block size-4 shrink-0 rounded-full border bg-ink shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
 
 // src/components/slider.tsx
 import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";