@codenhub/styles 0.0.3 → 0.1.0

package/dist/tw/native.css

@@ -0,0 +1,203 @@
+@import "./theme.css";
+@reference "tailwindcss";
+@source not "../dist";
+@source not "../tests";
+@source not "../dev";
+@source not "../debug";
+@source not "../playground";
+@import "./typography.css";
+@import "./utilities/index.css";
+@import "./components/index.css";
+@import "./reset.css";
+
+/* `intent.css`'s reset keys on class names; these bare elements need the same,
+   or a `color-mix()` reading an undefined `--intent-*` drops silently. Zero
+   specificity like the class reset, values matching it slot for slot -- a bare
+   `<code>` and a `.code` chip are one component reached two ways. */
+:where(table, kbd, code, pre, blockquote, hr, input, textarea, select, button) {
+  --intent-color: var(--color-text);
+  --intent-contrast: var(--color-text-contrast);
+  --intent-hover: var(--color-text-hover);
+  --intent-strong: var(--color-text-strong);
+  --intent-subtle: var(--color-surface);
+  --intent-border: var(--ui-ink, var(--color-border));
+  --intent-fill-max: 20%;
+}
+
+/* Native text controls need the same stronger neutral boundary as their classed
+   counterparts, without changing buttons, checkboxes, radios, or other inputs. */
+:where(
+  input:not([type]),
+  input[type="text"],
+  input[type="number"],
+  input[type="email"],
+  input[type="password"],
+  input[type="url"],
+  input[type="tel"],
+  input[type="search"],
+  input[type="month"],
+  input[type="week"],
+  input[type="time"],
+  input[type="date"],
+  input[type="datetime-local"],
+  textarea,
+  select
+) {
+  --intent-border: var(--ui-ink, var(--color-control-border));
+}
+
+:where(hr) {
+  --intent-color: currentColor;
+  --intent-border: currentColor;
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd,
+  ul,
+  ol {
+    margin: 0;
+  }
+
+  /* Headings */
+  h1 {
+    @apply text-title-lg;
+  }
+
+  h2 {
+    @apply text-title;
+  }
+
+  h3 {
+    @apply text-title-sm;
+  }
+
+  h4 {
+    @apply text-label-lg;
+  }
+
+  h5,
+  h6 {
+    @apply text-label;
+  }
+
+  p,
+  li,
+  a {
+    @apply text-body;
+  }
+
+  /* Content */
+  table {
+    @apply data-table;
+  }
+
+  kbd {
+    @apply kbd;
+  }
+
+  blockquote {
+    @apply quote;
+  }
+
+  q {
+    @apply quote-inline;
+  }
+
+  code {
+    @apply code;
+  }
+
+  pre {
+    @apply pre;
+  }
+
+  pre code {
+    @apply bg-transparent p-0;
+  }
+
+  hr {
+    @apply divider;
+  }
+
+  /* Form controls. Every text-like type maps onto `.ipt` for the shared chrome
+     and nothing else -- an icon is a wrapper composition (`.input-group`), not a
+     property of the type, so no type paints one. */
+  input:not([type]),
+  input[type="text"],
+  input[type="number"],
+  input[type="email"],
+  input[type="password"],
+  input[type="url"],
+  input[type="tel"],
+  input[type="search"],
+  input[type="month"],
+  input[type="week"],
+  input[type="time"],
+  input[type="date"],
+  input[type="datetime-local"] {
+    @apply ipt;
+  }
+
+  textarea {
+    @apply textarea;
+  }
+
+  select {
+    @apply select;
+  }
+
+  input[type="checkbox"] {
+    @apply checkbox;
+  }
+
+  input[type="radio"] {
+    @apply radio;
+  }
+
+  /* Buttons */
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    @apply btn;
+  }
+}
+
+@media (forced-colors: active) {
+  input[type="checkbox"],
+  input[type="radio"] {
+    /* Keep these explicit system colors from being forced back to transparent. */
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+    transition: none;
+  }
+
+  input[type="checkbox"]:checked {
+    background-color: Highlight;
+    border-color: Highlight;
+
+    &::after {
+      background-color: HighlightText;
+    }
+  }
+
+  input[type="radio"]:checked {
+    background-color: Canvas;
+    border-color: Highlight;
+
+    &::after {
+      background-color: Highlight;
+    }
+  }
+}

package/dist/tw/presentation.css

@@ -0,0 +1,77 @@
+/* Presentation answers two independent questions, and each is its own closed
+   set: how much of the intent color fills the box, and whether the box draws a
+   line at its boundary. Exactly one value from each set applies, so the six
+   combinations are the whole vocabulary.
+
+   A fill class never decides an edge and an edge class never decides a fill.
+   `.solid` briefly broke that rule, writing `--ui-border: 0%` alongside its fill
+   so that a filled box could not be ringed in another colour. It bought a real
+   fix -- the edge blend runs the line toward the fill, which lands *on* the fill
+   when the fill is opaque and on a second coat of the same tint when it is not,
+   so every capped intent that drew a line drew a visible ring over its own plate
+   -- at the cost of the one property that makes the six combinations readable:
+   that each half means only what it says. Two axes that are independent in two
+   cases out of three are not axes.
+
+   The ring is a fault in the blend rather than in the class, and it is recorded
+   as such: `.solid.edged` on a capped intent measures 1.53:1 against its own
+   plate in light and 1.82:1 in dark. `.solid.edgeless` is how a consumer asks
+   for a filled box with no line.
+
+   Presentation declares only unitless numbers and percentages. A custom
+   property's value is resolved on the element that declares it, so anything
+   referencing an intent token here would resolve against the container's intent
+   and inherit down already-resolved. Numbers carry no intent, so they inherit
+   safely and each component mixes them against its own palette.
+
+   A declaration on the element beats an inherited one, which is what lets a
+   container set the look for its subtree while any element still opts out.
+
+   Hover is derived from these values rather than declared beside them:
+   `min(100%, resting fill + --hover-step)`, always in `--intent-hover`. There is
+   no hover token and no per-presentation branch. */
+
+/* Filled with the intent color. Text is the contrast tone. */
+.solid {
+  --ui-fill: 100%;
+  --ui-fg-on-fill: 100%;
+}
+
+/* Tinted with the intent color. Text is the intent color. */
+.soft {
+  --ui-fill: 12%;
+  --ui-fg-on-fill: 0%;
+}
+
+/* No fill at rest; the derived hover gives it one. Text is the intent color.
+
+   Named `.ghost` rather than `.bare` because `.bare` and `.edgeless` both read
+   as "less of something", so an author wanting no border reached for `.bare`
+   first and got no background instead. `.ghost` says fill and only fill.
+
+   A component that rests on a ground rather than on nothing keeps that ground
+   here: `.ghost` is zero fill, not zero paint. `.data-table` is the exception
+   that proves it -- its head plate *is* the tint, so a ghost table drops it. */
+.ghost {
+  --ui-fill: 0%;
+  --ui-fg-on-fill: 0%;
+}
+
+/* A line in the intent color, at the aesthetic's material width. The width comes
+   from the aesthetic and nothing else: there is no presentation scale on it, so
+   small components need no ceilings to survive a thick one.
+
+   The edge is the silhouette and nothing else. Rules *inside* a component that
+   has an inside are a separate decision with its own class -- `.data-table.ruled`
+   -- because tying them here made them arrive by implication: a table drew rules
+   only because its published edge default happened to be `edged`, so whether a
+   consumer got them depended on a default they had not read and could not name.
+   Two questions, two switches. */
+.edged {
+  --ui-border: 100%;
+}
+
+/* No line. */
+.edgeless {
+  --ui-border: 0%;
+}

package/dist/tw/reset.css

@@ -0,0 +1,142 @@
+@reference "tailwindcss";
+@import "./theme.css";
+@import "./typography.css";
+
+@layer base {
+  /* Every sizing utility this package ships — `min-height`/`min-width:
+     var(--control-height)` on `.btn`, `.ipt`, `.select`, `.textarea` chief
+     among them — means that as the control's total footprint, padding and
+     border included. Without this, `apps/docs` reads correctly only because
+     its own Tailwind pipeline supplies Preflight's border-box reset
+     separately; this package only pulls in Tailwind's utility engine via
+     `@reference`, never its Preflight, so a consumer with no Tailwind
+     pipeline of its own — `apps/demo` imports this compiled stylesheet
+     directly — got the content-box default instead, inflating every sized
+     control by its own padding and border. */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-primary) var(--color-background);
+  }
+
+  ::-webkit-scrollbar {
+    width: calc(var(--spacing) * 4);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-primary);
+    border: var(--spacing) solid var(--color-background);
+    border-radius: calc(var(--spacing) * 2);
+  }
+
+  html,
+  body {
+    @apply bg-background text-text font-default min-h-dvh;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd,
+  ul,
+  ol {
+    margin: 0;
+  }
+
+  body {
+    @apply flex flex-col;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    @apply enabled:cursor-pointer;
+  }
+
+  img {
+    @apply select-none;
+  }
+
+  ::selection {
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+  }
+
+  :focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  @media (forced-colors: active) {
+    input:is(
+      [type="text"],
+      [type="email"],
+      [type="password"],
+      [type="url"],
+      [type="tel"],
+      [type="number"],
+      [type="search"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"],
+      [type="time"],
+      [type="checkbox"],
+      [type="radio"]
+    ):focus-visible,
+    textarea:focus-visible,
+    select:focus-visible {
+      outline: 2px solid Highlight !important;
+      outline-offset: 2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+@layer components {
+  [aria-current="page"] {
+    @apply text-primary font-bold;
+  }
+
+  @media (forced-colors: active) {
+    .btn,
+    .ipt,
+    .textarea,
+    .select,
+    .alert,
+    .badge {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/tw/theme.css

@@ -0,0 +1,218 @@
+@import "tailwindcss/theme.css";
+@import "./intent.css";
+@import "./presentation.css";
+@import "./elevation.css";
+@source not "../dist";
+@source not "../tests";
+@source not "../dev";
+@source not "../debug";
+@source not "../playground";
+
+/* Color tokens are declared once with `light-dark()`, which resolves at the
+   point of use against the consuming element's computed `color-scheme`. Theme
+   selectors below therefore set `color-scheme` and nothing else. Verified
+   across Chromium, Firefox, and WebKit, including resolution through
+   `color-mix()` and through Tailwind's `@theme`, which emits theme values as
+   unregistered custom properties rather than `@property` registrations. */
+@theme {
+  --font-default: "Segoe UI", system-ui, sans-serif;
+
+  --color-primary: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-primary-contrast: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-primary-hover: light-dark(var(--color-neutral-700), var(--color-neutral-200));
+  --color-primary-subtle: light-dark(var(--color-neutral-200), var(--color-neutral-900));
+  --color-primary-strong: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+  --color-accent: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  --color-accent-contrast: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-accent-hover: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  --color-accent-subtle: light-dark(var(--color-neutral-100), var(--color-neutral-800));
+  --color-accent-strong: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-border: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  --color-border-hover: light-dark(var(--color-neutral-600), var(--color-neutral-500));
+
+  /* A text control's line is the only thing identifying it: the box is
+     transparent at rest, so nothing else marks where typing goes.
+     `--color-border` is neutral-300/700 and measures 1.42:1 on the light page,
+     which is a line you can barely see.
+
+     One value rather than a `light-dark()` pair, and that is the point: the page
+     is neutral-50 in light and neutral-950 in dark, so a tone halfway between
+     them reads on both grounds at once. A text control draws it at
+     `--_line-rest` rather than whole, which is what keeps the field quiet while
+     leaving the pointer somewhere to go -- so the line as painted lands under
+     the 3:1 WCAG 1.4.11 asks of a control boundary. Recorded in
+     docs/accessibility.md. */
+  --color-control-border: var(--color-neutral-500);
+  --color-background: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-foreground: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
+  --color-text-contrast: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-text-hover: light-dark(var(--color-neutral-700), var(--color-neutral-200));
+  --color-text-subtle: light-dark(var(--color-neutral-200), var(--color-neutral-900));
+  --color-text-strong: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+
+  /* The tooltip bubble is the one component whose plate is chosen rather than
+     derived. Everything else composes its ground from the intent, and for the
+     bubble that produced the same 20% of the page's ink in both themes -- which
+     steps *lighter* than the surface on a dark page and *darker* on a light one.
+     Dark got the conventional reading, a floating thing lifted off its page;
+     light got a mid-grey slab two steps darker than every card on the screen,
+     carrying dark ink. Measured, the light bubble was neutral-400 at 2.01:1
+     against the page while the dark one was 2.27:1 the other way.
+
+     One derivation cannot serve both directions, so the pair is stated. Both
+     ends read as lifted: near-white over a light page, a mid grey over a dark
+     one. Near-white is only 1.04:1 against the page, so the bubble draws a
+     hairline as well -- see `components/tooltip.css`. */
+  --color-tooltip: light-dark(var(--color-white), var(--color-neutral-700));
+  --color-tooltip-contrast: light-dark(var(--color-neutral-900), var(--color-neutral-100));
+
+  /* Emerald-700 rather than 600. A filled button's label is normal-size text, so
+     WCAG 1.4.3 asks 4.5:1, and white on emerald-600 measures 3.50:1 -- it passed
+     only as large text, which `.btn` is not. One step darker carries the white
+     label and leaves the hue where it was. */
+  --color-success: var(--color-emerald-700);
+  --color-success-contrast: var(--color-neutral-50);
+  /* Baked rather than mixed live. `box-hover` nests this token two `color-mix()`
+     levels deeper to compose the fill and the edge, and three levels of
+     `color-mix()` over a `light-dark()` crashes the WebKit renderer outright on
+     hover. Confirmed on all four semantic intents, not only this one. Each
+     pinned pair below is
+     `color-mix(in srgb, <base> 82%, <strong>)`, resolved once per theme and
+     screenshotted back so the blend stays exact; re-bake it if the base or
+     strong tone it was mixed from changes. */
+  --color-success-hover: light-dark(#007552, #008e66);
+  /* The dark ground is `-900` to make room for the `-300` ink above it. `-subtle`
+     is what `kbd`, `code`, `pre` and the tooltip bubble rest on, and those are the
+     only places a partial fill prints text onto a tinted ground rather than onto
+     the page. At `-800` a destructive key cap measured 4.1:1 -- under the 4.5:1
+     WCAG 1.4.3 asks of normal text -- and the other three sat at 4.9 to 5.0 with
+     no headroom. One step darker puts all four past 9:1. */
+  --color-success-subtle: light-dark(var(--color-emerald-100), var(--color-emerald-900));
+  /* The dark tone is `-300`, not `-100`. `-strong` is what a partial fill prints
+     -- the label of a soft badge, the dot of a soft radio -- and on a dark page
+     the `-100` shade of every hue is a pale tint that reads white at small
+     sizes. The intent's colour survived only in the fill and the border, so a
+     soft success badge and a soft destructive one had the same white label and a
+     radio's dot stopped matching its own ring. `-300` keeps the hue and stays
+     far above the contrast a mark or a label needs. Light keeps `-800`, which
+     was never the problem: it is saturated and dark against a light page. */
+  --color-success-strong: light-dark(var(--color-emerald-800), var(--color-emerald-300));
+  /* Amber is the one family that cannot solve this by darkening. White on
+     amber-600 measures 3.07:1, and the amber dark enough to carry white has
+     stopped being amber -- it reads brown, which is not the colour a warning is
+     supposed to be. So the ink moves instead of the hue: dark ink on amber is
+     what a warning looks like nearly everywhere, and it is the only intent whose
+     contrast tone is not the page colour. */
+  --color-warning: var(--color-amber-600);
+  --color-warning-contrast: var(--color-neutral-950);
+  /* Same crash, same fix as `--color-success-hover` above. */
+  --color-warning-hover: light-dark(#d46700, #e78300);
+  --color-warning-subtle: light-dark(var(--color-amber-100), var(--color-amber-900));
+  --color-warning-strong: light-dark(var(--color-amber-800), var(--color-amber-300));
+  --color-destructive: var(--color-rose-700);
+  --color-destructive-contrast: var(--color-neutral-50);
+  /* Same crash, same fix as `--color-success-hover` above. */
+  --color-destructive-hover: light-dark(#c00036, #d1054b);
+  --color-destructive-subtle: light-dark(var(--color-rose-100), var(--color-rose-900));
+  --color-destructive-strong: light-dark(var(--color-rose-800), var(--color-rose-300));
+  --color-info: var(--color-indigo-600);
+  --color-info-contrast: var(--color-neutral-50);
+  /* Same crash, same fix as `--color-success-hover` above. */
+  --color-info-hover: light-dark(#4b36e9, #5e4ff9);
+  --color-info-subtle: light-dark(var(--color-indigo-100), var(--color-indigo-900));
+  --color-info-strong: light-dark(var(--color-indigo-800), var(--color-indigo-300));
+
+  --breakpoint-xs: 30rem;
+  --breakpoint-2xl: 90rem;
+}
+
+:root {
+  /* Both keywords: the system preference decides, and the explicit theme
+     selectors below override it at any depth because `color-scheme` inherits. */
+  color-scheme: light dark;
+
+  --container-narrow: 48rem;
+  --container-max: 80rem;
+  --container-wide: 90rem;
+  --layout-gutter: clamp(1rem, 4vw, 2rem);
+  --layout-section-block: clamp(4rem, 9vw, 7rem);
+  --layout-gap: 1rem;
+  --layout-grid-min: 16rem;
+
+  --radius-small: 0.25rem;
+  --radius-control: 0.5rem;
+  --radius-surface: 0.875rem;
+  --control-height: 2.5rem;
+  --border-width: 1px;
+
+  /* `light-dark()` takes colors only, so the shadow color is the token and the
+     three elevations compose from it. Dark themes need a much heavier color to
+     read at all against a dark background. */
+  --elevation-color: light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.55));
+  /* Four rungs: no shadow, then a Tailwind-style sm/md/lg progression, so a
+     consumer unsure which step to reach for has a named "no depth" value
+     instead of inferring it by omitting a shadow declaration. The elevation
+     modifier classes (`.elevation-none`/`.elevation-sm`/`.elevation-md` in
+     elevation.css) share this naming on purpose -- same weight, same word --
+     though they multiply an aesthetic's shadow parts rather than declaring a
+     fixed value, so the two are not read from the same place. */
+  --elevation-none: none;
+  --elevation-sm: 0 1px 2px var(--elevation-color), 0 1px 3px var(--elevation-color);
+  --elevation-md: 0 4px 6px -1px var(--elevation-color), 0 2px 4px -2px var(--elevation-color);
+  --elevation-lg: 0 20px 25px -5px var(--elevation-color), 0 8px 10px -6px var(--elevation-color);
+
+  --focus-ring: color-mix(in srgb, var(--color-primary) 64%, transparent);
+  /* Negative, so the ring is drawn over the edge rather than beside it: at a
+     positive offset the outline floats a gap away and reads as a second, detached
+     frame around the control. Pulled in by exactly the material line width, the
+     ring lands on top of the line and a focused control reads as its own edge
+     thickening -- which is what a focus indicator is meant to look like.
+
+     A component drawing no line at rest loses nothing: the outline moves one
+     pixel inward over its own fill, which at a hairline is not a visible change. */
+  --focus-ring-offset: calc(-1 * var(--border-width));
+  --focus-ring-width: 3px;
+
+  --motion-duration-fast: 120ms;
+  --motion-duration-normal: 200ms;
+  --motion-duration-slow: 400ms;
+  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  --z-popover: 40;
+
+  /* The one number the derived-hover formula spends: how much fill a hover adds
+     on top of whatever the element rests at. */
+  --hover-step: 14%;
+}
+
+/* The base look answers a press with a small scale-in. `box-active` applies it on
+   `.btn` and `.card.interactive`; every aesthetic sets its own
+   `--ui-active-transform` on its class, loaded after this file, so those win.
+   Reduced motion opts out. Kept outside `@theme` because a media query cannot go
+   inside it. */
+:root {
+  --ui-active-transform: scale(0.97);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ui-active-transform: none;
+  }
+}
+
+.light,
+.theme-light,
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+.dark,
+.theme-dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));

package/dist/tw/typography.css

@@ -0,0 +1,34 @@
+@reference "tailwindcss";
+@import "./theme.css";
+
+/* `text-6xl` and up bundle `line-height: 1`, which sets a heading's line box to
+   the font size exactly: descenders reach the box edge and a wrapped heading's
+   lines collide. The two largest steps set an explicit leading that still
+   tightens as the type grows -- 1.1 under 1.15 under `text-3xl`'s 1.2. */
+@utility text-display {
+  @apply text-6xl leading-[1.1] font-bold tracking-tight md:text-8xl;
+}
+
+@utility text-title-lg {
+  @apply text-5xl leading-[1.15] font-bold tracking-tight md:text-6xl;
+}
+
+@utility text-title {
+  @apply text-3xl font-bold tracking-tight;
+}
+
+@utility text-title-sm {
+  @apply text-xl font-semibold tracking-tight;
+}
+
+@utility text-label-lg {
+  @apply text-lg font-medium tracking-wide;
+}
+
+@utility text-label {
+  @apply text-base font-medium tracking-wide;
+}
+
+@utility text-body {
+  @apply text-sm font-normal tracking-wider;
+}