@codenhub/styles 0.0.3 → 0.1.0

package/docs/tokens.md

@@ -1,101 +0,0 @@
-# @codenhub/styles Tokens
-
-**Status:** IMPLEMENTED
-**Last updated:** 2026-06-18
-**Scope:** Public CSS variable contract for `@codenhub/styles`.
-
-Tokens are CSS custom properties. Default values apply by default. `.dark` may override any token value for that subtree.
-
-```html
-<section class="dark">
-  <article class="card">Dark token subtree</article>
-</section>
-```
-
-## Color Tokens
-
-| Token                          | Purpose                                                                                                       |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| `--color-primary`              | Primary action/content color.                                                                                 |
-| `--color-primary-contrast`     | Text/icon color on primary filled surface.                                                                    |
-| `--color-primary-hover`        | Primary hover state.                                                                                          |
-| `--color-primary-subtle`       | Low-emphasis companion tone for primary. Use as soft surface or subtle background.                            |
-| `--color-primary-strong`       | High-emphasis companion tone for primary. Use as readable text, icon, or border on subtle surfaces.           |
-| `--color-accent`               | Secondary/accent surface.                                                                                     |
-| `--color-accent-contrast`      | Text/icon color on accent filled surface.                                                                     |
-| `--color-accent-hover`         | Accent hover state.                                                                                           |
-| `--color-accent-subtle`        | Low-emphasis companion tone for accent. Use as soft surface or subtle background.                             |
-| `--color-accent-strong`        | High-emphasis companion tone for accent. Use as readable text, icon, or border on subtle surfaces.            |
-| `--color-border`               | Default border color.                                                                                         |
-| `--color-border-hover`         | Interactive border color.                                                                                     |
-| `--color-background`           | Page and default raised surface background.                                                                   |
-| `--color-foreground`           | Subtle raised foreground surface.                                                                             |
-| `--color-surface`              | Nested or muted surface.                                                                                      |
-| `--color-text`                 | Primary text color.                                                                                           |
-| `--color-text-secondary`       | Secondary text color.                                                                                         |
-| `--color-text-contrast`        | Text/icon color on text filled surface.                                                                       |
-| `--color-text-hover`           | Text hover state.                                                                                             |
-| `--color-text-subtle`          | Low-emphasis companion tone for text. Use as soft surface or subtle background.                               |
-| `--color-text-strong`          | High-emphasis companion tone for text. Use as readable text, icon, or border on subtle surfaces.              |
-| `--color-success`              | Success state color.                                                                                          |
-| `--color-success-contrast`     | Text/icon color on success filled surface. Meets 3:1 UI component contrast against `--color-success`.         |
-| `--color-success-hover`        | Success hover tone.                                                                                           |
-| `--color-success-subtle`       | Low-emphasis companion tone for success.                                                                      |
-| `--color-success-strong`       | High-emphasis companion tone for success.                                                                     |
-| `--color-warning`              | Warning state color.                                                                                          |
-| `--color-warning-contrast`     | Text/icon color on warning filled surface. Meets 3:1 UI component contrast against `--color-warning`.         |
-| `--color-warning-hover`        | Warning hover tone.                                                                                           |
-| `--color-warning-subtle`       | Low-emphasis companion tone for warning.                                                                      |
-| `--color-warning-strong`       | High-emphasis companion tone for warning.                                                                     |
-| `--color-destructive`          | Destructive/error state color.                                                                                |
-| `--color-destructive-contrast` | Text/icon color on destructive filled surface. Meets 3:1 UI component contrast against `--color-destructive`. |
-| `--color-destructive-hover`    | Destructive hover tone.                                                                                       |
-| `--color-destructive-subtle`   | Low-emphasis companion tone for destructive.                                                                  |
-| `--color-destructive-strong`   | High-emphasis companion tone for destructive.                                                                 |
-| `--color-info`                 | Informational state color.                                                                                    |
-| `--color-info-contrast`        | Text/icon color on info filled surface. Meets 3:1 UI component contrast against `--color-info`.               |
-| `--color-info-hover`           | Info hover tone.                                                                                              |
-| `--color-info-subtle`          | Low-emphasis companion tone for info.                                                                         |
-| `--color-info-strong`          | High-emphasis companion tone for info.                                                                        |
-
-> **Intent token contract**: color intent tokens own meaning and tone variants. Components map an intent palette into scoped component slots, and presentation classes decide which slots to consume. Theme changes belong in token values such as `.dark`, not broad component-level theme checks. Component-level theme handling should exist only when a component has an internal structure that cannot be expressed through the token palette alone.
-
-## Foundation Tokens
-
-Foundation tokens are not aliases for one color. They define layout, shape, motion, focus, depth, and layering behavior used by helper classes.
-
-| Token                       | Purpose                                                                      |
-| --------------------------- | ---------------------------------------------------------------------------- |
-| `--font-default`            | Default app font family.                                                     |
-| `--container-narrow`        | Narrow content width.                                                        |
-| `--container-max`           | Default content width.                                                       |
-| `--container-wide`          | Wide content width.                                                          |
-| `--layout-gutter`           | Responsive inline page padding.                                              |
-| `--layout-section-block`    | Responsive section vertical padding.                                         |
-| `--layout-stack-gap`        | Default vertical stack gap.                                                  |
-| `--layout-cluster-gap`      | Default horizontal/wrapped cluster gap.                                      |
-| `--layout-grid-min`         | Minimum column width for `.auto-grid`.                                       |
-| `--radius-control`          | Radius for buttons, inputs, tooltips, and compact UI.                        |
-| `--radius-surface`          | Radius for cards, panels, and alerts.                                        |
-| `--control-height`          | Default minimum height for controls.                                         |
-| `--border-width`            | Default border width.                                                        |
-| `--elevation-low`           | Elevation for surface-level components such as cards and panels.             |
-| `--elevation-mid`           | Elevation for elevated components such as dropdowns and floating containers. |
-| `--elevation-high`          | Elevation for tooltips and inline overlays.                                  |
-| `--focus-ring`              | Focus-visible ring color.                                                    |
-| `--focus-ring-offset`       | Focus-visible outline offset.                                                |
-| `--focus-ring-width`        | Focus-visible outline/ring width.                                            |
-| `--motion-duration-fast`    | Fast transition for buttons and input interactions (`120ms`).                |
-| `--motion-duration-normal`  | Normal transition for layout and modals (`200ms`).                           |
-| `--motion-duration-slow`    | Slow animation for skeleton loaders and progress bars (`400ms`).             |
-| `--motion-ease`             | Default easing curve.                                                        |
-| `--z-popover`               | Popover/tooltip z-index.                                                     |
-| `--surface-hover-transform` | The transform applied on interactive card/panel hover.                       |
-| `--breakpoint-xs`           | Extra-small Tailwind responsive breakpoint.                                  |
-| `--breakpoint-2xl`          | Extended large Tailwind responsive breakpoint.                               |
-
-## Component Internals
-
-Component classes may define scoped implementation variables such as `--button-*`, `--surface-*`, `--control-*`, `--feedback-*`, and `--tooltip-*`. These variables are internal wiring for class composition and are not the public token contract.
-
-Consumers should customize broad behavior through color, foundation, motion, elevation, radius, layout, and focus tokens first. The only supported component-scoped input is `--progress-value` on the child fill element inside `.progress`, because consumers must provide a value such as `64%`.

package/src/components/button.css

@@ -1,155 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-
-@utility btn {
-  --button-color: var(--color-text);
-  --button-contrast: var(--color-text-contrast);
-  --button-hover: var(--color-text-hover);
-  --button-subtle: var(--color-text-subtle);
-  --button-strong: var(--color-text-strong);
-  --button-bg: var(--button-color);
-  --button-fg: var(--button-contrast);
-  --button-border: var(--button-bg);
-  --button-hover-bg: var(--button-hover);
-  --button-hover-fg: var(--button-fg);
-  --button-hover-border: var(--button-hover-bg);
-  --button-text: var(--button-strong);
-  --button-soft-bg: var(--button-subtle);
-  --button-subtle-hover-bg: color-mix(in srgb, var(--button-soft-bg) 80%, transparent);
-  --button-soft-hover-bg: color-mix(in srgb, var(--button-soft-bg) 84%, var(--button-text));
-  --button-spinner: var(--button-fg);
-
-  @apply relative inline-flex min-h-(--control-height,2.5rem) w-fit items-center justify-center gap-2 rounded-(--radius-control) bg-(--button-bg) px-4 py-2 font-semibold whitespace-nowrap text-(--button-fg) no-underline transition-[background-color,border-color,color,opacity,transform] duration-(--motion-duration-fast) ease-(--motion-ease) select-none;
-  border: var(--border-width) solid var(--button-border);
-
-  &.primary {
-    --button-color: var(--color-primary);
-    --button-contrast: var(--color-primary-contrast);
-    --button-hover: var(--color-primary-hover);
-    --button-subtle: var(--color-primary-subtle);
-    --button-strong: var(--color-primary-strong);
-  }
-
-  &.secondary {
-    --button-color: var(--color-accent);
-    --button-contrast: var(--color-accent-contrast);
-    --button-hover: var(--color-accent-hover);
-    --button-subtle: var(--color-accent-subtle);
-    --button-strong: var(--color-accent-strong);
-  }
-
-  &.success {
-    --button-color: var(--color-success);
-    --button-contrast: var(--color-success-contrast);
-    --button-hover: var(--color-success-hover);
-    --button-subtle: var(--color-success-subtle);
-    --button-strong: var(--color-success-strong);
-  }
-
-  &.warning {
-    --button-color: var(--color-warning);
-    --button-contrast: var(--color-warning-contrast);
-    --button-hover: var(--color-warning-hover);
-    --button-subtle: var(--color-warning-subtle);
-    --button-strong: var(--color-warning-strong);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --button-color: var(--color-destructive);
-    --button-contrast: var(--color-destructive-contrast);
-    --button-hover: var(--color-destructive-hover);
-    --button-subtle: var(--color-destructive-subtle);
-    --button-strong: var(--color-destructive-strong);
-  }
-
-  &.info {
-    --button-color: var(--color-info);
-    --button-contrast: var(--color-info-contrast);
-    --button-hover: var(--color-info-hover);
-    --button-subtle: var(--color-info-subtle);
-    --button-strong: var(--color-info-strong);
-  }
-
-  &.out {
-    --button-spinner: var(--button-text);
-
-    @apply bg-transparent text-(--button-color);
-    border: calc(var(--border-width) * 2) solid var(--button-color);
-
-    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-      @apply border-(--button-color) bg-(--button-subtle) text-(--button-color);
-    }
-
-    &.fill {
-      &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-        @apply border-(--button-color) bg-(--button-color) text-(--button-contrast);
-      }
-    }
-  }
-
-  &.ghost {
-    --button-spinner: var(--button-text);
-
-    @apply border-transparent bg-transparent text-(--button-text);
-
-    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-      @apply border-transparent bg-(--button-subtle-hover-bg) text-(--button-text);
-    }
-  }
-
-  &.soft {
-    --button-spinner: var(--button-text);
-
-    @apply border-transparent bg-(--button-soft-bg) text-(--button-text);
-
-    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-      @apply border-transparent bg-(--button-soft-hover-bg) text-(--button-text);
-    }
-  }
-
-  &.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 min-w-(--control-height,2.5rem) p-2;
-
-    aspect-ratio: 1;
-  }
-
-  &.pill {
-    @apply rounded-full;
-  }
-
-  &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
-    &:not(.out, .ghost, .soft) {
-      @apply border-(--button-hover-border) bg-(--button-hover-bg) text-(--button-hover-fg);
-    }
-  }
-
-  &:disabled,
-  &.disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-
-  &.loading {
-    @apply pointer-events-none text-transparent! transition-[opacity,transform];
-
-    &::after {
-      @apply absolute top-[calc(50%+var(--border-width))] left-[calc(50%+var(--border-width))] block size-4 -translate-1/2 rounded-full bg-(--button-spinner);
-
-      content: "";
-      @apply ai;
-    }
-  }
-}

package/src/components/feedback.css

@@ -1,214 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-
-@keyframes anim-skeleton {
-  0% {
-    background-position: 200% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@utility alert {
-  --feedback-color: var(--color-text);
-  --feedback-contrast: var(--color-text-contrast);
-  --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
-  --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
-
-  @apply flex rounded-(--radius-surface) bg-(--feedback-surface) p-4 leading-5 text-(--feedback-color);
-  border: var(--border-width) solid var(--feedback-border);
-
-  &.primary {
-    --feedback-color: var(--color-primary);
-    --feedback-contrast: var(--color-primary-contrast);
-  }
-
-  &.secondary {
-    --feedback-color: var(--color-accent);
-    --feedback-contrast: var(--color-accent-contrast);
-  }
-
-  &.success {
-    --feedback-color: var(--color-success);
-    --feedback-contrast: var(--color-success-contrast);
-  }
-
-  &.warning {
-    --feedback-color: var(--color-warning);
-    --feedback-contrast: var(--color-warning-contrast);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --feedback-color: var(--color-destructive);
-    --feedback-contrast: var(--color-destructive-contrast);
-  }
-
-  &.info {
-    --feedback-color: var(--color-info);
-    --feedback-contrast: var(--color-info-contrast);
-  }
-
-  &.flat {
-    @apply bg-(--feedback-color) text-(--feedback-contrast);
-    border-color: var(--feedback-color);
-  }
-
-  &.soft {
-    @apply border-transparent bg-(--feedback-surface) text-(--feedback-color);
-  }
-
-  &.left-accent {
-    @apply border-y-transparent border-r-transparent bg-(--feedback-surface) text-(--feedback-color);
-    border-left-width: 4px;
-    border-left-color: var(--feedback-color);
-  }
-
-  &.icon {
-    @apply relative pl-11;
-
-    &::before {
-      @apply absolute top-4 left-4 block size-5 bg-current;
-
-      content: "";
-      mask-image: url('data:image/svg+xml;utf8,<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;utf8,<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;utf8,<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;utf8,<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;utf8,<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;utf8,<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;utf8,<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;utf8,<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;utf8,<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;utf8,<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>');
-    }
-  }
-}
-
-@utility badge {
-  --feedback-color: var(--color-text);
-  --feedback-contrast: var(--color-text-contrast);
-  --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
-  --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
-
-  @apply inline-flex min-h-6 w-fit items-center gap-1 rounded-full bg-(--feedback-surface) px-2.5 text-xs font-bold text-(--feedback-color);
-  border: var(--border-width) solid var(--feedback-border);
-
-  &.primary {
-    --feedback-color: var(--color-primary);
-    --feedback-contrast: var(--color-primary-contrast);
-  }
-
-  &.secondary {
-    --feedback-color: var(--color-accent);
-    --feedback-contrast: var(--color-accent-contrast);
-  }
-
-  &.success {
-    --feedback-color: var(--color-success);
-    --feedback-contrast: var(--color-success-contrast);
-  }
-
-  &.warning {
-    --feedback-color: var(--color-warning);
-    --feedback-contrast: var(--color-warning-contrast);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --feedback-color: var(--color-destructive);
-    --feedback-contrast: var(--color-destructive-contrast);
-  }
-
-  &.info {
-    --feedback-color: var(--color-info);
-    --feedback-contrast: var(--color-info-contrast);
-  }
-
-  &.flat {
-    @apply bg-(--feedback-color) text-(--feedback-contrast);
-    border-color: var(--feedback-color);
-  }
-
-  &.soft {
-    @apply border-transparent;
-  }
-}
-
-@utility skeleton {
-  @apply min-h-4 w-full rounded-(--radius-control);
-
-  animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
-  background: linear-gradient(90deg, var(--color-surface), var(--color-foreground), var(--color-surface));
-  background-size: 200% 100%;
-}
-
-@utility progress {
-  --progress-color: var(--color-text);
-  --progress-surface: color-mix(var(--color-text-subtle) 60%, transparent);
-
-  @apply h-2.5 w-full overflow-hidden rounded-full bg-(--progress-surface);
-
-  > * {
-    @apply block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
-
-    background-color: var(--progress-color);
-    width: var(--progress-value, 0%);
-  }
-
-  &.primary {
-    --progress-color: var(--color-primary);
-    --progress-surface: color-mix(var(--color-primary-subtle) 60%, transparent);
-  }
-
-  &.secondary {
-    --progress-color: var(--color-accent);
-    --progress-surface: color-mix(var(--color-accent-subtle) 60%, transparent);
-  }
-
-  &.success {
-    --progress-color: var(--color-success);
-    --progress-surface: color-mix(var(--color-success-subtle) 60%, transparent);
-  }
-
-  &.warning {
-    --progress-color: var(--color-warning);
-    --progress-surface: color-mix(var(--color-warning-subtle) 60%, transparent);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --progress-color: var(--color-destructive);
-    --progress-surface: color-mix(var(--color-destructive-subtle) 60%, transparent);
-  }
-
-  &.info {
-    --progress-color: var(--color-info);
-    --progress-surface: color-mix(var(--color-info-subtle) 60%, transparent);
-  }
-}