@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/tokens/colors.css

@@ -0,0 +1,403 @@
+/* Generated from theme/less by theme/css/tools/tokens.ts, then curated by hand. */
+/* Color modules: every semantic and palette color gets hover/emphasis/container variants,
+   derived at runtime from the base and inverse colors (see --pacem-mix-* in tokens/system.css).
+   Registered as <color> so that they compute to absolute colors (readable via getComputedStyle) and animate. */
+@property --pacem-color-root { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-root-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-background-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-default-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-invert-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-primary-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-secondary-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-accent-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-info-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-success-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-warning-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-danger-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-error-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-green-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-yellow-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-brown-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-red-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-pink-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-blue-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-orange-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-purple-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-teal-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-emphasis-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-container { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-container-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-container-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-gray-container-inverse-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+
+@layer pacem.tokens {
+    :root, [data-theme] {
+        --pacem-color-root-inverse: var(--pacem-color-default);
+        --pacem-color-root-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-root));
+        --pacem-color-root-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-root));
+        --pacem-color-root-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-root-inverse));
+        --pacem-color-root-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-root));
+        --pacem-color-root-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-root-container));
+        --pacem-color-root-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-root));
+        --pacem-color-root-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-root-container-inverse));
+
+        --pacem-color-background-inverse: var(--pacem-color-default);
+        --pacem-color-background-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-background));
+        --pacem-color-background-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-background));
+        --pacem-color-background-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-background-inverse));
+        --pacem-color-background-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-background));
+        --pacem-color-background-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-background-container));
+        --pacem-color-background-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-background));
+        --pacem-color-background-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-background-container-inverse));
+
+        --pacem-color-default-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-default));
+        --pacem-color-default-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-default));
+        --pacem-color-default-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-default-inverse));
+        --pacem-color-default-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-default));
+        --pacem-color-default-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-default-container));
+        --pacem-color-default-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-default));
+        --pacem-color-default-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-default-container-inverse));
+
+        --pacem-color-invert: var(--pacem-color-default);
+        --pacem-color-invert-inverse: var(--pacem-color-background);
+        --pacem-color-invert-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-invert));
+        --pacem-color-invert-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-invert));
+        --pacem-color-invert-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-invert-inverse));
+        --pacem-color-invert-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-invert));
+        --pacem-color-invert-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-invert-container));
+        --pacem-color-invert-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-invert));
+        --pacem-color-invert-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-invert-container-inverse));
+
+        --pacem-color-primary-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-primary));
+        --pacem-color-primary-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-primary));
+        --pacem-color-primary-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-primary-inverse));
+        --pacem-color-primary-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-primary));
+        --pacem-color-primary-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-primary-container));
+        --pacem-color-primary-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-primary));
+        --pacem-color-primary-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-primary-container-inverse));
+
+        --pacem-color-secondary-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-secondary));
+        --pacem-color-secondary-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-secondary));
+        --pacem-color-secondary-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-secondary-inverse));
+        --pacem-color-secondary-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-secondary));
+        --pacem-color-secondary-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-secondary-container));
+        --pacem-color-secondary-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-secondary));
+        --pacem-color-secondary-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-secondary-container-inverse));
+
+        --pacem-color-accent-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-accent));
+        --pacem-color-accent-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-accent));
+        --pacem-color-accent-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-accent-inverse));
+        --pacem-color-accent-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-accent));
+        --pacem-color-accent-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-accent-container));
+        --pacem-color-accent-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-accent));
+        --pacem-color-accent-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-accent-container-inverse));
+
+        --pacem-color-info-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-info));
+        --pacem-color-info-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-info));
+        --pacem-color-info-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-info-inverse));
+        --pacem-color-info-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-info));
+        --pacem-color-info-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-info-container));
+        --pacem-color-info-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-info));
+        --pacem-color-info-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-info-container-inverse));
+
+        --pacem-color-success-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-success));
+        --pacem-color-success-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-success));
+        --pacem-color-success-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-success-inverse));
+        --pacem-color-success-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-success));
+        --pacem-color-success-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-success-container));
+        --pacem-color-success-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-success));
+        --pacem-color-success-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-success-container-inverse));
+
+        --pacem-color-warning-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-warning));
+        --pacem-color-warning-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-warning));
+        --pacem-color-warning-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-warning-inverse));
+        --pacem-color-warning-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-warning));
+        --pacem-color-warning-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-warning-container));
+        --pacem-color-warning-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-warning));
+        --pacem-color-warning-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-warning-container-inverse));
+
+        --pacem-color-danger-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-danger));
+        --pacem-color-danger-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-danger));
+        --pacem-color-danger-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-danger-inverse));
+        --pacem-color-danger-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-danger));
+        --pacem-color-danger-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-danger-container));
+        --pacem-color-danger-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-danger));
+        --pacem-color-danger-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-danger-container-inverse));
+
+        --pacem-color-error-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-error));
+        --pacem-color-error-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-error));
+        --pacem-color-error-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-error-inverse));
+        --pacem-color-error-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-error));
+        --pacem-color-error-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-error-container));
+        --pacem-color-error-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-error));
+        --pacem-color-error-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-error-container-inverse));
+
+        --pacem-color-disabled-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-disabled));
+        --pacem-color-disabled-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-disabled));
+        --pacem-color-disabled-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-disabled-inverse));
+        --pacem-color-disabled-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-disabled));
+        --pacem-color-disabled-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-disabled-container));
+        --pacem-color-disabled-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-disabled));
+        --pacem-color-disabled-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-disabled-container-inverse));
+
+        --pacem-color-green-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-green));
+        --pacem-color-green-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-green));
+        --pacem-color-green-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-green-inverse));
+        --pacem-color-green-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-green));
+        --pacem-color-green-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-green-container));
+        --pacem-color-green-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-green));
+        --pacem-color-green-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-green-container-inverse));
+
+        --pacem-color-yellow-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-yellow));
+        --pacem-color-yellow-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-yellow));
+        --pacem-color-yellow-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-yellow-inverse));
+        --pacem-color-yellow-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-yellow));
+        --pacem-color-yellow-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-yellow-container));
+        --pacem-color-yellow-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-yellow));
+        --pacem-color-yellow-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-yellow-container-inverse));
+
+        --pacem-color-brown-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-brown));
+        --pacem-color-brown-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-brown));
+        --pacem-color-brown-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-brown-inverse));
+        --pacem-color-brown-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-brown));
+        --pacem-color-brown-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-brown-container));
+        --pacem-color-brown-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-brown));
+        --pacem-color-brown-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-brown-container-inverse));
+
+        --pacem-color-red-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-red));
+        --pacem-color-red-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-red));
+        --pacem-color-red-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-red-inverse));
+        --pacem-color-red-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-red));
+        --pacem-color-red-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-red-container));
+        --pacem-color-red-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-red));
+        --pacem-color-red-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-red-container-inverse));
+
+        --pacem-color-pink-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-pink));
+        --pacem-color-pink-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-pink));
+        --pacem-color-pink-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-pink-inverse));
+        --pacem-color-pink-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-pink));
+        --pacem-color-pink-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-pink-container));
+        --pacem-color-pink-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-pink));
+        --pacem-color-pink-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-pink-container-inverse));
+
+        --pacem-color-blue-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-blue));
+        --pacem-color-blue-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-blue));
+        --pacem-color-blue-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-blue-inverse));
+        --pacem-color-blue-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-blue));
+        --pacem-color-blue-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-blue-container));
+        --pacem-color-blue-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-blue));
+        --pacem-color-blue-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-blue-container-inverse));
+
+        --pacem-color-orange-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-orange));
+        --pacem-color-orange-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-orange));
+        --pacem-color-orange-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-orange-inverse));
+        --pacem-color-orange-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-orange));
+        --pacem-color-orange-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-orange-container));
+        --pacem-color-orange-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-orange));
+        --pacem-color-orange-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-orange-container-inverse));
+
+        --pacem-color-purple-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-purple));
+        --pacem-color-purple-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-purple));
+        --pacem-color-purple-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-purple-inverse));
+        --pacem-color-purple-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-purple));
+        --pacem-color-purple-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-purple-container));
+        --pacem-color-purple-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-purple));
+        --pacem-color-purple-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-purple-container-inverse));
+
+        --pacem-color-teal-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-teal));
+        --pacem-color-teal-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-teal));
+        --pacem-color-teal-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-teal-inverse));
+        --pacem-color-teal-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-teal));
+        --pacem-color-teal-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-teal-container));
+        --pacem-color-teal-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-teal));
+        --pacem-color-teal-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-teal-container-inverse));
+
+        --pacem-color-gray-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-gray));
+        --pacem-color-gray-emphasis-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-emphasis), var(--pacem-color-gray));
+        --pacem-color-gray-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-gray-inverse));
+        --pacem-color-gray-container: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-container), var(--pacem-color-gray));
+        --pacem-color-gray-container-hover: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-hover), var(--pacem-color-gray-container));
+        --pacem-color-gray-container-inverse: color-mix(in srgb, var(--pacem-mix-tint) var(--pacem-mix-container-inverse), var(--pacem-color-gray));
+        --pacem-color-gray-container-inverse-hover: color-mix(in srgb, var(--pacem-mix-shade) var(--pacem-mix-inverse-hover), var(--pacem-color-gray-container-inverse));
+    }
+}

package/src/tokens/components.css

@@ -0,0 +1,16 @@
+/* Component tokens: what Less decided at compile time with theme guards (@shadows, @glows, @uppercase_*, ...).
+   Themes override them (see themes/*.css). The value `initial` means "not declared": the property then
+   computes to `unset` (inherited properties inherit, the others get their initial value). */
+
+@layer pacem.tokens {
+    :root, [data-theme] {
+        /* @uppercase_headings, @uppercase_titles */
+        --pacem-transform-heading: uppercase;
+        --pacem-transform-title: uppercase;
+        /* @uppercase_buttons */
+        --pacem-transform-button: var(--pacem-transform-heading);
+        /* @uppercase_carousels */
+        --pacem-transform-carousel: var(--pacem-transform-heading);
+
+    }
+}

package/src/tokens/system.css

@@ -0,0 +1,92 @@
+/* System tokens: everything pacem.less used to compute in its `:root` block,
+   besides the color modules (colors.css) and the theme variables (theme.css). */
+
+/* Registered so that getComputedStyle() returns resolved values (read by balloon.ts, bottom-sheet.ts, ...). */
+@property --pacem-grid-spacing { syntax: '<length>'; inherits: true; initial-value: 24px; }
+@property --pacem-grid-cell { syntax: '<length>'; inherits: true; initial-value: 76px; }
+@property --pacem-grid-double-spacing { syntax: '<length>'; inherits: true; initial-value: 48px; }
+@property --pacem-layout-header-height { syntax: '<length>'; inherits: true; initial-value: 76px; }
+@property --pacem-layout-footer-height { syntax: '<length>'; inherits: true; initial-value: 52px; }
+@property --pacem-layout-bigfooter-height { syntax: '<length>'; inherits: true; initial-value: 76px; }
+@property --pacem-layout-toolbar-height { syntax: '<length>'; inherits: true; initial-value: 24px; }
+@property --pacem-balloon-tail-size { syntax: '<length>'; inherits: true; initial-value: 24px; }
+@property --pacem-balloon-tail-inset { syntax: '<length>'; inherits: true; initial-value: 8px; }
+@property --pacem-zindex-toast { syntax: '<integer>'; inherits: true; initial-value: 2000; }
+@property --pacem-zindex-balloon { syntax: '<integer>'; inherits: true; initial-value: 1900; }
+@property --pacem-zindex-lightbox { syntax: '<integer>'; inherits: true; initial-value: 1800; }
+@property --pacem-zindex-menu { syntax: '<integer>'; inherits: true; initial-value: 1700; }
+@property --pacem-zindex-header { syntax: '<integer>'; inherits: true; initial-value: 1600; }
+@property --pacem-color-balloon { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-balloon-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-balloon-emphasis { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-border { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-button { syntax: '<color>'; inherits: true; initial-value: transparent; }
+@property --pacem-color-disabled-button-inverse { syntax: '<color>'; inherits: true; initial-value: transparent; }
+
+@layer pacem.tokens {
+    :root, [data-theme] {
+        /* overridden by themebuilder palettes (themes/*.palette.css) */
+        --pacem-prebuilt: false;
+
+        /* color-module derivation (dark scheme: hovers mix towards white, containers towards black) */
+        --pacem-mix-tint: #fff;
+        --pacem-mix-shade: #000;
+        --pacem-mix-hover: 15%;
+        --pacem-mix-emphasis: 25%;
+        --pacem-mix-inverse-hover: 5%;
+        --pacem-mix-container: 70%;
+        --pacem-mix-container-inverse: 60%;
+
+        /* aliases */
+        --pacem-color-disabled-button: var(--pacem-color-button-back-disabled);
+        --pacem-color-disabled-button-inverse: var(--pacem-color-button-fore-disabled);
+        --pacem-color-balloon-hover: var(--pacem-color-contextmenu-hover-back);
+        --pacem-color-balloon-emphasis: var(--pacem-color-contextmenu-hover-back);
+
+        /* spacing + sizing */
+        --pacem-grid-double-spacing: calc(2 * var(--pacem-grid-spacing));
+        --pacem-size-1: calc(var(--pacem-grid-spacing) / 3);
+        --pacem-size-2: calc(var(--pacem-grid-spacing) / 3 * 2);
+        --pacem-size-3: calc(var(--pacem-grid-spacing) / 3 * 3);
+        --pacem-size-4: calc(var(--pacem-grid-spacing) / 3 * 4);
+        --pacem-size-5: calc(var(--pacem-grid-spacing) / 3 * 5);
+        --pacem-size-6: calc(var(--pacem-grid-spacing) / 3 * 6);
+        --pacem-size-7: calc(var(--pacem-grid-spacing) / 3 * 7);
+        --pacem-size-8: calc(var(--pacem-grid-spacing) / 3 * 8);
+        --pacem-size-9: calc(var(--pacem-grid-spacing) / 3 * 9);
+        --pacem-size-10: calc(var(--pacem-grid-spacing) / 3 * 10);
+        --pacem-size-11: calc(var(--pacem-grid-spacing) / 3 * 11);
+        --pacem-size-12: calc(var(--pacem-grid-spacing) / 3 * 12);
+        --pacem-size--1: 1px;
+        --pacem-size--2: 2px;
+        --pacem-size--3: 3px;
+        --pacem-size--4: 4px;
+        --pacem-size--5: 5px;
+        --pacem-size--6: 6px;
+        --pacem-size--7: 7px;
+        --pacem-size--8: 8px;
+        --pacem-size--9: 9px;
+        --pacem-size--10: 10px;
+        --pacem-size--11: 11px;
+        --pacem-size--12: 12px;
+
+        /* z-indexing (layout/shared.less) */
+        --pacem-zindex-toast: var(--pacem-max-z-index);
+        --pacem-zindex-balloon: calc(var(--pacem-zindex-toast) - 100);
+        --pacem-zindex-lightbox: calc(var(--pacem-zindex-balloon) - 100);
+        --pacem-zindex-menu: calc(var(--pacem-zindex-lightbox) - 100);
+        --pacem-zindex-header: calc(var(--pacem-zindex-menu) - 100);
+
+        /* font api urls, read by CustomElementUtils (core/utils-customelement.ts) to load the web fonts */
+        --pacem-font-icons-api-url: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200';
+        --pacem-font-main-api-url: 'https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap';
+        --pacem-font-std-api-url: 'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap';
+        --pacem-font-tech-api-url: 'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap';
+        --pacem-font-btn-api-url: '';
+
+        /* body background (themes may set an image, e.g. in their tokens file) */
+        --pacem-body-background-image: none;
+        --pacem-body-background-size: auto;
+        --pacem-body-background-attachment: scroll;
+    }
+}