@epilot/volt-ui 0.1.0

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

@@ -0,0 +1,889 @@
+/* Auto-generated style utilities from src/tokens/colors.ts */
+/* Generated on 2025-09-29T09:48:24.895Z */
+
+/* PALETTE COLORS STYLE UTILITIES */
+
+/* mauve style utilities */
+@utility style-mauve-solid {
+  background-color: var(--mauve-a9);
+  color: var(--mauve-contrast);
+}
+
+@utility style-mauve-solid-hover {
+  background-color: var(--mauve-a10);
+  color: var(--mauve-contrast);
+}
+
+@utility style-mauve-soft {
+  background-color: var(--mauve-a3);
+  color: var(--mauve-12);
+}
+
+@utility style-mauve-soft-hover {
+  background-color: var(--mauve-a4);
+  color: var(--mauve-12);
+}
+
+@utility style-mauve-surface {
+  background-color: var(--mauve-surface);
+  color: var(--mauve-12);
+  border-color: var(--mauve-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-mauve-surface-hover {
+  background-color: var(--mauve-a3);
+  color: var(--mauve-12);
+  border-color: var(--mauve-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-mauve-high-contrast {
+  background-color: var(--mauve-a12);
+  color: var(--mauve-1);
+}
+
+/* red style utilities */
+@utility style-red-solid {
+  background-color: var(--red-a9);
+  color: var(--red-contrast);
+}
+
+@utility style-red-solid-hover {
+  background-color: var(--red-a10);
+  color: var(--red-contrast);
+}
+
+@utility style-red-soft {
+  background-color: var(--red-a3);
+  color: var(--red-12);
+}
+
+@utility style-red-soft-hover {
+  background-color: var(--red-a4);
+  color: var(--red-12);
+}
+
+@utility style-red-surface {
+  background-color: var(--red-surface);
+  color: var(--red-12);
+  border-color: var(--red-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-red-surface-hover {
+  background-color: var(--red-a3);
+  color: var(--red-12);
+  border-color: var(--red-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-red-high-contrast {
+  background-color: var(--red-a12);
+  color: var(--red-1);
+}
+
+/* pink style utilities */
+@utility style-pink-solid {
+  background-color: var(--pink-a9);
+  color: var(--pink-contrast);
+}
+
+@utility style-pink-solid-hover {
+  background-color: var(--pink-a10);
+  color: var(--pink-contrast);
+}
+
+@utility style-pink-soft {
+  background-color: var(--pink-a3);
+  color: var(--pink-12);
+}
+
+@utility style-pink-soft-hover {
+  background-color: var(--pink-a4);
+  color: var(--pink-12);
+}
+
+@utility style-pink-surface {
+  background-color: var(--pink-surface);
+  color: var(--pink-12);
+  border-color: var(--pink-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-pink-surface-hover {
+  background-color: var(--pink-a3);
+  color: var(--pink-12);
+  border-color: var(--pink-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-pink-high-contrast {
+  background-color: var(--pink-a12);
+  color: var(--pink-1);
+}
+
+/* purple style utilities */
+@utility style-purple-solid {
+  background-color: var(--purple-a9);
+  color: var(--purple-contrast);
+}
+
+@utility style-purple-solid-hover {
+  background-color: var(--purple-a10);
+  color: var(--purple-contrast);
+}
+
+@utility style-purple-soft {
+  background-color: var(--purple-a3);
+  color: var(--purple-12);
+}
+
+@utility style-purple-soft-hover {
+  background-color: var(--purple-a4);
+  color: var(--purple-12);
+}
+
+@utility style-purple-surface {
+  background-color: var(--purple-surface);
+  color: var(--purple-12);
+  border-color: var(--purple-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-purple-surface-hover {
+  background-color: var(--purple-a3);
+  color: var(--purple-12);
+  border-color: var(--purple-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-purple-high-contrast {
+  background-color: var(--purple-a12);
+  color: var(--purple-1);
+}
+
+/* indigo style utilities */
+@utility style-indigo-solid {
+  background-color: var(--indigo-a9);
+  color: var(--indigo-contrast);
+}
+
+@utility style-indigo-solid-hover {
+  background-color: var(--indigo-a10);
+  color: var(--indigo-contrast);
+}
+
+@utility style-indigo-soft {
+  background-color: var(--indigo-a3);
+  color: var(--indigo-12);
+}
+
+@utility style-indigo-soft-hover {
+  background-color: var(--indigo-a4);
+  color: var(--indigo-12);
+}
+
+@utility style-indigo-surface {
+  background-color: var(--indigo-surface);
+  color: var(--indigo-12);
+  border-color: var(--indigo-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-indigo-surface-hover {
+  background-color: var(--indigo-a3);
+  color: var(--indigo-12);
+  border-color: var(--indigo-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-indigo-high-contrast {
+  background-color: var(--indigo-a12);
+  color: var(--indigo-1);
+}
+
+/* blue style utilities */
+@utility style-blue-solid {
+  background-color: var(--blue-a9);
+  color: var(--blue-contrast);
+}
+
+@utility style-blue-solid-hover {
+  background-color: var(--blue-a10);
+  color: var(--blue-contrast);
+}
+
+@utility style-blue-soft {
+  background-color: var(--blue-a3);
+  color: var(--blue-12);
+}
+
+@utility style-blue-soft-hover {
+  background-color: var(--blue-a4);
+  color: var(--blue-12);
+}
+
+@utility style-blue-surface {
+  background-color: var(--blue-surface);
+  color: var(--blue-12);
+  border-color: var(--blue-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-blue-surface-hover {
+  background-color: var(--blue-a3);
+  color: var(--blue-12);
+  border-color: var(--blue-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-blue-high-contrast {
+  background-color: var(--blue-a12);
+  color: var(--blue-1);
+}
+
+/* cyan style utilities */
+@utility style-cyan-solid {
+  background-color: var(--cyan-a9);
+  color: var(--cyan-contrast);
+}
+
+@utility style-cyan-solid-hover {
+  background-color: var(--cyan-a10);
+  color: var(--cyan-contrast);
+}
+
+@utility style-cyan-soft {
+  background-color: var(--cyan-a3);
+  color: var(--cyan-12);
+}
+
+@utility style-cyan-soft-hover {
+  background-color: var(--cyan-a4);
+  color: var(--cyan-12);
+}
+
+@utility style-cyan-surface {
+  background-color: var(--cyan-surface);
+  color: var(--cyan-12);
+  border-color: var(--cyan-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-cyan-surface-hover {
+  background-color: var(--cyan-a3);
+  color: var(--cyan-12);
+  border-color: var(--cyan-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-cyan-high-contrast {
+  background-color: var(--cyan-a12);
+  color: var(--cyan-1);
+}
+
+/* teal style utilities */
+@utility style-teal-solid {
+  background-color: var(--teal-a9);
+  color: var(--teal-contrast);
+}
+
+@utility style-teal-solid-hover {
+  background-color: var(--teal-a10);
+  color: var(--teal-contrast);
+}
+
+@utility style-teal-soft {
+  background-color: var(--teal-a3);
+  color: var(--teal-12);
+}
+
+@utility style-teal-soft-hover {
+  background-color: var(--teal-a4);
+  color: var(--teal-12);
+}
+
+@utility style-teal-surface {
+  background-color: var(--teal-surface);
+  color: var(--teal-12);
+  border-color: var(--teal-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-teal-surface-hover {
+  background-color: var(--teal-a3);
+  color: var(--teal-12);
+  border-color: var(--teal-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-teal-high-contrast {
+  background-color: var(--teal-a12);
+  color: var(--teal-1);
+}
+
+/* green style utilities */
+@utility style-green-solid {
+  background-color: var(--green-a9);
+  color: var(--green-contrast);
+}
+
+@utility style-green-solid-hover {
+  background-color: var(--green-a10);
+  color: var(--green-contrast);
+}
+
+@utility style-green-soft {
+  background-color: var(--green-a3);
+  color: var(--green-12);
+}
+
+@utility style-green-soft-hover {
+  background-color: var(--green-a4);
+  color: var(--green-12);
+}
+
+@utility style-green-surface {
+  background-color: var(--green-surface);
+  color: var(--green-12);
+  border-color: var(--green-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-green-surface-hover {
+  background-color: var(--green-a3);
+  color: var(--green-12);
+  border-color: var(--green-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-green-high-contrast {
+  background-color: var(--green-a12);
+  color: var(--green-1);
+}
+
+/* bronze style utilities */
+@utility style-bronze-solid {
+  background-color: var(--bronze-a9);
+  color: var(--bronze-contrast);
+}
+
+@utility style-bronze-solid-hover {
+  background-color: var(--bronze-a10);
+  color: var(--bronze-contrast);
+}
+
+@utility style-bronze-soft {
+  background-color: var(--bronze-a3);
+  color: var(--bronze-12);
+}
+
+@utility style-bronze-soft-hover {
+  background-color: var(--bronze-a4);
+  color: var(--bronze-12);
+}
+
+@utility style-bronze-surface {
+  background-color: var(--bronze-surface);
+  color: var(--bronze-12);
+  border-color: var(--bronze-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-bronze-surface-hover {
+  background-color: var(--bronze-a3);
+  color: var(--bronze-12);
+  border-color: var(--bronze-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-bronze-high-contrast {
+  background-color: var(--bronze-a12);
+  color: var(--bronze-1);
+}
+
+/* sky style utilities */
+@utility style-sky-solid {
+  background-color: var(--sky-a9);
+  color: var(--sky-contrast);
+}
+
+@utility style-sky-solid-hover {
+  background-color: var(--sky-a10);
+  color: var(--sky-contrast);
+}
+
+@utility style-sky-soft {
+  background-color: var(--sky-a3);
+  color: var(--sky-12);
+}
+
+@utility style-sky-soft-hover {
+  background-color: var(--sky-a4);
+  color: var(--sky-12);
+}
+
+@utility style-sky-surface {
+  background-color: var(--sky-surface);
+  color: var(--sky-12);
+  border-color: var(--sky-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-sky-surface-hover {
+  background-color: var(--sky-a3);
+  color: var(--sky-12);
+  border-color: var(--sky-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-sky-high-contrast {
+  background-color: var(--sky-a12);
+  color: var(--sky-1);
+}
+
+/* mint style utilities */
+@utility style-mint-solid {
+  background-color: var(--mint-a9);
+  color: var(--mint-contrast);
+}
+
+@utility style-mint-solid-hover {
+  background-color: var(--mint-a10);
+  color: var(--mint-contrast);
+}
+
+@utility style-mint-soft {
+  background-color: var(--mint-a3);
+  color: var(--mint-12);
+}
+
+@utility style-mint-soft-hover {
+  background-color: var(--mint-a4);
+  color: var(--mint-12);
+}
+
+@utility style-mint-surface {
+  background-color: var(--mint-surface);
+  color: var(--mint-12);
+  border-color: var(--mint-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-mint-surface-hover {
+  background-color: var(--mint-a3);
+  color: var(--mint-12);
+  border-color: var(--mint-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-mint-high-contrast {
+  background-color: var(--mint-a12);
+  color: var(--mint-1);
+}
+
+/* lime style utilities */
+@utility style-lime-solid {
+  background-color: var(--lime-a9);
+  color: var(--lime-contrast);
+}
+
+@utility style-lime-solid-hover {
+  background-color: var(--lime-a10);
+  color: var(--lime-contrast);
+}
+
+@utility style-lime-soft {
+  background-color: var(--lime-a3);
+  color: var(--lime-12);
+}
+
+@utility style-lime-soft-hover {
+  background-color: var(--lime-a4);
+  color: var(--lime-12);
+}
+
+@utility style-lime-surface {
+  background-color: var(--lime-surface);
+  color: var(--lime-12);
+  border-color: var(--lime-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-lime-surface-hover {
+  background-color: var(--lime-a3);
+  color: var(--lime-12);
+  border-color: var(--lime-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-lime-high-contrast {
+  background-color: var(--lime-a12);
+  color: var(--lime-1);
+}
+
+/* yellow style utilities */
+@utility style-yellow-solid {
+  background-color: var(--yellow-a9);
+  color: var(--yellow-contrast);
+}
+
+@utility style-yellow-solid-hover {
+  background-color: var(--yellow-a10);
+  color: var(--yellow-contrast);
+}
+
+@utility style-yellow-soft {
+  background-color: var(--yellow-a3);
+  color: var(--yellow-12);
+}
+
+@utility style-yellow-soft-hover {
+  background-color: var(--yellow-a4);
+  color: var(--yellow-12);
+}
+
+@utility style-yellow-surface {
+  background-color: var(--yellow-surface);
+  color: var(--yellow-12);
+  border-color: var(--yellow-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-yellow-surface-hover {
+  background-color: var(--yellow-a3);
+  color: var(--yellow-12);
+  border-color: var(--yellow-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-yellow-high-contrast {
+  background-color: var(--yellow-a12);
+  color: var(--yellow-1);
+}
+
+/* orange style utilities */
+@utility style-orange-solid {
+  background-color: var(--orange-a9);
+  color: var(--orange-contrast);
+}
+
+@utility style-orange-solid-hover {
+  background-color: var(--orange-a10);
+  color: var(--orange-contrast);
+}
+
+@utility style-orange-soft {
+  background-color: var(--orange-a3);
+  color: var(--orange-12);
+}
+
+@utility style-orange-soft-hover {
+  background-color: var(--orange-a4);
+  color: var(--orange-12);
+}
+
+@utility style-orange-surface {
+  background-color: var(--orange-surface);
+  color: var(--orange-12);
+  border-color: var(--orange-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-orange-surface-hover {
+  background-color: var(--orange-a3);
+  color: var(--orange-12);
+  border-color: var(--orange-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-orange-high-contrast {
+  background-color: var(--orange-a12);
+  color: var(--orange-1);
+}
+
+/* SYSTEM COLORS STYLE UTILITIES */
+
+/* accent style utilities */
+@utility style-accent-solid {
+  background-color: var(--accent-a9);
+  color: var(--accent-contrast);
+}
+
+@utility style-accent-solid-hover {
+  background-color: var(--accent-a10);
+  color: var(--accent-contrast);
+}
+
+@utility style-accent-soft {
+  background-color: var(--accent-a3);
+  color: var(--accent-12);
+}
+
+@utility style-accent-soft-hover {
+  background-color: var(--accent-a4);
+  color: var(--accent-12);
+}
+
+@utility style-accent-surface {
+  background-color: var(--accent-surface);
+  color: var(--accent-12);
+  border-color: var(--accent-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-accent-surface-hover {
+  background-color: var(--accent-a3);
+  color: var(--accent-12);
+  border-color: var(--accent-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-accent-high-contrast {
+  background-color: var(--accent-a12);
+  color: var(--accent-1);
+}
+
+/* gray style utilities */
+@utility style-gray-solid {
+  background-color: var(--gray-a9);
+  color: var(--gray-contrast);
+}
+
+@utility style-gray-solid-hover {
+  background-color: var(--gray-a10);
+  color: var(--gray-contrast);
+}
+
+@utility style-gray-soft {
+  background-color: var(--gray-a3);
+  color: var(--gray-12);
+}
+
+@utility style-gray-soft-hover {
+  background-color: var(--gray-a4);
+  color: var(--gray-12);
+}
+
+@utility style-gray-surface {
+  background-color: var(--gray-surface);
+  color: var(--gray-12);
+  border-color: var(--gray-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-gray-surface-hover {
+  background-color: var(--gray-a3);
+  color: var(--gray-12);
+  border-color: var(--gray-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-gray-high-contrast {
+  background-color: var(--gray-a12);
+  color: var(--gray-1);
+}
+
+/* success style utilities */
+@utility style-success-solid {
+  background-color: var(--success-a9);
+  color: var(--success-contrast);
+}
+
+@utility style-success-solid-hover {
+  background-color: var(--success-a10);
+  color: var(--success-contrast);
+}
+
+@utility style-success-soft {
+  background-color: var(--success-a3);
+  color: var(--success-12);
+}
+
+@utility style-success-soft-hover {
+  background-color: var(--success-a4);
+  color: var(--success-12);
+}
+
+@utility style-success-surface {
+  background-color: var(--success-surface);
+  color: var(--success-12);
+  border-color: var(--success-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-success-surface-hover {
+  background-color: var(--success-a3);
+  color: var(--success-12);
+  border-color: var(--success-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-success-high-contrast {
+  background-color: var(--success-a12);
+  color: var(--success-1);
+}
+
+/* error style utilities */
+@utility style-error-solid {
+  background-color: var(--error-a9);
+  color: var(--error-contrast);
+}
+
+@utility style-error-solid-hover {
+  background-color: var(--error-a10);
+  color: var(--error-contrast);
+}
+
+@utility style-error-soft {
+  background-color: var(--error-a3);
+  color: var(--error-12);
+}
+
+@utility style-error-soft-hover {
+  background-color: var(--error-a4);
+  color: var(--error-12);
+}
+
+@utility style-error-surface {
+  background-color: var(--error-surface);
+  color: var(--error-12);
+  border-color: var(--error-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-error-surface-hover {
+  background-color: var(--error-a3);
+  color: var(--error-12);
+  border-color: var(--error-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-error-high-contrast {
+  background-color: var(--error-a12);
+  color: var(--error-1);
+}
+
+/* warning style utilities */
+@utility style-warning-solid {
+  background-color: var(--warning-a9);
+  color: var(--warning-contrast);
+}
+
+@utility style-warning-solid-hover {
+  background-color: var(--warning-a10);
+  color: var(--warning-contrast);
+}
+
+@utility style-warning-soft {
+  background-color: var(--warning-a3);
+  color: var(--warning-12);
+}
+
+@utility style-warning-soft-hover {
+  background-color: var(--warning-a4);
+  color: var(--warning-12);
+}
+
+@utility style-warning-surface {
+  background-color: var(--warning-surface);
+  color: var(--warning-12);
+  border-color: var(--warning-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-warning-surface-hover {
+  background-color: var(--warning-a3);
+  color: var(--warning-12);
+  border-color: var(--warning-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-warning-high-contrast {
+  background-color: var(--warning-a12);
+  color: var(--warning-1);
+}
+
+/* info style utilities */
+@utility style-info-solid {
+  background-color: var(--info-a9);
+  color: var(--info-contrast);
+}
+
+@utility style-info-solid-hover {
+  background-color: var(--info-a10);
+  color: var(--info-contrast);
+}
+
+@utility style-info-soft {
+  background-color: var(--info-a3);
+  color: var(--info-12);
+}
+
+@utility style-info-soft-hover {
+  background-color: var(--info-a4);
+  color: var(--info-12);
+}
+
+@utility style-info-surface {
+  background-color: var(--info-surface);
+  color: var(--info-12);
+  border-color: var(--info-a6);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-info-surface-hover {
+  background-color: var(--info-a3);
+  color: var(--info-12);
+  border-color: var(--info-a7);
+  border-width: 1px;
+  border-style: solid;
+}
+
+@utility style-info-high-contrast {
+  background-color: var(--info-a12);
+  color: var(--info-1);
+}
+