arekui 1.0.2 → 2.0.0

package/src/base/theme-default.css

@@ -0,0 +1,184 @@
+:root {
+ --ar-dark-base-100: oklch(25.33% 0.016 252.42);
+ --ar-dark-base-200: oklch(23.26% 0.014 253.1);
+ --ar-dark-base-300: oklch(21.15% 0.012 254.09);
+ --ar-dark-base-content: oklch(97.807% 0.029 256.847);
+ --ar-dark-primary: oklch(56% 0.233 277.117);
+ --ar-dark-primary-text: oklch(70% 0.233 277.117);
+ --ar-dark-primary-content: oklch(96% 0.018 272.314);
+ --ar-dark-secondary: oklch(65% 0.241 354.308);
+ --ar-dark-secondary-text: oklch(72% 0.241 354.308);
+ --ar-dark-secondary-content: oklch(94% 0.028 342.258);
+ --ar-dark-accent: oklch(77% 0.152 181.912);
+ --ar-dark-accent-text: var(--ar-dark-accent);
+ --ar-dark-accent-content: oklch(38% 0.063 188.416);
+ --ar-dark-neutral: oklch(14% 0.005 285.823);
+ --ar-dark-neutral-text: oklch(66% 0.005 285.823);
+ --ar-dark-neutral-content: oklch(92% 0.004 286.32);
+ --ar-dark-info: oklch(74% 0.16 232.661);
+ --ar-dark-info-text: var(--ar-dark-info);
+ --ar-dark-info-content: oklch(29% 0.066 243.157);
+ --ar-dark-success: oklch(76% 0.177 163.223);
+ --ar-dark-success-text: var(--ar-dark-success);
+ --ar-dark-success-content: oklch(37% 0.077 168.94);
+ --ar-dark-warning: oklch(82% 0.189 84.429);
+ --ar-dark-warning-text: var(--ar-dark-warning);
+ --ar-dark-warning-content: oklch(41% 0.112 45.904);
+ --ar-dark-error: oklch(71% 0.194 13.428);
+ --ar-dark-error-text: var(--ar-dark-error);
+ --ar-dark-error-content: oklch(27% 0.105 12.094);
+ --ar-dark-bg-img-fill: rgb(152 159 171 / 0.3);
+ --ar-dark-desc-grad: linear-gradient(
+   to left,
+   var(--ar-dark-base-200) 50%,
+   #fafafa 50%
+  )
+  right;
+ --ar-dark-arc: #333333;
+ --ar-dark-gray-50: #1a1a1a;
+ --ar-dark-gray-100: #262626;
+ --ar-dark-gray-200: #333333;
+ --ar-dark-gray-300: #444444;
+ --ar-dark-gray-400: #999999;
+ --ar-dark-gray-500: #aaaaaa;
+ --ar-dark-gray-600: #bbbbbb;
+ --ar-dark-gray-700: #cccccc;
+ --ar-dark-gray-800: #dddddd;
+ --ar-dark-gray-900: #eeeeee;
+ --ar-dark-base-content-80: oklch(97.807% 0.029 256.847 / 0.8);
+}
+
+html[data-theme="light"] {
+ color-scheme: light;
+ --ar-base-100: oklch(100% 0 0);
+ --ar-base-200: oklch(97% 0 0);
+ --ar-base-300: oklch(94% 0 0);
+ --ar-base-content: oklch(0% 0 0);
+ --ar-base-content-80: oklch(0% 0 0 / 0.8);
+ --ar-primary: oklch(15.906% 0 0);
+ --ar-primary-text: var(--ar-primary);
+ --ar-primary-content: oklch(100% 0 0);
+ --ar-secondary: oklch(21.455% 0.001 17.278);
+ --ar-secondary-text: var(--ar-secondary);
+ --ar-secondary-content: oklch(100% 0 0);
+ --ar-accent: oklch(26.861% 0 0);
+ --ar-accent-text: var(--ar-accent);
+ --ar-accent-content: oklch(100% 0 0);
+ --ar-neutral: oklch(0% 0 0);
+ --ar-neutral-text: var(--ar-neutral);
+ --ar-neutral-content: oklch(100% 0 0);
+ --ar-info: oklch(79.54% 0.103 205.9);
+ --ar-info-text: oklch(42% 0.103 205.9);
+ --ar-info-content: oklch(15.908% 0.02 205.9);
+ --ar-success: oklch(90.13% 0.153 164.14);
+ --ar-success-text: oklch(42% 0.153 164.14);
+ --ar-success-content: oklch(18.026% 0.03 164.14);
+ --ar-warning: oklch(88.37% 0.135 79.94);
+ --ar-warning-text: oklch(42% 0.135 79.94);
+ --ar-warning-content: oklch(17.674% 0.027 79.94);
+ --ar-error: oklch(78.66% 0.15 28.47);
+ --ar-error-text: oklch(44% 0.15 28.47);
+ --ar-error-content: oklch(15.732% 0.03 28.47);
+ --ar-bg-img-fill: transparent;
+ --ar-desc-grad: linear-gradient(
+   to left,
+   var(--ar-base-200) 50%,
+   var(--ar-neutral) 50%
+  )
+  right;
+ --ar-arc: #fafafa;
+}
+
+html[data-theme="dark"] {
+ color-scheme: dark;
+ --ar-base-100: var(--ar-dark-base-100);
+ --ar-base-200: var(--ar-dark-base-200);
+ --ar-base-300: var(--ar-dark-base-300);
+ --ar-base-content: var(--ar-dark-base-content);
+ --ar-base-content-80: var(--ar-dark-base-content-80);
+ --ar-primary: var(--ar-dark-primary);
+ --ar-primary-text: var(--ar-dark-primary-text);
+ --ar-primary-content: var(--ar-dark-primary-content);
+ --ar-secondary: var(--ar-dark-secondary);
+ --ar-secondary-text: var(--ar-dark-secondary-text);
+ --ar-secondary-content: var(--ar-dark-secondary-content);
+ --ar-accent: var(--ar-dark-accent);
+ --ar-accent-text: var(--ar-dark-accent-text);
+ --ar-accent-content: var(--ar-dark-accent-content);
+ --ar-neutral: var(--ar-dark-neutral);
+ --ar-neutral-text: var(--ar-dark-neutral-text);
+ --ar-neutral-content: var(--ar-dark-neutral-content);
+ --ar-info: var(--ar-dark-info);
+ --ar-info-text: var(--ar-dark-info-text);
+ --ar-info-content: var(--ar-dark-info-content);
+ --ar-success: var(--ar-dark-success);
+ --ar-success-text: var(--ar-dark-success-text);
+ --ar-success-content: var(--ar-dark-success-content);
+ --ar-warning: var(--ar-dark-warning);
+ --ar-warning-text: var(--ar-dark-warning-text);
+ --ar-warning-content: var(--ar-dark-warning-content);
+ --ar-error: var(--ar-dark-error);
+ --ar-error-text: var(--ar-dark-error-text);
+ --ar-error-content: var(--ar-dark-error-content);
+ --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
+ --ar-desc-grad: var(--ar-dark-desc-grad);
+ --ar-arc: var(--ar-dark-arc);
+ --ar-gray-50: var(--ar-dark-gray-50);
+ --ar-gray-100: var(--ar-dark-gray-100);
+ --ar-gray-200: var(--ar-dark-gray-200);
+ --ar-gray-300: var(--ar-dark-gray-300);
+ --ar-gray-400: var(--ar-dark-gray-400);
+ --ar-gray-500: var(--ar-dark-gray-500);
+ --ar-gray-600: var(--ar-dark-gray-600);
+ --ar-gray-700: var(--ar-dark-gray-700);
+ --ar-gray-800: var(--ar-dark-gray-800);
+ --ar-gray-900: var(--ar-dark-gray-900);
+}
+
+@media (prefers-color-scheme: dark) {
+ html:not([data-theme]) {
+  color-scheme: dark;
+  --ar-base-100: var(--ar-dark-base-100);
+  --ar-base-200: var(--ar-dark-base-200);
+  --ar-base-300: var(--ar-dark-base-300);
+  --ar-base-content: var(--ar-dark-base-content);
+  --ar-base-content-80: var(--ar-dark-base-content-80);
+  --ar-primary: var(--ar-dark-primary);
+  --ar-primary-text: var(--ar-dark-primary-text);
+  --ar-primary-content: var(--ar-dark-primary-content);
+  --ar-secondary: var(--ar-dark-secondary);
+  --ar-secondary-text: var(--ar-dark-secondary-text);
+  --ar-secondary-content: var(--ar-dark-secondary-content);
+  --ar-accent: var(--ar-dark-accent);
+  --ar-accent-text: var(--ar-dark-accent-text);
+  --ar-accent-content: var(--ar-dark-accent-content);
+  --ar-neutral: var(--ar-dark-neutral);
+  --ar-neutral-text: var(--ar-dark-neutral-text);
+  --ar-neutral-content: var(--ar-dark-neutral-content);
+  --ar-info: var(--ar-dark-info);
+  --ar-info-text: var(--ar-dark-info-text);
+  --ar-info-content: var(--ar-dark-info-content);
+  --ar-success: var(--ar-dark-success);
+  --ar-success-text: var(--ar-dark-success-text);
+  --ar-success-content: var(--ar-dark-success-content);
+  --ar-warning: var(--ar-dark-warning);
+  --ar-warning-text: var(--ar-dark-warning-text);
+  --ar-warning-content: var(--ar-dark-warning-content);
+  --ar-error: var(--ar-dark-error);
+  --ar-error-text: var(--ar-dark-error-text);
+  --ar-error-content: var(--ar-dark-error-content);
+  --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
+  --ar-desc-grad: var(--ar-dark-desc-grad);
+  --ar-arc: var(--ar-dark-arc);
+  --ar-gray-50: var(--ar-dark-gray-50);
+  --ar-gray-100: var(--ar-dark-gray-100);
+  --ar-gray-200: var(--ar-dark-gray-200);
+  --ar-gray-300: var(--ar-dark-gray-300);
+  --ar-gray-400: var(--ar-dark-gray-400);
+  --ar-gray-500: var(--ar-dark-gray-500);
+  --ar-gray-600: var(--ar-dark-gray-600);
+  --ar-gray-700: var(--ar-dark-gray-700);
+  --ar-gray-800: var(--ar-dark-gray-800);
+  --ar-gray-900: var(--ar-dark-gray-900);
+ }
+}

package/src/base/theme-neo.css

@@ -0,0 +1,108 @@
+:root {
+ --ar-neo-base-100: #ffffff;
+ --ar-neo-base-200: #f8f8f8;
+ --ar-neo-base-300: #e8e8e8;
+ --ar-neo-base-content: #1e293b;
+ --ar-neo-base-content-80: rgb(30 41 59 / 0.8);
+ --ar-neo-primary: #00aeef;
+ --ar-neo-primary-text: #006e93;
+ --ar-neo-primary-content: #1e293b;
+ --ar-neo-secondary: #8bc53f;
+ --ar-neo-secondary-text: #466b12;
+ --ar-neo-secondary-content: #ffffff;
+ --ar-neo-accent: #ffd100;
+ --ar-neo-accent-text: #7a6200;
+ --ar-neo-accent-content: #1e293b;
+ --ar-neo-neutral: #1e293b;
+ --ar-neo-neutral-text: var(--ar-neo-neutral);
+ --ar-neo-neutral-content: #ffffff;
+ --ar-neo-info: #00aeef;
+ --ar-neo-info-text: var(--ar-neo-primary-text);
+ --ar-neo-info-content: #ffffff;
+ --ar-neo-success: #8bc53f;
+ --ar-neo-success-text: var(--ar-neo-secondary-text);
+ --ar-neo-success-content: #ffffff;
+ --ar-neo-warning: #ffd100;
+ --ar-neo-warning-text: var(--ar-neo-accent-text);
+ --ar-neo-warning-content: #1e293b;
+ --ar-neo-error: #e4002b;
+ --ar-neo-error-text: #c40026;
+ --ar-neo-error-content: #ffffff;
+ --ar-neo-bg-img-fill: #1e293b;
+ --ar-neo-desc-grad: linear-gradient(to left, #f8f8f8 50%, #1e293b 50%) right;
+ --ar-neo-arc: #ffffff;
+ --ar-neo-gray-50: #f8f8f8;
+ --ar-neo-gray-100: #f0f0f0;
+ --ar-neo-gray-200: #e0e0e0;
+ --ar-neo-gray-300: #cccccc;
+ --ar-neo-gray-400: #999999;
+ --ar-neo-gray-500: #777777;
+ --ar-neo-gray-600: #555555;
+ --ar-neo-gray-700: #333333;
+ --ar-neo-gray-800: #222222;
+ --ar-neo-gray-900: #111111;
+
+ --ar-neo-border-width: 3px;
+ --ar-neo-border-color: #1e293b;
+ --ar-neo-shadow-sm: 2px 2px 0px 0px #1e293b;
+ --ar-neo-shadow-md: 4px 4px 0px 0px #1e293b;
+ --ar-neo-shadow-lg: 6px 6px 0px 0px #1e293b;
+ --ar-neo-shadow-xl: 8px 8px 0px 0px #1e293b;
+ --ar-neo-shadow-2xl: 12px 12px 0px 0px #1e293b;
+}
+
+html[data-theme="neo"] {
+ color-scheme: light;
+ --ar-base-100: var(--ar-neo-base-100);
+ --ar-base-200: var(--ar-neo-base-200);
+ --ar-base-300: var(--ar-neo-base-300);
+ --ar-base-content: var(--ar-neo-base-content);
+ --ar-base-content-80: var(--ar-neo-base-content-80);
+ --ar-primary: var(--ar-neo-primary);
+ --ar-primary-text: var(--ar-neo-primary-text);
+ --ar-primary-content: var(--ar-neo-primary-content);
+ --ar-secondary: var(--ar-neo-secondary);
+ --ar-secondary-text: var(--ar-neo-secondary-text);
+ --ar-secondary-content: var(--ar-neo-secondary-content);
+ --ar-accent: var(--ar-neo-accent);
+ --ar-accent-text: var(--ar-neo-accent-text);
+ --ar-accent-content: var(--ar-neo-accent-content);
+ --ar-neutral: var(--ar-neo-neutral);
+ --ar-neutral-text: var(--ar-neo-neutral-text);
+ --ar-neutral-content: var(--ar-neo-neutral-content);
+ --ar-info: var(--ar-neo-info);
+ --ar-info-text: var(--ar-neo-info-text);
+ --ar-info-content: var(--ar-neo-info-content);
+ --ar-success: var(--ar-neo-success);
+ --ar-success-text: var(--ar-neo-success-text);
+ --ar-success-content: var(--ar-neo-success-content);
+ --ar-warning: var(--ar-neo-warning);
+ --ar-warning-text: var(--ar-neo-warning-text);
+ --ar-warning-content: var(--ar-neo-warning-content);
+ --ar-error: var(--ar-neo-error);
+ --ar-error-text: var(--ar-neo-error-text);
+ --ar-error-content: var(--ar-neo-error-content);
+ --ar-bg-img-fill: var(--ar-neo-bg-img-fill);
+ --ar-desc-grad: var(--ar-neo-desc-grad);
+ --ar-arc: var(--ar-neo-arc);
+ --ar-gray-50: var(--ar-neo-gray-50);
+ --ar-gray-100: var(--ar-neo-gray-100);
+ --ar-gray-200: var(--ar-neo-gray-200);
+ --ar-gray-300: var(--ar-neo-gray-300);
+ --ar-gray-400: var(--ar-neo-gray-400);
+ --ar-gray-500: var(--ar-neo-gray-500);
+ --ar-gray-600: var(--ar-neo-gray-600);
+ --ar-gray-700: var(--ar-neo-gray-700);
+ --ar-gray-800: var(--ar-neo-gray-800);
+ --ar-gray-900: var(--ar-neo-gray-900);
+
+ --ar-border-width: var(--ar-neo-border-width);
+ --ar-radius-field: 0.5rem;
+ --ar-radius-box: 0.75rem;
+ --ar-shadow-sm: var(--ar-neo-shadow-sm);
+ --ar-shadow-md: var(--ar-neo-shadow-md);
+ --ar-shadow-lg: var(--ar-neo-shadow-lg);
+ --ar-shadow-xl: var(--ar-neo-shadow-xl);
+ --ar-shadow-2xl: var(--ar-neo-shadow-2xl);
+ --ar-base-font: var(--ar-font-sans);
+}

package/src/base/theme-pixel.css

@@ -0,0 +1,111 @@
+:root {
+ --ar-pixel-base-100: #f4f1e8;
+ --ar-pixel-base-200: #e8e4d8;
+ --ar-pixel-base-300: #d4cfc0;
+ --ar-pixel-base-content: #1a1a2e;
+ --ar-pixel-base-content-80: rgb(26 26 46 / 0.8);
+ --ar-pixel-primary: #4a90d9;
+ --ar-pixel-primary-text: #276599;
+ --ar-pixel-primary-content: #1a1a2e;
+ --ar-pixel-secondary: #e07a5f;
+ --ar-pixel-secondary-text: #9c3f2b;
+ --ar-pixel-secondary-content: #ffffff;
+ --ar-pixel-accent: #f2cc8f;
+ --ar-pixel-accent-text: #6e551d;
+ --ar-pixel-accent-content: #1a1a2e;
+ --ar-pixel-neutral: #2d3436;
+ --ar-pixel-neutral-text: var(--ar-pixel-neutral);
+ --ar-pixel-neutral-content: #ffffff;
+ --ar-pixel-info: #4a90d9;
+ --ar-pixel-info-text: var(--ar-pixel-primary-text);
+ --ar-pixel-info-content: #ffffff;
+ --ar-pixel-success: #81b29a;
+ --ar-pixel-success-text: #2f5c46;
+ --ar-pixel-success-content: #1a1a2e;
+ --ar-pixel-warning: #f2cc8f;
+ --ar-pixel-warning-text: var(--ar-pixel-accent-text);
+ --ar-pixel-warning-content: #1a1a2e;
+ --ar-pixel-error: #e07a5f;
+ --ar-pixel-error-text: var(--ar-pixel-secondary-text);
+ --ar-pixel-error-content: #ffffff;
+ --ar-pixel-bg-img-fill: rgb(26 26 46 / 0.1);
+ --ar-pixel-desc-grad: linear-gradient(to left, #e8e4d8 50%, #2d3436 50%) right;
+ --ar-pixel-arc: #d4cfc0;
+ --ar-pixel-gray-50: #f4f1e8;
+ --ar-pixel-gray-100: #e8e4d8;
+ --ar-pixel-gray-200: #d4cfc0;
+ --ar-pixel-gray-300: #b8b3a3;
+ --ar-pixel-gray-400: #9c9787;
+ --ar-pixel-gray-500: #807c6c;
+ --ar-pixel-gray-600: #645f4f;
+ --ar-pixel-gray-700: #484434;
+ --ar-pixel-gray-800: #2c2919;
+ --ar-pixel-gray-900: #1a1a2e;
+
+ --ar-pixel-border-width: 2px;
+ --ar-pixel-border-color: #1a1a2e;
+ --ar-pixel-shadow-sm: 2px 2px 0px 0px #1a1a2e;
+ --ar-pixel-shadow-md: 4px 4px 0px 0px #1a1a2e;
+ --ar-pixel-shadow-lg: 6px 6px 0px 0px #1a1a2e;
+ --ar-pixel-shadow-xl: 8px 8px 0px 0px #1a1a2e;
+ --ar-pixel-shadow-2xl: 12px 12px 0px 0px #1a1a2e;
+ --ar-pixel-radius: 0;
+}
+
+html[data-theme="pixel"] {
+ color-scheme: light;
+ --ar-base-100: var(--ar-pixel-base-100);
+ --ar-base-200: var(--ar-pixel-base-200);
+ --ar-base-300: var(--ar-pixel-base-300);
+ --ar-base-content: var(--ar-pixel-base-content);
+ --ar-base-content-80: var(--ar-pixel-base-content-80);
+ --ar-primary: var(--ar-pixel-primary);
+ --ar-primary-text: var(--ar-pixel-primary-text);
+ --ar-primary-content: var(--ar-pixel-primary-content);
+ --ar-secondary: var(--ar-pixel-secondary);
+ --ar-secondary-text: var(--ar-pixel-secondary-text);
+ --ar-secondary-content: var(--ar-pixel-secondary-content);
+ --ar-accent: var(--ar-pixel-accent);
+ --ar-accent-text: var(--ar-pixel-accent-text);
+ --ar-accent-content: var(--ar-pixel-accent-content);
+ --ar-neutral: var(--ar-pixel-neutral);
+ --ar-neutral-text: var(--ar-pixel-neutral-text);
+ --ar-neutral-content: var(--ar-pixel-neutral-content);
+ --ar-info: var(--ar-pixel-info);
+ --ar-info-text: var(--ar-pixel-info-text);
+ --ar-info-content: var(--ar-pixel-info-content);
+ --ar-success: var(--ar-pixel-success);
+ --ar-success-text: var(--ar-pixel-success-text);
+ --ar-success-content: var(--ar-pixel-success-content);
+ --ar-warning: var(--ar-pixel-warning);
+ --ar-warning-text: var(--ar-pixel-warning-text);
+ --ar-warning-content: var(--ar-pixel-warning-content);
+ --ar-error: var(--ar-pixel-error);
+ --ar-error-text: var(--ar-pixel-error-text);
+ --ar-error-content: var(--ar-pixel-error-content);
+ --ar-bg-img-fill: var(--ar-pixel-bg-img-fill);
+ --ar-desc-grad: var(--ar-pixel-desc-grad);
+ --ar-arc: var(--ar-pixel-arc);
+ --ar-gray-50: var(--ar-pixel-gray-50);
+ --ar-gray-100: var(--ar-pixel-gray-100);
+ --ar-gray-200: var(--ar-pixel-gray-200);
+ --ar-gray-300: var(--ar-pixel-gray-300);
+ --ar-gray-400: var(--ar-pixel-gray-400);
+ --ar-gray-500: var(--ar-pixel-gray-500);
+ --ar-gray-600: var(--ar-pixel-gray-600);
+ --ar-gray-700: var(--ar-pixel-gray-700);
+ --ar-gray-800: var(--ar-pixel-gray-800);
+ --ar-gray-900: var(--ar-pixel-gray-900);
+
+ --ar-border-width: var(--ar-pixel-border-width);
+ --ar-radius-field: var(--ar-pixel-radius);
+ --ar-radius-box: var(--ar-pixel-radius);
+ --ar-radius-selector: var(--ar-pixel-radius);
+ --ar-radius-pill: var(--ar-pixel-radius);
+ --ar-shadow-sm: var(--ar-pixel-shadow-sm);
+ --ar-shadow-md: var(--ar-pixel-shadow-md);
+ --ar-shadow-lg: var(--ar-pixel-shadow-lg);
+ --ar-shadow-xl: var(--ar-pixel-shadow-xl);
+ --ar-shadow-2xl: var(--ar-pixel-shadow-2xl);
+ --ar-base-font: var(--ar-font-mono);
+}

package/src/base/tokens.css

@@ -1,4 +1,4 @@
-/* DESIGN TOKENS */
+/* DESIGN TOKENS */
 :root {
  --ar-font-sans:
   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
@@ -21,6 +21,12 @@
  --ar-s-12: 3rem;
  --ar-s-16: 4rem;
  --ar-s-20: 5rem;
+ --ar-s-24: 6rem;
+ --ar-s-32: 8rem;
+ --ar-s-40: 10rem;
+ --ar-s-48: 12rem;
+ --ar-s-60: 15rem;
+ --ar-s-80: 20rem;
 
  --ar-radius-field: 0.25rem;
  --ar-radius-box: 0.5rem;
@@ -29,6 +35,8 @@
 
  --ar-border-width: 1px;
 
+ --ar-nav-h: 4.5rem;
+
  --ar-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --ar-shadow-md:
   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -38,8 +46,6 @@
   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --ar-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 
- /* Relative to this stylesheet — override the token if you serve
-     arekui.css from another path or want a different texture. */
  --ar-texture: url("assets/img/grunge-wall-texture-freepick-kues1.webp");
 
  --ar-gray-50: #fafafa;
@@ -52,253 +58,4 @@
  --ar-gray-700: #404040;
  --ar-gray-800: #262626;
  --ar-gray-900: #171717;
-
- /* Dark palette — single source of truth shared by
-     html[data-theme="dark"] and the prefers-color-scheme fallback. */
- --ar-dark-base-100: oklch(25.33% 0.016 252.42);
- --ar-dark-base-200: oklch(23.26% 0.014 253.1);
- --ar-dark-base-300: oklch(21.15% 0.012 254.09);
- --ar-dark-base-content: oklch(97.807% 0.029 256.847);
- --ar-dark-primary: oklch(58% 0.233 277.117);
- --ar-dark-primary-content: oklch(96% 0.018 272.314);
- --ar-dark-secondary: oklch(65% 0.241 354.308);
- --ar-dark-secondary-content: oklch(94% 0.028 342.258);
- --ar-dark-accent: oklch(77% 0.152 181.912);
- --ar-dark-accent-content: oklch(38% 0.063 188.416);
- --ar-dark-neutral: oklch(14% 0.005 285.823);
- --ar-dark-neutral-content: oklch(92% 0.004 286.32);
- --ar-dark-info: oklch(74% 0.16 232.661);
- --ar-dark-info-content: oklch(29% 0.066 243.157);
- --ar-dark-success: oklch(76% 0.177 163.223);
- --ar-dark-success-content: oklch(37% 0.077 168.94);
- --ar-dark-warning: oklch(82% 0.189 84.429);
- --ar-dark-warning-content: oklch(41% 0.112 45.904);
- --ar-dark-error: oklch(71% 0.194 13.428);
- --ar-dark-error-content: oklch(27% 0.105 12.094);
- --ar-dark-bg-img-fill: rgb(152 159 171 / 0.3);
- --ar-dark-desc-grad: linear-gradient(
-   to left,
-   var(--ar-dark-base-200) 50%,
-   #fafafa 50%
-  )
-  right;
- --ar-dark-arc: #333333;
- --ar-dark-gray-50: #1a1a1a;
- --ar-dark-gray-100: #262626;
- --ar-dark-gray-200: #333333;
- --ar-dark-gray-300: #444444;
- --ar-dark-gray-400: #999999;
- --ar-dark-gray-500: #aaaaaa;
- --ar-dark-gray-600: #bbbbbb;
- --ar-dark-gray-700: #cccccc;
- --ar-dark-gray-800: #dddddd;
- --ar-dark-gray-900: #eeeeee;
- --ar-dark-base-content-80: oklch(97.807% 0.029 256.847 / 0.8);
-
- /* --------------------------------------------------------
-     NEOBRUTALISM palette — single source of truth.
-     Referenced by html[data-theme="neo"] below.
-     -------------------------------------------------------- */
- --ar-neo-base-100: #ffffff;
- --ar-neo-base-200: #f8f8f8;
- --ar-neo-base-300: #e8e8e8;
- --ar-neo-base-content: #1e293b;
- --ar-neo-base-content-80: rgb(30 41 59 / 0.8);
- --ar-neo-primary: #00aeef;
- --ar-neo-primary-content: #ffffff;
- --ar-neo-secondary: #8bc53f;
- --ar-neo-secondary-content: #ffffff;
- --ar-neo-accent: #ffd100;
- --ar-neo-accent-content: #1e293b;
- --ar-neo-neutral: #1e293b;
- --ar-neo-neutral-content: #ffffff;
- --ar-neo-info: #00aeef;
- --ar-neo-info-content: #ffffff;
- --ar-neo-success: #8bc53f;
- --ar-neo-success-content: #ffffff;
- --ar-neo-warning: #ffd100;
- --ar-neo-warning-content: #1e293b;
- --ar-neo-error: #e4002b;
- --ar-neo-error-content: #ffffff;
- --ar-neo-bg-img-fill: #1e293b;
- --ar-neo-desc-grad: linear-gradient(to left, #f8f8f8 50%, #1e293b 50%) right;
- --ar-neo-arc: #ffffff;
- --ar-neo-gray-50: #f8f8f8;
- --ar-neo-gray-100: #f0f0f0;
- --ar-neo-gray-200: #e0e0e0;
- --ar-neo-gray-300: #cccccc;
- --ar-neo-gray-400: #999999;
- --ar-neo-gray-500: #777777;
- --ar-neo-gray-600: #555555;
- --ar-neo-gray-700: #333333;
- --ar-neo-gray-800: #222222;
- --ar-neo-gray-900: #111111;
-
- /* Neobrutalism-specific tokens */
- --ar-neo-border-width: 3px;
- --ar-neo-border-color: #1e293b;
- --ar-neo-shadow-sm: 2px 2px 0px 0px #1e293b;
- --ar-neo-shadow-md: 4px 4px 0px 0px #1e293b;
- --ar-neo-shadow-lg: 6px 6px 0px 0px #1e293b;
- --ar-neo-shadow-xl: 8px 8px 0px 0px #1e293b;
- --ar-neo-shadow-2xl: 12px 12px 0px 0px #1e293b;
-}
-
-html[data-theme="light"] {
- color-scheme: light;
- --ar-base-100: oklch(100% 0 0);
- --ar-base-200: oklch(97% 0 0);
- --ar-base-300: oklch(94% 0 0);
- --ar-base-content: oklch(0% 0 0);
- --ar-base-content-80: oklch(0% 0 0 / 0.8);
- --ar-primary: oklch(15.906% 0 0);
- --ar-primary-content: oklch(100% 0 0);
- --ar-secondary: oklch(21.455% 0.001 17.278);
- --ar-secondary-content: oklch(100% 0 0);
- --ar-accent: oklch(26.861% 0 0);
- --ar-accent-content: oklch(100% 0 0);
- --ar-neutral: oklch(0% 0 0);
- --ar-neutral-content: oklch(100% 0 0);
- --ar-info: oklch(79.54% 0.103 205.9);
- --ar-info-content: oklch(15.908% 0.02 205.9);
- --ar-success: oklch(90.13% 0.153 164.14);
- --ar-success-content: oklch(18.026% 0.03 164.14);
- --ar-warning: oklch(88.37% 0.135 79.94);
- --ar-warning-content: oklch(17.674% 0.027 79.94);
- --ar-error: oklch(78.66% 0.15 28.47);
- --ar-error-content: oklch(15.732% 0.03 28.47);
- --ar-bg-img-fill: transparent;
- --ar-desc-grad: linear-gradient(
-   to left,
-   var(--ar-base-200) 50%,
-   var(--ar-neutral) 50%
-  )
-  right;
- --ar-arc: #fafafa;
-}
-
-html[data-theme="dark"] {
- color-scheme: dark;
- --ar-base-100: var(--ar-dark-base-100);
- --ar-base-200: var(--ar-dark-base-200);
- --ar-base-300: var(--ar-dark-base-300);
- --ar-base-content: var(--ar-dark-base-content);
- --ar-base-content-80: var(--ar-dark-base-content-80);
- --ar-primary: var(--ar-dark-primary);
- --ar-primary-content: var(--ar-dark-primary-content);
- --ar-secondary: var(--ar-dark-secondary);
- --ar-secondary-content: var(--ar-dark-secondary-content);
- --ar-accent: var(--ar-dark-accent);
- --ar-accent-content: var(--ar-dark-accent-content);
- --ar-neutral: var(--ar-dark-neutral);
- --ar-neutral-content: var(--ar-dark-neutral-content);
- --ar-info: var(--ar-dark-info);
- --ar-info-content: var(--ar-dark-info-content);
- --ar-success: var(--ar-dark-success);
- --ar-success-content: var(--ar-dark-success-content);
- --ar-warning: var(--ar-dark-warning);
- --ar-warning-content: var(--ar-dark-warning-content);
- --ar-error: var(--ar-dark-error);
- --ar-error-content: var(--ar-dark-error-content);
- --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
- --ar-desc-grad: var(--ar-dark-desc-grad);
- --ar-arc: var(--ar-dark-arc);
- --ar-gray-50: var(--ar-dark-gray-50);
- --ar-gray-100: var(--ar-dark-gray-100);
- --ar-gray-200: var(--ar-dark-gray-200);
- --ar-gray-300: var(--ar-dark-gray-300);
- --ar-gray-400: var(--ar-dark-gray-400);
- --ar-gray-500: var(--ar-dark-gray-500);
- --ar-gray-600: var(--ar-dark-gray-600);
- --ar-gray-700: var(--ar-dark-gray-700);
- --ar-gray-800: var(--ar-dark-gray-800);
- --ar-gray-900: var(--ar-dark-gray-900);
-}
-
-@media (prefers-color-scheme: dark) {
- html:not([data-theme]) {
-  color-scheme: dark;
-  --ar-base-100: var(--ar-dark-base-100);
-  --ar-base-200: var(--ar-dark-base-200);
-  --ar-base-300: var(--ar-dark-base-300);
-  --ar-base-content: var(--ar-dark-base-content);
-  --ar-base-content-80: var(--ar-dark-base-content-80);
-  --ar-primary: var(--ar-dark-primary);
-  --ar-primary-content: var(--ar-dark-primary-content);
-  --ar-secondary: var(--ar-dark-secondary);
-  --ar-secondary-content: var(--ar-dark-secondary-content);
-  --ar-accent: var(--ar-dark-accent);
-  --ar-accent-content: var(--ar-dark-accent-content);
-  --ar-neutral: var(--ar-dark-neutral);
-  --ar-neutral-content: var(--ar-dark-neutral-content);
-  --ar-info: var(--ar-dark-info);
-  --ar-info-content: var(--ar-dark-info-content);
-  --ar-success: var(--ar-dark-success);
-  --ar-success-content: var(--ar-dark-success-content);
-  --ar-warning: var(--ar-dark-warning);
-  --ar-warning-content: var(--ar-dark-warning-content);
-  --ar-error: var(--ar-dark-error);
-  --ar-error-content: var(--ar-dark-error-content);
-  --ar-bg-img-fill: var(--ar-dark-bg-img-fill);
-  --ar-desc-grad: var(--ar-dark-desc-grad);
-  --ar-arc: var(--ar-dark-arc);
-  --ar-gray-50: var(--ar-dark-gray-50);
-  --ar-gray-100: var(--ar-dark-gray-100);
-  --ar-gray-200: var(--ar-dark-gray-200);
-  --ar-gray-300: var(--ar-dark-gray-300);
-  --ar-gray-400: var(--ar-dark-gray-400);
-  --ar-gray-500: var(--ar-dark-gray-500);
-  --ar-gray-600: var(--ar-dark-gray-600);
-  --ar-gray-700: var(--ar-dark-gray-700);
-  --ar-gray-800: var(--ar-dark-gray-800);
-  --ar-gray-900: var(--ar-dark-gray-900);
- }
-}
-
-html[data-theme="neo"] {
- color-scheme: light;
- --ar-base-100: var(--ar-neo-base-100);
- --ar-base-200: var(--ar-neo-base-200);
- --ar-base-300: var(--ar-neo-base-300);
- --ar-base-content: var(--ar-neo-base-content);
- --ar-base-content-80: var(--ar-neo-base-content-80);
- --ar-primary: var(--ar-neo-primary);
- --ar-primary-content: var(--ar-neo-primary-content);
- --ar-secondary: var(--ar-neo-secondary);
- --ar-secondary-content: var(--ar-neo-secondary-content);
- --ar-accent: var(--ar-neo-accent);
- --ar-accent-content: var(--ar-neo-accent-content);
- --ar-neutral: var(--ar-neo-neutral);
- --ar-neutral-content: var(--ar-neo-neutral-content);
- --ar-info: var(--ar-neo-info);
- --ar-info-content: var(--ar-neo-info-content);
- --ar-success: var(--ar-neo-success);
- --ar-success-content: var(--ar-neo-success-content);
- --ar-warning: var(--ar-neo-warning);
- --ar-warning-content: var(--ar-neo-warning-content);
- --ar-error: var(--ar-neo-error);
- --ar-error-content: var(--ar-neo-error-content);
- --ar-bg-img-fill: var(--ar-neo-bg-img-fill);
- --ar-desc-grad: var(--ar-neo-desc-grad);
- --ar-arc: var(--ar-neo-arc);
- --ar-gray-50: var(--ar-neo-gray-50);
- --ar-gray-100: var(--ar-neo-gray-100);
- --ar-gray-200: var(--ar-neo-gray-200);
- --ar-gray-300: var(--ar-neo-gray-300);
- --ar-gray-400: var(--ar-neo-gray-400);
- --ar-gray-500: var(--ar-neo-gray-500);
- --ar-gray-600: var(--ar-neo-gray-600);
- --ar-gray-700: var(--ar-neo-gray-700);
- --ar-gray-800: var(--ar-neo-gray-800);
- --ar-gray-900: var(--ar-neo-gray-900);
- /* Override design tokens for neobrutalism */
- --ar-border-width: var(--ar-neo-border-width);
- --ar-radius-field: 0.5rem;
- --ar-radius-box: 0.75rem;
- --ar-shadow-sm: var(--ar-neo-shadow-sm);
- --ar-shadow-md: var(--ar-neo-shadow-md);
- --ar-shadow-lg: var(--ar-neo-shadow-lg);
- --ar-shadow-xl: var(--ar-neo-shadow-xl);
- --ar-shadow-2xl: var(--ar-neo-shadow-2xl);
- --ar-base-font: var(--ar-font-sans);
-}
+}

package/src/components/accordion.css

@@ -1,4 +1,3 @@
-/* ACCORDION */
 .ar-accordion {
  border: var(--ar-border-width) solid var(--ar-base-300);
  border-radius: var(--ar-radius-box);
@@ -31,4 +30,4 @@
 }
 .ar-accordion .ar-accordion-body {
  padding: 0 1rem 1rem;
-}
+}