@codenhub/styles 0.6.0 → 0.8.0

package/dist/tw/components/surface.css

@@ -1,175 +0,0 @@
-@reference "tailwindcss";
-@import "../theme.css";
-@import "../surface.css";
-@reference "../box.css";
-
-/* A ghost, edged container that takes one unit when depth is supplied. */
-@utility card {
-  @apply surface p-(--surface-padding,1.25rem);
-
-  /* After the `@apply`, not before: `surface` inlines its own resting geometry
-     at that point, so defaults written above it would be overridden by the very
-     utility they are meant to specialise. */
-  --_d-fill: 0%;
-  --_d-fg-on-fill: 0%;
-  --_d-border: 100%;
-  --_d-elevation: 1;
-
-  &.p-xs {
-    --surface-padding: 0.5rem;
-    --_scale-pad: 0.5;
-  }
-
-  &.p-sm {
-    --surface-padding: 0.75rem;
-    --_scale-pad: 0.75;
-  }
-
-  &.p-lg {
-    --surface-padding: 2rem;
-    --_scale-pad: 1.25;
-  }
-
-  &.flush {
-    --surface-padding: 0;
-  }
-
-  /* `.soft` rests untinted for no named intent instead of mixing its 12%: 12%
-     of `--color-text` onto any of `--color-background`, `--color-foreground`,
-     or `--color-surface` lands within a few units of the others (a near-black
-     ink dominates the result), so swapping the ground token alone does not read
-     as quieter. A resting no-intent `.card.soft` is `--color-foreground` with
-     no ink mixed in -- a plain step up from the page that marks a different
-     container without drawing attention to it.
-
-     A named intent keeps its ordinary 12% wash: 12% of an actual hue does not
-     read as a slab the way 12% of near-black ink does (`.card.soft.destructive`
-     is a gentle `249, 225, 225`), and untinting it would silence it rather than
-     quiet it. `:not(...)` names every intent class for that reason; `.panel`'s
-     carve-out below is scoped the same way.
-
-     `--_fill-cap: 0%` (box.css's override slot, not `--ui-fill` directly -- see
-     the comment there) composed with `box-hover`'s formula (`min(100%, resting
-     + 14%)`) reveals the intent on hover with no second fill declaration for
-     the no-intent case: resting at 0% means hover lands at exactly the hover
-     step, 14%, in `--intent-hover`. The ground steps to `--color-surface` at
-     the same moment, through `--_d-surface-ground`, the default `surface` reads
-     beneath the public `--ui-surface-ground`, so a consumer's override, or
-     glass's ground, wins over both states. Scoped to `.interactive` and
-     `.hoverable`, the two classes that opt a card into `box-hover`: a plain
-     `.card.soft` has no hover state to reveal into and stays at the quiet rest.
-     A named intent needs neither special case: it rests tinted, so the generic
-     `box-hover` formula deepens it on hover (12% to 26%). */
-  &.soft:not(.primary, .secondary, .success, .warning, .destructive, .info) {
-    --_fill-cap: 0%;
-    --_d-surface-ground: var(--color-foreground);
-
-    &.interactive:hover,
-    &.hoverable:hover {
-      --_d-surface-ground: var(--color-surface);
-    }
-  }
-
-  /* Opt-in, because a card is only sometimes a control. Applications still owe
-     it a real interactive element and an accessible name. Hover and press are
-     the derived ones every other pressable box gets; there is nothing
-     card-specific about either.
-
-     `.interactive` is the whole opt-in and stays that way; `.hoverable` and
-     `.pressable` are its halves, for a card that answers one gesture and not
-     the other. A card with its own nested controls takes `.hoverable` for the
-     hover warmth without the press-scale that reads as "you activated the
-     card" when the click really landed on a nested button. `.hoverable` alone
-     does not set the pointer cursor: that travels with being a click target,
-     i.e. with `.pressable` / `.interactive`. */
-  &.interactive,
-  &.hoverable {
-    @apply box-hover;
-  }
-
-  &.interactive,
-  &.pressable {
-    @apply box-active cursor-pointer;
-  }
-}
-
-/* A panel is the flush, unelevated sibling: sidebars, toolbars, and wells that
-   sit flat against the layout rather than floating above it. Soft and edgeless
-   is what makes it read as a well without drawing a line to say so. */
-@utility panel {
-  @apply surface p-(--surface-padding,1rem);
-
-  --_d-fill: 12%;
-  --_d-fg-on-fill: 0%;
-  --_d-border: 0%;
-  --_d-elevation: 0;
-
-  &.p-xs {
-    --surface-padding: 0.25rem;
-    --_scale-pad: 0.5;
-  }
-
-  &.p-sm {
-    --surface-padding: 0.5rem;
-    --_scale-pad: 0.75;
-  }
-
-  &.p-lg {
-    --surface-padding: 1.5rem;
-    --_scale-pad: 1.25;
-  }
-
-  &.flush {
-    --surface-padding: 0;
-  }
-
-  /* Neutral panels are the common case -- layout wells, sidebars, toolbars with
-     no named intent -- and 12% of `--color-text` (near-black) mixed onto the
-     page is far more assertive than 12% of a hue (`217, 217, 217` against a
-     `250, 250, 250` page): the same "neutral ink reads louder" effect
-     `.card.soft` answers, and the reason `--intent-fill-max` stops neutral's
-     fill short everywhere else.
-
-     Scoped to no named intent rather than untinted unconditionally, as
-     `data-table` is: a panel is not interactive, so there is no hover to reveal
-     a colored intent into, and it is edgeless by default, so the fill is the
-     only channel a `.primary` bulk-actions bar or a `.destructive` danger-zone
-     panel has to say what it is (a resting `.panel.destructive` is a gentle
-     `249, 225, 225` wash). `.card.soft` carries the same scoping. `:not(...)`
-     names every intent class, plus `.solid`/`.ghost` so an explicit
-     presentation on the element is never clamped to a cap it did not ask for --
-     the guard `data-table`'s `:not(.solid, .ghost)` also uses.
-
-     Grounds on `--color-foreground` through `--_d-surface-ground`, the default
-     `.card.soft` rests on, so a bare `.panel` rests at exactly the plate a
-     `.card.soft` does, and a consumer's `--ui-surface-ground` or glass's
-     translucent ground wins over it: a neutral panel under `.glass` is glass.
-     Permanent rather than hover-revealed: neither a panel nor `data-table` has
-     an interaction state to reveal a tint into. */
-  &:not(.primary, .secondary, .success, .warning, .destructive, .info, .solid, .ghost) {
-    --_fill-cap: 0%;
-    --_d-surface-ground: var(--color-foreground);
-  }
-}
-
-/* The user agent already promises both of these for a native `<dialog>` --
-   `dialog:not([open]) { display: none }` and a centred `margin: auto` on the
-   open box -- but both are user-agent origin, which loses to any author rule
-   at all. `.card`'s own `display: block` beats the first outright, so a
-   `<dialog class="card">` rendered open with no `open` attribute and no
-   `.showModal()` call, and a margin reset beats the second, so an opened one
-   pinned to the top-left. The registry has no dialog component, and these
-   three are the containers a consumer reaches for.
-
-   Here rather than in the reset, so every entrypoint that ships `.card` ships
-   the fix, `/components` included. Unlayered, because a behaviour override has
-   to win over any layered rule whatever its specificity, and scoped to the
-   package's own containers, so a dialog the package does not style keeps
-   whatever margin its author gives it. */
-dialog:is(.card, .panel, .surface):not([open]) {
-  display: none;
-}
-
-dialog:is(.card, .panel, .surface)[open] {
-  margin: auto;
-}

package/dist/tw/intent.css

@@ -1,228 +0,0 @@
-/* Imported into the `components` layer by `theme.css`, below every utility, so
-   a consumer's own utility or unlayered CSS beats these classes. See
-   docs/internal/model.md#cascade-layers. */
-
-/* An intent maps one colour family onto seven shared slots and nothing else.
-   It does not cascade: the reset at the bottom redeclares the neutral defaults
-   at every component's own root, so a `.success` container cannot recolour a
-   nested destructive button while `.btn.success` still wins. Every intent writes
-   every slot, `--intent-fill-max` included -- omitting it inherits the reset's
-   neutral cap, and `tests/integration/registry.test.ts` fails the build on one
-   that does. Neutral maps `--intent-subtle` to `--color-surface` (the tone
-   tooltips, key caps, code and table heads sit on) and `--intent-border` to
-   `--ui-ink` (how an aesthetic restates the neutral line without naming one). */
-
-/* The same neutral values, at the root. This is the floor: an element that
-   carries no intent class and matches none of the resets below -- a component
-   `@apply`-ed onto a selector the package does not name, a bare `<code>` with
-   no native stylesheet loaded -- still composes against a real colour instead
-   of an undefined one that collapses its `color-mix()` to nothing. It is not
-   the barrier. `.neutral` and both resets below still write these slots on the
-   element itself, which is a matching rule and so beats this inherited value --
-   that is what stops a `.success` container's intent reaching a component
-   nested under it. An intent class on the element beats both. Values track
-   `.neutral` slot for slot; `registry.test.ts` fails the build on drift. */
-:root {
-  --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%;
-}
-
-/* Neutral stops its fill short: its colour is the page's ink, so a full fill is
-   a slab and `.neutral.solid` would be pixel-for-pixel `.primary.solid`. 20% is
-   chosen against `.soft`'s 12% -- a step past the tint, not a repeat.
-   `--intent-contrast` stays the page colour; a `.neutral.solid` badge's ink is
-   `box`'s question, answered by the same `--ui-fg-on-fill` cap. Pointing this
-   slot at `--color-text` renders a checked neutral checkbox black-on-black. */
-.neutral {
-  --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%;
-}
-
-.primary {
-  --intent-color: var(--color-primary);
-  --intent-contrast: var(--color-primary-contrast);
-  --intent-hover: var(--color-primary-hover);
-  --intent-strong: var(--color-primary-strong);
-  --intent-subtle: var(--color-primary-subtle);
-  --intent-border: var(--color-primary);
-  --intent-fill-max: 100%;
-}
-
-.secondary {
-  --intent-color: var(--color-accent);
-  --intent-contrast: var(--color-accent-contrast);
-  --intent-hover: var(--color-accent-hover);
-  --intent-strong: var(--color-accent-strong);
-  --intent-subtle: var(--color-accent-subtle);
-  --intent-border: var(--color-accent);
-  --intent-fill-max: 100%;
-}
-
-.success {
-  --intent-color: var(--color-success);
-  --intent-contrast: var(--color-success-contrast);
-  --intent-hover: var(--color-success-hover);
-  --intent-strong: var(--color-success-strong);
-  --intent-subtle: var(--color-success-subtle);
-  --intent-border: var(--color-success);
-  --intent-fill-max: 100%;
-}
-
-.warning {
-  --intent-color: var(--color-warning);
-  --intent-contrast: var(--color-warning-contrast);
-  --intent-hover: var(--color-warning-hover);
-  --intent-strong: var(--color-warning-strong);
-  --intent-subtle: var(--color-warning-subtle);
-  --intent-border: var(--color-warning);
-  --intent-fill-max: 100%;
-}
-
-.destructive {
-  --intent-color: var(--color-destructive);
-  --intent-contrast: var(--color-destructive-contrast);
-  --intent-hover: var(--color-destructive-hover);
-  --intent-strong: var(--color-destructive-strong);
-  --intent-subtle: var(--color-destructive-subtle);
-  --intent-border: var(--color-destructive);
-  --intent-fill-max: 100%;
-}
-
-.info {
-  --intent-color: var(--color-info);
-  --intent-contrast: var(--color-info-contrast);
-  --intent-hover: var(--color-info-hover);
-  --intent-strong: var(--color-info-strong);
-  --intent-subtle: var(--color-info-subtle);
-  --intent-border: var(--color-info);
-  --intent-fill-max: 100%;
-}
-
-/* Every component resolves the neutral defaults at its own root, at zero
-   specificity, so an intent class on the element wins while an inherited value
-   loses -- the one rule that lets every component drop its per-intent branches.
-   This list and the one in `native.css` are the package's only hand-maintained
-   selector lists; `tests/integration/registry.test.ts` fails the build on a
-   registry component missing from either. `.text-control` and `.surface` are on
-   it though they are not components: both are documented as typeable on their
-   own, and a bare `<div class="surface">` with no intent resolved computes a
-   transparent background and a zero-width border -- `box` collapses. */
-:where(
-  .btn,
-  .ipt,
-  .text-control,
-  .surface,
-  .textarea,
-  .select,
-  .input-group,
-  .checkbox,
-  .radio,
-  .switch,
-  .card,
-  .panel,
-  .alert,
-  .data-table,
-  .pre,
-  .quote,
-  .tooltip-bubble,
-  .tooltip-icon,
-  .badge,
-  .kbd,
-  .code,
-  .loader,
-  .skeleton,
-  .progress,
-  .divider
-) {
-  --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%;
-}
-
-/* The six text controls take a heavier line than everything else that rests on
-   the shared neutral. A card, a table or a divider sits on a filled surface or
-   separates content that identifies itself; a text control at rest is a
-   transparent box whose only mark is its border, and WCAG 1.4.11 asks that
-   border for 3:1. `--color-border` gives it 1.42:1.
-
-   Declared here at zero specificity for the same reason the indicators below
-   are: written inside `@utility text-control` it would land in `utilities`,
-   above every intent class in `components`, and overrule `.primary` on the
-   element. Written as a plain class list it would carry 0-1-0 and, being later
-   in the stylesheet, beat `.primary` the same way. Either would make every
-   colored control draw a grey line; `:where()` keeps it under both.
-
-   An aesthetic reaches this line through `--ui-control-ink` first, then its
-   `--ui-ink`: the theme keeps a control border apart from a surface border, and
-   an aesthetic whose neutral line suits a pane but not a control's boundary --
-   `.glass`'s white hairline, `.chunky-tile`'s tile grey -- names a control line
-   of its own. See docs/internal/model.md#presentation.
-
-   The second selector is the tooltip bubble's below, for the same reason:
-   `.neutral` carries 0-1-0 and beat `:where()`, so a `.neutral` field under
-   `.glass` drew the pane's hairline while an unclassed one drew the control
-   line, and writing the intent out changed the box. */
-:where(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch),
-:is(.text-control, .ipt, .textarea, .select, .input-group, .checkbox, .radio, .switch).neutral {
-  --intent-border: var(--ui-control-ink, var(--ui-ink, var(--color-control-border)));
-}
-
-/* A table's lines -- its frame, head rule, and row rules -- are drawn on a
-   plate, not at a pane's edge against the backdrop, so an aesthetic whose
-   neutral line is a highlight names a rule line of its own: glass's white
-   hairline vanishes on the table's light plate. Neutral only, and `.neutral`
-   included, the way the control line above is. */
-:where(.data-table),
-.data-table.neutral {
-  --intent-border: var(--ui-rule-ink, var(--ui-ink, var(--color-border)));
-}
-
-/* The bubble a tooltip draws is the one plate in the package that is chosen
-   rather than composed, so it resolves the no-intent case onto its own pair
-   instead of the shared neutral -- see `--color-tooltip` in `theme.css`.
-
-   The cap goes with it. Neutral stops its fill at 20% because its colour is the
-   page's ink; `--color-tooltip` is a plate rather than an ink, so a full fill
-   of it is the plate and there is nothing to stop short of. `--intent-subtle`
-   stays the surface token, the tone every other unclassed component sits on.
-   `.tooltip-icon` is a separate element that never fills past `0%`, so the
-   generic neutral reset above is enough for it.
-
-   Two selectors, so `none` and `neutral` agree. `:where()` loses to any intent
-   class, so `.tooltip-bubble.primary` still floods with primary;
-   `.tooltip-bubble.neutral` carries 0-2-0 and beats `.neutral`, so writing the
-   intent out gives the same bubble as writing nothing. */
-:where(.tooltip-bubble),
-.tooltip-bubble.neutral {
-  --intent-color: var(--color-tooltip);
-  --intent-contrast: var(--color-tooltip-contrast);
-  --intent-hover: var(--color-tooltip);
-  --intent-strong: var(--color-tooltip-contrast);
-  --intent-subtle: var(--color-surface);
-  --intent-border: var(--ui-ink, var(--color-border));
-  --intent-fill-max: 100%;
-}
-
-/* Indicators take the color they sit in rather than the shared neutral, so a
-   loader inside filled or colored content still matches it. It has to be
-   declared here at zero specificity: written in the component's own block it
-   would carry 0-1-0 and, being later in the stylesheet, beat `.success` --
-   which silently makes every indicator ignore every intent class. */
-:where(.loader, .skeleton, .progress, .divider) {
-  --intent-color: currentColor;
-  --intent-border: currentColor;
-}

package/dist/tw/native.css

@@ -1,203 +0,0 @@
-/* The layer map, stated before any import uses a layer -- see `theme.css`. */
-@layer theme, base, components, utilities;
-
-@import "./theme.css";
-@reference "tailwindcss";
-/* 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`. */
-@import "./typography.css";
-@import "./utilities/index.css";
-@import "./components/index.css";
-@import "./reset.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) {
-    --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;
-  }
-
-  /* Links are left out: a link takes the text it sits in, so one inside a
-     heading stays heading-sized. */
-  p,
-  li {
-    @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,
-  input[type="checkbox"]:indeterminate {
-    background-color: Highlight;
-    border-color: Highlight;
-
-    &::after {
-      background-color: HighlightText;
-    }
-  }
-
-  input[type="radio"]:checked {
-    background-color: Canvas;
-    border-color: Highlight;
-
-    &::after {
-      background-color: Highlight;
-    }
-  }
-}