From 6e00d88cb8524ea4445c204883882a46ceb4ad11 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 8 Nov 2025 11:07:52 +0100 Subject: Heading typography --- src/objects/_divider.scss | 2 +- src/objects/_divider.vars.scss | 1 + src/objects/_heading.scss | 6 +++-- src/objects/_heading.vars.scss | 54 ++++++++++++++++++++++++++---------------- src/scopes/_headings.scss | 6 +++-- 5 files changed, 44 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 27af173..51175a7 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -24,7 +24,7 @@ line-height: 1; color: props.get(vars.$strong--label-color); text-transform: uppercase; - letter-spacing: .5px; + letter-spacing: props.get(vars.$letter-spacing); background-color: transparent; &::before, diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 688fbb3..7081f47 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -6,6 +6,7 @@ $margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; $vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; $dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; +$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 82e03f3..2d27658 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -32,26 +32,28 @@ transparent props.get(vars.$bg-end)); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes { @include bem.modifier($mod) { font-family: props.get($font-family); font-size: props.get($font-size); font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); line-height: props.get($line-height); + color: props.get($text-color); text-transform: props.get($text-transform); letter-spacing: props.get($letter-spacing); } } @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$display--sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes { @include bem.modifier($mod) { font-family: props.get($font-family); font-size: props.get($font-size); font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); line-height: props.get($line-height); + color: props.get($text-color); text-transform: props.get($text-transform); letter-spacing: props.get($letter-spacing); transform: translateX(props.get(vars.$offset)); diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index f6b77fc..ccef017 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -5,8 +5,22 @@ $offset: props.def(--o-heading--offset, -.02em) !default; $margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; -$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; -$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; +$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; + +$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default; +$text-color--xl: props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default; +$text-color--lg: props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default; +$text-color--md: props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default; +$text-color--sm: props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$text-color--xs: props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default; + +$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default; +$display--text-color--xl: props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default; +$display--text-color--lg: props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default; +$display--text-color--md: props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default; +$display--text-color--sm: props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default; +$display--text-color--xs: props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; $bg-start: props.def(--o-heading--bg-start, .05em) !default; $bg-end: props.def(--o-heading--bg-end, .5em) !default; @@ -51,27 +65,27 @@ $text-transform--md: props.def(--o-heading--md--text-transform, none) !default $font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; $line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; -$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; -$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; +$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default; +$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default; +$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default; $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default; $font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; $line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; $font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; -$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; +$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default; $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default; $sizes: ( - 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs, - 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm, - 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md, - 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg, - 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl, - 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl, + 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs $text-color--xs, + 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm $text-color--sm, + 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md $text-color--md, + 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg $text-color--lg, + 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl $text-color--xl, + 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl $text-color--xxl, ) !default; $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; @@ -108,7 +122,7 @@ $display--text-transform--md: props.def(--o-heading--display--md--text-transfo $display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; $display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; +$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--100)) !default; $display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; $display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; @@ -117,7 +131,7 @@ $display--text-transform--sm: props.def(--o-heading--display--sm--text-transfo $display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; $display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; $display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; -$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; +$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default; $display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; $display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default; @@ -130,10 +144,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; $display--sizes: ( - 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs, - 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm, - 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md, - 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg, - 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl, - 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl, + 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs $display--text-color--xs, + 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm $display--text-color--sm, + 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md $display--text-color--md, + 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg $display--text-color--lg, + 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl, + 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl, ) !default; diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 7a9f088..0a56ef1 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -40,26 +40,28 @@ transparent .6em); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); font-size: props.get($font-size); font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); line-height: props.get($line-height); + color: props.get($text-color); text-transform: props.get($text-transform); letter-spacing: props.get($letter-spacing); } } @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$display--sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); font-size: props.get($font-size); font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); line-height: props.get($line-height); + color: props.get($text-color); text-transform: props.get($text-transform); letter-spacing: props.get($letter-spacing); } -- cgit v1.2.3-70-g09d2