@nuka-ui/core 1.0.0

package/dist/styles-root.css

@@ -0,0 +1,344 @@
+/* nuka-ui styles/root */
+
+/* Single-theme root-scoped stylesheet.
+   Use this import path when your project does not need runtime theme switching
+   and already scopes tokens to :root.
+   Dark mode is not included in this stylesheet.
+   For multi-theme support, use the default "nuka-ui/styles" import instead. */
+
+:root {
+  /* Color primitives */
+
+  --color-neutral-0: oklch(100% 0 0);
+  --color-neutral-50: oklch(98.4% 0 0);
+  --color-neutral-100: oklch(96.8% 0 0);
+  --color-neutral-150: oklch(93% 0.004 257);
+  --color-neutral-200: oklch(92.9% 0 0);
+  --color-neutral-300: oklch(86.9% 0 0);
+  --color-neutral-400: oklch(70.4% 0 0);
+  --color-neutral-500: oklch(55.4% 0 0);
+  --color-neutral-600: oklch(44.6% 0 0);
+  --color-neutral-700: oklch(34% 0.014 257);
+  --color-neutral-800: oklch(26% 0.012 257);
+  --color-neutral-900: oklch(20% 0.01 257);
+  --color-neutral-950: oklch(14% 0.008 257);
+  --color-neutral-1000: oklch(0% 0 0);
+
+  --color-neutral-dark-base: oklch(30% 0.012 257);
+  --color-neutral-dark-subtle: oklch(36% 0.014 257);
+  --color-neutral-dark-muted: oklch(38% 0.016 257);
+  --color-neutral-dark-border: oklch(46% 0.016 257);
+  --color-neutral-dark-input: oklch(26% 0.012 257);
+  --color-neutral-dark-input-readonly: oklch(27% 0.012 257);
+
+  --color-accent-100: oklch(96.8% 0.007 257);
+  --color-accent-200: oklch(92.9% 0.013 257);
+  --color-accent-300: oklch(86.9% 0.022 257);
+  --color-accent-400: oklch(70.4% 0.04 257);
+  --color-accent-460: oklch(60% 0.055 257);
+  --color-accent-480: oklch(52% 0.05 257);
+  --color-accent-500: oklch(44% 0.043 257);
+  --color-accent-600: oklch(37.2% 0.044 257);
+  --color-accent-700: oklch(27.9% 0.041 257);
+  --color-accent-800: oklch(20.8% 0.042 257);
+
+  --color-success-100: oklch(94% 0.08 145);
+  --color-success-200: oklch(75% 0.16 145);
+  --color-success-250: oklch(58% 0.16 145);
+  --color-success-300: oklch(52% 0.18 145);
+  --color-success-400: oklch(40% 0.14 145);
+  --color-success-500: oklch(38% 0.16 145);
+  --color-success-600: oklch(20% 0.06 145);
+
+  --color-warning-100: oklch(95% 0.1 85);
+  --color-warning-200: oklch(82% 0.18 85);
+  --color-warning-300: oklch(72% 0.22 85);
+  --color-warning-400: oklch(55% 0.18 85);
+  --color-warning-500: oklch(48% 0.18 85);
+  --color-warning-600: oklch(20% 0.06 85);
+
+  --color-danger-100: oklch(95% 0.06 15);
+  --color-danger-200: oklch(75% 0.18 15);
+  --color-danger-250: oklch(60% 0.2 15);
+  --color-danger-300: oklch(56% 0.22 15);
+  --color-danger-400: oklch(50% 0.18 15);
+  --color-danger-500: oklch(42% 0.2 15);
+  --color-danger-600: oklch(20% 0.05 15);
+
+  --color-info-100: oklch(94% 0.06 230);
+  --color-info-200: oklch(75% 0.16 230);
+  --color-info-300: oklch(53% 0.18 230);
+  --color-info-400: oklch(48% 0.14 230);
+  --color-info-500: oklch(40% 0.16 230);
+  --color-info-600: oklch(18% 0.05 230);
+
+  /* Space primitives */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* Shadow primitives */
+  --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.1), 0 1px 2px oklch(0% 0 0 / 0.06);
+  --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.1), 0 2px 4px oklch(0% 0 0 / 0.06);
+  --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.1), 0 4px 6px oklch(0% 0 0 / 0.05);
+  --shadow-sm-dark:
+    0 1px 3px oklch(0% 0 0 / 0.4), 0 1px 2px oklch(0% 0 0 / 0.24);
+  --shadow-md-dark:
+    0 4px 6px oklch(0% 0 0 / 0.4), 0 2px 4px oklch(0% 0 0 / 0.24);
+  --shadow-lg-dark:
+    0 10px 15px oklch(0% 0 0 / 0.5), 0 4px 6px oklch(0% 0 0 / 0.3);
+
+  /* Z-index primitives */
+  --z-header: 10;
+  --z-dropdown: 50;
+  --z-modal: 100;
+  --z-toast: 150;
+
+  /* Radius primitives */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Duration primitives */
+  --duration-fast: 100ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-deliberate: 500ms;
+
+  /* Typography primitives */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Semantic tokens (light theme values, root-scoped) */
+
+  /* Surfaces */
+  --nuka-bg-base: var(--color-neutral-0);
+  --nuka-bg-subtle: var(--color-neutral-50);
+  --nuka-bg-muted: var(--color-neutral-100);
+  --nuka-bg-emphasis: var(--color-neutral-900);
+
+  /* Borders */
+  --nuka-border-base: var(--color-neutral-200);
+  --nuka-border-strong: var(--color-neutral-400);
+  --nuka-border-focus: var(--color-accent-500);
+  --nuka-border-disabled: var(--color-neutral-200);
+
+  /* Text */
+  --nuka-text-base: var(--color-neutral-900);
+  --nuka-text-muted: var(--color-neutral-600);
+  --nuka-text-subtle: var(--color-neutral-400);
+  --nuka-text-inverse: var(--color-neutral-0);
+  --nuka-text-disabled: var(--color-neutral-300);
+
+  /* Accent */
+  --nuka-accent-bg: var(--color-accent-500);
+  --nuka-accent-bg-hover: var(--color-accent-600);
+  --nuka-accent-bg-active: var(--color-accent-700);
+  --nuka-accent-bg-subtle: var(--color-accent-100);
+  --nuka-accent-border: var(--color-accent-400);
+  --nuka-accent-text: var(--color-accent-500);
+  --nuka-accent-fg: var(--color-neutral-0);
+  --nuka-accent-bg-disabled: var(--color-neutral-200);
+
+  /* Duration */
+  --nuka-duration-fast: var(--duration-fast);
+  --nuka-duration-base: var(--duration-base);
+  --nuka-duration-slow: var(--duration-slow);
+  --nuka-duration-deliberate: var(--duration-deliberate);
+
+  /* Input surfaces */
+  --nuka-input-bg: var(--color-neutral-0);
+  --nuka-input-bg-disabled: var(--color-neutral-100);
+  --nuka-input-bg-readonly: var(--color-neutral-50);
+
+  /* Input borders */
+  --nuka-input-border: var(--color-neutral-300);
+  --nuka-input-border-hover: var(--color-neutral-400);
+
+  /* Shadows */
+  --nuka-shadow-card: var(--shadow-sm);
+  --nuka-shadow-overlay: var(--shadow-md);
+  --nuka-shadow-modal: var(--shadow-lg);
+
+  /* Z-index */
+  --nuka-z-header: var(--z-header);
+  --nuka-z-dropdown: var(--z-dropdown);
+  --nuka-z-modal: var(--z-modal);
+  --nuka-z-toast: var(--z-toast);
+
+  /* Overlay */
+  --nuka-bg-overlay: oklch(0% 0 0 / 0.5);
+
+  /* Feedback: success */
+  --nuka-success-base: var(--color-success-300);
+  --nuka-success-bg: var(--color-success-100);
+  --nuka-success-text: var(--color-success-500);
+  --nuka-success-border: var(--color-success-300);
+  --nuka-success-fg: var(--color-neutral-0);
+
+  /* Feedback: warning */
+  --nuka-warning-base: var(--color-warning-300);
+  --nuka-warning-fg: var(--color-neutral-900);
+  --nuka-warning-bg: var(--color-warning-100);
+  --nuka-warning-text: var(--color-warning-500);
+  --nuka-warning-border: var(--color-warning-400);
+
+  /* Feedback: danger */
+  --nuka-danger-base: var(--color-danger-300);
+  --nuka-danger-bg: var(--color-danger-100);
+  --nuka-danger-text: var(--color-danger-500);
+  --nuka-danger-border: var(--color-danger-300);
+  --nuka-danger-fg: var(--color-neutral-0);
+
+  /* Feedback: info */
+  --nuka-info-base: var(--color-info-300);
+  --nuka-info-bg: var(--color-info-100);
+  --nuka-info-text: var(--color-info-500);
+  --nuka-info-border: var(--color-info-300);
+}
+
+
+@keyframes nuka-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.nuka-spinner {
+  animation: nuka-spinner-rotate 750ms linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nuka-spinner {
+    animation: none;
+  }
+}
+
+@keyframes nuka-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes nuka-toast-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.96);
+  }
+}
+
+@keyframes nuka-dialog-overlay-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes nuka-dialog-overlay-exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes nuka-dialog-enter {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes nuka-dialog-exit {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-state="open"],
+  [data-state="closed"] {
+    animation: none !important;
+  }
+}
+
+@keyframes nuka-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+/* Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  .nuka-progress-indeterminate {
+    animation: none;
+  }
+
+  .animate-pulse {
+    animation: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --nuka-duration-fast: 0ms;
+    --nuka-duration-base: 0ms;
+    --nuka-duration-slow: 0ms;
+    --nuka-duration-deliberate: 0ms;
+  }
+}