@alfalab/core-components-vars 10.1.0 → 10.2.0

package/src/no-typography.css

@@ -0,0 +1,313 @@
+/* THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY */
+
+@define-mixin accent_caps {
+    /* @mixin accent_caps */
+}
+
+@define-mixin accent_component_primary {
+    /* @mixin accent_component_primary */
+}
+
+@define-mixin accent_component_secondary {
+    /* @mixin accent_component_secondary */
+}
+
+@define-mixin accent_primary_large {
+    /* @mixin accent_primary_large */
+}
+
+@define-mixin accent_primary_medium {
+    /* @mixin accent_primary_medium */
+}
+
+@define-mixin accent_primary_small {
+    /* @mixin accent_primary_small */
+}
+
+@define-mixin accent_secondary_large {
+    /* @mixin accent_secondary_large */
+}
+
+@define-mixin accent_secondary_medium {
+    /* @mixin accent_secondary_medium */
+}
+
+@define-mixin accent_secondary_small {
+    /* @mixin accent_secondary_small */
+}
+
+@define-mixin accent_tagline {
+    /* @mixin accent_tagline */
+}
+
+@define-mixin action_caps {
+    /* @mixin action_caps */
+}
+
+@define-mixin action_component_primary {
+    /* @mixin action_component_primary */
+}
+
+@define-mixin action_component_secondary {
+    /* @mixin action_component_secondary */
+}
+
+@define-mixin action_primary_large {
+    /* @mixin action_primary_large */
+}
+
+@define-mixin action_primary_medium {
+    /* @mixin action_primary_medium */
+}
+
+@define-mixin action_primary_small {
+    /* @mixin action_primary_small */
+}
+
+@define-mixin action_secondary_large {
+    /* @mixin action_secondary_large */
+}
+
+@define-mixin action_secondary_medium {
+    /* @mixin action_secondary_medium */
+}
+
+@define-mixin action_secondary_small {
+    /* @mixin action_secondary_small */
+}
+
+@define-mixin action_tagline {
+    /* @mixin action_tagline */
+}
+
+@define-mixin headline_large {
+    /* @mixin headline_large */
+}
+
+@define-mixin headline_medium {
+    /* @mixin headline_medium */
+}
+
+@define-mixin headline_small {
+    /* @mixin headline_small */
+}
+
+@define-mixin headline_xlarge {
+    /* @mixin headline_xlarge */
+}
+
+@define-mixin headline_xsmall {
+    /* @mixin headline_xsmall */
+}
+
+@define-mixin headline-mobile_large {
+    /* @mixin headline-mobile_large */
+}
+
+@define-mixin headline-mobile_medium {
+    /* @mixin headline-mobile_medium */
+}
+
+@define-mixin headline-mobile_small {
+    /* @mixin headline-mobile_small */
+}
+
+@define-mixin headline-mobile_xlarge {
+    /* @mixin headline-mobile_xlarge */
+}
+
+@define-mixin headline-mobile_xsmall {
+    /* @mixin headline-mobile_xsmall */
+}
+
+@define-mixin headline-system_large {
+    /* @mixin headline-system_large */
+}
+
+@define-mixin headline-system_medium {
+    /* @mixin headline-system_medium */
+}
+
+@define-mixin headline-system_small {
+    /* @mixin headline-system_small */
+}
+
+@define-mixin headline-system_xlarge {
+    /* @mixin headline-system_xlarge */
+}
+
+@define-mixin headline-system_xsmall {
+    /* @mixin headline-system_xsmall */
+}
+
+@define-mixin headline-system-mobile_large {
+    /* @mixin headline-system-mobile_large */
+}
+
+@define-mixin headline-system-mobile_medium {
+    /* @mixin headline-system-mobile_medium */
+}
+
+@define-mixin headline-system-mobile_small {
+    /* @mixin headline-system-mobile_small */
+}
+
+@define-mixin headline-system-mobile_xlarge {
+    /* @mixin headline-system-mobile_xlarge */
+}
+
+@define-mixin headline-system-mobile_xsmall {
+    /* @mixin headline-system-mobile_xsmall */
+}
+
+@define-mixin key_large {
+    /* @mixin key_large */
+}
+
+@define-mixin key_medium {
+    /* @mixin key_medium */
+}
+
+@define-mixin key_small {
+    /* @mixin key_small */
+}
+
+@define-mixin key_xlarge {
+    /* @mixin key_xlarge */
+}
+
+@define-mixin key_xsmall {
+    /* @mixin key_xsmall */
+}
+
+@define-mixin paragraph_caps {
+    /* @mixin paragraph_caps */
+}
+
+@define-mixin paragraph_component_primary {
+    /* @mixin paragraph_component_primary */
+}
+
+@define-mixin paragraph_component_secondary {
+    /* @mixin paragraph_component_secondary */
+}
+
+@define-mixin paragraph_primary_large {
+    /* @mixin paragraph_primary_large */
+}
+
+@define-mixin paragraph_primary_medium {
+    /* @mixin paragraph_primary_medium */
+}
+
+@define-mixin paragraph_primary_small {
+    /* @mixin paragraph_primary_small */
+}
+
+@define-mixin paragraph_secondary_large {
+    /* @mixin paragraph_secondary_large */
+}
+
+@define-mixin paragraph_secondary_medium {
+    /* @mixin paragraph_secondary_medium */
+}
+
+@define-mixin paragraph_secondary_small {
+    /* @mixin paragraph_secondary_small */
+}
+
+@define-mixin paragraph_tagline {
+    /* @mixin paragraph_tagline */
+}
+
+@define-mixin promo_large {
+    /* @mixin promo_large */
+}
+
+@define-mixin promo_medium {
+    /* @mixin promo_medium */
+}
+
+@define-mixin promo_small {
+    /* @mixin promo_small */
+}
+
+@define-mixin promo_xlarge {
+    /* @mixin promo_xlarge */
+}
+
+@define-mixin promo_xsmall {
+    /* @mixin promo_xsmall */
+}
+
+@define-mixin promo-mobile_large {
+    /* @mixin promo-mobile_large */
+}
+
+@define-mixin promo-mobile_medium {
+    /* @mixin promo-mobile_medium */
+}
+
+@define-mixin promo-mobile_small {
+    /* @mixin promo-mobile_small */
+}
+
+@define-mixin promo-mobile_xlarge {
+    /* @mixin promo-mobile_xlarge */
+}
+
+@define-mixin promo-mobile_xsmall {
+    /* @mixin promo-mobile_xsmall */
+}
+
+@define-mixin promo-system_large {
+    /* @mixin promo-system_large */
+}
+
+@define-mixin promo-system_medium {
+    /* @mixin promo-system_medium */
+}
+
+@define-mixin promo-system_small {
+    /* @mixin promo-system_small */
+}
+
+@define-mixin promo-system_xlarge {
+    /* @mixin promo-system_xlarge */
+}
+
+@define-mixin promo-system_xsmall {
+    /* @mixin promo-system_xsmall */
+}
+
+@define-mixin promo-system-mobile_large {
+    /* @mixin promo-system-mobile_large */
+}
+
+@define-mixin promo-system-mobile_medium {
+    /* @mixin promo-system-mobile_medium */
+}
+
+@define-mixin promo-system-mobile_small {
+    /* @mixin promo-system-mobile_small */
+}
+
+@define-mixin promo-system-mobile_xlarge {
+    /* @mixin promo-system-mobile_xlarge */
+}
+
+@define-mixin promo-system-mobile_xsmall {
+    /* @mixin promo-system-mobile_xsmall */
+}
+
+@define-mixin accent_component {
+    /* @mixin accent_component */
+} /* deprecated */
+
+@define-mixin action_component {
+    /* @mixin action_component */
+} /* deprecated */
+
+@define-mixin paragraph_component {
+    /* @mixin paragraph_component */
+} /* deprecated */

package/src/shadows-bluetint.css

@@ -1,24 +1,30 @@
 :root {
     --shadow-xs: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-s: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-m: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+    --shadow-s:
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-m:
+        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
         0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-l: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+    --shadow-l:
+        0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
         0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-xl: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
+    --shadow-xl:
+        0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
         0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
         0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
 
     /* Hard */
     --shadow-xs-hard: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-s-hard: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
-        0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-m-hard: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+    --shadow-s-hard:
+        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    --shadow-m-hard:
+        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
         0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-l-hard: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
+    --shadow-l-hard:
+        0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
         0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-xl-hard: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
+    --shadow-xl-hard:
+        0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
         0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
         0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
 
@@ -30,14 +36,17 @@
     --shadow-xl-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
 
     /* Hard up */
-    --shadow-xs-hard-up: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
-        0 -2px 4px rgba(0, 0, 0, 0.16);
-    --shadow-s-hard-up: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
-        0 -4px 8px rgba(0, 0, 0, 0.16);
-    --shadow-m-hard-up: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
+    --shadow-xs-hard-up:
+        0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04), 0 -2px 4px rgba(0, 0, 0, 0.16);
+    --shadow-s-hard-up:
+        0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08), 0 -4px 8px rgba(0, 0, 0, 0.16);
+    --shadow-m-hard-up:
+        0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
         0 -8px 16px rgba(0, 0, 0, 0.16);
-    --shadow-l-hard-up: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
+    --shadow-l-hard-up:
+        0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
         0 -12px 24px rgba(0, 0, 0, 0.16);
-    --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
+    --shadow-xl-hard-up:
+        0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
         0 -16px 32px rgba(0, 0, 0, 0.16);
 }

package/src/shadows-bluetint.module.ts

@@ -1,12 +1,12 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 
 export const shadowXs = "0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04)";
-export const shadowS = "0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),\n        0 0 1px rgba(0, 0, 0, 0.04)";
+export const shadowS = "0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04)";
 export const shadowM = "0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),\n        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04)";
 export const shadowL = "0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),\n        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04)";
 export const shadowXl = "0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),\n        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),\n        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04)";
 export const shadowXsHard = "0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16)";
-export const shadowSHard = "0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),\n        0 0 1px rgba(0, 0, 0, 0.16)";
+export const shadowSHard = "0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16)";
 export const shadowMHard = "0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),\n        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16)";
 export const shadowLHard = "0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),\n        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16)";
 export const shadowXlHard = "0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),\n        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),\n        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16)";
@@ -15,8 +15,8 @@ export const shadowSUp = "0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0,
 export const shadowMUp = "0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16)";
 export const shadowLUp = "0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24)";
 export const shadowXlUp = "0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32)";
-export const shadowXsHardUp = "0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),\n        0 -2px 4px rgba(0, 0, 0, 0.16)";
-export const shadowSHardUp = "0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),\n        0 -4px 8px rgba(0, 0, 0, 0.16)";
+export const shadowXsHardUp = "0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04), 0 -2px 4px rgba(0, 0, 0, 0.16)";
+export const shadowSHardUp = "0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08), 0 -4px 8px rgba(0, 0, 0, 0.16)";
 export const shadowMHardUp = "0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),\n        0 -8px 16px rgba(0, 0, 0, 0.16)";
 export const shadowLHardUp = "0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),\n        0 -12px 24px rgba(0, 0, 0, 0.16)";
 export const shadowXlHardUp = "0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),\n        0 -16px 32px rgba(0, 0, 0, 0.16)";

package/src/shadows-bluetint.ts

@@ -2,25 +2,31 @@
 
 const styles = `:root {
     --shadow-xs: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-s: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
-        0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-m: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+    --shadow-s:
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-m:
+        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
         0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-l: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+    --shadow-l:
+        0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
         0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
-    --shadow-xl: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
+    --shadow-xl:
+        0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
         0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
         0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
 
     /* Hard */
     --shadow-xs-hard: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-s-hard: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
-        0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-m-hard: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+    --shadow-s-hard:
+        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    --shadow-m-hard:
+        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
         0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-l-hard: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
+    --shadow-l-hard:
+        0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
         0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
-    --shadow-xl-hard: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
+    --shadow-xl-hard:
+        0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
         0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
         0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
 
@@ -32,15 +38,18 @@ const styles = `:root {
     --shadow-xl-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
 
     /* Hard up */
-    --shadow-xs-hard-up: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
-        0 -2px 4px rgba(0, 0, 0, 0.16);
-    --shadow-s-hard-up: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
-        0 -4px 8px rgba(0, 0, 0, 0.16);
-    --shadow-m-hard-up: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
+    --shadow-xs-hard-up:
+        0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04), 0 -2px 4px rgba(0, 0, 0, 0.16);
+    --shadow-s-hard-up:
+        0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08), 0 -4px 8px rgba(0, 0, 0, 0.16);
+    --shadow-m-hard-up:
+        0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
         0 -8px 16px rgba(0, 0, 0, 0.16);
-    --shadow-l-hard-up: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
+    --shadow-l-hard-up:
+        0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
         0 -12px 24px rgba(0, 0, 0, 0.16);
-    --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
+    --shadow-xl-hard-up:
+        0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
         0 -16px 32px rgba(0, 0, 0, 0.16);
 }
 `;

package/src/shadows-indigo.css

@@ -6,15 +6,20 @@
     --shadow-xl: 0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32);
 
     /* Hard */
-    --shadow-xs-hard: 0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04),
+    --shadow-xs-hard:
+        0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04),
         0 2px 4px rgba(11, 31, 53, 0.16);
-    --shadow-s-hard: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08),
+    --shadow-s-hard:
+        0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08),
         0 4px 8px rgba(11, 31, 53, 0.16);
-    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+    --shadow-m-hard:
+        0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
         0 8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-hard: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24),
+    --shadow-l-hard:
+        0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24),
         0 12px 24px rgba(11, 31, 53, 0.16);
-    --shadow-xl-hard: 0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32),
+    --shadow-xl-hard:
+        0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32),
         0 16px 32px rgba(11, 31, 53, 0.16);
 
     /* Up */
@@ -25,14 +30,19 @@
     --shadow-xl-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32);
 
     /* Hard up */
-    --shadow-xs-hard-up: 0 0 4px rgba(11, 31, 53, 0.02), 0 -2px 4px rgba(11, 31, 53, 0.04),
+    --shadow-xs-hard-up:
+        0 0 4px rgba(11, 31, 53, 0.02), 0 -2px 4px rgba(11, 31, 53, 0.04),
         0 -2px 4px rgba(11, 31, 53, 0.16);
-    --shadow-s-hard-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08),
+    --shadow-s-hard-up:
+        0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08),
         0 -4px 8px rgba(11, 31, 53, 0.16);
-    --shadow-m-hard-up: 0 0 16px rgba(11, 31, 53, 0.08), 0 -8px 16px rgba(11, 31, 53, 0.16),
+    --shadow-m-hard-up:
+        0 0 16px rgba(11, 31, 53, 0.08), 0 -8px 16px rgba(11, 31, 53, 0.16),
         0 -8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-hard-up: 0 0 24px rgba(11, 31, 53, 0.12), 0 -12px 24px rgba(11, 31, 53, 0.24),
+    --shadow-l-hard-up:
+        0 0 24px rgba(11, 31, 53, 0.12), 0 -12px 24px rgba(11, 31, 53, 0.24),
         0 -12px 24px rgba(11, 31, 53, 0.16);
-    --shadow-xl-hard-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32),
+    --shadow-xl-hard-up:
+        0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32),
         0 -16px 32px rgba(11, 31, 53, 0.16);
 }

package/src/shadows-indigo.ts

@@ -8,15 +8,20 @@ const styles = `:root {
     --shadow-xl: 0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32);
 
     /* Hard */
-    --shadow-xs-hard: 0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04),
+    --shadow-xs-hard:
+        0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04),
         0 2px 4px rgba(11, 31, 53, 0.16);
-    --shadow-s-hard: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08),
+    --shadow-s-hard:
+        0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08),
         0 4px 8px rgba(11, 31, 53, 0.16);
-    --shadow-m-hard: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
+    --shadow-m-hard:
+        0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16),
         0 8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-hard: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24),
+    --shadow-l-hard:
+        0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24),
         0 12px 24px rgba(11, 31, 53, 0.16);
-    --shadow-xl-hard: 0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32),
+    --shadow-xl-hard:
+        0 0 32px rgba(11, 31, 53, 0.16), 0 16px 32px rgba(11, 31, 53, 0.32),
         0 16px 32px rgba(11, 31, 53, 0.16);
 
     /* Up */
@@ -27,15 +32,20 @@ const styles = `:root {
     --shadow-xl-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32);
 
     /* Hard up */
-    --shadow-xs-hard-up: 0 0 4px rgba(11, 31, 53, 0.02), 0 -2px 4px rgba(11, 31, 53, 0.04),
+    --shadow-xs-hard-up:
+        0 0 4px rgba(11, 31, 53, 0.02), 0 -2px 4px rgba(11, 31, 53, 0.04),
         0 -2px 4px rgba(11, 31, 53, 0.16);
-    --shadow-s-hard-up: 0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08),
+    --shadow-s-hard-up:
+        0 0 8px rgba(11, 31, 53, 0.04), 0 -4px 8px rgba(11, 31, 53, 0.08),
         0 -4px 8px rgba(11, 31, 53, 0.16);
-    --shadow-m-hard-up: 0 0 16px rgba(11, 31, 53, 0.08), 0 -8px 16px rgba(11, 31, 53, 0.16),
+    --shadow-m-hard-up:
+        0 0 16px rgba(11, 31, 53, 0.08), 0 -8px 16px rgba(11, 31, 53, 0.16),
         0 -8px 16px rgba(11, 31, 53, 0.16);
-    --shadow-l-hard-up: 0 0 24px rgba(11, 31, 53, 0.12), 0 -12px 24px rgba(11, 31, 53, 0.24),
+    --shadow-l-hard-up:
+        0 0 24px rgba(11, 31, 53, 0.12), 0 -12px 24px rgba(11, 31, 53, 0.24),
         0 -12px 24px rgba(11, 31, 53, 0.16);
-    --shadow-xl-hard-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32),
+    --shadow-xl-hard-up:
+        0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32),
         0 -16px 32px rgba(11, 31, 53, 0.16);
 }
 `;

package/src/typography-vars.css

@@ -0,0 +1,10 @@
+:root {
+    --font-family-system:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-styrene:
+        'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
+}