From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/scopes/_blockquotes.scss | 25 +++++++ src/scopes/_blockquotes.vars.scss | 11 +++ src/scopes/_code.scss | 39 ++++++++++ src/scopes/_code.vars.scss | 18 +++++ src/scopes/_headings.scss | 115 ++++++++++++++++++++++++++++ src/scopes/_headings.vars.scss | 0 src/scopes/_implicit.scss | 152 ++++++++++++++++++++++++++++++++++++++ src/scopes/_implicit.vars.scss | 7 ++ src/scopes/_links.scss | 93 +++++++++++++++++++++++ src/scopes/_links.vars.scss | 47 ++++++++++++ src/scopes/_lists.scss | 59 +++++++++++++++ src/scopes/_lists.vars.scss | 8 ++ src/scopes/_tables.scss | 104 ++++++++++++++++++++++++++ src/scopes/_tables.vars.scss | 24 ++++++ 14 files changed, 702 insertions(+) create mode 100644 src/scopes/_blockquotes.scss create mode 100644 src/scopes/_blockquotes.vars.scss create mode 100644 src/scopes/_code.scss create mode 100644 src/scopes/_code.vars.scss create mode 100644 src/scopes/_headings.scss create mode 100644 src/scopes/_headings.vars.scss create mode 100644 src/scopes/_implicit.scss create mode 100644 src/scopes/_implicit.vars.scss create mode 100644 src/scopes/_links.scss create mode 100644 src/scopes/_links.vars.scss create mode 100644 src/scopes/_lists.scss create mode 100644 src/scopes/_lists.vars.scss create mode 100644 src/scopes/_tables.scss create mode 100644 src/scopes/_tables.vars.scss (limited to 'src/scopes') diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss new file mode 100644 index 0000000..7f93e42 --- /dev/null +++ b/src/scopes/_blockquotes.scss @@ -0,0 +1,25 @@ +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; + +@forward 'blockquotes.vars'; +@use 'blockquotes.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-scope('blockquotes') { + blockquote { + padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); + margin-block: props.get(vars.$margin-bs); + margin-inline: 1px 0; + border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); + } + + @include iro.bem-modifier('compact') { + blockquote { + padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); + } + } + } +} diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss new file mode 100644 index 0000000..a3f8d85 --- /dev/null +++ b/src/scopes/_blockquotes.vars.scss @@ -0,0 +1,11 @@ +@use '../props'; +@use '../vars'; +@use './implicit.vars' as implicit-vars; + +$indent: props.def(--s-blockquotes--indent, props.get(vars.$list--indent)) !default; +$margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default; +$border-width: props.def(--s-blockquotes--border-width, props.get(vars.$border-width--thick)) !default; + +$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(vars.$list--compact-indent)) !default; + +$border-color: props.def(--s-blockquotes--border-width, props.get(vars.$theme, --border)) !default; diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss new file mode 100644 index 0000000..0d8cdd0 --- /dev/null +++ b/src/scopes/_code.scss @@ -0,0 +1,39 @@ +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; + +@forward 'code.vars'; +@use 'code.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-scope('code') { + code { + padding-block: props.get(vars.$inline--pad-b); + padding-inline: props.get(vars.$inline--pad-i); + color: props.get(vars.$inline--fg); + background-color: props.get(vars.$inline--bg); + border-radius: props.get(vars.$inline--rounding); + } + + pre { + padding-block: props.get(vars.$block--pad-b); + padding-inline: props.get(vars.$block--pad-i); + margin-block: props.get(vars.$block--margin-bs) 0; + margin-inline: 0; + color: props.get(vars.$block--fg); + background-color: props.get(vars.$block--bg); + border-radius: props.get(vars.$block--rounding); + + code { + display: inline-block; + padding: 0; + margin-inline-end: props.get(vars.$block--pad-i); + color: currentColor; + background-color: transparent; + border-radius: 0; + } + } + } +} diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss new file mode 100644 index 0000000..27d75f7 --- /dev/null +++ b/src/scopes/_code.vars.scss @@ -0,0 +1,18 @@ +@use '../props'; +@use '../vars'; +@use './implicit.vars' as implicit-vars; + +$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(vars.$size--50)) !default; +$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(vars.$size--10)) !default; +$inline--rounding: props.def(--s-code--inline--rounding, props.get(vars.$rounding)) !default; + +$block--pad-i: props.def(--s-code--block--pad-i, props.get(vars.$size--150)) !default; +$block--pad-b: props.def(--s-code--block--pad-b, props.get(vars.$size--85)) !default; +$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default; +$block--rounding: props.def(--s-code--block--rounding, props.get(vars.$rounding)) !default; + +$inline--fg: props.def(--s-code--inline--fg, props.get(vars.$theme, --red, --1200)) !default; +$inline--bg: props.def(--s-code--inline--bg, props.get(vars.$theme, --red, --200)) !default; + +$block--fg: props.def(--s-code--block--fg, props.get(vars.$theme, --text)) !default; +$block--bg: props.def(--s-code--block--bg, props.get(vars.$theme, --base, --50)) !default; diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss new file mode 100644 index 0000000..e97e9f2 --- /dev/null +++ b/src/scopes/_headings.scss @@ -0,0 +1,115 @@ +@use 'include-media/dist/include-media' as media; +@use 'iro-sass/src/iro-sass' as iro; +@use '../mixins' as mx; +@use '../props'; +@use '../vars'; + +@mixin styles { + @include iro.bem-scope('headings') { + h1, + h2, + h3, + 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); + } + + @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/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss new file mode 100644 index 0000000..9c17868 --- /dev/null +++ b/src/scopes/_implicit.scss @@ -0,0 +1,152 @@ +@use 'sass:math'; +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; +@use '../vars' as global-vars; + +@forward 'implicit.vars'; +@use 'implicit.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + html { + accent-color: props.get(global-vars.$theme, --accent, --600); + scrollbar-color: props.get(global-vars.$theme, --text-disabled) transparent; + } + + html, + body { + block-size: 100%; + } + + body { + //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100))); + + padding: 0; + margin: 0; + color: props.get(global-vars.$theme, --text); + background-color: props.get(global-vars.$theme, --bg-base); + } + + pre, + code { + font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1; + } + + pre, + code { + //@include mx.set-font(--mono, (--size: .93em)); + } + + pre { + margin: 0; + overflow-x: auto; + + code { + font-size: 1em; + color: currentColor; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + //@include mx.heading-medium(--md); + + margin-block: props.get(vars.$heading--margin-bs) 0; + + & + & { + margin-block-start: props.get(vars.$heading--margin-bs-sibling); + } + } + + p { + margin-block: props.get(vars.$paragraph--margin-bs) 0; + + &:empty { + display: none; + } + } + + strong { + font-weight: bold; + } + + small { + font-size: props.get(global-vars.$font-size--75); + } + + ul, + ol { + padding: 0; + margin: 0; + list-style: none; + } + + li { + padding: 0; + margin: 0; + } + + :focus, + :focus-visible { + outline: 0; + } + + :link, + :visited { + color: currentColor; + text-decoration: none; + } + + + button, + input, + textarea { + box-sizing: content-box; + padding: 0; + margin: 0; + font-family: inherit; + font-size: 1em; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + color: currentColor; + text-align: inherit; + text-transform: inherit; + appearance: none; + background: none; + border: 0; + + &::-moz-focus-inner { + border: 0; + } + } + + input, + textarea { + &::placeholder { + color: props.get(global-vars.$theme, --text-mute); + opacity: 1; + } + + &:disabled { + color: props.get(global-vars.$theme, --text-disabled); + } + } + + textarea { + block-size: calc(1em * props.get(global-vars.$font--standard--line-height)); + } + + hr { + block-size: props.get(global-vars.$border-width--thin); + margin: 0; + background-color: props.get(global-vars.$theme, --border-color); + border: 0; + } +} diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss new file mode 100644 index 0000000..c18ca78 --- /dev/null +++ b/src/scopes/_implicit.vars.scss @@ -0,0 +1,7 @@ +@use '../props'; +@use '../vars'; + +$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(vars.$size--300)) !default; + +$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(vars.$size--700)) !default; +$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(vars.$size--325)) !default; diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss new file mode 100644 index 0000000..69793b2 --- /dev/null +++ b/src/scopes/_links.scss @@ -0,0 +1,93 @@ +@use 'sass:map'; +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; + +@forward 'links.vars'; +@use 'links.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-scope('links') { + :link, + :visited { + color: currentColor; + text-decoration: underline; + text-decoration-thickness: props.get(vars.$underline-width); + text-decoration-color: props.get(vars.$underline-color); + border-radius: props.get(vars.$rounding); + box-decoration-break: clone; + + &:hover { + text-decoration: underline; + text-decoration-skip-ink: none; + text-decoration-thickness: props.get(vars.$hover--underline-width); + } + + &:focus-visible { + color: props.get(vars.$key-focus--text-color); + text-decoration: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + + @include iro.bem-modifier('invisible') { + :link, + :visited { + text-decoration: none; + } + } + + @include iro.bem-modifier('colored') { + :link { + color: props.get(vars.$colored--text-color); + text-decoration-color: props.get(vars.$colored--underline-color); + + &:hover { + color: props.get(vars.$colored--hover--text-color); + } + } + + :visited { + color: props.get(vars.$colored--visited--text-color); + text-decoration-color: props.get(vars.$colored--visited--underline-color); + + &:hover { + color: props.get(vars.$colored--visited--hover--text-color); + } + } + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include iro.bem-modifier($theme) { + :link, + :visited { + color: props.get(vars.$static-themes, $theme, --text-color); + text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); + + &:hover { + color: props.get(vars.$static-themes, $theme, --hover, --text-color); + } + + &:focus-visible { + color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); + outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$static-themes, $theme, --key-focus, --outline-color); + } + } + } + } + } +} diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss new file mode 100644 index 0000000..7880204 --- /dev/null +++ b/src/scopes/_links.vars.scss @@ -0,0 +1,47 @@ +@use 'sass:map'; +@use '../props'; +@use '../vars'; + +$rounding: props.def(--s-links--rounding, props.get(vars.$rounding)) !default; +$underline-width: props.def(--s-links--underline-width, props.get(vars.$border-width--thin)) !default; +$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(vars.$border-width--medium)) !default; + +$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(vars.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(vars.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(vars.$key-focus--outline-width)) !default; + +$underline-color: props.def(--s-links--underline-color, props.get(vars.$theme, --text-mute-more)) !default; + +$colored--text-color: props.def(--s-links--colored--text-color, props.get(vars.$theme, --accent, --1100)) !default; +$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(vars.$theme, --accent, --600)) !default; +$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(vars.$theme, --accent, --1300)) !default; + +$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(vars.$theme, --purple, --1100)) !default; +$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(vars.$theme, --purple, --600)) !default; +$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(vars.$theme, --purple, --1300)) !default; + +$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(vars.$theme, --focus, --text)) !default; +$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(vars.$theme, --focus, --border)) !default; +$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(vars.$theme, --focus, --outline)) !default; + +$static-themes: props.def(--s-links); +@each $theme in map.keys(props.get(vars.$transparent-colors)) { + $link-theme: #{$theme}-static; + + $static-themes: props.merge($static-themes, ( + $link-theme: ( + --text-color: props.get(vars.$transparent-colors, $theme, --800), + --underline-color: props.get(vars.$transparent-colors, $theme, --500), + + --hover: ( + --text-color: props.get(vars.$transparent-colors, $theme, --900), + ), + + --key-focus: ( + --text-color: props.get(vars.$transparent-colors, $theme, --900), + --border-color: props.get(vars.$transparent-colors, $theme, --900), + --outline-color: props.get(vars.$transparent-colors, $theme, --300), + ), + ) + )); +} diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss new file mode 100644 index 0000000..db555a9 --- /dev/null +++ b/src/scopes/_lists.scss @@ -0,0 +1,59 @@ +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../props'; +@use '../vars' as global-vars; + +@forward 'lists.vars'; +@use 'lists.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-scope('lists') { + ul, + ol { + padding-inline-start: props.get(vars.$indent); + margin-block-start: props.get(vars.$margin-bs); + + ul, + ol { + margin-block-start: 0; + } + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + dl { + padding: 0; + margin-block: props.get(vars.$margin-bs) 0; + margin-inline: 0; + } + + dt { + font-weight: bold; + color: props.get(global-vars.$theme, --heading); + } + + dd { + margin-block: 0; + margin-inline: props.get(vars.$indent) 0; + } + + @include iro.bem-modifier('compact') { + ul, + ol { + padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); + } + + dd { + margin-inline-start: calc(props.get(vars.$compact--indent) - 3px); + } + } + } +} diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss new file mode 100644 index 0000000..609cfb5 --- /dev/null +++ b/src/scopes/_lists.vars.scss @@ -0,0 +1,8 @@ +@use '../props'; +@use '../vars'; +@use './implicit.vars' as implicit-vars; + +$indent: props.def(--s-lists--indent, calc(props.get(vars.$list--indent) + 1em)) !default; +$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default; + +$compact--indent: props.def(--s-lists--compact--indent, props.get(vars.$list--compact-indent)) !default; diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss new file mode 100644 index 0000000..f722864 --- /dev/null +++ b/src/scopes/_tables.scss @@ -0,0 +1,104 @@ +@use 'sass:meta'; +@use 'iro-sass/src/iro-sass' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; + +@forward 'lists.vars'; +@use 'lists.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); + 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-color: fn.color(--border); + border-style: solid; + border-width: 0; + border-block-start-width: fn.dim(--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); + } + } + } + } + } + } +} diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss new file mode 100644 index 0000000..2c3f255 --- /dev/null +++ b/src/scopes/_tables.vars.scss @@ -0,0 +1,24 @@ +@use '../props'; +@use '../vars'; + +$indent: props.def(--s-lists--indent, calc(props.get(vars.$list--indent) + 1em)) !default; +$margin-bs: props.def(--s-lists--margin-bs, props.get(vars.$paragraph--margin-bs)) !default; + +$compact--indent: props.def(--s-lists--compact--indent, props.get(vars.$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), + ) + ) +)); -- cgit v1.2.3-70-g09d2