@pacem/pacem-theme-css 0.0.0-stage → 1.1.0-sierpinski

package/src/layout/coloring.css

@@ -0,0 +1,862 @@
+/* Coloring utilities: .text-{color}, .fill-{color}[-container], .halo-{color}[-container[-inverse]].
+   Each family is written once against private custom properties (--pacem--*), and every color class
+   only assigns them. The private properties do not inherit: a nested element never picks up its
+   ancestor's tint. */
+
+@property --pacem--text { syntax: '*'; inherits: false; }
+@property --pacem--text-hover { syntax: '*'; inherits: false; }
+@property --pacem--text-emphasis { syntax: '*'; inherits: false; }
+@property --pacem--text-color { syntax: '*'; inherits: false; }
+@property --pacem--text-color-hover { syntax: '*'; inherits: false; }
+@property --pacem--fill { syntax: '*'; inherits: false; }
+@property --pacem--fill-inverse { syntax: '*'; inherits: false; }
+@property --pacem--fill-hover { syntax: '*'; inherits: false; }
+@property --pacem--fill-inverse-hover { syntax: '*'; inherits: false; }
+@property --pacem--fill-emphasis { syntax: '*'; inherits: false; }
+@property --pacem--halo { syntax: '*'; inherits: false; }
+
+/* glassmorphism */
+.fill-glass {
+    backdrop-filter: blur(6px);
+    background-color: rgb(from var(--pacem-color-background) r g b / .5);
+}
+
+/* invert */
+.fill-invert {
+    background-color: var(--pacem-color-default);
+    color: var(--pacem-color-default-inverse);
+
+    &.fill-glass {
+        backdrop-filter: blur(6px);
+        background-color: rgb(from var(--pacem-color-default) r g b / .5);
+    }
+}
+
+/* #region text */
+
+:is(
+    .text-root,
+    .text-background,
+    .text-default,
+    .text-invert,
+    .text-primary,
+    .text-secondary,
+    .text-accent,
+    .text-info,
+    .text-success,
+    .text-warning,
+    .text-danger,
+    .text-error,
+    .text-disabled,
+    .text-green,
+    .text-yellow,
+    .text-brown,
+    .text-red,
+    .text-pink,
+    .text-blue,
+    .text-orange,
+    .text-purple,
+    .text-teal,
+    .text-gray
+) {
+    /* (forced) */
+    &:not(.text-interactive) {
+        color: var(--pacem--text-color, var(--pacem--text)) !important;
+    }
+
+    &.text-gradient {
+        background-image: linear-gradient(in oklab, var(--pacem--text), var(--pacem--text-emphasis));
+        background-clip: text;
+        color: transparent;
+        -webkit-text-fill-color: transparent;
+    }
+
+    &.text-interactive {
+        color: var(--pacem--text-color, var(--pacem--text));
+
+        &:hover,
+        &:focus {
+            color: var(--pacem--text-color-hover, var(--pacem--text-emphasis));
+
+            &.text-gradient {
+                background-image: linear-gradient(in oklab, var(--pacem--text-hover), var(--pacem--text-emphasis));
+                background-clip: text;
+                color: transparent;
+                -webkit-text-fill-color: transparent;
+            }
+        }
+    }
+}
+
+.text-root {
+    --pacem--text: var(--pacem-color-root);
+    --pacem--text-hover: var(--pacem-color-root-hover);
+    --pacem--text-emphasis: var(--pacem-color-root-emphasis-hover);
+}
+
+.text-background {
+    --pacem--text: var(--pacem-color-background);
+    --pacem--text-hover: var(--pacem-color-background-hover);
+    --pacem--text-emphasis: var(--pacem-color-background-emphasis-hover);
+}
+
+.text-default {
+    --pacem--text: var(--pacem-color-default);
+    --pacem--text-hover: var(--pacem-color-default-hover);
+    --pacem--text-emphasis: var(--pacem-color-default-emphasis-hover);
+}
+
+.text-invert {
+    --pacem--text: var(--pacem-color-invert);
+    --pacem--text-hover: var(--pacem-color-invert-hover);
+    --pacem--text-emphasis: var(--pacem-color-invert-emphasis-hover);
+    /* 'invert' behaves differently for backward-compatibility */
+    --pacem--text-color: var(--pacem-color-invert-inverse);
+    /* (sic) Less pointed to an undefined --pacem-color-invert-inverse-emphasis-hover: the hovered color is the inherited one */
+    --pacem--text-color-hover: currentColor;
+}
+
+.text-primary {
+    --pacem--text: var(--pacem-color-primary);
+    --pacem--text-hover: var(--pacem-color-primary-hover);
+    --pacem--text-emphasis: var(--pacem-color-primary-emphasis-hover);
+}
+
+.text-secondary {
+    --pacem--text: var(--pacem-color-secondary);
+    --pacem--text-hover: var(--pacem-color-secondary-hover);
+    --pacem--text-emphasis: var(--pacem-color-secondary-emphasis-hover);
+}
+
+.text-accent {
+    --pacem--text: var(--pacem-color-accent);
+    --pacem--text-hover: var(--pacem-color-accent-hover);
+    --pacem--text-emphasis: var(--pacem-color-accent-emphasis-hover);
+}
+
+.text-info {
+    --pacem--text: var(--pacem-color-info);
+    --pacem--text-hover: var(--pacem-color-info-hover);
+    --pacem--text-emphasis: var(--pacem-color-info-emphasis-hover);
+}
+
+.text-success {
+    --pacem--text: var(--pacem-color-success);
+    --pacem--text-hover: var(--pacem-color-success-hover);
+    --pacem--text-emphasis: var(--pacem-color-success-emphasis-hover);
+}
+
+.text-warning {
+    --pacem--text: var(--pacem-color-warning);
+    --pacem--text-hover: var(--pacem-color-warning-hover);
+    --pacem--text-emphasis: var(--pacem-color-warning-emphasis-hover);
+}
+
+.text-danger {
+    --pacem--text: var(--pacem-color-danger);
+    --pacem--text-hover: var(--pacem-color-danger-hover);
+    --pacem--text-emphasis: var(--pacem-color-danger-emphasis-hover);
+}
+
+.text-error {
+    --pacem--text: var(--pacem-color-error);
+    --pacem--text-hover: var(--pacem-color-error-hover);
+    --pacem--text-emphasis: var(--pacem-color-error-emphasis-hover);
+}
+
+.text-disabled {
+    --pacem--text: var(--pacem-color-disabled);
+    --pacem--text-hover: var(--pacem-color-disabled-hover);
+    --pacem--text-emphasis: var(--pacem-color-disabled-emphasis-hover);
+}
+
+.text-green {
+    --pacem--text: var(--pacem-color-green);
+    --pacem--text-hover: var(--pacem-color-green-hover);
+    --pacem--text-emphasis: var(--pacem-color-green-emphasis-hover);
+}
+
+.text-yellow {
+    --pacem--text: var(--pacem-color-yellow);
+    --pacem--text-hover: var(--pacem-color-yellow-hover);
+    --pacem--text-emphasis: var(--pacem-color-yellow-emphasis-hover);
+}
+
+.text-brown {
+    --pacem--text: var(--pacem-color-brown);
+    --pacem--text-hover: var(--pacem-color-brown-hover);
+    --pacem--text-emphasis: var(--pacem-color-brown-emphasis-hover);
+}
+
+.text-red {
+    --pacem--text: var(--pacem-color-red);
+    --pacem--text-hover: var(--pacem-color-red-hover);
+    --pacem--text-emphasis: var(--pacem-color-red-emphasis-hover);
+}
+
+.text-pink {
+    --pacem--text: var(--pacem-color-pink);
+    --pacem--text-hover: var(--pacem-color-pink-hover);
+    --pacem--text-emphasis: var(--pacem-color-pink-emphasis-hover);
+}
+
+.text-blue {
+    --pacem--text: var(--pacem-color-blue);
+    --pacem--text-hover: var(--pacem-color-blue-hover);
+    --pacem--text-emphasis: var(--pacem-color-blue-emphasis-hover);
+}
+
+.text-orange {
+    --pacem--text: var(--pacem-color-orange);
+    --pacem--text-hover: var(--pacem-color-orange-hover);
+    --pacem--text-emphasis: var(--pacem-color-orange-emphasis-hover);
+}
+
+.text-purple {
+    --pacem--text: var(--pacem-color-purple);
+    --pacem--text-hover: var(--pacem-color-purple-hover);
+    --pacem--text-emphasis: var(--pacem-color-purple-emphasis-hover);
+}
+
+.text-teal {
+    --pacem--text: var(--pacem-color-teal);
+    --pacem--text-hover: var(--pacem-color-teal-hover);
+    --pacem--text-emphasis: var(--pacem-color-teal-emphasis-hover);
+}
+
+.text-gray {
+    --pacem--text: var(--pacem-color-gray);
+    --pacem--text-hover: var(--pacem-color-gray-hover);
+    --pacem--text-emphasis: var(--pacem-color-gray-emphasis-hover);
+}
+
+/* #endregion */
+
+/* #region fill */
+
+:is(
+    .fill-root,
+    .fill-root-container,
+    .fill-background,
+    .fill-background-container,
+    .fill-default,
+    .fill-default-container,
+    .fill-invert,
+    .fill-invert-container,
+    .fill-primary,
+    .fill-primary-container,
+    .fill-secondary,
+    .fill-secondary-container,
+    .fill-accent,
+    .fill-accent-container,
+    .fill-info,
+    .fill-info-container,
+    .fill-success,
+    .fill-success-container,
+    .fill-warning,
+    .fill-warning-container,
+    .fill-danger,
+    .fill-danger-container,
+    .fill-error,
+    .fill-error-container,
+    .fill-disabled,
+    .fill-disabled-container,
+    .fill-green,
+    .fill-green-container,
+    .fill-yellow,
+    .fill-yellow-container,
+    .fill-brown,
+    .fill-brown-container,
+    .fill-red,
+    .fill-red-container,
+    .fill-pink,
+    .fill-pink-container,
+    .fill-blue,
+    .fill-blue-container,
+    .fill-orange,
+    .fill-orange-container,
+    .fill-purple,
+    .fill-purple-container,
+    .fill-teal,
+    .fill-teal-container,
+    .fill-gray,
+    .fill-gray-container
+) {
+    background-color: var(--pacem--fill);
+    color: var(--pacem--fill-inverse);
+
+    &.fill-glass {
+        backdrop-filter: blur(6px);
+        background-color: rgb(from var(--pacem--fill) r g b / .5);
+    }
+
+    &.fill-gradient {
+        background-image: linear-gradient(in oklab, var(--pacem--fill) 50%, var(--pacem--fill-hover) 100%);
+    }
+
+    &.fill-interactive:is(:hover, :focus) {
+        background-color: var(--pacem--fill-hover);
+        color: var(--pacem--fill-inverse-hover);
+
+        &.fill-glass {
+            backdrop-filter: blur(6px);
+            background-color: rgb(from var(--pacem--fill-hover) r g b / .5);
+        }
+
+        &.fill-gradient {
+            background-image: linear-gradient(in oklab, var(--pacem--fill-hover) 50%, var(--pacem--fill-emphasis) 100%);
+        }
+
+        :--glows & {
+            text-shadow: 0 0 8px var(--pacem--fill-inverse-hover);
+        }
+    }
+}
+
+.fill-root {
+    --pacem--fill: var(--pacem-color-root);
+    --pacem--fill-inverse: var(--pacem-color-root-inverse);
+    --pacem--fill-hover: var(--pacem-color-root-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-root-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-root-emphasis-hover);
+}
+
+.fill-root-container {
+    --pacem--fill: var(--pacem-color-root-container);
+    --pacem--fill-inverse: var(--pacem-color-root-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-root-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-root-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-root-container-emphasis-hover);
+}
+
+.fill-background {
+    --pacem--fill: var(--pacem-color-background);
+    --pacem--fill-inverse: var(--pacem-color-background-inverse);
+    --pacem--fill-hover: var(--pacem-color-background-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-background-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-background-emphasis-hover);
+}
+
+.fill-background-container {
+    --pacem--fill: var(--pacem-color-background-container);
+    --pacem--fill-inverse: var(--pacem-color-background-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-background-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-background-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-background-container-emphasis-hover);
+}
+
+.fill-default {
+    --pacem--fill: var(--pacem-color-default);
+    --pacem--fill-inverse: var(--pacem-color-default-inverse);
+    --pacem--fill-hover: var(--pacem-color-default-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-default-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-default-emphasis-hover);
+}
+
+.fill-default-container {
+    --pacem--fill: var(--pacem-color-default-container);
+    --pacem--fill-inverse: var(--pacem-color-default-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-default-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-default-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-default-container-emphasis-hover);
+}
+
+.fill-invert {
+    --pacem--fill: var(--pacem-color-invert);
+    --pacem--fill-inverse: var(--pacem-color-invert-inverse);
+    --pacem--fill-hover: var(--pacem-color-invert-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-invert-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-invert-emphasis-hover);
+}
+
+.fill-invert-container {
+    --pacem--fill: var(--pacem-color-invert-container);
+    --pacem--fill-inverse: var(--pacem-color-invert-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-invert-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-invert-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-invert-container-emphasis-hover);
+}
+
+.fill-primary {
+    --pacem--fill: var(--pacem-color-primary);
+    --pacem--fill-inverse: var(--pacem-color-primary-inverse);
+    --pacem--fill-hover: var(--pacem-color-primary-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-primary-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-primary-emphasis-hover);
+}
+
+.fill-primary-container {
+    --pacem--fill: var(--pacem-color-primary-container);
+    --pacem--fill-inverse: var(--pacem-color-primary-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-primary-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-primary-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-primary-container-emphasis-hover);
+}
+
+.fill-secondary {
+    --pacem--fill: var(--pacem-color-secondary);
+    --pacem--fill-inverse: var(--pacem-color-secondary-inverse);
+    --pacem--fill-hover: var(--pacem-color-secondary-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-secondary-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-secondary-emphasis-hover);
+}
+
+.fill-secondary-container {
+    --pacem--fill: var(--pacem-color-secondary-container);
+    --pacem--fill-inverse: var(--pacem-color-secondary-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-secondary-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-secondary-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-secondary-container-emphasis-hover);
+}
+
+.fill-accent {
+    --pacem--fill: var(--pacem-color-accent);
+    --pacem--fill-inverse: var(--pacem-color-accent-inverse);
+    --pacem--fill-hover: var(--pacem-color-accent-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-accent-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-accent-emphasis-hover);
+}
+
+.fill-accent-container {
+    --pacem--fill: var(--pacem-color-accent-container);
+    --pacem--fill-inverse: var(--pacem-color-accent-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-accent-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-accent-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-accent-container-emphasis-hover);
+}
+
+.fill-info {
+    --pacem--fill: var(--pacem-color-info);
+    --pacem--fill-inverse: var(--pacem-color-info-inverse);
+    --pacem--fill-hover: var(--pacem-color-info-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-info-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-info-emphasis-hover);
+}
+
+.fill-info-container {
+    --pacem--fill: var(--pacem-color-info-container);
+    --pacem--fill-inverse: var(--pacem-color-info-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-info-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-info-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-info-container-emphasis-hover);
+}
+
+.fill-success {
+    --pacem--fill: var(--pacem-color-success);
+    --pacem--fill-inverse: var(--pacem-color-success-inverse);
+    --pacem--fill-hover: var(--pacem-color-success-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-success-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-success-emphasis-hover);
+}
+
+.fill-success-container {
+    --pacem--fill: var(--pacem-color-success-container);
+    --pacem--fill-inverse: var(--pacem-color-success-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-success-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-success-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-success-container-emphasis-hover);
+}
+
+.fill-warning {
+    --pacem--fill: var(--pacem-color-warning);
+    --pacem--fill-inverse: var(--pacem-color-warning-inverse);
+    --pacem--fill-hover: var(--pacem-color-warning-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-warning-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-warning-emphasis-hover);
+}
+
+.fill-warning-container {
+    --pacem--fill: var(--pacem-color-warning-container);
+    --pacem--fill-inverse: var(--pacem-color-warning-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-warning-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-warning-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-warning-container-emphasis-hover);
+}
+
+.fill-danger {
+    --pacem--fill: var(--pacem-color-danger);
+    --pacem--fill-inverse: var(--pacem-color-danger-inverse);
+    --pacem--fill-hover: var(--pacem-color-danger-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-danger-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-danger-emphasis-hover);
+}
+
+.fill-danger-container {
+    --pacem--fill: var(--pacem-color-danger-container);
+    --pacem--fill-inverse: var(--pacem-color-danger-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-danger-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-danger-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-danger-container-emphasis-hover);
+}
+
+.fill-error {
+    --pacem--fill: var(--pacem-color-error);
+    --pacem--fill-inverse: var(--pacem-color-error-inverse);
+    --pacem--fill-hover: var(--pacem-color-error-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-error-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-error-emphasis-hover);
+}
+
+.fill-error-container {
+    --pacem--fill: var(--pacem-color-error-container);
+    --pacem--fill-inverse: var(--pacem-color-error-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-error-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-error-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-error-container-emphasis-hover);
+}
+
+.fill-disabled {
+    --pacem--fill: var(--pacem-color-disabled);
+    --pacem--fill-inverse: var(--pacem-color-disabled-inverse);
+    --pacem--fill-hover: var(--pacem-color-disabled-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-disabled-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-disabled-emphasis-hover);
+}
+
+.fill-disabled-container {
+    --pacem--fill: var(--pacem-color-disabled-container);
+    --pacem--fill-inverse: var(--pacem-color-disabled-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-disabled-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-disabled-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-disabled-container-emphasis-hover);
+}
+
+.fill-green {
+    --pacem--fill: var(--pacem-color-green);
+    --pacem--fill-inverse: var(--pacem-color-green-inverse);
+    --pacem--fill-hover: var(--pacem-color-green-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-green-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-green-emphasis-hover);
+}
+
+.fill-green-container {
+    --pacem--fill: var(--pacem-color-green-container);
+    --pacem--fill-inverse: var(--pacem-color-green-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-green-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-green-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-green-container-emphasis-hover);
+}
+
+.fill-yellow {
+    --pacem--fill: var(--pacem-color-yellow);
+    --pacem--fill-inverse: var(--pacem-color-yellow-inverse);
+    --pacem--fill-hover: var(--pacem-color-yellow-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-yellow-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-yellow-emphasis-hover);
+}
+
+.fill-yellow-container {
+    --pacem--fill: var(--pacem-color-yellow-container);
+    --pacem--fill-inverse: var(--pacem-color-yellow-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-yellow-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-yellow-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-yellow-container-emphasis-hover);
+}
+
+.fill-brown {
+    --pacem--fill: var(--pacem-color-brown);
+    --pacem--fill-inverse: var(--pacem-color-brown-inverse);
+    --pacem--fill-hover: var(--pacem-color-brown-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-brown-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-brown-emphasis-hover);
+}
+
+.fill-brown-container {
+    --pacem--fill: var(--pacem-color-brown-container);
+    --pacem--fill-inverse: var(--pacem-color-brown-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-brown-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-brown-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-brown-container-emphasis-hover);
+}
+
+.fill-red {
+    --pacem--fill: var(--pacem-color-red);
+    --pacem--fill-inverse: var(--pacem-color-red-inverse);
+    --pacem--fill-hover: var(--pacem-color-red-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-red-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-red-emphasis-hover);
+}
+
+.fill-red-container {
+    --pacem--fill: var(--pacem-color-red-container);
+    --pacem--fill-inverse: var(--pacem-color-red-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-red-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-red-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-red-container-emphasis-hover);
+}
+
+.fill-pink {
+    --pacem--fill: var(--pacem-color-pink);
+    --pacem--fill-inverse: var(--pacem-color-pink-inverse);
+    --pacem--fill-hover: var(--pacem-color-pink-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-pink-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-pink-emphasis-hover);
+}
+
+.fill-pink-container {
+    --pacem--fill: var(--pacem-color-pink-container);
+    --pacem--fill-inverse: var(--pacem-color-pink-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-pink-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-pink-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-pink-container-emphasis-hover);
+}
+
+.fill-blue {
+    --pacem--fill: var(--pacem-color-blue);
+    --pacem--fill-inverse: var(--pacem-color-blue-inverse);
+    --pacem--fill-hover: var(--pacem-color-blue-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-blue-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-blue-emphasis-hover);
+}
+
+.fill-blue-container {
+    --pacem--fill: var(--pacem-color-blue-container);
+    --pacem--fill-inverse: var(--pacem-color-blue-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-blue-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-blue-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-blue-container-emphasis-hover);
+}
+
+.fill-orange {
+    --pacem--fill: var(--pacem-color-orange);
+    --pacem--fill-inverse: var(--pacem-color-orange-inverse);
+    --pacem--fill-hover: var(--pacem-color-orange-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-orange-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-orange-emphasis-hover);
+}
+
+.fill-orange-container {
+    --pacem--fill: var(--pacem-color-orange-container);
+    --pacem--fill-inverse: var(--pacem-color-orange-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-orange-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-orange-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-orange-container-emphasis-hover);
+}
+
+.fill-purple {
+    --pacem--fill: var(--pacem-color-purple);
+    --pacem--fill-inverse: var(--pacem-color-purple-inverse);
+    --pacem--fill-hover: var(--pacem-color-purple-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-purple-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-purple-emphasis-hover);
+}
+
+.fill-purple-container {
+    --pacem--fill: var(--pacem-color-purple-container);
+    --pacem--fill-inverse: var(--pacem-color-purple-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-purple-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-purple-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-purple-container-emphasis-hover);
+}
+
+.fill-teal {
+    --pacem--fill: var(--pacem-color-teal);
+    --pacem--fill-inverse: var(--pacem-color-teal-inverse);
+    --pacem--fill-hover: var(--pacem-color-teal-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-teal-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-teal-emphasis-hover);
+}
+
+.fill-teal-container {
+    --pacem--fill: var(--pacem-color-teal-container);
+    --pacem--fill-inverse: var(--pacem-color-teal-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-teal-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-teal-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-teal-container-emphasis-hover);
+}
+
+.fill-gray {
+    --pacem--fill: var(--pacem-color-gray);
+    --pacem--fill-inverse: var(--pacem-color-gray-inverse);
+    --pacem--fill-hover: var(--pacem-color-gray-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-gray-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-gray-emphasis-hover);
+}
+
+.fill-gray-container {
+    --pacem--fill: var(--pacem-color-gray-container);
+    --pacem--fill-inverse: var(--pacem-color-gray-container-inverse);
+    --pacem--fill-hover: var(--pacem-color-gray-container-hover);
+    --pacem--fill-inverse-hover: var(--pacem-color-gray-container-inverse-hover);
+    --pacem--fill-emphasis: var(--pacem-color-gray-container-emphasis-hover);
+}
+
+/* #endregion */
+
+/* #region halo */
+
+:is(
+    .halo-root,
+    .halo-root-container,
+    .halo-root-container-inverse,
+    .halo-background,
+    .halo-background-container,
+    .halo-background-container-inverse,
+    .halo-default,
+    .halo-default-container,
+    .halo-default-container-inverse,
+    .halo-invert,
+    .halo-invert-container,
+    .halo-invert-container-inverse,
+    .halo-primary,
+    .halo-primary-container,
+    .halo-primary-container-inverse,
+    .halo-secondary,
+    .halo-secondary-container,
+    .halo-secondary-container-inverse,
+    .halo-accent,
+    .halo-accent-container,
+    .halo-accent-container-inverse,
+    .halo-info,
+    .halo-info-container,
+    .halo-info-container-inverse,
+    .halo-success,
+    .halo-success-container,
+    .halo-success-container-inverse,
+    .halo-warning,
+    .halo-warning-container,
+    .halo-warning-container-inverse,
+    .halo-danger,
+    .halo-danger-container,
+    .halo-danger-container-inverse,
+    .halo-error,
+    .halo-error-container,
+    .halo-error-container-inverse,
+    .halo-disabled,
+    .halo-disabled-container,
+    .halo-disabled-container-inverse,
+    .halo-green,
+    .halo-green-container,
+    .halo-green-container-inverse,
+    .halo-yellow,
+    .halo-yellow-container,
+    .halo-yellow-container-inverse,
+    .halo-brown,
+    .halo-brown-container,
+    .halo-brown-container-inverse,
+    .halo-red,
+    .halo-red-container,
+    .halo-red-container-inverse,
+    .halo-pink,
+    .halo-pink-container,
+    .halo-pink-container-inverse,
+    .halo-blue,
+    .halo-blue-container,
+    .halo-blue-container-inverse,
+    .halo-orange,
+    .halo-orange-container,
+    .halo-orange-container-inverse,
+    .halo-purple,
+    .halo-purple-container,
+    .halo-purple-container-inverse,
+    .halo-teal,
+    .halo-teal-container,
+    .halo-teal-container-inverse,
+    .halo-gray,
+    .halo-gray-container,
+    .halo-gray-container-inverse
+) {
+    box-shadow: 0 0 var(--pacem-grid-spacing) var(--pacem--halo);
+
+    &.halo-in {
+        box-shadow: inset 0 0 calc(var(--pacem-grid-spacing) / 2) var(--pacem--halo);
+    }
+
+    &.halo-in-out {
+        box-shadow: 0 0 var(--pacem-grid-spacing) var(--pacem--halo), inset 0 0 calc(var(--pacem-grid-spacing) / 2) var(--pacem--halo);
+    }
+}
+
+.halo-root { --pacem--halo: var(--pacem-color-root); }
+.halo-root-container { --pacem--halo: var(--pacem-color-root-container); }
+.halo-root-container-inverse { --pacem--halo: var(--pacem-color-root-container-inverse); }
+
+.halo-background { --pacem--halo: var(--pacem-color-background); }
+.halo-background-container { --pacem--halo: var(--pacem-color-background-container); }
+.halo-background-container-inverse { --pacem--halo: var(--pacem-color-background-container-inverse); }
+
+.halo-default { --pacem--halo: var(--pacem-color-default); }
+.halo-default-container { --pacem--halo: var(--pacem-color-default-container); }
+.halo-default-container-inverse { --pacem--halo: var(--pacem-color-default-container-inverse); }
+
+.halo-invert { --pacem--halo: var(--pacem-color-invert); }
+.halo-invert-container { --pacem--halo: var(--pacem-color-invert-container); }
+.halo-invert-container-inverse { --pacem--halo: var(--pacem-color-invert-container-inverse); }
+
+.halo-primary { --pacem--halo: var(--pacem-color-primary); }
+.halo-primary-container { --pacem--halo: var(--pacem-color-primary-container); }
+.halo-primary-container-inverse { --pacem--halo: var(--pacem-color-primary-container-inverse); }
+
+.halo-secondary { --pacem--halo: var(--pacem-color-secondary); }
+.halo-secondary-container { --pacem--halo: var(--pacem-color-secondary-container); }
+.halo-secondary-container-inverse { --pacem--halo: var(--pacem-color-secondary-container-inverse); }
+
+.halo-accent { --pacem--halo: var(--pacem-color-accent); }
+.halo-accent-container { --pacem--halo: var(--pacem-color-accent-container); }
+.halo-accent-container-inverse { --pacem--halo: var(--pacem-color-accent-container-inverse); }
+
+.halo-info { --pacem--halo: var(--pacem-color-info); }
+.halo-info-container { --pacem--halo: var(--pacem-color-info-container); }
+.halo-info-container-inverse { --pacem--halo: var(--pacem-color-info-container-inverse); }
+
+.halo-success { --pacem--halo: var(--pacem-color-success); }
+.halo-success-container { --pacem--halo: var(--pacem-color-success-container); }
+.halo-success-container-inverse { --pacem--halo: var(--pacem-color-success-container-inverse); }
+
+.halo-warning { --pacem--halo: var(--pacem-color-warning); }
+.halo-warning-container { --pacem--halo: var(--pacem-color-warning-container); }
+.halo-warning-container-inverse { --pacem--halo: var(--pacem-color-warning-container-inverse); }
+
+.halo-danger { --pacem--halo: var(--pacem-color-danger); }
+.halo-danger-container { --pacem--halo: var(--pacem-color-danger-container); }
+.halo-danger-container-inverse { --pacem--halo: var(--pacem-color-danger-container-inverse); }
+
+.halo-error { --pacem--halo: var(--pacem-color-error); }
+.halo-error-container { --pacem--halo: var(--pacem-color-error-container); }
+.halo-error-container-inverse { --pacem--halo: var(--pacem-color-error-container-inverse); }
+
+.halo-disabled { --pacem--halo: var(--pacem-color-disabled); }
+.halo-disabled-container { --pacem--halo: var(--pacem-color-disabled-container); }
+.halo-disabled-container-inverse { --pacem--halo: var(--pacem-color-disabled-container-inverse); }
+
+.halo-green { --pacem--halo: var(--pacem-color-green); }
+.halo-green-container { --pacem--halo: var(--pacem-color-green-container); }
+.halo-green-container-inverse { --pacem--halo: var(--pacem-color-green-container-inverse); }
+
+.halo-yellow { --pacem--halo: var(--pacem-color-yellow); }
+.halo-yellow-container { --pacem--halo: var(--pacem-color-yellow-container); }
+.halo-yellow-container-inverse { --pacem--halo: var(--pacem-color-yellow-container-inverse); }
+
+.halo-brown { --pacem--halo: var(--pacem-color-brown); }
+.halo-brown-container { --pacem--halo: var(--pacem-color-brown-container); }
+.halo-brown-container-inverse { --pacem--halo: var(--pacem-color-brown-container-inverse); }
+
+.halo-red { --pacem--halo: var(--pacem-color-red); }
+.halo-red-container { --pacem--halo: var(--pacem-color-red-container); }
+.halo-red-container-inverse { --pacem--halo: var(--pacem-color-red-container-inverse); }
+
+.halo-pink { --pacem--halo: var(--pacem-color-pink); }
+.halo-pink-container { --pacem--halo: var(--pacem-color-pink-container); }
+.halo-pink-container-inverse { --pacem--halo: var(--pacem-color-pink-container-inverse); }
+
+.halo-blue { --pacem--halo: var(--pacem-color-blue); }
+.halo-blue-container { --pacem--halo: var(--pacem-color-blue-container); }
+.halo-blue-container-inverse { --pacem--halo: var(--pacem-color-blue-container-inverse); }
+
+.halo-orange { --pacem--halo: var(--pacem-color-orange); }
+.halo-orange-container { --pacem--halo: var(--pacem-color-orange-container); }
+.halo-orange-container-inverse { --pacem--halo: var(--pacem-color-orange-container-inverse); }
+
+.halo-purple { --pacem--halo: var(--pacem-color-purple); }
+.halo-purple-container { --pacem--halo: var(--pacem-color-purple-container); }
+.halo-purple-container-inverse { --pacem--halo: var(--pacem-color-purple-container-inverse); }
+
+.halo-teal { --pacem--halo: var(--pacem-color-teal); }
+.halo-teal-container { --pacem--halo: var(--pacem-color-teal-container); }
+.halo-teal-container-inverse { --pacem--halo: var(--pacem-color-teal-container-inverse); }
+
+.halo-gray { --pacem--halo: var(--pacem-color-gray); }
+.halo-gray-container { --pacem--halo: var(--pacem-color-gray-container); }
+.halo-gray-container-inverse { --pacem--halo: var(--pacem-color-gray-container-inverse); }
+
+/* #endregion */