@svelte-thing/tailwind-radix-colors 0.0.0 → 0.0.1

package/dist/plum.css

@@ -70,684 +70,32 @@
   --plum-indicator: var(--plum-9);
 }
 
-@utility bg-plum-1 {
-  background-color: var(--plum-1);
-}
-
-@utility text-plum-1 {
-  color: var(--plum-1);
-}
-
-@utility border-plum-1 {
-  border-color: var(--plum-1);
-}
-
-@utility divide-plum-1 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-1);
-  }
-}
-
-@utility ring-plum-1 {
-  --tw-ring-color: var(--plum-1);
-}
-
-@utility stroke-plum-1 {
-  stroke: var(--plum-1);
-}
-
-@utility fill-plum-1 {
-  fill: var(--plum-1);
-}
-
-@utility placeholder-plum-1 {
-  &::placeholder {
-    color: var(--plum-1);
-  }
-}
-
-@utility caret-plum-1 {
-  caret-color: var(--plum-1);
-}
-
-@utility outline-plum-1 {
-  outline-color: var(--plum-1);
-}
-
-@utility decoration-plum-1 {
-  text-decoration-color: var(--plum-1);
-}
-
-@utility bg-plum-app {
-  background-color: var(--plum-1);
-}
-
-@utility bg-plum-2 {
-  background-color: var(--plum-2);
-}
-
-@utility text-plum-2 {
-  color: var(--plum-2);
-}
-
-@utility border-plum-2 {
-  border-color: var(--plum-2);
-}
-
-@utility divide-plum-2 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-2);
-  }
-}
-
-@utility ring-plum-2 {
-  --tw-ring-color: var(--plum-2);
-}
-
-@utility stroke-plum-2 {
-  stroke: var(--plum-2);
-}
-
-@utility fill-plum-2 {
-  fill: var(--plum-2);
-}
-
-@utility placeholder-plum-2 {
-  &::placeholder {
-    color: var(--plum-2);
-  }
-}
-
-@utility caret-plum-2 {
-  caret-color: var(--plum-2);
-}
-
-@utility outline-plum-2 {
-  outline-color: var(--plum-2);
-}
-
-@utility decoration-plum-2 {
-  text-decoration-color: var(--plum-2);
-}
-
-@utility bg-plum-subtle {
-  background-color: var(--plum-2);
-}
-
-@utility bg-plum-3 {
-  background-color: var(--plum-3);
-}
-
-@utility text-plum-3 {
-  color: var(--plum-3);
-}
-
-@utility border-plum-3 {
-  border-color: var(--plum-3);
-}
-
-@utility divide-plum-3 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-3);
-  }
-}
-
-@utility ring-plum-3 {
-  --tw-ring-color: var(--plum-3);
-}
-
-@utility stroke-plum-3 {
-  stroke: var(--plum-3);
-}
-
-@utility fill-plum-3 {
-  fill: var(--plum-3);
-}
-
-@utility placeholder-plum-3 {
-  &::placeholder {
-    color: var(--plum-3);
-  }
-}
-
-@utility caret-plum-3 {
-  caret-color: var(--plum-3);
-}
-
-@utility outline-plum-3 {
-  outline-color: var(--plum-3);
-}
-
-@utility decoration-plum-3 {
-  text-decoration-color: var(--plum-3);
-}
-
-@utility bg-plum-ui {
-  background-color: var(--plum-3);
-}
-
-@utility bg-plum-4 {
-  background-color: var(--plum-4);
-}
-
-@utility text-plum-4 {
-  color: var(--plum-4);
-}
-
-@utility border-plum-4 {
-  border-color: var(--plum-4);
-}
-
-@utility divide-plum-4 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-4);
-  }
-}
-
-@utility ring-plum-4 {
-  --tw-ring-color: var(--plum-4);
-}
-
-@utility stroke-plum-4 {
-  stroke: var(--plum-4);
-}
-
-@utility fill-plum-4 {
-  fill: var(--plum-4);
-}
-
-@utility placeholder-plum-4 {
-  &::placeholder {
-    color: var(--plum-4);
-  }
-}
-
-@utility caret-plum-4 {
-  caret-color: var(--plum-4);
-}
-
-@utility outline-plum-4 {
-  outline-color: var(--plum-4);
-}
-
-@utility decoration-plum-4 {
-  text-decoration-color: var(--plum-4);
-}
-
-@utility bg-plum-ui-hover {
-  &:hover {
-    background-color: var(--plum-4);
-  }
-}
-
-@utility bg-plum-5 {
-  background-color: var(--plum-5);
-}
-
-@utility text-plum-5 {
-  color: var(--plum-5);
-}
-
-@utility border-plum-5 {
-  border-color: var(--plum-5);
-}
-
-@utility divide-plum-5 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-5);
-  }
-}
-
-@utility ring-plum-5 {
-  --tw-ring-color: var(--plum-5);
-}
-
-@utility stroke-plum-5 {
-  stroke: var(--plum-5);
-}
-
-@utility fill-plum-5 {
-  fill: var(--plum-5);
-}
-
-@utility placeholder-plum-5 {
-  &::placeholder {
-    color: var(--plum-5);
-  }
-}
-
-@utility caret-plum-5 {
-  caret-color: var(--plum-5);
-}
-
-@utility outline-plum-5 {
-  outline-color: var(--plum-5);
-}
-
-@utility decoration-plum-5 {
-  text-decoration-color: var(--plum-5);
-}
-
-@utility bg-plum-ui-active {
-  &:active {
-    background-color: var(--plum-5);
-  }
-}
-
-@utility bg-plum-6 {
-  background-color: var(--plum-6);
-}
-
-@utility text-plum-6 {
-  color: var(--plum-6);
-}
-
-@utility border-plum-6 {
-  border-color: var(--plum-6);
-}
-
-@utility divide-plum-6 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-6);
-  }
-}
-
-@utility ring-plum-6 {
-  --tw-ring-color: var(--plum-6);
-}
-
-@utility stroke-plum-6 {
-  stroke: var(--plum-6);
-}
-
-@utility fill-plum-6 {
-  fill: var(--plum-6);
-}
-
-@utility placeholder-plum-6 {
-  &::placeholder {
-    color: var(--plum-6);
-  }
-}
-
-@utility caret-plum-6 {
-  caret-color: var(--plum-6);
-}
-
-@utility outline-plum-6 {
-  outline-color: var(--plum-6);
-}
-
-@utility decoration-plum-6 {
-  text-decoration-color: var(--plum-6);
-}
-
-@utility border-plum-subtle {
-  border-color: var(--plum-6);
-}
-
-@utility bg-plum-7 {
-  background-color: var(--plum-7);
-}
-
-@utility text-plum-7 {
-  color: var(--plum-7);
-}
-
-@utility border-plum-7 {
-  border-color: var(--plum-7);
-}
-
-@utility divide-plum-7 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-7);
-  }
-}
-
-@utility ring-plum-7 {
-  --tw-ring-color: var(--plum-7);
-}
-
-@utility stroke-plum-7 {
-  stroke: var(--plum-7);
-}
-
-@utility fill-plum-7 {
-  fill: var(--plum-7);
-}
-
-@utility placeholder-plum-7 {
-  &::placeholder {
-    color: var(--plum-7);
-  }
-}
-
-@utility caret-plum-7 {
-  caret-color: var(--plum-7);
-}
-
-@utility outline-plum-7 {
-  outline-color: var(--plum-7);
-}
-
-@utility decoration-plum-7 {
-  text-decoration-color: var(--plum-7);
-}
-
-@utility border-plum-ui {
-  border-color: var(--plum-7);
-}
-
-@utility bg-plum-8 {
-  background-color: var(--plum-8);
-}
-
-@utility text-plum-8 {
-  color: var(--plum-8);
-}
-
-@utility border-plum-8 {
-  border-color: var(--plum-8);
-}
-
-@utility divide-plum-8 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-8);
-  }
-}
-
-@utility ring-plum-8 {
-  --tw-ring-color: var(--plum-8);
-}
-
-@utility stroke-plum-8 {
-  stroke: var(--plum-8);
-}
-
-@utility fill-plum-8 {
-  fill: var(--plum-8);
-}
-
-@utility placeholder-plum-8 {
-  &::placeholder {
-    color: var(--plum-8);
-  }
-}
-
-@utility caret-plum-8 {
-  caret-color: var(--plum-8);
-}
-
-@utility outline-plum-8 {
-  outline-color: var(--plum-8);
-}
-
-@utility decoration-plum-8 {
-  text-decoration-color: var(--plum-8);
-}
-
-@utility border-plum-ui-hover {
-  &:hover {
-    border-color: var(--plum-8);
-  }
-}
-
-@utility bg-plum-9 {
-  background-color: var(--plum-9);
-}
-
-@utility text-plum-9 {
-  color: var(--plum-9);
-}
-
-@utility border-plum-9 {
-  border-color: var(--plum-9);
-}
-
-@utility divide-plum-9 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-9);
-  }
-}
-
-@utility ring-plum-9 {
-  --tw-ring-color: var(--plum-9);
-}
-
-@utility stroke-plum-9 {
-  stroke: var(--plum-9);
-}
-
-@utility fill-plum-9 {
-  fill: var(--plum-9);
-}
-
-@utility placeholder-plum-9 {
-  &::placeholder {
-    color: var(--plum-9);
-  }
-}
-
-@utility caret-plum-9 {
-  caret-color: var(--plum-9);
-}
-
-@utility outline-plum-9 {
-  outline-color: var(--plum-9);
-}
-
-@utility decoration-plum-9 {
-  text-decoration-color: var(--plum-9);
-}
-
-@utility bg-plum-solid {
-  background-color: var(--plum-9);
-}
-
-@utility bg-plum-10 {
-  background-color: var(--plum-10);
-}
-
-@utility text-plum-10 {
-  color: var(--plum-10);
-}
-
-@utility border-plum-10 {
-  border-color: var(--plum-10);
-}
-
-@utility divide-plum-10 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-10);
-  }
-}
-
-@utility ring-plum-10 {
-  --tw-ring-color: var(--plum-10);
-}
-
-@utility stroke-plum-10 {
-  stroke: var(--plum-10);
-}
-
-@utility fill-plum-10 {
-  fill: var(--plum-10);
-}
-
-@utility placeholder-plum-10 {
-  &::placeholder {
-    color: var(--plum-10);
-  }
-}
-
-@utility caret-plum-10 {
-  caret-color: var(--plum-10);
-}
-
-@utility outline-plum-10 {
-  outline-color: var(--plum-10);
-}
-
-@utility decoration-plum-10 {
-  text-decoration-color: var(--plum-10);
-}
-
-@utility bg-plum-solid-hover {
-  &:hover {
-    background-color: var(--plum-10);
-  }
-}
-
-@utility bg-plum-11 {
-  background-color: var(--plum-11);
-}
-
-@utility text-plum-11 {
-  color: var(--plum-11);
-}
-
-@utility border-plum-11 {
-  border-color: var(--plum-11);
-}
-
-@utility divide-plum-11 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-11);
-  }
-}
-
-@utility ring-plum-11 {
-  --tw-ring-color: var(--plum-11);
-}
-
-@utility stroke-plum-11 {
-  stroke: var(--plum-11);
-}
-
-@utility fill-plum-11 {
-  fill: var(--plum-11);
-}
-
-@utility placeholder-plum-11 {
-  &::placeholder {
-    color: var(--plum-11);
-  }
-}
-
-@utility caret-plum-11 {
-  caret-color: var(--plum-11);
-}
-
-@utility outline-plum-11 {
-  outline-color: var(--plum-11);
-}
-
-@utility decoration-plum-11 {
-  text-decoration-color: var(--plum-11);
-}
-
-@utility text-plum-ui {
-  color: var(--plum-11);
-}
-
-@utility bg-plum-12 {
-  background-color: var(--plum-12);
-}
-
-@utility text-plum-12 {
-  color: var(--plum-12);
-}
-
-@utility border-plum-12 {
-  border-color: var(--plum-12);
-}
-
-@utility divide-plum-12 {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-12);
-  }
-}
-
-@utility ring-plum-12 {
-  --tw-ring-color: var(--plum-12);
-}
-
-@utility stroke-plum-12 {
-  stroke: var(--plum-12);
-}
-
-@utility fill-plum-12 {
-  fill: var(--plum-12);
-}
-
-@utility placeholder-plum-12 {
-  &::placeholder {
-    color: var(--plum-12);
-  }
-}
-
-@utility caret-plum-12 {
-  caret-color: var(--plum-12);
-}
-
-@utility outline-plum-12 {
-  outline-color: var(--plum-12);
-}
-
-@utility decoration-plum-12 {
-  text-decoration-color: var(--plum-12);
-}
-
-@utility text-plum-contrast {
-  color: var(--plum-12);
-}
-
-@utility bg-plum-surface {
-  background-color: var(--plum-surface);
-}
-
-@utility text-plum-surface {
-  color: var(--plum-surface);
-}
-
-@utility border-plum-surface {
-  border-color: var(--plum-surface);
-}
-
-@utility divide-plum-surface {
-  :where(& > :not(:last-child)) {
-    border-color: var(--plum-surface);
-  }
-}
-
-@utility ring-plum-surface {
-  --tw-ring-color: var(--plum-surface);
-}
-
-@utility stroke-plum-surface {
-  stroke: var(--plum-surface);
-}
-
-@utility fill-plum-surface {
-  fill: var(--plum-surface);
-}
-
-@utility placeholder-plum-surface {
-  &::placeholder {
-    color: var(--plum-surface);
-  }
-}
-
-@utility caret-plum-surface {
-  caret-color: var(--plum-surface);
-}
-
-@utility outline-plum-surface {
-  outline-color: var(--plum-surface);
-}
-
-@utility decoration-plum-surface {
-  text-decoration-color: var(--plum-surface);
+@theme inline {
+  --color-plum-1: var(--plum-1);
+  --background-color-plum-app: var(--plum-1);
+  --color-plum-2: var(--plum-2);
+  --background-color-plum-subtle: var(--plum-2);
+  --color-plum-3: var(--plum-3);
+  --background-color-plum-ui: var(--plum-3);
+  --color-plum-4: var(--plum-4);
+  --background-color-plum-ui-hover: var(--plum-4);
+  --color-plum-5: var(--plum-5);
+  --background-color-plum-ui-active: var(--plum-5);
+  --color-plum-6: var(--plum-6);
+  --border-color-plum-subtle: var(--plum-6);
+  --color-plum-7: var(--plum-7);
+  --border-color-plum-ui: var(--plum-7);
+  --color-plum-8: var(--plum-8);
+  --border-color-plum-ui-hover: var(--plum-8);
+  --color-plum-9: var(--plum-9);
+  --background-color-plum-solid: var(--plum-9);
+  --color-plum-10: var(--plum-10);
+  --background-color-plum-solid-hover: var(--plum-10);
+  --color-plum-11: var(--plum-11);
+  --text-color-plum-ui: var(--plum-11);
+  --color-plum-12: var(--plum-12);
+  --text-color-plum-contrast: var(--plum-12);
+  --color-plum-surface: var(--plum-surface);
 }
 
 @utility brand-plum {