@codenhub/styles 0.7.0 → 0.8.0

package/dist/tw/presentation.css

@@ -1,68 +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. */
-
-/* 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. 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. 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. */
-.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 their own class --
-   `.data-table.ruled` -- so a consumer's own markup says whether they asked for
-   them. */
-.edged {
-  --ui-border: 100%;
-}
-
-/* No line. */
-.edgeless {
-  --ui-border: 0%;
-}

package/dist/tw/surface.css

@@ -1,61 +0,0 @@
-@reference "./box.css";
-
-/* What every surface shares. Two slots exist here and nowhere else, and that is
-   how an aesthetic reaches surfaces without naming one: only a surface resolves
-   `--ui-backdrop`, so glass blurs cards and panels while controls stay solid,
-   and only a surface resolves `--ui-surface-shadow`, so a two-layer drop shadow
-   does not land under every button on the page.
-
-   A primitive beside `box`, and like `box` it imports neither the theme nor
-   Tailwind: `feedback.css` and `tooltip.css` `@reference` it, and a referenced
-   file that reaches the theme strips its tokens from every entry that pulls it
-   in. See docs/internal/model.md (Which files import the theme). */
-@utility surface {
-  @apply box block;
-
-  /* Bare and edged. `box` reads these three with no fallback, so `surface` --
-     typeable on its own -- owes all three; `card` restates its own. No shadow
-     geometry: depth is asked for (`.raised`/`.floating`, an aesthetic, the
-     registry elevation) rather than carried, so a plain card is flat. */
-  --_d-fill: 0%;
-  --_d-fg-on-fill: 0%;
-  --_d-border: 100%;
-
-  /* The public token first, so an aesthetic (glass's translucent ground) or a
-     consumer names the ground outright; then the component's own quiet default,
-     which `.card.soft`, a neutral `.panel`, and a neutral `.alert` write as a
-     private rather than as the public token. Written as the public token, their
-     own declaration would beat glass's inherited one in a glass region, and
-     beat glass on the same element too (`.card.soft.glass` would go opaque).
-     Restated `initial` here so a quiet ground cannot inherit into a surface
-     nested inside one, the way `box` restates `--_d-ground`. See
-     docs/internal/model.md#cascade-layers. */
-  --_d-surface-ground: initial;
-  --_d-ground: var(--ui-surface-ground, var(--_d-surface-ground, var(--color-background)));
-
-  /* The complete-shadow slot for a shadow that is not one layer (glass tucks two
-     under with negative spread). Only `surface` reads it -- through `--ui-shadow`
-     it would land an 18px drop under every button and chip -- like the backdrop. */
-  --_shadow: var(--ui-surface-shadow, var(--_shadow-parts)) var(--_halo-layer,);
-
-  /* The surface pair of `box`'s corner: the aesthetic's surface length, scaled
-     by the padding step and patterned by the same four corner switches. */
-  --_corner-surface: calc(var(--ui-corner-surface, var(--radius-surface)) * var(--_scale));
-  border-radius: var(
-    --ui-radius-surface,
-    calc(var(--_corner-surface) * var(--ui-corner-tl, 1)) calc(var(--_corner-surface) * var(--ui-corner-tr, 1))
-      calc(var(--_corner-surface) * var(--ui-corner-br, 1)) calc(var(--_corner-surface) * var(--ui-corner-bl, 1))
-  );
-  /* The painted layer: a pattern, a texture, or a gradient an aesthetic lays
-     over the plate. Surfaces only, like the backdrop, so a control's label and
-     `.select`'s chevron never sit on one. The aesthetic that sets it owns the
-     contrast of the text over it, and a consumer's own `background-image` still
-     beats this declaration. */
-  background-image: var(--ui-surface-image, none);
-  /* Prefixed property first, deliberately: written second the minifier folds the
-     pair into the prefixed one alone, and the standard property never reaches
-     `dist/` -- which drops the blur in Firefox (the one engine with
-     `backdrop-filter` and not the `-webkit-` alias). Measured on the built CSS. */
-  -webkit-backdrop-filter: var(--ui-backdrop, none);
-  backdrop-filter: var(--ui-backdrop, none);
-}

package/dist/tw/utilities/index.css

@@ -1,6 +0,0 @@
-@import "../theme.css";
-@import "../typography.css";
-@import "./layout.css";
-@import "./content.css";
-
-@source inline("view vertical horizontal stack tight loose cluster between auto-grid section section-content narrow wide divider selection-contrast visually-hidden table-wrap data-table kbd quote quote-inline code pre");

package/dist/tw/utilities/layout.css

@@ -1,144 +0,0 @@
-/* The gap is a private each layout declares from `--layout-gap`, and the
-   density modifiers write the private. A container's `--layout-gap` still
-   reaches every layout inside it, because each one reads the token afresh; a
-   `.tight` or `.loose` stays on its own element, the way `.p-xs` stays on a
-   card, because the layout inside declares its own private over the one it
-   would inherit. */
-@utility view {
-  @apply flex gap-(--_gap);
-
-  --_gap: var(--layout-gap);
-
-  &.vertical {
-    @apply flex-col;
-  }
-
-  &.horizontal {
-    @apply flex-row flex-wrap items-center;
-  }
-
-  &.tight {
-    --_gap: 0.5rem;
-  }
-
-  &.loose {
-    --_gap: 1.5rem;
-  }
-}
-
-@utility stack {
-  @apply flex flex-col gap-(--_gap);
-
-  --_gap: var(--layout-gap);
-
-  &.tight {
-    --_gap: 0.5rem;
-  }
-
-  &.loose {
-    --_gap: 1.5rem;
-  }
-}
-
-@utility cluster {
-  @apply flex flex-wrap items-center gap-(--_gap);
-
-  --_gap: var(--layout-gap);
-
-  &.between {
-    @apply justify-between;
-  }
-
-  &.tight {
-    --_gap: 0.5rem;
-  }
-
-  &.loose {
-    --_gap: 1.5rem;
-  }
-}
-
-@utility auto-grid {
-  @apply grid gap-(--_gap);
-
-  --_gap: var(--layout-gap);
-
-  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-grid-min), 100%), 1fr));
-
-  &.tight {
-    --_gap: 0.5rem;
-  }
-
-  &.loose {
-    --_gap: 1.5rem;
-  }
-}
-
-@utility section {
-  @apply px-(--layout-gutter) py-(--layout-section-block);
-}
-
-@utility section-content {
-  @apply mx-auto w-full max-w-(--container-max);
-
-  &.narrow {
-    max-width: var(--container-narrow);
-  }
-
-  &.wide {
-    max-width: var(--container-wide);
-  }
-}
-
-/* An indicator: intent only, and no presentation token at all. A rule is a
-   line, and neither a fill class nor an edge class has anything to say about
-   one -- a container's `.ghost.edgeless` must not make every `<hr>` inside it
-   invisible. The width is the aesthetic's line width, unscaled. */
-@utility divider {
-  --divider-color: var(--intent-color);
-  --divider-width: var(--ui-border-width, var(--border-width));
-
-  @apply m-0 w-full border-0 border-t;
-
-  border-color: var(--divider-color);
-  border-top-width: var(--divider-width);
-  border-top-style: var(--ui-rule-style, var(--ui-line-style, solid));
-
-  &.vertical {
-    @apply h-auto w-0 self-stretch border-s border-t-0;
-
-    border-inline-start-width: var(--divider-width);
-    border-inline-start-style: var(--ui-rule-style, var(--ui-line-style, solid));
-  }
-}
-
-@utility selection-contrast {
-  &::selection,
-  & *::selection {
-    background: var(--color-primary-contrast);
-    color: var(--color-primary);
-  }
-}
-
-/* `.visually-hidden`, the standard clip-based recipe. Tailwind's `sr-only` does
-   nothing on the vanilla entries (`.`, `/native`), which compile real CSS from
-   a scan of `src/` alone with no Tailwind utility layer to reach, so the
-   package publishes its own.
-
-   It is not named `.sr-only`: on a `/tw` entry the consumer's own Tailwind
-   build supplies that utility, and two same-named utilities in one cascade
-   collide silently -- the collision `registry.test.ts` polices (see
-   `data-table`'s `renamedFrom` in `registry.json`). `@source
-   inline("visually-hidden")` in `utilities/index.css` force-emits it on the
-   entries with no scannable markup of their own. */
-@utility visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}