From 50d24a41b5656cdaf31468b28d08da765ca95763 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 10:34:53 +0200 Subject: Update --- src/scopes/_headings.scss | 130 +++++++++++++---------------------------- src/scopes/_headings.vars.scss | 0 src/scopes/_implicit.scss | 20 +++---- src/scopes/_implicit.vars.scss | 11 ++++ 4 files changed, 62 insertions(+), 99 deletions(-) delete mode 100644 src/scopes/_headings.vars.scss (limited to 'src/scopes') diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index b4a16bd..2bf7b08 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,10 +1,19 @@ -@use 'include-media/dist/include-media' as media; +@use 'sass:map'; @use 'iro-sass/src/iro-sass' as iro; -@use '../mixins' as mx; @use '../props'; -@use '../core.vars' as core; +@use '../objects/heading.vars' as headings; @mixin styles { + /* stylelint-disable-next-line scss/dollar-variable-pattern */ + $-size-map: ( + xs: h6, + sm: h5, + md: h4, + lg: h3, + xl: h2, + xxl: h1, + ); + @include iro.bem-scope('headings') { h1, h2, @@ -12,102 +21,45 @@ h4, h5, h6 { - @include mx.set-font(--headline); - - display: block; - text-transform: none; - letter-spacing: normal; - transform: translateX(-.06em); - } - - - h1 { - @include mx.heading-strong(--xxl); - } - - h2 { - @include mx.heading-strong(--xl); - } - - h3 { - @include mx.heading-medium(--lg); - } - - h4 { - @include mx.heading-medium(--md); - } - - h5 { - @include mx.heading-faint(--sm); - } - - h6 { - @include mx.heading-faint(--xs); + display: block; + margin-block-start: props.get(headings.$margin-bs); + font-family: props.get(headings.$font-family); + font-weight: props.get(headings.$font-weight); + font-feature-settings: props.get(headings.$feature-settings); + line-height: props.get(headings.$line-height); + text-transform: none; + letter-spacing: normal; + transform: translateX(props.get(headings.$offset)); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, transparent .15em, - fn.foreign-color(--heading, --bg) .15em, - fn.foreign-color(--heading, --bg) .6em, + props.get(headings.$bg-color) .15em, + props.get(headings.$bg-color) .6em, transparent .6em); } - @include iro.bem-modifier('display') { - h1, - h2, - h3, - h4, - h5, - h6 { - @include mx.set-font(--headline); - } - - h1 { - @include mx.heading-strong(--display --xxl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xxl); - } - } - - h2 { - @include mx.heading-strong(--display --xl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xl); - } - } - - h3 { - @include mx.heading-strong(--display --lg); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --lg); - } - } - - h4 { - @include mx.heading-strong(--display --md); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --md); - } - } - - h5 { - @include mx.heading-medium(--display --sm); - - @include media.media('<=md') { - @include mx.heading-medium(--display-sm --sm); - } + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$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); + letter-spacing: props.get($letter-spacing); } + } - h6 { - @include mx.heading-faint(--display --xs); - - @include media.media('<=md') { - @include mx.heading-faint(--display-sm --xs); + @include iro.bem-modifier('display') { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$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); + letter-spacing: props.get($letter-spacing); } } } diff --git a/src/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index ba34039..7909943 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -31,12 +31,10 @@ pre, code { - font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; - } - - pre, - code { - //@include mx.set-font(--mono, (--size: .93em)); + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); + font-feature-settings: props.get(vars.$code--feature-settings); + line-height: props.get(vars.$code--line-height); } pre { @@ -55,9 +53,11 @@ h4, h5, h6 { - //@include mx.heading-medium(--md); - - margin-block: props.get(vars.$heading--margin-bs) 0; + margin-block: props.get(vars.$heading--margin-bs) 0; + font-family: props.get(vars.$heading--font-family); + font-weight: props.get(vars.$heading--font-weight); + font-feature-settings: props.get(vars.$heading--feature-settings); + line-height: props.get(vars.$heading--line-height); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); @@ -77,7 +77,7 @@ } small { - font-size: props.get(core.$font-size--75); + font-size: props.get(vars.$small--font-size); } ul, diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 34979d9..80e2f67 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -3,5 +3,16 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default; +$small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; + +$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; +$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; +$code--font-size: props.def(--s-implicit--code--font-size, .93em); +$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default; + $heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; $heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; +$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default; +$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--headline--line-height)) !default; +$heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; +$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -- cgit v1.2.3-70-g09d2