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

package/dist/blue.css

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