@diskette/palette 0.5.0 → 0.7.0

package/dist/lime-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--lime-1);
-  --color-accent-2: var(--lime-2);
-  --color-accent-3: var(--lime-3);
-  --color-accent-4: var(--lime-4);
-  --color-accent-5: var(--lime-5);
-  --color-accent-6: var(--lime-6);
-  --color-accent-7: var(--lime-7);
-  --color-accent-8: var(--lime-8);
-  --color-accent-9: var(--lime-9);
-  --color-accent-10: var(--lime-10);
-  --color-accent-11: var(--lime-11);
-  --color-accent-12: var(--lime-12);
-
-  --color-accent-a1: var(--lime-a1);
-  --color-accent-a2: var(--lime-a2);
-  --color-accent-a3: var(--lime-a3);
-  --color-accent-a4: var(--lime-a4);
-  --color-accent-a5: var(--lime-a5);
-  --color-accent-a6: var(--lime-a6);
-  --color-accent-a7: var(--lime-a7);
-  --color-accent-a8: var(--lime-a8);
-  --color-accent-a9: var(--lime-a9);
-  --color-accent-a10: var(--lime-a10);
-  --color-accent-a11: var(--lime-a11);
-  --color-accent-a12: var(--lime-a12);
-
-  --color-accent-contrast: var(--lime-contrast);
-  --color-accent-surface: var(--lime-surface);
-  --color-accent-indicator: var(--lime-indicator);
-  --color-accent-track: var(--lime-track);
-}
-
 [data-accent-color='lime'] {
   --accent-1: var(--lime-1);
   --accent-2: var(--lime-2);

package/dist/lime-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-lime-1: var(--lime-1);
   --color-lime-2: var(--lime-2);
   --color-lime-3: var(--lime-3);

package/dist/mauve-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--mauve-1);
-  --color-accent-2: var(--mauve-2);
-  --color-accent-3: var(--mauve-3);
-  --color-accent-4: var(--mauve-4);
-  --color-accent-5: var(--mauve-5);
-  --color-accent-6: var(--mauve-6);
-  --color-accent-7: var(--mauve-7);
-  --color-accent-8: var(--mauve-8);
-  --color-accent-9: var(--mauve-9);
-  --color-accent-10: var(--mauve-10);
-  --color-accent-11: var(--mauve-11);
-  --color-accent-12: var(--mauve-12);
-
-  --color-accent-a1: var(--mauve-a1);
-  --color-accent-a2: var(--mauve-a2);
-  --color-accent-a3: var(--mauve-a3);
-  --color-accent-a4: var(--mauve-a4);
-  --color-accent-a5: var(--mauve-a5);
-  --color-accent-a6: var(--mauve-a6);
-  --color-accent-a7: var(--mauve-a7);
-  --color-accent-a8: var(--mauve-a8);
-  --color-accent-a9: var(--mauve-a9);
-  --color-accent-a10: var(--mauve-a10);
-  --color-accent-a11: var(--mauve-a11);
-  --color-accent-a12: var(--mauve-a12);
-
-  --color-accent-contrast: var(--mauve-contrast);
-  --color-accent-surface: var(--mauve-surface);
-  --color-accent-indicator: var(--mauve-indicator);
-  --color-accent-track: var(--mauve-track);
-}
-
 [data-accent-color='mauve'] {
   --accent-1: var(--mauve-1);
   --accent-2: var(--mauve-2);
@@ -62,4 +29,37 @@
   --accent-surface: var(--mauve-surface);
   --accent-indicator: var(--mauve-indicator);
   --accent-track: var(--mauve-track);
+}
+
+[data-gray-color='mauve'] {
+  --gray-1: var(--mauve-1);
+  --gray-2: var(--mauve-2);
+  --gray-3: var(--mauve-3);
+  --gray-4: var(--mauve-4);
+  --gray-5: var(--mauve-5);
+  --gray-6: var(--mauve-6);
+  --gray-7: var(--mauve-7);
+  --gray-8: var(--mauve-8);
+  --gray-9: var(--mauve-9);
+  --gray-10: var(--mauve-10);
+  --gray-11: var(--mauve-11);
+  --gray-12: var(--mauve-12);
+
+  --gray-a1: var(--mauve-a1);
+  --gray-a2: var(--mauve-a2);
+  --gray-a3: var(--mauve-a3);
+  --gray-a4: var(--mauve-a4);
+  --gray-a5: var(--mauve-a5);
+  --gray-a6: var(--mauve-a6);
+  --gray-a7: var(--mauve-a7);
+  --gray-a8: var(--mauve-a8);
+  --gray-a9: var(--mauve-a9);
+  --gray-a10: var(--mauve-a10);
+  --gray-a11: var(--mauve-a11);
+  --gray-a12: var(--mauve-a12);
+
+  --gray-contrast: var(--mauve-contrast);
+  --gray-surface: var(--mauve-surface);
+  --gray-indicator: var(--mauve-indicator);
+  --gray-track: var(--mauve-track);
 }

package/dist/mauve-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-mauve-1: var(--mauve-1);
   --color-mauve-2: var(--mauve-2);
   --color-mauve-3: var(--mauve-3);

package/dist/mint-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--mint-1);
-  --color-accent-2: var(--mint-2);
-  --color-accent-3: var(--mint-3);
-  --color-accent-4: var(--mint-4);
-  --color-accent-5: var(--mint-5);
-  --color-accent-6: var(--mint-6);
-  --color-accent-7: var(--mint-7);
-  --color-accent-8: var(--mint-8);
-  --color-accent-9: var(--mint-9);
-  --color-accent-10: var(--mint-10);
-  --color-accent-11: var(--mint-11);
-  --color-accent-12: var(--mint-12);
-
-  --color-accent-a1: var(--mint-a1);
-  --color-accent-a2: var(--mint-a2);
-  --color-accent-a3: var(--mint-a3);
-  --color-accent-a4: var(--mint-a4);
-  --color-accent-a5: var(--mint-a5);
-  --color-accent-a6: var(--mint-a6);
-  --color-accent-a7: var(--mint-a7);
-  --color-accent-a8: var(--mint-a8);
-  --color-accent-a9: var(--mint-a9);
-  --color-accent-a10: var(--mint-a10);
-  --color-accent-a11: var(--mint-a11);
-  --color-accent-a12: var(--mint-a12);
-
-  --color-accent-contrast: var(--mint-contrast);
-  --color-accent-surface: var(--mint-surface);
-  --color-accent-indicator: var(--mint-indicator);
-  --color-accent-track: var(--mint-track);
-}
-
 [data-accent-color='mint'] {
   --accent-1: var(--mint-1);
   --accent-2: var(--mint-2);

package/dist/mint-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-mint-1: var(--mint-1);
   --color-mint-2: var(--mint-2);
   --color-mint-3: var(--mint-3);

package/dist/olive-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--olive-1);
-  --color-accent-2: var(--olive-2);
-  --color-accent-3: var(--olive-3);
-  --color-accent-4: var(--olive-4);
-  --color-accent-5: var(--olive-5);
-  --color-accent-6: var(--olive-6);
-  --color-accent-7: var(--olive-7);
-  --color-accent-8: var(--olive-8);
-  --color-accent-9: var(--olive-9);
-  --color-accent-10: var(--olive-10);
-  --color-accent-11: var(--olive-11);
-  --color-accent-12: var(--olive-12);
-
-  --color-accent-a1: var(--olive-a1);
-  --color-accent-a2: var(--olive-a2);
-  --color-accent-a3: var(--olive-a3);
-  --color-accent-a4: var(--olive-a4);
-  --color-accent-a5: var(--olive-a5);
-  --color-accent-a6: var(--olive-a6);
-  --color-accent-a7: var(--olive-a7);
-  --color-accent-a8: var(--olive-a8);
-  --color-accent-a9: var(--olive-a9);
-  --color-accent-a10: var(--olive-a10);
-  --color-accent-a11: var(--olive-a11);
-  --color-accent-a12: var(--olive-a12);
-
-  --color-accent-contrast: var(--olive-contrast);
-  --color-accent-surface: var(--olive-surface);
-  --color-accent-indicator: var(--olive-indicator);
-  --color-accent-track: var(--olive-track);
-}
-
 [data-accent-color='olive'] {
   --accent-1: var(--olive-1);
   --accent-2: var(--olive-2);
@@ -62,4 +29,37 @@
   --accent-surface: var(--olive-surface);
   --accent-indicator: var(--olive-indicator);
   --accent-track: var(--olive-track);
+}
+
+[data-gray-color='olive'] {
+  --gray-1: var(--olive-1);
+  --gray-2: var(--olive-2);
+  --gray-3: var(--olive-3);
+  --gray-4: var(--olive-4);
+  --gray-5: var(--olive-5);
+  --gray-6: var(--olive-6);
+  --gray-7: var(--olive-7);
+  --gray-8: var(--olive-8);
+  --gray-9: var(--olive-9);
+  --gray-10: var(--olive-10);
+  --gray-11: var(--olive-11);
+  --gray-12: var(--olive-12);
+
+  --gray-a1: var(--olive-a1);
+  --gray-a2: var(--olive-a2);
+  --gray-a3: var(--olive-a3);
+  --gray-a4: var(--olive-a4);
+  --gray-a5: var(--olive-a5);
+  --gray-a6: var(--olive-a6);
+  --gray-a7: var(--olive-a7);
+  --gray-a8: var(--olive-a8);
+  --gray-a9: var(--olive-a9);
+  --gray-a10: var(--olive-a10);
+  --gray-a11: var(--olive-a11);
+  --gray-a12: var(--olive-a12);
+
+  --gray-contrast: var(--olive-contrast);
+  --gray-surface: var(--olive-surface);
+  --gray-indicator: var(--olive-indicator);
+  --gray-track: var(--olive-track);
 }

package/dist/olive-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-olive-1: var(--olive-1);
   --color-olive-2: var(--olive-2);
   --color-olive-3: var(--olive-3);

package/dist/orange-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--orange-1);
-  --color-accent-2: var(--orange-2);
-  --color-accent-3: var(--orange-3);
-  --color-accent-4: var(--orange-4);
-  --color-accent-5: var(--orange-5);
-  --color-accent-6: var(--orange-6);
-  --color-accent-7: var(--orange-7);
-  --color-accent-8: var(--orange-8);
-  --color-accent-9: var(--orange-9);
-  --color-accent-10: var(--orange-10);
-  --color-accent-11: var(--orange-11);
-  --color-accent-12: var(--orange-12);
-
-  --color-accent-a1: var(--orange-a1);
-  --color-accent-a2: var(--orange-a2);
-  --color-accent-a3: var(--orange-a3);
-  --color-accent-a4: var(--orange-a4);
-  --color-accent-a5: var(--orange-a5);
-  --color-accent-a6: var(--orange-a6);
-  --color-accent-a7: var(--orange-a7);
-  --color-accent-a8: var(--orange-a8);
-  --color-accent-a9: var(--orange-a9);
-  --color-accent-a10: var(--orange-a10);
-  --color-accent-a11: var(--orange-a11);
-  --color-accent-a12: var(--orange-a12);
-
-  --color-accent-contrast: var(--orange-contrast);
-  --color-accent-surface: var(--orange-surface);
-  --color-accent-indicator: var(--orange-indicator);
-  --color-accent-track: var(--orange-track);
-}
-
 [data-accent-color='orange'] {
   --accent-1: var(--orange-1);
   --accent-2: var(--orange-2);

package/dist/orange-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-orange-1: var(--orange-1);
   --color-orange-2: var(--orange-2);
   --color-orange-3: var(--orange-3);

package/dist/pink-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--pink-1);
-  --color-accent-2: var(--pink-2);
-  --color-accent-3: var(--pink-3);
-  --color-accent-4: var(--pink-4);
-  --color-accent-5: var(--pink-5);
-  --color-accent-6: var(--pink-6);
-  --color-accent-7: var(--pink-7);
-  --color-accent-8: var(--pink-8);
-  --color-accent-9: var(--pink-9);
-  --color-accent-10: var(--pink-10);
-  --color-accent-11: var(--pink-11);
-  --color-accent-12: var(--pink-12);
-
-  --color-accent-a1: var(--pink-a1);
-  --color-accent-a2: var(--pink-a2);
-  --color-accent-a3: var(--pink-a3);
-  --color-accent-a4: var(--pink-a4);
-  --color-accent-a5: var(--pink-a5);
-  --color-accent-a6: var(--pink-a6);
-  --color-accent-a7: var(--pink-a7);
-  --color-accent-a8: var(--pink-a8);
-  --color-accent-a9: var(--pink-a9);
-  --color-accent-a10: var(--pink-a10);
-  --color-accent-a11: var(--pink-a11);
-  --color-accent-a12: var(--pink-a12);
-
-  --color-accent-contrast: var(--pink-contrast);
-  --color-accent-surface: var(--pink-surface);
-  --color-accent-indicator: var(--pink-indicator);
-  --color-accent-track: var(--pink-track);
-}
-
 [data-accent-color='pink'] {
   --accent-1: var(--pink-1);
   --accent-2: var(--pink-2);

package/dist/pink-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-pink-1: var(--pink-1);
   --color-pink-2: var(--pink-2);
   --color-pink-3: var(--pink-3);

package/dist/plum-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--plum-1);
-  --color-accent-2: var(--plum-2);
-  --color-accent-3: var(--plum-3);
-  --color-accent-4: var(--plum-4);
-  --color-accent-5: var(--plum-5);
-  --color-accent-6: var(--plum-6);
-  --color-accent-7: var(--plum-7);
-  --color-accent-8: var(--plum-8);
-  --color-accent-9: var(--plum-9);
-  --color-accent-10: var(--plum-10);
-  --color-accent-11: var(--plum-11);
-  --color-accent-12: var(--plum-12);
-
-  --color-accent-a1: var(--plum-a1);
-  --color-accent-a2: var(--plum-a2);
-  --color-accent-a3: var(--plum-a3);
-  --color-accent-a4: var(--plum-a4);
-  --color-accent-a5: var(--plum-a5);
-  --color-accent-a6: var(--plum-a6);
-  --color-accent-a7: var(--plum-a7);
-  --color-accent-a8: var(--plum-a8);
-  --color-accent-a9: var(--plum-a9);
-  --color-accent-a10: var(--plum-a10);
-  --color-accent-a11: var(--plum-a11);
-  --color-accent-a12: var(--plum-a12);
-
-  --color-accent-contrast: var(--plum-contrast);
-  --color-accent-surface: var(--plum-surface);
-  --color-accent-indicator: var(--plum-indicator);
-  --color-accent-track: var(--plum-track);
-}
-
 [data-accent-color='plum'] {
   --accent-1: var(--plum-1);
   --accent-2: var(--plum-2);

package/dist/plum-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-plum-1: var(--plum-1);
   --color-plum-2: var(--plum-2);
   --color-plum-3: var(--plum-3);

package/dist/purple-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--purple-1);
-  --color-accent-2: var(--purple-2);
-  --color-accent-3: var(--purple-3);
-  --color-accent-4: var(--purple-4);
-  --color-accent-5: var(--purple-5);
-  --color-accent-6: var(--purple-6);
-  --color-accent-7: var(--purple-7);
-  --color-accent-8: var(--purple-8);
-  --color-accent-9: var(--purple-9);
-  --color-accent-10: var(--purple-10);
-  --color-accent-11: var(--purple-11);
-  --color-accent-12: var(--purple-12);
-
-  --color-accent-a1: var(--purple-a1);
-  --color-accent-a2: var(--purple-a2);
-  --color-accent-a3: var(--purple-a3);
-  --color-accent-a4: var(--purple-a4);
-  --color-accent-a5: var(--purple-a5);
-  --color-accent-a6: var(--purple-a6);
-  --color-accent-a7: var(--purple-a7);
-  --color-accent-a8: var(--purple-a8);
-  --color-accent-a9: var(--purple-a9);
-  --color-accent-a10: var(--purple-a10);
-  --color-accent-a11: var(--purple-a11);
-  --color-accent-a12: var(--purple-a12);
-
-  --color-accent-contrast: var(--purple-contrast);
-  --color-accent-surface: var(--purple-surface);
-  --color-accent-indicator: var(--purple-indicator);
-  --color-accent-track: var(--purple-track);
-}
-
 [data-accent-color='purple'] {
   --accent-1: var(--purple-1);
   --accent-2: var(--purple-2);

package/dist/purple-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-purple-1: var(--purple-1);
   --color-purple-2: var(--purple-2);
   --color-purple-3: var(--purple-3);

package/dist/red-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--red-1);
-  --color-accent-2: var(--red-2);
-  --color-accent-3: var(--red-3);
-  --color-accent-4: var(--red-4);
-  --color-accent-5: var(--red-5);
-  --color-accent-6: var(--red-6);
-  --color-accent-7: var(--red-7);
-  --color-accent-8: var(--red-8);
-  --color-accent-9: var(--red-9);
-  --color-accent-10: var(--red-10);
-  --color-accent-11: var(--red-11);
-  --color-accent-12: var(--red-12);
-
-  --color-accent-a1: var(--red-a1);
-  --color-accent-a2: var(--red-a2);
-  --color-accent-a3: var(--red-a3);
-  --color-accent-a4: var(--red-a4);
-  --color-accent-a5: var(--red-a5);
-  --color-accent-a6: var(--red-a6);
-  --color-accent-a7: var(--red-a7);
-  --color-accent-a8: var(--red-a8);
-  --color-accent-a9: var(--red-a9);
-  --color-accent-a10: var(--red-a10);
-  --color-accent-a11: var(--red-a11);
-  --color-accent-a12: var(--red-a12);
-
-  --color-accent-contrast: var(--red-contrast);
-  --color-accent-surface: var(--red-surface);
-  --color-accent-indicator: var(--red-indicator);
-  --color-accent-track: var(--red-track);
-}
-
 [data-accent-color='red'] {
   --accent-1: var(--red-1);
   --accent-2: var(--red-2);

package/dist/red-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-red-1: var(--red-1);
   --color-red-2: var(--red-2);
   --color-red-3: var(--red-3);

package/dist/ruby-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--ruby-1);
-  --color-accent-2: var(--ruby-2);
-  --color-accent-3: var(--ruby-3);
-  --color-accent-4: var(--ruby-4);
-  --color-accent-5: var(--ruby-5);
-  --color-accent-6: var(--ruby-6);
-  --color-accent-7: var(--ruby-7);
-  --color-accent-8: var(--ruby-8);
-  --color-accent-9: var(--ruby-9);
-  --color-accent-10: var(--ruby-10);
-  --color-accent-11: var(--ruby-11);
-  --color-accent-12: var(--ruby-12);
-
-  --color-accent-a1: var(--ruby-a1);
-  --color-accent-a2: var(--ruby-a2);
-  --color-accent-a3: var(--ruby-a3);
-  --color-accent-a4: var(--ruby-a4);
-  --color-accent-a5: var(--ruby-a5);
-  --color-accent-a6: var(--ruby-a6);
-  --color-accent-a7: var(--ruby-a7);
-  --color-accent-a8: var(--ruby-a8);
-  --color-accent-a9: var(--ruby-a9);
-  --color-accent-a10: var(--ruby-a10);
-  --color-accent-a11: var(--ruby-a11);
-  --color-accent-a12: var(--ruby-a12);
-
-  --color-accent-contrast: var(--ruby-contrast);
-  --color-accent-surface: var(--ruby-surface);
-  --color-accent-indicator: var(--ruby-indicator);
-  --color-accent-track: var(--ruby-track);
-}
-
 [data-accent-color='ruby'] {
   --accent-1: var(--ruby-1);
   --accent-2: var(--ruby-2);

package/dist/ruby-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-ruby-1: var(--ruby-1);
   --color-ruby-2: var(--ruby-2);
   --color-ruby-3: var(--ruby-3);

package/dist/sage-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--sage-1);
-  --color-accent-2: var(--sage-2);
-  --color-accent-3: var(--sage-3);
-  --color-accent-4: var(--sage-4);
-  --color-accent-5: var(--sage-5);
-  --color-accent-6: var(--sage-6);
-  --color-accent-7: var(--sage-7);
-  --color-accent-8: var(--sage-8);
-  --color-accent-9: var(--sage-9);
-  --color-accent-10: var(--sage-10);
-  --color-accent-11: var(--sage-11);
-  --color-accent-12: var(--sage-12);
-
-  --color-accent-a1: var(--sage-a1);
-  --color-accent-a2: var(--sage-a2);
-  --color-accent-a3: var(--sage-a3);
-  --color-accent-a4: var(--sage-a4);
-  --color-accent-a5: var(--sage-a5);
-  --color-accent-a6: var(--sage-a6);
-  --color-accent-a7: var(--sage-a7);
-  --color-accent-a8: var(--sage-a8);
-  --color-accent-a9: var(--sage-a9);
-  --color-accent-a10: var(--sage-a10);
-  --color-accent-a11: var(--sage-a11);
-  --color-accent-a12: var(--sage-a12);
-
-  --color-accent-contrast: var(--sage-contrast);
-  --color-accent-surface: var(--sage-surface);
-  --color-accent-indicator: var(--sage-indicator);
-  --color-accent-track: var(--sage-track);
-}
-
 [data-accent-color='sage'] {
   --accent-1: var(--sage-1);
   --accent-2: var(--sage-2);
@@ -62,4 +29,37 @@
   --accent-surface: var(--sage-surface);
   --accent-indicator: var(--sage-indicator);
   --accent-track: var(--sage-track);
+}
+
+[data-gray-color='sage'] {
+  --gray-1: var(--sage-1);
+  --gray-2: var(--sage-2);
+  --gray-3: var(--sage-3);
+  --gray-4: var(--sage-4);
+  --gray-5: var(--sage-5);
+  --gray-6: var(--sage-6);
+  --gray-7: var(--sage-7);
+  --gray-8: var(--sage-8);
+  --gray-9: var(--sage-9);
+  --gray-10: var(--sage-10);
+  --gray-11: var(--sage-11);
+  --gray-12: var(--sage-12);
+
+  --gray-a1: var(--sage-a1);
+  --gray-a2: var(--sage-a2);
+  --gray-a3: var(--sage-a3);
+  --gray-a4: var(--sage-a4);
+  --gray-a5: var(--sage-a5);
+  --gray-a6: var(--sage-a6);
+  --gray-a7: var(--sage-a7);
+  --gray-a8: var(--sage-a8);
+  --gray-a9: var(--sage-a9);
+  --gray-a10: var(--sage-a10);
+  --gray-a11: var(--sage-a11);
+  --gray-a12: var(--sage-a12);
+
+  --gray-contrast: var(--sage-contrast);
+  --gray-surface: var(--sage-surface);
+  --gray-indicator: var(--sage-indicator);
+  --gray-track: var(--sage-track);
 }

package/dist/sage-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-sage-1: var(--sage-1);
   --color-sage-2: var(--sage-2);
   --color-sage-3: var(--sage-3);

package/dist/sand-accents.css

@@ -1,36 +1,3 @@
-@theme inline static {
-  --color-accent-1: var(--sand-1);
-  --color-accent-2: var(--sand-2);
-  --color-accent-3: var(--sand-3);
-  --color-accent-4: var(--sand-4);
-  --color-accent-5: var(--sand-5);
-  --color-accent-6: var(--sand-6);
-  --color-accent-7: var(--sand-7);
-  --color-accent-8: var(--sand-8);
-  --color-accent-9: var(--sand-9);
-  --color-accent-10: var(--sand-10);
-  --color-accent-11: var(--sand-11);
-  --color-accent-12: var(--sand-12);
-
-  --color-accent-a1: var(--sand-a1);
-  --color-accent-a2: var(--sand-a2);
-  --color-accent-a3: var(--sand-a3);
-  --color-accent-a4: var(--sand-a4);
-  --color-accent-a5: var(--sand-a5);
-  --color-accent-a6: var(--sand-a6);
-  --color-accent-a7: var(--sand-a7);
-  --color-accent-a8: var(--sand-a8);
-  --color-accent-a9: var(--sand-a9);
-  --color-accent-a10: var(--sand-a10);
-  --color-accent-a11: var(--sand-a11);
-  --color-accent-a12: var(--sand-a12);
-
-  --color-accent-contrast: var(--sand-contrast);
-  --color-accent-surface: var(--sand-surface);
-  --color-accent-indicator: var(--sand-indicator);
-  --color-accent-track: var(--sand-track);
-}
-
 [data-accent-color='sand'] {
   --accent-1: var(--sand-1);
   --accent-2: var(--sand-2);
@@ -62,4 +29,37 @@
   --accent-surface: var(--sand-surface);
   --accent-indicator: var(--sand-indicator);
   --accent-track: var(--sand-track);
+}
+
+[data-gray-color='sand'] {
+  --gray-1: var(--sand-1);
+  --gray-2: var(--sand-2);
+  --gray-3: var(--sand-3);
+  --gray-4: var(--sand-4);
+  --gray-5: var(--sand-5);
+  --gray-6: var(--sand-6);
+  --gray-7: var(--sand-7);
+  --gray-8: var(--sand-8);
+  --gray-9: var(--sand-9);
+  --gray-10: var(--sand-10);
+  --gray-11: var(--sand-11);
+  --gray-12: var(--sand-12);
+
+  --gray-a1: var(--sand-a1);
+  --gray-a2: var(--sand-a2);
+  --gray-a3: var(--sand-a3);
+  --gray-a4: var(--sand-a4);
+  --gray-a5: var(--sand-a5);
+  --gray-a6: var(--sand-a6);
+  --gray-a7: var(--sand-a7);
+  --gray-a8: var(--sand-a8);
+  --gray-a9: var(--sand-a9);
+  --gray-a10: var(--sand-a10);
+  --gray-a11: var(--sand-a11);
+  --gray-a12: var(--sand-a12);
+
+  --gray-contrast: var(--sand-contrast);
+  --gray-surface: var(--sand-surface);
+  --gray-indicator: var(--sand-indicator);
+  --gray-track: var(--sand-track);
 }

package/dist/sand-p3.css

@@ -1,4 +1,4 @@
-@theme static {
+@theme inline static {
   --color-sand-1: var(--sand-1);
   --color-sand-2: var(--sand-2);
   --color-sand-3: var(--sand-3);