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

package/dist/green.css

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