From 6b0fcac695aa7a5517f6f53cec50da493acc4582 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 22 Jun 2024 19:30:00 +0200 Subject: Update --- src/scopes/_blockquotes.scss | 34 +++++++++++++++++++++++ src/scopes/_code.scss | 2 +- src/scopes/_links.scss | 27 +++++++++--------- src/scopes/_lists.scss | 66 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 115 insertions(+), 14 deletions(-) create mode 100644 src/scopes/_blockquotes.scss create mode 100644 src/scopes/_lists.scss (limited to 'src/scopes') diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss new file mode 100644 index 0000000..f6a13fe --- /dev/null +++ b/src/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/scopes/_code.scss b/src/scopes/_code.scss index a6905a3..0ff3a2c 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -23,7 +23,7 @@ ), --block: ( --fg: fn.global-color(--text), - --bg: fn.global-color(--bg-l2), + --bg: fn.global-color(--base --50), ) ) )); diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index d0c47ef..a9de8b5 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -4,10 +4,11 @@ @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), + --underline: fn.global-dim(--border --medium), ) ), --colors: ( @@ -15,7 +16,7 @@ --idle: ( --text: fn.global-color(--accent --1000), - --underline: fn.global-color(--accent --1000), + --underline: fn.global-color(--accent --600), --hover: ( --text: fn.global-color(--accent --1200), @@ -24,16 +25,16 @@ --visited: ( --text: fn.global-color(--purple --1000), - --underline: fn.global-color(--purple --1000), + --underline: fn.global-color(--purple --600), --hover: ( --text: fn.global-color(--purple --1200), ), ), - --focus: ( + --key-focus: ( --bg: fn.global-color(--yellow-static --400), - --text: #000, + --text: fn.global-color(--yellow-static --400-text), ) ) )); @@ -41,7 +42,7 @@ @include iro.bem-scope(iro.props-namespace()) { :link, :visited { - border-radius: .5px; + border-radius: fn.dim(--rounding); color: currentColor; text-decoration: underline; text-decoration-color: fn.color(--underline); @@ -53,13 +54,13 @@ text-decoration-skip-ink: none; } - @include iro.bem-at-theme('keyboard') { - &:focus { - background-color: fn.color(--focus --bg); - color: fn.color(--focus --text); - text-decoration: none; - border-block-end: fn.dim(--hover --underline) solid currentColor; - } + &:focus-visible { + background-color: fn.color(--key-focus --bg); + box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg); + color: fn.color(--key-focus --text); + text-decoration: underline; + text-decoration-thickness: fn.dim(--hover --underline); + text-decoration-skip-ink: none; } } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss new file mode 100644 index 0000000..bad9731 --- /dev/null +++ b/src/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); + } + } + } +} -- cgit v1.2.3-70-g09d2