@codenhub/styles 0.6.0 → 0.8.0

package/tw/native.css

@@ -0,0 +1,320 @@
+/* The layer map, stated before any import uses a layer -- see `theme.css`. */
+@layer theme, base, components, utilities;
+
+@import "./theme.css";
+/* Tailwind's utilities into `utilities`, as `components/index.css` does it
+   and for its reason. */
+@import "tailwindcss/utilities.css" layer(utilities);
+/* Everything that is not `src/` -- see the note in `index.css`. Without the
+   docs and root-file excludes a utility used only in a documentation example
+   compiles into `dist/native.css`. */
+/* No `typography.css` here: `components/rules.css` brings its rules, and a
+   second route to a `@utility` stacks its body. */
+@import "./utilities/rules.css";
+@import "./components/rules.css";
+@import "./reset.rules.css";
+
+@layer components {
+  /* `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, progress) {
+    --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 and toggles take the same stronger neutral boundary as
+     their classed counterparts, without changing buttons or other inputs --
+     control ink included, as `intent.css`'s class reset reads it. */
+  :where(
+    input:not([type]),
+    input[type="checkbox"],
+    input[type="radio"],
+    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-control-ink, var(--ui-ink, var(--color-control-border)));
+  }
+
+  /* A bare table's lines take the rule line, as `.data-table`'s do in
+     `intent.css`. */
+  :where(table) {
+    --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
+  }
+
+  :where(hr) {
+    --intent-color: currentColor;
+    --intent-border: currentColor;
+  }
+}
+
+@layer base {
+  /* The `h1`-`ol` margin reset lives in `reset.css`, imported above. */
+
+  /* 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;
+  }
+
+  /* Body copy is the page's text, set once on `body` and inherited, so a
+     container can resize or embolden the Markdown inside it. Pinned on `p` and
+     `li` instead, a bold 20px container printed its paragraphs at 14px regular,
+     and their tracking reached the controls inside one. The controls keep
+     their own tracking all the same: `.btn`, `.badge`, and `text-control` set
+     `normal`, so this body's wider tracking stops at them. Links take the text
+     they sit in, so one inside a heading stays heading-sized. */
+  body {
+    @apply text-body;
+  }
+
+  /* Content */
+  table {
+    @apply data-table;
+  }
+
+  kbd {
+    @apply kbd;
+  }
+
+  blockquote {
+    @apply quote;
+  }
+
+  q {
+    @apply quote-inline;
+  }
+
+  code {
+    @apply code;
+  }
+
+  pre {
+    @apply pre;
+  }
+
+  /* The block is the chip; the code inside it is text. Clearing only the fill
+     and padding left the rest of the chip an aesthetic draws: `.cyber`'s glow
+     boxed the text, neobrutalism's 2px transparent border indented the first
+     line, and `.pixel`'s inset ring outlined it. The halo token goes too, so
+     nothing that reads it inside a block draws one, and so does the clip a
+     cutting aesthetic gives the chip, which would trim the block's text. */
+  pre code {
+    @apply bg-transparent p-0;
+
+    --ui-halo-ink: initial;
+    border: 0;
+    box-shadow: none;
+    clip-path: none;
+  }
+
+  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;
+  }
+
+  /* A dialog is the one surface with an element of its own, and it sits above
+     the page, so it is a floating card. `surface` carries the closed-dialog
+     hide and the centring. */
+  dialog {
+    @apply card floating;
+  }
+
+  /* The track is `.progress`'s. Its value is not: `.progress` draws the fill
+     as an `::after` sized by `--progress-value`, and a `<progress>` states its
+     value in an attribute and paints it in a pseudo-element of the engine's
+     own, so the fill is restated on each. One rule per engine: a selector
+     list with a pseudo-element an engine does not know drops the whole rule. */
+  progress {
+    @apply progress;
+
+    display: block;
+    appearance: none;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: transparent;
+  }
+
+  progress::-webkit-progress-value {
+    border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
+    background-color: var(--progress-color, var(--intent-color));
+  }
+
+  progress::-moz-progress-bar {
+    border-radius: var(--ui-radius-pill, var(--ui-radius, var(--ui-corner, calc(infinity * 1px))));
+    background-color: var(--progress-color, var(--intent-color));
+  }
+
+  /* No `value` attribute is the indeterminate bar, `.progress.indeterminate`'s
+     sweep. Drawn on the track's own background: with no value an engine
+     paints its pseudo-element empty or full, and neither can be moved. */
+  progress:indeterminate {
+    background-image: linear-gradient(
+      var(--progress-color, var(--intent-color)),
+      var(--progress-color, var(--intent-color))
+    );
+    background-repeat: no-repeat;
+    background-size: 33% 100%;
+    animation: anim-progress-sweep 1.5s infinite ease-in-out;
+  }
+
+  /* The keyframes move a physical background position, so right-to-left text
+     runs them backwards: the sweep starts on the start side, as
+     `.progress.indeterminate`'s does. */
+  progress:indeterminate:dir(rtl) {
+    animation-direction: reverse;
+  }
+
+  progress:indeterminate::-webkit-progress-value {
+    background-color: transparent;
+  }
+
+  progress:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+  }
+
+  /* The sweep rests at the start, as `.progress.indeterminate`'s does. */
+  @media (prefers-reduced-motion: reduce) {
+    progress:indeterminate {
+      animation: none;
+    }
+  }
+}
+
+/* The indeterminate `<progress>`'s sweep: a third of the track, from just off
+   one end to just off the other. */
+@keyframes anim-progress-sweep {
+  from {
+    background-position: -50% 0;
+  }
+
+  to {
+    background-position: 150% 0;
+  }
+}
+
+@media (forced-colors: active) {
+  /* The bar in system colours, as `.progress` is in `feedback.css`. */
+  progress {
+    forced-color-adjust: none;
+    background-color: Canvas;
+    border-color: CanvasText;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: CanvasText;
+  }
+
+  progress::-moz-progress-bar {
+    background-color: CanvasText;
+  }
+
+  progress:indeterminate {
+    background-image: linear-gradient(CanvasText, CanvasText);
+  }
+
+  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;
+  }
+
+  /* A checked radio is the filled disc and dot it draws with forced colours
+     off, as `.radio` is in `form.css`: one look on both entrypoints. */
+  input[type="checkbox"]:checked,
+  input[type="checkbox"]:indeterminate,
+  input[type="radio"]:checked {
+    background-color: Highlight;
+    border-color: Highlight;
+
+    &::after {
+      background-color: HighlightText;
+    }
+  }
+
+  /* The platform's arrow, for the reason `.select` takes it back in
+     `form.css`: forced colours drop the gradient chevron. */
+  select:not([multiple], [size]:not([size="1"])) {
+    appearance: auto;
+  }
+}

package/tw/presentation.css

@@ -0,0 +1,139 @@
+/* Each class here is a `@utility` whose body sits in `utilities.families`: a
+   utility, so `@apply` and Tailwind's variants reach it, and in a sublayer, so
+   it still loses to every rule written straight into `utilities` -- a
+   component's, or a consumer's own utility. See
+   docs/internal/model.md#cascade-layers. */
+
+/* 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, so
+   each half means only what it says. The line fades toward `transparent` as the
+   fill fills in (`box.css`; docs/internal/model.md#presentation), so
+   `.solid.edged` and `.solid.edgeless` render one box without either class
+   deciding the other's question.
+
+   Presentation declares only unitless numbers and percentages, and the
+   `--_holds-ink` toggle, whose values are a keyword and an empty value: neither
+   carries an intent either, so it inherits as safely. 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. */
+
+/* The ink of the plate an element sits on, handed down by the nearest filled
+   box above it. Registered, so that an unfilled box -- whose declaration of
+   these is deliberately invalid -- inherits them instead of clearing them:
+   that is what lets the ink pass through a box with no plate of its own.
+   `--_own-hold` does not inherit, so the same invalid declaration reads 0%
+   and a box can tell an ink it was handed from one it holds. See
+   docs/internal/model.md#the-ink-of-the-plate-beneath. */
+@property --_held-ink {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --_held-on {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+@property --_own-hold {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+/* Filled with the intent color. Text is the contrast tone. `--_holds-ink` is
+   the same answer as a toggle `box` can read: empty where the fill is a
+   plate, `none` where it is not. A percentage cannot make a declaration
+   invalid, and an invalid one is how an unfilled box passes the ink on. */
+/* What the element itself asked for, as against what reached it from a
+   container: the fill and the edge its own presentation class names. Neither
+   inherits, so a field reads its own `.soft` here and a toolbar's `.soft`
+   only through `--ui-fill`. A class on the element is a request and a class
+   on a container is a cascade, and a component that bounds the cascade --
+   `text-control`'s 6% wash, its edge floor, the tooltip bubble's -- lifts the
+   bound by these. Written by the utilities, so `@apply ipt soft` carries the
+   request as the class on the element does; a selector keyed on `.soft` saw
+   only the class. See docs/internal/model.md#what-apply-carries. */
+@property --_own-fill {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+@property --_own-edge {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@utility solid {
+  @layer families {
+    --ui-fill: 100%;
+    --ui-fg-on-fill: 100%;
+    --_own-fill: 100%;
+    --_holds-ink: ;
+  }
+}
+
+/* Tinted with the intent color. Text is the intent color. */
+@utility soft {
+  @layer families {
+    --ui-fill: 12%;
+    --ui-fg-on-fill: 0%;
+    --_own-fill: 12%;
+    --_holds-ink: none;
+  }
+}
+
+/* No fill at rest; the derived hover gives it one. Text is the intent color. It
+   names a fill and only a fill: `.bare` and `.edgeless` both read as "less of
+   something", so an author wanting no border would reach for the wrong one.
+
+   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. */
+@utility ghost {
+  @layer families {
+    --ui-fill: 0%;
+    --ui-fg-on-fill: 0%;
+    --_own-fill: 0%;
+    --_holds-ink: none;
+  }
+}
+
+/* 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 their own class --
+   `.data-table.ruled` -- so a consumer's own markup says whether they asked for
+   them. */
+@utility edged {
+  @layer families {
+    --ui-border: 100%;
+    --_own-edge: 100%;
+  }
+}
+
+/* No line. */
+@utility edgeless {
+  @layer families {
+    --ui-border: 0%;
+    --_own-edge: 0%;
+  }
+}

package/tw/reset.css

@@ -0,0 +1,10 @@
+@reference "tailwindcss";
+@import "./theme.css";
+@import "./typography.css";
+
+/* The focused entry: what the rules in `reset.rules.css` need to compile on
+   their own, then the rules. `index.css` and `native.css` import the rules
+   file directly, since they already hold the typography utilities it applies
+   and a second route would stack them. See docs/internal/model.md (One route
+   to each utility). */
+@import "./reset.rules.css";

package/{dist/tw/reset.css → tw/reset.rules.css}

@@ -1,7 +1,3 @@
-@reference "tailwindcss";
-@import "./theme.css";
-@import "./typography.css";
-
 @layer base {
   /* The package's own components do not lean on this: `@utility box` sets
      `box-sizing: border-box` on itself, so a sized control is right in every
@@ -87,29 +83,32 @@
      A component drawing no line at rest loses nothing: the outline moves inward
      over its own fill by a hairline, which is not a visible change. */
   :focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring);
+    outline: var(--focus-ring-width) solid var(--focus-ring, color-mix(in srgb, var(--color-primary) 64%, transparent));
     outline-offset: var(--focus-ring-offset, calc(-1 * var(--ui-border-width, var(--border-width))));
   }
 
+  /* Not on a control inside an `.input-group`, which draws the field's ring
+     for it: an important declaration in `base` beats any later one, so the
+     group could not suppress this one and a focused field drew two rings. */
   @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 {
+        [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:not(.input-group > *),
+    textarea:focus-visible:not(.input-group > *),
+    select:focus-visible:not(.input-group > *) {
       outline: 2px solid Highlight !important;
       outline-offset: 2px;
     }

package/tw/size.css

@@ -0,0 +1,34 @@
+/* The size modifier: `sm` and `lg`. A utility in `utilities.families`, as the
+   classes in `presentation.css` are, so `@apply btn sm` and `md:lg` work.
+
+   A size cannot say what it changes, because each component has its own
+   steps, so it raises a flag and the component reads it. The flag is a space
+   toggle: unset it is guaranteed-invalid, so `--_sm-h: var(--_size-sm) 2rem`
+   is invalid too and the `var(--_sm-h, ...)` that reads it takes its
+   fallback; set, it is empty, and the same line computes to `2rem`.
+
+   Registered non-inheriting, as `--ui-elevation` is and for its reason: a
+   size is a choice about one element, and inherited, a `.sm` form would
+   shrink every control inside it. No `initial-value`, so an element that
+   does not set it computes guaranteed-invalid. See docs/internal/model.md#size. */
+@property --_size-sm {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --_size-lg {
+  syntax: "*";
+  inherits: false;
+}
+
+@utility sm {
+  @layer families {
+    --_size-sm: ;
+  }
+}
+
+@utility lg {
+  @layer families {
+    --_size-lg: ;
+  }
+}

package/tw/surface.css

@@ -0,0 +1,9 @@
+@reference "./box.css";
+
+/* The focused entry: what the rules in `surface.rules.css` need to compile on their
+   own, then the rules. An aggregate entry imports the rules file directly and
+   supplies those needs once -- Tailwind stacks a `@utility` each time a file
+   that defines it is imported or referenced, so a second route to `box.css`
+   doubles every `@apply box`. See docs/internal/model.md (One route to each
+   utility). */
+@import "./surface.rules.css";