From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 13:00:59 +0200 Subject: Revert "Paths" This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226. --- 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, 332 insertions(+), 496 deletions(-) (limited to 'src/scopes') diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index bc4fd39..10e6d81 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss @@ -1,27 +1,25 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 117b4a6..63c40b0 100644 --- a/src/scopes/_blockquotes.vars.scss +++ b/src/scopes/_blockquotes.vars.scss @@ -1,24 +1,11 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "./implicit.vars" as implicit; +@use 'pkg:iro-sass/src/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 6c5ba63..77a3eb1 100644 --- a/src/scopes/_body.scss +++ b/src/scopes/_body.scss @@ -1,15 +1,15 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 414e0c1..981ef32 100644 --- a/src/scopes/_body.vars.scss +++ b/src/scopes/_body.vars.scss @@ -1,25 +1,12 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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) + 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; +$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; -$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 d931c22..db43de0 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -1,39 +1,39 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 e22421c..329d372 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss @@ -1,25 +1,18 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "./implicit.vars" as implicit; +@use 'pkg:iro-sass/src/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 852ab5a..c993f5a 100644 --- a/src/scopes/_figures.scss +++ b/src/scopes/_figures.scss @@ -1,20 +1,20 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../objects/figure.vars" as figure; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 a6a7bbb..23623fd 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/bem"; -@use "pkg:iro-sass/props"; -@use "../objects/heading.vars" as heading; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../objects/heading.vars' as heading; @mixin styles { /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -15,62 +15,56 @@ 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 0.15em, - props.get(heading.$bg-color) 0.15em, - props.get(heading.$bg-color) 0.6em, - transparent 0.6em - ); + @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); } - @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); } } } @@ -85,16 +79,10 @@ } } - @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 f8c575d..728fd22 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/bem"; -@use "pkg:iro-sass/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/src/bem'; +@use 'pkg:iro-sass/src/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,27 +108,28 @@ :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; @@ -138,7 +139,7 @@ input, textarea { &::placeholder { - color: props.get(core.$theme, --text-mute); + color: props.get(core.$theme, --text-mute); opacity: 1; } @@ -152,15 +153,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 f0256b0..64d4a8f 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -1,69 +1,26 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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, 0.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, .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 fea78f1..8498487 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -1,79 +1,78 @@ -@use "sass:map"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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: ' ↗'; } } } @@ -83,30 +82,21 @@ @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); } } @@ -116,26 +106,21 @@ :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 c06789b..cd80e4c 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -1,106 +1,49 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/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), - --hover: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), + $static-themes: props.merge($static-themes, ( + $link-theme: ( + --text-color: currentColor, + --underline-color: props.get(core.$transparent-colors, $theme, --500), - --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), - ), - ), + --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), + ), ) - ); + )); } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index 7b9ddbc..0285bb0 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.scss @@ -1,20 +1,20 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 57fcc54..e40f194 100644 --- a/src/scopes/_lists.vars.scss +++ b/src/scopes/_lists.vars.scss @@ -1,11 +1,8 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "./implicit.vars" as implicit; +@use 'pkg:iro-sass/src/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 7442874..cb3a10c 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -1,40 +1,40 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../objects/table.vars" as table; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 12d0a0c..dfb4c76 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss @@ -1,4 +1,4 @@ -@use "pkg:iro-sass/props"; -@use "implicit.vars" as implicit; +@use 'pkg:iro-sass/src/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