rainbowindex 0.0.0 → 0.1.4

package/css/theme.css

@@ -0,0 +1,308 @@
+/*
+ * Rainbow Index - Default Theme
+ */
+
+@layer base {
+    :root {
+        /* Spacing */
+        --spacing: 0.25rem;
+
+        /* Font families */
+        --font-sans:
+            ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+            "Noto Color Emoji";
+        --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+        /* Font sizes */
+        --text-xs: 0.75rem;
+        --text-sm: 0.875rem;
+        --text-base: 1rem;
+        --text-lg: 1.125rem;
+        --text-xl: 1.25rem;
+        --text-2xl: 1.5rem;
+        --text-3xl: 1.875rem;
+        --text-4xl: 2.25rem;
+
+        /* Font weights */
+        --font-weight-thin: 100;
+        --font-weight-light: 300;
+        --font-weight-normal: 400;
+        --font-weight-medium: 500;
+        --font-weight-semibold: 600;
+        --font-weight-bold: 700;
+        --font-weight-black: 900;
+
+        /* Breakpoints */
+        --breakpoint-sm: 40rem;
+        --breakpoint-md: 48rem;
+        --breakpoint-lg: 64rem;
+        --breakpoint-xl: 80rem;
+        --breakpoint-2xl: 96rem;
+
+        /* Border radius - unit-based system tied to --spacing */
+        /* e.g., rounded-2 = calc(2 * var(--spacing)) */
+        --radius: var(--spacing);
+        --radius-full: 9999px;
+
+        /* Squircle scaling factor (radius scaled by this when using squircle) */
+        --ri-squircle-scale: 1.6;
+
+        /* Shadows */
+        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+        /* Transition */
+        --ease-linear: linear;
+        --ease-in: cubic-bezier(0.4, 0, 1, 1);
+        --ease-out: cubic-bezier(0, 0, 0.2, 1);
+        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+        /* Colors - Base */
+        --color-transparent: transparent;
+        --color-current: currentColor;
+        --color-inherit: inherit;
+        --color-paper: light-dark(oklch(100% 0 0), oklch(0% 0 0));
+        --color-ink: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+        --color-0: var(--color-paper);
+        --color-1000: var(--color-ink);
+
+        /* Colors - Mono */
+        --color-mono-50: light-dark(oklch(97.6% 0 0), oklch(18.4% 0 0));
+        --color-mono-100: light-dark(oklch(93.2% 0 0), oklch(22.8% 0 0));
+        --color-mono-150: light-dark(oklch(88.8% 0 0), oklch(27.2% 0 0));
+        --color-mono-200: light-dark(oklch(84.4% 0 0), oklch(31.6% 0 0));
+        --color-mono-250: light-dark(oklch(80% 0 0), oklch(36% 0 0));
+        --color-mono-300: light-dark(oklch(75.6% 0 0), oklch(40.4% 0 0));
+        --color-mono-350: light-dark(oklch(71.2% 0 0), oklch(44.8% 0 0));
+        --color-mono-400: light-dark(oklch(66.8% 0 0), oklch(49.2% 0 0));
+        --color-mono-450: light-dark(oklch(62.4% 0 0), oklch(53.6% 0 0));
+        --color-mono-500: oklch(58% 0 0);
+        --color-mono-550: light-dark(oklch(53.6% 0 0), oklch(62.4% 0 0));
+        --color-mono-600: light-dark(oklch(49.2% 0 0), oklch(66.8% 0 0));
+        --color-mono-650: light-dark(oklch(44.8% 0 0), oklch(71.2% 0 0));
+        --color-mono-700: light-dark(oklch(40.4% 0 0), oklch(75.6% 0 0));
+        --color-mono-750: light-dark(oklch(36% 0 0), oklch(80% 0 0));
+        --color-mono-800: light-dark(oklch(31.6% 0 0), oklch(84.4% 0 0));
+        --color-mono-850: light-dark(oklch(27.2% 0 0), oklch(88.8% 0 0));
+        --color-mono-900: light-dark(oklch(22.8% 0 0), oklch(93.2% 0 0));
+        --color-mono-950: light-dark(oklch(18.4% 0 0), oklch(97.6% 0 0));
+
+        /* Letter spacing (tracking) */
+        --tracking-tighter: -0.05em;
+        --tracking-tight: -0.025em;
+        --tracking-normal: 0em;
+        --tracking-wide: 0.025em;
+        --tracking-wider: 0.05em;
+        --tracking-widest: 0.1em;
+
+        /* Line height (leading) */
+        --leading-none: 1;
+        --leading-tight: 1.25;
+        --leading-snug: 1.375;
+        --leading-normal: 1.5;
+        --leading-relaxed: 1.625;
+        --leading-loose: 2;
+
+        /* Blur */
+        --blur-none: 0;
+        --blur-sm: 4px;
+        --blur: 8px;
+        --blur-md: 12px;
+        --blur-lg: 16px;
+        --blur-xl: 24px;
+        --blur-2xl: 40px;
+        --blur-3xl: 64px;
+
+        /* Z-index */
+        --z-0: 0;
+        --z-10: 10;
+        --z-20: 20;
+        --z-30: 30;
+        --z-40: 40;
+        --z-50: 50;
+
+        /* Container widths */
+        --container-sm: 40rem;
+        --container-md: 48rem;
+        --container-lg: 64rem;
+        --container-xl: 80rem;
+        --container-2xl: 96rem;
+
+        /* Aspect ratios */
+        --aspect-auto: auto;
+        --aspect-square: 1 / 1;
+        --aspect-video: 16 / 9;
+
+        /* Inset shadows */
+        --inset-shadow-sm: inset 0 1px 1px 0 rgb(0 0 0 / 0.05);
+        --inset-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+        /* Drop shadows */
+        --drop-shadow-sm: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+        --drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+        --drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+        --drop-shadow-lg: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+        --drop-shadow-xl: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+        --drop-shadow-2xl: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+
+        /* Animation durations */
+        --animate-spin: spin 1s linear infinite;
+        --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+        --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        --animate-bounce: bounce 1s infinite;
+
+        /* Perspective */
+        --perspective-dramatic: 100px;
+        --perspective-near: 300px;
+        --perspective-normal: 500px;
+        --perspective-midrange: 800px;
+        --perspective-distant: 1200px;
+
+        /* Ring defaults */
+        --ri-ring-color: oklch(55% 0.2 250 / 0.5);
+        --ri-ring-offset-width: 0px;
+        --ri-ring-offset-color: oklch(100% 0 0);
+        --ri-ring-inset: ;
+
+        /* Scroll snap strictness */
+        --ri-scroll-snap-strictness: proximity;
+
+        /* Border spacing defaults */
+        --ri-border-spacing-x: 0px;
+        --ri-border-spacing-y: 0px;
+    }
+}
+
+/* Keyframes */
+@keyframes ri-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes ri-ping {
+    75%,
+    100% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+@keyframes ri-pulse {
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes ri-bounce {
+    0%,
+    100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+}
+
+/* Enter/Exit Animation System */
+@keyframes ri-enter {
+    from {
+        opacity: var(--ri-enter-opacity, 1);
+        transform: translate3d(var(--ri-enter-translate-x, 0), var(--ri-enter-translate-y, 0), 0)
+            scale3d(var(--ri-enter-scale, 1), var(--ri-enter-scale, 1), var(--ri-enter-scale, 1))
+            rotate(var(--ri-enter-rotate, 0));
+        filter: blur(var(--ri-enter-blur, 0));
+    }
+}
+
+@keyframes ri-exit {
+    to {
+        opacity: var(--ri-exit-opacity, 1);
+        transform: translate3d(var(--ri-exit-translate-x, 0), var(--ri-exit-translate-y, 0), 0)
+            scale3d(var(--ri-exit-scale, 1), var(--ri-exit-scale, 1), var(--ri-exit-scale, 1))
+            rotate(var(--ri-exit-rotate, 0));
+        filter: blur(var(--ri-exit-blur, 0));
+    }
+}
+
+/* Component-specific Animations */
+@keyframes ri-accordion-down {
+    from {
+        height: 0;
+        opacity: 0;
+    }
+    to {
+        height: var(--ri-accordion-content-height, var(--accordion-height));
+        opacity: 1;
+    }
+}
+
+@keyframes ri-accordion-up {
+    from {
+        height: var(--ri-accordion-content-height, var(--accordion-height));
+        opacity: 1;
+    }
+    to {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes ri-collapsible-down {
+    from {
+        height: 0;
+        opacity: 0;
+    }
+    to {
+        height: var(--ri-collapsible-content-height, var(--collapsible-height));
+        opacity: 1;
+    }
+}
+
+@keyframes ri-collapsible-up {
+    from {
+        height: var(--ri-collapsible-content-height, var(--collapsible-height));
+        opacity: 1;
+    }
+    to {
+        height: 0;
+        opacity: 0;
+    }
+}
+
+@keyframes ri-caret-blink {
+    0%,
+    70%,
+    100% {
+        opacity: 1;
+    }
+    20%,
+    50% {
+        opacity: 0;
+    }
+}
+
+/**
+ * Corner Shape Progressive Enhancement
+ *
+ * When the browser supports corner-shape: superellipse(), elements with
+ * [data-squircle] attribute automatically get squircle corners with scaled
+ * radius values. This is an opt-in enhancement that works alongside the
+ * squircle-* utility classes.
+ *
+ * Usage:
+ * - Use squircle-* utilities for explicit squircle corners
+ * - Or add data-squircle to any element with rounded-* for automatic enhancement
+ */
+@supports (corner-shape: superellipse(1.6)) {
+    [data-squircle] {
+        corner-shape: superellipse(var(--ri-squircle-scale, 1.6));
+    }
+}