From 50d24a41b5656cdaf31468b28d08da765ca95763 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 10:34:53 +0200 Subject: Update --- src/objects/_heading.scss | 138 ++++++++++++++-------------------------------- 1 file changed, 40 insertions(+), 98 deletions(-) (limited to 'src/objects/_heading.scss') diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 8ed3b17..b1abdf5 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,114 +1,56 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; -@use '../config'; -@use 'include-media/dist/include-media' as media; +@use '../props'; -$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; +@forward 'heading.vars'; +@use 'heading.vars' as vars; -@include iro.props-namespace('heading') { - @include iro.props-store(( - --dims: ( - --offset: -.02em, - ), - --colors: ( - --bg: fn.global-color(--base --50), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { - @include mx.set-font(--headline); - - display: block; - margin-block-start: fn.global-dim(--heading --margin-bs); - text-transform: none; - letter-spacing: normal; - transform: translateX(fn.dim(--offset)); + @include iro.bem-object('heading') { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); + font-feature-settings: props.get(vars.$feature-settings); + line-height: props.get(vars.$line-height); + text-transform: none; + letter-spacing: normal; + transform: translateX(props.get(vars.$offset)); & + & { - margin-block-start: fn.global-dim(--heading --margin-bs-sibling); + margin-block-start: props.get(vars.$margin-bs-sibling); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, - transparent .05em, - fn.color(--bg) .05em, - fn.color(--bg) .5em, - transparent .5em); - } - - @include iro.bem-modifier('xxl') { - @include mx.heading-strong(--xxl); - } - - @include iro.bem-modifier('xl') { - @include mx.heading-strong(--xl); - } - - @include iro.bem-modifier('lg') { - @include mx.heading-medium(--lg); - } - - @include iro.bem-modifier('md') { - @include mx.heading-medium(--md); - } - - @include iro.bem-modifier('sm') { - @include mx.heading-faint(--sm); - } - - @include iro.bem-modifier('xs') { - @include mx.heading-faint(--xs); + transparent .05em, + props.get(vars.$bg-color) .05em, + props.get(vars.$bg-color) .5em, + transparent .5em); + } + + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { + @include iro.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); + letter-spacing: props.get($letter-spacing); + } } @include iro.bem-modifier('display') { - @include mx.set-font(--headline); - - @include iro.bem-modifier('xxl') { - @include mx.heading-strong(--display --xxl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xxl); - } - } - - @include iro.bem-modifier('xl') { - @include mx.heading-strong(--display --xl); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --xl); - } - } - - @include iro.bem-modifier('lg') { - @include mx.heading-strong(--display --lg); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --lg); - } - } - - @include iro.bem-modifier('md') { - @include mx.heading-strong(--display --md); - - @include media.media('<=md') { - @include mx.heading-strong(--display-sm --md); - } - } - - @include iro.bem-modifier('sm') { - @include mx.heading-medium(--display --sm); - - @include media.media('<=md') { - @include mx.heading-medium(--display-sm --sm); - } - } - - @include iro.bem-modifier('xs') { - @include mx.heading-faint(--display --xs); - - @include media.media('<=md') { - @include mx.heading-faint(--display-sm --xs); + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { + @include iro.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); + letter-spacing: props.get($letter-spacing); } } } -- cgit v1.2.3-70-g09d2