@codenhub/styles 0.0.2 → 0.0.4

package/src/components/loader.css

@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+@utility ai {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D@keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D@keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25,100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C/style%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+
+  mask-image: var(--ai-image);
+  -webkit-mask-image: var(--ai-image);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+
+@utility dots-wave {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)%7Dto%7Btransform:translate(0)%7D%7D.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83' cx='12' cy='12' r='3' style='animation-delay:.1s'/%3E%3Ccircle class='spinner_qM83' cx='20' cy='12' r='3' style='animation-delay:.2s'/%3E%3C/svg%3E");
+}
+
+@utility dots-fade {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.dot%7Banimation:dot-anim 1s ease-in-out infinite;fill:currentColor%7D.d1%7Banimation-delay:-0.32s%7D.d2%7Banimation-delay:-0.16s%7D@keyframes dot-anim%7B0%25,80%25,100%25%7Btransform:scale(0.6);opacity:0.2%7D40%25%7Btransform:scale(1);opacity:1%7D%7D%3C/style%3E%3Ccircle class='dot d1' cx='4' cy='12' r='3' transform-origin='4px 12px'%3E%3C/circle%3E%3Ccircle class='dot d2' cx='12' cy='12' r='3' transform-origin='12px 12px'%3E%3C/circle%3E%3Ccircle class='dot d3' cx='20' cy='12' r='3' transform-origin='20px 12px'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+@utility dots-queue {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_qtyZ%7B0%25%7Br:0%7D25%25%7Br:3px;cx:4px%7D50%25%7Br:3px;cx:12px%7D75%25%7Br:3px;cx:20px%7Dto%7Br:0;cx:20px%7D%7D.spinner_nOfF%7Banimation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite%7D%3C/style%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-.5s'/%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1s'/%3E%3Ccircle class='spinner_nOfF' cx='4' cy='12' r='3' style='animation-delay:-1.5s'/%3E%3C/svg%3E");
+}
+
+@utility dots-rotate {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_XVY9%7B50%25%7Btransform:rotate(180deg)%7Dto%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cg style='transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite'%3E%3Ccircle cx='4' cy='12' r='3'/%3E%3Ccircle cx='20' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@utility dots-grow {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_xe7Q%7B93.75%25,to%7Br:3px%7D46.875%25%7Br:.2px%7D%7D.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}%3C/style%3E%3Ccircle class='spinner_b2T7' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_b2T7' cx='12' cy='12' r='3' style='animation-delay:-.65s'/%3E%3Ccircle class='spinner_b2T7' cx='20' cy='12' r='3' style='animation-delay:-.5s'/%3E%3C/svg%3E");
+}
+
+@utility dots-grow-alternate {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_qhi1%7B0%25,to%7Br:1.5px%7D50%25%7Br:3px%7D%7D.spinner_I8Q1%7Banimation:spinner_qhi1 .75s linear infinite%7D%3C/style%3E%3Ccircle class='spinner_I8Q1' cx='4' cy='12' r='1.5'/%3E%3Ccircle class='spinner_I8Q1' cx='12' cy='12' r='3' style='animation-delay:-.375s'/%3E%3Ccircle class='spinner_I8Q1' cx='20' cy='12' r='1.5'/%3E%3C/svg%3E");
+}
+
+@utility dot-bounce {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7Dto%7Bcy:5px%7D%7D%3C/style%3E%3Ccircle cx='12' cy='5' style='animation:spinner_YeBj .8s infinite' r='4'/%3E%3C/svg%3E");
+}
+
+@utility bars-wave {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.bar%7Banimation:bar-anim 1s ease-in-out infinite;fill:currentColor%7D.b1%7Banimation-delay:-0.4s%7D.b2%7Banimation-delay:-0.2s%7D@keyframes bar-anim%7B0%25,100%25%7Btransform:scaleY(0.3)%7D50%25%7Btransform:scaleY(1)%7D%7D%3C/style%3E%3Crect class='bar b1' x='3' y='2' width='4' height='20' rx='2' transform-origin='5px 12px'%3E%3C/rect%3E%3Crect class='bar b2' x='10' y='2' width='4' height='20' rx='2' transform-origin='12px 12px'%3E%3C/rect%3E%3Crect class='bar b3' x='17' y='2' width='4' height='20' rx='2' transform-origin='19px 12px'%3E%3C/rect%3E%3C/svg%3E");
+}
+
+@utility pulse-ring {
+  --ai-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.pulse%7Banimation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center%7D.p2%7Banimation-delay:-0.6s%7D@keyframes pulse-anim%7B0%25%7Btransform:scale(0);opacity:1%7D100%25%7Btransform:scale(1);opacity:0%7D%7D%3C/style%3E%3Ccircle class='pulse p1' cx='12' cy='12' r='10' fill='none' stroke-width='3'%3E%3C/circle%3E%3Ccircle class='pulse p2' cx='12' cy='12' r='10' fill='none' stroke-width='3'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+@utility loader {
+  @apply ai bg-text inline-block size-8 [&.lg]:size-10 [&.sm]:size-6;
+
+  content: "";
+}

package/src/components/surface.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@import "../theme.css";
+
+@utility empty-state {
+  @apply text-text-secondary flex flex-col items-center gap-3 p-[clamp(2rem,8vw,5rem)] text-center;
+}

package/src/components/tooltip.css

@@ -0,0 +1,60 @@
+@import "tailwindcss";
+@import "../theme.css";
+
+@utility tooltip {
+  --tooltip-bg: var(--color-surface);
+  --tooltip-fg: var(--color-text);
+  --tooltip-gap: 0.5rem;
+  --tooltip-top: calc(var(--tooltip-gap) * -1);
+  --tooltip-right: auto;
+  --tooltip-bottom: auto;
+  --tooltip-left: 50%;
+  --tooltip-origin: bottom;
+  --tooltip-transform: translate(-50%, -100%);
+
+  @apply relative;
+
+  &.tooltip-icon {
+    @apply bg-surface text-text inline-flex size-5 cursor-default items-center justify-center rounded-full text-sm font-bold;
+  }
+
+  &[data-tooltip-position="bottom"] {
+    --tooltip-top: auto;
+    --tooltip-bottom: calc(var(--tooltip-gap) * -1);
+    --tooltip-origin: top;
+    --tooltip-transform: translate(-50%, 100%);
+  }
+
+  &[data-tooltip-position="left"] {
+    --tooltip-top: 50%;
+    --tooltip-left: calc(var(--tooltip-gap) * -1);
+    --tooltip-origin: right;
+    --tooltip-transform: translate(-100%, -50%);
+  }
+
+  &[data-tooltip-position="right"] {
+    --tooltip-top: 50%;
+    --tooltip-left: auto;
+    --tooltip-right: calc(var(--tooltip-gap) * -1);
+    --tooltip-origin: left;
+    --tooltip-transform: translate(100%, -50%);
+  }
+
+  &::after {
+    @apply pointer-events-none absolute z-(--z-popover) w-max max-w-72 rounded-(--radius-control) bg-(--tooltip-bg) px-2.5 py-2 text-sm font-normal whitespace-normal text-(--tooltip-fg) opacity-0 shadow-(--elevation-high) transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
+    content: attr(data-tooltip);
+    left: var(--tooltip-left);
+    right: var(--tooltip-right);
+    top: var(--tooltip-top);
+    bottom: var(--tooltip-bottom);
+    transform: var(--tooltip-transform) scale(0);
+    transform-origin: var(--tooltip-origin);
+  }
+
+  &:hover::after,
+  &:focus-visible::after,
+  &[data-state="open"]::after {
+    opacity: 1;
+    transform: var(--tooltip-transform) scale(1);
+  }
+}

package/src/index.css

@@ -1,93 +1,7 @@
 @import "tailwindcss";
 
-@import "./components.css";
-
-@utility text-display {
-  @apply text-6xl font-bold tracking-tight md:text-8xl;
-}
-
-@utility text-title-lg {
-  @apply text-5xl font-bold tracking-tight md:text-6xl;
-}
-
-@utility text-title {
-  @apply text-3xl font-bold tracking-tight;
-}
-
-@utility text-title-sm {
-  @apply text-xl font-semibold tracking-tight;
-}
-
-@utility text-label-lg {
-  @apply text-lg font-medium tracking-wide;
-}
-
-@utility text-label {
-  @apply text-base font-medium tracking-wide;
-}
-
-@utility text-body {
-  @apply text-sm font-normal tracking-wider;
-}
-
-@layer base {
-  ::-webkit-scrollbar {
-    width: calc(var(--spacing) * 4);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--color-primary);
-    border: var(--spacing) solid var(--color-background);
-    border-radius: calc(var(--spacing) * 2);
-  }
-
-  html,
-  body {
-    @apply bg-background text-text font-default min-h-dvh overflow-x-hidden;
-  }
-
-  body {
-    @apply flex flex-col;
-  }
-
-  button {
-    @apply not-disabled:cursor-pointer;
-  }
-
-  img {
-    @apply select-none;
-  }
-
-  ::selection {
-    background: var(--color-primary);
-    color: var(--color-primary-contrast);
-  }
-
-  .selection-contrast::selection,
-  .selection-contrast *::selection {
-    background: var(--color-primary-contrast);
-    color: var(--color-primary);
-  }
-
-  :focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring);
-    outline-offset: var(--focus-ring-offset);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      scroll-behavior: auto !important;
-      transition-duration: 0.01ms !important;
-    }
-  }
-
-  p,
-  li,
-  a {
-    @apply text-body;
-  }
-}
+@import "./components/index.css";
+@import "./theme.css";
+@import "./typography.css";
+@import "./utilities.css";
+@import "./overrides.css";

package/src/overrides.css

@@ -0,0 +1,76 @@
+@import "tailwindcss";
+@import "./theme.css";
+@import "./typography.css";
+
+@layer base {
+  ::-webkit-scrollbar {
+    width: calc(var(--spacing) * 4);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-primary);
+    border: var(--spacing) solid var(--color-background);
+    border-radius: calc(var(--spacing) * 2);
+  }
+
+  html,
+  body {
+    @apply bg-background text-text font-default min-h-dvh overflow-x-hidden;
+  }
+
+  body {
+    @apply flex flex-col;
+  }
+
+  button {
+    @apply not-disabled:cursor-pointer;
+  }
+
+  img {
+    @apply select-none;
+  }
+
+  ::selection {
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+  }
+
+  :focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  p,
+  li,
+  a {
+    @apply text-body;
+  }
+}
+
+@layer components {
+  [aria-current="page"] {
+    @apply text-primary font-bold;
+  }
+
+  @media (forced-colors: active) {
+    .btn,
+    .ipt,
+    .textarea,
+    .select,
+    .alert,
+    .badge {
+      border-color: CanvasText;
+    }
+  }
+}

package/src/theme.css

@@ -8,10 +8,10 @@
   --color-primary-hover: var(--color-neutral-700);
   --color-primary-subtle: var(--color-neutral-200);
   --color-primary-strong: var(--color-neutral-900);
-  --color-accent: var(--color-neutral-300);
-  --color-accent-contrast: var(--color-neutral-950);
-  --color-accent-hover: var(--color-neutral-400);
-  --color-accent-subtle: var(--color-neutral-200);
+  --color-accent: var(--color-neutral-600);
+  --color-accent-contrast: var(--color-neutral-50);
+  --color-accent-hover: var(--color-neutral-700);
+  --color-accent-subtle: var(--color-neutral-100);
   --color-accent-strong: var(--color-neutral-800);
   --color-border: var(--color-neutral-300);
   --color-border-hover: var(--color-neutral-600);
@@ -20,6 +20,10 @@
   --color-surface: var(--color-neutral-200);
   --color-text: var(--color-neutral-950);
   --color-text-secondary: var(--color-neutral-700);
+  --color-text-contrast: var(--color-neutral-50);
+  --color-text-hover: var(--color-neutral-700);
+  --color-text-subtle: var(--color-neutral-200);
+  --color-text-strong: var(--color-neutral-900);
 
   --color-success: var(--color-emerald-600);
   --color-success-contrast: var(--color-neutral-50);
@@ -58,16 +62,15 @@
   --layout-cluster-gap: 0.75rem;
   --layout-grid-min: 16rem;
 
+  --radius-small: 0.25rem;
   --radius-control: 0.5rem;
   --radius-surface: 0.875rem;
-  --radius-overlay: 0.75rem;
   --control-height: 2.5rem;
   --border-width: 1px;
 
   --elevation-low: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
   --elevation-mid: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
   --elevation-high: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);
-  --elevation-overlay: 0 24px 48px rgb(15 23 42 / 0.18);
 
   --focus-ring: color-mix(in srgb, var(--color-primary) 64%, transparent);
   --focus-ring-offset: 2px;
@@ -78,9 +81,58 @@
   --motion-duration-slow: 400ms;
   --motion-ease: cubic-bezier(0.2, 0, 0, 1);
 
-  --backdrop-overlay: blur(16px);
   --z-popover: 40;
-  --z-toast: 60;
+
+  --surface-hover-transform: translateY(-1px);
+}
+
+.light,
+.theme-light,
+[data-theme="light"] {
+  color-scheme: light;
+
+  --color-primary: var(--color-neutral-950);
+  --color-primary-contrast: var(--color-neutral-50);
+  --color-primary-hover: var(--color-neutral-700);
+  --color-primary-subtle: var(--color-neutral-200);
+  --color-primary-strong: var(--color-neutral-900);
+  --color-accent: var(--color-neutral-600);
+  --color-accent-contrast: var(--color-neutral-50);
+  --color-accent-hover: var(--color-neutral-700);
+  --color-accent-subtle: var(--color-neutral-100);
+  --color-accent-strong: var(--color-neutral-800);
+  --color-border: var(--color-neutral-300);
+  --color-border-hover: var(--color-neutral-600);
+  --color-background: var(--color-neutral-50);
+  --color-foreground: var(--color-neutral-100);
+  --color-surface: var(--color-neutral-200);
+  --color-text: var(--color-neutral-950);
+  --color-text-secondary: var(--color-neutral-700);
+  --color-text-contrast: var(--color-neutral-50);
+  --color-text-hover: var(--color-neutral-700);
+  --color-text-subtle: var(--color-neutral-200);
+  --color-text-strong: var(--color-neutral-900);
+
+  --color-success: var(--color-emerald-600);
+  --color-success-contrast: var(--color-neutral-50);
+  --color-success-hover: color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong));
+  --color-success-subtle: var(--color-emerald-100);
+  --color-success-strong: var(--color-emerald-800);
+  --color-warning: var(--color-amber-600);
+  --color-warning-contrast: var(--color-neutral-50);
+  --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong));
+  --color-warning-subtle: var(--color-amber-100);
+  --color-warning-strong: var(--color-amber-800);
+  --color-destructive: var(--color-rose-700);
+  --color-destructive-contrast: var(--color-neutral-50);
+  --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong));
+  --color-destructive-subtle: var(--color-rose-100);
+  --color-destructive-strong: var(--color-rose-800);
+  --color-info: var(--color-indigo-600);
+  --color-info-contrast: var(--color-neutral-50);
+  --color-info-hover: color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong));
+  --color-info-subtle: var(--color-indigo-100);
+  --color-info-strong: var(--color-indigo-800);
 }
 
 .dark {
@@ -91,9 +143,9 @@
   --color-primary-hover: var(--color-neutral-200);
   --color-primary-subtle: var(--color-neutral-900);
   --color-primary-strong: var(--color-neutral-100);
-  --color-accent: var(--color-neutral-700);
-  --color-accent-contrast: var(--color-neutral-50);
-  --color-accent-hover: var(--color-neutral-500);
+  --color-accent: var(--color-neutral-400);
+  --color-accent-contrast: var(--color-neutral-950);
+  --color-accent-hover: var(--color-neutral-300);
   --color-accent-subtle: var(--color-neutral-800);
   --color-accent-strong: var(--color-neutral-200);
   --color-border: var(--color-neutral-700);
@@ -103,6 +155,10 @@
   --color-surface: var(--color-neutral-800);
   --color-text: var(--color-neutral-50);
   --color-text-secondary: var(--color-neutral-400);
+  --color-text-contrast: var(--color-neutral-950);
+  --color-text-hover: var(--color-neutral-200);
+  --color-text-subtle: var(--color-neutral-900);
+  --color-text-strong: var(--color-neutral-100);
 
   --color-success: var(--color-emerald-600);
   --color-success-contrast: var(--color-neutral-50);
@@ -126,4 +182,53 @@
   --color-info-strong: var(--color-indigo-100);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not(.light, .theme-light, [data-theme="light"]) {
+    color-scheme: dark;
+
+    --color-primary: var(--color-neutral-50);
+    --color-primary-contrast: var(--color-neutral-950);
+    --color-primary-hover: var(--color-neutral-200);
+    --color-primary-subtle: var(--color-neutral-900);
+    --color-primary-strong: var(--color-neutral-100);
+    --color-accent: var(--color-neutral-400);
+    --color-accent-contrast: var(--color-neutral-950);
+    --color-accent-hover: var(--color-neutral-300);
+    --color-accent-subtle: var(--color-neutral-800);
+    --color-accent-strong: var(--color-neutral-200);
+    --color-border: var(--color-neutral-700);
+    --color-border-hover: var(--color-neutral-500);
+    --color-background: var(--color-neutral-950);
+    --color-foreground: var(--color-neutral-900);
+    --color-surface: var(--color-neutral-800);
+    --color-text: var(--color-neutral-50);
+    --color-text-secondary: var(--color-neutral-400);
+    --color-text-contrast: var(--color-neutral-950);
+    --color-text-hover: var(--color-neutral-200);
+    --color-text-subtle: var(--color-neutral-900);
+    --color-text-strong: var(--color-neutral-100);
+
+    --color-success: var(--color-emerald-600);
+    --color-success-contrast: var(--color-neutral-50);
+    --color-success-hover: color-mix(in srgb, var(--color-success) 82%, var(--color-success-strong));
+    --color-success-subtle: var(--color-emerald-800);
+    --color-success-strong: var(--color-emerald-100);
+    --color-warning: var(--color-amber-600);
+    --color-warning-contrast: var(--color-neutral-50);
+    --color-warning-hover: color-mix(in srgb, var(--color-warning) 82%, var(--color-warning-strong));
+    --color-warning-subtle: var(--color-amber-800);
+    --color-warning-strong: var(--color-amber-100);
+    --color-destructive: var(--color-rose-700);
+    --color-destructive-contrast: var(--color-neutral-50);
+    --color-destructive-hover: color-mix(in srgb, var(--color-destructive) 82%, var(--color-destructive-strong));
+    --color-destructive-subtle: var(--color-rose-800);
+    --color-destructive-strong: var(--color-rose-100);
+    --color-info: var(--color-indigo-600);
+    --color-info-contrast: var(--color-neutral-50);
+    --color-info-hover: color-mix(in srgb, var(--color-info) 82%, var(--color-info-strong));
+    --color-info-subtle: var(--color-indigo-800);
+    --color-info-strong: var(--color-indigo-100);
+  }
+}
+
 @custom-variant dark (&:where(.dark, .dark *));

package/src/typography.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+@import "./theme.css";
+
+@utility text-display {
+  @apply text-6xl font-bold tracking-tight md:text-8xl;
+}
+
+@utility text-title-lg {
+  @apply text-5xl font-bold tracking-tight md:text-6xl;
+}
+
+@utility text-title {
+  @apply text-3xl font-bold tracking-tight;
+}
+
+@utility text-title-sm {
+  @apply text-xl font-semibold tracking-tight;
+}
+
+@utility text-label-lg {
+  @apply text-lg font-medium tracking-wide;
+}
+
+@utility text-label {
+  @apply text-base font-medium tracking-wide;
+}
+
+@utility text-body {
+  @apply text-sm font-normal tracking-wider;
+}

package/src/utilities.css

@@ -0,0 +1,40 @@
+@import "tailwindcss";
+@import "./theme.css";
+
+@utility stack {
+  @apply flex flex-col gap-(--layout-stack-gap);
+
+  &.tight {
+    --layout-stack-gap: 0.5rem;
+  }
+
+  &.loose {
+    --layout-stack-gap: 1.5rem;
+  }
+}
+
+@utility cluster {
+  @apply flex flex-wrap items-center gap-(--layout-cluster-gap);
+
+  &.between {
+    @apply justify-between;
+  }
+}
+
+@utility auto-grid {
+  @apply grid gap-(--layout-stack-gap);
+
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-grid-min), 100%), 1fr));
+}
+
+@utility selection-contrast {
+  &::selection,
+  & *::selection {
+    background: var(--color-primary-contrast);
+    color: var(--color-primary);
+  }
+}
+
+@utility code {
+  @apply bg-surface rounded-(--radius-small) px-1 py-0.5 font-mono;
+}

package/.docs/accessibility.md

@@ -1,53 +0,0 @@
-# @codenhub/styles Accessibility
-
-**Status:** IMPLEMENTED
-**Last updated:** 2026-06-12
-**Scope:** CSS accessibility behavior and non-goals for `@codenhub/styles`.
-
-This package provides CSS hooks for accessible states. It does not provide semantic HTML, ARIA attributes, keyboard behavior, focus management, validation, announcement timing, or JavaScript behavior.
-
-## Provided By CSS
-
-| Feature            | Behavior                                                                                                                  |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| `:focus-visible`   | Global focus-visible outline using `--focus-ring`, `--focus-ring-width`, and `--focus-ring-offset`.                       |
-| Form control focus | `.ipt`, `.textarea`, and `.select` use focused border and ring styles.                                                    |
-| Invalid controls   | `[aria-invalid="true"]` applies destructive border/focus color on form controls.                                          |
-| Disabled controls  | `[disabled]`, `[aria-disabled="true"]`, `[data-disabled]`, and `.disabled` apply disabled cursor/opacity where supported. |
-| Current page       | `[aria-current="page"]` applies primary color and stronger font weight.                                                   |
-| Open state         | `[data-state="open"]` styles supported surfaces and tooltips.                                                             |
-| Reduced motion     | `prefers-reduced-motion: reduce` globally shortens animations and transitions from the full stylesheet.                   |
-| Forced colors      | `forced-colors: active` preserves visible borders on key helpers.                                                         |
-
-## Required Outside CSS
-
-Use semantic HTML and behavior appropriate for the component.
-
-| UI                 | Required outside CSS                                                                                            |
-| ------------------ | --------------------------------------------------------------------------------------------------------------- |
-| Buttons            | Use `<button>` for actions or accessible links for navigation. Add accessible names for `.btn.icon`.            |
-| Forms              | Use labels, `type`, validation logic, `aria-describedby`, and error message relationships.                      |
-| Alerts             | Add `role="status"` or `role="alert"` based on announcement urgency.                                            |
-| Toasts             | Add live-region behavior, dismissal behavior, focus rules, and pause/timeout logic when needed.                 |
-| Tooltips           | Provide accessible names/descriptions. CSS pseudo-element content is not enough for all assistive tech.         |
-| Progress           | Use semantic progress elements or ARIA values when numeric progress must be announced.                          |
-| Skeletons/spinners | Mark decorative loading visuals with `aria-hidden="true"` and expose loading state elsewhere when needed.       |
-| Popovers/modals    | Provide focus trapping, escape handling, inert background behavior, labels, and roles outside this CSS package. |
-
-## State Attribute Guidance
-
-Prefer native attributes first:
-
-```html
-<button class="btn primary" disabled>Saving</button>
-<input class="ipt" aria-invalid="true" aria-describedby="email-error" />
-```
-
-Use ARIA or data attributes when native attributes are not available for the element or library:
-
-```html
-<a class="btn secondary" aria-disabled="true">Unavailable</a>
-<button class="tooltip icon" data-state="open" data-tooltip="More details" aria-label="More details">?</button>
-```
-
-`aria-disabled="true"` communicates disabled state but does not prevent activation. JavaScript or element choice must prevent activation when required.