@alfalab/core-components 32.1.1 → 32.2.0-beta.0

package/vars/dist/typography.css

@@ -1,586 +0,0 @@
-: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);
-}