@epilot/volt-ui 0.1.0

package/dist/styles/colors-semantic-utilities.css

@@ -0,0 +1,1665 @@
+/* Auto-generated semantic color utilities from src/tokens/colors.ts */
+
+/* PALETTE COLORS */
+
+/* mauve background utilities */
+@utility bg-mauve-level-1 {
+  background-color: var(--mauve-1);
+}
+
+@utility bg-mauve-level-2 {
+  background-color: var(--mauve-2);
+}
+
+@utility bg-mauve-soft {
+  background-color: var(--mauve-a3);
+}
+
+@utility bg-mauve-soft-hover {
+  background-color: var(--mauve-a2);
+}
+
+@utility bg-mauve-surface {
+  background-color: var(--mauve-surface);
+}
+
+@utility bg-mauve-solid {
+  background-color: var(--mauve-a9);
+}
+
+@utility bg-mauve-solid-hover {
+  background-color: var(--mauve-a10);
+}
+
+@utility bg-mauve-contrast {
+  background-color: var(--mauve-contrast);
+}
+
+@utility bg-mauve-high-contrast {
+  background-color: var(--mauve-a12);
+}
+
+/* mauve text utilities */
+@utility text-mauve-default {
+  color: var(--mauve-a12);
+}
+
+@utility text-mauve-light {
+  color: var(--mauve-a11);
+}
+
+@utility text-mauve-disabled {
+  color: var(--mauve-a8);
+}
+
+@utility text-mauve-contrast {
+  color: var(--mauve-contrast);
+}
+
+@utility text-mauve-high-contrast {
+  color: var(--mauve-1);
+}
+
+/* mauve border utilities */
+@utility border-mauve-default {
+  border-color: var(--mauve-a6);
+}
+
+@utility border-mauve-ui {
+  border-color: var(--mauve-a7);
+}
+
+@utility border-mauve-ui-hover {
+  border-color: var(--mauve-a8);
+}
+
+@utility border-mauve-contrast {
+  border-color: var(--mauve-contrast);
+}
+
+@utility border-mauve-high-contrast {
+  border-color: var(--mauve-1);
+}
+
+/* red background utilities */
+@utility bg-red-level-1 {
+  background-color: var(--red-1);
+}
+
+@utility bg-red-level-2 {
+  background-color: var(--red-2);
+}
+
+@utility bg-red-soft {
+  background-color: var(--red-a3);
+}
+
+@utility bg-red-soft-hover {
+  background-color: var(--red-a2);
+}
+
+@utility bg-red-surface {
+  background-color: var(--red-surface);
+}
+
+@utility bg-red-solid {
+  background-color: var(--red-a9);
+}
+
+@utility bg-red-solid-hover {
+  background-color: var(--red-a10);
+}
+
+@utility bg-red-contrast {
+  background-color: var(--red-contrast);
+}
+
+@utility bg-red-high-contrast {
+  background-color: var(--red-a12);
+}
+
+/* red text utilities */
+@utility text-red-default {
+  color: var(--red-a12);
+}
+
+@utility text-red-light {
+  color: var(--red-a11);
+}
+
+@utility text-red-disabled {
+  color: var(--red-a8);
+}
+
+@utility text-red-contrast {
+  color: var(--red-contrast);
+}
+
+@utility text-red-high-contrast {
+  color: var(--red-1);
+}
+
+/* red border utilities */
+@utility border-red-default {
+  border-color: var(--red-a6);
+}
+
+@utility border-red-ui {
+  border-color: var(--red-a7);
+}
+
+@utility border-red-ui-hover {
+  border-color: var(--red-a8);
+}
+
+@utility border-red-contrast {
+  border-color: var(--red-contrast);
+}
+
+@utility border-red-high-contrast {
+  border-color: var(--red-1);
+}
+
+/* pink background utilities */
+@utility bg-pink-level-1 {
+  background-color: var(--pink-1);
+}
+
+@utility bg-pink-level-2 {
+  background-color: var(--pink-2);
+}
+
+@utility bg-pink-soft {
+  background-color: var(--pink-a3);
+}
+
+@utility bg-pink-soft-hover {
+  background-color: var(--pink-a2);
+}
+
+@utility bg-pink-surface {
+  background-color: var(--pink-surface);
+}
+
+@utility bg-pink-solid {
+  background-color: var(--pink-a9);
+}
+
+@utility bg-pink-solid-hover {
+  background-color: var(--pink-a10);
+}
+
+@utility bg-pink-contrast {
+  background-color: var(--pink-contrast);
+}
+
+@utility bg-pink-high-contrast {
+  background-color: var(--pink-a12);
+}
+
+/* pink text utilities */
+@utility text-pink-default {
+  color: var(--pink-a12);
+}
+
+@utility text-pink-light {
+  color: var(--pink-a11);
+}
+
+@utility text-pink-disabled {
+  color: var(--pink-a8);
+}
+
+@utility text-pink-contrast {
+  color: var(--pink-contrast);
+}
+
+@utility text-pink-high-contrast {
+  color: var(--pink-1);
+}
+
+/* pink border utilities */
+@utility border-pink-default {
+  border-color: var(--pink-a6);
+}
+
+@utility border-pink-ui {
+  border-color: var(--pink-a7);
+}
+
+@utility border-pink-ui-hover {
+  border-color: var(--pink-a8);
+}
+
+@utility border-pink-contrast {
+  border-color: var(--pink-contrast);
+}
+
+@utility border-pink-high-contrast {
+  border-color: var(--pink-1);
+}
+
+/* purple background utilities */
+@utility bg-purple-level-1 {
+  background-color: var(--purple-1);
+}
+
+@utility bg-purple-level-2 {
+  background-color: var(--purple-2);
+}
+
+@utility bg-purple-soft {
+  background-color: var(--purple-a3);
+}
+
+@utility bg-purple-soft-hover {
+  background-color: var(--purple-a2);
+}
+
+@utility bg-purple-surface {
+  background-color: var(--purple-surface);
+}
+
+@utility bg-purple-solid {
+  background-color: var(--purple-a9);
+}
+
+@utility bg-purple-solid-hover {
+  background-color: var(--purple-a10);
+}
+
+@utility bg-purple-contrast {
+  background-color: var(--purple-contrast);
+}
+
+@utility bg-purple-high-contrast {
+  background-color: var(--purple-a12);
+}
+
+/* purple text utilities */
+@utility text-purple-default {
+  color: var(--purple-a12);
+}
+
+@utility text-purple-light {
+  color: var(--purple-a11);
+}
+
+@utility text-purple-disabled {
+  color: var(--purple-a8);
+}
+
+@utility text-purple-contrast {
+  color: var(--purple-contrast);
+}
+
+@utility text-purple-high-contrast {
+  color: var(--purple-1);
+}
+
+/* purple border utilities */
+@utility border-purple-default {
+  border-color: var(--purple-a6);
+}
+
+@utility border-purple-ui {
+  border-color: var(--purple-a7);
+}
+
+@utility border-purple-ui-hover {
+  border-color: var(--purple-a8);
+}
+
+@utility border-purple-contrast {
+  border-color: var(--purple-contrast);
+}
+
+@utility border-purple-high-contrast {
+  border-color: var(--purple-1);
+}
+
+/* indigo background utilities */
+@utility bg-indigo-level-1 {
+  background-color: var(--indigo-1);
+}
+
+@utility bg-indigo-level-2 {
+  background-color: var(--indigo-2);
+}
+
+@utility bg-indigo-soft {
+  background-color: var(--indigo-a3);
+}
+
+@utility bg-indigo-soft-hover {
+  background-color: var(--indigo-a2);
+}
+
+@utility bg-indigo-surface {
+  background-color: var(--indigo-surface);
+}
+
+@utility bg-indigo-solid {
+  background-color: var(--indigo-a9);
+}
+
+@utility bg-indigo-solid-hover {
+  background-color: var(--indigo-a10);
+}
+
+@utility bg-indigo-contrast {
+  background-color: var(--indigo-contrast);
+}
+
+@utility bg-indigo-high-contrast {
+  background-color: var(--indigo-a12);
+}
+
+/* indigo text utilities */
+@utility text-indigo-default {
+  color: var(--indigo-a12);
+}
+
+@utility text-indigo-light {
+  color: var(--indigo-a11);
+}
+
+@utility text-indigo-disabled {
+  color: var(--indigo-a8);
+}
+
+@utility text-indigo-contrast {
+  color: var(--indigo-contrast);
+}
+
+@utility text-indigo-high-contrast {
+  color: var(--indigo-1);
+}
+
+/* indigo border utilities */
+@utility border-indigo-default {
+  border-color: var(--indigo-a6);
+}
+
+@utility border-indigo-ui {
+  border-color: var(--indigo-a7);
+}
+
+@utility border-indigo-ui-hover {
+  border-color: var(--indigo-a8);
+}
+
+@utility border-indigo-contrast {
+  border-color: var(--indigo-contrast);
+}
+
+@utility border-indigo-high-contrast {
+  border-color: var(--indigo-1);
+}
+
+/* blue background utilities */
+@utility bg-blue-level-1 {
+  background-color: var(--blue-1);
+}
+
+@utility bg-blue-level-2 {
+  background-color: var(--blue-2);
+}
+
+@utility bg-blue-soft {
+  background-color: var(--blue-a3);
+}
+
+@utility bg-blue-soft-hover {
+  background-color: var(--blue-a2);
+}
+
+@utility bg-blue-surface {
+  background-color: var(--blue-surface);
+}
+
+@utility bg-blue-solid {
+  background-color: var(--blue-a9);
+}
+
+@utility bg-blue-solid-hover {
+  background-color: var(--blue-a10);
+}
+
+@utility bg-blue-contrast {
+  background-color: var(--blue-contrast);
+}
+
+@utility bg-blue-high-contrast {
+  background-color: var(--blue-a12);
+}
+
+/* blue text utilities */
+@utility text-blue-default {
+  color: var(--blue-a12);
+}
+
+@utility text-blue-light {
+  color: var(--blue-a11);
+}
+
+@utility text-blue-disabled {
+  color: var(--blue-a8);
+}
+
+@utility text-blue-contrast {
+  color: var(--blue-contrast);
+}
+
+@utility text-blue-high-contrast {
+  color: var(--blue-1);
+}
+
+/* blue border utilities */
+@utility border-blue-default {
+  border-color: var(--blue-a6);
+}
+
+@utility border-blue-ui {
+  border-color: var(--blue-a7);
+}
+
+@utility border-blue-ui-hover {
+  border-color: var(--blue-a8);
+}
+
+@utility border-blue-contrast {
+  border-color: var(--blue-contrast);
+}
+
+@utility border-blue-high-contrast {
+  border-color: var(--blue-1);
+}
+
+/* cyan background utilities */
+@utility bg-cyan-level-1 {
+  background-color: var(--cyan-1);
+}
+
+@utility bg-cyan-level-2 {
+  background-color: var(--cyan-2);
+}
+
+@utility bg-cyan-soft {
+  background-color: var(--cyan-a3);
+}
+
+@utility bg-cyan-soft-hover {
+  background-color: var(--cyan-a2);
+}
+
+@utility bg-cyan-surface {
+  background-color: var(--cyan-surface);
+}
+
+@utility bg-cyan-solid {
+  background-color: var(--cyan-a9);
+}
+
+@utility bg-cyan-solid-hover {
+  background-color: var(--cyan-a10);
+}
+
+@utility bg-cyan-contrast {
+  background-color: var(--cyan-contrast);
+}
+
+@utility bg-cyan-high-contrast {
+  background-color: var(--cyan-a12);
+}
+
+/* cyan text utilities */
+@utility text-cyan-default {
+  color: var(--cyan-a12);
+}
+
+@utility text-cyan-light {
+  color: var(--cyan-a11);
+}
+
+@utility text-cyan-disabled {
+  color: var(--cyan-a8);
+}
+
+@utility text-cyan-contrast {
+  color: var(--cyan-contrast);
+}
+
+@utility text-cyan-high-contrast {
+  color: var(--cyan-1);
+}
+
+/* cyan border utilities */
+@utility border-cyan-default {
+  border-color: var(--cyan-a6);
+}
+
+@utility border-cyan-ui {
+  border-color: var(--cyan-a7);
+}
+
+@utility border-cyan-ui-hover {
+  border-color: var(--cyan-a8);
+}
+
+@utility border-cyan-contrast {
+  border-color: var(--cyan-contrast);
+}
+
+@utility border-cyan-high-contrast {
+  border-color: var(--cyan-1);
+}
+
+/* teal background utilities */
+@utility bg-teal-level-1 {
+  background-color: var(--teal-1);
+}
+
+@utility bg-teal-level-2 {
+  background-color: var(--teal-2);
+}
+
+@utility bg-teal-soft {
+  background-color: var(--teal-a3);
+}
+
+@utility bg-teal-soft-hover {
+  background-color: var(--teal-a2);
+}
+
+@utility bg-teal-surface {
+  background-color: var(--teal-surface);
+}
+
+@utility bg-teal-solid {
+  background-color: var(--teal-a9);
+}
+
+@utility bg-teal-solid-hover {
+  background-color: var(--teal-a10);
+}
+
+@utility bg-teal-contrast {
+  background-color: var(--teal-contrast);
+}
+
+@utility bg-teal-high-contrast {
+  background-color: var(--teal-a12);
+}
+
+/* teal text utilities */
+@utility text-teal-default {
+  color: var(--teal-a12);
+}
+
+@utility text-teal-light {
+  color: var(--teal-a11);
+}
+
+@utility text-teal-disabled {
+  color: var(--teal-a8);
+}
+
+@utility text-teal-contrast {
+  color: var(--teal-contrast);
+}
+
+@utility text-teal-high-contrast {
+  color: var(--teal-1);
+}
+
+/* teal border utilities */
+@utility border-teal-default {
+  border-color: var(--teal-a6);
+}
+
+@utility border-teal-ui {
+  border-color: var(--teal-a7);
+}
+
+@utility border-teal-ui-hover {
+  border-color: var(--teal-a8);
+}
+
+@utility border-teal-contrast {
+  border-color: var(--teal-contrast);
+}
+
+@utility border-teal-high-contrast {
+  border-color: var(--teal-1);
+}
+
+/* green background utilities */
+@utility bg-green-level-1 {
+  background-color: var(--green-1);
+}
+
+@utility bg-green-level-2 {
+  background-color: var(--green-2);
+}
+
+@utility bg-green-soft {
+  background-color: var(--green-a3);
+}
+
+@utility bg-green-soft-hover {
+  background-color: var(--green-a2);
+}
+
+@utility bg-green-surface {
+  background-color: var(--green-surface);
+}
+
+@utility bg-green-solid {
+  background-color: var(--green-a9);
+}
+
+@utility bg-green-solid-hover {
+  background-color: var(--green-a10);
+}
+
+@utility bg-green-contrast {
+  background-color: var(--green-contrast);
+}
+
+@utility bg-green-high-contrast {
+  background-color: var(--green-a12);
+}
+
+/* green text utilities */
+@utility text-green-default {
+  color: var(--green-a12);
+}
+
+@utility text-green-light {
+  color: var(--green-a11);
+}
+
+@utility text-green-disabled {
+  color: var(--green-a8);
+}
+
+@utility text-green-contrast {
+  color: var(--green-contrast);
+}
+
+@utility text-green-high-contrast {
+  color: var(--green-1);
+}
+
+/* green border utilities */
+@utility border-green-default {
+  border-color: var(--green-a6);
+}
+
+@utility border-green-ui {
+  border-color: var(--green-a7);
+}
+
+@utility border-green-ui-hover {
+  border-color: var(--green-a8);
+}
+
+@utility border-green-contrast {
+  border-color: var(--green-contrast);
+}
+
+@utility border-green-high-contrast {
+  border-color: var(--green-1);
+}
+
+/* bronze background utilities */
+@utility bg-bronze-level-1 {
+  background-color: var(--bronze-1);
+}
+
+@utility bg-bronze-level-2 {
+  background-color: var(--bronze-2);
+}
+
+@utility bg-bronze-soft {
+  background-color: var(--bronze-a3);
+}
+
+@utility bg-bronze-soft-hover {
+  background-color: var(--bronze-a2);
+}
+
+@utility bg-bronze-surface {
+  background-color: var(--bronze-surface);
+}
+
+@utility bg-bronze-solid {
+  background-color: var(--bronze-a9);
+}
+
+@utility bg-bronze-solid-hover {
+  background-color: var(--bronze-a10);
+}
+
+@utility bg-bronze-contrast {
+  background-color: var(--bronze-contrast);
+}
+
+@utility bg-bronze-high-contrast {
+  background-color: var(--bronze-a12);
+}
+
+/* bronze text utilities */
+@utility text-bronze-default {
+  color: var(--bronze-a12);
+}
+
+@utility text-bronze-light {
+  color: var(--bronze-a11);
+}
+
+@utility text-bronze-disabled {
+  color: var(--bronze-a8);
+}
+
+@utility text-bronze-contrast {
+  color: var(--bronze-contrast);
+}
+
+@utility text-bronze-high-contrast {
+  color: var(--bronze-1);
+}
+
+/* bronze border utilities */
+@utility border-bronze-default {
+  border-color: var(--bronze-a6);
+}
+
+@utility border-bronze-ui {
+  border-color: var(--bronze-a7);
+}
+
+@utility border-bronze-ui-hover {
+  border-color: var(--bronze-a8);
+}
+
+@utility border-bronze-contrast {
+  border-color: var(--bronze-contrast);
+}
+
+@utility border-bronze-high-contrast {
+  border-color: var(--bronze-1);
+}
+
+/* sky background utilities */
+@utility bg-sky-level-1 {
+  background-color: var(--sky-1);
+}
+
+@utility bg-sky-level-2 {
+  background-color: var(--sky-2);
+}
+
+@utility bg-sky-soft {
+  background-color: var(--sky-a3);
+}
+
+@utility bg-sky-soft-hover {
+  background-color: var(--sky-a2);
+}
+
+@utility bg-sky-surface {
+  background-color: var(--sky-surface);
+}
+
+@utility bg-sky-solid {
+  background-color: var(--sky-a9);
+}
+
+@utility bg-sky-solid-hover {
+  background-color: var(--sky-a10);
+}
+
+@utility bg-sky-contrast {
+  background-color: var(--sky-contrast);
+}
+
+@utility bg-sky-high-contrast {
+  background-color: var(--sky-a12);
+}
+
+/* sky text utilities */
+@utility text-sky-default {
+  color: var(--sky-a12);
+}
+
+@utility text-sky-light {
+  color: var(--sky-a11);
+}
+
+@utility text-sky-disabled {
+  color: var(--sky-a8);
+}
+
+@utility text-sky-contrast {
+  color: var(--sky-contrast);
+}
+
+@utility text-sky-high-contrast {
+  color: var(--sky-1);
+}
+
+/* sky border utilities */
+@utility border-sky-default {
+  border-color: var(--sky-a6);
+}
+
+@utility border-sky-ui {
+  border-color: var(--sky-a7);
+}
+
+@utility border-sky-ui-hover {
+  border-color: var(--sky-a8);
+}
+
+@utility border-sky-contrast {
+  border-color: var(--sky-contrast);
+}
+
+@utility border-sky-high-contrast {
+  border-color: var(--sky-1);
+}
+
+/* mint background utilities */
+@utility bg-mint-level-1 {
+  background-color: var(--mint-1);
+}
+
+@utility bg-mint-level-2 {
+  background-color: var(--mint-2);
+}
+
+@utility bg-mint-soft {
+  background-color: var(--mint-a3);
+}
+
+@utility bg-mint-soft-hover {
+  background-color: var(--mint-a2);
+}
+
+@utility bg-mint-surface {
+  background-color: var(--mint-surface);
+}
+
+@utility bg-mint-solid {
+  background-color: var(--mint-a9);
+}
+
+@utility bg-mint-solid-hover {
+  background-color: var(--mint-a10);
+}
+
+@utility bg-mint-contrast {
+  background-color: var(--mint-contrast);
+}
+
+@utility bg-mint-high-contrast {
+  background-color: var(--mint-a12);
+}
+
+/* mint text utilities */
+@utility text-mint-default {
+  color: var(--mint-a12);
+}
+
+@utility text-mint-light {
+  color: var(--mint-a11);
+}
+
+@utility text-mint-disabled {
+  color: var(--mint-a8);
+}
+
+@utility text-mint-contrast {
+  color: var(--mint-contrast);
+}
+
+@utility text-mint-high-contrast {
+  color: var(--mint-1);
+}
+
+/* mint border utilities */
+@utility border-mint-default {
+  border-color: var(--mint-a6);
+}
+
+@utility border-mint-ui {
+  border-color: var(--mint-a7);
+}
+
+@utility border-mint-ui-hover {
+  border-color: var(--mint-a8);
+}
+
+@utility border-mint-contrast {
+  border-color: var(--mint-contrast);
+}
+
+@utility border-mint-high-contrast {
+  border-color: var(--mint-1);
+}
+
+/* lime background utilities */
+@utility bg-lime-level-1 {
+  background-color: var(--lime-1);
+}
+
+@utility bg-lime-level-2 {
+  background-color: var(--lime-2);
+}
+
+@utility bg-lime-soft {
+  background-color: var(--lime-a3);
+}
+
+@utility bg-lime-soft-hover {
+  background-color: var(--lime-a2);
+}
+
+@utility bg-lime-surface {
+  background-color: var(--lime-surface);
+}
+
+@utility bg-lime-solid {
+  background-color: var(--lime-a9);
+}
+
+@utility bg-lime-solid-hover {
+  background-color: var(--lime-a10);
+}
+
+@utility bg-lime-contrast {
+  background-color: var(--lime-contrast);
+}
+
+@utility bg-lime-high-contrast {
+  background-color: var(--lime-a12);
+}
+
+/* lime text utilities */
+@utility text-lime-default {
+  color: var(--lime-a12);
+}
+
+@utility text-lime-light {
+  color: var(--lime-a11);
+}
+
+@utility text-lime-disabled {
+  color: var(--lime-a8);
+}
+
+@utility text-lime-contrast {
+  color: var(--lime-contrast);
+}
+
+@utility text-lime-high-contrast {
+  color: var(--lime-1);
+}
+
+/* lime border utilities */
+@utility border-lime-default {
+  border-color: var(--lime-a6);
+}
+
+@utility border-lime-ui {
+  border-color: var(--lime-a7);
+}
+
+@utility border-lime-ui-hover {
+  border-color: var(--lime-a8);
+}
+
+@utility border-lime-contrast {
+  border-color: var(--lime-contrast);
+}
+
+@utility border-lime-high-contrast {
+  border-color: var(--lime-1);
+}
+
+/* yellow background utilities */
+@utility bg-yellow-level-1 {
+  background-color: var(--yellow-1);
+}
+
+@utility bg-yellow-level-2 {
+  background-color: var(--yellow-2);
+}
+
+@utility bg-yellow-soft {
+  background-color: var(--yellow-a3);
+}
+
+@utility bg-yellow-soft-hover {
+  background-color: var(--yellow-a2);
+}
+
+@utility bg-yellow-surface {
+  background-color: var(--yellow-surface);
+}
+
+@utility bg-yellow-solid {
+  background-color: var(--yellow-a9);
+}
+
+@utility bg-yellow-solid-hover {
+  background-color: var(--yellow-a10);
+}
+
+@utility bg-yellow-contrast {
+  background-color: var(--yellow-contrast);
+}
+
+@utility bg-yellow-high-contrast {
+  background-color: var(--yellow-a12);
+}
+
+/* yellow text utilities */
+@utility text-yellow-default {
+  color: var(--yellow-a12);
+}
+
+@utility text-yellow-light {
+  color: var(--yellow-a11);
+}
+
+@utility text-yellow-disabled {
+  color: var(--yellow-a8);
+}
+
+@utility text-yellow-contrast {
+  color: var(--yellow-contrast);
+}
+
+@utility text-yellow-high-contrast {
+  color: var(--yellow-1);
+}
+
+/* yellow border utilities */
+@utility border-yellow-default {
+  border-color: var(--yellow-a6);
+}
+
+@utility border-yellow-ui {
+  border-color: var(--yellow-a7);
+}
+
+@utility border-yellow-ui-hover {
+  border-color: var(--yellow-a8);
+}
+
+@utility border-yellow-contrast {
+  border-color: var(--yellow-contrast);
+}
+
+@utility border-yellow-high-contrast {
+  border-color: var(--yellow-1);
+}
+
+/* orange background utilities */
+@utility bg-orange-level-1 {
+  background-color: var(--orange-1);
+}
+
+@utility bg-orange-level-2 {
+  background-color: var(--orange-2);
+}
+
+@utility bg-orange-soft {
+  background-color: var(--orange-a3);
+}
+
+@utility bg-orange-soft-hover {
+  background-color: var(--orange-a2);
+}
+
+@utility bg-orange-surface {
+  background-color: var(--orange-surface);
+}
+
+@utility bg-orange-solid {
+  background-color: var(--orange-a9);
+}
+
+@utility bg-orange-solid-hover {
+  background-color: var(--orange-a10);
+}
+
+@utility bg-orange-contrast {
+  background-color: var(--orange-contrast);
+}
+
+@utility bg-orange-high-contrast {
+  background-color: var(--orange-a12);
+}
+
+/* orange text utilities */
+@utility text-orange-default {
+  color: var(--orange-a12);
+}
+
+@utility text-orange-light {
+  color: var(--orange-a11);
+}
+
+@utility text-orange-disabled {
+  color: var(--orange-a8);
+}
+
+@utility text-orange-contrast {
+  color: var(--orange-contrast);
+}
+
+@utility text-orange-high-contrast {
+  color: var(--orange-1);
+}
+
+/* orange border utilities */
+@utility border-orange-default {
+  border-color: var(--orange-a6);
+}
+
+@utility border-orange-ui {
+  border-color: var(--orange-a7);
+}
+
+@utility border-orange-ui-hover {
+  border-color: var(--orange-a8);
+}
+
+@utility border-orange-contrast {
+  border-color: var(--orange-contrast);
+}
+
+@utility border-orange-high-contrast {
+  border-color: var(--orange-1);
+}
+
+/* SYSTEM COLORS */
+
+/* accent background utilities */
+@utility bg-accent-level-1 {
+  background-color: var(--accent-1);
+}
+
+@utility bg-accent-level-2 {
+  background-color: var(--accent-2);
+}
+
+@utility bg-accent-soft {
+  background-color: var(--accent-a3);
+}
+
+@utility bg-accent-soft-hover {
+  background-color: var(--accent-a2);
+}
+
+@utility bg-accent-surface {
+  background-color: var(--accent-surface);
+}
+
+@utility bg-accent-solid {
+  background-color: var(--accent-a9);
+}
+
+@utility bg-accent-solid-hover {
+  background-color: var(--accent-a10);
+}
+
+@utility bg-accent-contrast {
+  background-color: var(--accent-contrast);
+}
+
+@utility bg-accent-high-contrast {
+  background-color: var(--accent-a12);
+}
+
+/* accent text utilities */
+@utility text-accent-default {
+  color: var(--accent-a12);
+}
+
+@utility text-accent-light {
+  color: var(--accent-a11);
+}
+
+@utility text-accent-disabled {
+  color: var(--accent-a8);
+}
+
+@utility text-accent-contrast {
+  color: var(--accent-contrast);
+}
+
+@utility text-accent-high-contrast {
+  color: var(--accent-1);
+}
+
+/* accent border utilities */
+@utility border-accent-default {
+  border-color: var(--accent-a6);
+}
+
+@utility border-accent-ui {
+  border-color: var(--accent-a7);
+}
+
+@utility border-accent-ui-hover {
+  border-color: var(--accent-a8);
+}
+
+@utility border-accent-contrast {
+  border-color: var(--accent-contrast);
+}
+
+@utility border-accent-high-contrast {
+  border-color: var(--accent-1);
+}
+
+/* gray background utilities */
+@utility bg-gray-level-1 {
+  background-color: var(--gray-1);
+}
+
+@utility bg-gray-level-2 {
+  background-color: var(--gray-2);
+}
+
+@utility bg-gray-soft {
+  background-color: var(--gray-a3);
+}
+
+@utility bg-gray-soft-hover {
+  background-color: var(--gray-a2);
+}
+
+@utility bg-gray-surface {
+  background-color: var(--gray-surface);
+}
+
+@utility bg-gray-solid {
+  background-color: var(--gray-a9);
+}
+
+@utility bg-gray-solid-hover {
+  background-color: var(--gray-a10);
+}
+
+@utility bg-gray-contrast {
+  background-color: var(--gray-contrast);
+}
+
+@utility bg-gray-high-contrast {
+  background-color: var(--gray-a12);
+}
+
+/* gray text utilities */
+@utility text-gray-default {
+  color: var(--gray-a12);
+}
+
+@utility text-gray-light {
+  color: var(--gray-a11);
+}
+
+@utility text-gray-disabled {
+  color: var(--gray-a8);
+}
+
+@utility text-gray-contrast {
+  color: var(--gray-contrast);
+}
+
+@utility text-gray-high-contrast {
+  color: var(--gray-1);
+}
+
+/* gray border utilities */
+@utility border-gray-default {
+  border-color: var(--gray-a6);
+}
+
+@utility border-gray-ui {
+  border-color: var(--gray-a7);
+}
+
+@utility border-gray-ui-hover {
+  border-color: var(--gray-a8);
+}
+
+@utility border-gray-contrast {
+  border-color: var(--gray-contrast);
+}
+
+@utility border-gray-high-contrast {
+  border-color: var(--gray-1);
+}
+
+/* success background utilities */
+@utility bg-success-level-1 {
+  background-color: var(--success-1);
+}
+
+@utility bg-success-level-2 {
+  background-color: var(--success-2);
+}
+
+@utility bg-success-soft {
+  background-color: var(--success-a3);
+}
+
+@utility bg-success-soft-hover {
+  background-color: var(--success-a2);
+}
+
+@utility bg-success-surface {
+  background-color: var(--success-surface);
+}
+
+@utility bg-success-solid {
+  background-color: var(--success-a9);
+}
+
+@utility bg-success-solid-hover {
+  background-color: var(--success-a10);
+}
+
+@utility bg-success-contrast {
+  background-color: var(--success-contrast);
+}
+
+@utility bg-success-high-contrast {
+  background-color: var(--success-a12);
+}
+
+/* success text utilities */
+@utility text-success-default {
+  color: var(--success-a12);
+}
+
+@utility text-success-light {
+  color: var(--success-a11);
+}
+
+@utility text-success-disabled {
+  color: var(--success-a8);
+}
+
+@utility text-success-contrast {
+  color: var(--success-contrast);
+}
+
+@utility text-success-high-contrast {
+  color: var(--success-1);
+}
+
+/* success border utilities */
+@utility border-success-default {
+  border-color: var(--success-a6);
+}
+
+@utility border-success-ui {
+  border-color: var(--success-a7);
+}
+
+@utility border-success-ui-hover {
+  border-color: var(--success-a8);
+}
+
+@utility border-success-contrast {
+  border-color: var(--success-contrast);
+}
+
+@utility border-success-high-contrast {
+  border-color: var(--success-1);
+}
+
+/* error background utilities */
+@utility bg-error-level-1 {
+  background-color: var(--error-1);
+}
+
+@utility bg-error-level-2 {
+  background-color: var(--error-2);
+}
+
+@utility bg-error-soft {
+  background-color: var(--error-a3);
+}
+
+@utility bg-error-soft-hover {
+  background-color: var(--error-a2);
+}
+
+@utility bg-error-surface {
+  background-color: var(--error-surface);
+}
+
+@utility bg-error-solid {
+  background-color: var(--error-a9);
+}
+
+@utility bg-error-solid-hover {
+  background-color: var(--error-a10);
+}
+
+@utility bg-error-contrast {
+  background-color: var(--error-contrast);
+}
+
+@utility bg-error-high-contrast {
+  background-color: var(--error-a12);
+}
+
+/* error text utilities */
+@utility text-error-default {
+  color: var(--error-a12);
+}
+
+@utility text-error-light {
+  color: var(--error-a11);
+}
+
+@utility text-error-disabled {
+  color: var(--error-a8);
+}
+
+@utility text-error-contrast {
+  color: var(--error-contrast);
+}
+
+@utility text-error-high-contrast {
+  color: var(--error-1);
+}
+
+/* error border utilities */
+@utility border-error-default {
+  border-color: var(--error-a6);
+}
+
+@utility border-error-ui {
+  border-color: var(--error-a7);
+}
+
+@utility border-error-ui-hover {
+  border-color: var(--error-a8);
+}
+
+@utility border-error-contrast {
+  border-color: var(--error-contrast);
+}
+
+@utility border-error-high-contrast {
+  border-color: var(--error-1);
+}
+
+/* warning background utilities */
+@utility bg-warning-level-1 {
+  background-color: var(--warning-1);
+}
+
+@utility bg-warning-level-2 {
+  background-color: var(--warning-2);
+}
+
+@utility bg-warning-soft {
+  background-color: var(--warning-a3);
+}
+
+@utility bg-warning-soft-hover {
+  background-color: var(--warning-a2);
+}
+
+@utility bg-warning-surface {
+  background-color: var(--warning-surface);
+}
+
+@utility bg-warning-solid {
+  background-color: var(--warning-a9);
+}
+
+@utility bg-warning-solid-hover {
+  background-color: var(--warning-a10);
+}
+
+@utility bg-warning-contrast {
+  background-color: var(--warning-contrast);
+}
+
+@utility bg-warning-high-contrast {
+  background-color: var(--warning-a12);
+}
+
+/* warning text utilities */
+@utility text-warning-default {
+  color: var(--warning-a12);
+}
+
+@utility text-warning-light {
+  color: var(--warning-a11);
+}
+
+@utility text-warning-disabled {
+  color: var(--warning-a8);
+}
+
+@utility text-warning-contrast {
+  color: var(--warning-contrast);
+}
+
+@utility text-warning-high-contrast {
+  color: var(--warning-1);
+}
+
+/* warning border utilities */
+@utility border-warning-default {
+  border-color: var(--warning-a6);
+}
+
+@utility border-warning-ui {
+  border-color: var(--warning-a7);
+}
+
+@utility border-warning-ui-hover {
+  border-color: var(--warning-a8);
+}
+
+@utility border-warning-contrast {
+  border-color: var(--warning-contrast);
+}
+
+@utility border-warning-high-contrast {
+  border-color: var(--warning-1);
+}
+
+/* info background utilities */
+@utility bg-info-level-1 {
+  background-color: var(--info-1);
+}
+
+@utility bg-info-level-2 {
+  background-color: var(--info-2);
+}
+
+@utility bg-info-soft {
+  background-color: var(--info-a3);
+}
+
+@utility bg-info-soft-hover {
+  background-color: var(--info-a2);
+}
+
+@utility bg-info-surface {
+  background-color: var(--info-surface);
+}
+
+@utility bg-info-solid {
+  background-color: var(--info-a9);
+}
+
+@utility bg-info-solid-hover {
+  background-color: var(--info-a10);
+}
+
+@utility bg-info-contrast {
+  background-color: var(--info-contrast);
+}
+
+@utility bg-info-high-contrast {
+  background-color: var(--info-a12);
+}
+
+/* info text utilities */
+@utility text-info-default {
+  color: var(--info-a12);
+}
+
+@utility text-info-light {
+  color: var(--info-a11);
+}
+
+@utility text-info-disabled {
+  color: var(--info-a8);
+}
+
+@utility text-info-contrast {
+  color: var(--info-contrast);
+}
+
+@utility text-info-high-contrast {
+  color: var(--info-1);
+}
+
+/* info border utilities */
+@utility border-info-default {
+  border-color: var(--info-a6);
+}
+
+@utility border-info-ui {
+  border-color: var(--info-a7);
+}
+
+@utility border-info-ui-hover {
+  border-color: var(--info-a8);
+}
+
+@utility border-info-contrast {
+  border-color: var(--info-contrast);
+}
+
+@utility border-info-high-contrast {
+  border-color: var(--info-1);
+}
+