@cladd-ui/react 0.0.16 → 0.0.18

package/styles/colors.css

@@ -1,175 +1,187 @@
 @theme {
-  --color-theme: var(--theme);
-  --color-background: var(--background);
-  --color-backdrop: var(--backdrop);
-  --color-primary: var(--primary);
-  --color-on-primary: var(--on-primary);
-  --color-surface: var(--surface);
-  --color-surface-original: var(--surface-original);
-  --color-surface-cut: var(--surface-cut);
-  --color-surface-prev: var(--surface-prev);
-  --color-surface-minus: var(--surface-minus);
-  --color-surface-plus: var(--surface-plus);
-  --color-surface-next: var(--surface-next);
-  --color-on-surface: var(--on-surface);
-  --color-on-surface-dark: var(--on-surface-dark);
-  --color-on-surface-darker: var(--on-surface-darker);
-  --color-on-surface-darkest: var(--on-surface-darkest);
-  --color-surface-white: var(--surface-white);
-  --color-surface-black: var(--surface-black);
-  --color-surface-hover: var(--surface-hover);
-  --color-surface-hover-fill: var(--surface-hover-fill);
-  --color-surface-pressed: var(--surface-pressed);
-  --color-background-outline: var(--background-outline);
-  --color-surface-outline: var(--surface-outline);
-  --color-surface-outline-original: var(--surface-outline-original);
-  --color-surface-highlight: var(--surface-highlight);
+  --color-cladd-theme: var(--cladd-theme);
+  --color-cladd-bg: var(--cladd-bg);
+  --color-cladd-backdrop: var(--cladd-backdrop);
+  --color-cladd-primary: var(--cladd-primary);
+  --color-cladd-on-primary: var(--cladd-on-primary);
+  --color-cladd-surface: var(--cladd-surface);
+  --color-cladd-surface-cut: var(--cladd-surface-cut);
+  --color-cladd-surface-prev: var(--cladd-surface-prev);
+  --color-cladd-surface-minus: var(--cladd-surface-minus);
+  --color-cladd-surface-plus: var(--cladd-surface-plus);
+  --color-cladd-surface-next: var(--cladd-surface-next);
+  --color-cladd-fg: var(--cladd-fg);
+  --color-cladd-fg-soft: var(--cladd-fg-soft);
+  --color-cladd-fg-softer: var(--cladd-fg-softer);
+  --color-cladd-fg-softest: var(--cladd-fg-softest);
+  --color-cladd-surface-white: var(--cladd-surface-white);
+  --color-cladd-surface-black: var(--cladd-surface-black);
+  --color-cladd-surface-hover: var(--cladd-surface-hover);
+  --color-cladd-surface-hover-fill: var(--cladd-surface-hover-fill);
+  --color-cladd-surface-pressed: var(--cladd-surface-pressed);
+  --color-cladd-bg-outline: var(--cladd-bg-outline);
+  --color-cladd-outline: var(--cladd-outline);
+  --color-cladd-surface-highlight: var(--cladd-surface-highlight);
 
-  --shadow-surface-outline: var(--shadow-surface-outline);
-  --shadow-surface-outline-fill: var(--shadow-surface-outline-fill);
-  --shadow-surface-cut-outline: var(--shadow-surface-cut-outline);
-  --shadow-popover: 0 24px 64px -12px rgb(0 0 0 / 0.5);
+  /* SHADOWS */
+  --shadow-cladd-outline: var(--shadow-cladd-outline);
+  --shadow-cladd-outline-fill: var(--shadow-cladd-outline-fill);
+  --shadow-cladd-cut-outline: var(--shadow-cladd-cut-outline);
+  --shadow-cladd-popover: 0 24px 64px -12px rgb(0 0 0 / 0.5);
 
-  --dark-primary-lightness: 0.95;
-  --dark-primary-chroma: 0.18;
-
-  --light-primary-lightness: 0.5;
-  --light-primary-chroma: 0.18;
+  /* PRIMARY COLOR TUNE */
+  --cladd-dark-primary-lightness: 0.95;
+  --cladd-dark-primary-chroma: 0.18;
+  --cladd-light-primary-lightness: 0.5;
+  --cladd-light-primary-chroma: 0.18;
 }
 
 :root,
-.color-neutral {
-  --theme: #fff;
+[data-color="neutral"] {
+  --cladd-theme: #fff;
 }
-.color-brand {
-  --theme: #d7ff38;
+[data-color="brand"] {
+  --cladd-theme: #d7ff38;
 }
-.color-red {
-  --theme: #ff0b0b;
+[data-color="red"] {
+  --cladd-theme: #ff0b0b;
 }
-.color-pink {
-  --theme: #ff0bac;
+[data-color="pink"] {
+  --cladd-theme: #ff0bac;
 }
-.color-purple {
-  --theme: #a20bff;
+[data-color="purple"] {
+  --cladd-theme: #a20bff;
 }
-.color-blue {
-  --theme: #0047ff;
+[data-color="blue"] {
+  --cladd-theme: #0047ff;
 }
-.color-cyan {
-  --theme: #00f9ff;
+[data-color="cyan"] {
+  --cladd-theme: #00f9ff;
 }
-.color-lime {
-  --theme: #7dff0b;
+[data-color="lime"] {
+  --cladd-theme: #7dff0b;
 }
-.color-green {
-  --theme: #0bff23;
+[data-color="green"] {
+  --cladd-theme: #0bff23;
 }
-.color-yellow {
-  --theme: #fff800;
+[data-color="yellow"] {
+  --cladd-theme: #fff800;
 }
-.color-orange {
-  --theme: #ff7a00;
+[data-color="orange"] {
+  --cladd-theme: #ff7a00;
 }
-/* DEFAULT */
+/* NEUTRAL */
 :root,
-.color-neutral {
-  --background: #0f0f0f;
-  --backdrop: #000;
-  --primary: oklch(from var(--theme) var(--dark-primary-lightness) 0 h);
-  --on-primary: oklch(from var(--theme) 0.2 0 h);
-  --surface: oklch(from var(--theme) 0.21 0 h);
-  --surface-original: oklch(from var(--theme) 0.21 0 h);
-  --surface-cut: oklch(from var(--theme) 0.17 0 h);
-  --surface-cut-original: oklch(from var(--theme) 0.17 0 h);
-  --on-surface: oklch(from var(--theme) 0.9 0 h);
-  --on-surface-dark: oklch(from var(--theme) 0.65 0 h);
-  --on-surface-darker: oklch(from var(--theme) 0.5 0 h);
-  --on-surface-darkest: oklch(from var(--theme) 0.4 0 h);
-  --surface-white: oklch(from var(--theme) 1 0 h);
-  --surface-black: oklch(from var(--theme) 0 0 h);
-  --background-outline: oklch(from var(--theme) 0.23 0 h);
-  --surface-outline: oklch(from var(--theme) 0.3 0 h);
-  --surface-outline-original: oklch(from var(--theme) 0.3 0 h);
+[data-color="neutral"] {
+  --cladd-bg: #0f0f0f;
+  --cladd-backdrop: #000;
+  --cladd-primary: oklch(
+    from var(--cladd-theme) var(--cladd-dark-primary-lightness) 0 h
+  );
+  --cladd-on-primary: oklch(from var(--cladd-theme) 0.2 0 h);
+  --cladd-surface: oklch(from var(--cladd-theme) 0.21 0 h);
+  --cladd-surface-cut: oklch(from var(--cladd-theme) 0.17 0 h);
+  --cladd-fg: oklch(from var(--cladd-theme) 0.9 0 h);
+  --cladd-fg-soft: oklch(from var(--cladd-theme) 0.65 0 h);
+  --cladd-fg-softer: oklch(from var(--cladd-theme) 0.5 0 h);
+  --cladd-fg-softest: oklch(from var(--cladd-theme) 0.4 0 h);
+  --cladd-surface-white: oklch(from var(--cladd-theme) 1 0 h);
+  --cladd-surface-black: oklch(from var(--cladd-theme) 0 0 h);
+  --cladd-bg-outline: oklch(from var(--cladd-theme) 0.23 0 h);
+  --cladd-outline: oklch(from var(--cladd-theme) 0.3 0 h);
 
-  --surface-hover: color-mix(in oklab, var(--surface-white) 5%, transparent);
-  --surface-pressed: color-mix(in oklab, var(--surface-white) 3%, transparent);
-  --surface-hover-fill: color-mix(
+  --cladd-surface-hover: color-mix(
     in oklab,
-    var(--surface-white) 20%,
+    var(--cladd-surface-white) 5%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 3%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 20%,
     transparent
   );
 
-  --surface-mix-color: var(--surface-white);
-  --surface-mix-amount: 6%;
+  --cladd-surface-mix-color: var(--cladd-surface-white);
+  --cladd-surface-mix-amount: 6%;
 
-  --shadow-surface-cut-outline:
-    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 2%, transparent)
-      inset,
-    0px 0px 0px 1px color-mix(in oklab, var(--surface-white) 7%, transparent)
-      inset;
+  --shadow-cladd-cut-outline:
+    -1px -1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 2%, transparent) inset,
+    0px 0px 0px 1px
+      color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
 
-  --shadow-surface-outline:
-    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 9%, transparent)
-      inset,
-    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 8%, transparent)
-      inset;
+  --shadow-cladd-outline:
+    1px 1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 9%, transparent) inset,
+    -1px -1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 8%, transparent) inset;
 
-  --shadow-surface-outline-fill:
-    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 20%, transparent)
-      inset,
-    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 20%, transparent)
-      inset;
+  --shadow-cladd-outline-fill:
+    1px 1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 20%, transparent) inset,
+    -1px -1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 20%, transparent) inset;
 }
 
 /* COLORS */
-[class*="color-"]:not(.color-neutral) {
-  --background: oklch(from var(--theme) 0.15 0.02 h);
-  --backdrop: #000;
-  --primary: oklch(
-    from var(--theme) var(--dark-primary-lightness) var(--dark-primary-chroma) h
+[data-color]:not([data-color="neutral"]) {
+  --cladd-bg: oklch(from var(--cladd-theme) 0.15 0.02 h);
+  --cladd-backdrop: #000;
+  --cladd-primary: oklch(
+    from var(--cladd-theme) var(--cladd-dark-primary-lightness)
+      var(--cladd-dark-primary-chroma) h
   );
-  --on-primary: oklch(from var(--theme) 0.2 0.05 h);
-  --surface: oklch(from var(--theme) 0.23 0.027 h);
-  --surface-original: oklch(from var(--theme) 0.23 0.027 h);
-  --surface-cut: oklch(from var(--theme) 0.19 0.027 h);
-  --surface-cut-original: oklch(from var(--theme) 0.19 0.027 h);
-  --on-surface: oklch(from var(--theme) 0.9 0.03 h);
-  --on-surface-dark: oklch(from var(--theme) 0.65 0.03 h);
-  --on-surface-darker: oklch(from var(--theme) 0.5 0.03 h);
-  --on-surface-darkest: oklch(from var(--theme) 0.4 0.03 h);
-  --surface-white: oklch(from var(--theme) 0.92 0.05 h);
-  --surface-black: oklch(from var(--theme) 0.08 0.02 h);
-  --background-outline: oklch(from var(--theme) 0.25 0.02 h);
-  --surface-outline: oklch(from var(--theme) 0.28 0.025 h);
-  --surface-outline-original: oklch(from var(--theme) 0.28 0.025 h);
+  --cladd-on-primary: oklch(from var(--cladd-theme) 0.2 0.05 h);
+  --cladd-surface: oklch(from var(--cladd-theme) 0.23 0.027 h);
+  --cladd-surface-cut: oklch(from var(--cladd-theme) 0.19 0.027 h);
+  --cladd-fg: oklch(from var(--cladd-theme) 0.9 0.03 h);
+  --cladd-fg-soft: oklch(from var(--cladd-theme) 0.65 0.03 h);
+  --cladd-fg-softer: oklch(from var(--cladd-theme) 0.5 0.03 h);
+  --cladd-fg-softest: oklch(from var(--cladd-theme) 0.4 0.03 h);
+  --cladd-surface-white: oklch(from var(--cladd-theme) 0.92 0.05 h);
+  --cladd-surface-black: oklch(from var(--cladd-theme) 0.08 0.02 h);
+  --cladd-bg-outline: oklch(from var(--cladd-theme) 0.25 0.02 h);
+  --cladd-outline: oklch(from var(--cladd-theme) 0.28 0.025 h);
 
-  --surface-hover: color-mix(in oklab, var(--surface-white) 5%, transparent);
-  --surface-pressed: color-mix(in oklab, var(--surface-white) 3%, transparent);
-  --surface-hover-fill: color-mix(
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 5%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 3%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
     in oklab,
-    var(--surface-white) 40%,
+    var(--cladd-surface-white) 40%,
     transparent
   );
-  --surface-mix-color: var(--surface-white);
-  --surface-mix-amount: 6%;
+  --cladd-surface-mix-color: var(--cladd-surface-white);
+  --cladd-surface-mix-amount: 6%;
 
-  --shadow-surface-cut-outline:
-    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 2%, transparent)
-      inset,
-    0px 0px 0px 1px color-mix(in oklab, var(--surface-white) 7%, transparent)
-      inset;
+  --shadow-cladd-cut-outline:
+    -1px -1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 2%, transparent) inset,
+    0px 0px 0px 1px
+      color-mix(in oklab, var(--cladd-surface-white) 7%, transparent) inset;
 
-  --shadow-surface-outline:
-    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 9%, transparent)
-      inset,
-    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 8%, transparent)
-      inset;
-  --shadow-surface-outline-fill:
-    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 30%, transparent)
-      inset,
-    -1px -1px 0px 0px color-mix(in oklab, var(--surface-white) 30%, transparent)
-      inset;
+  --shadow-cladd-outline:
+    1px 1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 9%, transparent) inset,
+    -1px -1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 8%, transparent) inset;
+  --shadow-cladd-outline-fill:
+    1px 1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset,
+    -1px -1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
 }
 
 .light,
@@ -181,223 +193,245 @@
 :root.light,
 .dark .light,
 :root .light,
-.light.color-neutral,
-.light .color-neutral,
-.color-neutral .light {
-  --background: #fff;
-  --backdrop: oklch(0.91 0 0);
-  --primary: oklch(from var(--theme) 0.1 0 h);
-  --on-primary: oklch(from var(--theme) 0.96 0 h);
-  --surface: oklch(0.97 0 0);
-  --surface-original: oklch(0.97 0 0);
-  --surface-cut: oklch(from var(--theme) 0.93 0 h);
-  --surface-cut-original: oklch(from var(--theme) 0.93 0 h);
-  --on-surface: oklch(0.32 0 0);
-  --on-surface-dark: oklch(0.5 0 0);
-  --on-surface-darker: oklch(0.65 0 0);
-  --on-surface-darkest: oklch(0.75 0 0);
-  --surface-white: oklch(1 0 0);
-  --surface-black: oklch(0 0 0);
-  --background-outline: oklch(0.89 0 0);
-  --surface-outline: oklch(0.89 0 0);
-  --surface-outline-original: oklch(0.89 0 0);
+.light[data-color="neutral"],
+.light [data-color="neutral"],
+[data-color="neutral"] .light {
+  --cladd-bg: #fff;
+  --cladd-backdrop: oklch(0.91 0 0);
+  --cladd-primary: oklch(from var(--cladd-theme) 0.1 0 h);
+  --cladd-on-primary: oklch(from var(--cladd-theme) 0.96 0 h);
+  --cladd-surface: oklch(0.97 0 0);
+  --cladd-surface-cut: oklch(from var(--cladd-theme) 0.93 0 h);
+  --cladd-fg: oklch(0.32 0 0);
+  --cladd-fg-soft: oklch(0.5 0 0);
+  --cladd-fg-softer: oklch(0.65 0 0);
+  --cladd-fg-softest: oklch(0.75 0 0);
+  --cladd-surface-white: oklch(1 0 0);
+  --cladd-surface-black: oklch(0 0 0);
+  --cladd-bg-outline: oklch(0.89 0 0);
+  --cladd-outline: oklch(0.89 0 0);
 
-  --surface-hover: color-mix(in oklab, var(--surface-black) 3%, transparent);
-  --surface-pressed: color-mix(in oklab, var(--surface-white) 6%, transparent);
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-black) 3%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 6%,
+    transparent
+  );
 
-  --surface-mix-amount: 4%;
-  --surface-mix-color: var(--surface-black);
+  --cladd-surface-mix-amount: 4%;
+  --cladd-surface-mix-color: var(--cladd-surface-black);
 
-  --shadow-surface-cut-outline:
+  --shadow-cladd-cut-outline:
     0.5px 0.5px 0px 0px
-      color-mix(in oklab, var(--surface-black) 10%, transparent) inset,
-    0px 0px 0px 0.5px color-mix(in oklab, var(--surface-black) 5%, transparent)
-      inset;
-  --shadow-surface-outline-fill:
-    0px 0px 0px 0.5px color-mix(in oklab, var(--surface-black) 20%, transparent)
-      inset,
-    1px 1px 0px 0px color-mix(in oklab, var(--surface-white) 30%, transparent)
-      inset;
+      color-mix(in oklab, var(--cladd-surface-black) 10%, transparent) inset,
+    0px 0px 0px 0.5px
+      color-mix(in oklab, var(--cladd-surface-black) 5%, transparent) inset;
+  --shadow-cladd-outline-fill:
+    0px 0px 0px 0.5px
+      color-mix(in oklab, var(--cladd-surface-black) 20%, transparent) inset,
+    1px 1px 0px 0px
+      color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
   &,
-  [class*="surface-level-"] {
-    --shadow-surface-outline:
-      0px 0px 0px 1px var(--color-surface-outline) inset,
+  [data-level] {
+    --shadow-cladd-outline:
+      0px 0px 0px 1px var(--color-cladd-outline) inset,
       1.5px 1.5px 0px 0px
-        color-mix(in oklab, var(--surface-white) 60%, transparent) inset;
+        color-mix(in oklab, var(--cladd-surface-white) 60%, transparent) inset;
   }
 }
 /* COLORS LIGHT */
-.light [class*="color-"]:not(.color-neutral),
-.dark .light [class*="color-"]:not(.color-neutral),
-.light[class*="color-"]:not(.color-neutral) {
-  --background: oklch(0.91 0.015 100);
-  --backdrop: oklch(0.74 0.018 100);
-  --primary: oklch(
-    from var(--theme) var(--light-primary-lightness) var(--light-primary-chroma)
-      h
+.light [data-color]:not([data-color="neutral"]),
+.dark .light [data-color]:not([data-color="neutral"]),
+.light[data-color]:not([data-color="neutral"]) {
+  --cladd-bg: oklch(0.91 0.015 100);
+  --cladd-backdrop: oklch(0.74 0.018 100);
+  --cladd-primary: oklch(
+    from var(--cladd-theme) var(--cladd-light-primary-lightness)
+      var(--cladd-light-primary-chroma) h
   );
-  --on-primary: oklch(from var(--theme) 0.97 0.04 h);
-  --surface: oklch(from var(--theme) 0.97 0.015 h);
-  --surface-original: oklch(from var(--theme) 0.97 0.015 h);
-  --surface-cut: oklch(from var(--theme) 0.93 0.02 h);
-  --surface-cut-original: oklch(from var(--theme) 0.93 0.02 h);
-  --on-surface: oklch(from var(--theme) 0.25 0.015 h);
-  --on-surface-dark: oklch(from var(--theme) 0.5 0.025 h);
-  --on-surface-darker: oklch(from var(--theme) 0.65 0.025 h);
-  --on-surface-darkest: oklch(from var(--theme) 0.75 0.025 h);
-  --surface-white: oklch(from var(--theme) 0.98 0.04 h);
-  --surface-black: oklch(from var(--theme) 0.4 0.07 h);
-  --background-outline: oklch(from var(--theme) 0.74 0.03 h);
-  --surface-outline: oklch(from var(--theme) 0.88 0.025 h);
-  --surface-outline-original: oklch(from var(--theme) 0.88 0.025 h);
+  --cladd-on-primary: oklch(from var(--cladd-theme) 0.97 0.04 h);
+  --cladd-surface: oklch(from var(--cladd-theme) 0.97 0.015 h);
+  --cladd-surface-cut: oklch(from var(--cladd-theme) 0.93 0.02 h);
+  --cladd-fg: oklch(from var(--cladd-theme) 0.25 0.015 h);
+  --cladd-fg-soft: oklch(from var(--cladd-theme) 0.5 0.025 h);
+  --cladd-fg-softer: oklch(from var(--cladd-theme) 0.65 0.025 h);
+  --cladd-fg-softest: oklch(from var(--cladd-theme) 0.75 0.025 h);
+  --cladd-surface-white: oklch(from var(--cladd-theme) 0.98 0.04 h);
+  --cladd-surface-black: oklch(from var(--cladd-theme) 0.4 0.07 h);
+  --cladd-bg-outline: oklch(from var(--cladd-theme) 0.74 0.03 h);
+  --cladd-outline: oklch(from var(--cladd-theme) 0.88 0.025 h);
 
-  --surface-hover: color-mix(in oklab, var(--surface-black) 6%, transparent);
-  --surface-hover-fill: color-mix(
+  --cladd-surface-hover: color-mix(
+    in oklab,
+    var(--cladd-surface-black) 6%,
+    transparent
+  );
+  --cladd-surface-hover-fill: color-mix(
+    in oklab,
+    var(--cladd-surface-white) 10%,
+    transparent
+  );
+  --cladd-surface-pressed: color-mix(
     in oklab,
-    var(--surface-white) 10%,
+    var(--cladd-surface-white) 6%,
     transparent
   );
-  --surface-pressed: color-mix(in oklab, var(--surface-white) 6%, transparent);
 
-  --surface-mix-amount: 5%;
-  --surface-mix-color: var(--surface-black);
+  --cladd-surface-mix-amount: 5%;
+  --cladd-surface-mix-color: var(--cladd-surface-black);
 
-  --shadow-surface-cut-outline:
+  --shadow-cladd-cut-outline:
     0.5px 0.5px 0px 0px
-      color-mix(in oklab, var(--surface-black) 10%, transparent) inset,
-    0px 0px 0px 0.5px color-mix(in oklab, var(--surface-black) 5%, transparent)
-      inset;
+      color-mix(in oklab, var(--cladd-surface-black) 10%, transparent) inset,
+    0px 0px 0px 0.5px
+      color-mix(in oklab, var(--cladd-surface-black) 5%, transparent) inset;
 
-  --shadow-surface-outline-fill:
-    0px 0px 0px 1px color-mix(in oklab, var(--surface-black) 40%, transparent)
-      inset,
+  --shadow-cladd-outline-fill:
+    0px 0px 0px 1px
+      color-mix(in oklab, var(--cladd-surface-black) 40%, transparent) inset,
     1px 1px 0px 0.25px
-      color-mix(in oklab, var(--surface-white) 30%, transparent) inset;
+      color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
 
   &,
-  [class*="surface-level-"] {
-    --shadow-surface-outline:
-      0px 0px 0px 1px var(--color-surface-outline) inset,
+  [data-level] {
+    --shadow-cladd-outline:
+      0px 0px 0px 1px var(--color-cladd-outline) inset,
       1.5px 1.5px 0px 0px
-        color-mix(in oklab, var(--surface-white) 80%, transparent) inset;
+        color-mix(in oklab, var(--cladd-surface-white) 80%, transparent) inset;
   }
 }
 
 /* COMMON */
 .light,
 .dark,
-[class*="color-"] {
-  --color-background: var(--background);
-  --color-primary: var(--primary);
-  --color-on-primary: var(--on-primary);
-  --color-surface-white: var(--surface-white);
-  --color-surface-black: var(--surface-black);
-  --color-surface-hover: var(--surface-hover);
-  --color-surface-hover-fill: var(--surface-hover-fill);
-  --color-surface-pressed: var(--surface-pressed);
-  --color-background-outline: var(--background-outline);
+[data-color] {
+  --color-cladd-bg: var(--cladd-bg);
+  --color-cladd-primary: var(--cladd-primary);
+  --color-cladd-on-primary: var(--cladd-on-primary);
+  --color-cladd-surface-white: var(--cladd-surface-white);
+  --color-cladd-surface-black: var(--cladd-surface-black);
+  --color-cladd-surface-hover: var(--cladd-surface-hover);
+  --color-cladd-surface-hover-fill: var(--cladd-surface-hover-fill);
+  --color-cladd-surface-pressed: var(--cladd-surface-pressed);
+  --color-background-outline: var(--cladd-bg-outline);
 }
 
 /* LEVELS */
-[class*="surface-level-"],
-[class*="color-"] {
-  --surface-leveled: color-mix(
+[data-level],
+[data-color] {
+  --cladd-surface-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
-    var(--surface-original) 100%
+    var(--cladd-surface-mix-color)
+      calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0)),
+    var(--cladd-surface) 100%
   );
-  --surface-prev-leveled: color-mix(
+  --cladd-surface-prev-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) - 1)),
-    var(--surface-original) 100%
+    var(--cladd-surface-mix-color)
+      calc(
+        var(--cladd-surface-mix-amount) *
+          calc(var(--cladd-surface-multiplier, 0) - 1)
+      ),
+    var(--cladd-surface) 100%
   );
-  --surface-minus-leveled: color-mix(
+  --cladd-surface-minus-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) - 0.5)),
-    var(--surface-original) 100%
+    var(--cladd-surface-mix-color)
+      calc(
+        var(--cladd-surface-mix-amount) *
+          calc(var(--cladd-surface-multiplier, 0) - 0.5)
+      ),
+    var(--cladd-surface) 100%
   );
-  --surface-plus-leveled: color-mix(
+  --cladd-surface-plus-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) + 0.5)),
-    var(--surface-original) 100%
+    var(--cladd-surface-mix-color)
+      calc(
+        var(--cladd-surface-mix-amount) *
+          calc(var(--cladd-surface-multiplier, 0) + 0.5)
+      ),
+    var(--cladd-surface) 100%
   );
-  --surface-next-leveled: color-mix(
+  --cladd-surface-next-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * calc(var(--surface-multiplier, 0) + 1)),
-    var(--surface-original) 100%
+    var(--cladd-surface-mix-color)
+      calc(
+        var(--cladd-surface-mix-amount) *
+          calc(var(--cladd-surface-multiplier, 0) + 1)
+      ),
+    var(--cladd-surface) 100%
   );
-  --surface-cut-leveled: color-mix(
+  --cladd-surface-cut-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
-    var(--surface-cut-original) var(--surface-original-mix, 100%)
+    var(--cladd-surface-mix-color)
+      calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0)),
+    var(--cladd-surface-cut) var(--cladd-surface-original-mix, 100%)
   );
 
-  --on-surface-leveled: var(--on-surface);
-  --on-surface-dark-leveled: color-mix(
+  --cladd-fg-leveled: var(--cladd-fg);
+  --cladd-fg-soft-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
-    var(--on-surface-dark) var(--surface-original-mix, 100%)
+    var(--cladd-surface-mix-color)
+      calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0)),
+    var(--cladd-fg-soft) var(--cladd-surface-original-mix, 100%)
   );
-  --on-surface-darker-leveled: color-mix(
+  --cladd-fg-softer-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
-    var(--on-surface-darker) var(--surface-original-mix, 100%)
+    var(--cladd-surface-mix-color)
+      calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0)),
+    var(--cladd-fg-softer) var(--cladd-surface-original-mix, 100%)
   );
-  --on-surface-darkest-leveled: color-mix(
+  --cladd-fg-softest-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
-    var(--on-surface-darkest) var(--surface-original-mix, 100%)
+    var(--cladd-surface-mix-color)
+      calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0)),
+    var(--cladd-fg-softest) var(--cladd-surface-original-mix, 100%)
   );
-  --surface-outline-leveled: color-mix(
+  --cladd-outline-leveled: color-mix(
     in oklab,
-    var(--surface-mix-color)
-      calc(var(--surface-mix-amount) * var(--surface-multiplier, 0)),
-    var(--surface-outline-original)
+    var(--cladd-surface-mix-color)
+      calc(var(--cladd-surface-mix-amount) * var(--cladd-surface-multiplier, 0)),
+    var(--cladd-outline)
   );
 
-  --color-surface: var(--surface-leveled);
-  --color-surface-prev: var(--surface-prev-leveled);
-  --color-surface-minus: var(--surface-minus-leveled);
-  --color-surface-plus: var(--surface-plus-leveled);
-  --color-surface-next: var(--surface-next-leveled);
-  --color-surface-cut: var(--surface-cut-leveled);
-  --color-surface-outline: var(--surface-outline-leveled);
-  --color-on-surface: var(--on-surface-leveled);
-  --color-on-surface-dark: var(--on-surface-dark-leveled);
-  --color-on-surface-darker: var(--on-surface-darker-leveled);
-  --color-on-surface-darkest: var(--on-surface-darkest-leveled);
-  --color-surface-highlight: color-mix(
+  --color-cladd-surface: var(--cladd-surface-leveled);
+  --color-cladd-surface-prev: var(--cladd-surface-prev-leveled);
+  --color-cladd-surface-minus: var(--cladd-surface-minus-leveled);
+  --color-cladd-surface-plus: var(--cladd-surface-plus-leveled);
+  --color-cladd-surface-next: var(--cladd-surface-next-leveled);
+  --color-cladd-surface-cut: var(--cladd-surface-cut-leveled);
+  --color-cladd-outline: var(--cladd-outline-leveled);
+  --color-cladd-fg: var(--cladd-fg-leveled);
+  --color-cladd-fg-soft: var(--cladd-fg-soft-leveled);
+  --color-cladd-fg-softer: var(--cladd-fg-softer-leveled);
+  --color-cladd-fg-softest: var(--cladd-fg-softest-leveled);
+  --color-cladd-surface-highlight: color-mix(
     in oklab,
-    var(--color-surface-white) var(--highlight-white-mix, 3%),
-    var(--color-surface) var(--highlight-original-mix, 100%)
+    var(--color-cladd-surface-white) var(--highlight-white-mix, 3%),
+    var(--color-cladd-surface) var(--highlight-original-mix, 100%)
   );
 }
-.surface-level-1,
-.surface-level-1[class*="color-"] {
-  --surface-multiplier: 0;
+[data-level="1"],
+[data-level="1"][data-color] {
+  --cladd-surface-multiplier: 0;
 }
-.surface-level-2,
-.surface-level-2[class*="color-"] {
-  --surface-multiplier: 1;
+[data-level="2"],
+[data-level="2"][data-color] {
+  --cladd-surface-multiplier: 1;
 }
-.surface-level-3,
-.surface-level-3[class*="color-"] {
-  --surface-multiplier: 2;
+[data-level="3"],
+[data-level="3"][data-color] {
+  --cladd-surface-multiplier: 2;
 }
-.surface-level-4,
-.surface-level-4[class*="color-"] {
-  --surface-multiplier: 3;
+[data-level="4"],
+[data-level="4"][data-color] {
+  --cladd-surface-multiplier: 3;
 }
-.surface-level-5,
-.surface-level-5[class*="color-"] {
-  --surface-multiplier: 4;
+[data-level="5"],
+[data-level="5"][data-color] {
+  --cladd-surface-multiplier: 4;
 }