From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/scopes/_blockquotes.scss | 28 +++++---- src/scopes/_blockquotes.vars.scss | 29 ++++++--- src/scopes/_body.scss | 26 ++++---- src/scopes/_body.vars.scss | 31 ++++++--- src/scopes/_code.scss | 46 +++++++------- src/scopes/_code.vars.scss | 33 ++++++---- src/scopes/_figures.scss | 22 +++---- src/scopes/_headings.scss | 90 ++++++++++++++------------ src/scopes/_implicit.scss | 107 ++++++++++++++++--------------- src/scopes/_implicit.vars.scss | 83 ++++++++++++++++++------ src/scopes/_links.scss | 109 ++++++++++++++++++-------------- src/scopes/_links.vars.scss | 129 +++++++++++++++++++++++++++----------- src/scopes/_lists.scss | 30 ++++----- src/scopes/_lists.vars.scss | 13 ++-- src/scopes/_tables.scss | 48 +++++++------- src/scopes/_tables.vars.scss | 4 +- 16 files changed, 496 insertions(+), 332 deletions(-) (limited to 'src/scopes') diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index 10e6d81..bc4fd39 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss @@ -1,25 +1,27 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'blockquotes.vars'; -@use 'blockquotes.vars' as vars; +@forward "blockquotes.vars"; +@use "blockquotes.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('blockquotes') { + @include bem.scope("blockquotes") { blockquote { padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); - margin-block: props.get(vars.$margin-bs) 0; - margin-inline: 1px 0; - border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); + margin-block: props.get(vars.$margin-bs) 0; + margin-inline: 1px 0; + border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); } - @include bem.modifier('compact') { + @include bem.modifier("compact") { blockquote { - padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); + 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 index 63c40b0..117b4a6 100644 --- a/src/scopes/_blockquotes.vars.scss +++ b/src/scopes/_blockquotes.vars.scss @@ -1,11 +1,24 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "./implicit.vars" as implicit; -$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; -$margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; +$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; +$margin-bs: props.def( + --s-blockquotes--margin-bs, + props.get(implicit.$paragraph--margin-bs) +) !default; +$border-width: props.def( + --s-blockquotes--border-width, + props.get(core.$border-width--thick) +) !default; -$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; +$compact--indent: props.def( + --s-blockquotes--compact--indent, + props.get(core.$list--compact-indent) +) !default; -$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default; +$border-color: props.def( + --s-blockquotes--border-color, + props.get(core.$theme, --border), + "color" +) !default; diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss index 77a3eb1..6c5ba63 100644 --- a/src/scopes/_body.scss +++ b/src/scopes/_body.scss @@ -1,15 +1,15 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'body.vars'; -@use 'body.vars' as vars; +@forward "body.vars"; +@use "body.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('body') { + @include bem.scope("body") { font-size: props.get(vars.$font-size); line-height: props.get(vars.$line-height); @@ -30,11 +30,11 @@ } img { - display: block; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$img--max-block-size); + display: block; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$img--max-block-size); margin-block-start: props.get(vars.$paragraph--margin-bs); } diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss index 981ef32..414e0c1 100644 --- a/src/scopes/_body.vars.scss +++ b/src/scopes/_body.vars.scss @@ -1,12 +1,25 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -@use '../layouts/container.vars' as container; +@use "../layouts/container.vars" as container; -$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; -$line-height: props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default; -$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; -$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; -$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; +$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; +$line-height: props.def( + --s-body--line-height, + calc(props.get(core.$font--standard--line-height) + 0.1) +) !default; +$paragraph--margin-bs: props.def( + --s-body--paragraph--margin-bs, + props.get(core.$size--300) +) !default; +$paragraph--max-inline-size: props.def( + --s-body--paragraph--max-inline-size, + props.get(container.$fixed) +) !default; +$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; -$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; +$strong--text-color: props.def( + --s-body--strong--text-color, + props.get(core.$theme, --heading), + "color" +) !default; diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index db43de0..d931c22 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -1,39 +1,39 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'code.vars'; -@use 'code.vars' as vars; +@forward "code.vars"; +@use "code.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('code') { + @include 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); + 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); + 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); + 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); + border-radius: props.get(vars.$block--rounding); code { - display: inline-block; - padding: 0; + display: inline-block; + padding: 0; margin-inline-end: props.get(vars.$block--pad-i); - color: currentColor; - background-color: transparent; - border-radius: 0; + color: currentColor; + background-color: transparent; + border-radius: 0; } } } diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss index 329d372..e22421c 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss @@ -1,18 +1,25 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "./implicit.vars" as implicit; -$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; -$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; +$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; +$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default; -$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; -$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; -$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; +$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; +$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; +$block--margin-bs: props.def( + --s-code--block--margin-bs, + props.get(implicit.$paragraph--margin-bs) +) !default; +$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; -$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; -$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; +$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), "color") !default; +$inline--bg: props.def( + --s-code--inline--bg, + props.get(core.$theme, --base, --200), + "color" +) !default; -$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default; -$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default; +$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), "color") !default; +$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), "color") !default; diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss index c993f5a..852ab5a 100644 --- a/src/scopes/_figures.scss +++ b/src/scopes/_figures.scss @@ -1,20 +1,20 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../objects/figure.vars' as figure; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../objects/figure.vars" as figure; @mixin styles { - @include bem.scope('figures') { + @include bem.scope("figures") { figcaption { - padding-block: props.get(figure.$pad-b); - font-size: props.get(figure.$font-size); - color: props.get(figure.$text-color); + padding-block: props.get(figure.$pad-b); + font-size: props.get(figure.$font-size); + color: props.get(figure.$text-color); border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } } diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 23623fd..a6a7bbb 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,8 +1,8 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../objects/heading.vars' as heading; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../objects/heading.vars" as heading; @mixin styles { /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -15,56 +15,62 @@ xxl: h1, ); - @include bem.scope('headings') { + @include bem.scope("headings") { h1, h2, h3, h4, h5, h6 { - display: block; - margin-block-start: props.get(heading.$margin-bs); - font-family: props.get(heading.$font-family); - font-weight: props.get(heading.$font-weight); + display: block; + 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: props.get(heading.$text-transform); - letter-spacing: normal; - transform: translateX(props.get(heading.$offset)); + line-height: props.get(heading.$line-height); + text-transform: props.get(heading.$text-transform); + letter-spacing: normal; + transform: translateX(props.get(heading.$offset)); } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent .15em, - props.get(heading.$bg-color) .15em, - props.get(heading.$bg-color) .6em, - transparent .6em); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent 0.15em, + props.get(heading.$bg-color) 0.15em, + props.get(heading.$bg-color) 0.6em, + transparent 0.6em + ); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in heading.$sizes + { #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + 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); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes { + @include bem.modifier("display") { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in heading.$display--sizes + { #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + 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); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } } @@ -79,10 +85,16 @@ } } - @include bem.modifier('display') { + @include bem.modifier("display") { @each $mod, $value in heading.$sizes { #{map.get($-size-map, $mod)} { - color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color); + color: props.get( + heading.$static-themes, + $theme, + --display, + --#{$mod}, + --text-color + ); } } } diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 728fd22..f8c575d 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -1,21 +1,21 @@ -@use 'sass:map'; -@use 'sass:math'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; - -@forward 'implicit.vars'; -@use 'implicit.vars' as vars; +@use "sass:map"; +@use "sass:math"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; + +@forward "implicit.vars"; +@use "implicit.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); @layer scope { html { - accent-color: props.get(core.$theme, --accent, --600); + accent-color: props.get(core.$theme, --accent, --600); scrollbar-color: props.get(core.$theme, --text-disabled) transparent; &:has(dialog[open]), @@ -26,31 +26,31 @@ } body { - padding: 0; - margin: 0; - font-family: props.get(vars.$body--font-family); - font-size: props.get(vars.$body--font-size); + 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); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); } pre, code { - font-family: props.get(vars.$code--font-family); - font-size: props.get(vars.$code--font-size); + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); font-feature-settings: props.get(vars.$code--feature-settings); - line-height: props.get(vars.$code--line-height); + line-height: props.get(vars.$code--line-height); } pre { - margin: 0; + margin: 0; overflow-x: auto; code { font-size: 1em; - color: currentColor; + color: currentColor; } } @@ -60,13 +60,13 @@ h4, h5, 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); + 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); - color: props.get(vars.$heading--color); + line-height: props.get(vars.$heading--line-height); + color: props.get(vars.$heading--color); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); @@ -91,14 +91,14 @@ ul, ol { - padding: 0; - margin: 0; + padding: 0; + margin: 0; list-style: none; } li { padding: 0; - margin: 0; + margin: 0; } :focus, @@ -108,28 +108,27 @@ :link, :visited { - color: currentColor; + 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; + 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; + appearance: none; + background: none; + border: 0; &::-moz-focus-inner { border: 0; @@ -139,7 +138,7 @@ input, textarea { &::placeholder { - color: props.get(core.$theme, --text-mute); + color: props.get(core.$theme, --text-mute); opacity: 1; } @@ -153,15 +152,15 @@ } hr { - block-size: props.get(core.$border-width--thin); - margin: 0; + block-size: props.get(core.$border-width--thin); + margin: 0; background-color: props.get(core.$theme, --border); - border: 0; + border: 0; } figure { padding: 0; - margin: 0; + margin: 0; } @each $theme in map.keys(props.get(core.$transparent-colors)) { diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 64d4a8f..f0256b0 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -1,26 +1,69 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default; +$paragraph--margin-bs: props.def( + --s-implicit--paragraph--margin-bs, + props.get(core.$size--200) +) !default; -$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; +$small--font-size: props.def( + --s-implicit--small--font-size, + 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; +$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); -$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--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, 0.93em); +$code--feature-settings: props.def( + --s-implicit--code--feature-settings, + props.get(core.$font--mono--feature-settings) +) !default; -$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--standard--family)) !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, bold) !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--standard--feature-settings)) !default; +$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--standard--family) +) !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, bold) !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--standard--feature-settings) +) !default; -$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default; +$heading--color: props.def( + --s-implicit--heading--color, + props.get(core.$theme, --heading), + "color" +) !default; diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 8498487..fea78f1 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -1,78 +1,79 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'links.vars'; -@use 'links.vars' as vars; +@forward "links.vars"; +@use "links.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('links') { + @include bem.scope("links") { :link, :visited { - color: currentColor; - text-decoration: underline; + 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-sm); - box-decoration-break: clone; + text-decoration-color: props.get(vars.$underline-color); + border-radius: props.get(vars.$rounding-sm); + box-decoration-break: clone; &:hover { - text-decoration: underline; + text-decoration: underline; text-decoration-thickness: props.get(vars.$hover--underline-width); - text-decoration-skip-ink: none; + text-decoration-skip-ink: none; } &:focus-visible { - color: props.get(vars.$key-focus--text-color); + 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)) + 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 bem.modifier('invisible') { + @include bem.modifier("invisible") { :link, :visited { text-decoration: none; } } - @include bem.modifier('colored') { + @include bem.modifier("colored") { :link { - color: props.get(vars.$colored--text-color); + 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); + color: props.get(vars.$colored--hover--text-color); } } :visited { - color: props.get(vars.$colored--visited--text-color); + 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); + color: props.get(vars.$colored--visited--hover--text-color); } } } - @include bem.modifier('mark-external') { + @include bem.modifier("mark-external") { :link, :visited { - &[href^='http'] { + &[href^="http"] { &::after { - content: ' ↗'; + content: " ↗"; } } } @@ -82,21 +83,30 @@ @include bem.modifier(string.slice($theme, 3)) { :link, :visited { - color: props.get(vars.$static-themes, $theme, --text-color); - text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); + 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); + 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)) + 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); } } @@ -106,21 +116,26 @@ :has(img) { img { margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); } &:link, &:visited { &:focus-visible { - outline: none; + outline: none; box-shadow: none; img { 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)) + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index cd80e4c..c06789b 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -1,49 +1,106 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; -$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; -$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; -$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; +$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; +$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; +$underline-width: props.def( + --s-links--underline-width, + props.get(core.$border-width--thin) +) !default; +$hover--underline-width: props.def( + --s-links--hover--underline-width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --s-links--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --s-links--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --s-links--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$underline-color: props.def( + --s-links--underline-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; -$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; -$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; +$colored--text-color: props.def( + --s-links--colored--text-color, + props.get(core.$theme, --accent, --1100), + "color" +) !default; +$colored--underline-color: props.def( + --s-links--colored--underline-color, + props.get(core.$theme, --accent, --600), + "color" +) !default; +$colored--hover--text-color: props.def( + --s-links--colored--hover--text-color, + props.get(core.$theme, --accent, --1300), + "color" +) !default; -$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; -$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; -$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; +$colored--visited--text-color: props.def( + --s-links--colored--visited--text-color, + props.get(core.$theme, --purple, --1100), + "color" +) !default; +$colored--visited--underline-color: props.def( + --s-links--colored--visited--underline-color, + props.get(core.$theme, --purple, --600), + "color" +) !default; +$colored--visited--hover--text-color: props.def( + --s-links--colored--visited--hover--text-color, + props.get(core.$theme, --purple, --1300), + "color" +) !default; -$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--text-color: props.def( + --s-links--key-focus--text-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --s-links--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --s-links--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$static-themes: props.def(--s-links, (), 'color'); +$static-themes: props.def(--s-links, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $link-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $link-theme: ( - --text-color: currentColor, - --underline-color: props.get(core.$transparent-colors, $theme, --500), + $static-themes: props.merge( + $static-themes, + ( + $link-theme: ( + --text-color: currentColor, + --underline-color: props.get(core.$transparent-colors, $theme, --500), + --hover: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), - --hover: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - - --key-focus: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), + --key-focus: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + ), ) - )); + ); } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index 0285bb0..7b9ddbc 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.scss @@ -1,20 +1,20 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'lists.vars'; -@use 'lists.vars' as vars; +@forward "lists.vars"; +@use "lists.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('lists') { + @include bem.scope("lists") { ul, ol { padding-inline-start: props.get(vars.$indent); - margin-block-start: props.get(vars.$margin-bs); + margin-block-start: props.get(vars.$margin-bs); ul, ol { @@ -31,22 +31,22 @@ } dl { - padding: 0; - margin-block: props.get(vars.$margin-bs) 0; + padding: 0; + margin-block: props.get(vars.$margin-bs) 0; margin-inline: 0; } dt { font-weight: bold; - color: props.get(core.$theme, --heading); + color: props.get(core.$theme, --heading); } dd { - margin-block: 0; + margin-block: 0; margin-inline: props.get(vars.$indent) 0; } - @include bem.modifier('compact') { + @include bem.modifier("compact") { ul, ol { padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss index e40f194..57fcc54 100644 --- a/src/scopes/_lists.vars.scss +++ b/src/scopes/_lists.vars.scss @@ -1,8 +1,11 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; +@use "pkg:iro-sass/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; +$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; +$compact--indent: props.def( + --s-lists--compact--indent, + props.get(core.$list--compact-indent) +) !default; diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index cb3a10c..7442874 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -1,40 +1,40 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../objects/table.vars' as table; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../objects/table.vars" as table; -@forward 'tables.vars'; -@use 'tables.vars' as vars; +@forward "tables.vars"; +@use "tables.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('tables') { + @include bem.scope("tables") { table { margin-block-start: props.get(vars.$margin-bs); - border-spacing: 0; - border-collapse: separate; + border-spacing: 0; + border-collapse: separate; } th { - padding-block: props.get(table.$pad-b); + 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; + 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: 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; + 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: props.get(table.$border-width); } @@ -46,7 +46,7 @@ } } - @include bem.modifier('flush') { + @include bem.modifier("flush") { th, td { &:first-child { @@ -59,7 +59,7 @@ } } - @include bem.modifier('box') { + @include bem.modifier("box") { td { background-color: props.get(table.$box--bg-color); diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index dfb4c76..12d0a0c 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss @@ -1,4 +1,4 @@ -@use 'pkg:iro-sass/src/props'; -@use 'implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "implicit.vars" as implicit; $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -- cgit v1.3.1