From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/objects/_alert.scss | 49 +-- src/objects/_alert.vars.scss | 52 ++- src/objects/_avatar.scss | 173 ++++---- src/objects/_avatar.vars.scss | 127 +++--- src/objects/_backdrop.scss | 32 +- src/objects/_backdrop.vars.scss | 14 +- src/objects/_button.scss | 281 +++++++------ src/objects/_button.vars.scss | 708 ++++++++++++++++++-------------- src/objects/_card.scss | 393 ++++++++++-------- src/objects/_card.vars.scss | 153 +++++-- src/objects/_checkbox.scss | 215 +++++----- src/objects/_checkbox.vars.scss | 108 +++-- src/objects/_dialog.scss | 72 ++-- src/objects/_dialog.vars.scss | 20 +- src/objects/_divider.scss | 136 +++--- src/objects/_divider.vars.scss | 181 +++++--- src/objects/_emoji.scss | 58 +-- src/objects/_emoji.vars.scss | 32 +- src/objects/_field-label.scss | 68 +-- src/objects/_field-label.vars.scss | 42 +- src/objects/_figure.scss | 30 +- src/objects/_figure.vars.scss | 20 +- src/objects/_heading.scss | 114 ++--- src/objects/_heading.vars.scss | 646 ++++++++++++++++++++--------- src/objects/_icon.scss | 30 +- src/objects/_icon.vars.scss | 6 +- src/objects/_lightbox.scss | 159 ++++--- src/objects/_lightbox.vars.scss | 89 ++-- src/objects/_menu.scss | 101 ++--- src/objects/_menu.vars.scss | 83 +++- src/objects/_navbar.scss | 247 ++++++----- src/objects/_navbar.vars.scss | 332 +++++++++------ src/objects/_palette.scss | 52 ++- src/objects/_placeholders.scss | 28 +- src/objects/_placeholders.vars.scss | 8 +- src/objects/_popover.scss | 54 ++- src/objects/_popover.vars.scss | 35 +- src/objects/_radio.scss | 151 +++---- src/objects/_radio.vars.scss | 107 +++-- src/objects/_side-nav.scss | 83 ++-- src/objects/_side-nav.vars.scss | 84 +++- src/objects/_status-indicator.scss | 28 +- src/objects/_status-indicator.vars.scss | 30 +- src/objects/_switch.scss | 156 +++---- src/objects/_switch.vars.scss | 121 ++++-- src/objects/_tabbar.scss | 110 ++--- src/objects/_tabbar.vars.scss | 76 +++- src/objects/_table.scss | 88 ++-- src/objects/_table.vars.scss | 68 ++- src/objects/_text-field.scss | 149 +++---- src/objects/_text-field.vars.scss | 121 ++++-- src/objects/_thumbnail.scss | 95 ++--- src/objects/_thumbnail.vars.scss | 102 +++-- 53 files changed, 3936 insertions(+), 2581 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index c2a1c58..3aeb781 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -1,44 +1,37 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'alert.vars'; -@use 'alert.vars' as vars; +@forward "alert.vars"; +@use "alert.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('alert') { - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); + @include bem.object("alert") { + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) props.get(vars.$shadow-color); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } @each $mod, $theme in vars.$themes-config { @include bem.modifier($mod) { background-color: props.get(vars.$themes, $theme, --bg-color); border-color: props.get(vars.$themes, $theme, --border-color); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(vars.$themes, $theme, --shadow-color); } } diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss index bbd3dad..aedd917 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss @@ -1,36 +1,50 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; -$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; -$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; +$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; +$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; +$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; -$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default; -$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default; +$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default; +$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default; $shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default; $shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default; -$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default; +$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), "color") !default; +$border-color: props.def( + --o-alert--border-color, + props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) + props.get(core.$theme, --text-mute), + "color" +) !default; -$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; +$shadow-color: props.def( + --o-alert--shadow-color, + props.get(core.$transparent-colors, --black, --200), + "color" +) !default; $themes-config: ( - accent: --accent, + accent: --accent, positive: --positive, negative: --negative, - warning: --warning, + warning: --warning, ) !default; -$themes: props.def(--o-alert, (), 'color'); +$themes: props.def(--o-alert, (), "color"); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - $key: ( - --bg-color: props.get(core.$theme, --bg-l2), - --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), - --shadow-color: props.get(core.$theme, $key, --200), + $themes: props.merge( + $themes, + ( + $key: ( + --bg-color: props.get(core.$theme, --bg-l2), + --border-color: props.get(core.$theme, $key, --700) + props.get(core.$theme, $key, --700) + props.get(core.$theme, $key, --800), + --shadow-color: props.get(core.$theme, $key, --200), + ), ) - )); + ); } diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 272c213..f805502 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -1,118 +1,135 @@ -@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 'avatar.vars'; -@use 'avatar.vars' as vars; +@forward "avatar.vars"; +@use "avatar.vars" as vars; @mixin status($indicator-size) { - @include bem.elem('status') { + @include bem.elem("status") { inline-size: props.get($indicator-size); - block-size: props.get($indicator-size); - - @include bem.sibling-elem('content') { - mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at - calc(100% - .5 * props.get($indicator-size)) - calc(100% - .5 * props.get($indicator-size)), - transparent 95%, - #fff); + block-size: props.get($indicator-size); + + @include bem.sibling-elem("content") { + mask-image: radial-gradient( + circle calc(0.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) + at calc(100% - 0.5 * props.get($indicator-size)) + calc(100% - 0.5 * props.get($indicator-size)), + transparent 95%, + #fff + ); } } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('avatar') { - position: relative; - display: inline-block; - font-style: normal; - vertical-align: .05em; - border-radius: props.get(vars.$rounding); + @include bem.object("avatar") { + position: relative; + display: inline-block; + font-style: normal; + vertical-align: 0.05em; + border-radius: props.get(vars.$rounding); &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: 1; + display: none; pointer-events: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - content: ''; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: props.get(vars.$rounding); - 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); + content: ""; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: props.get(vars.$rounding); + 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.elem('status') { - position: absolute; - inset-block-end: 0; + @include bem.elem("status") { + position: absolute; + inset-block-end: 0; inset-inline-end: 0; } - @include bem.elem('icon') { - position: absolute; - inset-block-end: 0; + @include bem.elem("icon") { + position: absolute; + inset-block-end: 0; inset-inline-end: 0; - display: flex; - align-items: flex-end; - justify-content: flex-end; - inline-size: props.get(vars.$icon-size); - block-size: props.get(vars.$icon-size); + display: flex; + align-items: flex-end; + justify-content: flex-end; + inline-size: props.get(vars.$icon-size); + block-size: props.get(vars.$icon-size); - @include bem.sibling-elem('content') { + @include bem.sibling-elem("content") { clip-path: props.get(vars.$icon-mask); } } - @include bem.elem('content') { - display: block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - font-size: props.get(vars.$font-size); - line-height: props.get(vars.$size); - text-align: center; - object-fit: cover; - object-position: center center; - border-radius: props.get(vars.$rounding); + @include bem.elem("content") { + display: block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$size); + text-align: center; + object-fit: cover; + object-position: center center; + border-radius: props.get(vars.$rounding); } - @include bem.modifier('circle') { + @include bem.modifier("circle") { border-radius: 100%; &::after { border-radius: 100%; } - @include bem.elem('content') { + @include bem.elem("content") { border-radius: 100%; } } - @include bem.modifier('placeholder') { - @include bem.elem('content') { + @include bem.modifier("placeholder") { + @include bem.elem("content") { background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); } } - @include bem.modifier('colored') { - @include bem.elem('content') { - color: #fff; - background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); + @include bem.modifier("colored") { + @include bem.elem("content") { + color: #fff; + background-color: hsl( + props.get(vars.$bg-color--h), + props.get(vars.$bg-color--s), + props.get(vars.$bg-color--l) + ); } } - @include bem.modifier('colored-gradient') { - @include bem.elem('content') { - color: #fff; - background: linear-gradient(props.get(vars.$bg-angle), - hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), - hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); + @include bem.modifier("colored-gradient") { + @include bem.elem("content") { + color: #fff; + background: linear-gradient( + props.get(vars.$bg-angle), + hsl( + props.get(vars.$bg-color--h), + props.get(vars.$bg-color--s), + props.get(vars.$bg-color--l) + ), + hsl( + props.get(vars.$bg-color-2--h), + props.get(vars.$bg-color-2--s), + props.get(vars.$bg-color-2--l) + ) + ); } } @@ -122,19 +139,19 @@ @include bem.modifier($mod) { @include status($indicator-size); - @include bem.elem('icon') { + @include bem.elem("icon") { inline-size: props.get($icon-size); - block-size: props.get($icon-size); + block-size: props.get($icon-size); - @include bem.sibling-elem('content') { - clip-path: props.get($icon-mask); + @include bem.sibling-elem("content") { + clip-path: props.get($icon-mask); } } - @include bem.elem('content') { + @include bem.elem("content") { inline-size: props.get($size); - block-size: props.get($size); - font-size: props.get($font-size); + block-size: props.get($size); + font-size: props.get($font-size); line-height: props.get($size); } } diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index 467d7cc..7d1c342 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss @@ -1,79 +1,102 @@ -@use 'sass:math'; +@use "sass:math"; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; @function icon-mask($p) { $offset: 0.15 * math.div(0.5, $p); @return 'data:image/svg+xml;utf8,#avatar_mask'; } -$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; -$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; -$indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default; +$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; +$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; +$indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default; $indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default; -$rounding: props.def(--o-avatar--rounding, 25%) !default; -$icon-size: props.def(--o-avatar--icon-size, 1.2em) !default; -$icon-mask: props.def(--o-avatar--icon-mask, url(icon-mask(.5))) !default; +$rounding: props.def(--o-avatar--rounding, 25%) !default; +$icon-size: props.def(--o-avatar--icon-size, 1.2em) !default; +$icon-mask: props.def(--o-avatar--icon-mask, url(icon-mask(0.5))) !default; -$size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default; -$font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default; -$indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default; -$icon-size--xxxl: props.def(--o-avatar--xxxl--icon-size, 1.9em) !default; -$icon-mask--xxxl: props.def(--o-avatar--xxxl--icon-mask, url(icon-mask(.75))) !default; +$size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default; +$font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default; +$indicator-size--xxxl: props.def( + --o-avatar--xxxl--indicator-size, + props.get(core.$size--400) +) !default; +$icon-size--xxxl: props.def(--o-avatar--xxxl--icon-size, 1.9em) !default; +$icon-mask--xxxl: props.def(--o-avatar--xxxl--icon-mask, url(icon-mask(0.75))) !default; -$size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default; -$font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default; -$indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default; -$icon-size--xxl: props.def(--o-avatar--xxl--icon-size, 1.7em) !default; -$icon-mask--xxl: props.def(--o-avatar--xxl--icon-mask, url(icon-mask(.7))) !default; +$size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default; +$font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default; +$indicator-size--xxl: props.def( + --o-avatar--xxl--indicator-size, + props.get(core.$size--300) +) !default; +$icon-size--xxl: props.def(--o-avatar--xxl--icon-size, 1.7em) !default; +$icon-mask--xxl: props.def(--o-avatar--xxl--icon-mask, url(icon-mask(0.7))) !default; -$size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default; -$font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default; +$size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default; +$font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default; $indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default; -$icon-size--xl: props.def(--o-avatar--xl--icon-size, 1.5em) !default; -$icon-mask--xl: props.def(--o-avatar--xl--icon-mask, url(icon-mask(.6))) !default; +$icon-size--xl: props.def(--o-avatar--xl--icon-size, 1.5em) !default; +$icon-mask--xl: props.def(--o-avatar--xl--icon-mask, url(icon-mask(0.6))) !default; -$size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default; -$font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default; +$size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default; +$font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default; $indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default; -$icon-size--lg: props.def(--o-avatar--lg--icon-size, 1.25em) !default; -$icon-mask--lg: props.def(--o-avatar--lg--icon-mask, url(icon-mask(.55))) !default; +$icon-size--lg: props.def(--o-avatar--lg--icon-size, 1.25em) !default; +$icon-mask--lg: props.def(--o-avatar--lg--icon-mask, url(icon-mask(0.55))) !default; -$size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default; -$font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default; +$size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default; +$font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default; $indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default; -$icon-size--sm: props.def(--o-avatar--sm--icon-size, 1.2em) !default; -$icon-mask--sm: props.def(--o-avatar--sm--icon-mask, url(icon-mask(.5))) !default; +$icon-size--sm: props.def(--o-avatar--sm--icon-size, 1.2em) !default; +$icon-mask--sm: props.def(--o-avatar--sm--icon-mask, url(icon-mask(0.5))) !default; -$size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default; -$font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default; +$size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default; +$font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default; $indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default; -$icon-size--xs: props.def(--o-avatar--xs--icon-size, 1.2em) !default; -$icon-mask--xs: props.def(--o-avatar--xs--icon-mask, url(icon-mask(.5))) !default; +$icon-size--xs: props.def(--o-avatar--xs--icon-size, 1.2em) !default; +$icon-mask--xs: props.def(--o-avatar--xs--icon-mask, url(icon-mask(0.5))) !default; -$key-focus--border-width: props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-avatar--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-avatar--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-avatar--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default; -$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; -$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; +$bg-color--h: props.def(--o-avatar--bg-color--h, 354, "color") !default; +$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, "color") !default; +$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, "color") !default; -$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default; -$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default; -$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default; +$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, "color") !default; +$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, "color") !default; +$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, "color") !default; $bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default; -$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--border-color: props.def( + --o-avatar--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-avatar--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; $sizes: ( - 'xs' $size--xs $font-size--xs $indicator-size--xs $icon-size--xs $icon-mask--xs, - 'sm' $size--sm $font-size--sm $indicator-size--sm $icon-size--sm $icon-mask--sm, - 'lg' $size--lg $font-size--lg $indicator-size--lg $icon-size--lg $icon-mask--lg, - 'xl' $size--xl $font-size--xl $indicator-size--xl $icon-size--xl $icon-mask--xl, - 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl $icon-size--xxl $icon-mask--xxl, - 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl $icon-size--xxxl $icon-mask--xxxl, + "xs" $size--xs $font-size--xs $indicator-size--xs $icon-size--xs $icon-mask--xs, + "sm" $size--sm $font-size--sm $indicator-size--sm $icon-size--sm $icon-mask--sm, + "lg" $size--lg $font-size--lg $indicator-size--lg $icon-size--lg $icon-mask--lg, + "xl" $size--xl $font-size--xl $indicator-size--xl $icon-size--xl $icon-mask--xl, + "xxl" $size--xxl $font-size--xxl $indicator-size--xxl $icon-size--xxl $icon-mask--xxl, + "xxxl" $size--xxxl $font-size--xxxl $indicator-size--xxxl $icon-size--xxxl $icon-mask--xxxl ) !default; diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 6660abf..1a7d1fa 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss @@ -1,23 +1,23 @@ -@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 'backdrop.vars'; -@use 'backdrop.vars' as vars; +@forward "backdrop.vars"; +@use "backdrop.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('backdrop') { - position: fixed; - inset: 0; - z-index: props.get(vars.$z-index); - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: auto; + @include bem.object("backdrop") { + position: fixed; + inset: 0; + z-index: props.get(vars.$z-index); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: auto; background-color: props.get(vars.$bg-color); - backdrop-filter: blur(props.get(vars.$blur)); + backdrop-filter: blur(props.get(vars.$blur)); } } diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss index 9206117..78f4742 100644 --- a/src/objects/_backdrop.vars.scss +++ b/src/objects/_backdrop.vars.scss @@ -1,6 +1,10 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$z-index: props.def(--o-backdrop--z-index, 10000) !default; -$blur: props.def(--o-backdrop--blur, 2em) !default; -$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default; +$z-index: props.def(--o-backdrop--z-index, 10000) !default; +$blur: props.def(--o-backdrop--blur, 2em) !default; +$bg-color: props.def( + --o-backdrop--bg-color, + props.get(core.$transparent-colors, --black, --600), + "color" +) !default; diff --git a/src/objects/_button.scss b/src/objects/_button.scss index a3c8187..8adc0f7 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -1,115 +1,119 @@ -@use 'sass:list'; -@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:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'button.vars'; -@use 'button.vars' as vars; +@forward "button.vars"; +@use "button.vars" as vars; @mixin -apply-theme($theme, $key: ()) { - color: props.get($theme, list.join($key, --disabled --label-color)...); + color: props.get($theme, list.join($key, --disabled --label-color)...); background-color: props.get($theme, list.join($key, --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --disabled --border-color)...); + border-color: props.get($theme, list.join($key, --disabled --border-color)...); &::after { outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width) + ) props.get($theme, list.join($key, --key-focus --outline-color)...); } &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --label-color)...); + color: props.get($theme, list.join($key, --label-color)...); background-color: props.get($theme, list.join($key, --bg-color)...); - border-color: props.get($theme, list.join($key, --border-color)...); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --shadow-color)...); + border-color: props.get($theme, list.join($key, --border-color)...); + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...); &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --hover --label-color)...); + color: props.get($theme, list.join($key, --hover --label-color)...); background-color: props.get($theme, list.join($key, --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --hover --border-color)...); + border-color: props.get($theme, list.join($key, --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --active --label-color)...); + color: props.get($theme, list.join($key, --active --label-color)...); background-color: props.get($theme, list.join($key, --active --bg-color)...); - border-color: props.get($theme, list.join($key, --active --border-color)...); - box-shadow: none; + border-color: props.get($theme, list.join($key, --active --border-color)...); + box-shadow: none; } } - @include bem.modifier('badge') { - color: props.get($theme, list.join($key, --badge --label-color)...); + @include bem.modifier("badge") { + color: props.get($theme, list.join($key, --badge --label-color)...); background-color: props.get($theme, list.join($key, --badge --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --border-color)...); - box-shadow: none; + border-color: props.get($theme, list.join($key, --badge --border-color)...); + box-shadow: none; &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --badge --label-color)...); + color: props.get($theme, list.join($key, --badge --label-color)...); background-color: props.get($theme, list.join($key, --badge --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --border-color)...); - box-shadow: none; + border-color: props.get($theme, list.join($key, --badge --border-color)...); + box-shadow: none; &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --badge --hover --label-color)...); + color: props.get($theme, list.join($key, --badge --hover --label-color)...); background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); + border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --badge --active --label-color)...); - background-color: props.get($theme, list.join($key, --badge --active --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --active --border-color)...); + color: props.get($theme, list.join($key, --badge --active --label-color)...); + background-color: props.get( + $theme, + list.join($key, --badge --active --bg-color)... + ); + border-color: props.get( + $theme, + list.join($key, --badge --active --border-color)... + ); } } } - @include bem.modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); + @include bem.modifier("quiet") { + color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); background-color: transparent; - border-color: transparent; + border-color: transparent; &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --quiet --label-color)...); + color: props.get($theme, list.join($key, --quiet --label-color)...); background-color: transparent; - border-color: transparent; - box-shadow: none; + border-color: transparent; + box-shadow: none; &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --quiet --hover --label-color)...); + color: props.get($theme, list.join($key, --quiet --hover --label-color)...); background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); - border-color: transparent; + border-color: transparent; } &:active { - color: props.get($theme, list.join($key, --quiet --active --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); - border-color: transparent; + color: props.get($theme, list.join($key, --quiet --active --label-color)...); + background-color: props.get( + $theme, + list.join($key, --quiet --active --bg-color)... + ); + border-color: transparent; } } } - @include bem.is('highlighted') { + @include bem.is("highlighted") { &:link, &:visited, &:enabled { @@ -121,32 +125,27 @@ box-shadow: 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --highlighted --shadow-color)...); + props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --highlighted --shadow-color)...); &:focus-visible { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...); } } } - @include bem.is('selected') { - color: props.get($theme, list.join($key, --selected --disabled --label-color)...); + @include bem.is("selected") { + color: props.get($theme, list.join($key, --selected --disabled --label-color)...); background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); + border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { - color: props.get($theme, list.join($key, --selected --label-color)...); + @include bem.multi("&:link, &:visited, &:enabled", "modifier" "badge") { + color: props.get($theme, list.join($key, --selected --label-color)...); background-color: props.get($theme, list.join($key, --selected --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --border-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); } &:link, @@ -154,47 +153,67 @@ &:enabled { &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --selected --hover --label-color)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); + color: props.get($theme, list.join($key, --selected --hover --label-color)...); + background-color: props.get( + $theme, + list.join($key, --selected --hover --bg-color)... + ); + border-color: props.get( + $theme, + list.join($key, --selected --hover --border-color)... + ); } &:active { - color: props.get($theme, list.join($key, --selected --active --label-color)...); - background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --active --border-color)...); + color: props.get($theme, list.join($key, --selected --active --label-color)...); + background-color: props.get( + $theme, + list.join($key, --selected --active --bg-color)... + ); + border-color: props.get( + $theme, + list.join($key, --selected --active --border-color)... + ); } } } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('button') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - text-overflow: ellipsis; - font-size: props.get(vars.$font-size); - line-height: props.get(vars.$line-height); - text-align: center; - white-space: nowrap; - text-decoration: none; - border: props.get(vars.$border-width) solid transparent; - border-radius: props.get(vars.$rounding); - transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("button") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + text-overflow: ellipsis; + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$line-height); + text-align: center; + white-space: nowrap; + text-decoration: none; + border: props.get(vars.$border-width) solid transparent; + border-radius: props.get(vars.$rounding); + transition: + color 0.1s, + background-color 0.1s, + border-color 0.1s, + box-shadow 0.1s; &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; + position: absolute; + inset: calc( + -1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset) + ); + z-index: 1; + display: none; pointer-events: none; - outline: transparent solid props.get(vars.$key-focus--border-width); - content: ''; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + outline: transparent solid props.get(vars.$key-focus--border-width); + content: ""; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); } &:link, @@ -209,7 +228,7 @@ } } - @include bem.elem('label') { + @include bem.elem("label") { display: inline-block; margin-inline: props.get(vars.$pad-i-label); } @@ -222,79 +241,91 @@ } } - @include bem.modifier('pill') { + @include bem.modifier("pill") { padding-inline: props.get(vars.$pad-i-pill); - border-radius: 100em; + border-radius: 100em; &::after { - border-radius: 100em; + border-radius: 100em; } } - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); + @include bem.modifier("icon") { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); padding-inline: 0; } - @include bem.modifier('wide') { - @include bem.elem('label') { + @include bem.modifier("wide") { + @include bem.elem("label") { margin-inline: props.get(vars.$pad-i-wide); } } - @include bem.modifier('justify') { + @include bem.modifier("justify") { text-align: justify; text-align-last: justify; } - @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, + $font-size in vars.$fixed-sizes + { @include bem.modifier($mod) { - padding-block: props.get($pad-b); + padding-block: props.get($pad-b); padding-inline: props.get($pad-i); - font-size: props.get($font-size); + font-size: props.get($font-size); - @include bem.elem('label') { + @include bem.elem("label") { margin-inline: props.get($pad-i-label); } - @include bem.modifier('pill') { + @include bem.modifier("pill") { padding-inline: props.get($pad-i-pill); } - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); + @include bem.modifier("icon") { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); padding-inline: 0; } - @include bem.modifier('wide') { - @include bem.elem('label') { + @include bem.modifier("wide") { + @include bem.elem("label") { margin-inline: props.get($pad-i-wide); } } } } - @include bem.modifier('align-block') { + @include bem.modifier("align-block") { margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); + @include bem.modifier("pill") { + margin-inline: calc( + -1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width) + ); } - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + @include bem.modifier("icon") { + margin-inline: calc( + -1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - 0.5em * + (props.get(vars.$line-height) - 1) + ); } @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { @include bem.modifier($mod) { margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); + @include bem.modifier("pill") { + margin-inline: calc( + -1 * props.get($pad-i-pill) - props.get(vars.$border-width) + ); } - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + @include bem.modifier("icon") { + margin-inline: calc( + -1 * props.get($pad-b) - props.get(vars.$border-width) - 0.5em * + (props.get(vars.$line-height) - 1) + ); } } } diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 3f835ae..a137d6d 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -1,386 +1,456 @@ -@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; -$line-height: props.def(--o-button--line-height, 1.4) !default; +$line-height: props.def(--o-button--line-height, 1.4) !default; $border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default; -$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; +$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; -$pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default; +$pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default; $pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default; -$pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default; -$pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default; -$pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default; -$font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default; +$pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default; +$pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default; +$pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default; +$font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default; -$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default; +$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default; $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default; -$pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default; -$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default; -$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default; -$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default; - -$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; -$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; -$pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default; -$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default; -$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; -$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; - -$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; +$pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default; +$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default; +$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default; +$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default; + +$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; +$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; +$pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default; +$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default; +$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; +$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; + +$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default; -$pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default; -$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; -$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; -$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; +$pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default; +$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; +$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; +$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; -$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; +$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default; -$pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default; -$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; -$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; -$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; +$pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default; +$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; +$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; +$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; -$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; -$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; +$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; +$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; -$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-button--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-button--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-button--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; $fixed-sizes: ( - 'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs, - 'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, + "xs" $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs, + "sm" $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, + "lg" $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, + "xl" $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl ) !default; -$themes: props.def(--o-button, (), 'color'); +$themes: props.def(--o-button, (), "color"); $default-theme-override: () !default; -$default-theme: map.deep-merge(( - --bg-color: props.get(core.$theme, --bg-l2), - --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), - --shadow-color: props.get(core.$theme, --shadow), - - --hover: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - - --disabled: ( - --bg-color: transparent, - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --text-disabled), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, --focus, --border), - --shadow-color: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - - --hover: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text), - ), - - --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text-mute), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, --text), - +$default-theme: map.deep-merge( + ( + --bg-color: props.get(core.$theme, --bg-l2), + --label-color: props.get(core.$theme, --text), + --border-color: props.get(core.$theme, --box, --border) + props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), + --shadow-color: props.get(core.$theme, --shadow), --hover: ( - --bg-color: props.get(core.$theme, --border-mute), + --bg-color: props.get(core.$theme, --bg-l1), --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), ), --active: ( - --bg-color: props.get(core.$theme, --border), + --bg-color: props.get(core.$theme, --border-mute), --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), ), --disabled: ( + --bg-color: transparent, --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --text-disabled), ), - ), -), $default-theme-override) !default; -$default-theme: props.def(--o-button, $default-theme, 'color'); -$default-theme-dark-override: () !default; -$default-theme-dark: map.deep-merge(( - --bg-color: props.get(core.$theme, --border-mute), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-strong), - ), - - --selected: ( - --border-color: props.get(core.$theme, --text), - ), -), $default-theme-override) !default; -$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); - -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), - $themes: props.merge($themes, ( - $button-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), - --shadow-color: props.get(core.$transparent-colors, --black, --200), + --highlighted: ( + --border-color: props.get(core.$theme, --focus, --border), + --shadow-color: props.get(core.$theme, --focus, --outline), + ), + --selected: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --400), + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text), ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --500), + --bg-color: props.get(core.$theme, --text-mute), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text-mute), ), --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --300), + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), ), + ), - --key-focus: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), + --badge: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-mute), + --hover: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), ), - --highlighted: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --shadow-color: props.get(core.$transparent-colors, --black, --200), + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), ), + ), - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), + --quiet: ( + --label-color: props.get(core.$theme, --text), + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), ), - --badge: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ), + $default-theme-override +) !default; +$default-theme: props.def(--o-button, $default-theme, "color"); - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), +$default-theme-dark-override: () !default; +$default-theme-dark: map.deep-merge( + ( + --bg-color: props.get(core.$theme, --border-mute), + --border-color: props.get(core.$theme, --border-mute), + --hover: ( + --bg-color: props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --border), + ), - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), - ), + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-strong), + ), - --quiet: ( - --label-color: props.get(core.$transparent-colors, $theme, --900), + --selected: ( + --border-color: props.get(core.$theme, --text), + ), + ), + $default-theme-override +) !default; +$default-theme-dark: props.def(--o-button, $default-theme-dark, "dark"); - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), +@each $theme in map.keys(props.get(core.$transparent-colors)) { + $button-theme: --static-#{string.slice($theme, 3)}; - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), + $themes: props.merge( + $themes, + ( + $button-theme: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --300) + props.get(core.$transparent-colors, $theme, --300) + props.get(core.$transparent-colors, $theme, --400), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --400), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --100), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --key-focus: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --highlighted: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + ), + + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100) + props.get(core.$transparent-colors, $theme, --100) + props.get(core.$transparent-colors, $theme, --200), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --border-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --border-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + --border-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + ), + + --badge: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + --border-color: transparent, + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + --border-color: transparent, + ), + ), + + --quiet: ( + --label-color: props.get(core.$transparent-colors, $theme, --900), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --disabled: ( + --label-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + ), + ), ), - - --disabled: ( - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), ) - )); + ); } $themes-config: ( - accent: --accent, + accent: --accent, positive: --positive, negative: --negative, - warning: --warning, + warning: --warning, ) !default; @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), - --shadow-color: props.get(core.$theme, $key, --200), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --600), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --800), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, $key, --900), - --shadow-color: props.get(core.$theme, $key, --200), - ), - - --selected: ( - --bg-color: props.get(core.$theme, #{$key}-static, --900), - --label-color: props.get(core.$theme, #{$key}-static, --900-text), - --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), - - --hover: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1000), - --label-color: props.get(core.$theme, #{$key}-static, --1000-text), - --border-color: props.get(core.$theme, #{$key}-static, --1000), - ), - - --active: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1100), - --label-color: props.get(core.$theme, #{$key}-static, --1100-text), - --border-color: props.get(core.$theme, #{$key}-static, --1100), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --300), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --400), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --500), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, $key, --1100), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), + $themes: props.merge( + $themes, + ( + --#{$theme}: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --500) + props.get(core.$theme, $key, --500) + props.get(core.$theme, $key, --600), + --shadow-color: props.get(core.$theme, $key, --200), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --600), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --800), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --highlighted: ( + --border-color: props.get(core.$theme, $key, --900), + --shadow-color: props.get(core.$theme, $key, --200), + ), + + --selected: ( + --bg-color: props.get(core.$theme, #{$key}-static, --900), + --label-color: props.get(core.$theme, #{$key}-static, --900-text), + --border-color: props.get(core.$theme, #{$key}-static, --900) + props.get(core.$theme, #{$key}-static, --900) + props.get(core.$theme, #{$key}-static, --1000), + --hover: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1000), + --label-color: props.get( + core.$theme, + #{$key}-static, + --1000-text + ), + --border-color: props.get(core.$theme, #{$key}-static, --1000), + ), + + --active: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1100), + --label-color: props.get( + core.$theme, + #{$key}-static, + --1100-text + ), + --border-color: props.get(core.$theme, #{$key}-static, --1100), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --badge: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --300), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --400), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --500), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, $key, --1100), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ) ) - )); + ); } diff --git a/src/objects/_card.scss b/src/objects/_card.scss index b8bc727..3275bc8 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -1,84 +1,95 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'avatar.vars' as avatar; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "avatar.vars" as avatar; -@forward 'card.vars'; -@use 'card.vars' as vars; +@forward "card.vars"; +@use "card.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('card') { - position: relative; - display: flex; - flex-direction: column; + @include bem.object("card") { + position: relative; + display: flex; + flex-direction: column; background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + transition: + transform 0.2s, + background-color 0.2s, + border-color 0.2s, + box-shadow 0.2s; + + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { background-color: props.get(vars.$hover--bg-color); - border-color: props.get(vars.$hover--border-color); - box-shadow: none; - transform: translateY(props.get(vars.$hover--offset-b)); + border-color: props.get(vars.$hover--border-color); + box-shadow: none; + transform: translateY(props.get(vars.$hover--offset-b)); } &:focus-visible { - margin: calc(-1 * props.get(vars.$key-focus--border-width)); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - box-shadow: - 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + border: calc( + props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width) + ) + solid transparent; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); + 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); - transition: transform .2s; + transition: transform 0.2s; } } - @include bem.modifier('borderless') { + @include bem.modifier("borderless") { border-color: props.get(vars.$bg-color); } - @include bem.modifier('shadow') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + @include bem.modifier("shadow") { + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(vars.$shadow-color); - @include bem.modifier('quiet') { - @include bem.elem('image') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + @include bem.modifier("quiet") { + @include bem.elem("image") { + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(vars.$shadow-color); } } } - @include bem.modifier('highlight') { + @include bem.modifier("highlight") { margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width)); border-color: props.get(vars.$highlight--border-color); border-width: props.get(vars.$highlight--border-width); - box-shadow: - props.get(vars.$highlight--shadow-x) - props.get(vars.$highlight--shadow-y) - props.get(vars.$highlight--shadow-blur) - props.get(vars.$highlight--shadow-grow) + box-shadow: props.get(vars.$highlight--shadow-x) props.get(vars.$highlight--shadow-y) + props.get(vars.$highlight--shadow-blur) props.get(vars.$highlight--shadow-grow) props.get(vars.$highlight--shadow-color); - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active { border-color: props.get(vars.$highlight--border-color); @@ -86,207 +97,238 @@ } } - @include bem.elem('avatar') { - margin-block-start: props.get(vars.$pad-b); + @include bem.elem("avatar") { + margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); } - @include bem.elem('image') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: calc(100% + 2 * props.get(vars.$border-width)); - margin: calc(-1 * props.get(vars.$border-width)); - overflow: hidden; - object-fit: cover; - transition: background-color .2s, transform .2s, opacity .2s; + @include bem.elem("image") { + position: relative; + display: block; + flex: 0 0 auto; + inline-size: calc(100% + 2 * props.get(vars.$border-width)); + margin: calc(-1 * props.get(vars.$border-width)); + overflow: hidden; + object-fit: cover; + transition: + background-color 0.2s, + transform 0.2s, + opacity 0.2s; &:first-child { - border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-start-start-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + border-start-end-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); } &:last-child { - border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-end-start-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + border-end-end-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); } - @include bem.next-elem('avatar') { - margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); + @include bem.next-elem("avatar") { + margin-block-start: calc(-0.7 * props.get(avatar.$size--xl)); } } - @include bem.elem('image-img') { - display: block; + @include bem.elem("image-img") { + display: block; inline-size: 100%; - block-size: 100%; - object-fit: cover; + block-size: 100%; + object-fit: cover; } - @include bem.elem('image-overlay') { - position: absolute; + @include bem.elem("image-overlay") { + position: absolute; inset-block-end: 0; - inset-inline: 0; - z-index: 5; - padding-block: props.get(vars.$image-overlay--pad-b); - padding-inline: props.get(vars.$image-overlay--pad-i); + inset-inline: 0; + z-index: 5; + padding-block: props.get(vars.$image-overlay--pad-b); + padding-inline: props.get(vars.$image-overlay--pad-i); } - @include bem.elem('body') { - flex: 0 0 auto; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); + @include bem.elem("body") { + flex: 0 0 auto; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } - @include bem.modifier('no-mbs-neutralize') { + @include bem.modifier("no-mbs-neutralize") { &::before { display: none; } } - @include bem.modifier('main') { - flex-shrink: 1; - block-size: 100%; + @include bem.modifier("main") { + flex-shrink: 1; + block-size: 100%; min-block-size: 0; } } - @include bem.elem('content') { + @include bem.elem("content") { margin-block-start: props.get(vars.$spacing); } - @include bem.elem('footer') { - flex: 0 0 auto; - padding-block: 0 props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); + @include bem.elem("footer") { + flex: 0 0 auto; + padding-block: 0 props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); margin-block-start: calc(-1 * props.get(vars.$pad-b)); &::before { - display: block; - block-size: props.get(vars.$divider-width); - margin-block: props.get(vars.$spacing); - content: ''; + display: block; + block-size: props.get(vars.$divider-width); + margin-block: props.get(vars.$spacing); + content: ""; background-color: props.get(vars.$divider-width); } } - @include bem.modifier('quiet') { - margin-inline: 0; + @include bem.modifier("quiet") { + margin-inline: 0; background-color: transparent; - border: 0; - box-shadow: none; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + border: 0; + box-shadow: none; + + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { background-color: transparent; - transform: none; + transform: none; - @include bem.elem('image') { + @include bem.elem("image") { background-color: props.get(vars.$quiet--hover--image-color); - opacity: .75; - transform: translateY(props.get(vars.$hover--offset-b)); + opacity: 0.75; + transform: translateY(props.get(vars.$hover--offset-b)); } } &:focus-visible { - margin: 0; - outline: none; - border: 0; + margin: 0; + outline: none; + border: 0; box-shadow: none; - @include bem.elem('image') { - margin: calc(-1 * props.get(vars.$key-focus--border-width) - props.get(vars.$border-width)); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + @include bem.elem("image") { + margin: calc( + -1 * + props.get(vars.$key-focus--border-width) - props.get( + vars.$border-width + ) + ); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); background-color: props.get(vars.$quiet--hover--image-color); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); + 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); - opacity: 1; + opacity: 1; } } } - @include bem.elem('image') { - position: relative; + @include bem.elem("image") { + position: relative; background-color: props.get(vars.$quiet--image-color); - background-clip: padding-box; - border-radius: props.get(vars.$rounding); + background-clip: padding-box; + border-radius: props.get(vars.$rounding); } - @include bem.elem('body') { - padding: 0; + @include bem.elem("body") { + padding: 0; padding-block-start: props.get(vars.$spacing); } - @include bem.elem('footer') { + @include bem.elem("footer") { padding-inline: 0; } } - @include bem.modifier('thumbnail') { - @include bem.elem('image') { + @include bem.modifier("thumbnail") { + @include bem.elem("image") { border-radius: props.get(vars.$rounding); } - @include bem.elem('body') { - position: absolute; - inset-block-end: calc(-1 * props.get(vars.$border-width)); - inset-inline: calc(-1 * props.get(vars.$border-width)); - z-index: 10; - visibility: hidden; - background-color: props.get(vars.$hover--bg-color); - border-color: transparent; - border-style: solid; - border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); - border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - opacity: 0; + @include bem.elem("body") { + position: absolute; + inset-block-end: calc(-1 * props.get(vars.$border-width)); + inset-inline: calc(-1 * props.get(vars.$border-width)); + z-index: 10; + visibility: hidden; + background-color: props.get(vars.$hover--bg-color); + border-color: transparent; + border-style: solid; + border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); + border-end-start-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + border-end-end-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + opacity: 0; transition: - border-color .2s ease, - opacity .2s ease, - visibility 0s .2s linear; + border-color 0.2s ease, + opacity 0.2s ease, + visibility 0s 0.2s linear; } - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { - @include bem.elem('body') { - visibility: visible; + @include bem.elem("body") { + visibility: visible; border-color: props.get(vars.$hover--border-color); - opacity: 1; + opacity: 1; transition: - border-color .2s ease, - opacity .2s ease, - visibility .2s linear; + border-color 0.2s ease, + opacity 0.2s ease, + visibility 0.2s linear; } } } } - @include bem.modifier('horizontal') { + @include bem.modifier("horizontal") { flex-direction: row; - align-items: center; + align-items: center; - @include bem.elem('image') { - align-self: stretch; + @include bem.elem("image") { + align-self: stretch; inline-size: auto; &:first-child { - border-start-end-radius: 0; - border-end-start-radius: props.get(vars.$rounding); + border-start-end-radius: 0; + border-end-start-radius: props.get(vars.$rounding); } &:last-child { @@ -295,37 +337,38 @@ } } - @include bem.elem('body') { - @include bem.modifier('main') { - block-size: auto; - min-block-size: none; - inline-size: 100%; + @include bem.elem("body") { + @include bem.modifier("main") { + block-size: auto; + min-block-size: none; + inline-size: 100%; min-inline-size: 0; } } } - @include bem.modifier('collapsible') { + @include bem.modifier("collapsible") { display: block; interpolate-size: allow-keywords; @include bem.elem("header") { - display: flex; + display: flex; align-items: center; - gap: 1em; - cursor: pointer; + gap: 1em; + cursor: pointer; &::before { - margin: 0; + margin: 0; inline-size: 1em; - font-size: 0.8em; - content: "â–¶"; + font-size: 0.8em; + content: "â–¶"; } &:focus-visible { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); outline-offset: calc(-1 * props.get(vars.$key-focus--border-width)); - border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); } @include bem.next-elem("body") { @@ -334,7 +377,7 @@ } &::details-content { - opacity: 0; + opacity: 0; block-size: 0; overflow-y: clip; transition: @@ -351,7 +394,7 @@ } &::details-content { - opacity: 1; + opacity: 1; block-size: auto; } } diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 4616c80..96f3cb9 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -1,51 +1,130 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; -$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; -$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default; -$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; -$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; -$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; -$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; +$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; +$sub-border-width: props.def( + --o-card--sub-border-width, + props.get(core.$border-width--thick) +) !default; +$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; +$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; +$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; +$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; -$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; +$hover--offset-b: props.def( + --o-card--hover--offset-b, + calc(-1 * props.get(core.$size--65)) +) !default; -$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; -$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; +$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; +$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; $shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default; $shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default; -$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-card--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-card--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-card--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default; -$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; -$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; +$shadow-color: props.def( + --o-card--shadow-color, + props.get(core.$theme, --shadow), + "color" +) !default; +$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), "color") !default; +$border-color: props.def( + --o-card--border-color, + props.get(core.$theme, --box, --border), + "color" +) !default; +$divider-color: props.def( + --o-card--divider-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$highlight--shadow-x: props.def(--o-card--highlight--shadow-x, props.get(core.$shadow--l2--x)) !default; -$highlight--shadow-y: props.def(--o-card--highlight--shadow-y, props.get(core.$shadow--l2--y)) !default; -$highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(core.$shadow--l2--blur)) !default; -$highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default; +$highlight--shadow-x: props.def( + --o-card--highlight--shadow-x, + props.get(core.$shadow--l2--x) +) !default; +$highlight--shadow-y: props.def( + --o-card--highlight--shadow-y, + props.get(core.$shadow--l2--y) +) !default; +$highlight--shadow-blur: props.def( + --o-card--highlight--shadow-blur, + props.get(core.$shadow--l2--blur) +) !default; +$highlight--shadow-grow: props.def( + --o-card--highlight--shadow-grow, + props.get(core.$shadow--l2--grow) +) !default; -$highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default; -$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --800), 'color') !default; -$highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default; +$highlight--border-width: props.def( + --o-card--highlight--border-width, + props.get(core.$border-width--medium) +) !default; +$highlight--border-color: props.def( + --o-card--highlight--border-color, + props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) + props.get(core.$theme, --accent, --800), + "color" +) !default; +$highlight--shadow-color: props.def( + --o-card--highlight--shadow-color, + props.get(core.$theme, --accent, --200), + "color" +) !default; -$hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default; -$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; +$hover--bg-color: props.def( + --o-card--hover--bg-color, + color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), + "color" +) !default; +$hover--border-color: props.def( + --o-card--hover--border-color, + props.get(core.$theme, --border), + "color" +) !default; -$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-card--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-card--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-card--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; -$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; +$quiet--image-color: props.def( + --o-card--quiet--image-color, + props.get(core.$theme, --bg-base), + "color" +) !default; +$quiet--hover--image-color: props.def( + --o-card--quiet--hover--image-color, + props.get(core.$theme, --border), + "color" +) !default; -$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default; -$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default; +$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), "sm") !default; +$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), "sm") !default; diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index f3fb793..60cee65 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,130 +1,140 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/functions' as fn; -@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/functions" as fn; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'checkbox.vars'; -@use 'checkbox.vars' as vars; +@forward "checkbox.vars"; +@use "checkbox.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('checkbox') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); + @include bem.object("checkbox") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); - - @include bem.elem('box') { - position: relative; - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$box-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc( + props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get( + vars.$key-focus--border-offset + ) + ); + + @include bem.elem("box") { + position: relative; + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + margin-block-start: calc( + 0.5em * props.get(core.$font--standard--line-height) - 0.5 * + props.get(vars.$size) - props.get(vars.$key-focus--border-offset) + ); + vertical-align: top; + background-color: props.get(vars.$box-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset) + ); &::before, &::after { position: absolute; - display: block; - content: ''; + display: block; + content: ""; } &::before { - inset-block-start: props.get(vars.$border-width); + inset-block-start: props.get(vars.$border-width); inset-inline-start: props.get(vars.$border-width); - z-index: 2; - inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); - background-color: props.get(vars.$box-bg-color); - transition: transform .2s ease; + z-index: 2; + inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + background-color: props.get(vars.$box-bg-color); + transition: transform 0.2s ease; } &::after { - inset-block-start: calc(.5 * props.get(vars.$size) - 1px); - inset-inline-start: calc(1.5 * props.get(vars.$border-width)); - z-index: 3; - box-sizing: border-box; - inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); - block-size: 0; - border-color: props.get(vars.$box-bg-color); - border-style: solid; - border-radius: 2px; - transform: scale(0); - transition: transform .2s ease; - border-block-width: 0 2px; + inset-block-start: calc(0.5 * props.get(vars.$size) - 1px); + inset-inline-start: calc(1.5 * props.get(vars.$border-width)); + z-index: 3; + box-sizing: border-box; + inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); + block-size: 0; + border-color: props.get(vars.$box-bg-color); + border-style: solid; + border-radius: 2px; + transform: scale(0); + transition: transform 0.2s ease; + border-block-width: 0 2px; border-inline-width: 0 2px; } } - @include bem.elem('check-icon') { - position: absolute; - inset-block-start: calc(1 * props.get(vars.$border-width)); + @include bem.elem("check-icon") { + position: absolute; + inset-block-start: calc(1 * props.get(vars.$border-width)); inset-inline-start: calc(1 * props.get(vars.$border-width)); - z-index: 2; - display: block; - inline-size: calc(100% - 2 * props.get(vars.$border-width)); - block-size: calc(100% - 2 * props.get(vars.$border-width)); - margin: 0; - color: props.get(vars.$box-bg-color); - stroke-width: fn.px-to-rem(3px); - transform: scale(0); - transform-origin: 40% 90%; - transition: transform .2s ease; + z-index: 2; + display: block; + inline-size: calc(100% - 2 * props.get(vars.$border-width)); + block-size: calc(100% - 2 * props.get(vars.$border-width)); + margin: 0; + color: props.get(vars.$box-bg-color); + stroke-width: fn.px-to-rem(3px); + transform: scale(0); + transform-origin: 40% 90%; + transition: transform 0.2s ease; } - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + @include bem.elem("label") { + margin-inline-start: calc( + props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset) + ); } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; + @include bem.elem("native") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$hover--box-border-color); } } &:checked { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { &::before { transform: scale(0); } - @include bem.elem('check-icon') { + @include bem.elem("check-icon") { transform: scale(1); } } } &:indeterminate { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { &::before { transform: scale(0); } @@ -133,18 +143,18 @@ transform: scale(1); } - @include bem.elem('check-icon') { + @include bem.elem("check-icon") { transform: scale(0); } } } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -154,58 +164,59 @@ } &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$key-focus--label-color); } - @include bem.sibling-elem('box') { - 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)) + @include bem.sibling-elem("box") { + 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('standalone') { - @include bem.elem('box') { + @include bem.modifier("standalone") { + @include bem.elem("box") { margin-block-start: 0; } } - @include bem.modifier('accent') { - @include bem.elem('native') { + @include bem.modifier("accent") { + @include bem.elem("native") { &:checked { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:indeterminate { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:disabled { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -214,13 +225,13 @@ } &:checked { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); } } &:indeterminate { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); } } diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index 278aac8..8362aa7 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -1,32 +1,92 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; -$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; -$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; -$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; +$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; +$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def( + --o-checkbox--border-width, + props.get(core.$border-width--medium) +) !default; +$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-checkbox--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-checkbox--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-checkbox--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$box-border-color: props.def( + --o-checkbox--box-border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$box-bg-color: props.def( + --o-checkbox--box-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default; +$hover--label-color: props.def( + --o-checkbox--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--box-border-color: props.def( + --o-checkbox--hover--box-border-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default; -$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; +$accent--box-border-color: props.def( + --o-checkbox--accent--box-border-color, + props.get(core.$theme, --accent, --900), + "color" +) !default; +$accent--hover--box-border-color: props.def( + --o-checkbox--accent--hover--box-border-color, + props.get(core.$theme, --accent, --1000), + "color" +) !default; -$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default; -$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$disabled--label-color: props.def( + --o-checkbox--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--box-border-color: props.def( + --o-checkbox--disabled--box-border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; +$disabled--box-bg-color: props.def( + --o-checkbox--disabled--box-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-checkbox--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-checkbox--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-checkbox--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index d2ee8c3..f5584e6 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -1,29 +1,29 @@ -@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 'dialog.vars'; -@use 'dialog.vars' as vars; +@forward "dialog.vars"; +@use "dialog.vars" as vars; -@use 'backdrop.vars' as backdrop; -@use 'divider.vars' as divider; +@use "backdrop.vars" as backdrop; +@use "divider.vars" as divider; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('dialog') { - display: none; - box-sizing: border-box; - inline-size: 100%; - max-inline-size: none; - block-size: 100%; - min-block-size: 0; - max-block-size: none; - padding: props.get(vars.$pad-b) props.get(vars.$pad-i); - margin: 0; + @include bem.object("dialog") { + display: none; + box-sizing: border-box; + inline-size: 100%; + max-inline-size: none; + block-size: 100%; + min-block-size: 0; + max-block-size: none; + padding: props.get(vars.$pad-b) props.get(vars.$pad-i); + margin: 0; background-color: transparent; - border: 0; + border: 0; &::backdrop { background-color: props.get(backdrop.$bg-color); @@ -31,38 +31,40 @@ } &[open], - &:popover-open { - display: flex; + &:popover-open { + display: flex; flex-direction: column; } - @include bem.elem('content') { - pointer-events: auto; - border-radius: props.get(vars.$rounding); + @include bem.elem("content") { + pointer-events: auto; + border-radius: props.get(vars.$rounding); background-color: props.get(vars.$bg-color); } - @include bem.elem('header') { - display: flex; + @include bem.elem("header") { + display: flex; align-items: center; - padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0; + padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0; } - @include bem.elem('divider') { + @include bem.elem("divider") { margin-inline: props.get(vars.$body--pad-i); - @include bem.next-elem('body') { - padding-block-start: calc(.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b)); + @include bem.next-elem("body") { + padding-block-start: calc( + 0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b) + ); } } - @include bem.elem('body') { + @include bem.elem("body") { padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } } diff --git a/src/objects/_dialog.vars.scss b/src/objects/_dialog.vars.scss index 39c47ba..8650e51 100644 --- a/src/objects/_dialog.vars.scss +++ b/src/objects/_dialog.vars.scss @@ -1,10 +1,10 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use '../layouts/container.vars' as container; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "../layouts/container.vars" as container; -$pad-b: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; -$pad-i: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; +$pad-b: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; +$pad-i: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; $rounding: props.def(--o-dialog--rounding, props.get(core.$rounding)) !default; $border-width: props.def(--o-dialog--border-width, props.get(core.$border-width--thin)) !default; @@ -12,5 +12,9 @@ $border-width: props.def(--o-dialog--border-width, props.get(core.$border-width- $body--pad-b: props.def(--o-dialog--body--pad-b, props.get(container.$pad-i)) !default; $body--pad-i: props.def(--o-dialog--body--pad-i, props.get(container.$pad-i)) !default; -$bg-color: props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), 'color') !default; -$border-color: props.def(--o-dialog--border-color, props.get(core.$theme, --border-mute), 'color') !default; +$bg-color: props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), "color") !default; +$border-color: props.def( + --o-dialog--border-color, + props.get(core.$theme, --border-mute), + "color" +) !default; diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index d81284b..f082d12 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -1,38 +1,38 @@ -@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 '../core.vars' as core; +@use "sass:map"; +@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 'divider.vars'; -@use 'divider.vars' as vars; +@forward "divider.vars"; +@use "divider.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('divider') { - display: flex; - flex: 0 0 auto; - flex-direction: row; - align-items: center; - block-size: 1em; - margin-block: props.get(vars.$margin-b); - font-size: props.get(vars.$strong--label-font-size); - font-weight: 700; - line-height: 1; - color: props.get(vars.$strong--label-color); - text-transform: uppercase; - letter-spacing: props.get(vars.$letter-spacing); + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("divider") { + display: flex; + flex: 0 0 auto; + flex-direction: row; + align-items: center; + block-size: 1em; + margin-block: props.get(vars.$margin-b); + font-size: props.get(vars.$strong--label-font-size); + font-weight: 700; + line-height: 1; + color: props.get(vars.$strong--label-color); + text-transform: uppercase; + letter-spacing: props.get(vars.$letter-spacing); background-color: transparent; &::before, &::after { - flex: 1 1 auto; - inline-size: 100%; - block-size: props.get(vars.$strong--border-width); - content: ''; + flex: 1 1 auto; + inline-size: 100%; + block-size: props.get(vars.$strong--border-width); + content: ""; background-color: props.get(vars.$strong--bg-color); } @@ -40,15 +40,15 @@ display: block; } - @include bem.elem('label') { + @include bem.elem("label") { flex: 0 0 auto; } - @include bem.modifier('vertical') { - align-self: stretch; - inline-size: props.get(vars.$vertical--border-width); - block-size: auto; - margin-block: 0; + @include bem.modifier("vertical") { + align-self: stretch; + inline-size: props.get(vars.$vertical--border-width); + block-size: auto; + margin-block: 0; background-color: props.get(vars.$strong--bg-color); &::before, @@ -57,13 +57,13 @@ } } - @include bem.modifier('dot') { - align-self: center; - inline-size: props.get(vars.$dot--size); - block-size: props.get(vars.$dot--size); - margin-block: 0; + @include bem.modifier("dot") { + align-self: center; + inline-size: props.get(vars.$dot--size); + block-size: props.get(vars.$dot--size); + margin-block: 0; background-color: props.get(vars.$strong--bg-color); - border-radius: props.get(vars.$dot--size); + border-radius: props.get(vars.$dot--size); &::before, &::after { @@ -71,73 +71,73 @@ } } - @include bem.modifier('medium') { - font-size: props.get(vars.$medium--label-font-size); + @include bem.modifier("medium") { + font-size: props.get(vars.$medium--label-font-size); font-weight: 500; - color: props.get(vars.$medium--label-color); + color: props.get(vars.$medium--label-color); &::before, &::after { - block-size: props.get(vars.$medium--border-width); + block-size: props.get(vars.$medium--border-width); background-color: props.get(vars.$medium--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$medium--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$medium--bg-color); } } - @include bem.modifier('quiet') { - font-size: props.get(vars.$quiet--label-font-size); + @include bem.modifier("quiet") { + font-size: props.get(vars.$quiet--label-font-size); font-weight: 500; - color: props.get(vars.$quiet--label-color); + color: props.get(vars.$quiet--label-color); &::before, &::after { - block-size: props.get(vars.$quiet--border-width); + block-size: props.get(vars.$quiet--border-width); background-color: props.get(vars.$quiet--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$vertical--quiet--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$dot--quiet--bg-color); } } - @include bem.modifier('faint') { - font-size: props.get(vars.$faint--label-font-size); + @include bem.modifier("faint") { + font-size: props.get(vars.$faint--label-font-size); font-weight: 500; - color: props.get(vars.$faint--label-color); + color: props.get(vars.$faint--label-color); &::before, &::after { - block-size: props.get(vars.$faint--border-width); + block-size: props.get(vars.$faint--border-width); background-color: props.get(vars.$faint--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$vertical--quiet--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$dot--quiet--bg-color); } } - @include bem.modifier('labelled') { + @include bem.modifier("labelled") { &::before { margin-inline-end: 1em; } &::after { - display: block; + display: block; margin-inline-start: 1em; } } @@ -149,7 +149,7 @@ background-color: props.get(vars.$themes, $theme, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$themes, $theme, --label); } } @@ -162,39 +162,39 @@ background-color: props.get(vars.$static-themes, $theme, --strong, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --strong, --label); } - @include bem.modifier('medium') { + @include bem.modifier("medium") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --medium, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --medium, --label); } } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --quiet, --label); } } - @include bem.modifier('faint') { + @include bem.modifier("faint") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --faint, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --faint, --label); } } diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index a8b0f9f..38224d4 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -1,80 +1,153 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; -$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; -$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; -$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; +$vertical--border-width: props.def( + --o-divider--vertical--width, + props.get(core.$border-width--thin) +) !default; +$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; +$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; -$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; -$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; +$strong--border-width: props.def( + --o-divider--strong--border-width, + props.get(core.$border-width--thick) +) !default; +$strong--label-font-size: props.def( + --o-divider--strong--label-font-size, + props.get(core.$font-size--100) +) !default; -$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; -$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; +$medium--border-width: props.def( + --o-divider--medium--border-width, + props.get(core.$border-width--medium) +) !default; +$medium--label-font-size: props.def( + --o-divider--medium--label-font-size, + props.get(core.$font-size--75) +) !default; -$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default; -$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default; +$quiet--border-width: props.def( + --o-divider--quiet--border-width, + props.get(core.$border-width--thin) +) !default; +$quiet--label-font-size: props.def( + --o-divider--quiet--label-font-size, + props.get(core.$font-size--50) +) !default; -$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; -$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; +$faint--border-width: props.def( + --o-divider--faint--border-width, + props.get(core.$border-width--thin) +) !default; +$faint--label-font-size: props.def( + --o-divider--faint--label-font-size, + props.get(core.$font-size--50) +) !default; -$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; -$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; +$strong--bg-color: props.def( + --o-divider--strong--bg-color, + props.get(core.$theme, --text), + "color" +) !default; +$strong--label-color: props.def( + --o-divider--strong--label-color, + props.get(core.$theme, --text), + "color" +) !default; -$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; -$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; +$medium--bg-color: props.def( + --o-divider--medium--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$medium--label-color: props.def( + --o-divider--medium--label-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default; -$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$quiet--bg-color: props.def( + --o-divider--quiet--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$quiet--label-color: props.def( + --o-divider--quiet--label-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$faint--bg-color: props.def( + --o-divider--faint--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$faint--label-color: props.def( + --o-divider--faint--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$vertical--quiet--bg-color: props.def( + --o-divider--vertical--quiet--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$dot--quiet--bg-color: props.def( + --o-divider--dot--quiet--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$static-themes: props.def(--o-divider, (), 'color'); +$static-themes: props.def(--o-divider, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $button-theme: ( - --strong: ( - --bg: props.get(core.$transparent-colors, $theme, --800), - --label: props.get(core.$transparent-colors, $theme, --900), - ), - --medium: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --quiet: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --faint: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --label: props.get(core.$transparent-colors, $theme, --400), - ), + $static-themes: props.merge( + $static-themes, + ( + $button-theme: ( + --strong: ( + --bg: props.get(core.$transparent-colors, $theme, --800), + --label: props.get(core.$transparent-colors, $theme, --900), + ), + --medium: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --quiet: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --faint: ( + --bg: props.get(core.$transparent-colors, $theme, --200), + --label: props.get(core.$transparent-colors, $theme, --400), + ), + ), ) - )); + ); } $themes-config: ( - accent: --accent, + accent: --accent, negative: --negative, ) !default; -$themes: props.def(--o-divider, (), 'color'); +$themes: props.def(--o-divider, (), "color"); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg: props.get(core.$theme, $key, --800), - --label: props.get(core.$theme, $key, --1000), + $themes: props.merge( + $themes, + ( + --#{$theme}: ( + --bg: props.get(core.$theme, $key, --800), + --label: props.get(core.$theme, $key, --1000), + ) ) - )); + ); } diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 655e662..0257b32 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -1,49 +1,55 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'icon.vars' as icon; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "icon.vars" as icon; -@forward 'emoji.vars'; -@use 'emoji.vars' as vars; +@forward "emoji.vars"; +@use "emoji.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('emoji') { - position: relative; - display: inline-block; - inline-size: calc(props.get(vars.$size)); - block-size: calc(props.get(vars.$size)); - padding: calc(props.get(vars.$pad)); - margin: calc(-1 * props.get(vars.$pad)); + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("emoji") { + position: relative; + display: inline-block; + inline-size: calc(props.get(vars.$size)); + block-size: calc(props.get(vars.$size)); + padding: calc(props.get(vars.$pad)); + margin: calc(-1 * props.get(vars.$pad)); vertical-align: props.get(vars.$valign); - object-fit: contain; + object-fit: contain; - @include bem.modifier('icon') { - margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); + @include bem.modifier("icon") { + margin: calc( + -1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size)) + ); vertical-align: props.get(icon.$valign); } @each $mod, $size, $valign in vars.$sizes { @include bem.modifier($mod) { - inline-size: props.get($size); - block-size: props.get($size); + inline-size: props.get($size); + block-size: props.get($size); vertical-align: props.get($valign); - @include bem.modifier('icon') { - margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); + @include bem.modifier("icon") { + margin: calc( + -1 * props.get(vars.$pad) - 0.5 * (props.get($size) - props.get(icon.$size)) + ); } } } - @include bem.modifier('zoomable') { + @include bem.modifier("zoomable") { border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); - transition: transform .2s ease, background-color .2s ease; + transition: + transform 0.2s ease, + background-color 0.2s ease; &:hover { background-color: props.get(vars.$bg-color); - transform: scale(props.get(vars.$zoom)); + transform: scale(props.get(vars.$zoom)); } } } diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index cf940cf..1c2a0e2 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -1,26 +1,26 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; -$pad: props.def(--o-emoji--pad, .3em) !default; +$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; +$pad: props.def(--o-emoji--pad, 0.3em) !default; $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default; -$zoom: props.def(--o-emoji--zoom, 3) !default; -$valign: props.def(--o-emoji--valign, -.25em) !default; +$zoom: props.def(--o-emoji--zoom, 3) !default; +$valign: props.def(--o-emoji--valign, -0.25em) !default; -$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; -$valign--125: props.def(--o-emoji--125--valign, -.45em) !default; +$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; +$valign--125: props.def(--o-emoji--125--valign, -0.45em) !default; -$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; -$valign--150: props.def(--o-emoji--150--valign, -.65em) !default; +$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; +$valign--150: props.def(--o-emoji--150--valign, -0.65em) !default; -$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; +$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; $valign--200: props.def(--o-emoji--200--valign, -1em) !default; $sizes: ( - '125' $size--125 $valign--125, - '150' $size--150 $valign--150, - '200' $size--200 $valign--200, + "125" $size--125 $valign--125, + "150" $size--150 $valign--150, + "200" $size--200 $valign--200 ) !default; -$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), "color") !default; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 23875f5..fb664b4 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,74 +1,74 @@ -@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 'field-label.vars'; -@use 'field-label.vars' as vars; +@forward "field-label.vars"; +@use "field-label.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('field-label') { - @include bem.elem('label') { - display: block; - flex: 0 0 auto; + @include bem.object("field-label") { + @include bem.elem("label") { + display: block; + flex: 0 0 auto; padding-inline-end: props.get(vars.$spacing-i); - font-size: props.get(vars.$label-font-size); - font-weight: 400; - line-height: 1.3; - color: props.get(vars.$label-color); + font-size: props.get(vars.$label-font-size); + font-weight: 400; + line-height: 1.3; + color: props.get(vars.$label-color); - @include bem.next-elem('content') { + @include bem.next-elem("content") { margin-block-start: props.get(vars.$spacing-b); } } - @include bem.elem('content') { + @include bem.elem("content") { display: block; - flex: 1 1 auto; + flex: 1 1 auto; } - @include bem.elem('hint') { - display: block; + @include bem.elem("hint") { + display: block; margin-block-start: props.get(vars.$spacing-b); - font-size: props.get(vars.$hint-font-size); - color: props.get(vars.$hint-color); + font-size: props.get(vars.$hint-font-size); + color: props.get(vars.$hint-color); } - @include bem.is('invalid') { - @include bem.elem('hint') { + @include bem.is("invalid") { + @include bem.elem("hint") { color: props.get(vars.$error-hint-color); } } - @include bem.is('disabled') { - @include bem.elem('label', 'hint') { + @include bem.is("disabled") { + @include bem.elem("label", "hint") { color: props.get(vars.$disabled-color); } } - @include bem.modifier('align-start', 'align-end') { - display: flex; + @include bem.modifier("align-start", "align-end") { + display: flex; align-items: baseline; - @include bem.elem('label') { + @include bem.elem("label") { display: inline-block; - @include bem.next-elem('content') { + @include bem.next-elem("content") { margin-block-start: 0; } } } - @include bem.modifier('align-start') { - @include bem.elem('label') { + @include bem.modifier("align-start") { + @include bem.elem("label") { text-align: start; } } - @include bem.modifier('align-end') { - @include bem.elem('label') { + @include bem.modifier("align-end") { + @include bem.elem("label") { text-align: end; } } diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss index 5bd4547..4588e70 100644 --- a/src/objects/_field-label.vars.scss +++ b/src/objects/_field-label.vars.scss @@ -1,12 +1,34 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; -$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; -$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; -$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; +$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; +$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; +$label-font-size: props.def( + --o-field-label--label-font-size, + props.get(core.$font-size--75) +) !default; +$hint-font-size: props.def( + --o-field-label--hint-font-size, + props.get(core.$font-size--75) +) !default; -$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default; -$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default; -$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default; -$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default; +$label-color: props.def( + --o-field-label--label-color, + props.get(core.$theme, --text-mute), + "color" +) !default; +$hint-color: props.def( + --o-field-label--hint-color, + props.get(core.$theme, --text-mute), + "color" +) !default; +$error-hint-color: props.def( + --o-field-label--error-hint-color, + props.get(core.$theme, --negative, --900), + "color" +) !default; +$disabled-color: props.def( + --o-field-label--disabled-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss index 04b9bdf..d3e37b3 100644 --- a/src/objects/_figure.scss +++ b/src/objects/_figure.scss @@ -1,25 +1,25 @@ -@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 'figure.vars'; -@use 'figure.vars' as vars; +@forward "figure.vars"; +@use "figure.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('figure') { - @include bem.elem('caption') { - padding-block: props.get(vars.$pad-b); - font-size: props.get(vars.$font-size); - color: props.get(vars.$text-color); + @include bem.object("figure") { + @include bem.elem("caption") { + padding-block: props.get(vars.$pad-b); + font-size: props.get(vars.$font-size); + color: props.get(vars.$text-color); border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } } diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss index 3de3406..936932d 100644 --- a/src/objects/_figure.vars.scss +++ b/src/objects/_figure.vars.scss @@ -1,9 +1,17 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; +$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; $border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default; -$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; +$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; -$text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default; +$text-color: props.def( + --o-figure--text-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$border-color: props.def( + --o-figure--border-color, + props.get(core.$theme, --border), + "color" +) !default; diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 0e8392e..87a6269 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,64 +1,70 @@ -@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 'heading.vars'; -@use 'heading.vars' as vars; +@forward "heading.vars"; +@use "heading.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('heading') { - display: block; - margin-block-start: props.get(vars.$margin-bs); - font-family: props.get(vars.$font-family); - font-weight: props.get(vars.$font-weight); + @include bem.object("heading") { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); font-feature-settings: props.get(vars.$feature-settings); - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - text-transform: props.get(vars.$text-transform); - letter-spacing: normal; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + text-transform: props.get(vars.$text-transform); + letter-spacing: normal; & + & { margin-block-start: props.get(vars.$margin-bs-sibling); } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent props.get(vars.$bg-start), - props.get(vars.$bg-color) props.get(vars.$bg-start), - props.get(vars.$bg-color) props.get(vars.$bg-end), - transparent props.get(vars.$bg-end)); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent props.get(vars.$bg-start), + props.get(vars.$bg-color) props.get(vars.$bg-start), + props.get(vars.$bg-color) props.get(vars.$bg-end), + transparent props.get(vars.$bg-end) + ); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in vars.$sizes + { @include bem.modifier($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 vars.$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 vars.$display--sizes + { @include bem.modifier($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); - transform: translateX(props.get(vars.$offset)); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); + transform: translateX(props.get(vars.$offset)); } } } @@ -73,18 +79,26 @@ } } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent props.get(vars.$bg-start), - props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), - props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), - transparent props.get(vars.$bg-end)); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent props.get(vars.$bg-start), + props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), + props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), + transparent props.get(vars.$bg-end) + ); } - @include bem.modifier('display') { + @include bem.modifier("display") { @each $mod, $value in vars.$sizes { @include bem.modifier($mod) { - color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color); + color: props.get( + vars.$static-themes, + $theme, + --display, + --#{$mod}, + --text-color + ); } } } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 4267b8c..8943622 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -1,208 +1,472 @@ -@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; -$offset: props.def(--o-heading--offset, -.02em) !default; -$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; +$offset: props.def(--o-heading--offset, -0.02em) !default; +$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; -$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; -$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; - -$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default; -$text-color--xl: props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default; -$text-color--lg: props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default; -$text-color--md: props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default; -$text-color--sm: props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$text-color--xs: props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default; - -$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default; -$display--text-color--xl: props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--lg: props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--md: props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--sm: props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--xs: props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; - -$bg-start: props.def(--o-heading--bg-start, .05em) !default; -$bg-end: props.def(--o-heading--bg-end, .5em) !default; - -$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; -$line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default; -$font-weight: props.def(--o-heading--font-weight, bold) !default; -$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform: props.def(--o-heading--text-transform, none) !default; - -$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; -$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default; -$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; -$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default; - -$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; -$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default; -$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; -$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default; - -$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; -$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; -$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; -$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; -$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default; - -$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; -$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; -$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; -$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; -$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--md: props.def(--o-heading--md--text-transform, none) !default; - -$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; -$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default; -$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default; -$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default; -$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default; - -$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; -$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default; -$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; -$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default; +$text-color: props.def( + --o-heading--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), "color") !default; + +$text-color--xxl: props.def( + --o-heading--xxl--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$text-color--xl: props.def( + --o-heading--xl--text-color, + props.get($text-color--xxl), + "color" +) !default; +$text-color--lg: props.def( + --o-heading--lg--text-color, + props.get($text-color--xxl), + "color" +) !default; +$text-color--md: props.def( + --o-heading--md--text-color, + props.get($text-color--xxl), + "color" +) !default; +$text-color--sm: props.def( + --o-heading--sm--text-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$text-color--xs: props.def( + --o-heading--xs--text-color, + props.get($text-color--sm), + "color" +) !default; + +$display--text-color--xxl: props.def( + --o-heading--display--xxl--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$display--text-color--xl: props.def( + --o-heading--display--xl--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--lg: props.def( + --o-heading--display--lg--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--md: props.def( + --o-heading--display--md--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--sm: props.def( + --o-heading--display--sm--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--xs: props.def( + --o-heading--display--xs--text-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; + +$bg-start: props.def(--o-heading--bg-start, 0.05em) !default; +$bg-end: props.def(--o-heading--bg-end, 0.5em) !default; + +$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; +$line-height: props.def( + --o-heading--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-weight: props.def(--o-heading--font-weight, bold) !default; +$feature-settings: props.def( + --o-heading--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform: props.def(--o-heading--text-transform, none) !default; + +$font-family--xxl: props.def( + --o-heading--xxl--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--xxl: props.def( + --o-heading--xxl--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; +$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default; +$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; +$feature-settings--xxl: props.def( + --o-heading--xxl--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default; + +$font-family--xl: props.def( + --o-heading--xl--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--xl: props.def( + --o-heading--xl--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; +$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default; +$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; +$feature-settings--xl: props.def( + --o-heading--xl--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default; + +$font-family--lg: props.def( + --o-heading--lg--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--lg: props.def( + --o-heading--lg--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; +$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; +$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; +$feature-settings--lg: props.def( + --o-heading--lg--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default; + +$font-family--md: props.def( + --o-heading--md--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--md: props.def( + --o-heading--md--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; +$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; +$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; +$feature-settings--md: props.def( + --o-heading--md--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--md: props.def(--o-heading--md--text-transform, none) !default; + +$font-family--sm: props.def( + --o-heading--sm--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--sm: props.def( + --o-heading--sm--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default; +$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default; +$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default; +$feature-settings--sm: props.def( + --o-heading--sm--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default; + +$font-family--xs: props.def( + --o-heading--xs--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--xs: props.def( + --o-heading--xs--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; +$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default; +$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; +$feature-settings--xs: props.def( + --o-heading--xs--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default; $sizes: ( - 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs $text-color--xs, - 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm $text-color--sm, - 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md $text-color--md, - 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg $text-color--lg, - 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl $text-color--xl, - 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl $text-color--xxl, -) !default; - -$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; -$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; -$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; -$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; -$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; -$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default; - -$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; -$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; -$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; -$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; -$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; -$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default; - -$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; -$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; -$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; -$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; -$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 1px) !default; -$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -$display--text-transform--lg: props.def(--o-heading--display--lg--text-transform, uppercase) !default; - -$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; -$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default; -$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; -$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default; - -$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--100)) !default; -$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; -$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; -$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default; - -$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; -$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default; -$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; -$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default; - -$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; -$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; -$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; -$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; -$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; -$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; + "xs" $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs + $feature-settings--xs $text-transform--xs $text-color--xs, + "sm" $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm + $feature-settings--sm $text-transform--sm $text-color--sm, + "md" $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md + $feature-settings--md $text-transform--md $text-color--md, + "lg" $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg + $feature-settings--lg $text-transform--lg $text-color--lg, + "xl" $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl + $feature-settings--xl $text-transform--xl $text-color--xl, + "xxl" $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl + $feature-settings--xxl $text-transform--xxl $text-color--xxl +) !default; + +$display--font-family--xxl: props.def( + --o-heading--display--xxl--font-family, + props.get(core.$font--headline--family) +) !default; +$display--line-height--xxl: props.def( + --o-heading--display--xxl--line-height, + props.get(core.$font--headline--line-height) +) !default; +$display--font-size--xxl: props.def( + --o-heading--display--xxl--font-size, + props.get(core.$font-size--1100) +) !default; +$display--font-weight--xxl: props.def( + --o-heading--display--xxl--font-weight, + props.get(core.$font--headline--weight) +) !default; +$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; +$display--feature-settings--xxl: props.def( + --o-heading--display--xxl--feature-settings, + props.get(core.$font--headline--feature-settings) +) !default; +$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default; + +$display--font-family--xl: props.def( + --o-heading--display--xl--font-family, + props.get(core.$font--headline--family) +) !default; +$display--line-height--xl: props.def( + --o-heading--display--xl--line-height, + props.get(core.$font--headline--line-height) +) !default; +$display--font-size--xl: props.def( + --o-heading--display--xl--font-size, + props.get(core.$font-size--700) +) !default; +$display--font-weight--xl: props.def( + --o-heading--display--xl--font-weight, + props.get(core.$font--headline--weight) +) !default; +$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; +$display--feature-settings--xl: props.def( + --o-heading--display--xl--feature-settings, + props.get(core.$font--headline--feature-settings) +) !default; +$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default; + +$display--font-family--lg: props.def( + --o-heading--display--lg--font-family, + props.get(core.$font--headline--family) +) !default; +$display--line-height--lg: props.def( + --o-heading--display--lg--line-height, + props.get(core.$font--headline--line-height) +) !default; +$display--font-size--lg: props.def( + --o-heading--display--lg--font-size, + props.get(core.$font-size--300) +) !default; +$display--font-weight--lg: props.def( + --o-heading--display--lg--font-weight, + props.get(core.$font--headline--weight) +) !default; +$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 1px) !default; +$display--feature-settings--lg: props.def( + --o-heading--display--lg--feature-settings, + props.get(core.$font--headline--feature-settings) +) !default; +$display--text-transform--lg: props.def( + --o-heading--display--lg--text-transform, + uppercase +) !default; + +$display--font-family--md: props.def( + --o-heading--display--md--font-family, + props.get(core.$font--standard--family) +) !default; +$display--line-height--md: props.def( + --o-heading--display--md--line-height, + props.get(core.$font--standard--line-height) +) !default; +$display--font-size--md: props.def( + --o-heading--display--md--font-size, + props.get(core.$font-size--150) +) !default; +$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default; +$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; +$display--feature-settings--md: props.def( + --o-heading--display--md--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default; + +$display--font-family--sm: props.def( + --o-heading--display--sm--font-family, + props.get(core.$font--standard--family) +) !default; +$display--line-height--sm: props.def( + --o-heading--display--sm--line-height, + props.get(core.$font--standard--line-height) +) !default; +$display--font-size--sm: props.def( + --o-heading--display--sm--font-size, + props.get(core.$font-size--100) +) !default; +$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; +$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; +$display--feature-settings--sm: props.def( + --o-heading--display--sm--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default; + +$display--font-family--xs: props.def( + --o-heading--display--xs--font-family, + props.get(core.$font--standard--family) +) !default; +$display--line-height--xs: props.def( + --o-heading--display--xs--line-height, + props.get(core.$font--standard--line-height) +) !default; +$display--font-size--xs: props.def( + --o-heading--display--xs--font-size, + props.get(core.$font-size--50) +) !default; +$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default; +$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; +$display--feature-settings--xs: props.def( + --o-heading--display--xs--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default; + +$display--font-size--xxl--md: props.def( + --o-heading--display--xxl--font-size, + props.get(core.$font-size--900), + "md" +) !default; +$display--font-size--xl--md: props.def( + --o-heading--display--xl--font-size, + props.get(core.$font-size--600), + "md" +) !default; +$display--font-size--lg--md: props.def( + --o-heading--display--lg--font-size, + props.get(core.$font-size--200), + "md" +) !default; +$display--font-size--md--md: props.def( + --o-heading--display--md--font-size, + props.get(core.$font-size--100), + "md" +) !default; +$display--font-size--sm--md: props.def( + --o-heading--display--sm--font-size, + props.get(core.$font-size--75), + "md" +) !default; +$display--font-size--xs--md: props.def( + --o-heading--display--xs--font-size, + props.get(core.$font-size--50), + "md" +) !default; $display--sizes: ( - 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs $display--text-color--xs, - 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm $display--text-color--sm, - 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md $display--text-color--md, - 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg $display--text-color--lg, - 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl, - 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl, + "xs" $display--font-family--xs $display--line-height--xs $display--font-size--xs + $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs + $display--text-transform--xs $display--text-color--xs, + "sm" $display--font-family--sm $display--line-height--sm $display--font-size--sm + $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm + $display--text-transform--sm $display--text-color--sm, + "md" $display--font-family--md $display--line-height--md $display--font-size--md + $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md + $display--text-transform--md $display--text-color--md, + "lg" $display--font-family--lg $display--line-height--lg $display--font-size--lg + $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg + $display--text-transform--lg $display--text-color--lg, + "xl" $display--font-family--xl $display--line-height--xl $display--font-size--xl + $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl + $display--text-transform--xl $display--text-color--xl, + "xxl" $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl + $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl + $display--text-transform--xxl $display--text-color--xxl ) !default; -$static-themes: props.def(--o-heading, (), 'color'); +$static-themes: props.def(--o-heading, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $heading-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $heading-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --text-color: props.get(core.$transparent-colors, $theme, --900), - - --xxl: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --xl: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --lg: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --md: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --sm: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - --xs: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - - --display: ( - --xxl: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --xl: ( + $static-themes: props.merge( + $static-themes, + ( + $heading-theme: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), --text-color: props.get(core.$transparent-colors, $theme, --900), + --xxl: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --xl: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --lg: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --md: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --sm: ( + --text-color: props.get(core.$transparent-colors, $theme, --500), + ), + --xs: ( + --text-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --display: ( + --xxl: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --xl: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --lg: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --md: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --sm: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --xs: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + ), + ), ), - --lg: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --md: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --sm: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --xs: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), ) - )); + ); } diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 1d046e0..7baa3f8 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -1,24 +1,24 @@ -@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 'icon.vars'; -@use 'icon.vars' as vars; +@forward "icon.vars"; +@use "icon.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('icon') { - display: inline; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - vertical-align: props.get(vars.$valign); - stroke-width: props.get(vars.$stroke-width); - stroke-linecap: round; + @include bem.object("icon") { + display: inline; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + vertical-align: props.get(vars.$valign); + stroke-width: props.get(vars.$stroke-width); + stroke-linecap: round; stroke-linejoin: round; - @include bem.modifier('block') { + @include bem.modifier("block") { display: block; } } diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss index 2a37212..4fdbfae 100644 --- a/src/objects/_icon.vars.scss +++ b/src/objects/_icon.vars.scss @@ -1,5 +1,5 @@ -@use 'pkg:iro-sass/src/props'; +@use "pkg:iro-sass/props"; $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; -$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; -$valign: props.def(--o-icon--valign, -.18em) !default; +$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; +$valign: props.def(--o-icon--valign, -0.18em) !default; diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index a173d57..2b4abad 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -1,40 +1,40 @@ -@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 'lightbox.vars'; -@use 'lightbox.vars' as vars; +@forward "lightbox.vars"; +@use "lightbox.vars" as vars; -@use 'button.vars' as button; -@use 'backdrop.vars' as backdrop; -@use 'thumbnail.vars' as thumbnail; +@use "button.vars" as button; +@use "backdrop.vars" as backdrop; +@use "thumbnail.vars" as thumbnail; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('lightbox') { - box-sizing: border-box; - display: none; - flex: 1 1 auto; - grid-template-areas: 'image' 'thumbnails'; - grid-template-rows: 1fr auto; + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("lightbox") { + box-sizing: border-box; + display: none; + flex: 1 1 auto; + grid-template-areas: "image" "thumbnails"; + grid-template-rows: 1fr auto; grid-template-columns: 1fr; - align-items: center; - justify-items: center; - inline-size: 100%; - max-inline-size: none; - block-size: 100%; - min-block-size: 0; - max-block-size: none; - padding: 0; - margin: 0; - overflow: hidden; - background-color: transparent; - border: 0; - pointer-events: none; + align-items: center; + justify-items: center; + inline-size: 100%; + max-inline-size: none; + block-size: 100%; + min-block-size: 0; + max-block-size: none; + padding: 0; + margin: 0; + overflow: hidden; + background-color: transparent; + border: 0; + pointer-events: none; &::backdrop { background-color: props.get(backdrop.$bg-color); @@ -42,7 +42,7 @@ } &[open], - &:popover-open { + &:popover-open { display: grid; } @@ -50,80 +50,79 @@ pointer-events: auto; } - @include bem.elem('info', 'controls') { - position: absolute; + @include bem.elem("info", "controls") { + position: absolute; inset-block-start: props.get(vars.$pad); - z-index: 20; - display: flex; - align-items: center; - block-size: props.get(vars.$controls--block-size); - padding-inline: props.get(vars.$controls--pad-i); - background-color: props.get(vars.$controls--bg); - border-radius: 10em; - box-shadow: - props.get(vars.$controls--shadow-x) - props.get(vars.$controls--shadow-y) - props.get(vars.$controls--shadow-blur) - props.get(vars.$controls--shadow-grow) + z-index: 20; + display: flex; + align-items: center; + block-size: props.get(vars.$controls--block-size); + padding-inline: props.get(vars.$controls--pad-i); + background-color: props.get(vars.$controls--bg); + border-radius: 10em; + box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y) + props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow) props.get(vars.$controls--shadow-color); } - @include bem.elem('info') { - inset-inline-start: props.get(vars.$pad); + @include bem.elem("info") { + inset-inline-start: props.get(vars.$pad); font-variant-numeric: tabular-nums; } - @include bem.elem('controls') { - inset-inline-end: props.get(vars.$pad); + @include bem.elem("controls") { + inset-inline-end: props.get(vars.$pad); } - @include bem.elem('img') { - position: relative; - z-index: 10; - display: block; - grid-area: image; - inline-size: auto; + @include bem.elem("img") { + position: relative; + z-index: 10; + display: block; + grid-area: image; + inline-size: auto; min-inline-size: 0; max-inline-size: 100%; - block-size: auto; - min-block-size: 0; - max-block-size: 100%; - user-select: none; - object-fit: contain; + block-size: auto; + min-block-size: 0; + max-block-size: 100%; + user-select: none; + object-fit: contain; - @include bem.is('hidden') { + @include bem.is("hidden") { display: none; - @include bem.next-elem('placeholder') { + @include bem.next-elem("placeholder") { display: block; } } } - @include bem.elem('placeholder') { - position: absolute; - inset-block-start: 50%; + @include bem.elem("placeholder") { + position: absolute; + inset-block-start: 50%; inset-inline-start: 50%; - z-index: 5; - display: none; - transform: translate(-50, -50); + z-index: 5; + display: none; + transform: translate(-50, -50); } - @include bem.elem('thumbnails') { - display: flex; - grid-area: thumbnails; - gap: props.get(vars.$thumbnail--spacing); + @include bem.elem("thumbnails") { + display: flex; + grid-area: thumbnails; + gap: props.get(vars.$thumbnail--spacing); justify-content: center; - padding: props.get(vars.$pad); - overflow: auto; + padding: props.get(vars.$pad); + overflow: auto; } - @include bem.elem('thumbnail') { + @include bem.elem("thumbnail") { inline-size: props.get(vars.$thumbnail--width); - transition: inline-size .2s ease, margin-inline .2s ease; + transition: + inline-size 0.2s ease, + margin-inline 0.2s ease; - @include bem.is('selected') { - inline-size: props.get(vars.$thumbnail--active--width); + @include bem.is("selected") { + inline-size: props.get(vars.$thumbnail--active--width); margin-inline: props.get(vars.$thumbnail--active--spacing); } } diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 6fb84f7..dc9a2a1 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -1,37 +1,80 @@ -@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; $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; -$controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default; -$controls--block-size: props.def(--o-lightbox--controls--block-size, props.get(core.$size--550)) !default; +$controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default; +$controls--block-size: props.def( + --o-lightbox--controls--block-size, + props.get(core.$size--550) +) !default; -$controls--shadow-x: props.def(--o-lightbox--controls--shadow-x, props.get(core.$shadow--l2--x)) !default; -$controls--shadow-y: props.def(--o-lightbox--controls--shadow-y, props.get(core.$shadow--l2--y)) !default; -$controls--shadow-blur: props.def(--o-lightbox--controls--shadow-blur, props.get(core.$shadow--l2--blur)) !default; -$controls--shadow-grow: props.def(--o-lightbox--controls--shadow-grow, props.get(core.$shadow--l2--grow)) !default; +$controls--shadow-x: props.def( + --o-lightbox--controls--shadow-x, + props.get(core.$shadow--l2--x) +) !default; +$controls--shadow-y: props.def( + --o-lightbox--controls--shadow-y, + props.get(core.$shadow--l2--y) +) !default; +$controls--shadow-blur: props.def( + --o-lightbox--controls--shadow-blur, + props.get(core.$shadow--l2--blur) +) !default; +$controls--shadow-grow: props.def( + --o-lightbox--controls--shadow-grow, + props.get(core.$shadow--l2--grow) +) !default; -$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; -$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; -$thumbnail--active--width: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default; -$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default; +$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; +$thumbnail--spacing: props.def( + --o-lightbox--thumbnail--spacing, + props.get(core.$size--100) +) !default; +$thumbnail--active--width: props.def( + --o-lightbox--thumbnail--active--width, + props.get(core.$size--1000) +) !default; +$thumbnail--active--spacing: props.def( + --o-lightbox--thumbnail--active--spacing, + props.get(core.$size--250) +) !default; -$thumbnail--width--md: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default; -$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default; +$thumbnail--width--md: props.def( + --o-lightbox--thumbnail--width, + props.get(core.$size--400), + "md" +) !default; +$thumbnail--active--width--md: props.def( + --o-lightbox--thumbnail--active--width, + props.get(core.$size--600), + "md" +) !default; -$controls--bg: props.def(--o-lightbox--controls--bg, props.get(core.$transparent-colors, --black, --700), 'color') !default; -$controls--shadow-color: props.def(--o-lightbox--controls--shadow-color, props.get(core.$transparent-colors, --black, --300), 'color') !default; +$controls--bg: props.def( + --o-lightbox--controls--bg, + props.get(core.$transparent-colors, --black, --700), + "color" +) !default; +$controls--shadow-color: props.def( + --o-lightbox--controls--shadow-color, + props.get(core.$transparent-colors, --black, --300), + "color" +) !default; -$static-themes: props.def(--o-lightbox, (), 'color'); +$static-themes: props.def(--o-lightbox, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $lightbox-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $lightbox-theme: ( - --text: props.get(core.$transparent-colors, $theme, --text), + $static-themes: props.merge( + $static-themes, + ( + $lightbox-theme: ( + --text: props.get(core.$transparent-colors, $theme, --text), + ), ) - )); + ); } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index dce14a8..c7fbc0e 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -1,75 +1,82 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'icon.vars' as icon; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "icon.vars" as icon; -@forward 'menu.vars'; -@use 'menu.vars' as vars; +@forward "menu.vars"; +@use "menu.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('menu') { - display: flex; + @include bem.object("menu") { + display: flex; flex-direction: column; - gap: props.get(vars.$spacing); + gap: props.get(vars.$spacing); - @include bem.elem('header') { - padding-block: props.get(vars.$item--pad-b); + @include bem.elem("header") { + padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$header--font-size); - font-weight: 500; - color: props.get(vars.$header--label-color); + font-size: props.get(vars.$header--font-size); + font-weight: 500; + color: props.get(vars.$header--label-color); text-transform: uppercase; - letter-spacing: .5px; + letter-spacing: 0.5px; @include bem.next-twin-elem { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + margin-block-start: calc( + props.get(vars.$separator-width) + props.get(vars.$spacing) + ); } } - @include bem.elem('item') { - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); - color: props.get(vars.$item--disabled--label-color); + @include bem.elem("item") { + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: props.get(vars.$item--key-focus--outline-width) solid transparent; - border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); + border: props.get(vars.$item--key-focus--outline-width) solid transparent; + border-radius: calc( + props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width) + ); &:link, &:visited, &:enabled { color: currentColor; - @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { - color: props.get(vars.$item--hover--label-color); + @include bem.multi("&:hover, &:focus-visible", "is" "selected") { + color: props.get(vars.$item--hover--label-color); background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: props.get(vars.$item--active--label-color); + color: props.get(vars.$item--active--label-color); background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + outline: props.get(vars.$item--key-focus--border-color) solid + props.get(vars.$item--key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$item--key-focus--border-width) + + props.get(vars.$item--key-focus--outline-width) + ) props.get(vars.$item--key-focus--outline-color); } } - @include bem.next-elem('header') { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + @include bem.next-elem("header") { + margin-block-start: calc( + props.get(vars.$separator-width) + props.get(vars.$spacing) + ); } } - @include bem.elem('header') { + @include bem.elem("header") { &:link, &:visited, &:enabled { @@ -77,25 +84,25 @@ } } - @include bem.elem('separator') { - block-size: 1px; - margin-block: props.get(vars.$separator-width); - margin-inline: props.get(vars.$item--pad-i); + @include bem.elem("separator") { + block-size: 1px; + margin-block: props.get(vars.$separator-width); + margin-inline: props.get(vars.$item--pad-i); background-color: props.get(vars.$separator-color); } - @include bem.elem('slot') { - padding-block: props.get(vars.$item--pad-b); + @include bem.elem("slot") { + padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); } - @include bem.elem('icon-slot') { - display: flex; + @include bem.elem("icon-slot") { + display: flex; justify-content: center; - inline-size: props.get(icon.$size); + inline-size: props.get(icon.$size); } - @include bem.modifier('pull') { + @include bem.modifier("pull") { margin: calc(-1 * props.get(vars.$item--pad-i)); } } diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss index 9396117..c168c30 100644 --- a/src/objects/_menu.vars.scss +++ b/src/objects/_menu.vars.scss @@ -1,29 +1,74 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$spacing: props.def(--o-menu--spacing, 0em) !default; +$spacing: props.def(--o-menu--spacing, 0em) !default; $header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default; -$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; +$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; -$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; +$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; $item--rounding: props.def(--o-menu--item--rounding, 0em) !default; -$item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$item--key-focus--border-width: props.def( + --o-menu--item--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$item--key-focus--border-offset: props.def( + --o-menu--item--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$item--key-focus--outline-width: props.def( + --o-menu--item--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default; -$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default; +$separator-color: props.def( + --o-menu--separator-color, + props.get(core.$theme, --border), + "color" +) !default; +$header--label-color: props.def( + --o-menu--header--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--hover--bg-color: props.def( + --o-menu--item--hover--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$item--hover--label-color: props.def( + --o-menu--item--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; -$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--active--bg-color: props.def( + --o-menu--item--active--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$item--active--label-color: props.def( + --o-menu--item--active--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$item--disabled--label-color: props.def( + --o-menu--item--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$item--key-focus--border-color: props.def( + --o-menu--item--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$item--key-focus--outline-color: props.def( + --o-menu--item--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index cc1eaaa..4b678e0 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -1,151 +1,197 @@ -@use 'sass:list'; -@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:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'navbar.vars'; -@use 'navbar.vars' as vars; +@forward "navbar.vars"; +@use "navbar.vars" as vars; @mixin -apply-theme($theme, $key: ()) { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --disabled --label-color)...); } - @include bem.elem('item-content') { + @include bem.elem("item-content") { color: props.get($theme, list.join($key, --disabled --text-color)...); &::after { - outline: props.get($theme, list.join($key, --key-focus --border)...) 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($theme, list.join($key, --key-focus --border)...) 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($theme, list.join($key, --key-focus --outline)...); } } - @include bem.elem('item') { + @include bem.elem("item") { &:link, &:visited, &:enabled { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --label-color)...); } - @include bem.elem('item-content') { + @include bem.elem("item-content") { color: props.get($theme, list.join($key, --text-color)...); } &:hover, &:focus-visible { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --hover --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --hover --text-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --hover --text-color)...); background-color: props.get($theme, list.join($key, --hover --bg-color)...); } } &:focus-visible { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --key-focus --label)...); } } &:active { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --active --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --active --text-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --active --text-color)...); background-color: props.get($theme, list.join($key, --active --bg-color)...); } } } - @include bem.is('selected') { - @include bem.elem('item-label') { + @include bem.is("selected") { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --selected --disabled --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --disabled --text-color)...); - background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --selected --disabled --text-color)...); + background-color: props.get( + $theme, + list.join($key, --selected --disabled --bg-color)... + ); } &:link, &:visited, &:enabled { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --selected --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --text-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --selected --text-color)...); background-color: props.get($theme, list.join($key, --selected --bg-color)...); } &:hover, &:focus-visible { - @include bem.elem('item-label') { - color: props.get($theme, list.join($key, --selected --hover --label-color)...); + @include bem.elem("item-label") { + color: props.get( + $theme, + list.join($key, --selected --hover --label-color)... + ); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --hover --text-color)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --selected --hover --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --selected --hover --bg-color)... + ); } } &:active { - @include bem.elem('item-label') { - color: props.get($theme, list.join($key, --selected --active --label-color)...); + @include bem.elem("item-label") { + color: props.get( + $theme, + list.join($key, --selected --active --label-color)... + ); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --active --text-color)...); - background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --selected --active --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --selected --active --bg-color)... + ); } } } } } - @include bem.modifier('quiet') { - @include bem.elem('item') { - @include bem.is('selected') { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...); + @include bem.modifier("quiet") { + @include bem.elem("item") { + @include bem.is("selected") { + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --disabled --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --disabled --bg-color)... + ); } &:link, &:visited, &:enabled { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --bg-color)... + ); } &:hover, &:focus-visible { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --hover --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --hover --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --hover --bg-color)... + ); } } &:active { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --active --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --active --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --active --bg-color)... + ); } } } @@ -155,64 +201,64 @@ } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('navbar') { - display: flex; + @include bem.object("navbar") { + display: flex; block-size: props.get(vars.$block-size); - @include bem.elem('item-label') { - order: 2; + @include bem.elem("item-label") { + order: 2; margin-block-start: props.get(vars.$item--pad-b-icon); - font-size: props.get(vars.$item--label-font-size); - font-weight: bold; + font-size: props.get(vars.$item--label-font-size); + font-weight: bold; - @include bem.next-elem('item-content') { - padding-block: props.get(vars.$item--pad-b-icon); + @include bem.next-elem("item-content") { + padding-block: props.get(vars.$item--pad-b-icon); padding-inline: props.get(vars.$item--pad-i-icon); - font-size: props.get(vars.$item--icon-size); + font-size: props.get(vars.$item--icon-size); } } - @include bem.elem('item-content-text') { + @include bem.elem("item-content-text") { margin-inline: props.get(vars.$item--pad-i-label); } - @include bem.elem('item-content') { - position: relative; - order: 1; - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$item--font-size); - white-space: nowrap; - border-radius: 100em; + @include bem.elem("item-content") { + position: relative; + order: 1; + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$item--font-size); + white-space: nowrap; + border-radius: 100em; &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: -10; - display: block; - visibility: hidden; + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: -10; + display: block; + visibility: hidden; pointer-events: none; - content: ''; - border-radius: 100em; + content: ""; + border-radius: 100em; } } - @include bem.elem('item') { - display: flex; - flex-direction: column; - align-items: center; + @include bem.elem("item") { + display: flex; + flex-direction: column; + align-items: center; justify-content: center; - inline-size: 100%; - padding-inline: calc(.5 * props.get(vars.$spacing)); - font-weight: 500; + inline-size: 100%; + padding-inline: calc(0.5 * props.get(vars.$spacing)); + font-weight: 500; &:link, &:visited, &:enabled { &:focus-visible { - @include bem.elem('item-content') { + @include bem.elem("item-content") { &::after { visibility: visible; } @@ -220,7 +266,7 @@ } } - @include bem.is('selected') { + @include bem.is("selected") { font-weight: bold; } } @@ -233,22 +279,21 @@ } } - @include bem.modifier('hide-unselected') { - @include bem.elem('item') { + @include bem.modifier("hide-unselected") { + @include bem.elem("item") { display: none; - @include bem.is('selected') { + @include bem.is("selected") { display: flex; } } } - @include bem.modifier('adapt') { + @include bem.modifier("adapt") { block-size: 100%; } - - @include bem.modifier('align-block') { + @include bem.modifier("align-block") { margin-inline: calc(-1 * props.get(vars.$item--pad-i)); } } diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index e96b714..b7d7e16 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -1,178 +1,242 @@ -@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; $block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default; -$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !default; - -$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; -$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; -$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; -$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default; -$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default; -$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default; -$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; - -$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; - -$themes: props.def(--o-navbar, (), 'color'); +$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !default; + +$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; +$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; +$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; +$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default; +$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default; +$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default; +$item--label-font-size: props.def( + --o-navbar--item--label-font-size, + props.get(core.$font-size--50) +) !default; + +$key-focus--border-width: props.def( + --o-navbar--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-navbar--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-navbar--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; + +$themes: props.def(--o-navbar, (), "color"); $default-theme-override: () !default; -$default-theme: map.deep-merge(( - --text-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --text-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --text), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --text-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --text-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --text-disabled), - ), - - --key-focus: ( - --label: props.get(core.$theme, --focus, --text), - --border: props.get(core.$theme, --focus, --border), - --outline: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --heading), - --text-color: props.get(core.$theme, --base, --50), - --label-color: props.get(core.$theme, --heading), - +$default-theme: map.deep-merge( + ( + --text-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --text-mute), --hover: ( - --bg-color: props.get(core.$theme, --text), - --text-color: props.get(core.$theme, --base, --50), - --label-color: props.get(core.$theme, --heading), + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --text), ), --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --text-color: props.get(core.$theme, --base, --50), + --bg-color: props.get(core.$theme, --border), + --text-color: props.get(core.$theme, --heading), --label-color: props.get(core.$theme, --heading), ), --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --border-strong), + --text-color: props.get(core.$theme, --border-strong), --label-color: props.get(core.$theme, --text-disabled), ), - ), - - --quiet: ( - --selected: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --heading), - --hover: ( - --bg-color: props.get(core.$theme, --border), - --text-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --text-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --border-strong), - ), - ) - ) -), $default-theme-override) !default; -$default-theme: props.def(--o-navbar, $default-theme, 'color'); - -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $nav-theme: --static-#{string.slice($theme, 3)}; - - $themes: props.merge($themes, ( - $nav-theme: ( - --text-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --700), + --key-focus: ( + --label: props.get(core.$theme, --focus, --text), + --border: props.get(core.$theme, --focus, --border), + --outline: props.get(core.$theme, --focus, --outline), + ), + --selected: ( + --bg-color: props.get(core.$theme, --heading), + --text-color: props.get(core.$theme, --base, --50), + --label-color: props.get(core.$theme, --heading), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --text-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --800), + --bg-color: props.get(core.$theme, --text), + --text-color: props.get(core.$theme, --base, --50), + --label-color: props.get(core.$theme, --heading), ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --text-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$theme, --text-mute), + --text-color: props.get(core.$theme, --base, --50), + --label-color: props.get(core.$theme, --heading), ), --disabled: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - - --key-focus: ( - --label: props.get(core.$transparent-colors, $theme, --800), - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --text-disabled), ), + ), + --quiet: ( --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --text-color: props.get(core.$transparent-colors, $theme, --text), - --label-color: props.get(core.$transparent-colors, $theme, --800), - + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --heading), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --text-color: props.get(core.$transparent-colors, $theme, --text), - --label-color: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$theme, --border), + --text-color: props.get(core.$theme, --heading), ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --text-color: props.get(core.$transparent-colors, $theme, --text), - --label-color: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$theme, --border-strong), + --text-color: props.get(core.$theme, --heading), ), --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --text-color: props.get(core.$transparent-colors, $theme, --500), - --label-color: props.get(core.$transparent-colors, $theme, --100), + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --border-strong), ), ), + ), + ), + $default-theme-override +) !default; +$default-theme: props.def(--o-navbar, $default-theme, "color"); - --quiet: ( - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --text-color: props.get(core.$transparent-colors, $theme, --900), +@each $theme in map.keys(props.get(core.$transparent-colors)) { + $nav-theme: --static-#{string.slice($theme, 3)}; + $themes: props.merge( + $themes, + ( + $nav-theme: ( + --text-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get(core.$transparent-colors, $theme, --700), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --text-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --800), + ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --500), - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --text-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - ) - ) + --text-color: props.get(core.$transparent-colors, $theme, --500), + --label-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --key-focus: ( + --label: props.get(core.$transparent-colors, $theme, --800), + --border: props.get(core.$transparent-colors, $theme, --900), + --outline: props.get(core.$transparent-colors, $theme, --300), + ), + + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --text-color: props.get(core.$transparent-colors, $theme, --text), + --label-color: props.get(core.$transparent-colors, $theme, --800), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --text-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --text-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --text-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + --label-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + ), + + --quiet: ( + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + --hover: ( + --bg-color: props.get( + core.$transparent-colors, + $theme, + --400 + ), + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --active: ( + --bg-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --disabled: ( + --bg-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + --text-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + ), + ), + ), + ), ) - )); + ); } diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index f503812..88448e0 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -1,21 +1,27 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use '../config'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:list"; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "../config"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; @mixin styles { - @include bem.object('palette') { - display: flex; + @include bem.object("palette") { + display: flex; block-size: 3em; - @include bem.elem('item') { + @include bem.elem("item") { flex: 1 1 auto; $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); - $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); + $levels: map.get( + config.$themes, + config.$theme-default, + light, + --levels, + list.nth($palette, 2) + ); @for $i from 1 through list.length($levels) { $key: list.nth(map.keys($levels), $i); @@ -26,11 +32,19 @@ } } - @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { - $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); + @each $palette-name, + $palette in map.get(config.$themes, config.$theme-default, light, --palettes) + { + $levels: map.get( + config.$themes, + config.$theme-default, + light, + --levels, + list.nth($palette, 2) + ); @include bem.modifier(string.slice($palette-name, 3)) { - @include bem.elem('item') { + @include bem.elem("item") { @for $i from 1 through list.length($levels) { $key: list.nth(map.keys($levels), $i); @@ -42,17 +56,21 @@ } } - @include bem.modifier('static') { + @include bem.modifier("static") { @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { $levels: map.get(config.$static-colors, --levels); @include bem.modifier(string.slice($palette-name, 3)) { - @include bem.elem('item') { + @include bem.elem("item") { @for $i from 1 through list.length($levels) { $key: list.nth(map.keys($levels), $i); &:nth-child(#{$i}) { - background-color: props.get(core.$theme, #{$palette-name}-static, $key); + background-color: props.get( + core.$theme, + #{$palette-name}-static, + $key + ); } } } diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss index 683f57e..d0af033 100644 --- a/src/objects/_placeholders.scss +++ b/src/objects/_placeholders.scss @@ -1,22 +1,22 @@ -@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 'placeholders.vars'; -@use 'placeholders.vars' as vars; +@forward "placeholders.vars"; +@use "placeholders.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('placeholders') { - @include bem.elem('placeholder') { - display: inline-block; - min-block-size: props.get(vars.$min-block-size); - vertical-align: middle; + @include bem.object("placeholders") { + @include bem.elem("placeholder") { + display: inline-block; + min-block-size: props.get(vars.$min-block-size); + vertical-align: middle; background-color: currentColor; - border-radius: props.get(vars.$rounding); - opacity: props.get(vars.$opacity); + border-radius: props.get(vars.$rounding); + opacity: props.get(vars.$opacity); } } } diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss index 1ac4ef7..87e1657 100644 --- a/src/objects/_placeholders.vars.scss +++ b/src/objects/_placeholders.vars.scss @@ -1,6 +1,6 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default; -$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; -$opacity: props.def(--o-placeholder--opacity, .5) !default; +$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; +$opacity: props.def(--o-placeholder--opacity, 0.5) !default; diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 1cb5660..90187c1 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -1,44 +1,40 @@ -@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 'popover.vars'; -@use 'popover.vars' as vars; +@forward "popover.vars"; +@use "popover.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('popover') { - position: fixed; - inset-block-start: 0; + @include bem.object("popover") { + position: fixed; + inset-block-start: 0; inset-inline-start: 0; - z-index: props.get(vars.$z-index); - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin: 0; - color: currentColor; - background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); - transform: translate(var(--x), var(--y)); + z-index: props.get(vars.$z-index); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin: 0; + color: currentColor; + background-color: props.get(vars.$bg-color); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) props.get(vars.$shadow-color); + transform: translate(var(--x), var(--y)); - @include bem.modifier('up-left') { + @include bem.modifier("up-left") { transform: translate(var(--x), calc(var(--y) - 100%)); } - @include bem.modifier('up-right') { + @include bem.modifier("up-right") { transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); } - @include bem.modifier('down-right') { + @include bem.modifier("down-right") { transform: translate(calc(var(--x) - 100%), var(--y)); } } diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss index 202d71a..df1072e 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss @@ -1,19 +1,28 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$z-index: props.def(--o-popover--z-index, 11000) !default; -$pad-i: props.def(--o-popover--pad-i, 0) !default; -$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; +$z-index: props.def(--o-popover--z-index, 11000) !default; +$pad-i: props.def(--o-popover--pad-i, 0) !default; +$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default; -$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; -$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; +$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; +$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; -$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default; -$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default; +$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default; +$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default; $shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default; $shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default; -$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default; -$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default; +$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), "color") !default; +$border-color: props.def( + --o-popover--border-color, + props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) + props.get(core.$theme, --box, --border-strong), + "color" +) !default; +$shadow-color: props.def( + --o-popover--shadow-color, + props.get(core.$theme, --shadow), + "color" +) !default; diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index ae4a85a..c964657 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -1,92 +1,100 @@ -@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 'radio.vars'; -@use 'radio.vars' as vars; +@forward "radio.vars"; +@use "radio.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('radio') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); + @include bem.object("radio") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - - @include bem.elem('circle') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$diameter); - block-size: props.get(vars.$diameter); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$circle-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc( + props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get( + vars.$key-focus--border-offset + ) + ); + + @include bem.elem("circle") { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$diameter); + block-size: props.get(vars.$diameter); + margin-block-start: calc( + 0.5em * props.get(core.$font--standard--line-height) - 0.5 * + props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset) + ); + vertical-align: top; + background-color: props.get(vars.$circle-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; &::after { - position: relative; - inset-block-start: props.get(vars.$border-width); + position: relative; + inset-block-start: props.get(vars.$border-width); inset-inline-start: props.get(vars.$border-width); - display: block; - inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - content: ''; - background-color: props.get(vars.$circle-bg-color); - border-radius: props.get(vars.$diameter); - transition: transform .2s ease; + display: block; + inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + content: ""; + background-color: props.get(vars.$circle-bg-color); + border-radius: props.get(vars.$diameter); + transition: transform 0.2s ease; } } - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + @include bem.elem("label") { + margin-inline-start: calc( + props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset) + ); } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; + @include bem.elem("native") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$hover--circle-border-color); } } &:checked { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { &::after { - transform: scale(.44); + transform: scale(0.44); } } } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -96,45 +104,46 @@ } &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$key-focus--label-color); } - @include bem.sibling-elem('circle') { - 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)) + @include bem.sibling-elem("circle") { + 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('standalone') { - @include bem.elem('circle') { + @include bem.modifier("standalone") { + @include bem.elem("circle") { margin-block-start: 0; } } - @include bem.modifier('accent') { - @include bem.elem('native') { + @include bem.modifier("accent") { + @include bem.elem("native") { &:checked { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$accent--circle-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$accent--hover--circle-border-color); } } } &:disabled { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -143,7 +152,7 @@ } &:checked { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$disabled--circle-border-color); } } diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss index a5f249d..e7a41a4 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss @@ -1,33 +1,90 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; -$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; -$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; -$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; -$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; +$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; +$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-radio--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-radio--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-radio--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$circle-border-color: props.def( + --o-radio--circle-border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$circle-bg-color: props.def( + --o-radio--circle-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default; +$hover--label-color: props.def( + --o-radio--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--circle-border-color: props.def( + --o-radio--hover--circle-border-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; +$accent--circle-border-color: props.def( + --o-radio--accent--circle-border-color, + props.get(core.$theme, --accent, --900), + "color" +) !default; -$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; +$accent--hover--circle-border-color: props.def( + --o-radio--accent--hover--circle-border-color, + props.get(core.$theme, --accent, --1000), + "color" +) !default; -$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default; -$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$disabled--label-color: props.def( + --o-radio--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--circle-border-color: props.def( + --o-radio--disabled--circle-border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; +$disabled--circle-bg-color: props.def( + --o-radio--disabled--circle-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-radio--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-radio--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-radio--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 272d38c..ed0f3dc 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss @@ -1,76 +1,79 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'icon.vars' as icon; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "icon.vars" as icon; -@forward 'side-nav.vars'; -@use 'side-nav.vars' as vars; +@forward "side-nav.vars"; +@use "side-nav.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('side-nav') { - display: flex; + @include bem.object("side-nav") { + display: flex; flex-direction: column; - gap: props.get(vars.$spacing); + gap: props.get(vars.$spacing); - @include bem.elem('header') { - padding-block: props.get(vars.$item--pad-b); + @include bem.elem("header") { + padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$header--font-size); - font-weight: 500; - color: props.get(vars.$header--label-color); + font-size: props.get(vars.$header--font-size); + font-weight: 500; + color: props.get(vars.$header--label-color); text-transform: uppercase; - letter-spacing: .5px; + letter-spacing: 0.5px; @include bem.next-twin-elem { margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } - @include bem.elem('item') { - display: block; - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); - color: props.get(vars.$item--disabled--label-color); + @include bem.elem("item") { + display: block; + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: props.get(vars.$item--key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); + border: props.get(vars.$item--key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset) + ); &:link, &:visited, &:enabled { color: currentColor; - @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { - color: props.get(vars.$item--hover--label-color); + @include bem.multi("&:hover, &:focus-visible", "is" "selected") { + color: props.get(vars.$item--hover--label-color); background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: props.get(vars.$item--active--label-color); + color: props.get(vars.$item--active--label-color); background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + outline: props.get(vars.$item--key-focus--border-color) solid + props.get(vars.$item--key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$item--key-focus--border-width) + + props.get(vars.$item--key-focus--outline-width) + ) props.get(vars.$item--key-focus--outline-color); } } - @include bem.next-elem('header') { + @include bem.next-elem("header") { margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } - @include bem.elem('header') { + @include bem.elem("header") { &:link, &:visited, &:enabled { @@ -78,14 +81,14 @@ } } - @include bem.elem('separator') { + @include bem.elem("separator") { block-size: props.get(vars.$separator); } - @include bem.elem('icon-slot') { - display: flex; + @include bem.elem("icon-slot") { + display: flex; justify-content: center; - inline-size: props.get(icon.$size); + inline-size: props.get(icon.$size); } } } diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index d6a7de1..8abb0df 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -1,28 +1,72 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; -$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default; -$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; +$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; +$header--font-size: props.def( + --o-side-nav--header--font-size, + props.get(core.$font-size--50) +) !default; +$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; -$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default; -$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; +$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default; +$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; -$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$item--key-focus--border-width: props.def( + --o-side-nav--item--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$item--key-focus--border-offset: props.def( + --o-side-nav--item--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$item--key-focus--outline-width: props.def( + --o-side-nav--item--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$header--label-color: props.def( + --o-side-nav--header--label-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--hover--bg-color: props.def( + --o-side-nav--item--hover--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$item--hover--label-color: props.def( + --o-side-nav--item--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; -$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--active--bg-color: props.def( + --o-side-nav--item--active--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$item--active--label-color: props.def( + --o-side-nav--item--active--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$item--disabled--label-color: props.def( + --o-side-nav--item--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$item--key-focus--border-color: props.def( + --o-side-nav--item--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$item--key-focus--outline-color: props.def( + --o-side-nav--item--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index fe8fe26..8885929 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -1,22 +1,22 @@ -@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 'status-indicator.vars'; -@use 'status-indicator.vars' as vars; +@forward "status-indicator.vars"; +@use "status-indicator.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('status-indicator') { - display: inline-block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); + @include bem.object("status-indicator") { + display: inline-block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); background-color: props.get(vars.$default); - border-radius: 10em; + border-radius: 10em; @each $theme in map.keys(props.get(vars.$themes)) { @include bem.is(string.slice($theme, 3)) { diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index dfe628f..66a11e8 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -1,26 +1,32 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../config'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../config"; +@use "../core.vars" as core; $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; -$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default; -$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; +$default: props.def( + --o-status-indicator--default, + props.get(core.$theme, --border-strong), + "color" +) !default; +$primary: props.def( + --o-status-indicator--primary, + props.get(core.$theme, --text), + "color" +) !default; $themes-config: ( - accent: --accent, + accent: --accent, positive: --positive, negative: --negative, - warning: --warning, + warning: --warning, ) !default; -$themes: props.def(--o-status-indicator, (), 'color'); +$themes: props.def(--o-status-indicator, (), "color"); @each $theme, $key in $themes-config { @if $theme != --base { - $themes: props.merge($themes, ( - --#{$theme}: props.get(core.$theme, $key, --700), - )); + $themes: props.merge($themes, (--#{$theme}: props.get(core.$theme, $key, --700))); } } diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 0ef95e6..c1f7411 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,73 +1,79 @@ -@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 'switch.vars'; -@use 'switch.vars' as vars; +@forward "switch.vars"; +@use "switch.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('switch') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); + @include bem.object("switch") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - - @include bem.elem('indicator') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$inline-size); - block-size: props.get(vars.$block-size); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$track-bg-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; - transition: background-color .2s ease; + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc( + props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get( + vars.$key-focus--border-offset + ) + ); + + @include bem.elem("indicator") { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$inline-size); + block-size: props.get(vars.$block-size); + margin-block-start: calc( + 0.5em * props.get(core.$font--standard--line-height) - 0.5 * + props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset) + ); + vertical-align: top; + background-color: props.get(vars.$track-bg-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; + transition: background-color 0.2s ease; &::after { - display: block; - inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - content: ''; + display: block; + inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + content: ""; background-color: props.get(vars.$handle-bg-color); - border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); - border-radius: props.get(vars.$inline-size); - transition: transform .2s ease; + border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); + border-radius: props.get(vars.$inline-size); + transition: transform 0.2s ease; } } - @include bem.elem('label') { + @include bem.elem("label") { margin-inline-start: props.get(vars.$label-gap); } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; + @include bem.elem("native") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { &::after { border-color: props.get(vars.$hover--handle-border-color); } @@ -75,18 +81,23 @@ } &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$handle-border-color); &::after { border-color: props.get(vars.$handle-border-color); - transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); + transform: translate( + calc( + props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px + ), + 0 + ); } } &:hover, &:focus-visible { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$hover--handle-border-color); &::after { @@ -97,21 +108,21 @@ } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$disabled--track-bg-color); &::after { background-color: props.get(vars.$disabled--handle-bg-color); - border-color: props.get(vars.$disabled--handle-border-color); + border-color: props.get(vars.$disabled--handle-border-color); } } &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$disabled--handle-border-color); &::after { @@ -122,32 +133,33 @@ } &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$key-focus--label-color); } - @include bem.sibling-elem('indicator') { - 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)) + @include bem.sibling-elem("indicator") { + 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('standalone') { - @include bem.elem('indicator') { + @include bem.modifier("standalone") { + @include bem.elem("indicator") { margin-block-start: 0; } } - @include bem.modifier('accent') { - @include bem.elem('native') { + @include bem.modifier("accent") { + @include bem.elem("native") { &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$accent--handle-border-color); &::after { @@ -157,7 +169,7 @@ &:hover, &:focus-visible { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$accent--hover--handle-border-color); &::after { @@ -168,12 +180,12 @@ } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$disabled--handle-border-color); &::after { diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss index 761cacd..6f56ec7 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss @@ -1,36 +1,101 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; -$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; -$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; -$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; -$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; +$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-switch--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-switch--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-switch--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default; -$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$track-bg-color: props.def( + --o-switch--track-bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$handle-border-color: props.def( + --o-switch--handle-border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$handle-bg-color: props.def( + --o-switch--handle-bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; -$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default; +$hover--label-color: props.def( + --o-switch--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--handle-border-color: props.def( + --o-switch--hover--handle-border-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; +$accent--handle-border-color: props.def( + --o-switch--accent--handle-border-color, + props.get(core.$theme, --accent, --900), + "color" +) !default; -$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; +$accent--hover--handle-border-color: props.def( + --o-switch--accent--hover--handle-border-color, + props.get(core.$theme, --accent, --1000), + "color" +) !default; -$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default; -$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default; -$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$disabled--label-color: props.def( + --o-switch--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--track-bg-color: props.def( + --o-switch--disabled--track-bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$disabled--handle-border-color: props.def( + --o-switch--disabled--handle-border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; +$disabled--handle-bg-color: props.def( + --o-switch--disabled--handle-bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; -$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-switch--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-switch--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-switch--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index d43208f..02519f9 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss @@ -1,75 +1,77 @@ -@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 'tabbar.vars'; -@use 'tabbar.vars' as vars; +@forward "tabbar.vars"; +@use "tabbar.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('tabbar') { + @include bem.object("tabbar") { min-inline-size: 0; - block-size: props.get(vars.$block-size); - overflow: hidden; + block-size: props.get(vars.$block-size); + overflow: hidden; &::after { - display: block; - block-size: props.get(vars.$border--width); + display: block; + block-size: props.get(vars.$border--width); margin-block-start: calc(-1 * props.get(vars.$border--width)); - content: ''; - background-color: props.get(vars.$railing--bg-color); + content: ""; + background-color: props.get(vars.$railing--bg-color); } - @include bem.elem('tabs') { - display: flex; - block-size: 100%; + @include bem.elem("tabs") { + display: flex; + block-size: 100%; overflow-inline: auto; } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { box-shadow: none; } - @include bem.modifier('adapt') { + @include bem.modifier("adapt") { block-size: 100%; } - @include bem.modifier('snap') { + @include bem.modifier("snap") { scroll-snap-align: start; } - @include bem.elem('tab') { - position: relative; - display: flex; - align-items: center; - padding-inline: calc(.5 * props.get(vars.$spacing)); - margin-inline: calc(-.5 * props.get(vars.$spacing)); - color: props.get(vars.$tab--text-color); - white-space: nowrap; + @include bem.elem("tab") { + position: relative; + display: flex; + align-items: center; + padding-inline: calc(0.5 * props.get(vars.$spacing)); + margin-inline: calc(-0.5 * props.get(vars.$spacing)); + color: props.get(vars.$tab--text-color); + white-space: nowrap; &::before { - position: absolute; + position: absolute; inset-block-start: 50%; - inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); - z-index: -10; - block-size: 1.5em; - content: ''; - border-radius: props.get(vars.$rounding); - transform: translateY(-50%); + inset-inline: calc( + -1 * props.get(vars.$tab--pad-i) + 0.5 * props.get(vars.$spacing) + ); + z-index: -10; + block-size: 1.5em; + content: ""; + border-radius: props.get(vars.$rounding); + transform: translateY(-50%); } &::after { - position: absolute; - inset-block-end: 0; - inset-inline: calc(.5 * props.get(vars.$spacing)); - z-index: 10; - display: none; - block-size: props.get(vars.$indicator--width); - content: ''; + position: absolute; + inset-block-end: 0; + inset-inline: calc(0.5 * props.get(vars.$spacing)); + z-index: 10; + display: none; + block-size: props.get(vars.$indicator--width); + content: ""; background-color: props.get(vars.$tab--selected--text-color); } @@ -83,21 +85,25 @@ &:focus-visible { &::before { - 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); + 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); } } } @include bem.next-twin-elem { - margin-inline-start: calc(.5 * props.get(vars.$spacing)); + margin-inline-start: calc(0.5 * props.get(vars.$spacing)); } - @include bem.is('selected') { + @include bem.is("selected") { color: props.get(vars.$tab--selected--text-color); &::after { @@ -106,13 +112,13 @@ } } - @include bem.modifier('accent') { - @include bem.elem('tab') { + @include bem.modifier("accent") { + @include bem.elem("tab") { &::after { background-color: props.get(vars.$tab--accent--text-color); } - @include bem.is('selected') { + @include bem.is("selected") { color: props.get(vars.$tab--accent--text-color); } } diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss index d9cc53e..d26f302 100644 --- a/src/objects/_tabbar.vars.scss +++ b/src/objects/_tabbar.vars.scss @@ -1,26 +1,66 @@ -@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; $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; -$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; -$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; +$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; +$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; -$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default; -$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; +$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default; +$indicator--width: props.def( + --o-tabbar--indicator--width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-tabbar--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-tabbar--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-tabbar--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; -$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; -$tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; +$tab--text-color: props.def( + --o-tabbar--tab--text-color, + props.get(core.$theme, --text-mute), + "color" +) !default; +$tab--selected--text-color: props.def( + --o-tabbar--tab--selected--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$tab--accent--text-color: props.def( + --o-tabbar--tab--accent--text-color, + props.get(core.$theme, --accent, --1100), + "color" +) !default; -$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$railing--bg-color: props.def( + --o-tabbar--railing--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--text-color: props.def( + --o-tabbar--key-focus--text-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-tabbar--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-tabbar--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_table.scss b/src/objects/_table.scss index effa61f..a985f78 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -1,57 +1,57 @@ -@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 'table.vars'; -@use 'table.vars' as vars; +@forward "table.vars"; +@use "table.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('table') { - border-spacing: 0; + @include bem.object("table") { + border-spacing: 0; border-collapse: separate; - @include bem.modifier('fixed') { + @include bem.modifier("fixed") { table-layout: fixed; } - @include bem.elem('head-cell') { - padding-block: props.get(vars.$pad-b); + @include bem.elem("head-cell") { + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - font-family: props.get(vars.$heading--font-family); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); - color: props.get(vars.$heading-color); - text-align: start; + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + color: props.get(vars.$heading-color); + text-align: start; text-transform: props.get(vars.$heading--text-transform); letter-spacing: props.get(vars.$heading--letter-spacing); } - @include bem.elem('cell') { - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - border-color: props.get(vars.$border-color); - border-style: solid; - border-width: 0; + @include bem.elem("cell") { + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + border-color: props.get(vars.$border-color); + border-style: solid; + border-width: 0; border-block-start-width: props.get(vars.$border-width); - @include bem.modifier('divider') { + @include bem.modifier("divider") { border-inline-end-width: props.get(vars.$border-width); } } - @include bem.elem('row') { + @include bem.elem("row") { &:last-child { - @include bem.elem('cell') { + @include bem.elem("cell") { border-block-end-width: props.get(vars.$border-width); } } } - @include bem.modifier('flush') { - @include bem.elem('head-cell', 'cell') { + @include bem.modifier("flush") { + @include bem.elem("head-cell", "cell") { &:first-child { padding-inline-start: 0; } @@ -62,8 +62,8 @@ } } - @include bem.modifier('box') { - @include bem.elem('cell') { + @include bem.modifier("box") { + @include bem.elem("cell") { background-color: props.get(vars.$box--bg-color); &:first-child { @@ -75,9 +75,9 @@ } } - @include bem.elem('row') { + @include bem.elem("row") { &:first-child { - @include bem.elem('cell') { + @include bem.elem("cell") { &:first-child { border-start-start-radius: props.get(vars.$rounding); } @@ -89,7 +89,7 @@ } &:last-child { - @include bem.elem('cell') { + @include bem.elem("cell") { &:first-child { border-end-start-radius: props.get(vars.$rounding); } @@ -102,35 +102,35 @@ } } - @include bem.modifier('interactive') { - @include bem.elem('row') { - @include bem.elem('cell') { + @include bem.modifier("interactive") { + @include bem.elem("row") { + @include bem.elem("cell") { cursor: pointer; } &:hover { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$hover--bg-color); } } &:active { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$active--bg-color); } } } - @include bem.modifier('box') { - @include bem.elem('row') { + @include bem.modifier("box") { + @include bem.elem("row") { &:hover { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$box--hover--bg-color); } } &:active { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$box--active--bg-color); } } @@ -138,8 +138,8 @@ } } - @include bem.modifier('sm') { - @include bem.elem('head-cell', 'cell') { + @include bem.modifier("sm") { + @include bem.elem("head-cell", "cell") { padding-block: props.get(vars.$pad-b--sm); } } diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss index 7c5683c..e00010f 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss @@ -1,25 +1,59 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; -$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; -$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; +$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; +$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; +$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; -$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; -$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default; -$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; +$heading--font-family: props.def( + --o-table--heading--font-family, + props.get(core.$font--standard--family) +) !default; +$heading--font-size: props.def( + --o-table--heading--font-size, + props.get(core.$font-size--50) +) !default; +$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; $heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default; -$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default; +$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, 0.5px) !default; $pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; -$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default; -$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default; -$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default; +$border-color: props.def( + --o-table--border-color, + props.get(core.$theme, --border), + "color" +) !default; +$heading-color: props.def( + --o-table--heading-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--bg-color: props.def( + --o-table--hover--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$active--bg-color: props.def( + --o-table--active--bg-color, + props.get(core.$theme, --border), + "color" +) !default; -$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default; -$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default; -$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$box--bg-color: props.def( + --o-table--box--bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; +$box--hover--bg-color: props.def( + --o-table--box--hover--bg-color, + props.get(core.$theme, --bg-base), + "color" +) !default; +$box--active--bg-color: props.def( + --o-table--box--active--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 5a48df3..a8d3ec8 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,84 +1,91 @@ -@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 'text-field.vars'; -@use 'text-field.vars' as vars; +@forward "text-field.vars"; +@use "text-field.vars" as vars; @mixin -invalid { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); - - @include bem.sibling-elem('bg') { - inset-block: $focus-border-offset; - inset-inline: $focus-border-offset; - border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); + $focus-border-offset: calc( + props.get(vars.$border-width) - props.get(vars.$focus--border-width) + ); + + @include bem.sibling-elem("bg") { + inset-block: $focus-border-offset; + inset-inline: $focus-border-offset; + border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } &:hover { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$error--hover--border-color); } } &:focus { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$error--focus--border-color); } } } @mixin -keyboard-focus { - @include bem.sibling-elem('bg') { - outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); - border-color: props.get(vars.$key-focus--border-color); + @include bem.sibling-elem("bg") { + outline: props.get(vars.$key-focus--outline-color) solid + props.get(vars.$key-focus--border-width); + border-color: props.get(vars.$key-focus--border-color); //outline-offset: props.get(vars.$focus --border); } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('text-field') { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); + @include bem.object("text-field") { + $focus-border-offset: calc( + props.get(vars.$border-width) - props.get(vars.$focus--border-width) + ); - position: relative; - min-inline-size: 0; + position: relative; + min-inline-size: 0; background-color: props.get(vars.$bg-color); - border-radius: props.get(vars.$rounding); + border-radius: props.get(vars.$rounding); - @include bem.elem('bg') { - position: absolute; - inset-block: 0; - inset-inline: 0; - display: block; + @include bem.elem("bg") { + position: absolute; + inset-block: 0; + inset-inline: 0; + display: block; pointer-events: none; - border: props.get(vars.$border-width) solid props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); } - @include bem.elem('native') { - box-sizing: border-box; - inline-size: 100%; - padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); - padding-inline: props.get(vars.$pad-i); - font: inherit; - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - appearance: none; - resize: none; + @include bem.elem("native") { + box-sizing: border-box; + inline-size: 100%; + padding-block: calc( + props.get(vars.$pad-b) - 0.5em * (props.get(vars.$line-height) - 1) + ); + padding-inline: props.get(vars.$pad-i); + font: inherit; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + appearance: none; + resize: none; background-color: transparent; - border: 1px solid transparent; + border: 1px solid transparent; &::placeholder { font-style: italic; - color: props.get(vars.$placeholder-color); - opacity: 1; + color: props.get(vars.$placeholder-color); + opacity: 1; } &:hover { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$hover--border-color); } } @@ -86,10 +93,11 @@ &:focus { outline: 0; - @include bem.sibling-elem('bg') { - inset-block: $focus-border-offset; - inset-inline: $focus-border-offset; - border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); + @include bem.sibling-elem("bg") { + inset-block: $focus-border-offset; + inset-inline: $focus-border-offset; + border: props.get(vars.$focus--border-width) solid + props.get(vars.$focus--border-color); border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } } @@ -104,46 +112,49 @@ } } - @include bem.modifier('extended') { + @include bem.modifier("extended") { padding: props.get(vars.$extended--pad); - @include bem.multi('&', 'elem' 'bg') { + @include bem.multi("&", "elem" "bg") { border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); } - @include bem.elem('native') { + @include bem.elem("native") { &:focus { - @include bem.sibling-elem('bg') { - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); + @include bem.sibling-elem("bg") { + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$extended--pad) - + $focus-border-offset + ); } } } } - @include bem.modifier('pill') { - @include bem.multi('&', 'elem' 'bg') { + @include bem.modifier("pill") { + @include bem.multi("&", "elem" "bg") { border-radius: 100em; } - @include bem.elem('native') { + @include bem.elem("native") { padding-inline: props.get(vars.$pad-i-pill); &:focus { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-radius: 100em; } } } - @include bem.modifier('extended') { - @include bem.elem('native') { + @include bem.modifier("extended") { + @include bem.elem("native") { padding-inline: props.get(vars.$pad-i); } } } - @include bem.is('invalid') { - @include bem.elem('native') { + @include bem.is("invalid") { + @include bem.elem("native") { @include -invalid; &:focus-visible { @@ -152,10 +163,10 @@ } } - @include bem.is('disabled') { + @include bem.is("disabled") { background-color: props.get(vars.$disabled--bg-color); - @include bem.elem('native') { + @include bem.elem("native") { color: props.get(vars.$disabled--text-color); &::placeholder { @@ -163,21 +174,21 @@ } } - @include bem.elem('bg') { + @include bem.elem("bg") { border-color: props.get(vars.$disabled--border-color); } - @include bem.is('invalid') { - @include bem.elem('native') { - @include bem.sibling-elem('bg') { + @include bem.is("invalid") { + @include bem.elem("native") { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$disabled--border-color); } } } - @include bem.elem('native') { + @include bem.elem("native") { &:invalid { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$disabled--border-color); } } diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss index ef06822..9a2a16a 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss @@ -1,39 +1,108 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$line-height: props.def(--o-text-field--line-height, 1.4) !default; -$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; -$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default; -$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; -$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; -$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default; +$line-height: props.def(--o-text-field--line-height, 1.4) !default; +$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; +$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default; +$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; +$border-width: props.def( + --o-text-field--border-width, + props.get(core.$border-width--thin) +) !default; +$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default; $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; -$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; +$focus--border-width: props.def( + --o-text-field--focus--border-width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-text-field--key-focus--border-width, + props.get(core.$key-focus--outline-width) +) !default; -$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default; -$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default; -$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default; +$bg-color: props.def( + --o-text-field--bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; +$placeholder-color: props.def( + --o-text-field--placeholder-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$text-color: props.def( + --o-text-field--text-color, + props.get(core.$theme, --text), + "color" +) !default; +$border-color: props.def( + --o-text-field--border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; -$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$hover--border-color: props.def( + --o-text-field--hover--border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$focus--border-color: props.def( + --o-text-field--focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; -$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--border-color: props.def( + --o-text-field--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-text-field--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default; +$error--border-color: props.def( + --o-text-field--error--border-color, + props.get(core.$theme, --negative, --700), + "color" +) !default; -$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default; +$error--hover--border-color: props.def( + --o-text-field--error--hover--border-color, + props.get(core.$theme, --negative, --900), + "color" +) !default; -$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default; +$error--focus--border-color: props.def( + --o-text-field--error--focus--border-color, + props.get(core.$theme, --negative, --900), + "color" +) !default; -$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default; +$disabled--bg-color: props.def( + --o-text-field--disabled--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$disabled--placeholder-color: props.def( + --o-text-field--disabled--placeholder-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--text-color: props.def( + --o-text-field--disabled--text-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--border-color: props.def( + --o-text-field--disabled--border-color, + props.get(core.$theme, --border-mute), + "color" +) !default; diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 9925dd0..c7a9791 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -1,65 +1,66 @@ -@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 'thumbnail.vars'; -@use 'thumbnail.vars' as vars; +@forward "thumbnail.vars"; +@use "thumbnail.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('thumbnail') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - overflow: hidden; - outline: props.get(vars.$border-color) solid props.get(vars.$border-width); + @include bem.object("thumbnail") { + position: relative; + display: block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + overflow: hidden; + outline: props.get(vars.$border-color) solid props.get(vars.$border-width); outline-offset: calc(-1 * props.get(vars.$border-width)); - border-radius: props.get(vars.$rounding); + border-radius: props.get(vars.$rounding); &:hover, &:active, &:focus-visible { outline-color: props.get(vars.$hover--border-color); - opacity: 1; + opacity: 1; } - @include bem.elem('image') { - position: absolute; - inset-block-start: 0; + @include bem.elem("image") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - display: block; - inline-size: 100%; - block-size: 100%; - object-fit: cover; - object-position: center center; + display: block; + inline-size: 100%; + block-size: 100%; + object-fit: cover; + object-position: center center; } - @include bem.elem('icon') { - position: absolute; - inset-block-start: 50%; + @include bem.elem("icon") { + position: absolute; + inset-block-start: 50%; inset-inline-start: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } &:focus-visible { $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); - margin: $focus-border-offset; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + margin: $focus-border-offset; + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); outline-offset: 0; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--outline-width) + + props.get(vars.$key-focus--border-width) + ) props.get(vars.$key-focus--outline-color); } @@ -73,18 +74,18 @@ outline-color: props.get(vars.$static-themes, $theme, --hover, --border); } - @include bem.is('selected') { + @include bem.is("selected") { border-color: props.get(vars.$static-themes, $theme, --selected, --border); } &:focus-visible { outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); - border-color: transparent; - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + border-color: transparent; + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--outline-width) + + props.get(vars.$key-focus--border-width) + ) props.get(vars.$static-themes, $theme, --key-focus, --outline); } } diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index a5625fc..737a626 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -1,51 +1,85 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; -$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; -$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; +$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; +$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; -$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; +$selected--border-width: props.def( + --o-thumbnail--selected--border-width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-thumbnail--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-thumbnail--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-thumbnail--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; +$border-color: props.def( + --o-thumbnail--border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; -$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$hover--border-color: props.def( + --o-thumbnail--hover--border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; +$selected--border-color: props.def( + --o-thumbnail--selected--border-color, + props.get(core.$theme, --heading), + "color" +) !default; -$key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--border-color: props.def( + --o-thumbnail--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-thumbnail--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default; +$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), "md") !default; -$static-themes: props.def(--o-thumbnail, (), 'color'); +$static-themes: props.def(--o-thumbnail, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $thumbnail-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $thumbnail-theme: ( - --border: props.get(core.$transparent-colors, $theme, --400), - - --hover: ( - --border: props.get(core.$transparent-colors, $theme, --500), - ), + $static-themes: props.merge( + $static-themes, + ( + $thumbnail-theme: ( + --border: props.get(core.$transparent-colors, $theme, --400), + --hover: ( + --border: props.get(core.$transparent-colors, $theme, --500), + ), - --selected: ( - --border: props.get(core.$transparent-colors, $theme, --900), - ), + --selected: ( + --border: props.get(core.$transparent-colors, $theme, --900), + ), - --key-focus: ( - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), - ), + --key-focus: ( + --border: props.get(core.$transparent-colors, $theme, --900), + --outline: props.get(core.$transparent-colors, $theme, --300), + ), + ), ) - )); + ); } -- cgit v1.3.1