@codenhub/styles 0.0.3 → 0.1.0

package/src/components/form.css

@@ -1,296 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-
-@utility field {
-  @apply flex w-full flex-col gap-1.5;
-
-  .label {
-    @apply text-text text-sm font-semibold;
-  }
-
-  .hint {
-    @apply text-text-secondary text-[0.8125rem];
-  }
-
-  .error:not(.btn),
-  &-error {
-    @apply text-destructive text-[0.8125rem] font-medium;
-  }
-}
-
-@utility ipt {
-  --control-bg: var(--color-background);
-  --control-border: var(--color-border);
-  --control-border-active: var(--color-primary);
-  --control-fg: var(--color-text);
-  --control-placeholder: var(--color-text-secondary);
-
-  @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
-  border: var(--border-width) solid var(--control-border);
-
-  &::placeholder {
-    color: var(--control-placeholder);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-border-active);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &[aria-invalid="true"] {
-    --control-border: var(--color-destructive);
-    --control-border-active: var(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-}
-
-@utility textarea {
-  --control-bg: var(--color-background);
-  --control-border: var(--color-border);
-  --control-border-active: var(--color-primary);
-  --control-fg: var(--color-text);
-  --control-placeholder: var(--color-text-secondary);
-
-  @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
-  border: var(--border-width) solid var(--control-border);
-
-  &::placeholder {
-    color: var(--control-placeholder);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-border-active);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &[aria-invalid="true"] {
-    --control-border: var(--color-destructive);
-    --control-border-active: var(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-
-  @apply min-h-28 resize-y;
-}
-
-@utility select {
-  --control-bg: var(--color-background);
-  --control-border: var(--color-border);
-  --control-border-active: var(--color-primary);
-  --control-fg: var(--color-text);
-  --control-placeholder: var(--color-text-secondary);
-
-  @apply min-h-(--control-height,2.5rem) w-full rounded-(--radius-control) bg-(--control-bg) px-3 py-2 text-(--control-fg) transition-[border-color,box-shadow,color,opacity] duration-(--motion-duration-fast) ease-(--motion-ease);
-  border: var(--border-width) solid var(--control-border);
-
-  &::placeholder {
-    color: var(--control-placeholder);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-border-active);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &[aria-invalid="true"] {
-    --control-border: var(--color-destructive);
-    --control-border-active: var(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed;
-
-    opacity: 0.58;
-  }
-
-  appearance: none;
-}
-
-@utility checkbox {
-  --control-color: var(--color-text);
-  --control-contrast: var(--color-text-contrast);
-
-  @apply inline-grid size-4 cursor-pointer appearance-none place-content-center rounded-sm bg-(--color-background) transition-[background-color,border-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
-  border: var(--border-width) solid var(--color-border);
-
-  &:hover {
-    @apply border-(--color-border-hover);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-color);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &::after {
-    @apply block size-3 opacity-0 transition-opacity duration-(--motion-duration-normal) ease-(--motion-ease);
-
-    background-color: var(--control-contrast);
-    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="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></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="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
-    mask-size: contain;
-    -webkit-mask-size: contain;
-  }
-
-  &:checked {
-    border-color: var(--control-color);
-    background-color: var(--control-color);
-
-    &::after {
-      @apply opacity-100;
-    }
-  }
-
-  &.primary {
-    --control-color: var(--color-primary);
-    --control-contrast: var(--color-primary-contrast);
-  }
-
-  &.secondary {
-    --control-color: var(--color-accent);
-    --control-contrast: var(--color-accent-contrast);
-  }
-
-  &.success {
-    --control-color: var(--color-success);
-    --control-contrast: var(--color-success-contrast);
-  }
-
-  &.warning {
-    --control-color: var(--color-warning);
-    --control-contrast: var(--color-warning-contrast);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --control-color: var(--color-destructive);
-    --control-contrast: var(--color-destructive-contrast);
-  }
-
-  &.info {
-    --control-color: var(--color-info);
-    --control-contrast: var(--color-info-contrast);
-  }
-
-  &[aria-invalid="true"] {
-    @apply border-(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed opacity-[0.58];
-  }
-}
-
-@utility switch {
-  --control-color: var(--color-text);
-  --control-contrast: var(--color-text-contrast);
-
-  @apply relative h-4.5 w-9 cursor-pointer appearance-none rounded-full bg-(--color-surface) transition-[background-color,box-shadow] duration-(--motion-duration-normal) ease-(--motion-ease);
-
-  &::after {
-    @apply absolute top-0.5 left-0.5 size-3.5 rounded-full bg-(--color-text-secondary) transition-[transform,translate,background-color] duration-(--motion-duration-normal) ease-(--motion-ease);
-
-    content: "";
-  }
-
-  &:hover {
-    @apply border-(--color-border-hover);
-  }
-
-  &:focus {
-    @apply outline-none;
-  }
-
-  &:focus-visible {
-    border-color: var(--control-color);
-    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
-  }
-
-  &:checked {
-    border-color: var(--control-color);
-    background-color: var(--control-color);
-
-    &::after {
-      @apply translate-x-4.5;
-
-      background-color: var(--control-contrast);
-    }
-  }
-
-  &.primary {
-    --control-color: var(--color-primary);
-    --control-contrast: var(--color-primary-contrast);
-  }
-
-  &.secondary {
-    --control-color: var(--color-accent);
-    --control-contrast: var(--color-accent-contrast);
-  }
-
-  &.success {
-    --control-color: var(--color-success);
-    --control-contrast: var(--color-success-contrast);
-  }
-
-  &.warning {
-    --control-color: var(--color-warning);
-    --control-contrast: var(--color-warning-contrast);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --control-color: var(--color-destructive);
-    --control-contrast: var(--color-destructive-contrast);
-  }
-
-  &.info {
-    --control-color: var(--color-info);
-    --control-contrast: var(--color-info-contrast);
-  }
-
-  &[aria-invalid="true"] {
-    @apply border-(--color-destructive);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"],
-  &[data-disabled] {
-    @apply cursor-not-allowed opacity-[0.58];
-  }
-}

package/src/components/index.css

@@ -1,9 +0,0 @@
-@import "tailwindcss";
-@import "../theme.css";
-@import "../typography.css";
-@import "./button.css";
-@import "./feedback.css";
-@import "./form.css";
-@import "./loader.css";
-@import "./surface.css";
-@import "./tooltip.css";

package/src/components/loader.css

@@ -1,56 +0,0 @@
-@import "tailwindcss";
-
-@utility ai {
-  --ai-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>');
-
-  mask-image: var(--ai-image);
-  -webkit-mask-image: var(--ai-image);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-}
-
-@utility spinner-stretch {
-  --ai-image: url('data:image/svg+xml;utf8,<svg stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>');
-}
-
-@utility dots-wave {
-  --ai-image: url('data:image/svg+xml;utf8,<svg fill="red" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_8HQG{0%,57.14%{animation-timing-function:cubic-bezier(.33,.66,.66,1);transform:translate(0)}28.57%{animation-timing-function:cubic-bezier(.33,0,.66,.33);transform:translateY(-6px)}to{transform:translate(0)}}.spinner_qM83{animation:spinner_8HQG 1.05s infinite}</style><circle class="spinner_qM83" cx="4" cy="12" r="3"/><circle class="spinner_qM83" cx="12" cy="12" r="3" style="animation-delay:.1s"/><circle class="spinner_qM83" cx="20" cy="12" r="3" style="animation-delay:.2s"/></svg>');
-}
-
-@utility dots-fade {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.dot{animation:dot-anim 1s ease-in-out infinite;fill:currentColor}.d1{animation-delay:-0.32s}.d2{animation-delay:-0.16s}@keyframes dot-anim{0%,80%,100%{transform:scale(0.6);opacity:0.2}40%{transform:scale(1);opacity:1}}</style><circle class="dot d1" cx="4" cy="12" r="3" transform-origin="4px 12px"></circle><circle class="dot d2" cx="12" cy="12" r="3" transform-origin="12px 12px"></circle><circle class="dot d3" cx="20" cy="12" r="3" transform-origin="20px 12px"></circle></svg>');
-}
-
-@utility dots-queue {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_qtyZ{0%{r:0}25%{r:3px;cx:4px}50%{r:3px;cx:12px}75%{r:3px;cx:20px}to{r:0;cx:20px}}.spinner_nOfF{animation:spinner_qtyZ 2s cubic-bezier(.36,.6,.31,1) infinite}</style><circle class="spinner_nOfF" cx="4" cy="12" r="3"/><circle class="spinner_nOfF" cx="4" cy="12" r="3" style="animation-delay:-.5s"/><circle class="spinner_nOfF" cx="4" cy="12" r="3" style="animation-delay:-1s"/><circle class="spinner_nOfF" cx="4" cy="12" r="3" style="animation-delay:-1.5s"/></svg>');
-}
-
-@utility dots-rotate {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_XVY9{50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}</style><circle cx="12" cy="12" r="3"/><g style="transform-origin:center;animation:spinner_XVY9 1s cubic-bezier(.36,.6,.31,1) infinite"><circle cx="4" cy="12" r="3"/><circle cx="20" cy="12" r="3"/></g></svg>');
-}
-
-@utility dots-grow {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}</style><circle class="spinner_b2T7" cx="4" cy="12" r="3"/><circle class="spinner_b2T7" cx="12" cy="12" r="3" style="animation-delay:-.65s"/><circle class="spinner_b2T7" cx="20" cy="12" r="3" style="animation-delay:-.5s"/></svg>');
-}
-
-@utility dots-grow-alternate {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_qhi1{0%,to{r:1.5px}50%{r:3px}}.spinner_I8Q1{animation:spinner_qhi1 .75s linear infinite}</style><circle class="spinner_I8Q1" cx="4" cy="12" r="1.5"/><circle class="spinner_I8Q1" cx="12" cy="12" r="3" style="animation-delay:-.375s"/><circle class="spinner_I8Q1" cx="20" cy="12" r="1.5"/></svg>');
-}
-
-@utility dot-bounce {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes spinner_YeBj{0%{animation-timing-function:cubic-bezier(.33,0,.66,.33);cy:5px}46.875%{cy:20px;rx:4px;ry:4px}50%{animation-timing-function:cubic-bezier(.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px}53.125%{rx:4px;ry:4px}to{cy:5px}}</style><circle cx="12" cy="5" style="animation:spinner_YeBj .8s infinite" r="4"/></svg>');
-}
-
-@utility bars-wave {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.bar{animation:bar-anim 1s ease-in-out infinite;fill:currentColor}.b1{animation-delay:-0.4s}.b2{animation-delay:-0.2s}@keyframes bar-anim{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}</style><rect class="bar b1" x="3" y="2" width="4" height="20" rx="2" transform-origin="5px 12px"></rect><rect class="bar b2" x="10" y="2" width="4" height="20" rx="2" transform-origin="12px 12px"></rect><rect class="bar b3" x="17" y="2" width="4" height="20" rx="2" transform-origin="19px 12px"></rect></svg>');
-}
-
-@utility pulse-ring {
-  --ai-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.pulse{animation:pulse-anim 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;stroke:currentColor;transform-origin:center}.p2{animation-delay:-0.6s}@keyframes pulse-anim{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}</style><circle class="pulse p1" cx="12" cy="12" r="10" fill="none" stroke-width="3"></circle><circle class="pulse p2" cx="12" cy="12" r="10" fill="none" stroke-width="3"></circle></svg>');
-}
-
-@utility loader {
-  @apply ai bg-text inline-block size-8 [&.lg]:size-10 [&.sm]:size-6;
-
-  content: "";
-}

package/src/components/surface.css

@@ -1,6 +0,0 @@
-@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

@@ -1,60 +0,0 @@
-@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,7 +0,0 @@
-@import "tailwindcss";
-
-@import "./components/index.css";
-@import "./theme.css";
-@import "./typography.css";
-@import "./utilities.css";
-@import "./overrides.css";

package/src/overrides.css

@@ -1,76 +0,0 @@
-@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

@@ -1,136 +0,0 @@
-@import "tailwindcss";
-
-@theme {
-  --font-default: "Segoe UI", system-ui, sans-serif;
-
-  --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);
-
-  --breakpoint-xs: 30rem;
-  --breakpoint-2xl: 90rem;
-}
-
-:root {
-  color-scheme: light;
-
-  --container-narrow: 48rem;
-  --container-max: 80rem;
-  --container-wide: 90rem;
-  --layout-gutter: clamp(1rem, 4vw, 2rem);
-  --layout-section-block: clamp(4rem, 9vw, 7rem);
-  --layout-stack-gap: 1rem;
-  --layout-cluster-gap: 0.75rem;
-  --layout-grid-min: 16rem;
-
-  --radius-small: 0.25rem;
-  --radius-control: 0.5rem;
-  --radius-surface: 0.875rem;
-  --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);
-
-  --focus-ring: color-mix(in srgb, var(--color-primary) 64%, transparent);
-  --focus-ring-offset: 2px;
-  --focus-ring-width: 3px;
-
-  --motion-duration-fast: 120ms;
-  --motion-duration-normal: 200ms;
-  --motion-duration-slow: 400ms;
-  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
-
-  --z-popover: 40;
-
-  --surface-hover-transform: translateY(-1px);
-}
-
-.dark {
-  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

@@ -1,30 +0,0 @@
-@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;
-}