@seelen-ui/lib 2.5.7 → 2.5.8-next.2604111414

package/styles/colors.css

@@ -0,0 +1,521 @@
+/**
+ * Color System Documentation
+ *
+ * This file defines a contrast-based color system where numbers represent
+ * contrast intensity against the theme's background, NOT absolute lightness.
+ *
+ * CONTRAST-ADAPTIVE COLORS (--color-*):
+ * - Numbers indicate contrast level against the current theme background
+ * - 100 = lowest contrast (subtle, barely visible)
+ * - 900 = highest contrast (bold, maximum visibility)
+ * - Automatically inverts between light/dark modes to maintain contrast relationships
+ *
+ * Example:
+ *   Light mode: --color-red-100 = #ffebe7 (light red, subtle on white)
+ *   Dark mode:  --color-red-100 = #7b0000 (dark red, subtle on black)
+ *
+ * FIXED COLORS (--color-fixed-*):
+ * - Colors that remain constant regardless of theme
+ * - Use when you need a specific color value that should never change
+ * - Numbers still follow 100-900 scale but represent absolute lightness
+ *
+ * Usage Guidelines:
+ * - Use --color-* for UI elements that need consistent contrast (backgrounds, text, borders)
+ * - Use --color-fixed-* for brand colors, illustrations, or theme-independent visuals
+ */
+
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-white: oklch(0% 0 0);
+    --color-black: oklch(100% 0 0);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-white: oklch(100% 0 0);
+    --color-black: oklch(0% 0 0);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-gray-25: oklch(9% 00000 0);
+    --color-gray-50: oklch(12% 00000 0);
+    --color-gray-75: oklch(15% 00000 0);
+    --color-gray-100: oklch(18% 00000 0);
+    --color-gray-200: oklch(27% 00000 0);
+    --color-gray-300: oklch(36% 00000 0);
+    --color-gray-400: oklch(45% 00000 0);
+    --color-gray-500: oklch(54% 00000 0);
+    --color-gray-600: oklch(63% 00000 0);
+    --color-gray-700: oklch(72% 00000 0);
+    --color-gray-800: oklch(81% 00000 0);
+    --color-gray-900: oklch(90% 00000 0);
+
+    --color-red-25: oklch(9% 0.032 30);
+    --color-red-50: oklch(12% 0.043 30);
+    --color-red-75: oklch(15% 0.054 30);
+    --color-red-100: oklch(18% 0.064 30);
+    --color-red-200: oklch(27% 0.096 30);
+    --color-red-300: oklch(36% 0.129 30);
+    --color-red-400: oklch(45% 0.161 30);
+    --color-red-500: oklch(54% 0.193 30);
+    --color-red-600: oklch(63% 0.225 30);
+    --color-red-700: oklch(72% 0.178 30);
+    --color-red-800: oklch(81% 0.111 30);
+    --color-red-900: oklch(90% 0.054 30);
+
+    --color-orange-25: oklch(9% 0.022 50);
+    --color-orange-50: oklch(12% 0.029 50);
+    --color-orange-75: oklch(15% 0.036 50);
+    --color-orange-100: oklch(18% 0.043 50);
+    --color-orange-200: oklch(27% 0.064 50);
+    --color-orange-300: oklch(36% 0.086 50);
+    --color-orange-400: oklch(45% 0.108 50);
+    --color-orange-500: oklch(54% 0.129 50);
+    --color-orange-600: oklch(63% 0.151 50);
+    --color-orange-700: oklch(72% 0.173 50);
+    --color-orange-800: oklch(81% 0.121 50);
+    --color-orange-900: oklch(90% 0.059 50);
+
+    --color-yellow-25: oklch(9% 0.017 100);
+    --color-yellow-50: oklch(12% 0.023 100);
+    --color-yellow-75: oklch(15% 0.029 100);
+    --color-yellow-100: oklch(18% 0.034 100);
+    --color-yellow-200: oklch(27% 0.052 100);
+    --color-yellow-300: oklch(36% 0.069 100);
+    --color-yellow-400: oklch(45% 0.086 100);
+    --color-yellow-500: oklch(54% 0.103 100);
+    --color-yellow-600: oklch(63% 0.121 100);
+    --color-yellow-700: oklch(72% 0.138 100);
+    --color-yellow-800: oklch(81% 0.155 100);
+    --color-yellow-900: oklch(90% 0.173 100);
+
+    --color-green-25: oklch(9% 0.028 150);
+    --color-green-50: oklch(12% 0.037 150);
+    --color-green-75: oklch(15% 0.046 150);
+    --color-green-100: oklch(18% 0.055 150);
+    --color-green-200: oklch(27% 0.083 150);
+    --color-green-300: oklch(36% 0.11 150);
+    --color-green-400: oklch(45% 0.138 150);
+    --color-green-500: oklch(54% 0.166 150);
+    --color-green-600: oklch(63% 0.193 150);
+    --color-green-700: oklch(72% 0.221 150);
+    --color-green-800: oklch(81% 0.249 150);
+    --color-green-900: oklch(90% 0.162 150);
+
+    --color-seafoam-25: oklch(9% 0.017 180);
+    --color-seafoam-50: oklch(12% 0.023 180);
+    --color-seafoam-75: oklch(15% 0.029 180);
+    --color-seafoam-100: oklch(18% 0.035 180);
+    --color-seafoam-200: oklch(27% 0.053 180);
+    --color-seafoam-300: oklch(36% 0.07 180);
+    --color-seafoam-400: oklch(45% 0.088 180);
+    --color-seafoam-500: oklch(54% 0.106 180);
+    --color-seafoam-600: oklch(63% 0.123 180);
+    --color-seafoam-700: oklch(72% 0.141 180);
+    --color-seafoam-800: oklch(81% 0.159 180);
+    --color-seafoam-900: oklch(90% 0.141 180);
+
+    --color-cyan-25: oklch(9% 0.019 230);
+    --color-cyan-50: oklch(12% 0.025 230);
+    --color-cyan-75: oklch(15% 0.031 230);
+    --color-cyan-100: oklch(18% 0.037 230);
+    --color-cyan-200: oklch(27% 0.056 230);
+    --color-cyan-300: oklch(36% 0.075 230);
+    --color-cyan-400: oklch(45% 0.094 230);
+    --color-cyan-500: oklch(54% 0.113 230);
+    --color-cyan-600: oklch(63% 0.132 230);
+    --color-cyan-700: oklch(72% 0.151 230);
+    --color-cyan-800: oklch(81% 0.103 230);
+    --color-cyan-900: oklch(90% 0.053 230);
+
+    --color-blue-25: oklch(9% 0.037 260);
+    --color-blue-50: oklch(12% 0.049 260);
+    --color-blue-75: oklch(15% 0.061 260);
+    --color-blue-100: oklch(18% 0.074 260);
+    --color-blue-200: oklch(27% 0.111 260);
+    --color-blue-300: oklch(36% 0.147 260);
+    --color-blue-400: oklch(45% 0.184 260);
+    --color-blue-500: oklch(54% 0.219 260);
+    --color-blue-600: oklch(63% 0.171 260);
+    --color-blue-700: oklch(72% 0.126 260);
+    --color-blue-800: oklch(81% 0.083 260);
+    --color-blue-900: oklch(90% 0.042 260);
+
+    --color-indigo-25: oklch(9% 0.044 280);
+    --color-indigo-50: oklch(12% 0.059 280);
+    --color-indigo-75: oklch(15% 0.073 280);
+    --color-indigo-100: oklch(18% 0.088 280);
+    --color-indigo-200: oklch(27% 0.132 280);
+    --color-indigo-300: oklch(36% 0.176 280);
+    --color-indigo-400: oklch(45% 0.22 280);
+    --color-indigo-500: oklch(54% 0.224 280);
+    --color-indigo-600: oklch(63% 0.175 280);
+    --color-indigo-700: oklch(72% 0.129 280);
+    --color-indigo-800: oklch(81% 0.085 280);
+    --color-indigo-900: oklch(90% 0.043 280);
+
+    --color-purple-25: oklch(9% 0.04 300);
+    --color-purple-50: oklch(12% 0.053 300);
+    --color-purple-75: oklch(15% 0.066 300);
+    --color-purple-100: oklch(18% 0.08 300);
+    --color-purple-200: oklch(27% 0.12 300);
+    --color-purple-300: oklch(36% 0.16 300);
+    --color-purple-400: oklch(45% 0.2 300);
+    --color-purple-500: oklch(54% 0.24 300);
+    --color-purple-600: oklch(63% 0.204 300);
+    --color-purple-700: oklch(72% 0.15 300);
+    --color-purple-800: oklch(81% 0.098 300);
+    --color-purple-900: oklch(90% 0.05 300);
+
+    --color-fuchsia-25: oklch(9% 0.035 335);
+    --color-fuchsia-50: oklch(12% 0.047 335);
+    --color-fuchsia-75: oklch(15% 0.059 335);
+    --color-fuchsia-100: oklch(18% 0.07 335);
+    --color-fuchsia-200: oklch(27% 0.106 335);
+    --color-fuchsia-300: oklch(36% 0.141 335);
+    --color-fuchsia-400: oklch(45% 0.176 335);
+    --color-fuchsia-500: oklch(54% 0.212 335);
+    --color-fuchsia-600: oklch(63% 0.247 335);
+    --color-fuchsia-700: oklch(72% 0.274 335);
+    --color-fuchsia-800: oklch(81% 0.17 335);
+    --color-fuchsia-900: oklch(90% 0.082 335);
+
+    --color-magenta-25: oklch(9% 0.033 360);
+    --color-magenta-50: oklch(12% 0.044 360);
+    --color-magenta-75: oklch(15% 0.054 360);
+    --color-magenta-100: oklch(18% 0.065 360);
+    --color-magenta-200: oklch(27% 0.098 360);
+    --color-magenta-300: oklch(36% 0.131 360);
+    --color-magenta-400: oklch(45% 0.164 360);
+    --color-magenta-500: oklch(54% 0.197 360);
+    --color-magenta-600: oklch(63% 0.23 360);
+    --color-magenta-700: oklch(72% 0.197 360);
+    --color-magenta-800: oklch(81% 0.122 360);
+    --color-magenta-900: oklch(90% 0.059 360);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-gray-25: oklch(99% 00000 0);
+    --color-gray-50: oklch(96% 00000 0);
+    --color-gray-75: oklch(93% 00000 0);
+    --color-gray-100: oklch(90% 00000 0);
+    --color-gray-200: oklch(81% 00000 0);
+    --color-gray-300: oklch(72% 00000 0);
+    --color-gray-400: oklch(63% 00000 0);
+    --color-gray-500: oklch(54% 00000 0);
+    --color-gray-600: oklch(45% 00000 0);
+    --color-gray-700: oklch(36% 00000 0);
+    --color-gray-800: oklch(27% 00000 0);
+    --color-gray-900: oklch(18% 00000 0);
+
+    --color-red-25: oklch(99% 0.004 30);
+    --color-red-50: oklch(96% 0.02 30);
+    --color-red-75: oklch(93% 0.036 30);
+    --color-red-100: oklch(90% 0.054 30);
+    --color-red-200: oklch(81% 0.111 30);
+    --color-red-300: oklch(72% 0.178 30);
+    --color-red-400: oklch(63% 0.225 30);
+    --color-red-500: oklch(54% 0.193 30);
+    --color-red-600: oklch(45% 0.161 30);
+    --color-red-700: oklch(36% 0.129 30);
+    --color-red-800: oklch(27% 0.096 30);
+    --color-red-900: oklch(18% 0.064 30);
+
+    --color-orange-25: oklch(99% 0.005 50);
+    --color-orange-50: oklch(96% 0.022 50);
+    --color-orange-75: oklch(93% 0.04 50);
+    --color-orange-100: oklch(90% 0.059 50);
+    --color-orange-200: oklch(81% 0.121 50);
+    --color-orange-300: oklch(72% 0.173 50);
+    --color-orange-400: oklch(63% 0.151 50);
+    --color-orange-500: oklch(54% 0.129 50);
+    --color-orange-600: oklch(45% 0.108 50);
+    --color-orange-700: oklch(36% 0.086 50);
+    --color-orange-800: oklch(27% 0.064 50);
+    --color-orange-900: oklch(18% 0.043 50);
+
+    --color-yellow-25: oklch(99% 0.02 100);
+    --color-yellow-50: oklch(96% 0.08 100);
+    --color-yellow-75: oklch(93% 0.138 100);
+    --color-yellow-100: oklch(90% 0.173 100);
+    --color-yellow-200: oklch(81% 0.155 100);
+    --color-yellow-300: oklch(72% 0.138 100);
+    --color-yellow-400: oklch(63% 0.121 100);
+    --color-yellow-500: oklch(54% 0.103 100);
+    --color-yellow-600: oklch(45% 0.086 100);
+    --color-yellow-700: oklch(36% 0.069 100);
+    --color-yellow-800: oklch(27% 0.052 100);
+    --color-yellow-900: oklch(18% 0.034 100);
+
+    --color-green-25: oklch(99% 0.013 150);
+    --color-green-50: oklch(96% 0.058 150);
+    --color-green-75: oklch(93% 0.107 150);
+    --color-green-100: oklch(90% 0.162 150);
+    --color-green-200: oklch(81% 0.249 150);
+    --color-green-300: oklch(72% 0.221 150);
+    --color-green-400: oklch(63% 0.193 150);
+    --color-green-500: oklch(54% 0.166 150);
+    --color-green-600: oklch(45% 0.138 150);
+    --color-green-700: oklch(36% 0.11 150);
+    --color-green-800: oklch(27% 0.083 150);
+    --color-green-900: oklch(18% 0.055 150);
+
+    --color-seafoam-25: oklch(99% 0.012 180);
+    --color-seafoam-50: oklch(96% 0.051 180);
+    --color-seafoam-75: oklch(93% 0.094 180);
+    --color-seafoam-100: oklch(90% 0.141 180);
+    --color-seafoam-200: oklch(81% 0.159 180);
+    --color-seafoam-300: oklch(72% 0.141 180);
+    --color-seafoam-400: oklch(63% 0.123 180);
+    --color-seafoam-500: oklch(54% 0.106 180);
+    --color-seafoam-600: oklch(45% 0.088 180);
+    --color-seafoam-700: oklch(36% 0.07 180);
+    --color-seafoam-800: oklch(27% 0.053 180);
+    --color-seafoam-900: oklch(18% 0.035 180);
+
+    --color-cyan-25: oklch(99% 0.005 230);
+    --color-cyan-50: oklch(96% 0.02 230);
+    --color-cyan-75: oklch(93% 0.036 230);
+    --color-cyan-100: oklch(90% 0.053 230);
+    --color-cyan-200: oklch(81% 0.103 230);
+    --color-cyan-300: oklch(72% 0.151 230);
+    --color-cyan-400: oklch(63% 0.132 230);
+    --color-cyan-500: oklch(54% 0.113 230);
+    --color-cyan-600: oklch(45% 0.094 230);
+    --color-cyan-700: oklch(36% 0.075 230);
+    --color-cyan-800: oklch(27% 0.056 230);
+    --color-cyan-900: oklch(18% 0.037 230);
+
+    --color-blue-25: oklch(99% 0.004 260);
+    --color-blue-50: oklch(96% 0.016 260);
+    --color-blue-75: oklch(93% 0.029 260);
+    --color-blue-100: oklch(90% 0.042 260);
+    --color-blue-200: oklch(81% 0.083 260);
+    --color-blue-300: oklch(72% 0.126 260);
+    --color-blue-400: oklch(63% 0.171 260);
+    --color-blue-500: oklch(54% 0.219 260);
+    --color-blue-600: oklch(45% 0.184 260);
+    --color-blue-700: oklch(36% 0.147 260);
+    --color-blue-800: oklch(27% 0.111 260);
+    --color-blue-900: oklch(18% 0.074 260);
+
+    --color-indigo-25: oklch(99% 0.004 280);
+    --color-indigo-50: oklch(96% 0.017 280);
+    --color-indigo-75: oklch(93% 0.03 280);
+    --color-indigo-100: oklch(90% 0.043 280);
+    --color-indigo-200: oklch(81% 0.085 280);
+    --color-indigo-300: oklch(72% 0.129 280);
+    --color-indigo-400: oklch(63% 0.175 280);
+    --color-indigo-500: oklch(54% 0.224 280);
+    --color-indigo-600: oklch(45% 0.22 280);
+    --color-indigo-700: oklch(36% 0.176 280);
+    --color-indigo-800: oklch(27% 0.132 280);
+    --color-indigo-900: oklch(18% 0.088 280);
+
+    --color-purple-25: oklch(99% 0.004 300);
+    --color-purple-50: oklch(96% 0.019 300);
+    --color-purple-75: oklch(93% 0.034 300);
+    --color-purple-100: oklch(90% 0.05 300);
+    --color-purple-200: oklch(81% 0.098 300);
+    --color-purple-300: oklch(72% 0.15 300);
+    --color-purple-400: oklch(63% 0.204 300);
+    --color-purple-500: oklch(54% 0.24 300);
+    --color-purple-600: oklch(45% 0.2 300);
+    --color-purple-700: oklch(36% 0.16 300);
+    --color-purple-800: oklch(27% 0.12 300);
+    --color-purple-900: oklch(18% 0.08 300);
+
+    --color-fuchsia-25: oklch(99% 0.007 335);
+    --color-fuchsia-50: oklch(96% 0.031 335);
+    --color-fuchsia-75: oklch(93% 0.056 335);
+    --color-fuchsia-100: oklch(90% 0.082 335);
+    --color-fuchsia-200: oklch(81% 0.17 335);
+    --color-fuchsia-300: oklch(72% 0.274 335);
+    --color-fuchsia-400: oklch(63% 0.247 335);
+    --color-fuchsia-500: oklch(54% 0.212 335);
+    --color-fuchsia-600: oklch(45% 0.176 335);
+    --color-fuchsia-700: oklch(36% 0.141 335);
+    --color-fuchsia-800: oklch(27% 0.106 335);
+    --color-fuchsia-900: oklch(18% 0.07 335);
+
+    --color-magenta-25: oklch(99% 0.005 360);
+    --color-magenta-50: oklch(96% 0.022 360);
+    --color-magenta-75: oklch(93% 0.04 360);
+    --color-magenta-100: oklch(90% 0.059 360);
+    --color-magenta-200: oklch(81% 0.122 360);
+    --color-magenta-300: oklch(72% 0.197 360);
+    --color-magenta-400: oklch(63% 0.23 360);
+    --color-magenta-500: oklch(54% 0.197 360);
+    --color-magenta-600: oklch(45% 0.164 360);
+    --color-magenta-700: oklch(36% 0.131 360);
+    --color-magenta-800: oklch(27% 0.098 360);
+    --color-magenta-900: oklch(18% 0.065 360);
+  }
+}
+
+:root {
+  --color-fixed-gray-25: oklch(99% 00000 0);
+  --color-fixed-gray-50: oklch(96% 00000 0);
+  --color-fixed-gray-75: oklch(93% 00000 0);
+  --color-fixed-gray-100: oklch(90% 00000 0);
+  --color-fixed-gray-200: oklch(81% 00000 0);
+  --color-fixed-gray-300: oklch(72% 00000 0);
+  --color-fixed-gray-400: oklch(63% 00000 0);
+  --color-fixed-gray-500: oklch(54% 00000 0);
+  --color-fixed-gray-600: oklch(45% 00000 0);
+  --color-fixed-gray-700: oklch(36% 00000 0);
+  --color-fixed-gray-800: oklch(27% 00000 0);
+  --color-fixed-gray-900: oklch(18% 00000 0);
+
+  --color-fixed-red-25: oklch(99% 0.004 30);
+  --color-fixed-red-50: oklch(96% 0.02 30);
+  --color-fixed-red-75: oklch(93% 0.036 30);
+  --color-fixed-red-100: oklch(90% 0.054 30);
+  --color-fixed-red-200: oklch(81% 0.111 30);
+  --color-fixed-red-300: oklch(72% 0.178 30);
+  --color-fixed-red-400: oklch(63% 0.225 30);
+  --color-fixed-red-500: oklch(54% 0.193 30);
+  --color-fixed-red-600: oklch(45% 0.161 30);
+  --color-fixed-red-700: oklch(36% 0.129 30);
+  --color-fixed-red-800: oklch(27% 0.096 30);
+  --color-fixed-red-900: oklch(18% 0.064 30);
+
+  --color-fixed-orange-25: oklch(99% 0.005 50);
+  --color-fixed-orange-50: oklch(96% 0.022 50);
+  --color-fixed-orange-75: oklch(93% 0.04 50);
+  --color-fixed-orange-100: oklch(90% 0.059 50);
+  --color-fixed-orange-200: oklch(81% 0.121 50);
+  --color-fixed-orange-300: oklch(72% 0.173 50);
+  --color-fixed-orange-400: oklch(63% 0.151 50);
+  --color-fixed-orange-500: oklch(54% 0.129 50);
+  --color-fixed-orange-600: oklch(45% 0.108 50);
+  --color-fixed-orange-700: oklch(36% 0.086 50);
+  --color-fixed-orange-800: oklch(27% 0.064 50);
+  --color-fixed-orange-900: oklch(18% 0.043 50);
+
+  --color-fixed-yellow-25: oklch(99% 0.02 100);
+  --color-fixed-yellow-50: oklch(96% 0.08 100);
+  --color-fixed-yellow-75: oklch(93% 0.138 100);
+  --color-fixed-yellow-100: oklch(90% 0.173 100);
+  --color-fixed-yellow-200: oklch(81% 0.155 100);
+  --color-fixed-yellow-300: oklch(72% 0.138 100);
+  --color-fixed-yellow-400: oklch(63% 0.121 100);
+  --color-fixed-yellow-500: oklch(54% 0.103 100);
+  --color-fixed-yellow-600: oklch(45% 0.086 100);
+  --color-fixed-yellow-700: oklch(36% 0.069 100);
+  --color-fixed-yellow-800: oklch(27% 0.052 100);
+  --color-fixed-yellow-900: oklch(18% 0.034 100);
+
+  --color-fixed-green-25: oklch(99% 0.013 150);
+  --color-fixed-green-50: oklch(96% 0.058 150);
+  --color-fixed-green-75: oklch(93% 0.107 150);
+  --color-fixed-green-100: oklch(90% 0.162 150);
+  --color-fixed-green-200: oklch(81% 0.249 150);
+  --color-fixed-green-300: oklch(72% 0.221 150);
+  --color-fixed-green-400: oklch(63% 0.193 150);
+  --color-fixed-green-500: oklch(54% 0.166 150);
+  --color-fixed-green-600: oklch(45% 0.138 150);
+  --color-fixed-green-700: oklch(36% 0.11 150);
+  --color-fixed-green-800: oklch(27% 0.083 150);
+  --color-fixed-green-900: oklch(18% 0.055 150);
+
+  --color-fixed-seafoam-25: oklch(99% 0.012 180);
+  --color-fixed-seafoam-50: oklch(96% 0.051 180);
+  --color-fixed-seafoam-75: oklch(93% 0.094 180);
+  --color-fixed-seafoam-100: oklch(90% 0.141 180);
+  --color-fixed-seafoam-200: oklch(81% 0.159 180);
+  --color-fixed-seafoam-300: oklch(72% 0.141 180);
+  --color-fixed-seafoam-400: oklch(63% 0.123 180);
+  --color-fixed-seafoam-500: oklch(54% 0.106 180);
+  --color-fixed-seafoam-600: oklch(45% 0.088 180);
+  --color-fixed-seafoam-700: oklch(36% 0.07 180);
+  --color-fixed-seafoam-800: oklch(27% 0.053 180);
+  --color-fixed-seafoam-900: oklch(18% 0.035 180);
+
+  --color-fixed-cyan-25: oklch(99% 0.005 230);
+  --color-fixed-cyan-50: oklch(96% 0.02 230);
+  --color-fixed-cyan-75: oklch(93% 0.036 230);
+  --color-fixed-cyan-100: oklch(90% 0.053 230);
+  --color-fixed-cyan-200: oklch(81% 0.103 230);
+  --color-fixed-cyan-300: oklch(72% 0.151 230);
+  --color-fixed-cyan-400: oklch(63% 0.132 230);
+  --color-fixed-cyan-500: oklch(54% 0.113 230);
+  --color-fixed-cyan-600: oklch(45% 0.094 230);
+  --color-fixed-cyan-700: oklch(36% 0.075 230);
+  --color-fixed-cyan-800: oklch(27% 0.056 230);
+  --color-fixed-cyan-900: oklch(18% 0.037 230);
+
+  --color-fixed-blue-25: oklch(99% 0.004 260);
+  --color-fixed-blue-50: oklch(96% 0.016 260);
+  --color-fixed-blue-75: oklch(93% 0.029 260);
+  --color-fixed-blue-100: oklch(90% 0.042 260);
+  --color-fixed-blue-200: oklch(81% 0.083 260);
+  --color-fixed-blue-300: oklch(72% 0.126 260);
+  --color-fixed-blue-400: oklch(63% 0.171 260);
+  --color-fixed-blue-500: oklch(54% 0.219 260);
+  --color-fixed-blue-600: oklch(45% 0.184 260);
+  --color-fixed-blue-700: oklch(36% 0.147 260);
+  --color-fixed-blue-800: oklch(27% 0.111 260);
+  --color-fixed-blue-900: oklch(18% 0.074 260);
+
+  --color-fixed-indigo-25: oklch(99% 0.004 280);
+  --color-fixed-indigo-50: oklch(96% 0.017 280);
+  --color-fixed-indigo-75: oklch(93% 0.03 280);
+  --color-fixed-indigo-100: oklch(90% 0.043 280);
+  --color-fixed-indigo-200: oklch(81% 0.085 280);
+  --color-fixed-indigo-300: oklch(72% 0.129 280);
+  --color-fixed-indigo-400: oklch(63% 0.175 280);
+  --color-fixed-indigo-500: oklch(54% 0.224 280);
+  --color-fixed-indigo-600: oklch(45% 0.22 280);
+  --color-fixed-indigo-700: oklch(36% 0.176 280);
+  --color-fixed-indigo-800: oklch(27% 0.132 280);
+  --color-fixed-indigo-900: oklch(18% 0.088 280);
+
+  --color-fixed-purple-25: oklch(99% 0.004 300);
+  --color-fixed-purple-50: oklch(96% 0.019 300);
+  --color-fixed-purple-75: oklch(93% 0.034 300);
+  --color-fixed-purple-100: oklch(90% 0.05 300);
+  --color-fixed-purple-200: oklch(81% 0.098 300);
+  --color-fixed-purple-300: oklch(72% 0.15 300);
+  --color-fixed-purple-400: oklch(63% 0.204 300);
+  --color-fixed-purple-500: oklch(54% 0.24 300);
+  --color-fixed-purple-600: oklch(45% 0.2 300);
+  --color-fixed-purple-700: oklch(36% 0.16 300);
+  --color-fixed-purple-800: oklch(27% 0.12 300);
+  --color-fixed-purple-900: oklch(18% 0.08 300);
+
+  --color-fixed-fuchsia-25: oklch(99% 0.007 335);
+  --color-fixed-fuchsia-50: oklch(96% 0.031 335);
+  --color-fixed-fuchsia-75: oklch(93% 0.056 335);
+  --color-fixed-fuchsia-100: oklch(90% 0.082 335);
+  --color-fixed-fuchsia-200: oklch(81% 0.17 335);
+  --color-fixed-fuchsia-300: oklch(72% 0.274 335);
+  --color-fixed-fuchsia-400: oklch(63% 0.247 335);
+  --color-fixed-fuchsia-500: oklch(54% 0.212 335);
+  --color-fixed-fuchsia-600: oklch(45% 0.176 335);
+  --color-fixed-fuchsia-700: oklch(36% 0.141 335);
+  --color-fixed-fuchsia-800: oklch(27% 0.106 335);
+  --color-fixed-fuchsia-900: oklch(18% 0.07 335);
+
+  --color-fixed-magenta-25: oklch(99% 0.005 360);
+  --color-fixed-magenta-50: oklch(96% 0.022 360);
+  --color-fixed-magenta-75: oklch(93% 0.04 360);
+  --color-fixed-magenta-100: oklch(90% 0.059 360);
+  --color-fixed-magenta-200: oklch(81% 0.122 360);
+  --color-fixed-magenta-300: oklch(72% 0.197 360);
+  --color-fixed-magenta-400: oklch(63% 0.23 360);
+  --color-fixed-magenta-500: oklch(54% 0.197 360);
+  --color-fixed-magenta-600: oklch(45% 0.164 360);
+  --color-fixed-magenta-700: oklch(36% 0.131 360);
+  --color-fixed-magenta-800: oklch(27% 0.098 360);
+  --color-fixed-magenta-900: oklch(18% 0.065 360);
+}

package/styles/reset.css

@@ -0,0 +1,129 @@
+@layer reset {
+  :root {
+    color-scheme: light dark; /* enables light and dark mode as well light-dark() function */
+
+    interpolate-size: allow-keywords; /* This enables animations between keywords (auto, min-content, etc) */
+    transition-behavior: allow-discrete; /* allow transitions between discrete values (display, content-visibility) */
+
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+
+    font-size: 100%; /* determines the size of the rem unit */
+    line-height: 1.4;
+
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  *,
+  *:after,
+  *:before {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+    box-sizing: border-box;
+    vertical-align: baseline;
+  }
+
+  /* Avoid selection of text on desktop, mobile apps */
+  :not(input):not(textarea),
+  :not(input):not(textarea)::after,
+  :not(input):not(textarea)::before {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* Show normal cursor on desktop, mobile apps except links and inputs */
+  :not(a):not(a *):not(input):not(textarea) {
+    cursor: default !important;
+  }
+
+  img,
+  image,
+  picture,
+  video,
+  iframe,
+  figure {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    display: block;
+  }
+
+  a {
+    display: block;
+  }
+
+  p a {
+    display: inline;
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  span,
+  a,
+  strong,
+  blockquote,
+  i,
+  b,
+  em,
+  pre {
+    font-size: 1em;
+    line-height: inherit;
+    font-weight: inherit;
+    font-style: inherit;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  form,
+  input,
+  textarea,
+  select,
+  button,
+  label {
+    font-family: inherit;
+    font-size: inherit;
+    hyphens: auto;
+    background-color: transparent;
+    display: block;
+    color: inherit;
+  }
+
+  table,
+  tr,
+  td {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  svg {
+    width: 100%;
+    display: block;
+  }
+
+  body {
+    font-family: system-ui;
+    color: var(--color-gray-900, #121212);
+    background-color: var(--color-gray-50, #fefefe);
+    hyphens: auto;
+  }
+
+  hr {
+    border: 1px solid;
+    margin: 0.5em 0;
+    opacity: 0.8;
+    color: var(--color-gray-100, #e5e5e5);
+  }
+}

package/styles/spacings.css

@@ -0,0 +1,9 @@
+:root {
+  --spacing-2xs: 0.25rem; /* 4px  */
+  --spacing-xs: 0.5rem; /* 8px  */
+  --spacing-s: 0.75rem; /* 12px */
+  --spacing-m: 1rem; /* 16px */
+  --spacing-l: 1.25rem; /* 20px */
+  --spacing-xl: 1.5rem; /* 24px */
+  --spacing-2xl: 2rem; /* 32px */
+}