From c41e16f6044548e27fbf8e4ef65ed3067278c80b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 17:14:45 +0200 Subject: Update --- src/scopes/_headings.scss | 22 ++++++++-------- src/scopes/_implicit.scss | 15 ++++++----- src/scopes/_implicit.vars.scss | 8 +++++- src/scopes/_links.vars.scss | 3 ++- src/scopes/_tables.scss | 57 +++++++++++++++++++----------------------- src/scopes/_tables.vars.scss | 24 ++---------------- 6 files changed, 57 insertions(+), 72 deletions(-) (limited to 'src/scopes') diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 2bf7b08..f6f62c3 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,7 +1,7 @@ @use 'sass:map'; @use 'iro-sass/src/iro-sass' as iro; @use '../props'; -@use '../objects/heading.vars' as headings; +@use '../objects/heading.vars' as heading; @mixin styles { /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -22,25 +22,25 @@ h5, h6 { 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); + margin-block-start: props.get(heading.$margin-bs); + font-family: props.get(heading.$font-family); + font-weight: props.get(heading.$font-weight); + font-feature-settings: props.get(heading.$feature-settings); + line-height: props.get(heading.$line-height); text-transform: none; letter-spacing: normal; - transform: translateX(props.get(headings.$offset)); + transform: translateX(props.get(heading.$offset)); } @include iro.bem-elem('highlight') { background-image: linear-gradient(to top, transparent .15em, - props.get(headings.$bg-color) .15em, - props.get(headings.$bg-color) .6em, + props.get(heading.$bg-color) .15em, + props.get(heading.$bg-color) .6em, transparent .6em); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); font-size: props.get($font-size); @@ -52,7 +52,7 @@ } @include iro.bem-modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { #{map.get($-size-map, $mod)} { font-family: props.get($font-family); font-size: props.get($font-size); diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 7909943..4bb3482 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -21,12 +21,14 @@ } body { - //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); - - padding: 0; - margin: 0; - color: props.get(core.$theme, --text); - background-color: props.get(core.$theme, --bg-base); + padding: 0; + margin: 0; + font-family: props.get(vars.$body--font-family); + font-size: props.get(vars.$body--font-size); + font-feature-settings: props.get(vars.$body--feature-settings); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); } pre, @@ -55,6 +57,7 @@ h6 { margin-block: props.get(vars.$heading--margin-bs) 0; font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); 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); diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 80e2f67..f0eb45d 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -5,6 +5,11 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(c $small--font-size: props.def(--s-implicit--code--font-family, props.get(core.$font-size--75)) !default; +$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; +$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; +$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); +$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !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); @@ -13,6 +18,7 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g $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--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; $heading--font-weight: props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default; +$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); $heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index 4bf80c0..4c6cc5d 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -26,7 +27,7 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props. $static-themes: props.def(--s-links); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $link-theme: #{$theme}-static; + $link-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $link-theme: ( diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index f722864..f285207 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -1,49 +1,44 @@ -@use 'sass:meta'; +@use 'sass:map'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; +@use '../props'; +@use '../objects/table.vars' as table; -@forward 'lists.vars'; -@use 'lists.vars' as vars; +@forward 'tables.vars'; +@use 'tables.vars' as vars; @mixin styles { - @include props.materialize(meta.module-variables('vars')); - @include iro.bem-scope('tables') { table { - margin-block-start: fn.dim(--margin-bs); + margin-block-start: props.get(vars.$margin-bs); border-spacing: 0; border-collapse: separate; } th { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --50), - --weight: bold, - --transform: uppercase, - --spacing: .5px - )); - - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - color: fn.color(--heading); + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + font-family: props.get(table.$heading--font-family); + font-size: props.get(table.$heading--font-size); + font-weight: props.get(table.$heading--font-weight); + color: props.get(table.$heading-color); text-align: start; + text-transform: props.get(table.$heading--text-transform); + letter-spacing: props.get(table.$heading--letter-spacing); } td { - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - border-color: fn.color(--border); + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + border-color: props.get(table.$border-color); border-style: solid; border-width: 0; - border-block-start-width: fn.dim(--border); + border-block-start-width: props.get(table.$border-width); } tr { &:last-child { td { - border-block-end-width: fn.dim(--border); + border-block-end-width: props.get(table.$border-width); } } } @@ -63,14 +58,14 @@ @include iro.bem-modifier('box') { td { - background-color: fn.color(--box --bg); + background-color: props.get(table.$box--bg-color); &:first-child { - border-inline-start-width: fn.dim(--border); + border-inline-start-width: props.get(table.$border-width); } &:last-child { - border-inline-end-width: fn.dim(--border); + border-inline-end-width: props.get(table.$border-width); } } @@ -78,11 +73,11 @@ &:first-child { td { &:first-child { - border-start-start-radius: fn.dim(--rounding); + border-start-start-radius: props.get(table.$rounding); } &:last-child { - border-start-end-radius: fn.dim(--rounding); + border-start-end-radius: props.get(table.$rounding); } } } @@ -90,11 +85,11 @@ &:last-child { td { &:first-child { - border-end-start-radius: fn.dim(--rounding); + border-end-start-radius: props.get(table.$rounding); } &:last-child { - border-end-end-radius: fn.dim(--rounding); + border-end-end-radius: props.get(table.$rounding); } } } diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index cdaca64..17c9eb4 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss @@ -1,24 +1,4 @@ @use '../props'; -@use '../core.vars' as core; +@use 'implicit.vars' as implicit; -$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; -$margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default; - -$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; - -@include iro.props-store(( - --dims: ( - --pad-i: fn.foreign-dim(--table, --pad-i), - --pad-b: fn.foreign-dim(--table, --pad-b), - --rounding: fn.foreign-dim(--table, --rounding), - --border: fn.foreign-dim(--table, --border), - --margin-bs: fn.global-dim(--paragraph --margin-bs), - ), - --colors: ( - --border: fn.foreign-color(--table, --border), - --heading: fn.foreign-color(--table, --heading), - --box: ( - --bg: fn.foreign-color(--table, --box --bg), - ) - ) -)); +$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -- cgit v1.2.3-70-g09d2