From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src_old/scopes/_blockquotes.scss | 34 ++++++++++ src_old/scopes/_code.scss | 59 ++++++++++++++++ src_old/scopes/_headings.scss | 116 +++++++++++++++++++++++++++++++ src_old/scopes/_links.scss | 143 +++++++++++++++++++++++++++++++++++++++ src_old/scopes/_lists.scss | 66 ++++++++++++++++++ src_old/scopes/_tables.scss | 115 +++++++++++++++++++++++++++++++ 6 files changed, 533 insertions(+) create mode 100644 src_old/scopes/_blockquotes.scss create mode 100644 src_old/scopes/_code.scss create mode 100644 src_old/scopes/_headings.scss create mode 100644 src_old/scopes/_links.scss create mode 100644 src_old/scopes/_lists.scss create mode 100644 src_old/scopes/_tables.scss (limited to 'src_old/scopes') diff --git a/src_old/scopes/_blockquotes.scss b/src_old/scopes/_blockquotes.scss new file mode 100644 index 0000000..f6a13fe --- /dev/null +++ b/src_old/scopes/_blockquotes.scss @@ -0,0 +1,34 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('blockquotes') { + @include iro.props-store(( + --dims: ( + --indent: fn.global-dim(--list --indent), + --margin-bs: fn.global-dim(--paragraph --margin-bs), + --border: fn.global-dim(--border --thick), + + --compact: ( + --indent: fn.global-dim(--list --compact-indent), + ), + ), + --colors: ( + --border: fn.global-color(--border), + ) + )); + + @include iro.bem-scope(iro.props-namespace()) { + blockquote { + margin-block: fn.dim(--margin-bs); + margin-inline: 1px 0; + padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border)); + border-inline-start: fn.dim(--border) solid fn.color(--border); + } + + @include iro.bem-modifier('compact') { + blockquote { + padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border)); + } + } + } +} diff --git a/src_old/scopes/_code.scss b/src_old/scopes/_code.scss new file mode 100644 index 0000000..4df711b --- /dev/null +++ b/src_old/scopes/_code.scss @@ -0,0 +1,59 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('code') { + @include iro.props-store(( + --dims: ( + --inline: ( + --pad-i: fn.global-dim(--size --50), + --pad-b: fn.global-dim(--size --10), + --rounding: fn.global-dim(--rounding), + ), + --block: ( + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --85), + --margin-bs: fn.global-dim(--paragraph --margin-bs), + --rounding: fn.global-dim(--rounding), + ) + ), + --colors: ( + --inline: ( + --fg: fn.global-color(--red --1200), + --bg: fn.global-color(--red --200), + ), + --block: ( + --fg: fn.global-color(--text), + --bg: fn.global-color(--base --50), + ) + ) + )); + + @include iro.bem-scope(iro.props-namespace()) { + code { + padding-block: fn.dim(--inline --pad-b); + padding-inline: fn.dim(--inline --pad-i); + border-radius: fn.dim(--inline --rounding); + background-color: fn.color(--inline --bg); + color: fn.color(--inline --fg); + } + + pre { + margin-block: fn.dim(--block --margin-bs) 0; + margin-inline: 0; + padding-block: fn.dim(--block --pad-b); + padding-inline: fn.dim(--block --pad-i); + border-radius: fn.dim(--block --rounding); + background-color: fn.color(--block --bg); + color: fn.color(--block --fg); + + code { + display: inline-block; + margin-inline-end: fn.dim(--block --pad-i); + padding: 0; + border-radius: 0; + background-color: transparent; + color: currentColor; + } + } + } +} diff --git a/src_old/scopes/_headings.scss b/src_old/scopes/_headings.scss new file mode 100644 index 0000000..9593792 --- /dev/null +++ b/src_old/scopes/_headings.scss @@ -0,0 +1,116 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('headings') { + @include iro.bem-scope(iro.props-namespace()) { + h1, + h2, + h3, + h4, + h5, + h6 { + @include mx.set-font(--headline); + + display: block; + transform: translateX(-.06em); + letter-spacing: normal; + text-transform: none; + } + + + 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); + } + + @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, + 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); + } + } + + h6 { + @include mx.heading-faint(--display --xs); + + @include media.media('<=md') { + @include mx.heading-faint(--display-sm --xs); + } + } + } + } +} diff --git a/src_old/scopes/_links.scss b/src_old/scopes/_links.scss new file mode 100644 index 0000000..d47c406 --- /dev/null +++ b/src_old/scopes/_links.scss @@ -0,0 +1,143 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +$static-themes: 'black' 'white' !default; + +@include iro.props-namespace('links') { + @include iro.props-store(( + --dims: ( + --rounding: fn.global-dim(--rounding), + --underline: fn.global-dim(--border --thin), + + --hover: ( + --underline: fn.global-dim(--border --medium), + ), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --border), + ), + ), + --colors: ( + --underline: fn.global-color(--text-mute-more), + + --colored: ( + --text: fn.global-color(--accent --1100), + --underline: fn.global-color(--accent --600), + + --hover: ( + --text: fn.global-color(--accent --1300), + ), + + --visited: ( + --text: fn.global-color(--purple --1100), + --underline: fn.global-color(--purple --600), + + --hover: ( + --text: fn.global-color(--purple --1300), + ), + ), + ), + + --key-focus: ( + --text: fn.global-color(--focus --text), + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + ), + )); + + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --text: fn.global-color(--#{$theme}-transparent --800), + --underline: fn.global-color(--#{$theme}-transparent --500), + + --hover: ( + --text: fn.global-color(--#{$theme}-transparent --900), + ), + + --key-focus: ( + --text: fn.global-color(--#{$theme}-transparent --900), + --border: fn.global-color(--#{$theme}-transparent --900), + --outline: fn.global-color(--#{$theme}-transparent --300), + ), + ) + ) + )); + } + + @include iro.bem-scope(iro.props-namespace()) { + :link, + :visited { + border-radius: fn.dim(--rounding); + color: currentColor; + text-decoration: underline; + text-decoration-color: fn.color(--underline); + text-decoration-thickness: fn.dim(--underline); + box-decoration-break: clone; + + &:hover { + text-decoration: underline; + text-decoration-thickness: fn.dim(--hover --underline); + text-decoration-skip-ink: none; + } + + &:focus-visible { + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + color: fn.color(--key-focus --text); + text-decoration: none; + } + } + + @include iro.bem-modifier('invisible') { + :link, + :visited { + text-decoration: none; + } + } + + @include iro.bem-modifier('colored') { + :link { + color: fn.color(--colored --text); + text-decoration-color: fn.color(--colored --underline); + + &:hover { + color: fn.color(--colored --hover --text); + } + } + + :visited { + color: fn.color(--colored --visited --text); + text-decoration-color: fn.color(--colored --visited --underline); + + &:hover { + color: fn.color(--colored --visited --hover --text); + } + } + } + + @each $theme in $static-themes { + @include iro.bem-modifier(static-#{$theme}) { + :link, + :visited { + color: fn.color(--static-#{$theme} --text); + text-decoration-color: fn.color(--static-#{$theme} --underline); + + &:hover { + color: fn.color(--static-#{$theme} --hover --text); + } + + &:focus-visible { + outline-color: fn.color(--static-#{$theme} --key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline); + color: fn.color(--static-#{$theme} --key-focus --text); + } + } + } + } + } +} diff --git a/src_old/scopes/_lists.scss b/src_old/scopes/_lists.scss new file mode 100644 index 0000000..bad9731 --- /dev/null +++ b/src_old/scopes/_lists.scss @@ -0,0 +1,66 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('lists') { + @include iro.props-store(( + --dims: ( + --indent: calc(fn.global-dim(--list --indent) + 1em), + --margin-bs: fn.global-dim(--paragraph --margin-bs), + + --compact: ( + --indent: fn.global-dim(--list --compact-indent), + ), + ), + --colors: ( + --border: fn.global-color(--border-mute), + ) + )); + + @include iro.bem-scope(iro.props-namespace()) { + ul, + ol { + margin-block-start: fn.dim(--margin-bs); + padding-inline-start: fn.dim(--indent); + + ul, + ol { + margin-block-start: 0; + } + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + dl { + margin-block: fn.dim(--margin-bs) 0; + margin-inline: 0; + padding: 0; + } + + dt { + color: fn.global-color(--heading); + font-weight: bold; + } + + dd { + margin-block: 0; + margin-inline: fn.dim(--indent) 0; + } + + @include iro.bem-modifier('compact') { + ul, + ol { + padding-inline-start: calc(fn.dim(--compact --indent) - 3px); + } + + dd { + margin-inline-start: calc(fn.dim(--compact --indent) - 3px); + } + } + } +} diff --git a/src_old/scopes/_tables.scss b/src_old/scopes/_tables.scss new file mode 100644 index 0000000..9b2124d --- /dev/null +++ b/src_old/scopes/_tables.scss @@ -0,0 +1,115 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; + +@include iro.props-namespace('tables') { + @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), + ) + ) + )); + + @include iro.bem-scope(iro.props-namespace()) { + table { + margin-block-start: fn.dim(--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); + text-align: start; + } + + td { + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + border-width: 0; + border-block-start-width: fn.dim(--border); + border-style: solid; + border-color: fn.color(--border); + } + + tr { + &:last-child { + td { + border-block-end-width: fn.dim(--border); + } + } + } + + @include iro.bem-modifier('flush') { + th, + td { + &:first-child { + padding-inline-start: 0; + } + + &:last-child { + padding-inline-end: 0; + } + } + } + + @include iro.bem-modifier('box') { + td { + background-color: fn.color(--box --bg); + + &:first-child { + border-inline-start-width: fn.dim(--border); + } + + &:last-child { + border-inline-end-width: fn.dim(--border); + } + } + + tr { + &:first-child { + td { + &:first-child { + border-start-start-radius: fn.dim(--rounding); + } + + &:last-child { + border-start-end-radius: fn.dim(--rounding); + } + } + } + + &:last-child { + td { + &:first-child { + border-end-start-radius: fn.dim(--rounding); + } + + &:last-child { + border-end-end-radius: fn.dim(--rounding); + } + } + } + } + } + } +} -- cgit v1.2.3-70-g09d2