@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/styles/skin-theme.css

@@ -1,137 +0,0 @@
-[data-skin="refined"][data-skin] {
-  /* Geist via next/font (--font-geist-sans); host without it falls to system stack. */
-  --font-sans: var(--font-geist-sans, "Geist"), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Liberation Mono", monospace;
-
-  --text-label: 0.75rem; /* 12px — form labels + small chrome (nav item, tooltip, shortcut) */
-
-  /* Headings run medium, not bold, and pull tight — Geist at -0.03em is the whole voice. */
-  --text-heading-4--font-weight: 500;
-  --text-heading-3--font-weight: 500;
-  --text-heading-2--font-weight: 500;
-  --text-heading-1--font-weight: 500;
-  --text-heading-1--letter-spacing: -0.03em;
-  --text-display--font-weight: 500;
-  --text-display--letter-spacing: -0.03em;
-
-  /* shadcn base names, full colors, authored in oklch (wider gamut, matches Tailwind/shadcn v4); any format still works.
-     Refined brand = four warm-paper neutrals (#FFF / #F5F4F3 / #F4F2F0 / #EEECEA) under a cool ink (#060612), so the
-     page reads as pressed paper and every edge comes from light, not from a line. */
-  --background: oklch(0.984 0.0018 68);
-  --foreground: oklch(0.1304 0.0277 282);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.1304 0.0277 282);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.1304 0.0277 282);
-  --primary: oklch(0.1304 0.0277 282);
-  --primary-foreground: oklch(1 0 0);
-  --muted: oklch(0.9441 0.0034 68);
-  --muted-foreground: oklch(0.5202 0.0094 294);
-  --secondary: oklch(0.9621 0.0034 68);
-  --secondary-foreground: oklch(0.1304 0.0277 282);
-  --accent: oklch(0.9441 0.0034 68);
-  --accent-foreground: oklch(0.1304 0.0277 282);
-  --destructive: oklch(0.568 0.1961 32);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.915 0.004 68 / var(--ring-opacity));
-  --input: oklch(0.915 0.004 68);
-  /* The brand orange only ever lands on the focus ring: white-on-#FF6321 is 2.98:1, so it can never be a fill
-     that carries text. --focus-ring darkens to their button rim (#CF4E17) to clear 3:1 against the paper. */
-  --ring: oklch(0.6931 0.2032 40);
-  --focus-ring: oklch(0.5911 0.1746 40);
-  --primary-text: oklch(0.48 0.16 40); /* links and primary-tone text: the orange darkened until it clears 4.5:1 on paper */
-
-  /* Page canvas, a level below --background/--card/--popover (all elevated surfaces); GitHub Primer calls this `canvas`.
-     Keep it clear of --muted (0.9441): when the two match, every muted surface dropped straight onto the page — a
-     standalone Code block, say — reads as nothing but its ring. Light ladder: muted < secondary < canvas < background < card. */
-  --canvas: oklch(0.9676 0.0017 68);
-
-  /* popover/dropdown/select/dialog all read bg-popover, so this pair frosts them together. 1 = solid; <1 + blur = glass. */
-  --popover-opacity: 1;
-  --backdrop-blur-popover: 0px;
-
-  /* modal overlay (dialog backdrop) — dim and blur are theme-driven; color derives from foreground/background. */
-  --overlay-opacity: 0.2;
-  --backdrop-blur-overlay: 1px;
-
-  /* Edge-fade depth shared by scroll-surface masks. 0 = hard edges. */
-  --scroll-fade-size: 2rem;
-
-  /* elevation controls */
-  --shadow-color: oklch(0.1304 0.0277 282); /* hue every shadow tints with — the ink itself, cool near-black */
-  /* Top-light stays at the alpha their raised chrome uses (white 0.08): invisible on a white card, a bare catch on ink.
-     Recipes scale it by opacity/size knobs too, so --shadow-size:0 extinguishes it with everything else. */
-  --shadow-highlight: oklch(1 0 0 / 0.08);
-  --shadow-size: 1; /* global geometry multiplier: 1 = default depth, 0 = flat */
-  --shadow-opacity: 1; /* global alpha multiplier: 1 = default density, 0 = invisible */
-
-  /* THE radius knob; @theme surface scale + --radius-control both derive from it — squares (0) or rounds whole UI. */
-  --radius: 0.5rem;
-  /* Controls sit at THE radius, not a multiple of it: an 8px corner on a 36px button is the rounded rect they use everywhere. */
-  --radius-control: var(--radius);
-
-  /* Progressive enhancement over border-radius; `round` = current look, squircle/superellipse(2)/scoop reshape Control UI surfaces. */
-  /* Squircle reads ~half as round as a circular arc at same radius; browsers w/o corner-shape support fall back to
-     plain round and look over-rounded. This ratio shrinks the fallback radius (squircle only, see @supports not
-     below) to keep cross-browser look close. 1 = no change, 0.5 = halve. */
-
-  /* Floating-list (select/dropdown) concentric corners: container radius = row radius + padding, so hovered row nests exactly. */
-  --popover-padding: 0.25rem; /* gap between container edge and rows (also = p-* on the popup) */
-  --radius-popup-item: calc(var(--radius-control) * 0.6); /* select/menu row corner */
-  /* Container corner = fitted row radius + padding - 1px: ring-clip nests concentric rows with slack,
-     1px tighter hugs snugly (~1.6px clearance); clamp collapses offset to 0 when --radius is 0. */
-
-  /* content density for the rounded surfaces (bubble / composer field) */
-  --padding-x: 1rem;
-  --padding-y: 0.625rem;
-
-  /* One base height; xs/sm/md/lg are computed (proportional ramp), shared by button/select/menu/input.
-     --padding-y stays for content-sized surfaces (bubble/composer). */
-  --control-h: 2.25rem; /* md — THE base height; ramp derives from it */
-  /* round() snaps to whole px: unrounded step ceils scrollHeight past clientHeight, Base UI reads as phantom 1px overflow. */
-
-  /* motion — curves are raw vars so they can be swapped live */
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
-  --duration-fast: 150ms;
-  --duration-base: 200ms;
-  --duration-slow: 300ms;
-}
-
-/* Semantic rungs re-declared on the skin root so portal-scoped radius changes resolve locally;
-   the sm–2xl scale is a derived-tier default in core theme.css. */
-[data-skin="refined"][data-skin] {
-  --radius-field: var(--radius); /* user bubble, composer shell */
-  /* Kraftbase rounds every content surface the same 8px; only the scene-scale frames go bigger. */
-  --radius-panel: var(--radius);
-  --radius-scene: calc(var(--radius) * 2); /* scene frame, large media */
-}
-
-:where(.dark) [data-skin="refined"][data-skin],
-.dark[data-skin="refined"][data-skin] {
-  --background: oklch(0.1852 0.0113 250);
-  --foreground: oklch(0.9645 0.0033 250);
-  --card: oklch(0.2153 0.0121 250);
-  --card-foreground: oklch(0.9645 0.0033 250);
-  --popover: oklch(0.2153 0.0121 250);
-  --popover-foreground: oklch(0.9645 0.0033 250);
-  --primary: oklch(0.9645 0.0033 250);
-  --primary-foreground: oklch(0.1852 0.0113 250);
-  --muted: oklch(0.2668 0.0128 250);
-  --muted-foreground: oklch(0.7405 0.0104 260);
-  --secondary: oklch(0.2412 0.0124 250);
-  --secondary-foreground: oklch(0.9645 0.0033 250);
-  --accent: oklch(0.2864 0.0132 250);
-  --accent-foreground: oklch(0.9645 0.0033 250);
-  --destructive: oklch(0.551 0.1799 32);
-  --destructive-foreground: oklch(0.9645 0.0033 250);
-  --border: oklch(0.3082 0.0139 250 / var(--ring-opacity));
-  --input: oklch(0.3082 0.0139 250);
-  --ring: oklch(0.6931 0.2032 40);
-  --focus-ring: oklch(0.72 0.19 42);
-  --primary-text: oklch(0.78 0.16 42);
-  --canvas: oklch(0.1322 0.0113 250);
-  --shadow-color: oklch(0 0 0);
-  /* In dark the inner top light is a faint edge catch, not a glow. */
-  --shadow-highlight: oklch(1 0 0 / 0.055);
-}

package/dist/styles/skin.css

@@ -1,143 +0,0 @@
-/* Only what Tailwind classes cannot say — everything else lives in skin.config or theme.css. */
-
-/* Refined separates surfaces with light, never a line. Raised chrome catches a top gloss and drops a soft shadow;
-   recessed chrome sinks under an inner one. Recess comes in two depths because blur has to match the anatomy: a
-   diffuse well fills a 20px chip with haze instead of reading as depth, so small chrome gets a tight top lip.
-   All of it is pack vars, not contract tokens: --shadow-inset is one recess depth, and refined needs two. */
-[data-skin="refined"] {
-  /* Every surface is rimmed: the rim draws the edge, the shadow gives it depth. A recessed edge catches the
-     light, so its rim is a step lighter than the surface it cuts into — which lands on white over paper and on
-     a faint lift in the dark. Raised chrome keeps the plain --border hairline; without both halves the well
-     reads as a smudge instead of an engraving. */
-  --refined-rim: oklch(from var(--secondary) calc(l + 0.04) c h);
-
-  --refined-gloss: inset 0 1.4px 1px 0 var(--shadow-highlight);
-  --refined-lift: 0 2px 4px 0 oklch(from var(--shadow-color) l c h / 0.05), 0 14px 20px 0 oklch(from var(--shadow-color) l c h / 0.05);
-  --refined-lift-sm: 0 2.5px 6px 0 oklch(from var(--shadow-color) l c h / 0.1);
-
-  /* Surfaces deep enough to hold content sink all round; anything shorter takes the lip instead. */
-  --refined-well: inset 0 0 6px 0 oklch(from var(--shadow-color) l c h / 0.18);
-  --refined-press:
-    inset 0 2px 4px -2px oklch(from var(--shadow-color) l c h / 0.18), inset 0 1px 1px 0 oklch(from var(--shadow-color) l c h / 0.18);
-
-  /* A solid button carries no drop shadow at all — it reads raised from a rim one step lighter than its own fill. */
-  --refined-solid-rim: 0 0 0 1.4px oklch(from var(--primary) calc(l + 0.28) c h);
-
-  /* A saturated fill swallows both: the rim has to go darker than the fill to survive, and the drop needs three
-     times the density to show under it. Ring, gloss and drop together are the only place all three stack. */
-  --refined-tint-emboss:
-    0 0 0 1px oklch(from var(--destructive) calc(l - 0.11) c h), inset 0 1.4px 1px 0 oklch(1 0 0 / 0.12),
-    0 1.4px 4px 0 oklch(from var(--shadow-color) l c h / 0.3);
-}
-
-/* Ink and paper swap, so the rim that was lighter than the fill has to go darker to stay a rim. */
-:where(.dark) [data-skin="refined"],
-.dark[data-skin="refined"] {
-  --refined-solid-rim: 0 0 0 1.4px oklch(from var(--primary) calc(l - 0.28) c h);
-}
-
-@layer base {
-  /* Body-level, not a utility: type rendering is inherited, so portalled popups pick it up too. */
-  :root[data-skin="refined"] body {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
-
-@layer components {
-  /* ── raised ─────────────────────────────────────────────────────────────── */
-
-  [data-skin="refined"] :where([data-control-family="card"][data-slot="root"]) {
-    --cui-card-shadow: var(--refined-lift);
-  }
-
-  [data-skin="refined"]
-    :where(
-      [data-control-family="popup"][data-popup-part="surface"],
-      [data-control-family="popup"][data-popup-part="list-surface"],
-      [data-control-family="popup"][data-popup-part="bar"]
-    ) {
-    --cui-popup-shadow: var(--refined-lift);
-  }
-
-  [data-skin="refined"]
-    :where(
-      [data-control-ui="button"][data-slot="root"][data-variant="solid"][data-control-family="button"],
-      [data-control-ui="toggle"][data-slot="root"][data-variant="solid"][data-control-family="button"]
-    ) {
-    --cui-button-shadow: var(--refined-gloss), var(--refined-solid-rim);
-  }
-
-  [data-skin="refined"] :where([data-control-family="button"][data-tone="danger"][data-variant="solid"]) {
-    --cui-button-shadow: var(--refined-tint-emboss);
-  }
-
-  [data-skin="refined"]
-    :where(
-      [data-control-ui="button"][data-slot="root"][data-variant="surface"][data-control-family="button"],
-      [data-control-ui="toggle"][data-slot="root"][data-variant="surface"][data-control-family="button"]
-    ) {
-    --cui-button-background: var(--card);
-    --cui-button-shadow: inset 0 0 0 1px var(--border), var(--refined-lift-sm);
-    --cui-button-active-shadow: inset 0 0 0 1px oklch(from var(--primary) l c h / 0.6), var(--refined-lift-sm);
-  }
-
-  [data-skin="refined"] :where([data-control-family="range"][data-slot="root"]) {
-    --cui-range-thumb-shadow: var(--refined-lift-sm);
-  }
-
-  /* ── recessed ───────────────────────────────────────────────────────────── */
-
-  [data-skin="refined"] :where([data-control-family="field"][data-control="true"]) {
-    --cui-field-background: var(--secondary);
-    --cui-field-border-color: var(--refined-rim);
-    --cui-field-focus-border-color: var(--focus-ring);
-    --cui-field-shadow: var(--refined-well);
-  }
-
-  [data-skin="refined"] :where([data-control-family="code"][data-slot="root"]) {
-    --cui-code-background: var(--secondary);
-    --cui-code-border-color: var(--refined-rim);
-    --cui-code-shadow: var(--refined-well);
-  }
-
-  [data-skin="refined"] :where([data-control-family="tabs"][data-slot="root"]) {
-    --cui-tabs-list-background: var(--secondary);
-    --cui-tabs-list-shadow: inset 0 0 0 1px var(--refined-rim), var(--refined-well);
-    --cui-tabs-indicator-shadow: var(--refined-lift-sm);
-  }
-
-  [data-skin="refined"] :where([data-control-family="kbd"][data-slot="root"]) {
-    --cui-kbd-background: var(--secondary);
-    --cui-kbd-border-color: var(--refined-rim);
-    --cui-kbd-shadow: var(--refined-press);
-  }
-
-  /* A chip is neither raised nor sunk — it is delineated. Kraftbase rims every pill and shadows none. */
-  [data-skin="refined"] :where([data-control-family="badge"][data-slot="root"]) {
-    --cui-badge-border-color: var(--border);
-  }
-
-  [data-skin="refined"]
-    :where(
-      [data-control-family="range"][data-range-kind="slider"][data-slot="track"],
-      [data-control-family="range"][data-range-kind="progress"][data-slot="track"],
-      [data-control-family="range"][data-range-kind="meter"][data-slot="track"]
-    ) {
-    box-shadow:
-      inset 0 0 0 1px var(--refined-rim),
-      var(--refined-press);
-  }
-
-  /* A switch is the one control that inverts on state: the track is a groove until it fills, then it is a lit key. */
-  [data-skin="refined"] :where([data-control-family="switch"][data-slot="root"]) {
-    --cui-switch-thumb-shadow: var(--refined-lift-sm);
-    box-shadow:
-      inset 0 0 0 1px var(--refined-rim),
-      var(--refined-press);
-  }
-
-  [data-skin="refined"] :where([data-control-family="switch"][data-slot="root"][data-checked]) {
-    box-shadow: var(--refined-gloss), var(--refined-solid-rim);
-  }
-}