@codenhub/styles 0.0.4 → 0.1.1

package/dist/tw/components/button.css

@@ -0,0 +1,108 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "./loader.css";
+@reference "../box.css";
+
+/* A filled, edgeless, raised box you can press. `box` paints it; everything
+   here is what makes it a button rather than some other box.
+
+   The resting values are the published default: a button with no presentation
+   class is solid and edgeless, and that is a decision written on three lines
+   rather than a `var()` fallback buried in an expression. */
+@utility btn {
+  --_d-fill: 100%;
+  --_d-fg-on-fill: 100%;
+  --_d-border: 0%;
+  --_d-elevation: 1;
+
+  @apply box box-hover box-active relative inline-flex w-fit cursor-pointer items-center justify-center gap-2 px-4 py-2 font-semibold whitespace-nowrap no-underline select-none;
+
+  min-height: var(--control-height);
+
+  &.sm {
+    @apply min-h-8 px-3 py-1 text-sm;
+  }
+
+  &.lg {
+    @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
+  }
+
+  &.icon {
+    @apply aspect-square p-2;
+
+    min-width: var(--control-height);
+  }
+
+  /* `.p-xs`/`.p-sm`/`.p-lg` are the canonical names, matching the `sm`/`md`/`lg`
+     vocabulary the elevation modifier uses; `.dense`/`.compact`/`.spacious` are
+     first-class aliases, not a deprecation shim -- the same pattern
+     `.destructive`/`.danger`/`.error` uses on the intent axis. Bare `sm`/`lg`
+     are already the size modifier's class names, so `p-` prefixes here to
+     avoid colliding with a button's own size. `.p-xs` is the tightest step,
+     below `.compact`: a chip-sized button in a toolbar or a table cell. */
+  &.p-xs,
+  &.dense {
+    @apply px-2 py-0.5;
+
+    /* The one padding step that also drops the size floor. At this tier the
+       button is a chip in a toolbar or a table cell, where `--control-height`
+       is taller than the row it sits in; every other size and padding class
+       keeps the floor, so a plain button stays a comfortable target. The icon
+       variant gives up `min-width` with it -- with no floor on either axis the
+       box is padding around whatever the consumer sized their glyph to. */
+    min-height: 0;
+
+    &.icon {
+      @apply p-0.5;
+
+      min-width: 0;
+    }
+  }
+
+  &.p-sm,
+  &.compact {
+    @apply px-2.5 py-1;
+
+    &.icon {
+      @apply p-1;
+    }
+  }
+
+  &.p-lg,
+  &.spacious {
+    @apply px-6 py-3;
+
+    &.icon {
+      @apply p-3;
+    }
+  }
+
+  &.pill {
+    @apply rounded-full;
+  }
+
+  &.loading {
+    /* `text-transparent!` forces the label invisible whatever the intent
+       resolved to, so the spinner is the only thing left to read. */
+    @apply pointer-events-none text-transparent!;
+
+    & > * {
+      opacity: 0 !important;
+    }
+
+    /* The spinner takes the label's colour, which `box` already resolved
+       against this button's own intent and presentation. It reads `--_fg`
+       rather than `currentColor`: the rule above forces `color` to transparent
+       to hide the label, and a spinner painted in `currentColor` inherits that
+       and paints nothing at all. */
+    &::after {
+      @apply loader-mask absolute block size-4 -translate-x-1/2 -translate-y-1/2;
+
+      background-color: var(--_fg);
+
+      top: calc(50% + var(--border-width));
+      left: calc(50% + var(--border-width));
+      content: "";
+    }
+  }
+}

package/dist/tw/components/feedback.css

@@ -0,0 +1,163 @@
+@reference "tailwindcss";
+@import "../theme.css";
+@reference "../box.css";
+@reference "./surface.css";
+
+@keyframes anim-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes anim-progress-indeterminate {
+  0% {
+    inset-inline-start: -33%;
+    width: 33%;
+  }
+  50% {
+    width: 40%;
+  }
+  100% {
+    inset-inline-start: 100%;
+    width: 33%;
+  }
+}
+
+/* A soft, edged surface, so an aesthetic that blurs surfaces blurs this too: an
+   alert is a container carrying a message, not a control. */
+@utility alert {
+  @apply surface flex p-4 leading-5;
+
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+
+  &.icon {
+    @apply relative ps-11;
+
+    &::before {
+      @apply absolute start-4 top-4 block size-5 bg-current;
+
+      content: "";
+      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
+      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
+      mask-size: contain;
+      -webkit-mask-size: contain;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-position: center;
+    }
+
+    &.success::before {
+      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
+      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
+    }
+
+    &.warning::before {
+      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
+      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
+    }
+
+    &.destructive::before,
+    &.danger::before,
+    &.error::before {
+      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
+      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
+    }
+
+    &.info::before {
+      mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
+      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
+    }
+  }
+}
+
+/* A soft, edgeless chip. Small enough that the structural silhouette would be
+   most of its height, so it takes the tight one where an aesthetic ships a pair. */
+@utility badge {
+  --_d-fill: 12%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 0%;
+  --_d-elevation: 0;
+
+  @apply box inline-flex min-h-6 w-fit items-center gap-1 px-2.5 text-xs font-bold;
+
+  /* Pill by default, but an aesthetic that declares no radius has to mean it, so
+     the round corner is this component's fallback rather than a hardcoded value. */
+  border-radius: var(--ui-radius, calc(infinity * 1px));
+  clip-path: var(--ui-clip-tight, var(--ui-clip, none));
+}
+
+/* An indicator reads intent and no presentation token at all. It is a stand-in
+   for content rather than a box with a look of its own, so there is nothing for
+   a container's `.solid` or `.edgeless` to say about it -- which is also what
+   removes the visibility floor that used to fight `--ui-fill` for control of the
+   base tone, and the transparent border that only ever appeared if something up
+   the tree asked for an edge. */
+@utility skeleton {
+  --skeleton-base: color-mix(in oklab, var(--intent-color) 6%, var(--intent-subtle));
+  --skeleton-sheen: color-mix(in oklab, var(--intent-color) 10%, var(--color-foreground));
+
+  @apply min-h-4 w-full;
+
+  animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
+  background: linear-gradient(90deg, var(--skeleton-base), var(--skeleton-sheen), var(--skeleton-base));
+  background-size: 200% 100%;
+  border-radius: var(--ui-radius, var(--radius-control));
+}
+
+/* The same: intent only. The track is 10px tall, which is most of a border under
+   any aesthetic thick enough to have an opinion, so the bar draws no edge and the
+   ceilings that used to keep one survivable are gone with it. */
+@utility progress {
+  --progress-color: var(--intent-color);
+  --progress-surface: color-mix(in srgb, var(--intent-subtle) 60%, transparent);
+
+  @apply relative h-2.5 w-full overflow-hidden bg-(--progress-surface);
+  /* Round by default; an aesthetic that declares no radius squares the track and
+     its fill together. */
+  border-radius: var(--ui-radius, calc(infinity * 1px));
+
+  &::after {
+    content: "";
+    @apply absolute start-0 top-0 bottom-0 block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
+
+    border-radius: var(--ui-radius, calc(infinity * 1px));
+    background-color: var(--progress-color);
+    width: var(--progress-value, 0%);
+    z-index: 2;
+  }
+
+  &.active::before {
+    content: "";
+    @apply absolute inset-0 block h-full;
+    animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--progress-color) 15%, transparent),
+      transparent
+    );
+    background-size: 200% 100%;
+    z-index: 1;
+  }
+
+  &.indeterminate::after {
+    width: 33%;
+    animation: anim-progress-indeterminate 1.5s infinite ease-in-out;
+    /* No logical form exists for transform-origin, so the inline-start edge
+       is named directly and mirrored under :dir(rtl) to match the
+       inset-inline-start positioning above. */
+    transform-origin: left;
+
+    :dir(rtl) & {
+      transform-origin: right;
+    }
+  }
+}