@ansh-ui/tokens 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ansh contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/ansh.css

@@ -0,0 +1,307 @@
+/**
+ * Ansh design tokens.
+ *
+ * Generated from @ansh-ui/tokens — do not edit by hand.
+ * Override any variable in your own stylesheet after importing this file.
+ */
+
+:root {
+  color-scheme: light dark;
+
+  --ansh-space-0: 0;
+  --ansh-space-1: 0.25rem;
+  --ansh-space-2: 0.5rem;
+  --ansh-space-3: 0.75rem;
+  --ansh-space-4: 1rem;
+  --ansh-space-5: 1.25rem;
+  --ansh-space-6: 1.5rem;
+  --ansh-space-8: 2rem;
+  --ansh-space-10: 2.5rem;
+  --ansh-space-12: 3rem;
+  --ansh-space-16: 4rem;
+  --ansh-space-20: 5rem;
+  --ansh-space-24: 6rem;
+  --ansh-space-32: 8rem;
+  --ansh-space-40: 10rem;
+  --ansh-space-48: 12rem;
+  --ansh-space-56: 14rem;
+  --ansh-space-64: 16rem;
+  --ansh-space-px: 1px;
+  --ansh-space-0-5: 0.125rem;
+  --ansh-space-1-5: 0.375rem;
+  --ansh-radius-none: 0;
+  --ansh-radius-xs: 0.25rem;
+  --ansh-radius-sm: 0.375rem;
+  --ansh-radius-md: 0.5rem;
+  --ansh-radius-lg: 0.75rem;
+  --ansh-radius-xl: 1rem;
+  --ansh-radius-2xl: 1.5rem;
+  --ansh-radius-3xl: 2rem;
+  --ansh-radius-full: 9999px;
+  --ansh-shadow-none: none;
+  --ansh-shadow-xs: 0 1px 2px 0 var(--ansh-shadow-color, rgb(15 23 42 / 0.05));
+  --ansh-shadow-sm: 0 1px 3px 0 var(--ansh-shadow-color, rgb(15 23 42 / 0.08)), 0 1px 2px -1px var(--ansh-shadow-color, rgb(15 23 42 / 0.06));
+  --ansh-shadow-md: 0 4px 6px -1px var(--ansh-shadow-color, rgb(15 23 42 / 0.08)), 0 2px 4px -2px var(--ansh-shadow-color, rgb(15 23 42 / 0.06));
+  --ansh-shadow-lg: 0 10px 15px -3px var(--ansh-shadow-color, rgb(15 23 42 / 0.08)), 0 4px 6px -4px var(--ansh-shadow-color, rgb(15 23 42 / 0.05));
+  --ansh-shadow-xl: 0 20px 25px -5px var(--ansh-shadow-color, rgb(15 23 42 / 0.1)), 0 8px 10px -6px var(--ansh-shadow-color, rgb(15 23 42 / 0.05));
+  --ansh-shadow-2xl: 0 25px 50px -12px var(--ansh-shadow-color, rgb(15 23 42 / 0.2));
+  --ansh-shadow-inner: inset 0 2px 4px 0 var(--ansh-shadow-color, rgb(15 23 42 / 0.06));
+  --ansh-shadow-glow: 0 0 24px -4px currentColor;
+  --ansh-shadow-glow-lg: 0 0 48px -8px currentColor;
+  --ansh-blur-none: 0;
+  --ansh-blur-xs: 2px;
+  --ansh-blur-sm: 4px;
+  --ansh-blur-md: 8px;
+  --ansh-blur-lg: 16px;
+  --ansh-blur-xl: 24px;
+  --ansh-blur-2xl: 40px;
+  --ansh-blur-3xl: 64px;
+  --ansh-duration-instant: 0.1s;
+  --ansh-duration-fast: 0.2s;
+  --ansh-duration-normal: 0.3s;
+  --ansh-duration-moderate: 0.45s;
+  --ansh-duration-slow: 0.6s;
+  --ansh-duration-slower: 0.9s;
+  --ansh-duration-deliberate: 1.2s;
+  --ansh-ease-linear: linear;
+  --ansh-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ansh-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
+  --ansh-ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ansh-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ansh-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ansh-ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
+  --ansh-z-hide: -1;
+  --ansh-z-base: 0;
+  --ansh-z-raised: 10;
+  --ansh-z-dropdown: 1000;
+  --ansh-z-sticky: 1100;
+  --ansh-z-overlay: 1200;
+  --ansh-z-modal: 1300;
+  --ansh-z-popover: 1400;
+  --ansh-z-toast: 1500;
+  --ansh-z-tooltip: 1600;
+  --ansh-z-max: 2147483647;
+  --ansh-text-xs: 0.75rem;
+  --ansh-text-xs-leading: 1.125rem;
+  --ansh-text-xs-tracking: 0.01em;
+  --ansh-text-sm: 0.875rem;
+  --ansh-text-sm-leading: 1.375rem;
+  --ansh-text-sm-tracking: 0.005em;
+  --ansh-text-base: 1rem;
+  --ansh-text-base-leading: 1.625rem;
+  --ansh-text-base-tracking: 0;
+  --ansh-text-lg: 1.125rem;
+  --ansh-text-lg-leading: 1.75rem;
+  --ansh-text-lg-tracking: -0.005em;
+  --ansh-text-xl: 1.25rem;
+  --ansh-text-xl-leading: 1.875rem;
+  --ansh-text-xl-tracking: -0.01em;
+  --ansh-text-2xl: 1.5rem;
+  --ansh-text-2xl-leading: 2rem;
+  --ansh-text-2xl-tracking: -0.015em;
+  --ansh-text-3xl: 1.875rem;
+  --ansh-text-3xl-leading: 2.375rem;
+  --ansh-text-3xl-tracking: -0.02em;
+  --ansh-text-4xl: 2.25rem;
+  --ansh-text-4xl-leading: 2.625rem;
+  --ansh-text-4xl-tracking: -0.025em;
+  --ansh-text-5xl: 3rem;
+  --ansh-text-5xl-leading: 3.25rem;
+  --ansh-text-5xl-tracking: -0.03em;
+  --ansh-text-6xl: 3.75rem;
+  --ansh-text-6xl-leading: 3.9rem;
+  --ansh-text-6xl-tracking: -0.035em;
+  --ansh-text-7xl: 4.5rem;
+  --ansh-text-7xl-leading: 4.6rem;
+  --ansh-text-7xl-tracking: -0.04em;
+  --ansh-weight-normal: 400;
+  --ansh-weight-medium: 500;
+  --ansh-weight-semibold: 600;
+  --ansh-weight-bold: 700;
+  --ansh-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  --ansh-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  --ansh-screen-sm: 640px;
+  --ansh-screen-md: 768px;
+  --ansh-screen-lg: 1024px;
+  --ansh-screen-xl: 1280px;
+  --ansh-screen-2xl: 1536px;
+
+  --ansh-surface-canvas: oklch(98.5% 0.002 264);
+  --ansh-surface-raised: #ffffff;
+  --ansh-surface-overlay: #ffffff;
+  --ansh-surface-sunken: oklch(96.8% 0.004 264);
+  --ansh-surface-glass: oklch(100% 0 0 / 0.72);
+  --ansh-surface-scrim: oklch(20.8% 0.015 264 / 0.45);
+  --ansh-content-primary: oklch(20.8% 0.015 264);
+  --ansh-content-secondary: oklch(44.6% 0.021 264);
+  --ansh-content-tertiary: oklch(55.4% 0.022 264);
+  --ansh-content-disabled: oklch(70.7% 0.018 264);
+  --ansh-content-on-accent: #ffffff;
+  --ansh-content-inverse: oklch(98.5% 0.002 264);
+  --ansh-border-subtle: oklch(92.9% 0.007 264);
+  --ansh-border-default: oklch(86.9% 0.011 264);
+  --ansh-border-strong: oklch(70.7% 0.018 264);
+  --ansh-border-focus: oklch(54.6% 0.208 253);
+  --ansh-accent-subtle: oklch(97% 0.017 253);
+  --ansh-accent-muted: oklch(93.8% 0.036 253);
+  --ansh-accent-default: oklch(54.6% 0.208 253);
+  --ansh-accent-hover: oklch(46.4% 0.192 253);
+  --ansh-accent-active: oklch(39.1% 0.16 253);
+  --ansh-accent-text: oklch(46.4% 0.192 253);
+  --ansh-state-success-subtle: oklch(95.5% 0.035 155);
+  --ansh-state-success: oklch(44% 0.12 155);
+  --ansh-state-warning-subtle: oklch(96.5% 0.045 85);
+  --ansh-state-warning: oklch(52% 0.13 65);
+  --ansh-state-danger-subtle: oklch(95.5% 0.03 25);
+  --ansh-state-danger: oklch(46% 0.18 25);
+  --ansh-state-info-subtle: oklch(96% 0.025 240);
+  --ansh-state-info: oklch(48% 0.15 250);
+  --ansh-shadow-color: oklch(20.8% 0.015 264 / 0.08);
+}
+
+/* Automatic dark mode, only when the document has not opted into manual control. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --ansh-surface-canvas: oklch(8.5% 0.012 264);
+    --ansh-surface-raised: oklch(13.8% 0.014 264);
+    --ansh-surface-overlay: oklch(20.8% 0.015 264);
+    --ansh-surface-sunken: oklch(6% 0.01 264);
+    --ansh-surface-glass: oklch(13.8% 0.014 264 / 0.68);
+    --ansh-surface-scrim: oklch(4% 0.008 264 / 0.65);
+    --ansh-content-primary: oklch(96.8% 0.004 264);
+    --ansh-content-secondary: oklch(86.9% 0.011 264);
+    --ansh-content-tertiary: oklch(70.7% 0.018 264);
+    --ansh-content-disabled: oklch(44.6% 0.021 264);
+    --ansh-content-on-accent: #ffffff;
+    --ansh-content-inverse: oklch(13.8% 0.014 264);
+    --ansh-border-subtle: oklch(100% 0 0 / 0.08);
+    --ansh-border-default: oklch(100% 0 0 / 0.14);
+    --ansh-border-strong: oklch(100% 0 0 / 0.24);
+    --ansh-border-focus: oklch(71.4% 0.153 253);
+    --ansh-accent-subtle: oklch(23.2% 0.093 253 / 0.4);
+    --ansh-accent-muted: oklch(23.2% 0.093 253);
+    --ansh-accent-default: oklch(62.3% 0.188 253);
+    --ansh-accent-hover: oklch(71.4% 0.153 253);
+    --ansh-accent-active: oklch(80.9% 0.111 253);
+    --ansh-accent-text: oklch(80.9% 0.111 253);
+    --ansh-state-success-subtle: oklch(30% 0.08 155 / 0.35);
+    --ansh-state-success: oklch(72% 0.16 155);
+    --ansh-state-warning-subtle: oklch(32% 0.09 75 / 0.35);
+    --ansh-state-warning: oklch(80% 0.15 80);
+    --ansh-state-danger-subtle: oklch(30% 0.11 25 / 0.35);
+    --ansh-state-danger: oklch(70% 0.19 25);
+    --ansh-state-info-subtle: oklch(30% 0.09 245 / 0.35);
+    --ansh-state-info: oklch(74% 0.15 245);
+    --ansh-shadow-color: oklch(0% 0 0 / 0.5);
+  }
+}
+
+/* Explicit theme control. Works at any level of the tree, not just :root. */
+[data-theme='dark'] {
+  --ansh-surface-canvas: oklch(8.5% 0.012 264);
+  --ansh-surface-raised: oklch(13.8% 0.014 264);
+  --ansh-surface-overlay: oklch(20.8% 0.015 264);
+  --ansh-surface-sunken: oklch(6% 0.01 264);
+  --ansh-surface-glass: oklch(13.8% 0.014 264 / 0.68);
+  --ansh-surface-scrim: oklch(4% 0.008 264 / 0.65);
+  --ansh-content-primary: oklch(96.8% 0.004 264);
+  --ansh-content-secondary: oklch(86.9% 0.011 264);
+  --ansh-content-tertiary: oklch(70.7% 0.018 264);
+  --ansh-content-disabled: oklch(44.6% 0.021 264);
+  --ansh-content-on-accent: #ffffff;
+  --ansh-content-inverse: oklch(13.8% 0.014 264);
+  --ansh-border-subtle: oklch(100% 0 0 / 0.08);
+  --ansh-border-default: oklch(100% 0 0 / 0.14);
+  --ansh-border-strong: oklch(100% 0 0 / 0.24);
+  --ansh-border-focus: oklch(71.4% 0.153 253);
+  --ansh-accent-subtle: oklch(23.2% 0.093 253 / 0.4);
+  --ansh-accent-muted: oklch(23.2% 0.093 253);
+  --ansh-accent-default: oklch(62.3% 0.188 253);
+  --ansh-accent-hover: oklch(71.4% 0.153 253);
+  --ansh-accent-active: oklch(80.9% 0.111 253);
+  --ansh-accent-text: oklch(80.9% 0.111 253);
+  --ansh-state-success-subtle: oklch(30% 0.08 155 / 0.35);
+  --ansh-state-success: oklch(72% 0.16 155);
+  --ansh-state-warning-subtle: oklch(32% 0.09 75 / 0.35);
+  --ansh-state-warning: oklch(80% 0.15 80);
+  --ansh-state-danger-subtle: oklch(30% 0.11 25 / 0.35);
+  --ansh-state-danger: oklch(70% 0.19 25);
+  --ansh-state-info-subtle: oklch(30% 0.09 245 / 0.35);
+  --ansh-state-info: oklch(74% 0.15 245);
+  --ansh-shadow-color: oklch(0% 0 0 / 0.5);
+}
+
+[data-theme='light'] {
+  --ansh-surface-canvas: oklch(98.5% 0.002 264);
+  --ansh-surface-raised: #ffffff;
+  --ansh-surface-overlay: #ffffff;
+  --ansh-surface-sunken: oklch(96.8% 0.004 264);
+  --ansh-surface-glass: oklch(100% 0 0 / 0.72);
+  --ansh-surface-scrim: oklch(20.8% 0.015 264 / 0.45);
+  --ansh-content-primary: oklch(20.8% 0.015 264);
+  --ansh-content-secondary: oklch(44.6% 0.021 264);
+  --ansh-content-tertiary: oklch(55.4% 0.022 264);
+  --ansh-content-disabled: oklch(70.7% 0.018 264);
+  --ansh-content-on-accent: #ffffff;
+  --ansh-content-inverse: oklch(98.5% 0.002 264);
+  --ansh-border-subtle: oklch(92.9% 0.007 264);
+  --ansh-border-default: oklch(86.9% 0.011 264);
+  --ansh-border-strong: oklch(70.7% 0.018 264);
+  --ansh-border-focus: oklch(54.6% 0.208 253);
+  --ansh-accent-subtle: oklch(97% 0.017 253);
+  --ansh-accent-muted: oklch(93.8% 0.036 253);
+  --ansh-accent-default: oklch(54.6% 0.208 253);
+  --ansh-accent-hover: oklch(46.4% 0.192 253);
+  --ansh-accent-active: oklch(39.1% 0.16 253);
+  --ansh-accent-text: oklch(46.4% 0.192 253);
+  --ansh-state-success-subtle: oklch(95.5% 0.035 155);
+  --ansh-state-success: oklch(44% 0.12 155);
+  --ansh-state-warning-subtle: oklch(96.5% 0.045 85);
+  --ansh-state-warning: oklch(52% 0.13 65);
+  --ansh-state-danger-subtle: oklch(95.5% 0.03 25);
+  --ansh-state-danger: oklch(46% 0.18 25);
+  --ansh-state-info-subtle: oklch(96% 0.025 240);
+  --ansh-state-info: oklch(48% 0.15 250);
+  --ansh-shadow-color: oklch(20.8% 0.015 264 / 0.08);
+}
+
+/**
+ * Reduced-motion safety net.
+ *
+ * The engine honours `prefers-reduced-motion` in JavaScript, but any CSS transition or
+ * animation an application author writes is outside its reach. Neutralising them here means a
+ * consumer gets correct behaviour for their own styles too, simply by importing this file.
+ *
+ * Durations are set to 0.01ms rather than 0 so that `transitionend` and `animationend` still
+ * fire — code that waits on those events would otherwise hang forever.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/**
+ * Utility classes for the split-text behaviour.
+ *
+ * The behaviour sets `--ansh-index` and `--ansh-total` on every unit, which makes a
+ * staggered reveal possible in pure CSS with no JavaScript timing at all.
+ */
+.ansh-char,
+.ansh-word,
+.ansh-line {
+  display: inline-block;
+  /* Required for transforms to apply to inline content, and for masks to clip descenders. */
+  will-change: transform, opacity;
+}
+
+.ansh-mask {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+}