From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- .stylelintrc.json | 2 +- src/_apca.scss | 172 ++++---- src/_config.defaults.scss | 350 ++++++++--------- src/_config.scss | 8 +- src/_core.scss | 58 +-- src/_core.vars.scss | 94 ++--- src/_functions.scss | 86 ++-- src/_iro-design.scss | 24 +- src/_layers.scss | 2 +- src/_mixins.scss | 42 +- src/_props.scss | 62 +-- src/_themes.scss | 104 ++--- src/_utils.scss | 668 ++++++++++++++++---------------- src/layouts/_button-group.scss | 64 +-- src/layouts/_button-group.vars.scss | 8 +- src/layouts/_card-list.scss | 294 +++++++------- src/layouts/_container.scss | 30 +- src/layouts/_container.vars.scss | 6 +- src/layouts/_flex.scss | 24 +- src/layouts/_form.scss | 88 ++--- src/layouts/_media.scss | 62 +-- src/layouts/_media.vars.scss | 8 +- src/layouts/_overflow.scss | 8 +- src/layouts/_split-view.scss | 158 ++++---- src/objects/_alert.scss | 54 +-- src/objects/_alert.vars.scss | 22 +- src/objects/_avatar.scss | 220 +++++------ src/objects/_avatar.vars.scss | 12 +- src/objects/_backdrop.scss | 24 +- src/objects/_button.scss | 532 ++++++++++++------------- src/objects/_button.vars.scss | 598 ++++++++++++++-------------- src/objects/_card.scss | 530 ++++++++++++------------- src/objects/_checkbox.scss | 422 ++++++++++---------- src/objects/_divider.scss | 372 +++++++++--------- src/objects/_divider.vars.scss | 60 +-- src/objects/_emoji.scss | 78 ++-- src/objects/_emoji.vars.scss | 6 +- src/objects/_field-label.scss | 110 +++--- src/objects/_figure.scss | 28 +- src/objects/_heading.scss | 90 ++--- src/objects/_heading.vars.scss | 24 +- src/objects/_icon.scss | 26 +- src/objects/_lightbox.scss | 244 ++++++------ src/objects/_lightbox.vars.scss | 12 +- src/objects/_menu.scss | 182 ++++----- src/objects/_navbar.scss | 358 ++++++++--------- src/objects/_navbar.vars.scss | 102 ++--- src/objects/_palette.scss | 90 ++--- src/objects/_placeholders.scss | 22 +- src/objects/_popover.scss | 62 +-- src/objects/_radio.scss | 248 ++++++------ src/objects/_side-nav.scss | 134 +++---- src/objects/_status-indicator.scss | 26 +- src/objects/_status-indicator.vars.scss | 18 +- src/objects/_switch.scss | 338 ++++++++-------- src/objects/_tabbar.scss | 174 ++++----- src/objects/_table.scss | 232 +++++------ src/objects/_text-field.scss | 336 ++++++++-------- src/objects/_thumbnail.scss | 160 ++++---- src/objects/_thumbnail.vars.scss | 34 +- src/scopes/_blockquotes.scss | 28 +- src/scopes/_body.scss | 98 ++--- src/scopes/_code.scss | 54 +-- src/scopes/_figures.scss | 26 +- src/scopes/_headings.scss | 112 +++--- src/scopes/_implicit.scss | 332 ++++++++-------- src/scopes/_links.scss | 186 ++++----- src/scopes/_links.vars.scss | 36 +- src/scopes/_lists.scss | 98 ++--- src/scopes/_tables.scss | 156 ++++---- 70 files changed, 4764 insertions(+), 4764 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index c00dafa..0b9d42a 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,7 +4,7 @@ "stylelint-config-recess-order" ], "rules": { - "@stylistic/indentation": 4, + "@stylistic/indentation": "tab", "@stylistic/number-leading-zero": "never", "@stylistic/declaration-colon-space-after": null, "max-nesting-depth": 7, diff --git a/src/_apca.scss b/src/_apca.scss index c65f46e..c5da4a0 100644 --- a/src/_apca.scss +++ b/src/_apca.scss @@ -7,121 +7,121 @@ @use 'sass:math'; $SA98G: ( - mainTRC: 2.4, - - sRco: .2126729, - sGco: .7151522, - sBco: .072175, - - normBG: .56, - normTXT: .57, - revTXT: .62, - revBG: .65, - - blkThrs: .022, - blkClmp: 1.414, - scaleBoW: 1.14, - scaleWoB: 1.14, - loBoWoffset: .027, - loWoBoffset: .027, - deltaYmin: .0005, - loClip: .0001, - - mFactor: 1.9468554433171, - mOffsetIn: .0387393816571401, - mExpAdj: .283343396420869, - mOffsetOut: .312865795870758, + mainTRC: 2.4, + + sRco: .2126729, + sGco: .7151522, + sBco: .072175, + + normBG: .56, + normTXT: .57, + revTXT: .62, + revBG: .65, + + blkThrs: .022, + blkClmp: 1.414, + scaleBoW: 1.14, + scaleWoB: 1.14, + loBoWoffset: .027, + loWoBoffset: .027, + deltaYmin: .0005, + loClip: .0001, + + mFactor: 1.9468554433171, + mOffsetIn: .0387393816571401, + mExpAdj: .283343396420869, + mOffsetOut: .312865795870758, ); @function sRGB_to_Y($color) { - $rgb: color.to-space($color, rgb); + $rgb: color.to-space($color, rgb); - @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + - map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + - map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); + @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); } @function Y_to_sRGB($y) { - $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); - @return rgb($c, $c, $c); + $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); + @return rgb($c, $c, $c); } @function contrast($txtY, $bgY) { - /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */ - $icp: .0 1.1; + /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */ + $icp: .0 1.1; - @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { - @return 0; - } + @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { + @return 0; + } - @if $txtY <= map.get($SA98G, blkThrs) { - $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); - } - @if $bgY <= map.get($SA98G, blkThrs) { - $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); - } + @if $txtY <= map.get($SA98G, blkThrs) { + $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); + } + @if $bgY <= map.get($SA98G, blkThrs) { + $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); + } - @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { - @return 0; - } + @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { + @return 0; + } - $outputContrast: 0; + $outputContrast: 0; - @if $bgY > $txtY { - $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); + @if $bgY > $txtY { + $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); - @if $SAPC >= map.get($SA98G, loClip) { - $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); - } - } @else { - $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); + @if $SAPC >= map.get($SA98G, loClip) { + $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); + } + } @else { + $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); - @if $SAPC <= -1 * map.get($SA98G, loClip) { - $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); - } - } + @if $SAPC <= -1 * map.get($SA98G, loClip) { + $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); + } + } - @return $outputContrast * 100; + @return $outputContrast * 100; } @function reverse($contrast, $knownY, $knownType: 'bg') { - $unknownY: $knownY; + $unknownY: $knownY; - $knownExp: 0; - $unknownExp: 0; + $knownExp: 0; + $unknownExp: 0; - $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); - $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); + $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); + $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); - $contrast: math.div($contrast * .01 + $offset, $scale); + $contrast: math.div($contrast * .01 + $offset, $scale); - @if $knownY <= map.get($SA98G, blkThrs) { - $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); - } + @if $knownY <= map.get($SA98G, blkThrs) { + $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); + } - @if $knownType == 'bg' { - $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); - $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); - $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); - } @else { - $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); - $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); - $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); - } + @if $knownType == 'bg' { + $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); + } @else { + $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); + } - @if '#{$unknownY}' == '#{math.sqrt(-1)}' { - @return false; - } + @if '#{$unknownY}' == '#{math.sqrt(-1)}' { + @return false; + } - @if $unknownY > 1.06 or $unknownY < 0 { - @return false; - } + @if $unknownY > 1.06 or $unknownY < 0 { + @return false; + } - @if $unknownY <= map.get($SA98G, blkThrs) { - $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); - } + @if $unknownY <= map.get($SA98G, blkThrs) { + $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); + } - $unknownY: math.max(math.min($unknownY, 1), 0); + $unknownY: math.max(math.min($unknownY, 1), 0); - @return $unknownY; + @return $unknownY; } diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index 799ee47..861b600 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss @@ -4,194 +4,194 @@ @use 'iro-sass/src/easing' as easing; $static-colors: ( - --base: hsl(0, 0%, 98%), - - --levels: ( - --100: math.div(0, 12) * 110 - 10, - --200: math.div(1, 12) * 110 - 10, - --300: math.div(2, 12) * 110 - 10, - --400: math.div(3, 12) * 110 - 10, - --500: math.div(4, 12) * 110 - 10, - --600: math.div(5, 12) * 110 - 10, - --700: math.div(6, 12) * 110 - 10, - --800: math.div(7, 12) * 110 - 10, - --900: math.div(8, 12) * 110 - 10, - --1000: math.div(9, 12) * 110 - 10, - --1100: math.div(10, 12) * 110 - 10, - --1200: math.div(11, 12) * 110 - 10, - --1300: math.div(12, 12) * 110 - 10, - ), - - --palettes: ( - --blue: oklch(56% .14 275.25), - --purple: oklch(56% .14 305.58), - --red: oklch(56% .14 14.69), - --green: oklch(56% .14 150.48), - --yellow: oklch(56% .14 84.08), - ), - - --transparents: ( - --100: 0, - --200: .1, - --300: .25, - --400: .4, - --500: .55, - --600: .7, - --700: .8, - --800: .9, - --900: 1, - ), + --base: hsl(0, 0%, 98%), + + --levels: ( + --100: math.div(0, 12) * 110 - 10, + --200: math.div(1, 12) * 110 - 10, + --300: math.div(2, 12) * 110 - 10, + --400: math.div(3, 12) * 110 - 10, + --500: math.div(4, 12) * 110 - 10, + --600: math.div(5, 12) * 110 - 10, + --700: math.div(6, 12) * 110 - 10, + --800: math.div(7, 12) * 110 - 10, + --900: math.div(8, 12) * 110 - 10, + --1000: math.div(9, 12) * 110 - 10, + --1100: math.div(10, 12) * 110 - 10, + --1200: math.div(11, 12) * 110 - 10, + --1300: math.div(12, 12) * 110 - 10, + ), + + --palettes: ( + --blue: oklch(56% .14 275.25), + --purple: oklch(56% .14 305.58), + --red: oklch(56% .14 14.69), + --green: oklch(56% .14 150.48), + --yellow: oklch(56% .14 84.08), + ), + + --transparents: ( + --100: 0, + --200: .1, + --300: .25, + --400: .4, + --500: .55, + --600: .7, + --700: .8, + --800: .9, + --900: 1, + ), ); $semantic-colors-common: ( - --accent: --blue, - --accent-static: --blue-static, - --positive: --green, - --positive-static: --green-static, - --negative: --red, - --negative-static: --red-static, - --warning: --yellow, - --warning-static: --yellow-static, - - --focus-raw: --accent, - --focus-static: --accent-static, - - --border-mute: --base --200, - --border: --base --300, - --border-strong: --base --400, - - --text-disabled: --base --500, - --text-mute-more: --base --600, - --text-mute: --base --700, - --text: --base --800, - --heading: --base --900, - - --focus: ( - --outline: --focus-raw --400, - --border-mute: --focus-raw --900, - --border: --focus-raw --1000, - --border-text: --focus-raw --1000-text, - --border-strong: --focus-raw --1100, - --text: --focus-raw --1100, - ), + --accent: --blue, + --accent-static: --blue-static, + --positive: --green, + --positive-static: --green-static, + --negative: --red, + --negative-static: --red-static, + --warning: --yellow, + --warning-static: --yellow-static, + + --focus-raw: --accent, + --focus-static: --accent-static, + + --border-mute: --base --200, + --border: --base --300, + --border-strong: --base --400, + + --text-disabled: --base --500, + --text-mute-more: --base --600, + --text-mute: --base --700, + --text: --base --800, + --heading: --base --900, + + --focus: ( + --outline: --focus-raw --400, + --border-mute: --focus-raw --900, + --border: --focus-raw --1000, + --border-text: --focus-raw --1000-text, + --border-strong: --focus-raw --1100, + --text: --focus-raw --1100, + ), ); $theme-light: ( - --levels: ( - --grays: ( - --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))), - --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))), - --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))), + --levels: ( + --grays: ( + --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))), + --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))), + --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))), - --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))), - --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))), - --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))), + --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))), + --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))), + --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))), - --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))), - --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))), - --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))), - --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))), - --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))), - ), - - --colors: ( - --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), - --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), - --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), - --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), - --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), - --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), - --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), - --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), - --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), - --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), - --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), - --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), - --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), - ), - ), + --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))), + --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))), + --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))), + --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))), + --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))), + ), + + --colors: ( + --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), + ), + ), - --palettes: ( - --base: hsl(260, 70%, 98%) --grays, - --blue: oklch(56% .16 275.25) --colors, - --purple: oklch(56% .16 305.58) --colors, - --red: oklch(56% .16 14.69) --colors, - --green: oklch(56% .16 150.48) --colors, - --yellow: oklch(56% .16 84.08) --colors, - ), - - --semantic: map.merge($semantic-colors-common, ( - --bg-l2: --base --50, - --bg-l1: --base --100, - --bg-base: --base --200, - - --box: ( - --border: --base --200, - --border-strong: --base --300, - ), - )), - - --constants: ( - --shadow: rgba(#000, .1), - ), + --palettes: ( + --base: hsl(260, 70%, 98%) --grays, + --blue: oklch(56% .16 275.25) --colors, + --purple: oklch(56% .16 305.58) --colors, + --red: oklch(56% .16 14.69) --colors, + --green: oklch(56% .16 150.48) --colors, + --yellow: oklch(56% .16 84.08) --colors, + ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-l2: --base --50, + --bg-l1: --base --100, + --bg-base: --base --200, + + --box: ( + --border: --base --200, + --border-strong: --base --300, + ), + )), + + --constants: ( + --shadow: rgba(#000, .1), + ), ); $theme-dark: ( - --levels: ( - --grays: ( - --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), - --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))), - --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), + --levels: ( + --grays: ( + --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), + --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))), + --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), - --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), - --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))), - --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))), + --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), + --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))), + --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))), - --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))), - --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))), - --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))), - --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))), - --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))), - ), - - --colors: ( - --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))), - --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))), - --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))), - --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))), - --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))), - --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))), - --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))), - --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))), - --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))), - --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))), - --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))), - --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))), - --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))), - ), - ), + --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))), + --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))), + --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))), + --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))), + --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))), + ), + + --colors: ( + --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))), + --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))), + --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))), + --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))), + --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))), + --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))), + --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))), + --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))), + --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))), + --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))), + --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))), + --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))), + --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))), + ), + ), - --palettes: ( - --base: hsl(257, 7%, 20%) --grays, - --blue: oklch(56% .16 275.25) --colors, - --purple: oklch(56% .16 305.58) --colors, - --red: oklch(56% .16 14.69) --colors, - --green: oklch(56% .16 150.48) --colors, - --yellow: oklch(56% .16 84.08) --colors, - ), - - --semantic: map.merge($semantic-colors-common, ( - --bg-base: --base --50, - --bg-l1: --base --75, - --bg-l2: --base --100, - - --box: ( - --border: --base --100, - --border-strong: --base --100, - ), - )), - - --constants: ( - --shadow: rgba(#000, .35), - ), + --palettes: ( + --base: hsl(257, 7%, 20%) --grays, + --blue: oklch(56% .16 275.25) --colors, + --purple: oklch(56% .16 305.58) --colors, + --red: oklch(56% .16 14.69) --colors, + --green: oklch(56% .16 150.48) --colors, + --yellow: oklch(56% .16 84.08) --colors, + ), + + --semantic: map.merge($semantic-colors-common, ( + --bg-base: --base --50, + --bg-l1: --base --75, + --bg-l2: --base --100, + + --box: ( + --border: --base --100, + --border-strong: --base --100, + ), + )), + + --constants: ( + --shadow: rgba(#000, .35), + ), ); diff --git a/src/_config.scss b/src/_config.scss index 25c0adb..764d953 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -18,10 +18,10 @@ $theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default; $themes-override: () !default; $themes: map.deep-merge(( - --main: ( - light: $theme-light, - dark: $theme-dark, - ), + --main: ( + light: $theme-light, + dark: $theme-dark, + ), ), $themes-override) !default; $theme-default: list.nth(map.keys($themes), 1) !default; diff --git a/src/_core.scss b/src/_core.scss index 2eb04fc..7be4b0d 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -9,37 +9,37 @@ @forward 'core.vars'; @mixin styles { - @each $theme-name, $theme in vars.$themes { - @if $theme-name == config.$theme-default { - :root { - @include props.materialize(map.values(meta.module-variables('vars'))); + @each $theme-name, $theme in vars.$themes { + @if $theme-name == config.$theme-default { + :root { + @include props.materialize(map.values(meta.module-variables('vars'))); - @if map.has-key($theme, 'dark') { - @media (prefers-color-scheme: dark) { - @include props.materialize(map.get($theme, 'dark')); - } - } - } + @if map.has-key($theme, 'dark') { + @media (prefers-color-scheme: dark) { + @include props.materialize(map.get($theme, 'dark')); + } + } + } - @if map.has-key($theme, 'dark') and config.$explicit-dark-theme { - @include bem.theme('dark') { - @include props.materialize(map.values(meta.module-variables('vars'))); - @include props.materialize(map.get($theme, 'dark')); - } - } - } @else { - @include bem.theme(string.slice($theme-name, 3)) { - @include props.materialize(map.get($theme, 'light')); + @if map.has-key($theme, 'dark') and config.$explicit-dark-theme { + @include bem.theme('dark') { + @include props.materialize(map.values(meta.module-variables('vars'))); + @include props.materialize(map.get($theme, 'dark')); + } + } + } @else { + @include bem.theme(string.slice($theme-name, 3)) { + @include props.materialize(map.get($theme, 'light')); - color: props.get(vars.$theme, --text); - background-color: props.get(vars.$theme, --bg-base); + color: props.get(vars.$theme, --text); + background-color: props.get(vars.$theme, --bg-base); - @if map.has-key($theme, 'dark') { - @media (prefers-color-scheme: dark) { - @include props.materialize(map.get($theme, 'dark')); - } - } - } - } - } + @if map.has-key($theme, 'dark') { + @media (prefers-color-scheme: dark) { + @include props.materialize(map.get($theme, 'dark')); + } + } + } + } + } } diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 8c0b74f..f7a9ebc 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -116,8 +116,8 @@ $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default; $-static-colors: (); @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { - $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base)); - $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); + $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base)); + $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); } // @@ -125,11 +125,11 @@ $-static-colors: (); $transparent-colors: props.def(--transparent-colors, (), 'color'); @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { - $color: list.nth($palette, 1); - $text: list.nth($palette, 2); + $color: list.nth($palette, 1); + $text: list.nth($palette, 2); - $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); - $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); + $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); + $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); } // @@ -137,47 +137,47 @@ $transparent-colors: props.def(--transparent-colors, (), 'color'); $themes: (); @each $theme-name, $theme in config.$themes { - @each $variant-name, $variant in $theme { - @if $variant != null { - $compiled: props.def(--colors, (), 'color'); - - @each $palette-name, $palette in $-static-colors { - $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); - } - - @each $palette-name, $palette in map.get($variant, --palettes) { - $base-color: list.nth($palette, 1); - $levels: list.nth($palette, 2); - - $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1)); - $compiled: props.merge($compiled, ( $palette-name: $palette )); - } - - @each $color, $value in map.get($variant, --constants) { - $compiled: props.merge($compiled, ( $color: $value )); - } - - @each $color, $ref in map.get($variant, --semantic) { - $res: (); - - @if meta.type-of($ref) == 'map' { - @each $key, $r in $ref { - $re1: list.nth($r, 1); - $re2: functions.list-slice($r, 2); - $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); - } - } @else { - $ref1: list.nth($ref, 1); - $ref2: functions.list-slice($ref, 2); - $res: props.get($compiled, $ref1, $ref2...); - } - - $compiled: props.merge($compiled, ( $color: $res )); - } - - $themes: map.set($themes, $theme-name, $variant-name, $compiled); - } - } + @each $variant-name, $variant in $theme { + @if $variant != null { + $compiled: props.def(--colors, (), 'color'); + + @each $palette-name, $palette in $-static-colors { + $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); + } + + @each $palette-name, $palette in map.get($variant, --palettes) { + $base-color: list.nth($palette, 1); + $levels: list.nth($palette, 2); + + $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1)); + $compiled: props.merge($compiled, ( $palette-name: $palette )); + } + + @each $color, $value in map.get($variant, --constants) { + $compiled: props.merge($compiled, ( $color: $value )); + } + + @each $color, $ref in map.get($variant, --semantic) { + $res: (); + + @if meta.type-of($ref) == 'map' { + @each $key, $r in $ref { + $re1: list.nth($r, 1); + $re2: functions.list-slice($r, 2); + $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); + } + } @else { + $ref1: list.nth($ref, 1); + $ref2: functions.list-slice($ref, 2); + $res: props.get($compiled, $ref1, $ref2...); + } + + $compiled: props.merge($compiled, ( $color: $res )); + } + + $themes: map.set($themes, $theme-name, $variant-name, $compiled); + } + } } $theme: map.get($themes, config.$theme-default, light) !default; diff --git a/src/_functions.scss b/src/_functions.scss index b41609e..ec1f9d8 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -8,63 +8,63 @@ @use 'apca'; @function palette($base-color, $levels, $ref-color: $base-color) { - $base-lch: color.to-space($base-color, oklch); - $ref-lch: color.to-space($ref-color, oklch); + $base-lch: color.to-space($base-color, oklch); + $ref-lch: color.to-space($ref-color, oklch); - $ref-l: color.channel($ref-lch, 'lightness'); - $ref-y: apca.sRGB_to_Y($ref-lch); + $ref-l: color.channel($ref-lch, 'lightness'); + $ref-y: apca.sRGB_to_Y($ref-lch); - $black-y: apca.sRGB_to_Y(#000); - $white-y: apca.sRGB_to_Y(#fff); + $black-y: apca.sRGB_to_Y(#000); + $white-y: apca.sRGB_to_Y(#fff); - $palette: (); + $palette: (); - @each $key, $level in $levels { - $color: list.nth($level, 1); - $y: 0; - $c: 1; - $h: 0deg; + @each $key, $level in $levels { + $color: list.nth($level, 1); + $y: 0; + $c: 1; + $h: 0deg; - @if list.length($level) > 1 { - $c: list.nth($level, 2); - } - @if list.length($level) > 2 { - $h: list.nth($level, 3); - } + @if list.length($level) > 1 { + $c: list.nth($level, 2); + } + @if list.length($level) > 2 { + $h: list.nth($level, 3); + } - @if meta.type-of($color) != 'color' { - $y: apca.reverse($color, $ref-y); - $l: color.channel($base-lch, 'lightness'); + @if meta.type-of($color) != 'color' { + $y: apca.reverse($color, $ref-y); + $l: color.channel($base-lch, 'lightness'); - @if $y != false { - $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); - } @else { - $y: $ref-y; - } + @if $y != false { + $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); + } @else { + $y: $ref-y; + } - $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue'))); - } @else { - $y: apca.sRGB_to_Y($color); - } + $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue'))); + } @else { + $y: apca.sRGB_to_Y($color); + } - $contrast-black: apca.contrast($black-y, $y); - $contrast-white: apca.contrast($white-y, $y); + $contrast-black: apca.contrast($black-y, $y); + $contrast-white: apca.contrast($white-y, $y); - $palette: map.set($palette, $key, $color); - $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); - } + $palette: map.set($palette, $key, $color); + $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); + } - @return $palette; + @return $palette; } @function transparent-palette($color, $text, $alphas) { - $palette: ( - --text: $text, - ); + $palette: ( + --text: $text, + ); - @each $key, $alpha in $alphas { - $palette: map.set($palette, $key, rgba($color, $alpha)); - } + @each $key, $alpha in $alphas { + $palette: map.set($palette, $key, rgba($color, $alpha)); + } - @return $palette; + @return $palette; } diff --git a/src/_iro-design.scss b/src/_iro-design.scss index ede8d34..22e50c0 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss @@ -1,22 +1,22 @@ $breakpoints: ( - lg: 1340px, - md: 900px, - sm: 620px, - xs: 400px, + lg: 1340px, + md: 900px, + sm: 620px, + xs: 400px, ) !default; @use 'iro-sass/src/responsive' with ( - $named-viewports: $breakpoints + $named-viewports: $breakpoints ); @forward 'include-media/dist/include-media' as media--* with ( - $breakpoints: $breakpoints, - $unit-intervals: ( - 'px': 1, - 'em': .01, - 'rem': .01, - '': 0 - ) !default, + $breakpoints: $breakpoints, + $unit-intervals: ( + 'px': 1, + 'em': .01, + 'rem': .01, + '': 0 + ) !default, ); @forward 'config.defaults' as config-defaults--*; diff --git a/src/_layers.scss b/src/_layers.scss index cc3bb50..2a80190 100644 --- a/src/_layers.scss +++ b/src/_layers.scss @@ -1,3 +1,3 @@ @mixin styles { - @layer scope, theme, object, layout, component, utility; + @layer scope, theme, object, layout, component, utility; } diff --git a/src/_mixins.scss b/src/_mixins.scss index 49d3b6f..8899778 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -2,37 +2,37 @@ @use 'functions' as fn; @mixin set-font($basis, $values: ()) { - $values: fn.set-font($basis, $values); + $values: fn.set-font($basis, $values); - @each $prop, $value in $values { - @if $value != null { - #{$prop}: $value; - } - } + @each $prop, $value in $values { + @if $value != null { + #{$prop}: $value; + } + } } @mixin heading-strong($size) { - font-size: fn.global-dim(list.join(--heading, $size)); - color: fn.global-color(--heading); + font-size: fn.global-dim(list.join(--heading, $size)); + color: fn.global-color(--heading); } @mixin heading-medium($size) { - @include set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(list.join(--heading, $size)), - --weight: bold - )); + @include set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(list.join(--heading, $size)), + --weight: bold + )); - color: fn.global-color(--heading); + color: fn.global-color(--heading); } @mixin heading-faint($size) { - @include set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(list.join(--heading, $size)), - --weight: 500, - --spacing: 1px - )); + @include set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(list.join(--heading, $size)), + --weight: 500, + --spacing: 1px + )); - color: fn.global-color(--text-mute); + color: fn.global-color(--text-mute); } diff --git a/src/_props.scss b/src/_props.scss index 5590aed..0b2306d 100644 --- a/src/_props.scss +++ b/src/_props.scss @@ -8,41 +8,41 @@ @use 'iro-sass/src/props'; @mixin materialize-at-root($ref) { - @if meta.type-of($ref) == 'map' { - $ref: map.values($ref); - } + @if meta.type-of($ref) == 'map' { + $ref: map.values($ref); + } - :root { - @include props.materialize($ref, null); - @include props.materialize($ref, 'color'); + :root { + @include props.materialize($ref, null); + @include props.materialize($ref, 'color'); - @each $breakpoint in map.keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { - @include props.materialize($ref, $breakpoint); - } - } + @each $breakpoint in map.keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include props.materialize($ref, $breakpoint); + } + } - @media (prefers-color-scheme: dark) { - @include props.materialize($ref, 'dark'); - } - } + @media (prefers-color-scheme: dark) { + @include props.materialize($ref, 'dark'); + } + } - @if config.$explicit-dark-theme { - @include bem.theme('dark') { - @include props.materialize($ref, 'color'); - @include props.materialize($ref, 'dark'); - } - } + @if config.$explicit-dark-theme { + @include bem.theme('dark') { + @include props.materialize($ref, 'color'); + @include props.materialize($ref, 'dark'); + } + } - @each $theme-name in map.keys(config.$themes) { - @if $theme-name != config.$theme-default { - @include bem.theme(string.slice($theme-name, 3)) { - @include props.materialize($ref, 'color'); + @each $theme-name in map.keys(config.$themes) { + @if $theme-name != config.$theme-default { + @include bem.theme(string.slice($theme-name, 3)) { + @include props.materialize($ref, 'color'); - @media (prefers-color-scheme: dark) { - @include props.materialize($ref, 'dark'); - } - } - } - } + @media (prefers-color-scheme: dark) { + @include props.materialize($ref, 'dark'); + } + } + } + } } diff --git a/src/_themes.scss b/src/_themes.scss index caf1e80..fe5a0cb 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -8,67 +8,67 @@ @forward 'core.vars'; @mixin styles { - @include bem.theme('base') { - background-color: props.get(vars.$theme, --bg-base); + @include bem.theme('base') { + background-color: props.get(vars.$theme, --bg-base); - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - background-color: props.get(vars.$theme, --bg-base); - } - } + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --bg-base); + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - background-color: props.get(vars.$theme, --bg-base); - } - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --bg-base); + } + } + } - @include bem.theme('l1') { - background-color: props.get(vars.$theme, --bg-l1); + @include bem.theme('l1') { + background-color: props.get(vars.$theme, --bg-l1); - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - background-color: props.get(vars.$theme, --bg-l1); - } - } + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --bg-l1); + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - background-color: props.get(vars.$theme, --bg-l1); - } - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --bg-l1); + } + } + } - @include bem.theme('l2') { - background-color: props.get(vars.$theme, --bg-l2); + @include bem.theme('l2') { + background-color: props.get(vars.$theme, --bg-l2); - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - background-color: props.get(vars.$theme, --bg-l2); - } - } + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --bg-l2); + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - background-color: props.get(vars.$theme, --bg-l2); - } - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --bg-l2); + } + } + } - @include bem.theme('50') { - background-color: props.get(vars.$theme, --base, --50); + @include bem.theme('50') { + background-color: props.get(vars.$theme, --base, --50); - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - background-color: props.get(vars.$theme, --base, --50); - } - } + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + background-color: props.get(vars.$theme, --base, --50); + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - background-color: props.get(vars.$theme, --base, --50); - } - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + background-color: props.get(vars.$theme, --base, --50); + } + } + } } diff --git a/src/_utils.scss b/src/_utils.scss index 371a357..3dae3b6 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -9,372 +9,372 @@ /* stylelint-disable-next-line scss/dollar-variable-pattern */ $-dirs: ( - '': '', - 'b': '-block', - 'bs': '-block-start', - 'be': '-block-end', - 'i': '-inline', - 'is': '-inline-start', - 'ie': '-inline-end', + '': '', + 'b': '-block', + 'bs': '-block-start', + 'be': '-block-end', + 'i': '-inline', + 'is': '-inline-start', + 'ie': '-inline-end', ) !default; /* stylelint-disable-next-line scss/dollar-variable-pattern */ $-sizes: ( - 0: vars.$size--0, - 10: vars.$size--10, - 50: vars.$size--50, - 75: vars.$size--75, - 100: vars.$size--100, - 125: vars.$size--125, - 200: vars.$size--200, - 400: vars.$size--400, - 700: vars.$size--700, - 800: vars.$size--800, + 0: vars.$size--0, + 10: vars.$size--10, + 50: vars.$size--50, + 75: vars.$size--75, + 100: vars.$size--100, + 125: vars.$size--125, + 200: vars.$size--200, + 400: vars.$size--400, + 700: vars.$size--700, + 800: vars.$size--800, ) !default; $-font-sizes: ( - 50: vars.$font-size--50, - 75: vars.$font-size--75, - 100: vars.$font-size--100, - 150: vars.$font-size--150, - 200: vars.$font-size--200, - 300: vars.$font-size--300, + 50: vars.$font-size--50, + 75: vars.$font-size--75, + 100: vars.$font-size--100, + 150: vars.$font-size--150, + 200: vars.$font-size--200, + 300: vars.$font-size--300, ) !default; @mixin styles { - @include bem.utility('d-block') { - display: block; - } - - @include bem.utility('d-inline-block') { - display: inline-block; - } - - @include bem.utility('d-contents') { - display: contents; - } - - @include bem.utility('d-flex') { - display: flex; - } - - @include bem.utility('td-none') { - text-decoration: none; - } - - @include bem.utility('d-none') { - display: none; - - @each $breakpoint in map.keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { - @include bem.suffix('#{$breakpoint}-lo') { - display: none; - } - } - - @include media.media('>#{$breakpoint}') { - @include bem.suffix('#{$breakpoint}-hi') { - display: none; - } - } - } - - @include bem.at-theme('js') { - @include bem.suffix('js') { - display: none; - } - } - - @include bem.at-theme('no-js') { - @include bem.suffix('no-js') { - display: none; - } - } - - @include bem.suffix('empty') { - &:empty { - display: none; - } - } - } - - @include bem.utility('va-top') { - vertical-align: top; - } - - @include bem.utility('va-baseline') { - vertical-align: baseline; - } - - @include bem.utility('va-middle') { - vertical-align: middle; - } - - @include bem.utility('va-bottom') { - vertical-align: bottom; - } - - @include bem.utility('ta-start') { - text-align: start; - } - - @include bem.utility('ta-end') { - text-align: end; - } - - @include bem.utility('ta-center') { - text-align: center; - } - - @include bem.utility('fw-normal') { - font-weight: normal; - } - - @include bem.utility('ai-center') { - align-items: center; - } - - @include bem.utility('ai-start') { - align-items: flex-start; - } - - @include bem.utility('ai-end') { - align-items: flex-end; - } - - @include bem.utility('ac-center') { - align-content: center; - } - - @include bem.utility('jc-center') { - justify-content: center; - } - - @include bem.utility('jc-start') { - justify-content: flex-start; - } - - @include bem.utility('jc-end') { - justify-content: flex-end; - } - - @include bem.utility('tt-upper') { - text-transform: uppercase; - } - - @include bem.utility('tt-lower') { - text-transform: lowercase; - } - - @include bem.utility('c-heading') { - color: props.get(vars.$theme, --heading); - - @each $theme in map.keys(props.get(vars.$transparent-colors)) { - $theme-name: static-#{string.slice($theme, 3)}; + @include bem.utility('d-block') { + display: block; + } + + @include bem.utility('d-inline-block') { + display: inline-block; + } + + @include bem.utility('d-contents') { + display: contents; + } + + @include bem.utility('d-flex') { + display: flex; + } + + @include bem.utility('td-none') { + text-decoration: none; + } + + @include bem.utility('d-none') { + display: none; + + @each $breakpoint in map.keys(media.$breakpoints) { + @include media.media('<=#{$breakpoint}') { + @include bem.suffix('#{$breakpoint}-lo') { + display: none; + } + } + + @include media.media('>#{$breakpoint}') { + @include bem.suffix('#{$breakpoint}-hi') { + display: none; + } + } + } + + @include bem.at-theme('js') { + @include bem.suffix('js') { + display: none; + } + } + + @include bem.at-theme('no-js') { + @include bem.suffix('no-js') { + display: none; + } + } + + @include bem.suffix('empty') { + &:empty { + display: none; + } + } + } + + @include bem.utility('va-top') { + vertical-align: top; + } + + @include bem.utility('va-baseline') { + vertical-align: baseline; + } + + @include bem.utility('va-middle') { + vertical-align: middle; + } + + @include bem.utility('va-bottom') { + vertical-align: bottom; + } + + @include bem.utility('ta-start') { + text-align: start; + } + + @include bem.utility('ta-end') { + text-align: end; + } + + @include bem.utility('ta-center') { + text-align: center; + } + + @include bem.utility('fw-normal') { + font-weight: normal; + } + + @include bem.utility('ai-center') { + align-items: center; + } + + @include bem.utility('ai-start') { + align-items: flex-start; + } + + @include bem.utility('ai-end') { + align-items: flex-end; + } + + @include bem.utility('ac-center') { + align-content: center; + } + + @include bem.utility('jc-center') { + justify-content: center; + } + + @include bem.utility('jc-start') { + justify-content: flex-start; + } + + @include bem.utility('jc-end') { + justify-content: flex-end; + } + + @include bem.utility('tt-upper') { + text-transform: uppercase; + } + + @include bem.utility('tt-lower') { + text-transform: lowercase; + } + + @include bem.utility('c-heading') { + color: props.get(vars.$theme, --heading); + + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; - @include bem.at-theme($theme-name) { - color: props.get(vars.$transparent-colors, $theme, --900); - } - } - } + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --900); + } + } + } - @include bem.utility('c-text') { - color: props.get(vars.$theme, --text); + @include bem.utility('c-text') { + color: props.get(vars.$theme, --text); - @each $theme in map.keys(props.get(vars.$transparent-colors)) { - $theme-name: static-#{string.slice($theme, 3)}; + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; - @include bem.at-theme($theme-name) { - color: props.get(vars.$transparent-colors, $theme, --800); - } - } - } + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --800); + } + } + } - @include bem.utility('c-mute') { - color: props.get(vars.$theme, --text-mute); + @include bem.utility('c-mute') { + color: props.get(vars.$theme, --text-mute); - @each $theme in map.keys(props.get(vars.$transparent-colors)) { - $theme-name: static-#{string.slice($theme, 3)}; + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; - @include bem.at-theme($theme-name) { - color: props.get(vars.$transparent-colors, $theme, --700); - } - } - } + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --700); + } + } + } - @include bem.utility('c-mute-more') { - color: props.get(vars.$theme, --text-mute-more); + @include bem.utility('c-mute-more') { + color: props.get(vars.$theme, --text-mute-more); - @each $theme in map.keys(props.get(vars.$transparent-colors)) { - $theme-name: static-#{string.slice($theme, 3)}; + @each $theme in map.keys(props.get(vars.$transparent-colors)) { + $theme-name: static-#{string.slice($theme, 3)}; - @include bem.at-theme($theme-name) { - color: props.get(vars.$transparent-colors, $theme, --600); - } - } - } - - @each $mod, $size in $-font-sizes { - @include bem.utility('fs-#{$mod}') { - font-size: props.get($size); - } - } - - @each $dir, $prop in (is: inline-size, bs: block-size) { - @include bem.utility('#{$dir}-100') { - #{$prop}: 100%; - } + @include bem.at-theme($theme-name) { + color: props.get(vars.$transparent-colors, $theme, --600); + } + } + } + + @each $mod, $size in $-font-sizes { + @include bem.utility('fs-#{$mod}') { + font-size: props.get($size); + } + } + + @each $dir, $prop in (is: inline-size, bs: block-size) { + @include bem.utility('#{$dir}-100') { + #{$prop}: 100%; + } - @include bem.utility('#{$dir}-75') { - #{$prop}: 75%; - } + @include bem.utility('#{$dir}-75') { + #{$prop}: 75%; + } - @include bem.utility('#{$dir}-50') { - #{$prop}: 50%; - } + @include bem.utility('#{$dir}-50') { + #{$prop}: 50%; + } - @include bem.utility('#{$dir}-25') { - #{$prop}: 25%; - } + @include bem.utility('#{$dir}-25') { + #{$prop}: 25%; + } - @include bem.utility('#{$dir}-1px') { - #{$prop}: 1px; - } + @include bem.utility('#{$dir}-1px') { + #{$prop}: 1px; + } - @include bem.utility('#{$dir}-0') { - #{$prop}: 0; - } - } - - @include bem.utility('elp') { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - @include bem.utility('o-auto') { - overflow: auto; - } - - @include bem.utility('o-hidden') { - overflow: hidden; - } - - @include bem.utility('p-static') { - position: static; - } - - @include bem.utility('p-relative') { - position: relative; - } - - @include bem.utility('p-fixed') { - position: fixed; - } - - @include bem.utility('p-sticky-bs') { - position: sticky; - inset-block-start: props.get(vars.$sticky-top-offset); - } - - @include bem.utility('p-sticky-be') { - position: sticky; - inset-block-end: 0; - } - - @include bem.utility('br-round') { - border-radius: props.get(vars.$rounding); - } - - @include bem.utility('br-round-sm') { - border-radius: props.get(vars.$rounding--sm); - } - - @each $dir, $suffix in $-dirs { - @include bem.utility('m#{$dir}-auto') { - margin#{$suffix}: auto; - } + @include bem.utility('#{$dir}-0') { + #{$prop}: 0; + } + } + + @include bem.utility('elp') { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + @include bem.utility('o-auto') { + overflow: auto; + } + + @include bem.utility('o-hidden') { + overflow: hidden; + } + + @include bem.utility('p-static') { + position: static; + } + + @include bem.utility('p-relative') { + position: relative; + } + + @include bem.utility('p-fixed') { + position: fixed; + } + + @include bem.utility('p-sticky-bs') { + position: sticky; + inset-block-start: props.get(vars.$sticky-top-offset); + } + + @include bem.utility('p-sticky-be') { + position: sticky; + inset-block-end: 0; + } + + @include bem.utility('br-round') { + border-radius: props.get(vars.$rounding); + } + + @include bem.utility('br-round-sm') { + border-radius: props.get(vars.$rounding--sm); + } + + @each $dir, $suffix in $-dirs { + @include bem.utility('m#{$dir}-auto') { + margin#{$suffix}: auto; + } - @include bem.utility('p#{$dir}-auto') { - padding#{$suffix}: auto; - } - - @each $mod, $size in $-sizes { - @include bem.utility('m#{$dir}-#{$mod}') { - margin#{$suffix}: props.get($size); - } + @include bem.utility('p#{$dir}-auto') { + padding#{$suffix}: auto; + } + + @each $mod, $size in $-sizes { + @include bem.utility('m#{$dir}-#{$mod}') { + margin#{$suffix}: props.get($size); + } - @include bem.utility('p#{$dir}-#{$mod}') { - padding#{$suffix}: props.get($size); - } - } + @include bem.utility('p#{$dir}-#{$mod}') { + padding#{$suffix}: props.get($size); + } + } - @include bem.utility('b#{$dir}-0') { - border#{$suffix}: 0; - - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - border#{$suffix}: 0; - } - } + @include bem.utility('b#{$dir}-0') { + border#{$suffix}: 0; + + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + border#{$suffix}: 0; + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - border#{$suffix}: 0; - } - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + border#{$suffix}: 0; + } + } + } - @include bem.utility('b#{$dir}-1') { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); - - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); - } - } + @include bem.utility('b#{$dir}-1') { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); - } - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + } + } + } - @include bem.utility('b#{$dir}-1-mute') { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); - - @include bem.suffix('light') { - @media (prefers-color-scheme: light) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); - } - } + @include bem.utility('b#{$dir}-1-mute') { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); + + @include bem.suffix('light') { + @media (prefers-color-scheme: light) { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); + } + } - @include bem.suffix('dark') { - @media (prefers-color-scheme: dark) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); - } - } - } - } - - @include bem.utility('mbs-neutralize') { - &::before { - display: block; - margin-block: -100em 100em; - content: ''; - } - } + @include bem.suffix('dark') { + @media (prefers-color-scheme: dark) { + border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); + } + } + } + } + + @include bem.utility('mbs-neutralize') { + &::before { + display: block; + margin-block: -100em 100em; + content: ''; + } + } - @include bem.utility('sr-only') { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip-path: inset(50%); - white-space: nowrap; - border: 0; - } + @include bem.utility('sr-only') { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + white-space: nowrap; + border: 0; + clip-path: inset(50%); + } } diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss index 6c874e1..44719be 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_button-group.scss @@ -8,43 +8,43 @@ @use '../objects/button.vars' as button; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.layout('button-group') { - display: inline-flex; - flex-wrap: wrap; - gap: props.get(vars.$gap); + @include bem.layout('button-group') { + display: inline-flex; + flex-wrap: wrap; + gap: props.get(vars.$gap); - @each $mod, $size in vars.$sizes { - @include bem.modifier($mod) { - gap: props.get($size); - } - } + @each $mod, $size in vars.$sizes { + @include bem.modifier($mod) { + gap: props.get($size); + } + } - @include bem.modifier('align-block') { - margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); + @include bem.modifier('align-block') { + margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); - } + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); + } - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); - } + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); + } - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { - @include bem.modifier('action-#{$mod}') { - margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { + @include bem.modifier('action-#{$mod}') { + margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); - } - - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); - } - } - } - } - } + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); + } + + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); + } + } + } + } + } } diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss index 50c1b53..b56eec7 100644 --- a/src/layouts/_button-group.vars.scss +++ b/src/layouts/_button-group.vars.scss @@ -9,8 +9,8 @@ $lg: props.def(--l-button-group--lg, props.get(core.$size--300)) !default; $xl: props.def(--l-button-group--xl, props.get(core.$size--450)) !default; $sizes: ( - 'gapless': $gapless, - 'sm': $sm, - 'lg': $lg, - 'xl': $xl, + 'gapless': $gapless, + 'sm': $sm, + 'lg': $lg, + 'xl': $xl, ) !default; diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index cca6e72..aedbfd0 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -8,151 +8,151 @@ @use 'card-list.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.layout('card-list') { - display: flex; - flex-direction: column; - gap: props.get(vars.$row-gap); - - @include bem.modifier('merge') { - position: relative; - gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width)); - padding: props.get(vars.$merge-padding); - background-color: props.get(vars.$card-bg-color); - border: props.get(vars.$border-width) solid props.get(vars.$border-color); - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding)); - - @include bem.elem('card') { - &:not(:last-child) { - position: relative; - border-end-start-radius: 0; - border-end-end-radius: 0; - - &::after { - position: absolute; - inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width)); - inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width)); - content: ''; - display: block; - block-size: props.get(vars.$border-width); - background-color: props.get(vars.$border-color); - } - } - - &:hover, - &:active, - &:focus-visible { - transform: none; - } - - @include bem.next-twin-elem { - border-start-start-radius: 0; - border-start-end-radius: 0; - } - } - - @include bem.modifier('borderless') { - border-color: props.get(vars.$card-bg-color); - - @include bem.elem('card') { - &:not(:last-child) { - &::after { - inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width)); - } - } - } - } - - @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') { - row-gap: props.get(vars.$quiet--row-gap); - } - - @include bem.modifier('grid') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); - gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); - - @include bem.modifier('quiet') { - row-gap: props.get(vars.$grid--quiet--row-gap); - } - } - - @include bem.modifier('grid-sm') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr)); - gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); - - @include bem.modifier("grid-sm") { - @include media.media("<=md") { - display: flex; - gap: props.get(vars.$row-gap); - } - } - - @include bem.modifier('quiet') { - row-gap: props.get(vars.$grid-sm--quiet--row-gap); - } - } - - @include bem.modifier('masonry') { - display: block; - columns: auto props.get(vars.$masonry--col-width); - column-gap: props.get(vars.$masonry--col-gap); - - @include bem.elem('card') { - margin-block-end: props.get(vars.$masonry--row-gap); - break-inside: avoid; - } - - @include bem.modifier('quiet') { - @include bem.elem('card') { - margin-block-end: props.get(vars.$masonry--quiet--row-gap); - } - } - } - - @include bem.modifier('masonry-h') { - flex-flow: row wrap; - gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); - - @include bem.modifier('no-flush') { - &::after { - display: block; - flex: 1 0 auto; - inline-size: props.get(vars.$masonry-h--row-height); - content: ''; - } - } - - @include bem.elem('card') { - flex: 1 0 auto; - max-inline-size: 100%; - } - - @include bem.elem('card-image') { - block-size: props.get(vars.$masonry-h--row-height); - } - - @include bem.modifier('quiet') { - row-gap: props.get(vars.$masonry-h--quiet--row-gap); - } - } - - @include bem.modifier('aspect-5\\/4') { - @include bem.elem('card-image') { - aspect-ratio: 5 / 4; - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.layout('card-list') { + display: flex; + flex-direction: column; + gap: props.get(vars.$row-gap); + + @include bem.modifier('merge') { + position: relative; + gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width)); + padding: props.get(vars.$merge-padding); + background-color: props.get(vars.$card-bg-color); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding)); + + @include bem.elem('card') { + &:not(:last-child) { + position: relative; + border-end-start-radius: 0; + border-end-end-radius: 0; + + &::after { + position: absolute; + inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width)); + inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width)); + display: block; + block-size: props.get(vars.$border-width); + content: ''; + background-color: props.get(vars.$border-color); + } + } + + &:hover, + &:active, + &:focus-visible { + transform: none; + } + + @include bem.next-twin-elem { + border-start-start-radius: 0; + border-start-end-radius: 0; + } + } + + @include bem.modifier('borderless') { + border-color: props.get(vars.$card-bg-color); + + @include bem.elem('card') { + &:not(:last-child) { + &::after { + inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width)); + } + } + } + } + + @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') { + row-gap: props.get(vars.$quiet--row-gap); + } + + @include bem.modifier('grid') { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); + gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); + + @include bem.modifier('quiet') { + row-gap: props.get(vars.$grid--quiet--row-gap); + } + } + + @include bem.modifier('grid-sm') { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr)); + gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); + + @include bem.modifier('grid-sm') { + @include media.media('<=md') { + display: flex; + gap: props.get(vars.$row-gap); + } + } + + @include bem.modifier('quiet') { + row-gap: props.get(vars.$grid-sm--quiet--row-gap); + } + } + + @include bem.modifier('masonry') { + display: block; + columns: auto props.get(vars.$masonry--col-width); + column-gap: props.get(vars.$masonry--col-gap); + + @include bem.elem('card') { + margin-block-end: props.get(vars.$masonry--row-gap); + break-inside: avoid; + } + + @include bem.modifier('quiet') { + @include bem.elem('card') { + margin-block-end: props.get(vars.$masonry--quiet--row-gap); + } + } + } + + @include bem.modifier('masonry-h') { + flex-flow: row wrap; + gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); + + @include bem.modifier('no-flush') { + &::after { + display: block; + flex: 1 0 auto; + inline-size: props.get(vars.$masonry-h--row-height); + content: ''; + } + } + + @include bem.elem('card') { + flex: 1 0 auto; + max-inline-size: 100%; + } + + @include bem.elem('card-image') { + block-size: props.get(vars.$masonry-h--row-height); + } + + @include bem.modifier('quiet') { + row-gap: props.get(vars.$masonry-h--quiet--row-gap); + } + } + + @include bem.modifier('aspect-5\\/4') { + @include bem.elem('card-image') { + aspect-ratio: 5 / 4; + } + } + } } diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 17ab2f0..0ae68c1 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -7,22 +7,22 @@ @use 'container.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.layout('container') { - @each $mod, $size in vars.$fixed-sizes { - @include bem.modifier($mod) { - max-inline-size: props.get($size); - margin-inline: auto; - } - } + @include bem.layout('container') { + @each $mod, $size in vars.$fixed-sizes { + @include bem.modifier($mod) { + max-inline-size: props.get($size); + margin-inline: auto; + } + } - @include bem.modifier('pad-i') { - padding-inline: props.get(vars.$pad-i); - } + @include bem.modifier('pad-i') { + padding-inline: props.get(vars.$pad-i); + } - @include bem.modifier('pad-b') { - padding-block: props.get(vars.$pad-b); - } - } + @include bem.modifier('pad-b') { + padding-block: props.get(vars.$pad-b); + } + } } diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss index 56b6c89..8f0cef6 100644 --- a/src/layouts/_container.vars.scss +++ b/src/layouts/_container.vars.scss @@ -7,9 +7,9 @@ $fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default; $fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default; $fixed-sizes: ( - 'fixed-200': $fixed-200, - 'fixed-150': $fixed-150, - 'fixed': $fixed + 'fixed-200': $fixed-200, + 'fixed-150': $fixed-150, + 'fixed': $fixed ) !default; $pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default; diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss index 902ecdb..c99b253 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss @@ -1,19 +1,19 @@ @use 'iro-sass/src/bem'; @mixin styles { - @include bem.layout('flex') { - display: flex; + @include bem.layout('flex') { + display: flex; - @include bem.modifier('column') { - flex-direction: column; - } + @include bem.modifier('column') { + flex-direction: column; + } - @include bem.modifier('wrap') { - flex-wrap: wrap; - } + @include bem.modifier('wrap') { + flex-wrap: wrap; + } - @include bem.modifier('wrap-reverse') { - flex-wrap: wrap-reverse; - } - } + @include bem.modifier('wrap-reverse') { + flex-wrap: wrap-reverse; + } + } } diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 5f0567b..c804262 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -7,53 +7,53 @@ @use 'form.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.layout('form') { - display: flex; - flex-direction: column; - gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); + @include bem.layout('form') { + display: flex; + flex-direction: column; + gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); - @include bem.elem('item') { - display: block; - } + @include bem.elem('item') { + display: block; + } - @include bem.elem('item-content') { - @include bem.modifier('align-start') { - align-self: start; - } - } - - @include bem.modifier('row') { - flex-direction: row; - align-items: flex-end; - } - - @include bem.modifier('labels-start', 'labels-end') { - display: grid; - grid-template-rows: auto; - grid-template-columns: auto 1fr; - align-items: baseline; - - @include bem.elem('item') { - display: contents; - } + @include bem.elem('item-content') { + @include bem.modifier('align-start') { + align-self: start; + } + } + + @include bem.modifier('row') { + flex-direction: row; + align-items: flex-end; + } + + @include bem.modifier('labels-start', 'labels-end') { + display: grid; + grid-template-rows: auto; + grid-template-columns: auto 1fr; + align-items: baseline; + + @include bem.elem('item') { + display: contents; + } - @include bem.elem('item-label') { - grid-column: 1; - padding-inline-end: 0; - } + @include bem.elem('item-label') { + grid-column: 1; + padding-inline-end: 0; + } - @include bem.elem('item-content') { - grid-column: 2; - margin-block-start: 0; - } - } - - @include bem.modifier('labels-end') { - @include bem.elem('item-label') { - text-align: end; - } - } - } + @include bem.elem('item-content') { + grid-column: 2; + margin-block-start: 0; + } + } + + @include bem.modifier('labels-end') { + @include bem.elem('item-label') { + text-align: end; + } + } + } } diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss index 2192db5..929e60f 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss @@ -7,35 +7,35 @@ @use 'media.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.layout('media') { - display: flex; - gap: props.get(vars.$gap); - align-items: center; - line-height: 1.4; - - @each $mod, $size in vars.$sizes { - @include bem.modifier($mod) { - gap: props.get($size); - } - } - - @include bem.modifier('wrap') { - flex-wrap: wrap; - } - - @include bem.elem('block') { - flex: 0 0 auto; - - @include bem.modifier('shrink', 'main') { - flex-shrink: 1; - min-inline-size: 0; - } - - @include bem.modifier('main') { - inline-size: 100%; - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.layout('media') { + display: flex; + gap: props.get(vars.$gap); + align-items: center; + line-height: 1.4; + + @each $mod, $size in vars.$sizes { + @include bem.modifier($mod) { + gap: props.get($size); + } + } + + @include bem.modifier('wrap') { + flex-wrap: wrap; + } + + @include bem.elem('block') { + flex: 0 0 auto; + + @include bem.modifier('shrink', 'main') { + flex-shrink: 1; + min-inline-size: 0; + } + + @include bem.modifier('main') { + inline-size: 100%; + } + } + } } diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss index fd6d986..dcb10de 100644 --- a/src/layouts/_media.vars.scss +++ b/src/layouts/_media.vars.scss @@ -9,8 +9,8 @@ $lg: props.def(--l-media--lg, props.get(core.$size--300)) !default; $xl: props.def(--l-media--xl, props.get(core.$size--450)) !default; $sizes: ( - 'gapless': $gapless, - 'sm': $sm, - 'lg': $lg, - 'xl': $xl, + 'gapless': $gapless, + 'sm': $sm, + 'lg': $lg, + 'xl': $xl, ) !default; diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss index 9fba7eb..6d31d37 100644 --- a/src/layouts/_overflow.scss +++ b/src/layouts/_overflow.scss @@ -3,9 +3,9 @@ @use '../core.vars' as core; @mixin styles { - @include bem.layout('overflow') { - overflow: auto; - scrollbar-color: props.get(core.$theme, --text-disabled) transparent; - } + @include bem.layout('overflow') { + overflow: auto; + scrollbar-color: props.get(core.$theme, --text-disabled) transparent; + } } diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss index f522254..6469a7d 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss @@ -8,84 +8,84 @@ @use 'split-view.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.layout('split-view') { - display: flex; - gap: props.get(vars.$col-gap); - align-items: start; - - @include bem.elem('panel') { - flex: 1 1 auto; - inline-size: 100%; - min-inline-size: 0; - - @include bem.modifier('side-25') { - flex: 0 0 auto; - inline-size: 25%; - min-inline-size: props.get(vars.$panel--side-25--min); - } - - @include bem.modifier('sticky-0') { - position: sticky; - inset-block-start: 0; - } - - @include bem.modifier('sticky') { - position: sticky; - inset-block-start: props.get(vars.$panel--sticky-offset); - } - - @include bem.modifier('sticky-400') { - position: sticky; - inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); - } - - @include bem.modifier('sticky-1200') { - position: sticky; - inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); - } - } - - @include bem.modifier('gapless') { - gap: props.get(vars.$gapless); - - @include bem.elem('panel') { - @include bem.modifier('side-25') { - min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); - } - } - } - - @include bem.elem('content') { - inline-size: 100%; - } - - @include media.media('<=md') { - flex-direction: column; - gap: props.get(vars.$row-gap); - align-items: stretch; - - @include bem.modifier('gapless') { - gap: props.get(vars.$gapless); - } - - @include bem.modifier('wrap-reverse') { - flex-direction: column-reverse; - } - - @include bem.elem('panel') { - inline-size: auto; + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.layout('split-view') { + display: flex; + gap: props.get(vars.$col-gap); + align-items: start; + + @include bem.elem('panel') { + flex: 1 1 auto; + inline-size: 100%; + min-inline-size: 0; + + @include bem.modifier('side-25') { + flex: 0 0 auto; + inline-size: 25%; + min-inline-size: props.get(vars.$panel--side-25--min); + } + + @include bem.modifier('sticky-0') { + position: sticky; + inset-block-start: 0; + } + + @include bem.modifier('sticky') { + position: sticky; + inset-block-start: props.get(vars.$panel--sticky-offset); + } + + @include bem.modifier('sticky-400') { + position: sticky; + inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); + } + + @include bem.modifier('sticky-1200') { + position: sticky; + inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); + } + } + + @include bem.modifier('gapless') { + gap: props.get(vars.$gapless); + + @include bem.elem('panel') { + @include bem.modifier('side-25') { + min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); + } + } + } + + @include bem.elem('content') { + inline-size: 100%; + } + + @include media.media('<=md') { + flex-direction: column; + gap: props.get(vars.$row-gap); + align-items: stretch; + + @include bem.modifier('gapless') { + gap: props.get(vars.$gapless); + } + + @include bem.modifier('wrap-reverse') { + flex-direction: column-reverse; + } + + @include bem.elem('panel') { + inline-size: auto; - @include bem.modifier('side-25') { - inline-size: auto; - min-inline-size: 0; - } - - @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { - position: static; - } - } - } - } + @include bem.modifier('side-25') { + inline-size: auto; + min-inline-size: 0; + } + + @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { + position: static; + } + } + } + } } diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index de0e913..697ac18 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -8,33 +8,33 @@ @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); - 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); + @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); - @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) - props.get(vars.$themes, $theme, --shadow-color); - } - } - } + @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) + props.get(vars.$themes, $theme, --shadow-color); + } + } + } } diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss index f23928d..62d3414 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss @@ -17,20 +17,20 @@ $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text- $shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; $themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, ) !default; $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 81396e3..9d51ffb 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -7,120 +7,120 @@ @use 'avatar.vars' as vars; @mixin status($indicator-size) { - @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); - } - } + @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); + } + } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('avatar') { - position: relative; - display: inline-block; - font-size: props.get(vars.$font-size); - font-style: normal; - vertical-align: .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; - pointer-events: none; - content: ''; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: props.get(vars.$rounding); - 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.elem('status') { - position: absolute; - inset-block-end: 0; - inset-inline-end: 0; - } - - @include status(vars.$indicator-size); - - @include bem.elem('content') { - display: block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$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') { - border-radius: 100%; - - &::after { - border-radius: 100%; - } - - @include bem.elem('content') { - border-radius: 100%; - } - } - - @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-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))); - } - } - - @each $mod, $size, $font-size, $indicator-size in vars.$sizes { - @include bem.modifier($mod) { - font-size: props.get($font-size); + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('avatar') { + position: relative; + display: inline-block; + font-size: props.get(vars.$font-size); + font-style: normal; + vertical-align: .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; + 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)) + props.get(vars.$key-focus--outline-color); + } + + @include bem.elem('status') { + position: absolute; + inset-block-end: 0; + inset-inline-end: 0; + } + + @include status(vars.$indicator-size); + + @include bem.elem('content') { + display: block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$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') { + border-radius: 100%; + + &::after { + border-radius: 100%; + } + + @include bem.elem('content') { + border-radius: 100%; + } + } + + @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-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))); + } + } + + @each $mod, $size, $font-size, $indicator-size in vars.$sizes { + @include bem.modifier($mod) { + font-size: props.get($font-size); - @include status($indicator-size); + @include status($indicator-size); - @include bem.elem('content') { - inline-size: props.get($size); - block-size: props.get($size); - line-height: props.get($size); - } - } - } + @include bem.elem('content') { + inline-size: props.get($size); + block-size: props.get($size); + line-height: props.get($size); + } + } + } - &:focus-visible { - &::after { - display: block; - } - } - } + &:focus-visible { + &::after { + display: block; + } + } + } } diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index 9986de5..2374f5a 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss @@ -49,10 +49,10 @@ $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props. $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, - 'sm' $size--sm $font-size--sm $indicator-size--sm, - 'lg' $size--lg $font-size--lg $indicator-size--lg, - 'xl' $size--xl $font-size--xl $indicator-size--xl, - 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, - 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, + 'xs' $size--xs $font-size--xs $indicator-size--xs, + 'sm' $size--sm $font-size--sm $indicator-size--sm, + 'lg' $size--lg $font-size--lg $indicator-size--lg, + 'xl' $size--xl $font-size--xl $indicator-size--xl, + 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, + 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, ) !default; diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 9cc9e2e..346cf5f 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss @@ -7,17 +7,17 @@ @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; - background-color: props.get(vars.$bg-color); - backdrop-filter: blur(props.get(vars.$blur)); - } + @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)); + } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 5ba8576..8163cf9 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -10,276 +10,276 @@ @use 'button.vars' as vars; @mixin -apply-theme($theme, $key: ()) { - 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)...); - - &::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)) - props.get($theme, list.join($key, --key-focus --outline-color)...); - } - - &:link, - &:visited, - &:enabled { - 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)...); + 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)...); + + &::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)) + props.get($theme, list.join($key, --key-focus --outline-color)...); + } + + &:link, + &:visited, + &:enabled { + 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)...); - &:hover, - &:focus-visible { - 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)...); - } - - &:active { - 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; - } - } - - @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; - - &:link, - &:visited, - &:enabled { - 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; - - &:hover, - &:focus-visible { - 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)...); - } - - &: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)...); - } - } - } - - @include bem.modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); - background-color: transparent; - border-color: transparent; - - &:link, - &:visited, - &:enabled { - color: props.get($theme, list.join($key, --quiet --label-color)...); - background-color: transparent; - border-color: transparent; - box-shadow: none; - - &:hover, - &:focus-visible { - 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; - } - - &: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; - } - } - } - - @include bem.is('highlighted') { - &:link, - &:visited, - &:enabled { - &, - &:hover, - &:focus-visible { - border-color: props.get($theme, list.join($key, --highlighted --border-color)...); - } - - 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)...); - - &:focus-visible { - 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)...); - background-color: props.get($theme, list.join($key, --selected --disabled --bg-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)...); - background-color: props.get($theme, list.join($key, --selected --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --border-color)...); - } - - &:link, - &:visited, - &: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)...); - } + &:hover, + &:focus-visible { + 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)...); + } + + &:active { + 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; + } + } + + @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; + + &:link, + &:visited, + &:enabled { + 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; + + &:hover, + &:focus-visible { + 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)...); + } + + &: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)...); + } + } + } + + @include bem.modifier('quiet') { + color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); + background-color: transparent; + border-color: transparent; + + &:link, + &:visited, + &:enabled { + color: props.get($theme, list.join($key, --quiet --label-color)...); + background-color: transparent; + border-color: transparent; + box-shadow: none; + + &:hover, + &:focus-visible { + 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; + } + + &: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; + } + } + } + + @include bem.is('highlighted') { + &:link, + &:visited, + &:enabled { + &, + &:hover, + &:focus-visible { + border-color: props.get($theme, list.join($key, --highlighted --border-color)...); + } + + 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)...); + + &:focus-visible { + 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)...); + background-color: props.get($theme, list.join($key, --selected --disabled --bg-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)...); + background-color: props.get($theme, list.join($key, --selected --bg-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); + } + + &:link, + &:visited, + &: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)...); + } - &: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)...); - } - } - } + &: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)...); + } + } + } } @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); - line-height: props.get(vars.$line-height); - font-size: props.get(vars.$font-size); - text-align: center; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - 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; - - &::after { - 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; - 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); - } - - &:link, - &:visited, - &:enabled { - &:focus-visible { - transition: none; - - &::after { - display: block; - } - } - } - - @include bem.elem('label') { - margin-inline: props.get(vars.$pad-i-label); - } - - @include -apply-theme(vars.$default-theme); - - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - @include -apply-theme(vars.$themes, $theme); - } - } - - @include bem.modifier('pill') { - padding-inline: props.get(vars.$pad-i-pill); - border-radius: 100em; - - &::after { - border-radius: 100em; - } - } - - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); - padding-inline: 0; - } - - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { - @include bem.modifier($mod) { - padding-block: props.get($pad-b); - padding-inline: props.get($pad-i); - font-size: props.get($font-size); - - @include bem.elem('label') { - margin-inline: props.get($pad-i-label); - } - - @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)); - padding-inline: 0; - } - } - } - - @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('icon') { - margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .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 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; + + &::after { + 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)); + } + + &:link, + &:visited, + &:enabled { + &:focus-visible { + transition: none; + + &::after { + display: block; + } + } + } + + @include bem.elem('label') { + margin-inline: props.get(vars.$pad-i-label); + } + + @include -apply-theme(vars.$default-theme); + + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.modifier(string.slice($theme, 3)) { + @include -apply-theme(vars.$themes, $theme); + } + } + + @include bem.modifier('pill') { + padding-inline: props.get(vars.$pad-i-pill); + border-radius: 100em; + + &::after { + border-radius: 100em; + } + } + + @include bem.modifier('icon') { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); + padding-inline: 0; + } + + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @include bem.modifier($mod) { + padding-block: props.get($pad-b); + padding-inline: props.get($pad-i); + font-size: props.get($font-size); + + @include bem.elem('label') { + margin-inline: props.get($pad-i-label); + } + + @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)); + padding-inline: 0; + } + } + } + + @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('icon') { + margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .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('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); - } - } - } - } - } + @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)); + } + } + } + } + } } diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 00a11c3..6e2298f 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -41,334 +41,334 @@ $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; $fixed-sizes: ( - 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, + 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, + 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, + 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, ) !default; $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, --text), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), - - --hover: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - ), - - --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), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), + --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, --text), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), + + --hover: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), + ), + + --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), + + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), ), $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), - ), + --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)}; - - $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, --800), - --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, --900), - --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, --900), - --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, + $button-theme: --static-#{string.slice($theme, 3)}; + + $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, --800), + --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, --900), + --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, --900), + --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, - ), + --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), + --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), - ), + --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), - ), + --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, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + 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), + $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), - ), + --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), + --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), - ), + --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), - ), + --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), - ), - ), - ) - )); + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ) + )); } diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 4bd6a59..ebab339 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -8,270 +8,270 @@ @use 'card.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @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') { - &:hover, - &:active, - &:focus-visible { - transform: translateY(props.get(vars.$hover--offset-b)); - background-color: props.get(vars.$hover--bg-color); - border-color: props.get(vars.$hover--border-color); - box-shadow: none; - } - - &:focus-visible { - margin: calc(-1 * props.get(vars.$key-focus--border-width)); - transition: transform .2s; - 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)); - 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('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) - 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) - props.get(vars.$shadow-color); - } - } - } - - @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; - - &: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)); - } - - &: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)); - } - - @include bem.next-elem('avatar') { - margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); - } - } - - @include bem.elem('image-img') { - display: block; - inline-size: 100%; - object-fit: cover; - } - - @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); - } - - @include bem.elem('body') { - flex: 1 0 auto; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - - &::before { - display: block; - margin-block: -100em 100em; - 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); - 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: ''; - background-color: props.get(vars.$divider-width); - } - } - - @include bem.modifier('quiet') { - margin-inline: 0; - background-color: transparent; - border: 0; - box-shadow: none; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { - &:hover, - &:active, - &:focus-visible { - transform: none; - background-color: transparent; - - @include bem.elem('image') { - background-color: props.get(vars.$quiet--hover--image-color); - opacity: .75; - transform: translateY(props.get(vars.$hover--offset-b)); - } - } - - &:focus-visible { - margin: 0; - outline: none; - border: 0; - box-shadow: none; - - @include bem.elem('image') { - margin: calc(-1 * props.get(vars.$key-focus--border-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)); - background-color: props.get(vars.$quiet--hover--image-color); - 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); - opacity: 1; - } - } - } - - @include bem.elem('image') { - position: relative; - background-color: props.get(vars.$quiet--image-color); - background-clip: padding-box; - border-radius: props.get(vars.$rounding); - } - - @include bem.elem('body') { - padding: 0; - padding-block-start: props.get(vars.$spacing); - } - - @include bem.elem('footer') { - padding-inline: 0; - } - } - - @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-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); - border-color: transparent; - border-style: solid; - 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; - } - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { - &:hover, - &:active, - &:focus-visible { - @include bem.elem('body') { - border-color: props.get(vars.$hover--border-color); - visibility: visible; - opacity: 1; - transition: - border-color .2s ease, - opacity .2s ease, - visibility .2s linear; - } - } - } - } - - @include bem.modifier('horizontal') { - flex-direction: row; - align-items: center; - - @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); - } + @include materialize-at-root(meta.module-variables('vars')); + + @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') { + &: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)); + } + + &: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)) + props.get(vars.$key-focus--outline-color); + transition: transform .2s; + } + } + + @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) + 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) + props.get(vars.$shadow-color); + } + } + } + + @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; + + &: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)); + } + + &: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)); + } + + @include bem.next-elem('avatar') { + margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); + } + } + + @include bem.elem('image-img') { + display: block; + inline-size: 100%; + object-fit: cover; + } + + @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); + } + + @include bem.elem('body') { + flex: 1 0 auto; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + + &::before { + display: block; + margin-block: -100em 100em; + 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); + 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: ''; + background-color: props.get(vars.$divider-width); + } + } + + @include bem.modifier('quiet') { + margin-inline: 0; + background-color: transparent; + border: 0; + box-shadow: none; + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active, + &:focus-visible { + background-color: transparent; + transform: none; + + @include bem.elem('image') { + background-color: props.get(vars.$quiet--hover--image-color); + opacity: .75; + transform: translateY(props.get(vars.$hover--offset-b)); + } + } + + &:focus-visible { + margin: 0; + outline: none; + border: 0; + box-shadow: none; + + @include bem.elem('image') { + 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); + 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)) + props.get(vars.$key-focus--outline-color); + opacity: 1; + } + } + } + + @include bem.elem('image') { + position: relative; + background-color: props.get(vars.$quiet--image-color); + background-clip: padding-box; + border-radius: props.get(vars.$rounding); + } + + @include bem.elem('body') { + padding: 0; + padding-block-start: props.get(vars.$spacing); + } + + @include bem.elem('footer') { + padding-inline: 0; + } + } + + @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; + transition: + border-color .2s ease, + opacity .2s ease, + visibility 0s .2s linear; + } + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active, + &:focus-visible { + @include bem.elem('body') { + visibility: visible; + border-color: props.get(vars.$hover--border-color); + opacity: 1; + transition: + border-color .2s ease, + opacity .2s ease, + visibility .2s linear; + } + } + } + } + + @include bem.modifier('horizontal') { + flex-direction: row; + align-items: center; + + @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); + } - &:last-child { - border-start-end-radius: props.get(vars.$rounding); - border-end-start-radius: 0; - } - } - - @include bem.elem('body') { - flex: 0 0 auto; - - @include bem.modifier('main') { - flex-shrink: 1; - inline-size: 100%; - min-inline-size: 0; - } - } - } - } + &:last-child { + border-start-end-radius: props.get(vars.$rounding); + border-end-start-radius: 0; + } + } + + @include bem.elem('body') { + flex: 0 0 auto; + + @include bem.modifier('main') { + flex-shrink: 1; + inline-size: 100%; + min-inline-size: 0; + } + } + } + } } diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 82dd596..5faafb9 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -9,223 +9,223 @@ @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); - 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.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)); - - &::before, - &::after { - position: absolute; - display: block; - content: ''; - } - - &::before { - 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; - } - - &::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; - transition: transform .2s ease; - transform: scale(0); - 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)); - 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); - transition: transform .2s ease; - transform: scale(0); - transform-origin: 40% 90%; - } - - @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; - 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); - - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } - - @include bem.sibling-elem('box') { - background-color: props.get(vars.$hover--box-border-color); - } - } - - &:checked { - @include bem.sibling-elem('box') { - &::before { - transform: scale(0); - } - - @include bem.elem('check-icon') { - transform: scale(1); - } - } - } - - &:indeterminate { - @include bem.sibling-elem('box') { - &::before { - transform: scale(0); - } - - &::after { - transform: scale(1); - } - - @include bem.elem('check-icon') { - transform: scale(0); - } - } - } - - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } - - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); - - &::before { - background-color: props.get(vars.$disabled--box-bg-color); - } - } - } - - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + @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)); + + &::before, + &::after { + position: absolute; + display: block; + content: ''; + } + + &::before { + 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; + } + + &::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; + border-inline-width: 0 2px; + } + } + + @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; + } + + @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; + 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); + + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } + + @include bem.sibling-elem('box') { + background-color: props.get(vars.$hover--box-border-color); + } + } + + &:checked { + @include bem.sibling-elem('box') { + &::before { + transform: scale(0); + } + + @include bem.elem('check-icon') { + transform: scale(1); + } + } + } + + &:indeterminate { + @include bem.sibling-elem('box') { + &::before { + transform: scale(0); + } + + &::after { + transform: scale(1); + } + + @include bem.elem('check-icon') { + transform: scale(0); + } + } + } + + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } + + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); + + &::before { + background-color: props.get(vars.$disabled--box-bg-color); + } + } + } + + &:focus-visible { + @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)) - props.get(vars.$key-focus--outline-color); - } - } - } - - @include bem.modifier('standalone') { - @include bem.elem('box') { - margin-block-start: 0; - } - } - - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--box-border-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)) + props.get(vars.$key-focus--outline-color); + } + } + } + + @include bem.modifier('standalone') { + @include bem.elem('box') { + margin-block-start: 0; + } + } + + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--box-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--hover--box-border-color); - } - } - } - - &:indeterminate { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--box-border-color); - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--hover--box-border-color); + } + } + } + + &:indeterminate { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--box-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$accent--hover--box-border-color); - } - } - } - - &:disabled { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); + &:hover, + &:focus-visible { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$accent--hover--box-border-color); + } + } + } + + &:disabled { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); - &::before { - background-color: props.get(vars.$disabled--box-bg-color); - } - } + &::before { + background-color: props.get(vars.$disabled--box-bg-color); + } + } - &:checked { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); - } - } + &:checked { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); + } + } - &:indeterminate { - @include bem.sibling-elem('box') { - background-color: props.get(vars.$disabled--box-border-color); - } - } - } - } - } - } + &:indeterminate { + @include bem.sibling-elem('box') { + background-color: props.get(vars.$disabled--box-border-color); + } + } + } + } + } + } } diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 9b58e77..27af173 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -10,195 +10,195 @@ @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: .5px; - background-color: transparent; - - &::before, - &::after { - flex: 1 1 auto; - inline-size: 100%; - block-size: props.get(vars.$strong--border-width); - content: ''; - background-color: props.get(vars.$strong--bg-color); - } - - &::before { - display: block; - } - - @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; - background-color: props.get(vars.$strong--bg-color); - - &::before, - &::after { - display: none; - } - } - - @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); - - &::before, - &::after { - display: none; - } - } - - @include bem.modifier('medium') { - font-size: props.get(vars.$medium--label-font-size); - font-weight: 500; - color: props.get(vars.$medium--label-color); - - &::before, - &::after { - block-size: props.get(vars.$medium--border-width); - background-color: props.get(vars.$medium--bg-color); - } - - @include bem.modifier('vertical') { - background-color: props.get(vars.$medium--bg-color); - } - - @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); - font-weight: 500; - color: props.get(vars.$quiet--label-color); - - &::before, - &::after { - block-size: props.get(vars.$quiet--border-width); - background-color: props.get(vars.$quiet--bg-color); - } - - @include bem.modifier('vertical') { - background-color: props.get(vars.$vertical--quiet--bg-color); - } - - @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); - font-weight: 500; - color: props.get(vars.$faint--label-color); - - &::before, - &::after { - block-size: props.get(vars.$faint--border-width); - background-color: props.get(vars.$faint--bg-color); - } - - @include bem.modifier('vertical') { - background-color: props.get(vars.$vertical--quiet--bg-color); - } - - @include bem.modifier('dot') { - background-color: props.get(vars.$dot--quiet--bg-color); - } - } - - @include bem.modifier('labelled') { - &::before { - margin-inline-end: 1em; - } - - &::after { - display: block; - margin-inline-start: 1em; - } - } - - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.modifier(string.slice($theme, 3)) { - &::before, - &::after { - background-color: props.get(vars.$themes, $theme, --bg); - } - - @include bem.elem('label') { - color: props.get(vars.$themes, $theme, --label); - } - } - } - - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --strong, --bg); - } - - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --strong, --label); - } - - @include bem.modifier('medium') { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --medium, --bg); - } + @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: .5px; + background-color: transparent; + + &::before, + &::after { + flex: 1 1 auto; + inline-size: 100%; + block-size: props.get(vars.$strong--border-width); + content: ''; + background-color: props.get(vars.$strong--bg-color); + } + + &::before { + display: block; + } + + @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; + background-color: props.get(vars.$strong--bg-color); + + &::before, + &::after { + display: none; + } + } + + @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); + + &::before, + &::after { + display: none; + } + } + + @include bem.modifier('medium') { + font-size: props.get(vars.$medium--label-font-size); + font-weight: 500; + color: props.get(vars.$medium--label-color); + + &::before, + &::after { + block-size: props.get(vars.$medium--border-width); + background-color: props.get(vars.$medium--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$medium--bg-color); + } + + @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); + font-weight: 500; + color: props.get(vars.$quiet--label-color); + + &::before, + &::after { + block-size: props.get(vars.$quiet--border-width); + background-color: props.get(vars.$quiet--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$vertical--quiet--bg-color); + } + + @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); + font-weight: 500; + color: props.get(vars.$faint--label-color); + + &::before, + &::after { + block-size: props.get(vars.$faint--border-width); + background-color: props.get(vars.$faint--bg-color); + } + + @include bem.modifier('vertical') { + background-color: props.get(vars.$vertical--quiet--bg-color); + } + + @include bem.modifier('dot') { + background-color: props.get(vars.$dot--quiet--bg-color); + } + } + + @include bem.modifier('labelled') { + &::before { + margin-inline-end: 1em; + } + + &::after { + display: block; + margin-inline-start: 1em; + } + } + + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.modifier(string.slice($theme, 3)) { + &::before, + &::after { + background-color: props.get(vars.$themes, $theme, --bg); + } + + @include bem.elem('label') { + color: props.get(vars.$themes, $theme, --label); + } + } + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --strong, --bg); + } + + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --strong, --label); + } + + @include bem.modifier('medium') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --medium, --bg); + } - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --medium, --label); - } - } + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --medium, --label); + } + } - @include bem.modifier('quiet') { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); - } + @include bem.modifier('quiet') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); + } - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --quiet, --label); - } - } + @include bem.elem('label') { + color: props.get(vars.$static-themes, $theme, --quiet, --label); + } + } - @include bem.modifier('faint') { - &::before, - &::after { - background-color: props.get(vars.$static-themes, $theme, --faint, --bg); - } + @include bem.modifier('faint') { + &::before, + &::after { + background-color: props.get(vars.$static-themes, $theme, --faint, --bg); + } - @include bem.elem('label') { - color: props.get(vars.$static-themes, $theme, --faint, --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 5a5639b..688fbb3 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -38,42 +38,42 @@ $dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get $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), - ), - ) - )); + $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), + ), + ) + )); } $themes-config: ( - accent: --accent, - negative: --negative, + accent: --accent, + negative: --negative, ) !default; $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 ce2dfa7..fd36535 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -8,43 +8,43 @@ @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)); - vertical-align: props.get(vars.$valign); - object-fit: contain; - - @include bem.modifier('icon') { - margin: calc(-1 * props.get(vars.$pad) - .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); - 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('zoomable') { - border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); - transition: transform .2s ease, background-color .2s ease; - - &:hover { - background-color: props.get(vars.$bg-color); - transform: scale(props.get(vars.$zoom)); - } - } - } + @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; + + @include bem.modifier('icon') { + margin: calc(-1 * props.get(vars.$pad) - .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); + 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('zoomable') { + border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); + transition: transform .2s ease, background-color .2s ease; + + &:hover { + background-color: props.get(vars.$bg-color); + transform: scale(props.get(vars.$zoom)); + } + } + } } diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index 073f88b..b7a8a43 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -18,9 +18,9 @@ $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; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 564ab2b..aa12eb5 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -7,70 +7,70 @@ @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; - 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); + @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); - @include bem.next-elem('content') { - margin-block-start: props.get(vars.$spacing-b); - } - } + @include bem.next-elem('content') { + margin-block-start: props.get(vars.$spacing-b); + } + } - @include bem.elem('content') { - display: block; - flex: 1 1 auto; - } + @include bem.elem('content') { + display: block; + flex: 1 1 auto; + } - @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); - } + @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); + } - @include bem.is('invalid') { - @include bem.elem('hint') { - color: props.get(vars.$error-hint-color); - } - } + @include bem.is('invalid') { + @include bem.elem('hint') { + color: props.get(vars.$error-hint-color); + } + } - @include bem.is('disabled') { - @include bem.elem('label', 'hint') { - color: props.get(vars.$disabled-color); - } - } + @include bem.is('disabled') { + @include bem.elem('label', 'hint') { + color: props.get(vars.$disabled-color); + } + } - @include bem.modifier('align-start', 'align-end') { - display: flex; - align-items: baseline; + @include bem.modifier('align-start', 'align-end') { + display: flex; + align-items: baseline; - @include bem.elem('label') { - display: inline-block; + @include bem.elem('label') { + display: inline-block; - @include bem.next-elem('content') { - margin-block-start: 0; - } - } - } + @include bem.next-elem('content') { + margin-block-start: 0; + } + } + } - @include bem.modifier('align-start') { - @include bem.elem('label') { - text-align: start; - } - } + @include bem.modifier('align-start') { + @include bem.elem('label') { + text-align: start; + } + } - @include bem.modifier('align-end') { - @include bem.elem('label') { - text-align: end; - } - } - } + @include bem.modifier('align-end') { + @include bem.elem('label') { + text-align: end; + } + } + } } diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss index 38837be..27e0f6a 100644 --- a/src/objects/_figure.scss +++ b/src/objects/_figure.scss @@ -7,20 +7,20 @@ @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); - border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-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: ''; - } - } - } + &::before { + display: block; + margin-block: -100em 100em; + content: ''; + } + } + } } diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index bdc7027..d27b595 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -7,54 +7,54 @@ @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); - font-feature-settings: props.get(vars.$feature-settings); - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - text-transform: none; - letter-spacing: normal; + @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: none; + letter-spacing: normal; - & + & { - margin-block-start: props.get(vars.$margin-bs-sibling); - } + & + & { + margin-block-start: props.get(vars.$margin-bs-sibling); + } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent .05em, - props.get(vars.$bg-color) .05em, - props.get(vars.$bg-color) .5em, - transparent .5em); - } + @include bem.elem('highlight') { + background-image: linear-gradient(to top, + transparent .05em, + props.get(vars.$bg-color) .05em, + props.get(vars.$bg-color) .5em, + transparent .5em); + } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - letter-spacing: props.get($letter-spacing); - } - } + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + } + } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - letter-spacing: props.get($letter-spacing); - transform: translateX(props.get(vars.$offset)); - } - } - } - } + @include bem.modifier('display') { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + transform: translateX(props.get(vars.$offset)); + } + } + } + } } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 90278c8..1d6df26 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -56,12 +56,12 @@ $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; $sizes: ( - 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, - 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, - 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, - 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, - 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, - 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, + 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, + 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, + 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, + 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, + 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, + 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, ) !default; $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; @@ -114,10 +114,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro $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, - '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, - '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, - '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, - '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, - '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, + '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, + '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, + '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, + '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, + '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, + '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, ) !default; diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 187938e..1941960 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -7,19 +7,19 @@ @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-linecap: round; - stroke-linejoin: round; - stroke-width: props.get(vars.$stroke-width); + @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') { - display: block; - } - } + @include bem.modifier('block') { + display: block; + } + } } diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index b62c353..b95148f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -9,127 +9,127 @@ @use 'lightbox.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('lightbox') { - flex: 1 1 auto; - min-block-size: 0; - - @include bem.elem('header') { - display: flex; - grid-area: header; - align-items: flex-start; - padding-block-start: props.get(vars.$pad); - padding-inline: props.get(vars.$pad); - } - - @include bem.elem('img') { - box-sizing: border-box; - display: block; - grid-area: content; - place-self: center; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$image--max-height); - padding: props.get(vars.$pad); - margin-inline: auto; - border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); - } - - @include bem.elem('thumbnails') { - display: none; - grid-area: thumbnails; - gap: props.get(vars.$thumbnails--spacing); - padding: props.get(vars.$pad); - margin-block-start: calc(-1 * props.get(vars.$pad)); - overflow: auto; - } - - @include bem.elem('close-btn') { - display: none; - flex: 0 0 auto; - margin-block-start: calc(-.5 * props.get(vars.$pad)); - margin-inline: auto calc(-.5 * props.get(vars.$pad)); - font-size: props.get(vars.$close-button--font-size); - } - - @include bem.elem('nav-btn') { - position: relative; - display: none; - align-self: center; - overflow: visible; - font-size: props.get(vars.$nav-button--font-size); - - &::before { - position: absolute; - inset-block-start: 50%; - display: block; - inline-size: props.get(vars.$nav-button--inline-size); - block-size: props.get(vars.$nav-button--block-size); - content: ''; - transform: translateY(-50%); - } - - @include bem.modifier('prev') { - grid-area: prev; - margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); - - &::before { - inset-inline-start: 0; - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('lightbox') { + flex: 1 1 auto; + min-block-size: 0; + + @include bem.elem('header') { + display: flex; + grid-area: header; + align-items: flex-start; + padding-block-start: props.get(vars.$pad); + padding-inline: props.get(vars.$pad); + } + + @include bem.elem('img') { + box-sizing: border-box; + display: block; + grid-area: content; + place-self: center; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$image--max-height); + padding: props.get(vars.$pad); + margin-inline: auto; + border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); + } + + @include bem.elem('thumbnails') { + display: none; + grid-area: thumbnails; + gap: props.get(vars.$thumbnails--spacing); + padding: props.get(vars.$pad); + margin-block-start: calc(-1 * props.get(vars.$pad)); + overflow: auto; + } + + @include bem.elem('close-btn') { + display: none; + flex: 0 0 auto; + margin-block-start: calc(-.5 * props.get(vars.$pad)); + margin-inline: auto calc(-.5 * props.get(vars.$pad)); + font-size: props.get(vars.$close-button--font-size); + } + + @include bem.elem('nav-btn') { + position: relative; + display: none; + align-self: center; + overflow: visible; + font-size: props.get(vars.$nav-button--font-size); + + &::before { + position: absolute; + inset-block-start: 50%; + display: block; + inline-size: props.get(vars.$nav-button--inline-size); + block-size: props.get(vars.$nav-button--block-size); + content: ''; + transform: translateY(-50%); + } + + @include bem.modifier('prev') { + grid-area: prev; + margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); + + &::before { + inset-inline-start: 0; + } + } - @include bem.modifier('next') { - grid-area: next; - margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); - - &::before { - inset-inline-end: 0; - } - } - } - - @include bem.modifier('interactive') { - display: grid; - grid-template-areas: - 'header header header' - 'prev content next' - 'thumbnails thumbnails thumbnails'; - grid-template-rows: auto minmax(0, 1fr) auto auto; - grid-template-columns: auto minmax(0, 1fr) auto; - - @include bem.modifier('fullscreen') { - block-size: props.get(vars.$fullscreen--height); - } - - @include bem.elem('img') { - display: none; - max-block-size: 100%; - margin-inline: 0; - - @include bem.multi('&:target', 'is' 'visible') { - display: block; - } - } - - @include bem.elem('thumbnails') { - display: flex; - } - - @include bem.elem('close-btn') { - display: block; - } - - @include bem.elem('nav-btn') { - display: block; - } - } - - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - color: props.get(vars.$static-themes, $theme, --text); - } - } - } + @include bem.modifier('next') { + grid-area: next; + margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); + + &::before { + inset-inline-end: 0; + } + } + } + + @include bem.modifier('interactive') { + display: grid; + grid-template-areas: + 'header header header' + 'prev content next' + 'thumbnails thumbnails thumbnails'; + grid-template-rows: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; + + @include bem.modifier('fullscreen') { + block-size: props.get(vars.$fullscreen--height); + } + + @include bem.elem('img') { + display: none; + max-block-size: 100%; + margin-inline: 0; + + @include bem.multi('&:target', 'is' 'visible') { + display: block; + } + } + + @include bem.elem('thumbnails') { + display: flex; + } + + @include bem.elem('close-btn') { + display: block; + } + + @include bem.elem('nav-btn') { + display: block; + } + } + + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + color: props.get(vars.$static-themes, $theme, --text); + } + } + } } diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index cc926e4..6d22aa8 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor $static-themes: props.def(--o-lightbox, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $lightbox-theme: --static-#{string.slice($theme, 3)}; + $lightbox-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $lightbox-theme: ( - --text: props.get(core.$transparent-colors, $theme, --800), - ) - )); + $static-themes: props.merge($static-themes, ( + $lightbox-theme: ( + --text: props.get(core.$transparent-colors, $theme, --800), + ) + )); } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 4d31874..f370067 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -8,95 +8,95 @@ @use 'menu.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('menu') { - display: flex; - flex-direction: column; - gap: props.get(vars.$spacing); - - @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); - text-transform: uppercase; - letter-spacing: .5px; - - @include bem.next-twin-elem { - 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); - 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)); - - &:link, - &:visited, - &:enabled { - color: currentColor; - - @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); - 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)) - 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.elem('header') { - &:link, - &:visited, - &:enabled { - color: props.get(vars.$header--label-color); - } - } - - @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); - padding-inline: props.get(vars.$item--pad-i); - } - - @include bem.elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: props.get(icon.$size); - } - - @include bem.modifier('pull') { - margin: calc(-1 * props.get(vars.$item--pad-i)); - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('menu') { + display: flex; + flex-direction: column; + gap: props.get(vars.$spacing); + + @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); + text-transform: uppercase; + letter-spacing: .5px; + + @include bem.next-twin-elem { + 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); + 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)); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + @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); + 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)) + 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.elem('header') { + &:link, + &:visited, + &:enabled { + color: props.get(vars.$header--label-color); + } + } + + @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); + padding-inline: props.get(vars.$item--pad-i); + } + + @include bem.elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: props.get(icon.$size); + } + + @include bem.modifier('pull') { + margin: calc(-1 * props.get(vars.$item--pad-i)); + } + } } diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index 59d4c51..ec03c62 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -9,183 +9,183 @@ @use 'navbar.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('navbar') { - display: flex; - block-size: props.get(vars.$block-size); - - @include bem.elem('item-content-text') { - margin-inline: props.get(vars.$item--pad-i-label); - } - - @include bem.elem('item-content') { - position: relative; - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$item--font-size); - color: currentColor; - white-space: nowrap; - border-radius: 100em; - - &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: -10; - display: block; - pointer-events: none; - visibility: hidden; - content: ''; - border-radius: 100em; - outline: props.get(vars.$default-theme, --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(vars.$default-theme, --key-focus, --outline); - } - } - - @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; - color: props.get(vars.$default-theme, --disabled, --label-color); - - &:link, - &:visited, - &:enabled { - color: props.get(vars.$default-theme, --label-color); - - &:hover, - &:focus-visible { - color: props.get(vars.$default-theme, --hover, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --hover, --bg-color); - } - } - - &:focus-visible { - @include bem.elem('item-content') { - &::after { - visibility: visible; - } - } - } - - &:active { - color: props.get(vars.$default-theme, --active, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --active, --bg-color); - } - } - } - - @include bem.is('selected') { - font-weight: bold; - color: props.get(vars.$default-theme, --selected, --disabled, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); - } - - &:link, - &:visited, - &:enabled { - color: props.get(vars.$default-theme, --selected, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --bg-color); - } - - &:hover, - &:focus-visible { - color: props.get(vars.$default-theme, --selected, --hover, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); - } - } - - &:active { - color: props.get(vars.$default-theme, --selected, --active, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); - } - } - } - } - } - - @include bem.modifier('hide-unselected') { - @include bem.elem('item') { - display: none; - - @include bem.is('selected') { - display: flex; - } - } - } - - @include bem.modifier('adapt') { - gap: props.get(vars.$spacing); - block-size: 100%; - - @include bem.elem('item') { - padding-inline: 0; - } - } - - - @include bem.modifier('align-block') { - margin-inline: calc(-1 * props.get(vars.$item--pad-i)); - } - - @include bem.modifier('quiet') { - @include bem.elem('item') { - @include bem.is('selected') { - color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); - } - - &:link, - &:visited, - &:enabled { - color: props.get(vars.$default-theme, --quiet, --selected, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); - } - - &:hover, - &:focus-visible { - color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); - } - } - - &:active { - color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); - - @include bem.elem('item-content') { - background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); - } - } - } - } - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('navbar') { + display: flex; + block-size: props.get(vars.$block-size); + + @include bem.elem('item-content-text') { + margin-inline: props.get(vars.$item--pad-i-label); + } + + @include bem.elem('item-content') { + position: relative; + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$item--font-size); + color: currentColor; + 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; + pointer-events: none; + outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); + content: ''; + border-radius: 100em; + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$default-theme, --key-focus, --outline); + } + } + + @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; + color: props.get(vars.$default-theme, --disabled, --label-color); + + &:link, + &:visited, + &:enabled { + color: props.get(vars.$default-theme, --label-color); + + &:hover, + &:focus-visible { + color: props.get(vars.$default-theme, --hover, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --hover, --bg-color); + } + } + + &:focus-visible { + @include bem.elem('item-content') { + &::after { + visibility: visible; + } + } + } + + &:active { + color: props.get(vars.$default-theme, --active, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --active, --bg-color); + } + } + } + + @include bem.is('selected') { + font-weight: bold; + color: props.get(vars.$default-theme, --selected, --disabled, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); + } + + &:link, + &:visited, + &:enabled { + color: props.get(vars.$default-theme, --selected, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --bg-color); + } + + &:hover, + &:focus-visible { + color: props.get(vars.$default-theme, --selected, --hover, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); + } + } + + &:active { + color: props.get(vars.$default-theme, --selected, --active, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); + } + } + } + } + } + + @include bem.modifier('hide-unselected') { + @include bem.elem('item') { + display: none; + + @include bem.is('selected') { + display: flex; + } + } + } + + @include bem.modifier('adapt') { + gap: props.get(vars.$spacing); + block-size: 100%; + + @include bem.elem('item') { + padding-inline: 0; + } + } + + + @include bem.modifier('align-block') { + margin-inline: calc(-1 * props.get(vars.$item--pad-i)); + } + + @include bem.modifier('quiet') { + @include bem.elem('item') { + @include bem.is('selected') { + color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); + } + + &:link, + &:visited, + &:enabled { + color: props.get(vars.$default-theme, --quiet, --selected, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); + } + + &:hover, + &:focus-visible { + color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); + } + } + + &:active { + color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); + + @include bem.elem('item-content') { + background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); + } + } + } + } + } + } + } } diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index fcdac80..8e18def 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -17,68 +17,68 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props $default-theme-override: () !default; $default-theme: map.deep-merge(( - --label-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --text), - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + ), - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), - --key-focus: ( - --label: props.get(core.$theme, --focus, --text), - --border: props.get(core.$theme, --focus, --border), - --outline: props.get(core.$theme, --focus, --outline), - ), + --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), - --label-color: props.get(core.$theme, --base, --50), + --selected: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), - --hover: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - ), + --hover: ( + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + ), - --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --label-color: props.get(core.$theme, --base, --50), - ), + --active: ( + --bg-color: props.get(core.$theme, --text-mute), + --label-color: props.get(core.$theme, --base, --50), + ), - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - ), - ), + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + ), + ), - --quiet: ( - --selected: ( - --bg-color: props.get(core.$theme, --accent, --200), - --label-color: props.get(core.$theme, --accent, --1100), + --quiet: ( + --selected: ( + --bg-color: props.get(core.$theme, --accent, --200), + --label-color: props.get(core.$theme, --accent, --1100), - --hover: ( - --bg-color: props.get(core.$theme, --accent, --300), - --label-color: props.get(core.$theme, --accent, --1200), - ), + --hover: ( + --bg-color: props.get(core.$theme, --accent, --300), + --label-color: props.get(core.$theme, --accent, --1200), + ), - --active: ( - --bg-color: props.get(core.$theme, --accent, --400), - --label-color: props.get(core.$theme, --accent, --1300), - ), + --active: ( + --bg-color: props.get(core.$theme, --accent, --400), + --label-color: props.get(core.$theme, --accent, --1300), + ), - --disabled: ( - --bg-color: props.get(core.$theme, --accent, --200), - --label-color: props.get(core.$theme, --accent, --800), - ), - ) - ) + --disabled: ( + --bg-color: props.get(core.$theme, --accent, --200), + --label-color: props.get(core.$theme, --accent, --800), + ), + ) + ) ), $default-theme-override) !default; $default-theme: props.def(--o-navbar, $default-theme, 'color'); diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 8a6cdb2..79c0f6c 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -7,57 +7,57 @@ @use '../core.vars' as core; @mixin styles { - @include bem.object('palette') { - display: flex; - block-size: 3em; + @include bem.object('palette') { + display: flex; + block-size: 3em; - @include bem.elem('item') { - flex: 1 1 auto; + @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)); + $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)); - @for $i from 1 through list.length($levels) { - $key: list.nth(map.keys($levels), $i); + @for $i from 1 through list.length($levels) { + $key: list.nth(map.keys($levels), $i); - &:nth-child(#{$i}) { - background-color: props.get(core.$theme, --base, $key); - } - } - } + &:nth-child(#{$i}) { + background-color: props.get(core.$theme, --base, $key); + } + } + } - @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') { - @for $i from 1 through list.length($levels) { - $key: list.nth(map.keys($levels), $i); + @include bem.modifier(string.slice($palette-name, 3)) { + @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, $key); - } - } - } - } - } - - @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') { - @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, $key); + } + } + } + } + } + + @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') { + @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); - } - } - } - } - } - } - } + &:nth-child(#{$i}) { + background-color: props.get(core.$theme, #{$palette-name}-static, $key); + } + } + } + } + } + } + } } diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss index e148f21..80fc913 100644 --- a/src/objects/_placeholders.scss +++ b/src/objects/_placeholders.scss @@ -7,16 +7,16 @@ @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; - background-color: currentColor; - border-radius: props.get(vars.$rounding); - opacity: props.get(vars.$opacity); - } - } + @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); + } + } } diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 4356dff..2746477 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -7,39 +7,39 @@ @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; - 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); - transform: translate(var(--x), var(--y)); - 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.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)); - @include bem.modifier('up-left') { - transform: translate(var(--x), calc(var(--y) - 100%)); - } + @include bem.modifier('up-left') { + transform: translate(var(--x), calc(var(--y) - 100%)); + } - @include bem.modifier('up-right') { - transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); - } + @include bem.modifier('up-right') { + transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); + } - @include bem.modifier('down-right') { - transform: translate(calc(var(--x) - 100%), var(--y)); - } - } + @include bem.modifier('down-right') { + transform: translate(calc(var(--x) - 100%), var(--y)); + } + } } diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index aef6b92..8327a15 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -8,147 +8,147 @@ @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); - 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.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; + @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; - &::after { - 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; - } - } + &::after { + 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; + } + } - @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; - 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); + @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); - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$hover--circle-border-color); - } - } + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$hover--circle-border-color); + } + } - &:checked { - @include bem.sibling-elem('circle') { - &::after { - transform: scale(.44); - } - } - } + &:checked { + @include bem.sibling-elem('circle') { + &::after { + transform: scale(.44); + } + } + } - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); - &::after { - background-color: props.get(vars.$disabled--circle-bg-color); - } - } - } + &::after { + background-color: props.get(vars.$disabled--circle-bg-color); + } + } + } - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + &:focus-visible { + @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)) - props.get(vars.$key-focus--outline-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)) + props.get(vars.$key-focus--outline-color); + } + } + } - @include bem.modifier('standalone') { - @include bem.elem('circle') { - margin-block-start: 0; - } - } + @include bem.modifier('standalone') { + @include bem.elem('circle') { + margin-block-start: 0; + } + } - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$accent--circle-border-color); - } + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$accent--circle-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$accent--hover--circle-border-color); - } - } - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$accent--hover--circle-border-color); + } + } + } - &:disabled { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); + &:disabled { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); - &::after { - background-color: props.get(vars.$disabled--circle-bg-color); - } - } + &::after { + background-color: props.get(vars.$disabled--circle-bg-color); + } + } - &:checked { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); - } - } - } - } - } - } + &:checked { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); + } + } + } + } + } + } } diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 6c60777..4a1feda 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss @@ -8,83 +8,83 @@ @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; - flex-direction: column; - gap: props.get(vars.$spacing); + @include bem.object('side-nav') { + display: flex; + flex-direction: column; + gap: props.get(vars.$spacing); - @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); - text-transform: uppercase; - letter-spacing: .5px; + @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); + text-transform: uppercase; + letter-spacing: .5px; - @include bem.next-twin-elem { - margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); - } - } + @include bem.next-twin-elem { + margin-block-start: calc(props.get(vars.$separator) + 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--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)); + @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--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)); - &:link, - &:visited, - &:enabled { - color: currentColor; + &:link, + &:visited, + &:enabled { + color: currentColor; - @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); - } + @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); - background-color: props.get(vars.$item--active--bg-color); - } + &:active { + 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)) - props.get(vars.$item--key-focus--outline-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)) + props.get(vars.$item--key-focus--outline-color); + } + } - @include bem.next-elem('header') { - margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); - } - } + @include bem.next-elem('header') { + margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); + } + } - @include bem.elem('header') { - &:link, - &:visited, - &:enabled { - color: props.get(vars.$header--label-color); - } - } + @include bem.elem('header') { + &:link, + &:visited, + &:enabled { + color: props.get(vars.$header--label-color); + } + } - @include bem.elem('separator') { - block-size: props.get(vars.$separator); - } + @include bem.elem('separator') { + block-size: props.get(vars.$separator); + } - @include bem.elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: props.get(icon.$size); - } - } + @include bem.elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: props.get(icon.$size); + } + } } diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index 1fcdf02..4e4aa42 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -9,19 +9,19 @@ @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); - background-color: props.get(vars.$default); - border-radius: 10em; + @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; - @each $theme in map.keys(props.get(vars.$themes)) { - @include bem.is(string.slice($theme, 3)) { - background-color: props.get(vars.$themes, $theme); - } - } - } + @each $theme in map.keys(props.get(vars.$themes)) { + @include bem.is(string.slice($theme, 3)) { + background-color: props.get(vars.$themes, $theme); + } + } + } } diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index 6289145..55b446a 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; $themes-config: ( - accent: --accent, - positive: --positive, - negative: --negative, - warning: --warning, + accent: --accent, + positive: --positive, + negative: --negative, + warning: --warning, ) !default; $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), - )); - } + @if $theme != --base { + $themes: props.merge($themes, ( + --#{$theme}: props.get(core.$theme, $key, --700), + )); + } } diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 8612d31..48cec24 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -8,181 +8,181 @@ @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); - 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; - - &::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: ''; - 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; - } - } - - @include bem.elem('label') { - margin-inline-start: props.get(vars.$label-gap); - } - - @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); - - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } - - @include bem.sibling-elem('indicator') { - &::after { - border-color: props.get(vars.$hover--handle-border-color); - } - } - } - - &:checked { - @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); - } - } - - &:hover, - &:focus-visible { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$hover--handle-border-color); + @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; + + &::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: ''; + 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; + } + } + + @include bem.elem('label') { + margin-inline-start: props.get(vars.$label-gap); + } + + @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); + + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } + + @include bem.sibling-elem('indicator') { + &::after { + border-color: props.get(vars.$hover--handle-border-color); + } + } + } + + &:checked { + @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); + } + } + + &:hover, + &:focus-visible { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$hover--handle-border-color); - &::after { - border-color: props.get(vars.$hover--handle-border-color); - } - } - } - } - - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } - - @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); - } - } - - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$disabled--handle-border-color); - - &::after { - border-color: props.get(vars.$disabled--handle-border-color); - } - } - } - } - - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + &::after { + border-color: props.get(vars.$hover--handle-border-color); + } + } + } + } + + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } + + @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); + } + } + + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$disabled--handle-border-color); + + &::after { + border-color: props.get(vars.$disabled--handle-border-color); + } + } + } + } + + &:focus-visible { + @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)) - props.get(vars.$key-focus--outline-color); - } - } - } - - @include bem.modifier('standalone') { - @include bem.elem('indicator') { - margin-block-start: 0; - } - } - - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$accent--handle-border-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)) + props.get(vars.$key-focus--outline-color); + } + } + } + + @include bem.modifier('standalone') { + @include bem.elem('indicator') { + margin-block-start: 0; + } + } + + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$accent--handle-border-color); - &::after { - border-color: props.get(vars.$accent--handle-border-color); - } - } + &::after { + border-color: props.get(vars.$accent--handle-border-color); + } + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$accent--hover--handle-border-color); - - &::after { - border-color: props.get(vars.$accent--hover--handle-border-color); - } - } - } - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$accent--hover--handle-border-color); + + &::after { + border-color: props.get(vars.$accent--hover--handle-border-color); + } + } + } + } - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } - &:checked { - @include bem.sibling-elem('indicator') { - background-color: props.get(vars.$disabled--handle-border-color); + &:checked { + @include bem.sibling-elem('indicator') { + background-color: props.get(vars.$disabled--handle-border-color); - &::after { - border-color: props.get(vars.$disabled--handle-border-color); - } - } - } - } - } - } - } + &::after { + border-color: props.get(vars.$disabled--handle-border-color); + } + } + } + } + } + } + } } diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index 131c832..a9daaae 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss @@ -9,105 +9,105 @@ @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') { - min-inline-size: 0; - block-size: props.get(vars.$block-size); - overflow: hidden; + @include bem.object('tabbar') { + min-inline-size: 0; + block-size: props.get(vars.$block-size); + overflow: hidden; - &::after { - display: block; - block-size: props.get(vars.$indicator--width); - margin-block-start: calc(-1 * props.get(vars.$indicator--width)); - content: ''; - background-color: props.get(vars.$railing--bg-color); - } + &::after { + display: block; + block-size: props.get(vars.$indicator--width); + margin-block-start: calc(-1 * props.get(vars.$indicator--width)); + content: ''; + background-color: props.get(vars.$railing--bg-color); + } - @include bem.elem('tabs') { - display: flex; - block-size: 100%; - margin-inline: calc(-.5 * props.get(vars.$spacing)); - overflow-inline: auto; - } + @include bem.elem('tabs') { + display: flex; + block-size: 100%; + margin-inline: calc(-.5 * props.get(vars.$spacing)); + overflow-inline: auto; + } - @include bem.modifier('quiet') { - box-shadow: none; - } + @include bem.modifier('quiet') { + box-shadow: none; + } - @include bem.modifier('adapt') { - block-size: 100%; - } + @include bem.modifier('adapt') { + block-size: 100%; + } - @include bem.elem('tab') { - position: relative; - display: flex; - align-items: center; - padding-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(.5 * props.get(vars.$spacing)); + color: props.get(vars.$tab--text-color); + white-space: nowrap; - &::before { - 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%); - } + &::before { + 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%); + } - &::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: ''; - background-color: props.get(vars.$tab--selected--text-color); - } + &::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: ''; + background-color: props.get(vars.$tab--selected--text-color); + } - &:link, - &:visited { - &:hover, - &:active, - &:focus-visible { - color: props.get(vars.$tab--selected--text-color); - } + &:link, + &:visited { + &:hover, + &:active, + &:focus-visible { + color: props.get(vars.$tab--selected--text-color); + } - &:focus-visible { - &::before { - color: props.get(vars.$key-focus--text-color); - text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } + &:focus-visible { + &::before { + color: props.get(vars.$key-focus--text-color); + text-decoration: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } - @include bem.is('selected') { - color: props.get(vars.$tab--selected--text-color); + @include bem.is('selected') { + color: props.get(vars.$tab--selected--text-color); - &::after { - display: block; - } - } - } + &::after { + display: block; + } + } + } - @include bem.modifier('accent') { - @include bem.elem('tab') { - &::after { - background-color: props.get(vars.$tab--accent--text-color); - } + @include bem.modifier('accent') { + @include bem.elem('tab') { + &::after { + background-color: props.get(vars.$tab--accent--text-color); + } - @include bem.is('selected') { - color: props.get(vars.$tab--accent--text-color); - } - } - } - } + @include bem.is('selected') { + color: props.get(vars.$tab--accent--text-color); + } + } + } + } } diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 2b63737..9e4891d 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -7,141 +7,141 @@ @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; - border-collapse: separate; + @include bem.object('table') { + border-spacing: 0; + border-collapse: separate; - @include bem.modifier('fixed') { - table-layout: fixed; - } + @include bem.modifier('fixed') { + table-layout: fixed; + } - @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; - text-transform: props.get(vars.$heading--text-transform); - letter-spacing: props.get(vars.$heading--letter-spacing); - } + @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; + 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; - border-block-start-width: props.get(vars.$border-width); + @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') { - border-inline-end-width: props.get(vars.$border-width); - } - } + @include bem.modifier('divider') { + border-inline-end-width: props.get(vars.$border-width); + } + } - @include bem.elem('row') { - &:last-child { - @include bem.elem('cell') { - border-block-end-width: props.get(vars.$border-width); - } - } - } + @include bem.elem('row') { + &:last-child { + @include bem.elem('cell') { + border-block-end-width: props.get(vars.$border-width); + } + } + } - @include bem.modifier('flush') { - @include bem.elem('head-cell', 'cell') { - &:first-child { - padding-inline-start: 0; - } + @include bem.modifier('flush') { + @include bem.elem('head-cell', 'cell') { + &:first-child { + padding-inline-start: 0; + } - &:last-child { - padding-inline-end: 0; - } - } - } + &:last-child { + padding-inline-end: 0; + } + } + } - @include bem.modifier('box') { - @include bem.elem('cell') { - background-color: props.get(vars.$box--bg-color); + @include bem.modifier('box') { + @include bem.elem('cell') { + background-color: props.get(vars.$box--bg-color); - &:first-child { - border-inline-start-width: props.get(vars.$border-width); - } + &:first-child { + border-inline-start-width: props.get(vars.$border-width); + } - &:last-child { - border-inline-end-width: props.get(vars.$border-width); - } - } + &:last-child { + border-inline-end-width: props.get(vars.$border-width); + } + } - @include bem.elem('row') { - &:first-child { - @include bem.elem('cell') { - &:first-child { - border-start-start-radius: props.get(vars.$rounding); - } + @include bem.elem('row') { + &:first-child { + @include bem.elem('cell') { + &:first-child { + border-start-start-radius: props.get(vars.$rounding); + } - &:last-child { - border-start-end-radius: props.get(vars.$rounding); - } - } - } + &:last-child { + border-start-end-radius: props.get(vars.$rounding); + } + } + } - &:last-child { - @include bem.elem('cell') { - &:first-child { - border-end-start-radius: props.get(vars.$rounding); - } + &:last-child { + @include bem.elem('cell') { + &:first-child { + border-end-start-radius: props.get(vars.$rounding); + } - &:last-child { - border-end-end-radius: props.get(vars.$rounding); - } - } - } - } - } + &:last-child { + border-end-end-radius: props.get(vars.$rounding); + } + } + } + } + } - @include bem.modifier('interactive') { - @include bem.elem('row') { - @include bem.elem('cell') { - cursor: pointer; - } + @include bem.modifier('interactive') { + @include bem.elem('row') { + @include bem.elem('cell') { + cursor: pointer; + } - &:hover { - @include bem.elem('cell') { - background-color: props.get(vars.$hover--bg-color); - } - } + &:hover { + @include bem.elem('cell') { + background-color: props.get(vars.$hover--bg-color); + } + } - &:active { - @include bem.elem('cell') { - background-color: props.get(vars.$active--bg-color); - } - } - } + &:active { + @include bem.elem('cell') { + background-color: props.get(vars.$active--bg-color); + } + } + } - @include bem.modifier('box') { - @include bem.elem('row') { - &:hover { - @include bem.elem('cell') { - background-color: props.get(vars.$box--hover--bg-color); - } - } + @include bem.modifier('box') { + @include bem.elem('row') { + &:hover { + @include bem.elem('cell') { + background-color: props.get(vars.$box--hover--bg-color); + } + } - &:active { - @include bem.elem('cell') { - background-color: props.get(vars.$box--active--bg-color); - } - } - } - } - } + &:active { + @include bem.elem('cell') { + background-color: props.get(vars.$box--active--bg-color); + } + } + } + } + } - @include bem.modifier('sm') { - @include bem.elem('head-cell', 'cell') { - padding-block: props.get(vars.$pad-b--sm); - } - } - } + @include bem.modifier('sm') { + @include bem.elem('head-cell', 'cell') { + padding-block: props.get(vars.$pad-b--sm); + } + } + } } diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index a52050c..b89e148 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -7,181 +7,181 @@ @use 'text-field.vars' as vars; @mixin -invalid { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); + $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') { - border-color: props.get(vars.$error--hover--border-color); - } - } - - &:focus { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$error--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.$error--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + } + + &:hover { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$error--hover--border-color); + } + } + + &:focus { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$error--focus--border-color); + } + } } @mixin -keyboard-focus { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$key-focus--border-color); - outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); - //outline-offset: props.get(vars.$focus --border); - } + @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; - background-color: props.get(vars.$bg-color); - border-radius: props.get(vars.$rounding); - - @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); - } - - @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; - background-color: transparent; - border: 1px solid transparent; - - &::placeholder { - font-style: italic; - color: props.get(vars.$placeholder-color); - opacity: 1; - } - - &:hover { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$hover--border-color); - } - } - - &: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); - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - } - } - - &:invalid { - @include -invalid; - } - - &:focus-visible, - &:invalid:focus-visible { - @include -keyboard-focus; - } - } - - @include bem.modifier('extended') { - padding: props.get(vars.$extended--pad); - - @include bem.multi('&', 'elem' 'bg') { - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); - } - - @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.modifier('pill') { - @include bem.multi('&', 'elem' 'bg') { - border-radius: 100em; - } - - @include bem.elem('native') { - padding-inline: props.get(vars.$pad-i-pill); - - &:focus { - @include bem.sibling-elem('bg') { - border-radius: 100em; - } - } - } - - @include bem.modifier('extended') { - @include bem.elem('native') { - padding-inline: props.get(vars.$pad-i); - } - } - } - - @include bem.is('invalid') { - @include bem.elem('native') { - @include -invalid; - - &:focus-visible { - @include -keyboard-focus; - } - } - } - - @include bem.is('disabled') { - background-color: props.get(vars.$disabled--bg-color); - - @include bem.elem('native') { - color: props.get(vars.$disabled--text-color); - - &::placeholder { - color: props.get(vars.$disabled--placeholder-color); - } - } - - @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') { - border-color: props.get(vars.$disabled--border-color); - } - } - } - - @include bem.elem('native') { - &:invalid { - @include bem.sibling-elem('bg') { - border-color: props.get(vars.$disabled--border-color); - } - } - } - } - } + position: relative; + min-inline-size: 0; + background-color: props.get(vars.$bg-color); + border-radius: props.get(vars.$rounding); + + @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); + } + + @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; + background-color: transparent; + border: 1px solid transparent; + + &::placeholder { + font-style: italic; + color: props.get(vars.$placeholder-color); + opacity: 1; + } + + &:hover { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$hover--border-color); + } + } + + &: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); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + } + } + + &:invalid { + @include -invalid; + } + + &:focus-visible, + &:invalid:focus-visible { + @include -keyboard-focus; + } + } + + @include bem.modifier('extended') { + padding: props.get(vars.$extended--pad); + + @include bem.multi('&', 'elem' 'bg') { + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); + } + + @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.modifier('pill') { + @include bem.multi('&', 'elem' 'bg') { + border-radius: 100em; + } + + @include bem.elem('native') { + padding-inline: props.get(vars.$pad-i-pill); + + &:focus { + @include bem.sibling-elem('bg') { + border-radius: 100em; + } + } + } + + @include bem.modifier('extended') { + @include bem.elem('native') { + padding-inline: props.get(vars.$pad-i); + } + } + } + + @include bem.is('invalid') { + @include bem.elem('native') { + @include -invalid; + + &:focus-visible { + @include -keyboard-focus; + } + } + } + + @include bem.is('disabled') { + background-color: props.get(vars.$disabled--bg-color); + + @include bem.elem('native') { + color: props.get(vars.$disabled--text-color); + + &::placeholder { + color: props.get(vars.$disabled--placeholder-color); + } + } + + @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') { + border-color: props.get(vars.$disabled--border-color); + } + } + } + + @include bem.elem('native') { + &:invalid { + @include bem.sibling-elem('bg') { + border-color: props.get(vars.$disabled--border-color); + } + } + } + } + } } diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 73a8cb0..60a98af 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -9,96 +9,96 @@ @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; - border-radius: props.get(vars.$rounding); - outline: props.get(vars.$border-color) solid props.get(vars.$border-width); - outline-offset: calc(-1 * props.get(vars.$border-width)); - opacity: .75; + @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); + opacity: .75; - &:hover, - &:active, - &:focus-visible { - outline-color: props.get(vars.$hover--border-color); - opacity: 1; - } + &:hover, + &:active, + &:focus-visible { + outline-color: props.get(vars.$hover--border-color); + opacity: 1; + } - @include bem.is('selected') { - $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); + @include bem.is('selected') { + $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); - margin: $focus-border-offset; - border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - outline: none; - opacity: 1; - } + margin: $focus-border-offset; + outline: none; + border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + opacity: 1; + } - @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; - } + @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; + } - @include bem.elem('icon') { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); - } + @include bem.elem('icon') { + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); + } - &:focus-visible { - $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); + &:focus-visible { + $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); - margin: $focus-border-offset; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - outline-offset: 0; - 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); - } + 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)) + props.get(vars.$key-focus--outline-color); + } - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - outline-color: props.get(vars.$static-themes, $theme, --border); + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + outline-color: props.get(vars.$static-themes, $theme, --border); - &:hover, - &:active, - &:focus-visible { - outline-color: props.get(vars.$static-themes, $theme, --hover, --border); - } + &:hover, + &:active, + &:focus-visible { + outline-color: props.get(vars.$static-themes, $theme, --hover, --border); + } - @include bem.is('selected') { - border-color: props.get(vars.$static-themes, $theme, --selected, --border); - } + @include bem.is('selected') { + border-color: props.get(vars.$static-themes, $theme, --selected, --border); + } - &:focus-visible { - border-color: transparent; - outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); - 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); - } - } - } - } + &: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)) + props.get(vars.$static-themes, $theme, --key-focus, --outline); + } + } + } + } } diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index 60bf2e9..e49e52e 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def $static-themes: props.def(--o-thumbnail, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $thumbnail-theme: --static-#{string.slice($theme, 3)}; + $thumbnail-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $thumbnail-theme: ( - --border: props.get(core.$transparent-colors, $theme, --400), + $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), - ), + --hover: ( + --border: props.get(core.$transparent-colors, $theme, --500), + ), - --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), - ), - ) - )); + --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), + ), + ) + )); } diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index 91a7785..a99add8 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss @@ -7,20 +7,20 @@ @use 'blockquotes.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope('blockquotes') { - blockquote { - padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); - margin-block: props.get(vars.$margin-bs) 0; - margin-inline: 1px 0; - border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); - } + @include bem.scope('blockquotes') { + blockquote { + padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); + margin-block: props.get(vars.$margin-bs) 0; + margin-inline: 1px 0; + border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); + } - @include bem.modifier('compact') { - blockquote { - padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); - } - } - } + @include bem.modifier('compact') { + blockquote { + padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); + } + } + } } diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss index 6d32212..f307f58 100644 --- a/src/scopes/_body.scss +++ b/src/scopes/_body.scss @@ -7,53 +7,53 @@ @use 'body.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.scope('body') { - font-size: props.get(vars.$font-size); - line-height: props.get(vars.$line-height); - - strong { - color: props.get(vars.$strong--text-color); - } - - p, - ul, - ol { - max-inline-size: props.get(vars.$paragraph--max-inline-size); - margin-block-start: props.get(vars.$paragraph--margin-bs); - } - - ul, - ol { - box-sizing: border-box; - } - - img { - display: block; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$img--max-block-size); - margin-block-start: props.get(vars.$paragraph--margin-bs); - } - - figure { - margin-block-start: props.get(vars.$paragraph--margin-bs); - - img { - margin-block: 0; - } - } - - hr { - margin-block: calc(2 * props.get(vars.$paragraph--margin-bs)); - } - - table, - pre, - blockquote { - margin-block-start: props.get(vars.$paragraph--margin-bs); - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.scope('body') { + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$line-height); + + strong { + color: props.get(vars.$strong--text-color); + } + + p, + ul, + ol { + max-inline-size: props.get(vars.$paragraph--max-inline-size); + margin-block-start: props.get(vars.$paragraph--margin-bs); + } + + ul, + ol { + box-sizing: border-box; + } + + img { + display: block; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$img--max-block-size); + margin-block-start: props.get(vars.$paragraph--margin-bs); + } + + figure { + margin-block-start: props.get(vars.$paragraph--margin-bs); + + img { + margin-block: 0; + } + } + + hr { + margin-block: calc(2 * props.get(vars.$paragraph--margin-bs)); + } + + table, + pre, + blockquote { + margin-block-start: props.get(vars.$paragraph--margin-bs); + } + } } diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index 9b2a63d..8147a14 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -7,34 +7,34 @@ @use 'code.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope('code') { - code { - padding-block: props.get(vars.$inline--pad-b); - padding-inline: props.get(vars.$inline--pad-i); - color: props.get(vars.$inline--fg); - background-color: props.get(vars.$inline--bg); - border-radius: props.get(vars.$inline--rounding); - } + @include bem.scope('code') { + code { + padding-block: props.get(vars.$inline--pad-b); + padding-inline: props.get(vars.$inline--pad-i); + color: props.get(vars.$inline--fg); + background-color: props.get(vars.$inline--bg); + border-radius: props.get(vars.$inline--rounding); + } - pre { - padding-block: props.get(vars.$block--pad-b); - padding-inline: props.get(vars.$block--pad-i); - margin-block: props.get(vars.$block--margin-bs) 0; - margin-inline: 0; - color: props.get(vars.$block--fg); - background-color: props.get(vars.$block--bg); - border-radius: props.get(vars.$block--rounding); + pre { + padding-block: props.get(vars.$block--pad-b); + padding-inline: props.get(vars.$block--pad-i); + margin-block: props.get(vars.$block--margin-bs) 0; + margin-inline: 0; + color: props.get(vars.$block--fg); + background-color: props.get(vars.$block--bg); + border-radius: props.get(vars.$block--rounding); - code { - display: inline-block; - padding: 0; - margin-inline-end: props.get(vars.$block--pad-i); - color: currentColor; - background-color: transparent; - border-radius: 0; - } - } - } + code { + display: inline-block; + padding: 0; + margin-inline-end: props.get(vars.$block--pad-i); + color: currentColor; + background-color: transparent; + border-radius: 0; + } + } + } } diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss index 981a8b6..d931820 100644 --- a/src/scopes/_figures.scss +++ b/src/scopes/_figures.scss @@ -4,18 +4,18 @@ @use '../objects/figure.vars' as figure; @mixin styles { - @include bem.scope('figures') { - figcaption { - padding-block: props.get(figure.$pad-b); - font-size: props.get(figure.$font-size); - color: props.get(figure.$text-color); - border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); + @include bem.scope('figures') { + figcaption { + padding-block: props.get(figure.$pad-b); + font-size: props.get(figure.$font-size); + color: props.get(figure.$text-color); + border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); - &::before { - display: block; - margin-block: -100em 100em; - content: ''; - } - } - } + &::before { + display: block; + margin-block: -100em 100em; + content: ''; + } + } + } } diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 32559cd..f8a7854 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -4,64 +4,64 @@ @use '../objects/heading.vars' as heading; @mixin styles { - /* stylelint-disable-next-line scss/dollar-variable-pattern */ - $-size-map: ( - xs: h6, - sm: h5, - md: h4, - lg: h3, - xl: h2, - xxl: h1, - ); + /* stylelint-disable-next-line scss/dollar-variable-pattern */ + $-size-map: ( + xs: h6, + sm: h5, + md: h4, + lg: h3, + xl: h2, + xxl: h1, + ); - @include bem.scope('headings') { - h1, - h2, - h3, - h4, - h5, - h6 { - display: block; - margin-block-start: props.get(heading.$margin-bs); - font-family: props.get(heading.$font-family); - font-weight: props.get(heading.$font-weight); - font-feature-settings: props.get(heading.$feature-settings); - line-height: props.get(heading.$line-height); - text-transform: none; - letter-spacing: normal; - transform: translateX(props.get(heading.$offset)); - } + @include bem.scope('headings') { + h1, + h2, + h3, + h4, + h5, + h6 { + display: block; + margin-block-start: props.get(heading.$margin-bs); + font-family: props.get(heading.$font-family); + font-weight: props.get(heading.$font-weight); + font-feature-settings: props.get(heading.$feature-settings); + line-height: props.get(heading.$line-height); + text-transform: none; + letter-spacing: normal; + transform: translateX(props.get(heading.$offset)); + } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent .15em, - props.get(heading.$bg-color) .15em, - props.get(heading.$bg-color) .6em, - transparent .6em); - } + @include bem.elem('highlight') { + background-image: linear-gradient(to top, + transparent .15em, + props.get(heading.$bg-color) .15em, + props.get(heading.$bg-color) .6em, + transparent .6em); + } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { - #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); - font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - letter-spacing: props.get($letter-spacing); - } - } + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { + #{map.get($-size-map, $mod)} { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + } + } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { - #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); - font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - letter-spacing: props.get($letter-spacing); - } - } - } - } + @include bem.modifier('display') { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { + #{map.get($-size-map, $mod)} { + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); + font-feature-settings: props.get($feature-settings); + line-height: props.get($line-height); + letter-spacing: props.get($letter-spacing); + } + } + } + } } diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 78f06be..cee1639 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -11,170 +11,170 @@ @use 'implicit.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @layer scope { - html { - accent-color: props.get(core.$theme, --accent, --600); - scrollbar-color: props.get(core.$theme, --text-disabled) transparent; - } - - body { - padding: 0; - margin: 0; - font-family: props.get(vars.$body--font-family); - font-size: props.get(vars.$body--font-size); - font-feature-settings: props.get(vars.$body--feature-settings); - line-height: props.get(vars.$body--line-height); - color: props.get(core.$theme, --text); - background-color: props.get(core.$theme, --bg-base); - } - - pre, - code { - font-family: props.get(vars.$code--font-family); - font-size: props.get(vars.$code--font-size); - font-feature-settings: props.get(vars.$code--feature-settings); - line-height: props.get(vars.$code--line-height); - } - - pre { - margin: 0; - overflow-x: auto; - - code { - font-size: 1em; - color: currentColor; - } - } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin-block: props.get(vars.$heading--margin-bs) 0; - font-family: props.get(vars.$heading--font-family); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); - font-feature-settings: props.get(vars.$heading--feature-settings); - line-height: props.get(vars.$heading--line-height); - color: props.get(vars.$heading--color); - - & + & { - margin-block-start: props.get(vars.$heading--margin-bs-sibling); - } - } - - p { - margin-block: props.get(vars.$paragraph--margin-bs) 0; - - &:empty { - display: none; - } - } - - strong { - font-weight: bold; - } - - small { - font-size: props.get(vars.$small--font-size); - } - - ul, - ol { - padding: 0; - margin: 0; - list-style: none; - } - - li { - padding: 0; - margin: 0; - } - - :focus, - :focus-visible { - outline: 0; - } - - :link, - :visited { - color: currentColor; - text-decoration: none; - } - - - button, - input, - textarea { - box-sizing: content-box; - padding: 0; - margin: 0; - font-family: inherit; - font-size: 1em; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - color: currentColor; - text-align: inherit; - text-transform: inherit; - appearance: none; - background: none; - border: 0; - - &::-moz-focus-inner { - border: 0; - } - } - - input, - textarea { - &::placeholder { - color: props.get(core.$theme, --text-mute); - opacity: 1; - } - - &:disabled { - color: props.get(core.$theme, --text-disabled); - } - } - - textarea { - block-size: calc(1em * props.get(core.$font--standard--line-height)); - } - - hr { - block-size: props.get(core.$border-width--thin); - margin: 0; - background-color: props.get(core.$theme, --border); - border: 0; - } - - figure { - padding: 0; - margin: 0; - } - - @each $theme in map.keys(props.get(core.$transparent-colors)) { - .t-static-#{string.slice($theme, 3)} { - color: props.get(core.$transparent-colors, $theme, --800); - - h1, - h2, - h3, - h4, - h5, - h6 { - color: props.get(core.$transparent-colors, $theme, --900); - } - - hr { - color: props.get(core.$transparent-colors, $theme, --400); - } - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @layer scope { + html { + accent-color: props.get(core.$theme, --accent, --600); + scrollbar-color: props.get(core.$theme, --text-disabled) transparent; + } + + body { + padding: 0; + margin: 0; + font-family: props.get(vars.$body--font-family); + font-size: props.get(vars.$body--font-size); + font-feature-settings: props.get(vars.$body--feature-settings); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); + } + + pre, + code { + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); + font-feature-settings: props.get(vars.$code--feature-settings); + line-height: props.get(vars.$code--line-height); + } + + pre { + margin: 0; + overflow-x: auto; + + code { + font-size: 1em; + color: currentColor; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-block: props.get(vars.$heading--margin-bs) 0; + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + font-feature-settings: props.get(vars.$heading--feature-settings); + line-height: props.get(vars.$heading--line-height); + color: props.get(vars.$heading--color); + + & + & { + margin-block-start: props.get(vars.$heading--margin-bs-sibling); + } + } + + p { + margin-block: props.get(vars.$paragraph--margin-bs) 0; + + &:empty { + display: none; + } + } + + strong { + font-weight: bold; + } + + small { + font-size: props.get(vars.$small--font-size); + } + + ul, + ol { + padding: 0; + margin: 0; + list-style: none; + } + + li { + padding: 0; + margin: 0; + } + + :focus, + :focus-visible { + outline: 0; + } + + :link, + :visited { + color: currentColor; + text-decoration: none; + } + + + button, + input, + textarea { + box-sizing: content-box; + padding: 0; + margin: 0; + font-family: inherit; + font-size: 1em; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + color: currentColor; + text-align: inherit; + text-transform: inherit; + appearance: none; + background: none; + border: 0; + + &::-moz-focus-inner { + border: 0; + } + } + + input, + textarea { + &::placeholder { + color: props.get(core.$theme, --text-mute); + opacity: 1; + } + + &:disabled { + color: props.get(core.$theme, --text-disabled); + } + } + + textarea { + block-size: calc(1em * props.get(core.$font--standard--line-height)); + } + + hr { + block-size: props.get(core.$border-width--thin); + margin: 0; + background-color: props.get(core.$theme, --border); + border: 0; + } + + figure { + padding: 0; + margin: 0; + } + + @each $theme in map.keys(props.get(core.$transparent-colors)) { + .t-static-#{string.slice($theme, 3)} { + color: props.get(core.$transparent-colors, $theme, --800); + + h1, + h2, + h3, + h4, + h5, + h6 { + color: props.get(core.$transparent-colors, $theme, --900); + } + + hr { + color: props.get(core.$transparent-colors, $theme, --400); + } + } + } + } } diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 4ff242c..9ade0c2 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -9,111 +9,111 @@ @use 'links.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope('links') { - :link, - :visited { - color: currentColor; - text-decoration: underline; - text-decoration-thickness: props.get(vars.$underline-width); - text-decoration-color: props.get(vars.$underline-color); - border-radius: props.get(vars.$rounding-sm); - box-decoration-break: clone; + @include bem.scope('links') { + :link, + :visited { + color: currentColor; + text-decoration: underline; + text-decoration-thickness: props.get(vars.$underline-width); + text-decoration-color: props.get(vars.$underline-color); + border-radius: props.get(vars.$rounding-sm); + box-decoration-break: clone; - &:hover { - text-decoration: underline; - text-decoration-skip-ink: none; - text-decoration-thickness: props.get(vars.$hover--underline-width); - } + &:hover { + text-decoration: underline; + text-decoration-thickness: props.get(vars.$hover--underline-width); + text-decoration-skip-ink: none; + } - &:focus-visible { - color: props.get(vars.$key-focus--text-color); - text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } + &:focus-visible { + color: props.get(vars.$key-focus--text-color); + text-decoration: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } - @include bem.modifier('invisible') { - :link, - :visited { - text-decoration: none; - } - } + @include bem.modifier('invisible') { + :link, + :visited { + text-decoration: none; + } + } - @include bem.modifier('colored') { - :link { - color: props.get(vars.$colored--text-color); - text-decoration-color: props.get(vars.$colored--underline-color); + @include bem.modifier('colored') { + :link { + color: props.get(vars.$colored--text-color); + text-decoration-color: props.get(vars.$colored--underline-color); - &:hover { - color: props.get(vars.$colored--hover--text-color); - } - } + &:hover { + color: props.get(vars.$colored--hover--text-color); + } + } - :visited { - color: props.get(vars.$colored--visited--text-color); - text-decoration-color: props.get(vars.$colored--visited--underline-color); + :visited { + color: props.get(vars.$colored--visited--text-color); + text-decoration-color: props.get(vars.$colored--visited--underline-color); - &:hover { - color: props.get(vars.$colored--visited--hover--text-color); - } - } - } + &:hover { + color: props.get(vars.$colored--visited--hover--text-color); + } + } + } - @each $theme in map.keys(props.get(vars.$static-themes)) { - @include bem.modifier(string.slice($theme, 3)) { - :link, - :visited { - color: props.get(vars.$static-themes, $theme, --text-color); - text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); + @each $theme in map.keys(props.get(vars.$static-themes)) { + @include bem.modifier(string.slice($theme, 3)) { + :link, + :visited { + color: props.get(vars.$static-themes, $theme, --text-color); + text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); - &:hover { - color: props.get(vars.$static-themes, $theme, --hover, --text-color); - } + &:hover { + color: props.get(vars.$static-themes, $theme, --hover, --text-color); + } - &:focus-visible { - color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); - outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$static-themes, $theme, --key-focus, --outline-color); - } - } - } - } + &:focus-visible { + color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); + outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$static-themes, $theme, --key-focus, --outline-color); + } + } + } + } - @include bem.elem('image') { - img { - margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - } + @include bem.elem('image') { + img { + margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + } - &:link, - &:visited { - &:focus-visible { - outline: none; - box-shadow: none; + &:link, + &:visited { + &:focus-visible { + outline: none; + box-shadow: none; - img { - outline: props.get(vars.$key-focus--border-color) solid - props.get(vars.$key-focus--border-width); - box-shadow: 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } - } - } + img { + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } + } + } } diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index ac7815a..c69cc32 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -28,22 +28,22 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props. $static-themes: props.def(--s-links, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $link-theme: --static-#{string.slice($theme, 3)}; - - $static-themes: props.merge($static-themes, ( - $link-theme: ( - --text-color: currentColor, - --underline-color: props.get(core.$transparent-colors, $theme, --500), - - --hover: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - - --key-focus: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), - ) - )); + $link-theme: --static-#{string.slice($theme, 3)}; + + $static-themes: props.merge($static-themes, ( + $link-theme: ( + --text-color: currentColor, + --underline-color: props.get(core.$transparent-colors, $theme, --500), + + --hover: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + + --key-focus: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + ) + )); } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index 98b1df1..fc8a577 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.scss @@ -8,53 +8,53 @@ @use 'lists.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.scope('lists') { - ul, - ol { - padding-inline-start: props.get(vars.$indent); - margin-block-start: props.get(vars.$margin-bs); - - ul, - ol { - margin-block-start: 0; - } - } - - ul { - list-style: disc; - } - - ol { - list-style: decimal; - } - - dl { - padding: 0; - margin-block: props.get(vars.$margin-bs) 0; - margin-inline: 0; - } - - dt { - font-weight: bold; - color: props.get(core.$theme, --heading); - } - - dd { - margin-block: 0; - margin-inline: props.get(vars.$indent) 0; - } - - @include bem.modifier('compact') { - ul, - ol { - padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); - } - - dd { - margin-inline-start: calc(props.get(vars.$compact--indent) - 3px); - } - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.scope('lists') { + ul, + ol { + padding-inline-start: props.get(vars.$indent); + margin-block-start: props.get(vars.$margin-bs); + + ul, + ol { + margin-block-start: 0; + } + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + dl { + padding: 0; + margin-block: props.get(vars.$margin-bs) 0; + margin-inline: 0; + } + + dt { + font-weight: bold; + color: props.get(core.$theme, --heading); + } + + dd { + margin-block: 0; + margin-inline: props.get(vars.$indent) 0; + } + + @include bem.modifier('compact') { + ul, + ol { + padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); + } + + dd { + margin-inline-start: calc(props.get(vars.$compact--indent) - 3px); + } + } + } } diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index 0a87eaa..5b64301 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -8,95 +8,95 @@ @use 'tables.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope('tables') { - table { - margin-block-start: props.get(vars.$margin-bs); - border-spacing: 0; - border-collapse: separate; - } + @include bem.scope('tables') { + table { + margin-block-start: props.get(vars.$margin-bs); + border-spacing: 0; + border-collapse: separate; + } - th { - padding-block: props.get(table.$pad-b); - padding-inline: props.get(table.$pad-i); - font-family: props.get(table.$heading--font-family); - font-size: props.get(table.$heading--font-size); - font-weight: props.get(table.$heading--font-weight); - color: props.get(table.$heading-color); - text-align: start; - text-transform: props.get(table.$heading--text-transform); - letter-spacing: props.get(table.$heading--letter-spacing); - } + th { + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + font-family: props.get(table.$heading--font-family); + font-size: props.get(table.$heading--font-size); + font-weight: props.get(table.$heading--font-weight); + color: props.get(table.$heading-color); + text-align: start; + text-transform: props.get(table.$heading--text-transform); + letter-spacing: props.get(table.$heading--letter-spacing); + } - td { - padding-block: props.get(table.$pad-b); - padding-inline: props.get(table.$pad-i); - border-color: props.get(table.$border-color); - border-style: solid; - border-width: 0; - border-block-start-width: props.get(table.$border-width); - } + td { + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + border-color: props.get(table.$border-color); + border-style: solid; + border-width: 0; + border-block-start-width: props.get(table.$border-width); + } - tr { - &:last-child { - td { - border-block-end-width: props.get(table.$border-width); - } - } - } + tr { + &:last-child { + td { + border-block-end-width: props.get(table.$border-width); + } + } + } - @include bem.modifier('flush') { - th, - td { - &:first-child { - padding-inline-start: 0; - } + @include bem.modifier('flush') { + th, + td { + &:first-child { + padding-inline-start: 0; + } - &:last-child { - padding-inline-end: 0; - } - } - } + &:last-child { + padding-inline-end: 0; + } + } + } - @include bem.modifier('box') { - td { - background-color: props.get(table.$box--bg-color); + @include bem.modifier('box') { + td { + background-color: props.get(table.$box--bg-color); - &:first-child { - border-inline-start-width: props.get(table.$border-width); - } + &:first-child { + border-inline-start-width: props.get(table.$border-width); + } - &:last-child { - border-inline-end-width: props.get(table.$border-width); - } - } + &:last-child { + border-inline-end-width: props.get(table.$border-width); + } + } - tr { - &:first-child { - td { - &:first-child { - border-start-start-radius: props.get(table.$rounding); - } + tr { + &:first-child { + td { + &:first-child { + border-start-start-radius: props.get(table.$rounding); + } - &:last-child { - border-start-end-radius: props.get(table.$rounding); - } - } - } + &:last-child { + border-start-end-radius: props.get(table.$rounding); + } + } + } - &:last-child { - td { - &:first-child { - border-end-start-radius: props.get(table.$rounding); - } + &:last-child { + td { + &:first-child { + border-end-start-radius: props.get(table.$rounding); + } - &:last-child { - border-end-end-radius: props.get(table.$rounding); - } - } - } - } - } - } + &:last-child { + border-end-end-radius: props.get(table.$rounding); + } + } + } + } + } + } } -- cgit v1.2.3-70-g09d2