@hewnui/themes 0.0.0-stage → 0.1.0

package/src/glass-buttons.css

@@ -0,0 +1,46 @@
+html[data-material="glass"] [data-kp-control="button-primary"] {
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--kp-accent) 92%, white 10%),
+    var(--kp-accent)
+  );
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 16%),
+    0 10px 24px -12px color-mix(in oklch, var(--kp-accent) 58%, transparent),
+    inset 0 1px 0 oklch(1 0 0 / 36%),
+    inset 0 0 0 1px oklch(1 0 0 / 8%);
+}
+
+html[data-material="glass"] [data-kp-control="button-secondary"] {
+  background: color-mix(in oklch, var(--kp-surface) 48%, transparent);
+  border-color: color-mix(in oklch, var(--kp-foreground) 18%, transparent);
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 10%),
+    inset 0 1px 0 oklch(1 0 0 / 42%),
+    inset 0 0 0 1px oklch(1 0 0 / 6%);
+  backdrop-filter: blur(12px) saturate(1.25);
+  -webkit-backdrop-filter: blur(12px) saturate(1.25);
+}
+
+html[data-material="glass"] [data-kp-control="button-ghost"] {
+  background: color-mix(in oklch, var(--kp-muted) 28%, transparent);
+  box-shadow: inset 0 1px 0 oklch(1 0 0 / 18%);
+  backdrop-filter: blur(8px) saturate(1.15);
+  -webkit-backdrop-filter: blur(8px) saturate(1.15);
+}
+
+html[data-material="glass"] [data-kp-control="button-ghost"]:hover {
+  background: color-mix(in oklch, var(--kp-muted) 48%, transparent);
+}
+
+html[data-material="glass"] [data-kp-control="button-danger"] {
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklch, var(--kp-danger) 90%, white 8%),
+    var(--kp-danger)
+  );
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 16%),
+    0 10px 24px -12px color-mix(in oklch, var(--kp-danger) 52%, transparent),
+    inset 0 1px 0 oklch(1 0 0 / 28%);
+}

package/src/glass.css

@@ -0,0 +1,266 @@
+/* Material surfaces — specificity must beat Tailwind bg-* utilities. */
+
+html[data-material="glass"] {
+  --kp-glass-blur: 22px;
+  --kp-glass-saturate: 1.35;
+  --kp-glass-fill: color-mix(in oklch, var(--kp-surface) 46%, transparent);
+  --kp-glass-sheen: linear-gradient(
+    148deg,
+    color-mix(in oklch, var(--kp-glass-tint) 70%, white 8%),
+    color-mix(in oklch, var(--kp-surface) 22%, transparent) 42%,
+    color-mix(in oklch, var(--kp-surface) 38%, transparent)
+  );
+  --kp-glass-border: color-mix(in oklch, var(--kp-foreground) 16%, transparent);
+}
+
+html[data-material="glass"] body {
+  background-color: var(--kp-background);
+  background-image:
+    radial-gradient(
+      ellipse 70% 50% at 12% -8%,
+      var(--kp-glass-tint),
+      transparent 58%
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 92% 18%,
+      color-mix(in oklch, var(--kp-glass-tint) 72%, transparent),
+      transparent 52%
+    ),
+    radial-gradient(
+      ellipse 40% 35% at 48% 88%,
+      color-mix(in oklch, var(--kp-accent) 14%, transparent),
+      transparent 60%
+    );
+  background-attachment: fixed;
+}
+
+html[data-material="glass"] [data-kp-surface] {
+  background-color: var(--kp-glass-fill) !important;
+  background-image: var(--kp-glass-sheen) !important;
+  border-color: var(--kp-glass-border) !important;
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 38%),
+    inset 0 0 0 1px oklch(1 0 0 / 6%),
+    var(--kp-shadow-surface);
+}
+
+/*
+  Flushed fields stay underline-only under glass material.
+  Outline / filled / glass variants keep panel glass via data-kp-surface.
+*/
+html[data-material="glass"] [data-kp-field="flushed"] {
+  background-color: transparent !important;
+  background-image: none !important;
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: color-mix(
+    in oklch,
+    var(--kp-foreground) 34%,
+    transparent
+  ) !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+html[data-material="glass"] [data-kp-field="flushed"]:focus-within,
+html[data-material="glass"] [data-kp-field="flushed"]:focus-visible {
+  border-bottom-color: var(--kp-ring) !important;
+  box-shadow: 0 1px 0 0
+    color-mix(in oklch, var(--kp-ring) 55%, transparent) !important;
+}
+
+/* Field-scale glass: slightly denser fill than large panels for readability. */
+html[data-material="glass"] input[data-kp-surface],
+html[data-material="glass"] textarea[data-kp-surface],
+html[data-material="glass"] button[data-kp-surface],
+html[data-material="glass"] [role="group"][data-kp-surface] {
+  --kp-glass-fill: color-mix(in oklch, var(--kp-surface) 58%, transparent);
+}
+
+/* Upload zone keeps dashed geometry under glass; denser fill for readability. */
+html[data-material="glass"] [data-kp-upload="zone"] {
+  --kp-glass-fill: color-mix(in oklch, var(--kp-surface) 54%, transparent);
+  border-style: dashed !important;
+}
+
+html[data-material="glass"] [data-kp-upload="zone"][data-drop-target] {
+  --kp-glass-fill: color-mix(in oklch, var(--kp-accent) 16%, var(--kp-surface));
+  border-style: solid !important;
+  border-color: var(--kp-accent) !important;
+}
+
+html[data-material="glass"] [data-kp-upload="row"] {
+  --kp-glass-fill: color-mix(in oklch, var(--kp-surface) 62%, transparent);
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  html[data-material="glass"] [data-kp-surface] {
+    backdrop-filter: blur(var(--kp-glass-blur))
+      saturate(var(--kp-glass-saturate));
+    -webkit-backdrop-filter: blur(var(--kp-glass-blur))
+      saturate(var(--kp-glass-saturate));
+  }
+}
+
+/* Interactive controls keep their own states — never panel-glass. */
+html[data-material="glass"] [data-kp-control="switch"] {
+  background-color: color-mix(in oklch, var(--kp-muted) 55%, transparent);
+  border-color: color-mix(in oklch, var(--kp-foreground) 24%, transparent);
+  box-shadow:
+    inset 0 1px 2px oklch(0 0 0 / 16%),
+    inset 0 -1px 0 oklch(1 0 0 / 22%),
+    inset 0 0 0 1px oklch(1 0 0 / 10%);
+  backdrop-filter: blur(10px) saturate(1.25);
+  -webkit-backdrop-filter: blur(10px) saturate(1.25);
+}
+
+html[data-material="glass"]
+  .group[data-selected]
+  > [data-kp-control="switch"] {
+  background-color: color-mix(in oklch, var(--kp-accent) 88%, white 6%);
+  border-color: color-mix(in oklch, var(--kp-accent) 80%, white 8%);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 34%),
+    0 0 0 3px color-mix(in oklch, var(--kp-accent) 26%, transparent),
+    0 10px 22px -12px color-mix(in oklch, var(--kp-accent) 60%, transparent);
+  backdrop-filter: blur(8px) saturate(1.35);
+  -webkit-backdrop-filter: blur(8px) saturate(1.35);
+}
+
+html[data-material="glass"] [data-kp-control="switch-thumb"] {
+  background: linear-gradient(
+    180deg,
+    oklch(1 0 0 / 96%),
+    color-mix(in oklch, var(--kp-surface-raised) 88%, white)
+  );
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 24%),
+    0 6px 14px oklch(0 0 0 / 14%),
+    inset 0 1px 0 oklch(1 0 0 / 90%);
+}
+
+html[data-material="glass"] [data-kp-control="checkbox"] {
+  background-color: color-mix(in oklch, var(--kp-surface) 58%, transparent);
+  border-color: color-mix(in oklch, var(--kp-foreground) 26%, transparent);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 45%),
+    0 1px 2px oklch(0 0 0 / 10%);
+  backdrop-filter: blur(8px) saturate(1.2);
+  -webkit-backdrop-filter: blur(8px) saturate(1.2);
+}
+
+html[data-material="glass"]
+  .group[data-selected]
+  > [data-kp-control="checkbox"] {
+  background-color: var(--kp-accent);
+  border-color: var(--kp-accent);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 32%),
+    0 0 0 3px color-mix(in oklch, var(--kp-accent) 22%, transparent);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+html[data-material="glass"] [data-kp-control="radio"] {
+  background-color: color-mix(in oklch, var(--kp-surface) 58%, transparent);
+  border-color: color-mix(in oklch, var(--kp-foreground) 34%, transparent);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 42%),
+    inset 0 0 0 1px oklch(1 0 0 / 6%);
+  backdrop-filter: blur(8px) saturate(1.2);
+  -webkit-backdrop-filter: blur(8px) saturate(1.2);
+}
+
+html[data-material="glass"]
+  .group[data-selected]
+  > [data-kp-control="radio"] {
+  background-color: var(--kp-accent);
+  border-color: var(--kp-accent);
+  box-shadow: inset 0 1px 0 oklch(1 0 0 / 34%);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+html[data-material="glass"] [data-kp-control="tabs"] {
+  background-color: color-mix(in oklch, var(--kp-muted) 48%, transparent);
+  border-color: color-mix(in oklch, var(--kp-foreground) 14%, transparent);
+  box-shadow: inset 0 1px 2px oklch(0 0 0 / 10%);
+  backdrop-filter: blur(12px) saturate(1.2);
+  -webkit-backdrop-filter: blur(12px) saturate(1.2);
+}
+
+/* Toasts: denser frosted panel + tone sheen (not generic data-kp-surface). */
+html[data-material="glass"] [data-kp-control="toast"] {
+  background-color: color-mix(
+    in oklch,
+    var(--kp-surface-raised) 62%,
+    transparent
+  ) !important;
+  background-image: linear-gradient(
+    152deg,
+    color-mix(in oklch, var(--toast-tone) 22%, transparent),
+    color-mix(in oklch, var(--kp-glass-tint) 28%, transparent) 38%,
+    color-mix(in oklch, var(--kp-surface-raised) 35%, transparent) 72%
+  ) !important;
+  border-color: color-mix(
+    in oklch,
+    var(--toast-tone) 34%,
+    var(--kp-glass-border)
+  ) !important;
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 42%),
+    inset 0 0 0 1px oklch(1 0 0 / 8%),
+    0 18px 40px -24px oklch(0 0 0 / 45%),
+    var(--kp-shadow-surface);
+  backdrop-filter: blur(18px) saturate(1.35);
+  -webkit-backdrop-filter: blur(18px) saturate(1.35);
+}
+
+html[data-material="glass"] [data-kp-control="toast"] [data-kp-toast="icon"] {
+  background-color: color-mix(
+    in oklch,
+    var(--toast-tone) 22%,
+    transparent
+  );
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 38%),
+    inset 0 0 0 1px color-mix(in oklch, var(--toast-tone) 28%, transparent);
+  backdrop-filter: blur(8px) saturate(1.25);
+  -webkit-backdrop-filter: blur(8px) saturate(1.25);
+}
+
+html[data-material="glass"] [data-kp-control="tab-indicator"] {
+  background: color-mix(in oklch, var(--kp-surface-raised) 72%, transparent);
+  box-shadow:
+    0 1px 2px oklch(0 0 0 / 12%),
+    0 8px 20px -12px oklch(0 0 0 / 30%),
+    inset 0 1px 0 oklch(1 0 0 / 55%);
+  backdrop-filter: blur(10px) saturate(1.25);
+  -webkit-backdrop-filter: blur(10px) saturate(1.25);
+}
+
+html[data-mode="dark"][data-material="glass"] [data-kp-surface] {
+  --kp-glass-fill: color-mix(in oklch, var(--kp-surface) 52%, transparent);
+  box-shadow:
+    inset 0 1px 0 oklch(1 0 0 / 12%),
+    inset 0 0 0 1px oklch(1 0 0 / 5%),
+    var(--kp-shadow-surface);
+}
+
+html[data-theme="ember"][data-material="glass"] {
+  --kp-glass-blur: 24px;
+  --kp-glass-saturate: 1.42;
+}
+
+html[data-theme="dune"][data-material="glass"],
+html[data-theme="clay"][data-material="glass"] {
+  --kp-glass-blur: 20px;
+  --kp-glass-saturate: 1.22;
+}
+
+html[data-theme="graphite"][data-material="glass"] {
+  --kp-glass-blur: 18px;
+  --kp-glass-saturate: 1.15;
+}

package/src/motion.css

@@ -0,0 +1,60 @@
+/* Shared motion scale. Packs still set --kp-motion-duration / spring
+   character; these tokens are the free-library contract for CSS transitions. */
+
+:root {
+  --kp-motion-duration-instant: 0ms;
+  --kp-motion-duration-fast: 120ms;
+  --kp-motion-duration-slow: 360ms;
+  --kp-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --kp-motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --kp-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --kp-motion-ease-linear: linear;
+  --kp-motion-ease: var(--kp-motion-ease-standard);
+}
+
+/* Pack default when no theme pack has applied yet. */
+:root {
+  --kp-motion-duration: 200ms;
+  --kp-motion-stiffness: 360;
+  --kp-motion-damping: 28;
+}
+
+/*
+  Mode attribute is written by MotionProvider (effective mode).
+  reduced/off zero timing tokens so CSS-only surfaces collapse safely.
+  Transform/layout animation remains forbidden in sources (see check:motion).
+*/
+html[data-motion="reduced"],
+html[data-motion="off"] {
+  --kp-motion-duration-instant: 0ms;
+  --kp-motion-duration-fast: 0ms;
+  --kp-motion-duration: 0ms;
+  --kp-motion-duration-slow: 0ms;
+}
+
+html[data-motion="reduced"] .kp-spinner,
+html[data-motion="off"] .kp-spinner,
+html[data-motion="reduced"] .kp-progress-indeterminate,
+html[data-motion="off"] .kp-progress-indeterminate,
+html[data-motion="reduced"] [data-kp-control="skeleton"],
+html[data-motion="off"] [data-kp-control="skeleton"] {
+  animation: none;
+}
+
+html[data-motion="reduced"] .kp-spinner,
+html[data-motion="off"] .kp-spinner {
+  opacity: 0.72;
+  border-color: color-mix(in oklch, currentColor 35%, transparent);
+  border-top-color: currentColor;
+}
+
+html[data-motion="reduced"] .kp-progress-indeterminate,
+html[data-motion="off"] .kp-progress-indeterminate {
+  opacity: 0.7;
+  left: 33%;
+}
+
+html[data-motion="reduced"] [data-kp-control="skeleton"],
+html[data-motion="off"] [data-kp-control="skeleton"] {
+  opacity: 0.85;
+}

package/src/packs/clay.css

@@ -0,0 +1,45 @@
+[data-theme="clay"][data-mode="light"] {
+  color-scheme: light;
+  --kp-background: oklch(0.955 0.02 55);
+  --kp-foreground: oklch(0.27 0.045 40);
+  --kp-surface: oklch(0.98 0.012 50);
+  --kp-surface-raised: oklch(0.995 0.006 45);
+  --kp-muted: oklch(0.915 0.025 50);
+  --kp-muted-foreground: oklch(0.5 0.045 40);
+  --kp-accent: oklch(0.55 0.12 40);
+  --kp-accent-foreground: oklch(0.98 0.01 50);
+  --kp-border: oklch(0.4 0.05 40 / 16%);
+  --kp-ring: oklch(0.6 0.13 40);
+  --kp-danger: oklch(0.54 0.17 28);
+  --kp-danger-foreground: oklch(0.985 0.01 28);
+  --kp-danger-subtle: oklch(0.94 0.035 28);
+  --kp-danger-border: oklch(0.56 0.12 28 / 40%);
+  --kp-success: oklch(0.55 0.15 145);
+  --kp-success-foreground: oklch(0.985 0.01 145);
+  --kp-success-subtle: oklch(0.94 0.035 145);
+  --kp-success-border: oklch(0.55 0.12 145 / 40%);
+  --kp-warning: oklch(0.75 0.14 55);
+  --kp-warning-foreground: oklch(0.25 0.05 55);
+  --kp-warning-subtle: oklch(0.94 0.04 55);
+  --kp-warning-border: oklch(0.72 0.12 55 / 40%);
+  --kp-info: oklch(0.52 0.11 230);
+  --kp-info-foreground: oklch(0.985 0.01 230);
+  --kp-info-subtle: oklch(0.94 0.03 230);
+  --kp-info-border: oklch(0.52 0.09 230 / 40%);
+  --kp-glass-tint: oklch(0.74 0.1 45 / 28%);
+  --kp-radius-sm: 0.5rem;
+  --kp-radius-md: 0.8rem;
+  --kp-radius-lg: 1.05rem;
+  --kp-radius-panel: 1.05rem;
+  --kp-density: 1;
+  --kp-motion-duration: 270ms;
+  --kp-motion-stiffness: 320;
+  --kp-motion-damping: 27;
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.32 0.05 40 / 6%),
+    0 18px 42px -26px oklch(0.42 0.06 45 / 28%);
+  --kp-font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui,
+    sans-serif;
+  --kp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
+  --kp-font-display: var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans);
+}

package/src/packs/dune.css

@@ -0,0 +1,45 @@
+[data-theme="dune"][data-mode="light"] {
+  color-scheme: light;
+  --kp-background: oklch(0.96 0.02 85);
+  --kp-foreground: oklch(0.28 0.04 65);
+  --kp-surface: oklch(0.985 0.012 90);
+  --kp-surface-raised: oklch(0.995 0.006 95);
+  --kp-muted: oklch(0.92 0.025 85);
+  --kp-muted-foreground: oklch(0.5 0.04 70);
+  --kp-accent: oklch(0.58 0.11 70);
+  --kp-accent-foreground: oklch(0.98 0.01 90);
+  --kp-border: oklch(0.4 0.04 70 / 16%);
+  --kp-ring: oklch(0.62 0.12 70);
+  --kp-danger: oklch(0.55 0.16 30);
+  --kp-danger-foreground: oklch(0.985 0.01 30);
+  --kp-danger-subtle: oklch(0.94 0.035 30);
+  --kp-danger-border: oklch(0.56 0.12 30 / 40%);
+  --kp-success: oklch(0.55 0.15 140);
+  --kp-success-foreground: oklch(0.985 0.01 140);
+  --kp-success-subtle: oklch(0.94 0.035 140);
+  --kp-success-border: oklch(0.55 0.12 140 / 40%);
+  --kp-warning: oklch(0.75 0.14 70);
+  --kp-warning-foreground: oklch(0.25 0.05 70);
+  --kp-warning-subtle: oklch(0.94 0.04 70);
+  --kp-warning-border: oklch(0.72 0.12 70 / 40%);
+  --kp-info: oklch(0.52 0.11 230);
+  --kp-info-foreground: oklch(0.985 0.01 230);
+  --kp-info-subtle: oklch(0.94 0.03 230);
+  --kp-info-border: oklch(0.52 0.09 230 / 40%);
+  --kp-glass-tint: oklch(0.78 0.09 80 / 30%);
+  --kp-radius-sm: 0.55rem;
+  --kp-radius-md: 0.85rem;
+  --kp-radius-lg: 1.15rem;
+  --kp-radius-panel: 1.15rem;
+  --kp-density: 0.95;
+  --kp-motion-duration: 280ms;
+  --kp-motion-stiffness: 300;
+  --kp-motion-damping: 26;
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.35 0.04 70 / 6%),
+    0 18px 44px -26px oklch(0.45 0.05 75 / 26%);
+  --kp-font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui,
+    sans-serif;
+  --kp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
+  --kp-font-display: var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans);
+}

package/src/packs/ember.css

@@ -0,0 +1,45 @@
+[data-theme="ember"][data-mode="dark"] {
+  color-scheme: dark;
+  --kp-background: oklch(0.17 0.02 40);
+  --kp-foreground: oklch(0.93 0.02 70);
+  --kp-surface: oklch(0.21 0.025 40);
+  --kp-surface-raised: oklch(0.255 0.03 42);
+  --kp-muted: oklch(0.275 0.028 40);
+  --kp-muted-foreground: oklch(0.72 0.03 60);
+  --kp-accent: oklch(0.7 0.15 50);
+  --kp-accent-foreground: oklch(0.985 0.015 50);
+  --kp-border: oklch(0.84 0.03 60 / 14%);
+  --kp-ring: oklch(0.7 0.15 50);
+  --kp-danger: oklch(0.66 0.17 28);
+  --kp-danger-foreground: oklch(0.985 0.01 28);
+  --kp-danger-subtle: oklch(0.32 0.05 28);
+  --kp-danger-border: oklch(0.72 0.1 28 / 40%);
+  --kp-success: oklch(0.72 0.14 145);
+  --kp-success-foreground: oklch(0.985 0.01 145);
+  --kp-success-subtle: oklch(0.32 0.045 145);
+  --kp-success-border: oklch(0.72 0.1 145 / 40%);
+  --kp-warning: oklch(0.78 0.12 70);
+  --kp-warning-foreground: oklch(0.22 0.04 70);
+  --kp-warning-subtle: oklch(0.34 0.04 70);
+  --kp-warning-border: oklch(0.78 0.1 70 / 40%);
+  --kp-info: oklch(0.72 0.1 230);
+  --kp-info-foreground: oklch(0.985 0.01 230);
+  --kp-info-subtle: oklch(0.32 0.035 230);
+  --kp-info-border: oklch(0.72 0.08 230 / 40%);
+  --kp-glass-tint: oklch(0.58 0.15 50 / 28%);
+  --kp-radius-sm: 0.45rem;
+  --kp-radius-md: 0.7rem;
+  --kp-radius-lg: 0.95rem;
+  --kp-radius-panel: 0.95rem;
+  --kp-density: 1.05;
+  --kp-motion-duration: 230ms;
+  --kp-motion-stiffness: 400;
+  --kp-motion-damping: 28;
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.08 0.03 40 / 40%),
+    0 22px 48px -28px oklch(0.12 0.05 45 / 80%);
+  --kp-font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui,
+    sans-serif;
+  --kp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
+  --kp-font-display: var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans);
+}

package/src/packs/forest.css

@@ -0,0 +1,80 @@
+:root,
+[data-theme="forest"][data-mode="light"] {
+  color-scheme: light;
+  --kp-background: oklch(0.972 0.012 145);
+  --kp-foreground: oklch(0.225 0.028 145);
+  --kp-surface: oklch(0.995 0.004 145);
+  --kp-surface-raised: oklch(1 0 0);
+  --kp-muted: oklch(0.925 0.022 145);
+  --kp-muted-foreground: oklch(0.49 0.035 145);
+  --kp-accent: oklch(0.49 0.105 148);
+  --kp-accent-foreground: oklch(0.985 0.008 145);
+  --kp-border: oklch(0.36 0.035 145 / 14%);
+  --kp-ring: oklch(0.55 0.12 148);
+  --kp-danger: oklch(0.56 0.17 27);
+  --kp-danger-foreground: oklch(0.985 0.01 27);
+  --kp-danger-subtle: oklch(0.94 0.035 27);
+  --kp-danger-border: oklch(0.56 0.12 27 / 40%);
+  --kp-success: oklch(0.55 0.15 148);
+  --kp-success-foreground: oklch(0.985 0.01 148);
+  --kp-success-subtle: oklch(0.94 0.035 148);
+  --kp-success-border: oklch(0.55 0.12 148 / 40%);
+  --kp-warning: oklch(0.75 0.14 78);
+  --kp-warning-foreground: oklch(0.25 0.05 78);
+  --kp-warning-subtle: oklch(0.94 0.04 78);
+  --kp-warning-border: oklch(0.72 0.12 78 / 40%);
+  --kp-info: oklch(0.52 0.11 220);
+  --kp-info-foreground: oklch(0.985 0.01 220);
+  --kp-info-subtle: oklch(0.94 0.03 220);
+  --kp-info-border: oklch(0.52 0.09 220 / 40%);
+  --kp-glass-tint: oklch(0.72 0.12 148 / 28%);
+  --kp-radius-sm: 0.5rem;
+  --kp-radius-md: 0.75rem;
+  --kp-radius-lg: 1rem;
+  --kp-radius-panel: 1rem;
+  --kp-density: 1;
+  --kp-motion-duration: 260ms;
+  --kp-motion-stiffness: 360;
+  --kp-motion-damping: 28;
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.2 0.03 145 / 5%),
+    0 16px 40px -28px oklch(0.2 0.04 145 / 32%);
+  --kp-font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui,
+    sans-serif;
+  --kp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
+  --kp-font-display: var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans);
+}
+
+[data-theme="forest"][data-mode="dark"] {
+  color-scheme: dark;
+  --kp-background: oklch(0.185 0.018 145);
+  --kp-foreground: oklch(0.93 0.018 145);
+  --kp-surface: oklch(0.225 0.024 145);
+  --kp-surface-raised: oklch(0.265 0.028 145);
+  --kp-muted: oklch(0.285 0.026 145);
+  --kp-muted-foreground: oklch(0.715 0.03 145);
+  --kp-accent: oklch(0.71 0.12 148);
+  --kp-accent-foreground: oklch(0.985 0.01 145);
+  --kp-border: oklch(0.86 0.025 145 / 13%);
+  --kp-ring: oklch(0.71 0.12 148);
+  --kp-danger: oklch(0.68 0.16 27);
+  --kp-danger-foreground: oklch(0.985 0.01 27);
+  --kp-danger-subtle: oklch(0.32 0.05 27);
+  --kp-danger-border: oklch(0.72 0.1 27 / 40%);
+  --kp-success: oklch(0.72 0.14 148);
+  --kp-success-foreground: oklch(0.985 0.01 148);
+  --kp-success-subtle: oklch(0.32 0.045 148);
+  --kp-success-border: oklch(0.72 0.1 148 / 40%);
+  --kp-warning: oklch(0.78 0.12 78);
+  --kp-warning-foreground: oklch(0.22 0.04 78);
+  --kp-warning-subtle: oklch(0.34 0.04 78);
+  --kp-warning-border: oklch(0.78 0.1 78 / 40%);
+  --kp-info: oklch(0.72 0.1 220);
+  --kp-info-foreground: oklch(0.985 0.01 220);
+  --kp-info-subtle: oklch(0.32 0.035 220);
+  --kp-info-border: oklch(0.72 0.08 220 / 40%);
+  --kp-glass-tint: oklch(0.63 0.13 148 / 24%);
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.05 0.01 145 / 32%),
+    0 22px 48px -30px oklch(0.05 0.02 145 / 86%);
+}

package/src/packs/graphite.css

@@ -0,0 +1,79 @@
+[data-theme="graphite"][data-mode="light"] {
+  color-scheme: light;
+  --kp-background: oklch(0.965 0.005 255);
+  --kp-foreground: oklch(0.23 0.02 255);
+  --kp-surface: oklch(0.99 0.003 255);
+  --kp-surface-raised: oklch(1 0 0);
+  --kp-muted: oklch(0.925 0.008 255);
+  --kp-muted-foreground: oklch(0.47 0.02 255);
+  --kp-accent: oklch(0.48 0.06 250);
+  --kp-accent-foreground: oklch(0.98 0.01 250);
+  --kp-border: oklch(0.34 0.02 255 / 14%);
+  --kp-ring: oklch(0.55 0.07 250);
+  --kp-danger: oklch(0.55 0.17 27);
+  --kp-danger-foreground: oklch(0.985 0.01 27);
+  --kp-danger-subtle: oklch(0.94 0.035 27);
+  --kp-danger-border: oklch(0.56 0.12 27 / 40%);
+  --kp-success: oklch(0.55 0.15 150);
+  --kp-success-foreground: oklch(0.985 0.01 150);
+  --kp-success-subtle: oklch(0.94 0.035 150);
+  --kp-success-border: oklch(0.55 0.12 150 / 40%);
+  --kp-warning: oklch(0.75 0.14 75);
+  --kp-warning-foreground: oklch(0.25 0.05 75);
+  --kp-warning-subtle: oklch(0.94 0.04 75);
+  --kp-warning-border: oklch(0.72 0.12 75 / 40%);
+  --kp-info: oklch(0.52 0.11 250);
+  --kp-info-foreground: oklch(0.985 0.01 250);
+  --kp-info-subtle: oklch(0.94 0.03 250);
+  --kp-info-border: oklch(0.52 0.09 250 / 40%);
+  --kp-glass-tint: oklch(0.7 0.06 250 / 26%);
+  --kp-radius-sm: 0.4rem;
+  --kp-radius-md: 0.6rem;
+  --kp-radius-lg: 0.85rem;
+  --kp-radius-panel: 0.85rem;
+  --kp-density: 1.05;
+  --kp-motion-duration: 220ms;
+  --kp-motion-stiffness: 420;
+  --kp-motion-damping: 32;
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.2 0.02 255 / 6%),
+    0 14px 36px -26px oklch(0.25 0.03 255 / 30%);
+  --kp-font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui,
+    sans-serif;
+  --kp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, monospace;
+  --kp-font-display: var(--font-space-grotesk, "Space Grotesk"), var(--kp-font-sans);
+}
+
+[data-theme="graphite"][data-mode="dark"] {
+  color-scheme: dark;
+  --kp-background: oklch(0.17 0.012 255);
+  --kp-foreground: oklch(0.93 0.01 255);
+  --kp-surface: oklch(0.21 0.015 255);
+  --kp-surface-raised: oklch(0.25 0.018 255);
+  --kp-muted: oklch(0.27 0.016 255);
+  --kp-muted-foreground: oklch(0.715 0.015 255);
+  --kp-accent: oklch(0.7 0.07 245);
+  --kp-accent-foreground: oklch(0.985 0.008 255);
+  --kp-border: oklch(0.85 0.012 255 / 12%);
+  --kp-ring: oklch(0.7 0.07 245);
+  --kp-danger: oklch(0.68 0.16 27);
+  --kp-danger-foreground: oklch(0.985 0.01 27);
+  --kp-danger-subtle: oklch(0.32 0.05 27);
+  --kp-danger-border: oklch(0.72 0.1 27 / 40%);
+  --kp-success: oklch(0.72 0.14 150);
+  --kp-success-foreground: oklch(0.985 0.01 150);
+  --kp-success-subtle: oklch(0.32 0.045 150);
+  --kp-success-border: oklch(0.72 0.1 150 / 40%);
+  --kp-warning: oklch(0.78 0.12 75);
+  --kp-warning-foreground: oklch(0.22 0.04 75);
+  --kp-warning-subtle: oklch(0.34 0.04 75);
+  --kp-warning-border: oklch(0.78 0.1 75 / 40%);
+  --kp-info: oklch(0.72 0.1 250);
+  --kp-info-foreground: oklch(0.985 0.01 250);
+  --kp-info-subtle: oklch(0.32 0.035 250);
+  --kp-info-border: oklch(0.72 0.08 250 / 40%);
+  --kp-glass-tint: oklch(0.58 0.07 245 / 22%);
+  --kp-shadow-surface:
+    0 1px 2px oklch(0.05 0.01 255 / 40%),
+    0 20px 44px -28px oklch(0.05 0.02 255 / 88%);
+}