@alfalab/core-components 27.5.0-beta.1 → 27.6.0

package/vars/dist/typography.css

@@ -0,0 +1,586 @@
+: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;
+}
+
+@define-mixin headline_xlarge {
+    font-size: 48px;
+    line-height: 64px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline_large {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline_medium {
+    font-size: 32px;
+    line-height: 40px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline_small {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline_xsmall {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin paragraph_primary_large {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_primary_medium {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_primary_small {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_secondary_large {
+    font-size: 13px;
+    line-height: 16px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_secondary_medium {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_secondary_small {
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_component {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_component_primary {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_component_secondary {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+}
+
+@define-mixin paragraph_caps {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+}
+
+@define-mixin accent_primary_large {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 700;
+}
+
+@define-mixin accent_primary_medium {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+}
+
+@define-mixin accent_primary_small {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+}
+
+@define-mixin accent_secondary_large {
+    font-size: 13px;
+    line-height: 16px;
+    font-weight: 700;
+}
+
+@define-mixin accent_secondary_medium {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+}
+
+@define-mixin accent_secondary_small {
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 700;
+}
+
+@define-mixin accent_component {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+}
+
+@define-mixin accent_component_primary {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+}
+
+@define-mixin accent_component_secondary {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 700;
+}
+
+@define-mixin accent_caps {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+}
+
+@define-mixin headline-system_xlarge {
+    font-size: 48px;
+    line-height: 52px;
+    font-weight: 700;
+}
+
+@define-mixin headline-system_large {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 700;
+}
+
+@define-mixin headline-system_medium {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 700;
+}
+
+@define-mixin headline-system_small {
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 700;
+}
+
+@define-mixin headline-system_xsmall {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 700;
+}
+
+@define-mixin action_primary_large {
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+}
+
+@define-mixin action_primary_medium {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+}
+
+@define-mixin action_primary_small {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 500;
+}
+
+@define-mixin action_secondary_large {
+    font-size: 13px;
+    line-height: 16px;
+    font-weight: 500;
+}
+
+@define-mixin action_secondary_medium {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+}
+
+@define-mixin action_secondary_small {
+    font-size: 11px;
+    line-height: 16px;
+    font-weight: 500;
+}
+
+@define-mixin action_component {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500;
+}
+
+@define-mixin action_component_primary {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500;
+}
+
+@define-mixin action_component_secondary {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 500;
+}
+
+@define-mixin action_caps {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 700;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+}
+
+@define-mixin promo_xlarge {
+    font-size: 48px;
+    line-height: 64px;
+    font-weight: 400;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin promo_large {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 400;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin promo_medium {
+    font-size: 32px;
+    line-height: 40px;
+    font-weight: 400;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin promo_small {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: 400;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin promo_xsmall {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 400;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin key_xlarge {
+    font-size: 144px;
+    line-height: 180px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin key_large {
+    font-size: 120px;
+    line-height: 132px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin key_medium {
+    font-size: 96px;
+    line-height: 120px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin key_small {
+    font-size: 80px;
+    line-height: 96px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin key_xsmall {
+    font-size: 64px;
+    line-height: 80px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline-mobile_xlarge {
+    font-size: 34px;
+    line-height: 40px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline-mobile_large {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline-mobile_medium {
+    font-size: 26px;
+    line-height: 32px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline-mobile_small {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline-mobile_xsmall {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin headline-system-mobile_xlarge {
+    font-size: 34px;
+    line-height: 40px;
+    font-weight: 600;
+}
+
+@define-mixin headline-system-mobile_large {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 600;
+}
+
+@define-mixin headline-system-mobile_medium {
+    font-size: 26px;
+    line-height: 32px;
+    font-weight: 600;
+}
+
+@define-mixin headline-system-mobile_small {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 600;
+}
+
+@define-mixin headline-system-mobile_xsmall {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+}
+
+@define-mixin promo-system_xlarge {
+    font-size: 48px;
+    line-height: 52px;
+    font-weight: 400;
+}
+
+@define-mixin promo-system_large {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 400;
+}
+
+@define-mixin promo-system_medium {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 400;
+}
+
+@define-mixin promo-system_small {
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 400;
+}
+
+@define-mixin promo-system_xsmall {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 400;
+}
+
+@define-mixin legacy_primary_small {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+}
+
+@define-mixin system_48-52_bold {
+    font-size: 48px;
+    line-height: 52px;
+    font-weight: 700;
+}
+
+@define-mixin system_40-48_bold {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 700;
+}
+
+@define-mixin system_30-36_bold {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 700;
+}
+
+@define-mixin system_22-26_bold {
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 700;
+}
+
+@define-mixin system_18-22_bold {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 700;
+}
+
+@define-mixin system_18-22_regular {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 400;
+}
+
+@define-mixin system_18-22_medium {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 500;
+}
+
+@define-mixin system_16-24_regular {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+}
+
+@define-mixin system_16-24_medium {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+}
+
+@define-mixin system_16-24_bold {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+}
+
+@define-mixin system_16-20_regular {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+}
+
+@define-mixin system_16-20_medium {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500;
+}
+
+@define-mixin system_16-20_bold {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+}
+
+@define-mixin system_14-18_regular {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+}
+
+@define-mixin system_12-16_medium_caps {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+}
+
+@define-mixin system_12-16_regular {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+}
+
+@define-mixin styrene_40-48_medium {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin styrene_32-40_medium {
+    font-size: 32px;
+    line-height: 40px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin styrene_28-34_medium {
+    font-size: 28px;
+    line-height: 34px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin styrene_24-30_medium {
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}
+
+@define-mixin styrene_20-24_medium {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+}

package/vars/package.json

@@ -1,13 +1,3 @@
 {
-    "name": "@alfalab/core-components-vars",
-    "version": "6.1.0",
-    "description": "",
-    "keywords": [],
-    "license": "MIT",
-    "style": "index.css",
-    "publishConfig": {
-        "access": "public",
-        "directory": "dist"
-    },
-    "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
+    "module": "./esm/index.js"
 }