@oscarpalmer/oui 0.17.0 → 0.19.0

package/dist/css/badge.css

@@ -1,8 +1,5 @@
 /*! https://github.com/oscarpalmer/oui */
 
-.oui {
-  /* Colors*/
-}
 :where(.oui-pill, .oui-tag) {
   --oui-shadow-mixed: color-mix(
   	in oklab,
@@ -25,45 +22,48 @@
   border-radius: 0.25em;
   padding: 0.5em 0.75em;
 }
-:where(.oui-pill-small, .oui-tag-small) {
+:where(.oui-pill--small, .oui-tag--small) {
   font-size: 0.875em;
 }
-:where(.oui-pill-tiny, .oui-tag-tiny) {
+:where(.oui-pill--tiny, .oui-tag--tiny) {
   color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
   font-size: 0.75em;
 }
-:where(.oui-pill-tiny) {
+:where(.oui-pill--tiny) {
   padding: 0.25em 0.75em;
 }
-:where(.oui-tag-tiny) {
+:where(.oui-tag--tiny) {
   padding: 0.25em 0.5em;
 }
-:where(.oui-pill-blue, .oui-tag-blue) {
+.oui {
+  /* Colors*/
+}
+:where(.oui-pill--blue, .oui-tag--blue) {
   --oui-background: var(--oui-blue-0);
   --oui-foreground: var(--oui-blue-8);
   --oui-shadow: var(--oui-blue-6);
 }
-:where(.oui-pill-green, .oui-tag-green) {
+:where(.oui-pill--green, .oui-tag--green) {
   --oui-background: var(--oui-green-0);
   --oui-foreground: var(--oui-green-8);
   --oui-shadow: var(--oui-green-6);
 }
-:where(.oui-pill-orange, .oui-tag-orange) {
+:where(.oui-pill--orange, .oui-tag--orange) {
   --oui-background: var(--oui-orange-0);
   --oui-foreground: var(--oui-orange-8);
   --oui-shadow: var(--oui-orange-6);
 }
-:where(.oui-pill-purple, .oui-tag-purple) {
+:where(.oui-pill--purple, .oui-tag--purple) {
   --oui-background: var(--oui-purple-0);
   --oui-foreground: var(--oui-purple-8);
   --oui-shadow: var(--oui-purple-6);
 }
-:where(.oui-pill-red, .oui-tag-red) {
+:where(.oui-pill--red, .oui-tag--red) {
   --oui-background: var(--oui-red-0);
   --oui-foreground: var(--oui-red-8);
   --oui-shadow: var(--oui-red-6);
 }
-:where(.oui-pill-yellow, .oui-tag-yellow) {
+:where(.oui-pill--yellow, .oui-tag--yellow) {
   --oui-background: var(--oui-yellow-0);
   --oui-foreground: var(--oui-yellow-8);
   --oui-shadow: var(--oui-yellow-6);

package/dist/css/button.css

@@ -25,46 +25,46 @@
   line-height: 1.25;
   transition: 0.125s ease-in-out;
 }
-:where(.oui-button-blue) {
+:where(.oui-button--blue) {
   --oui-background-value: var(--oui-blue-2);
   --oui-foreground-value: var(--oui-blue-8);
   --oui-outline-value: var(--oui-blue-6);
 }
-:where(.oui-button-green) {
+:where(.oui-button--green) {
   --oui-background-value: var(--oui-green-2);
   --oui-foreground-value: var(--oui-green-8);
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-button-orange) {
+:where(.oui-button--orange) {
   --oui-background-value: var(--oui-orange-2);
   --oui-foreground-value: var(--oui-orange-8);
   --oui-outline-value: var(--oui-orange-6);
 }
-:where(.oui-button-purple) {
+:where(.oui-button--purple) {
   --oui-background-value: var(--oui-purple-2);
   --oui-foreground-value: var(--oui-purple-8);
   --oui-outline-value: var(--oui-purple-6);
 }
-:where(.oui-button-red) {
+:where(.oui-button--red) {
   --oui-background-value: var(--oui-red-2);
   --oui-foreground-value: var(--oui-red-8);
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-button-yellow) {
+:where(.oui-button--yellow) {
   --oui-background-value: var(--oui-yellow-2);
   --oui-foreground-value: var(--oui-yellow-8);
   --oui-outline-value: var(--oui-yellow-6);
 }
-:where(.oui-button-rounded) {
+:where(.oui-button--rounded) {
   padding: 0.5em 1em;
   flex-wrap: nowrap;
   border-radius: 5em;
   white-space: nowrap;
 }
-:where(.oui-button-small) {
+:where(.oui-button--small) {
   font-size: 0.875em;
 }
-:where(.oui-button-tiny) {
+:where(.oui-button--tiny) {
   --oui-foreground-percentage: 12.5%;
   font-size: 0.75em;
 }

package/dist/css/color.css

@@ -2,105 +2,105 @@
 
 :root {
   --oui-absolute: light-dark(white, black);
-  --oui-blue-0: light-dark(oklch(0.99 0.01 260), oklch(0.2 0.08 250));
-  --oui-blue-1: light-dark(oklch(0.98 0.02 259), oklch(0.25 0.09 251));
-  --oui-blue-2: light-dark(oklch(0.95 0.03 258), oklch(0.32 0.1 252));
-  --oui-blue-3: light-dark(oklch(0.90 0.04 257), oklch(0.40 0.09 253));
-  --oui-blue-4: light-dark(oklch(0.80 0.06 256), oklch(0.5 0.08 254));
-  --oui-blue-5: light-dark(oklch(0.70 0.08 255), oklch(0.6 0.07 255));
-  --oui-blue-6: light-dark(oklch(0.60 0.1 254), oklch(0.7 0.06 256));
-  --oui-blue-7: light-dark(oklch(0.50 0.12 253), oklch(0.8 0.05 257));
-  --oui-blue-8: light-dark(oklch(0.42 0.11 252), oklch(0.85 0.04 258));
-  --oui-blue-9: light-dark(oklch(0.35 0.1 251), oklch(0.9 0.03 259));
-  --oui-blue-10: light-dark(oklch(0.3 0.09 250), oklch(0.95 0.02 260));
-  --oui-green-0: light-dark(oklch(0.99 0.01 150), oklch(0.2 0.08 140));
-  --oui-green-1: light-dark(oklch(0.98 0.02 149), oklch(0.25 0.09 141));
-  --oui-green-2: light-dark(oklch(0.95 0.03 148), oklch(0.32 0.1 142));
-  --oui-green-3: light-dark(oklch(0.90 0.04 147), oklch(0.4 0.09 143));
-  --oui-green-4: light-dark(oklch(0.80 0.06 146), oklch(0.5 0.08 144));
-  --oui-green-5: light-dark(oklch(0.70 0.08 145), oklch(0.6 0.07 145));
-  --oui-green-6: light-dark(oklch(0.60 0.1 144), oklch(0.7 0.06 146));
-  --oui-green-7: light-dark(oklch(0.50 0.12 143), oklch(0.8 0.05 147));
-  --oui-green-8: light-dark(oklch(0.42 0.11 142), oklch(0.85 0.04 148));
-  --oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
-  --oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
-  --oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
-  --oui-orange-1: light-dark(oklch(0.985 0.035 59), oklch(0.25 0.09 51));
-  --oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
-  --oui-orange-3: light-dark(oklch(0.93 0.07 57), oklch(0.4 0.09 53));
-  --oui-orange-4: light-dark(oklch(0.87 0.1 56), oklch(0.5 0.08 54));
-  --oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
-  --oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
-  --oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
-  --oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
-  --oui-orange-9: light-dark(oklch(0.375 0.11 51), oklch(0.9 0.03 59));
-  --oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
-  --oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
-  --oui-purple-1: light-dark(oklch(0.98 0.035 299), oklch(0.25 0.09 291));
-  --oui-purple-2: light-dark(oklch(0.95 0.05 298), oklch(0.32 0.1 292));
-  --oui-purple-3: light-dark(oklch(0.90 0.07 297), oklch(0.4 0.09 293));
-  --oui-purple-4: light-dark(oklch(0.80 0.1 296), oklch(0.5 0.08 294));
-  --oui-purple-5: light-dark(oklch(0.70 0.11 295), oklch(0.6 0.07 295));
-  --oui-purple-6: light-dark(oklch(0.60 0.12 294), oklch(0.7 0.06 296));
-  --oui-purple-7: light-dark(oklch(0.50 0.14 293), oklch(0.8 0.05 297));
-  --oui-purple-8: light-dark(oklch(0.42 0.12 292), oklch(0.85 0.04 298));
-  --oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
-  --oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
-  --oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
-  --oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
-  --oui-red-2: light-dark(oklch(0.97 0.05 23), oklch(0.32 0.1 23));
-  --oui-red-3: light-dark(oklch(0.93 0.07 22), oklch(0.4 0.09 22));
-  --oui-red-4: light-dark(oklch(0.87 0.1 21), oklch(0.5 0.08 21));
-  --oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
-  --oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
-  --oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
-  --oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
-  --oui-red-9: light-dark(oklch(0.375 0.11 16), oklch(0.9 0.03 16));
-  --oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
-  --oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
-  --oui-yellow-1: light-dark(oklch(0.985 0.035 99), oklch(0.25 0.09 91));
-  --oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
-  --oui-yellow-3: light-dark(oklch(0.93 0.07 97), oklch(0.4 0.09 93));
-  --oui-yellow-4: light-dark(oklch(0.87 0.1 96), oklch(0.5 0.08 94));
-  --oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
-  --oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
-  --oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
-  --oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
-  --oui-yellow-9: light-dark(oklch(0.375 0.11 91), oklch(0.9 0.03 99));
-  --oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
-  --oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
-  --oui-gray-1: light-dark(oklch(0.98 0 0), oklch(0.26 0 0));
-  --oui-gray-2: light-dark(oklch(0.95 0 0), oklch(0.32 0 0));
-  --oui-gray-3: light-dark(oklch(0.90 0 0), oklch(0.4 0 0));
-  --oui-gray-4: light-dark(oklch(0.80 0 0), oklch(0.5 0 0));
-  --oui-gray-5: light-dark(oklch(0.70 0 0), oklch(0.6 0 0));
-  --oui-gray-6: light-dark(oklch(0.60 0 0), oklch(0.7 0 0));
-  --oui-gray-7: light-dark(oklch(0.50 0 0), oklch(0.8 0 0));
-  --oui-gray-8: light-dark(oklch(0.42 0 0), oklch(0.85 0 0));
-  --oui-gray-9: light-dark(oklch(0.35 0 0), oklch(0.9 0 0));
-  --oui-gray-10: light-dark(oklch(0.3 0 0), oklch(0.95 0 0));
-  --oui-slate-0: light-dark(oklch(0.99 0.0025 255), oklch(0.22 0.005 255));
-  --oui-slate-1: light-dark(oklch(0.98 0.005 255), oklch(0.26 0.0075 255));
-  --oui-slate-2: light-dark(oklch(0.95 0.0075 255), oklch(0.32 0.01 255));
-  --oui-slate-3: light-dark(oklch(0.90 0.01 255), oklch(0.4 0.0125 255));
-  --oui-slate-4: light-dark(oklch(0.80 0.015 255), oklch(0.5 0.015 255));
-  --oui-slate-5: light-dark(oklch(0.70 0.02 255), oklch(0.6 0.02 255));
-  --oui-slate-6: light-dark(oklch(0.60 0.015 255), oklch(0.7 0.015 255));
-  --oui-slate-7: light-dark(oklch(0.50 0.0125 255), oklch(0.8 0.0125 255));
-  --oui-slate-8: light-dark(oklch(0.42 0.01 255), oklch(0.85 0.01 255));
-  --oui-slate-9: light-dark(oklch(0.35 0.0075 255), oklch(0.9 0.0075 255));
-  --oui-slate-10: light-dark(oklch(0.3 0.005 255), oklch(0.95 0.005 255));
-  --oui-stone-0: light-dark(oklch(0.99 0.0033 95), oklch(0.22 0.005 95));
-  --oui-stone-1: light-dark(oklch(0.98 0.0067 95), oklch(0.26 0.0075 95));
-  --oui-stone-2: light-dark(oklch(0.95 0.01 95), oklch(0.32 0.01 95));
-  --oui-stone-3: light-dark(oklch(0.90 0.0125 95), oklch(0.4 0.0125 95));
-  --oui-stone-4: light-dark(oklch(0.80 0.015 95), oklch(0.5 0.015 95));
-  --oui-stone-5: light-dark(oklch(0.70 0.02 95), oklch(0.6 0.02 95));
-  --oui-stone-6: light-dark(oklch(0.60 0.015 95), oklch(0.7 0.015 95));
-  --oui-stone-7: light-dark(oklch(0.50 0.0125 95), oklch(0.8 0.0125 95));
-  --oui-stone-8: light-dark(oklch(0.42 0.01 95), oklch(0.85 0.01 95));
-  --oui-stone-9: light-dark(oklch(0.35 0.0075 95), oklch(0.9 0.0075 95));
-  --oui-stone-10: light-dark(oklch(0.3 0.005 95), oklch(0.95 0.005 95));
+  --oui-blue-0: light-dark(oklch(99% 0.01 260deg), oklch(20% 0.08 250deg));
+  --oui-blue-1: light-dark(oklch(98% 0.02 259deg), oklch(25% 0.09 251deg));
+  --oui-blue-2: light-dark(oklch(95% 0.03 258deg), oklch(32% 0.1 252deg));
+  --oui-blue-3: light-dark(oklch(90% 0.04 257deg), oklch(40% 0.09 253deg));
+  --oui-blue-4: light-dark(oklch(80% 0.06 256deg), oklch(50% 0.08 254deg));
+  --oui-blue-5: light-dark(oklch(70% 0.08 255deg), oklch(60% 0.07 255deg));
+  --oui-blue-6: light-dark(oklch(60% 0.1 254deg), oklch(70% 0.06 256deg));
+  --oui-blue-7: light-dark(oklch(50% 0.12 253deg), oklch(80% 0.05 257deg));
+  --oui-blue-8: light-dark(oklch(42% 0.11 252deg), oklch(85% 0.04 258deg));
+  --oui-blue-9: light-dark(oklch(35% 0.1 251deg), oklch(90% 0.03 259deg));
+  --oui-blue-10: light-dark(oklch(30% 0.09 250deg), oklch(95% 0.02 260deg));
+  --oui-green-0: light-dark(oklch(99% 0.01 150deg), oklch(20% 0.08 140deg));
+  --oui-green-1: light-dark(oklch(98% 0.02 149deg), oklch(25% 0.09 141deg));
+  --oui-green-2: light-dark(oklch(95% 0.03 148deg), oklch(32% 0.1 142deg));
+  --oui-green-3: light-dark(oklch(90% 0.04 147deg), oklch(40% 0.09 143deg));
+  --oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.08 144deg));
+  --oui-green-5: light-dark(oklch(70% 0.08 145deg), oklch(60% 0.07 145deg));
+  --oui-green-6: light-dark(oklch(60% 0.1 144deg), oklch(70% 0.06 146deg));
+  --oui-green-7: light-dark(oklch(50% 0.12 143deg), oklch(80% 0.05 147deg));
+  --oui-green-8: light-dark(oklch(42% 0.11 142deg), oklch(85% 0.04 148deg));
+  --oui-green-9: light-dark(oklch(35% 0.1 141deg), oklch(90% 0.03 149deg));
+  --oui-green-10: light-dark(oklch(30% 0.09 140deg), oklch(95% 0.02 150deg));
+  --oui-orange-0: light-dark(oklch(99% 0.02 60deg), oklch(20% 0.08 50deg));
+  --oui-orange-1: light-dark(oklch(98.5% 0.035 59deg), oklch(25% 0.09 51deg));
+  --oui-orange-2: light-dark(oklch(97% 0.05 58deg), oklch(32% 0.1 52deg));
+  --oui-orange-3: light-dark(oklch(93% 0.07 57deg), oklch(40% 0.09 53deg));
+  --oui-orange-4: light-dark(oklch(87% 0.1 56deg), oklch(50% 0.08 54deg));
+  --oui-orange-5: light-dark(oklch(76% 0.11 55deg), oklch(60% 0.07 55deg));
+  --oui-orange-6: light-dark(oklch(65% 0.12 54deg), oklch(70% 0.06 56deg));
+  --oui-orange-7: light-dark(oklch(55% 0.14 53deg), oklch(80% 0.05 57deg));
+  --oui-orange-8: light-dark(oklch(45% 0.12 52deg), oklch(85% 0.04 58deg));
+  --oui-orange-9: light-dark(oklch(37.5% 0.11 51deg), oklch(90% 0.03 59deg));
+  --oui-orange-10: light-dark(oklch(30% 0.09 50deg), oklch(95% 0.02 60deg));
+  --oui-purple-0: light-dark(oklch(99% 0.02 300deg), oklch(20% 0.08 290deg));
+  --oui-purple-1: light-dark(oklch(98% 0.035 299deg), oklch(25% 0.09 291deg));
+  --oui-purple-2: light-dark(oklch(95% 0.05 298deg), oklch(32% 0.1 292deg));
+  --oui-purple-3: light-dark(oklch(90% 0.07 297deg), oklch(40% 0.09 293deg));
+  --oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.08 294deg));
+  --oui-purple-5: light-dark(oklch(70% 0.11 295deg), oklch(60% 0.07 295deg));
+  --oui-purple-6: light-dark(oklch(60% 0.12 294deg), oklch(70% 0.06 296deg));
+  --oui-purple-7: light-dark(oklch(50% 0.14 293deg), oklch(80% 0.05 297deg));
+  --oui-purple-8: light-dark(oklch(42% 0.12 292deg), oklch(85% 0.04 298deg));
+  --oui-purple-9: light-dark(oklch(35% 0.11 291deg), oklch(90% 0.03 299deg));
+  --oui-purple-10: light-dark(oklch(30% 0.09 290deg), oklch(95% 0.02 300deg));
+  --oui-red-0: light-dark(oklch(99% 0.024 25deg), oklch(20% 0.08 25deg));
+  --oui-red-1: light-dark(oklch(98.5% 0.032 24deg), oklch(25% 0.09 24deg));
+  --oui-red-2: light-dark(oklch(97% 0.05 23deg), oklch(32% 0.1 23deg));
+  --oui-red-3: light-dark(oklch(93% 0.07 22deg), oklch(40% 0.09 22deg));
+  --oui-red-4: light-dark(oklch(87% 0.1 21deg), oklch(50% 0.08 21deg));
+  --oui-red-5: light-dark(oklch(76% 0.11 20deg), oklch(60% 0.07 20deg));
+  --oui-red-6: light-dark(oklch(65% 0.12 19deg), oklch(70% 0.06 19deg));
+  --oui-red-7: light-dark(oklch(55% 0.14 18deg), oklch(80% 0.05 18deg));
+  --oui-red-8: light-dark(oklch(45% 0.12 17deg), oklch(85% 0.04 17deg));
+  --oui-red-9: light-dark(oklch(37.5% 0.11 16deg), oklch(90% 0.03 16deg));
+  --oui-red-10: light-dark(oklch(30% 0.09 15deg), oklch(95% 0.02 15deg));
+  --oui-yellow-0: light-dark(oklch(99% 0.02 100deg), oklch(20% 0.08 90deg));
+  --oui-yellow-1: light-dark(oklch(98.5% 0.035 99deg), oklch(25% 0.09 91deg));
+  --oui-yellow-2: light-dark(oklch(97% 0.05 98deg), oklch(32% 0.1 92deg));
+  --oui-yellow-3: light-dark(oklch(93% 0.07 97deg), oklch(40% 0.09 93deg));
+  --oui-yellow-4: light-dark(oklch(87% 0.1 96deg), oklch(50% 0.08 94deg));
+  --oui-yellow-5: light-dark(oklch(78% 0.11 95deg), oklch(60% 0.07 95deg));
+  --oui-yellow-6: light-dark(oklch(65% 0.12 94deg), oklch(70% 0.06 96deg));
+  --oui-yellow-7: light-dark(oklch(55% 0.14 93deg), oklch(80% 0.05 97deg));
+  --oui-yellow-8: light-dark(oklch(45% 0.12 92deg), oklch(85% 0.04 98deg));
+  --oui-yellow-9: light-dark(oklch(37.5% 0.11 91deg), oklch(90% 0.03 99deg));
+  --oui-yellow-10: light-dark(oklch(30% 0.09 90deg), oklch(95% 0.02 100deg));
+  --oui-gray-0: light-dark(oklch(98% 0 0deg), oklch(22% 0 0deg));
+  --oui-gray-1: light-dark(oklch(98% 0 0deg), oklch(26% 0 0deg));
+  --oui-gray-2: light-dark(oklch(95% 0 0deg), oklch(32% 0 0deg));
+  --oui-gray-3: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
+  --oui-gray-4: light-dark(oklch(80% 0 0deg), oklch(50% 0 0deg));
+  --oui-gray-5: light-dark(oklch(70% 0 0deg), oklch(60% 0 0deg));
+  --oui-gray-6: light-dark(oklch(60% 0 0deg), oklch(70% 0 0deg));
+  --oui-gray-7: light-dark(oklch(50% 0 0deg), oklch(80% 0 0deg));
+  --oui-gray-8: light-dark(oklch(42% 0 0deg), oklch(85% 0 0deg));
+  --oui-gray-9: light-dark(oklch(35% 0 0deg), oklch(90% 0 0deg));
+  --oui-gray-10: light-dark(oklch(30% 0 0deg), oklch(95% 0 0deg));
+  --oui-slate-0: light-dark(oklch(99% 0.0025 255deg), oklch(22% 0.005 255deg));
+  --oui-slate-1: light-dark(oklch(98% 0.005 255deg), oklch(26% 0.0075 255deg));
+  --oui-slate-2: light-dark(oklch(95% 0.0075 255deg), oklch(32% 0.01 255deg));
+  --oui-slate-3: light-dark(oklch(90% 0.01 255deg), oklch(40% 0.0125 255deg));
+  --oui-slate-4: light-dark(oklch(80% 0.015 255deg), oklch(50% 0.015 255deg));
+  --oui-slate-5: light-dark(oklch(70% 0.02 255deg), oklch(60% 0.02 255deg));
+  --oui-slate-6: light-dark(oklch(60% 0.015 255deg), oklch(70% 0.015 255deg));
+  --oui-slate-7: light-dark(oklch(50% 0.0125 255deg), oklch(80% 0.0125 255deg));
+  --oui-slate-8: light-dark(oklch(42% 0.01 255deg), oklch(85% 0.01 255deg));
+  --oui-slate-9: light-dark(oklch(35% 0.0075 255deg), oklch(90% 0.0075 255deg));
+  --oui-slate-10: light-dark(oklch(30% 0.005 255deg), oklch(95% 0.005 255deg));
+  --oui-stone-0: light-dark(oklch(99% 0.0033 95deg), oklch(22% 0.005 95deg));
+  --oui-stone-1: light-dark(oklch(98% 0.0067 95deg), oklch(26% 0.0075 95deg));
+  --oui-stone-2: light-dark(oklch(95% 0.01 95deg), oklch(32% 0.01 95deg));
+  --oui-stone-3: light-dark(oklch(90% 0.0125 95deg), oklch(40% 0.0125 95deg));
+  --oui-stone-4: light-dark(oklch(80% 0.015 95deg), oklch(50% 0.015 95deg));
+  --oui-stone-5: light-dark(oklch(70% 0.02 95deg), oklch(60% 0.02 95deg));
+  --oui-stone-6: light-dark(oklch(60% 0.015 95deg), oklch(70% 0.015 95deg));
+  --oui-stone-7: light-dark(oklch(50% 0.0125 95deg), oklch(80% 0.0125 95deg));
+  --oui-stone-8: light-dark(oklch(42% 0.01 95deg), oklch(85% 0.01 95deg));
+  --oui-stone-9: light-dark(oklch(35% 0.0075 95deg), oklch(90% 0.0075 95deg));
+  --oui-stone-10: light-dark(oklch(30% 0.005 95deg), oklch(95% 0.005 95deg));
 }
 
 

package/dist/css/content.css

@@ -22,7 +22,7 @@
   width: 1em;
   height: 1em;
   margin: 0 0.5em 0 0;
-  background-color: currentColor;
+  background-color: currentcolor;
   -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
   mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
   -webkit-mask-size: contain;
@@ -73,10 +73,9 @@
   background-image: none;
   border: 1px solid var(--oui-gray-3);
   border-radius: 0.375em;
-  box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
 }
 :where(.oui-meter)::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -86,7 +85,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -96,7 +95,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -106,7 +105,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -121,7 +120,7 @@
   background: none;
 }
 :where(.oui-meter)::-webkit-meter-even-less-good-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -131,7 +130,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter)::-webkit-meter-optimum-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -141,7 +140,7 @@
   border-radius: 0.25em;
 }
 :where(.oui-meter)::-webkit-meter-suboptimum-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -162,10 +161,9 @@
   background-image: none;
   border: 1px solid var(--oui-gray-3);
   border-radius: 0.375em;
-  box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
 }
 :where(.oui-progress)::-moz-progress-bar {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -180,7 +178,7 @@
   background: none;
 }
 :where(.oui-progress)::-webkit-progress-value {
-  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;

package/dist/css/flex.css

@@ -13,16 +13,16 @@
   gap: var(--flow-gap, 1rem);
 }
 
-:where(.flow-large) {
+:where(.flow-large, .flow--large) {
   gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
 }
-:where(.flow-nowrap) {
+:where(.flow-nowrap, .flow--nowrap) {
   flex-wrap: nowrap;
 }
-:where(.flow-small) {
+:where(.flow-small, .flow--small) {
   gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
 }
-:where(.flow-text) {
+:where(.flow-text, .flow--text) {
   gap: var(--flow-gap-text, 1em);
 }
 
@@ -31,122 +31,122 @@
   gap: var(--stack-gap, 1rem);
 }
 
-:where(.stack-large) {
+:where(.stack-large, .stack--large) {
   gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
 }
-:where(.stack-small) {
+:where(.stack-small, .stack--small) {
   gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
 }
-:where(.stack-text) {
+:where(.stack-text, .stack--text) {
   gap: var(--stack-gap-text, 1em);
 }
 
-:where(.flex-reverse[class^=flow i], .flex-reverse[class*=" flow" i]) {
+:where(.flex-reverse[class^=flow i], .flex-reverse[class*=" flow" i], .flex--reverse[class^=flow i], .flex--reverse[class*=" flow" i]) {
   flex-direction: row-reverse;
 }
-:where(.flex-reverse[class^=stack i], .flex-reverse[class*=" stack" i]) {
+:where(.flex-reverse[class^=stack i], .flex-reverse[class*=" stack" i], .flex--reverse[class^=stack i], .flex--reverse[class*=" stack" i]) {
   flex-direction: column-reverse;
 }
 
-:where(.flex-ac-c) {
+:where(.flex-ac-c, .flex-ac--c) {
   align-content: center;
 }
-:where(.flex-ac-fe) {
+:where(.flex-ac-fe, .flex-ac--fe) {
   align-content: flex-end;
 }
-:where(.flex-ac-fs) {
+:where(.flex-ac-fs, .flex-ac--fs) {
   align-content: flex-start;
 }
-:where(.flex-ac-s) {
+:where(.flex-ac-s, .flex-ac--s) {
   align-content: stretch;
 }
 
-:where(.flex-ai-c) {
+:where(.flex-ai-c, .flex-ai--c) {
   align-items: center;
 }
-:where(.flex-ai-fe) {
+:where(.flex-ai-fe, .flex-ai--fe) {
   align-items: flex-end;
 }
-:where(.flex-ai-fs) {
+:where(.flex-ai-fs, .flex-ai--fs) {
   align-items: flex-start;
 }
-:where(.flex-ai-s) {
+:where(.flex-ai-s, .flex-ai--s) {
   align-items: stretch;
 }
 
-:where(.flex-as-c) {
+:where(.flex-as-c, .flex-as--c) {
   align-self: center;
 }
-:where(.flex-as-fe) {
+:where(.flex-as-fe, .flex-as--fe) {
   align-self: flex-end;
 }
-:where(.flex-as-fs) {
+:where(.flex-as-fs, .flex-as--fs) {
   align-self: flex-start;
 }
-:where(.flex-as-s) {
+:where(.flex-as-s, .flex-as--s) {
   align-self: stretch;
 }
 
-:where(.flex-ac-sa) {
+:where(.flex-ac-sa, .flex-ac--sa) {
   align-content: space-around;
 }
 
-:where(.flex-ac-sb) {
+:where(.flex-ac-sb, .flex-ac--sb) {
   align-content: space-between;
 }
 
-:where(.flex-ac-se) {
+:where(.flex-ac-se, .flex-ac--se) {
   align-content: space-evenly;
 }
 
-:where(.flex-jc-c) {
+:where(.flex-jc-c, .flex-jc--c) {
   justify-content: center;
 }
-:where(.flex-jc-fe) {
+:where(.flex-jc-fe, .flex-jc--fe) {
   justify-content: flex-end;
 }
-:where(.flex-jc-fs) {
+:where(.flex-jc-fs, .flex-jc--fs) {
   justify-content: flex-start;
 }
-:where(.flex-jc-s) {
+:where(.flex-jc-s, .flex-jc--s) {
   justify-content: stretch;
 }
 
-:where(.flex-ji-c) {
+:where(.flex-ji-c, .flex-ji--c) {
   justify-items: center;
 }
-:where(.flex-ji-fe) {
+:where(.flex-ji-fe, .flex-ji--fe) {
   justify-items: flex-end;
 }
-:where(.flex-ji-fs) {
+:where(.flex-ji-fs, .flex-ji--fs) {
   justify-items: flex-start;
 }
-:where(.flex-ji-s) {
+:where(.flex-ji-s, .flex-ji--s) {
   justify-items: stretch;
 }
 
-:where(.flex-js-c) {
+:where(.flex-js-c, .flex-js--c) {
   justify-self: center;
 }
-:where(.flex-js-fe) {
+:where(.flex-js-fe, .flex-js--fe) {
   justify-self: flex-end;
 }
-:where(.flex-js-fs) {
+:where(.flex-js-fs, .flex-js--fs) {
   justify-self: flex-start;
 }
-:where(.flex-js-s) {
+:where(.flex-js-s, .flex-js--s) {
   justify-self: stretch;
 }
 
-:where(.flex-jc-sa) {
+:where(.flex-jc-sa, .flex-jc--sa) {
   justify-content: space-around;
 }
 
-:where(.flex-jc-sb) {
+:where(.flex-jc-sb, .flex-jc--sb) {
   justify-content: space-between;
 }
 
-:where(.flex-jc-se) {
+:where(.flex-jc-se, .flex-jc--se) {
   justify-content: space-evenly;
 }