From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 12:27:09 +0200 Subject: Paths --- src/_config.defaults.scss | 499 ++++++++++++++++------ src/_config.scss | 28 +- src/_core.scss | 38 +- src/_core.vars.scss | 271 +++++++----- src/_functions.scss | 32 +- src/_props.scss | 34 +- src/_themes.scss | 38 +- src/_utils.scss | 236 +++++------ src/layouts/_card-list.scss | 178 ++++---- src/layouts/_card-list.vars.scss | 135 ++++-- src/layouts/_container.scss | 26 +- src/layouts/_container.vars.scss | 39 +- src/layouts/_flex.scss | 10 +- src/layouts/_form.scss | 52 +-- src/layouts/_form.vars.scss | 6 +- src/layouts/_hlist.scss | 71 ++-- src/layouts/_hlist.vars.scss | 18 +- src/layouts/_media.scss | 30 +- src/layouts/_media.vars.scss | 20 +- src/layouts/_overflow.scss | 10 +- src/layouts/_split-view.scss | 93 +++-- src/layouts/_split-view.vars.scss | 15 +- src/objects/_alert.scss | 49 +-- src/objects/_alert.vars.scss | 52 ++- src/objects/_avatar.scss | 173 ++++---- src/objects/_avatar.vars.scss | 127 +++--- src/objects/_backdrop.scss | 32 +- src/objects/_backdrop.vars.scss | 14 +- src/objects/_button.scss | 281 +++++++------ src/objects/_button.vars.scss | 708 ++++++++++++++++++-------------- src/objects/_card.scss | 393 ++++++++++-------- src/objects/_card.vars.scss | 153 +++++-- src/objects/_checkbox.scss | 215 +++++----- src/objects/_checkbox.vars.scss | 108 +++-- src/objects/_dialog.scss | 72 ++-- src/objects/_dialog.vars.scss | 20 +- src/objects/_divider.scss | 136 +++--- src/objects/_divider.vars.scss | 181 +++++--- src/objects/_emoji.scss | 58 +-- src/objects/_emoji.vars.scss | 32 +- src/objects/_field-label.scss | 68 +-- src/objects/_field-label.vars.scss | 42 +- src/objects/_figure.scss | 30 +- src/objects/_figure.vars.scss | 20 +- src/objects/_heading.scss | 114 ++--- src/objects/_heading.vars.scss | 646 ++++++++++++++++++++--------- src/objects/_icon.scss | 30 +- src/objects/_icon.vars.scss | 6 +- src/objects/_lightbox.scss | 159 ++++--- src/objects/_lightbox.vars.scss | 89 ++-- src/objects/_menu.scss | 101 ++--- src/objects/_menu.vars.scss | 83 +++- src/objects/_navbar.scss | 247 ++++++----- src/objects/_navbar.vars.scss | 332 +++++++++------ src/objects/_palette.scss | 52 ++- src/objects/_placeholders.scss | 28 +- src/objects/_placeholders.vars.scss | 8 +- src/objects/_popover.scss | 54 ++- src/objects/_popover.vars.scss | 35 +- src/objects/_radio.scss | 151 +++---- src/objects/_radio.vars.scss | 107 +++-- src/objects/_side-nav.scss | 83 ++-- src/objects/_side-nav.vars.scss | 84 +++- src/objects/_status-indicator.scss | 28 +- src/objects/_status-indicator.vars.scss | 30 +- src/objects/_switch.scss | 156 +++---- src/objects/_switch.vars.scss | 121 ++++-- src/objects/_tabbar.scss | 110 ++--- src/objects/_tabbar.vars.scss | 76 +++- src/objects/_table.scss | 88 ++-- src/objects/_table.vars.scss | 68 ++- src/objects/_text-field.scss | 149 +++---- src/objects/_text-field.vars.scss | 121 ++++-- src/objects/_thumbnail.scss | 95 ++--- src/objects/_thumbnail.vars.scss | 102 +++-- src/scopes/_blockquotes.scss | 28 +- src/scopes/_blockquotes.vars.scss | 29 +- src/scopes/_body.scss | 26 +- src/scopes/_body.vars.scss | 31 +- src/scopes/_code.scss | 46 +-- src/scopes/_code.vars.scss | 33 +- src/scopes/_figures.scss | 22 +- src/scopes/_headings.scss | 90 ++-- src/scopes/_implicit.scss | 107 +++-- src/scopes/_implicit.vars.scss | 83 +++- src/scopes/_links.scss | 109 ++--- src/scopes/_links.vars.scss | 129 ++++-- src/scopes/_lists.scss | 30 +- src/scopes/_lists.vars.scss | 13 +- src/scopes/_tables.scss | 48 +-- src/scopes/_tables.vars.scss | 4 +- src_demo/components/_box.scss | 14 +- src_demo/components/_content.scss | 8 +- src_demo/components/_sidebar.scss | 10 +- src_demo/components/_view.scss | 12 +- 95 files changed, 5611 insertions(+), 3657 deletions(-) diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index 699cd8e..e9e978a 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss @@ -1,21 +1,20 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:math'; -@use 'pkg:iro-sass/src/easing' as easing; +@use "sass:list"; +@use "sass:map"; +@use "sass:math"; +@use "pkg:iro-sass/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, + --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, @@ -23,175 +22,405 @@ $static-colors: ( ), --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), + --blue: oklch(56% 0.14 275.25), + --purple: oklch(56% 0.14 305.58), + --red: oklch(56% 0.14 14.69), + --green: oklch(56% 0.14 150.48), + --yellow: oklch(56% 0.14 84.08), ), --transparents: ( --100: 0, - --200: .1, - --300: .25, - --400: .4, - --500: .55, - --600: .7, - --700: .8, - --800: .9, + --200: 0.1, + --300: 0.25, + --400: 0.4, + --500: 0.55, + --600: 0.7, + --700: 0.8, + --800: 0.9, --900: 1, ), ); $semantic-colors-common: ( - --accent: --blue, - --accent-static: --blue-static, - --positive: --green, + --accent: --blue, + --accent-static: --blue-static, + --positive: --green, --positive-static: --green-static, - --negative: --red, + --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, + --warning: --yellow, + --warning-static: --yellow-static, - --text-disabled: --base --500, - --text-mute-more: --base --600, - --text-mute: --base --700, - --text: --base --800, - --heading: --base --900, + --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, + --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, + --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))), - - --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))), + --50: ( + -8, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(0, 12)), + ), + --75: ( + -4, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(1, 12)), + ), + --100: (0) + ( + 0.2 + 0.8 * easing.ease(math.div(2, 12)), + ), + + --200: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(1, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(3, 12)), + ), + --300: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(2, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(4, 12)), + ), + --400: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(3, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(5, 12)), + ), + + --500: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(4, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(6, 12)), + ), + --600: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(5, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(7, 12)), + ), + --700: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(6, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(8, 12)), + ), + --800: ( + easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(7, 7)) * 98, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(9, 12)), + ), + --900: (106) + ( + 0.2 + 0.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))), + --100: ( + math.div(0, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(0, 12)), + ), + --200: ( + math.div(1, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(1, 12)), + ), + --300: ( + math.div(2, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(2, 12)), + ), + --400: ( + math.div(3, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(3, 12)), + ), + --500: ( + math.div(4, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(4, 12)), + ), + --600: ( + math.div(5, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(5, 12)), + ), + --700: ( + math.div(6, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(6, 12)), + ), + --800: ( + math.div(7, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(7, 12)), + ), + --900: ( + math.div(8, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(8, 12)), + ), + --1000: ( + math.div(9, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(9, 12)), + ), + --1100: ( + math.div(10, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(10, 12)), + ), + --1200: ( + math.div(11, 12) * 94 + 7, + ) + ( + 0.2 + 0.8 * easing.ease(math.div(11, 12)), + ), + --1300: ( + math.div(12, 12) * 94 + 7, + ) + ( + 0.2 + 0.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, + --base: hsl(260, 70%, 98%) --grays, + --blue: oklch(56% 0.16 275.25) --colors, + --purple: oklch(56% 0.16 305.58) --colors, + --red: oklch(56% 0.16 14.69) --colors, + --green: oklch(56% 0.16 150.48) --colors, + --yellow: oklch(56% 0.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, + --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), + --shadow: rgba(#000, 0.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))), - - --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))), + --50: (4.4) + ( + 0.3 + 0.7 * easing.ease(math.div(10, 12)), + ), + --75: (2.5) + ( + 0.3 + 0.7 * easing.ease(math.div(9, 12)), + ), + --100: (0) + ( + 0.3 + 0.7 * easing.ease(math.div(8, 12)), + ), + + --200: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(1, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(7, 12)), + ), + --300: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(2, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(6, 12)), + ), + --400: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(3, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(5, 12)), + ), + + --500: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(4, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(4, 12)), + ), + --600: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(5, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(3, 12)), + ), + --700: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(6, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(2, 12)), + ), + --800: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(7, 8)) * -108, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(1, 12)), + ), + --900: ( + easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(8, 8)) * -108, + ) + ( + 0.3 + 0.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))), + --100: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(0, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(0, 12)), + ), + --200: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(1, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(1, 12)), + ), + --300: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(2, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(2, 12)), + ), + --400: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(3, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(3, 12)), + ), + --500: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(4, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(4, 12)), + ), + --600: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(5, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(5, 12)), + ), + --700: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(6, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(6, 12)), + ), + --800: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(7, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(7, 12)), + ), + --900: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(8, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(8, 12)), + ), + --1000: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(9, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(9, 12)), + ), + --1100: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(10, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(10, 12)), + ), + --1200: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(11, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.7 * easing.ease(math.div(11, 12)), + ), + --1300: ( + easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(12, 12)) * -109 - 0.5, + ) + ( + 0.3 + 0.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, + --base: hsl(257, 7%, 20%) --grays, + --blue: oklch(56% 0.16 275.25) --colors, + --purple: oklch(56% 0.16 305.58) --colors, + --red: oklch(56% 0.16 14.69) --colors, + --green: oklch(56% 0.16 150.48) --colors, + --yellow: oklch(56% 0.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, + --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), + --shadow: rgba(#000, 0.35), ), ); diff --git a/src/_config.scss b/src/_config.scss index a3ea6ee..6ddef96 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -1,14 +1,17 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:math'; -@use 'pkg:iro-sass/src/easing' as easing; -@use 'config.defaults' as def; +@use "sass:list"; +@use "sass:map"; +@use "sass:math"; +@use "pkg:iro-sass/easing" as easing; +@use "config.defaults" as def; $static-colors-override: () !default; $static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default; $semantic-colors-common-override: () !default; -$semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default; +$semantic-colors-common: map.deep-merge( + def.$semantic-colors-common, + $semantic-colors-common-override +) !default; $theme-light-override: () !default; $theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default; @@ -17,12 +20,15 @@ $theme-dark-override: () !default; $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, +$themes: map.deep-merge( + ( + --main: ( + light: $theme-light, + dark: $theme-dark, + ), ), -), $themes-override) !default; + $themes-override +) !default; $theme-default: list.nth(map.keys($themes), 1) !default; diff --git a/src/_core.scss b/src/_core.scss index 8c761ff..3427579 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -1,42 +1,42 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use 'config'; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "config"; -@use 'core.vars' as vars; -@forward 'core.vars'; +@use "core.vars" as vars; +@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'))); + @include props.materialize(map.values(meta.module-variables("vars"))); - @if map.has-key($theme, 'dark') { + @if map.has-key($theme, "dark") { @media (prefers-color-scheme: dark) { - @include props.materialize(map.get($theme, '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')); + @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')); + @include props.materialize(map.get($theme, "light")); - color: props.get(vars.$theme, --text); + color: props.get(vars.$theme, --text); background-color: props.get(vars.$theme, --bg-base); - @if map.has-key($theme, 'dark') { + @if map.has-key($theme, "dark") { @media (prefers-color-scheme: dark) { - @include props.materialize(map.get($theme, 'dark')); + @include props.materialize(map.get($theme, "dark")); } } } diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 11acbfa..bef5f88 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -1,45 +1,45 @@ // stylelint-disable scss/dollar-variable-pattern -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:list'; -@use 'functions' as fn; -@use 'config'; -@use 'pkg:iro-sass/src/functions'; -@use 'pkg:iro-sass/src/props'; - -$size--0: props.def(--size--0, 0) !default; -$size--10: props.def(--size--10, functions.px-to-rem(1px)) !default; -$size--25: props.def(--size--25, functions.px-to-rem(2px)) !default; -$size--40: props.def(--size--40, functions.px-to-rem(3px)) !default; -$size--50: props.def(--size--50, functions.px-to-rem(4px)) !default; -$size--65: props.def(--size--65, functions.px-to-rem(5px)) !default; -$size--75: props.def(--size--75, functions.px-to-rem(6px)) !default; -$size--85: props.def(--size--85, functions.px-to-rem(7px)) !default; -$size--100: props.def(--size--100, functions.px-to-rem(8px)) !default; -$size--115: props.def(--size--115, functions.px-to-rem(9px)) !default; -$size--125: props.def(--size--125, functions.px-to-rem(10px)) !default; -$size--130: props.def(--size--130, functions.px-to-rem(11px)) !default; -$size--150: props.def(--size--150, functions.px-to-rem(12px)) !default; -$size--160: props.def(--size--160, functions.px-to-rem(13px)) !default; -$size--175: props.def(--size--175, functions.px-to-rem(14px)) !default; -$size--200: props.def(--size--200, functions.px-to-rem(16px)) !default; -$size--225: props.def(--size--225, functions.px-to-rem(18px)) !default; -$size--250: props.def(--size--250, functions.px-to-rem(20px)) !default; -$size--275: props.def(--size--275, functions.px-to-rem(22px)) !default; -$size--300: props.def(--size--300, functions.px-to-rem(24px)) !default; -$size--325: props.def(--size--325, functions.px-to-rem(26px)) !default; -$size--350: props.def(--size--350, functions.px-to-rem(28px)) !default; -$size--375: props.def(--size--375, functions.px-to-rem(30px)) !default; -$size--400: props.def(--size--400, functions.px-to-rem(32px)) !default; -$size--450: props.def(--size--450, functions.px-to-rem(36px)) !default; -$size--500: props.def(--size--500, functions.px-to-rem(40px)) !default; -$size--550: props.def(--size--550, functions.px-to-rem(44px)) !default; -$size--600: props.def(--size--600, functions.px-to-rem(48px)) !default; -$size--650: props.def(--size--650, functions.px-to-rem(52px)) !default; -$size--700: props.def(--size--700, functions.px-to-rem(56px)) !default; -$size--800: props.def(--size--800, functions.px-to-rem(64px)) !default; -$size--900: props.def(--size--900, functions.px-to-rem(72px)) !default; +@use "sass:map"; +@use "sass:meta"; +@use "sass:list"; +@use "functions" as fn; +@use "config"; +@use "pkg:iro-sass/functions"; +@use "pkg:iro-sass/props"; + +$size--0: props.def(--size--0, 0) !default; +$size--10: props.def(--size--10, functions.px-to-rem(1px)) !default; +$size--25: props.def(--size--25, functions.px-to-rem(2px)) !default; +$size--40: props.def(--size--40, functions.px-to-rem(3px)) !default; +$size--50: props.def(--size--50, functions.px-to-rem(4px)) !default; +$size--65: props.def(--size--65, functions.px-to-rem(5px)) !default; +$size--75: props.def(--size--75, functions.px-to-rem(6px)) !default; +$size--85: props.def(--size--85, functions.px-to-rem(7px)) !default; +$size--100: props.def(--size--100, functions.px-to-rem(8px)) !default; +$size--115: props.def(--size--115, functions.px-to-rem(9px)) !default; +$size--125: props.def(--size--125, functions.px-to-rem(10px)) !default; +$size--130: props.def(--size--130, functions.px-to-rem(11px)) !default; +$size--150: props.def(--size--150, functions.px-to-rem(12px)) !default; +$size--160: props.def(--size--160, functions.px-to-rem(13px)) !default; +$size--175: props.def(--size--175, functions.px-to-rem(14px)) !default; +$size--200: props.def(--size--200, functions.px-to-rem(16px)) !default; +$size--225: props.def(--size--225, functions.px-to-rem(18px)) !default; +$size--250: props.def(--size--250, functions.px-to-rem(20px)) !default; +$size--275: props.def(--size--275, functions.px-to-rem(22px)) !default; +$size--300: props.def(--size--300, functions.px-to-rem(24px)) !default; +$size--325: props.def(--size--325, functions.px-to-rem(26px)) !default; +$size--350: props.def(--size--350, functions.px-to-rem(28px)) !default; +$size--375: props.def(--size--375, functions.px-to-rem(30px)) !default; +$size--400: props.def(--size--400, functions.px-to-rem(32px)) !default; +$size--450: props.def(--size--450, functions.px-to-rem(36px)) !default; +$size--500: props.def(--size--500, functions.px-to-rem(40px)) !default; +$size--550: props.def(--size--550, functions.px-to-rem(44px)) !default; +$size--600: props.def(--size--600, functions.px-to-rem(48px)) !default; +$size--650: props.def(--size--650, functions.px-to-rem(52px)) !default; +$size--700: props.def(--size--700, functions.px-to-rem(56px)) !default; +$size--800: props.def(--size--800, functions.px-to-rem(64px)) !default; +$size--900: props.def(--size--900, functions.px-to-rem(72px)) !default; $size--1000: props.def(--size--1000, functions.px-to-rem(80px)) !default; $size--1200: props.def(--size--1200, functions.px-to-rem(96px)) !default; $size--1600: props.def(--size--1600, functions.px-to-rem(128px)) !default; @@ -58,58 +58,105 @@ $size--4600: props.def(--size--4600, functions.px-to-rem(368px)) !default; $size--5000: props.def(--size--5000, functions.px-to-rem(400px)) !default; $size--6000: props.def(--size--6000, functions.px-to-rem(480px)) !default; -$font--standard--family: props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default; -$font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default; -$font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default; - -$font--headline--family: props.def(--font--headline--family, props.get($font--standard--family)) !default; -$font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default; -$font--headline--weight: props.def(--font--headline--weight, 800) !default; -$font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default; - -$font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default; -$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; -$font--mono--feature-settings: props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default; - -$font-size--50: props.def(--font-size--50, functions.px-to-rem(12px)) !default; -$font-size--75: props.def(--font-size--75 , functions.px-to-rem(13px)) !default; -$font-size--100: props.def(--font-size--100, functions.px-to-rem(14px)) !default; -$font-size--150: props.def(--font-size--150, functions.px-to-rem(16px)) !default; -$font-size--200: props.def(--font-size--200, functions.px-to-rem(18px)) !default; -$font-size--300: props.def(--font-size--300, functions.px-to-rem(20px)) !default; -$font-size--400: props.def(--font-size--400, functions.px-to-rem(24px)) !default; -$font-size--500: props.def(--font-size--500, functions.px-to-rem(28px)) !default; -$font-size--600: props.def(--font-size--600, functions.px-to-rem(32px)) !default; -$font-size--700: props.def(--font-size--700, functions.px-to-rem(36px)) !default; -$font-size--800: props.def(--font-size--800, functions.px-to-rem(40px)) !default; -$font-size--900: props.def(--font-size--900, functions.px-to-rem(45px)) !default; +$font--standard--family: props.def( + --font--standard--family, + ( + "Inter", + "Open Sans", + "Segoe UI", + "Droid Sans", + Roboto, + Oxygen, + "Helvetica Neue", + Helvetica, + Tahoma, + Arial, + sans-serif + ) +) !default; +$font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default; +$font--standard--feature-settings: props.def( + --font--standard--feature-settings, + ("'ss01'") +) !default; + +$font--headline--family: props.def( + --font--headline--family, + props.get($font--standard--family) +) !default; +$font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default; +$font--headline--weight: props.def(--font--headline--weight, 800) !default; +$font--headline--feature-settings: props.def( + --font--headline--feature-settings, + ("'opsz'" 32, "'ss01'", "'cv06'") +) !default; + +$font--mono--family: props.def( + --font--mono--family, + ( + "Iosevka Term SS09", + "IBM Plex Mono", + "Menlo", + "DejaVu Sans Mono", + "Bitstream Vera Sans Mono", + Courier, + monospace + ) +) !default; +$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; +$font--mono--feature-settings: props.def( + --font--mono--feature-settings, + ("'calt'" 0, "'dlig' 1", "'ss09' 1") +) !default; + +$font-size--50: props.def(--font-size--50, functions.px-to-rem(12px)) !default; +$font-size--75: props.def(--font-size--75, functions.px-to-rem(13px)) !default; +$font-size--100: props.def(--font-size--100, functions.px-to-rem(14px)) !default; +$font-size--150: props.def(--font-size--150, functions.px-to-rem(16px)) !default; +$font-size--200: props.def(--font-size--200, functions.px-to-rem(18px)) !default; +$font-size--300: props.def(--font-size--300, functions.px-to-rem(20px)) !default; +$font-size--400: props.def(--font-size--400, functions.px-to-rem(24px)) !default; +$font-size--500: props.def(--font-size--500, functions.px-to-rem(28px)) !default; +$font-size--600: props.def(--font-size--600, functions.px-to-rem(32px)) !default; +$font-size--700: props.def(--font-size--700, functions.px-to-rem(36px)) !default; +$font-size--800: props.def(--font-size--800, functions.px-to-rem(40px)) !default; +$font-size--900: props.def(--font-size--900, functions.px-to-rem(45px)) !default; $font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default; $font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default; $font-size--1200: props.def(--font-size--1200, functions.px-to-rem(70px)) !default; $font-size--1300: props.def(--font-size--1300, functions.px-to-rem(80px)) !default; -$border-width--thick: props.def(--border-width--thick, 4px) !default; +$border-width--thick: props.def(--border-width--thick, 4px) !default; $border-width--medium: props.def(--border-width--medium, 2px) !default; -$border-width--thin: props.def(--border-width--thin, 1px) !default; +$border-width--thin: props.def(--border-width--thin, 1px) !default; -$shadow--l1--x: props.def(--shadow--l1--x, 0) !default; -$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default; +$shadow--l1--x: props.def(--shadow--l1--x, 0) !default; +$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default; $shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default; $shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default; -$shadow--l2--x: props.def(--shadow--l2--x, 0) !default; -$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default; +$shadow--l2--x: props.def(--shadow--l2--x, 0) !default; +$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default; $shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default; $shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default; -$rounding: props.def(--rounding, 12px) !default; +$rounding: props.def(--rounding, 12px) !default; $rounding--sm: props.def(--rounding--sm, 4px) !default; -$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; -$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; -$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; - -$list--indent: props.def(--list--indent, props.get($size--400)) !default; +$key-focus--outline-width: props.def( + --key-focus--outline-width, + props.get($border-width--thick) +) !default; +$key-focus--border-width: props.def( + --key-focus--border-width, + props.get($border-width--medium) +) !default; +$key-focus--border-offset: props.def( + --key-focus--border-offset, + props.get($border-width--medium) +) !default; + +$list--indent: props.def(--list--indent, props.get($size--400)) !default; $list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default; $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default; @@ -119,20 +166,34 @@ $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, + ) + ); } // -$transparent-colors: props.def(--transparent-colors, (), 'color'); +$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); + $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 )); + $transparent-colors: props.merge( + $transparent-colors, + ( + $palette-name: $palette, + ) + ); } // @@ -142,40 +203,64 @@ $themes: (); @each $theme-name, $theme in config.$themes { @each $variant-name, $variant in $theme { @if $variant != null { - $compiled: props.def(--colors, (), 'color'); + $compiled: props.def(--colors, (), "color"); @each $palette-name, $palette in $-static-colors { - $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); + $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 )); + $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 )); + $compiled: props.merge( + $compiled, + ( + $color: $value, + ) + ); } @each $color, $ref in map.get($variant, --semantic) { $res: (); - @if meta.type-of($ref) == 'map' { + @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...))); + $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...); + $res: props.get($compiled, $ref1, $ref2...); } - $compiled: props.merge($compiled, ( $color: $res )); + $compiled: props.merge( + $compiled, + ( + $color: $res, + ) + ); } $themes: map.set($themes, $theme-name, $variant-name, $compiled); diff --git a/src/_functions.scss b/src/_functions.scss index e237ccc..8fb0d98 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,17 +1,17 @@ -@use 'sass:color'; -@use 'sass:math'; -@use 'sass:map'; -@use 'sass:list'; -@use 'sass:meta'; +@use "sass:color"; +@use "sass:math"; +@use "sass:map"; +@use "sass:list"; +@use "sass:meta"; -@use 'pkg:iro-sass/src/easing'; -@use 'apca'; +@use "pkg:iro-sass/easing"; +@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); - $ref-l: color.channel($ref-lch, 'lightness'); + $ref-l: color.channel($ref-lch, "lightness"); $ref-y: apca.sRGB_to_Y($ref-lch); $black-y: apca.sRGB_to_Y(#000); @@ -32,17 +32,19 @@ $h: list.nth($level, 3); } - @if meta.type-of($color) != 'color' { + @if meta.type-of($color) != "color" { $y: apca.reverse($color, $ref-y); - $l: color.channel($base-lch, 'lightness'); + $l: color.channel($base-lch, "lightness"); @if $y != false { - $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); + $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'))); + $color: oklch( + $l ($c * color.channel($base-lch, "chroma")) ($h + color.channel($base-lch, "hue")) + ); } @else { $y: apca.sRGB_to_Y($color); } @@ -51,7 +53,11 @@ $contrast-white: apca.contrast($white-y, $y); $palette: map.set($palette, $key, $color); - $palette: map.set($palette, #{$key}-text, if(sass(math.abs($contrast-black) > math.abs($contrast-white)): #000; else: #fff)); + $palette: map.set( + $palette, + #{$key}-text, + if(sass(math.abs($contrast-black) > math.abs($contrast-white)): #000; else: #fff) + ); } @return $palette; diff --git a/src/_props.scss b/src/_props.scss index 0830375..2683ca9 100644 --- a/src/_props.scss +++ b/src/_props.scss @@ -1,46 +1,46 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'config'; -@use 'pkg:include-media/dist/include-media' as media; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "config"; +@use "pkg:include-media/dist/include-media" as media; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; @mixin materialize-at-root($ref) { - @if meta.type-of($ref) == 'map' { + @if meta.type-of($ref) == "map" { $ref: map.values($ref); } :root { @include props.materialize($ref, null); - @include props.materialize($ref, 'color'); + @include props.materialize($ref, "color"); @each $breakpoint in map.keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { + @include media.media("<=#{$breakpoint}") { @include props.materialize($ref, $breakpoint); } } @media (prefers-color-scheme: dark) { - @include props.materialize($ref, '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'); + @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'); + @include props.materialize($ref, "color"); @media (prefers-color-scheme: dark) { - @include props.materialize($ref, 'dark'); + @include props.materialize($ref, "dark"); } } } diff --git a/src/_themes.scss b/src/_themes.scss index f06a5ca..be13e60 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -1,71 +1,71 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use 'pkg:include-media/dist/include-media' as media; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "pkg:include-media/dist/include-media" as media; -@use 'core.vars' as vars; -@forward 'core.vars'; +@use "core.vars" as vars; +@forward "core.vars"; @mixin styles { - @include bem.theme('base') { + @include bem.theme("base") { background-color: props.get(vars.$theme, --bg-base); - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --bg-base); } } - @include bem.suffix('dark') { + @include bem.suffix("dark") { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --bg-base); } } } - @include bem.theme('l1') { + @include bem.theme("l1") { background-color: props.get(vars.$theme, --bg-l1); - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --bg-l1); } } - @include bem.suffix('dark') { + @include bem.suffix("dark") { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --bg-l1); } } } - @include bem.theme('l2') { + @include bem.theme("l2") { background-color: props.get(vars.$theme, --bg-l2); - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --bg-l2); } } - @include bem.suffix('dark') { + @include bem.suffix("dark") { @media (prefers-color-scheme: dark) { background-color: props.get(vars.$theme, --bg-l2); } } } - @include bem.theme('50') { + @include bem.theme("50") { background-color: props.get(vars.$theme, --base, --50); - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { background-color: props.get(vars.$theme, --base, --50); } } - @include bem.suffix('dark') { + @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 dd8e8bb..be2faab 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -1,27 +1,27 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use 'pkg:include-media/dist/include-media' as media; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "pkg:include-media/dist/include-media" as media; -@use 'core.vars' as vars; -@forward 'core.vars'; +@use "core.vars" as vars; +@forward "core.vars"; /* 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; $-axes: ( - '': '', - 'r': 'row-', - 'c': 'column-', + "": "", + "r": "row-", + "c": "column-", ) !default; /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -48,145 +48,145 @@ $-font-sizes: ( ) !default; $-aspect-ratios: ( - '1\\/1': '1 / 1', - '4\\/3': '4 / 3', - '5\\/4': '5 / 4', + "1\\/1": "1 / 1", + "4\\/3": "4 / 3", + "5\\/4": "5 / 4", ) !default; @mixin styles { - @include bem.utility('d-block') { + @include bem.utility("d-block") { display: block; } - @include bem.utility('d-inline-block') { + @include bem.utility("d-inline-block") { display: inline-block; } - @include bem.utility('d-inline') { + @include bem.utility("d-inline") { display: inline; } - @include bem.utility('d-contents') { + @include bem.utility("d-contents") { display: contents; } - @include bem.utility('d-flex') { + @include bem.utility("d-flex") { display: flex; } - @include bem.utility('td-none') { + @include bem.utility("td-none") { text-decoration: none; } - @include bem.utility('d-none') { + @include bem.utility("d-none") { display: none; @each $breakpoint in map.keys(media.$breakpoints) { - @include media.media('<=#{$breakpoint}') { - @include bem.suffix('#{$breakpoint}-lo') { + @include media.media("<=#{$breakpoint}") { + @include bem.suffix("#{$breakpoint}-lo") { display: none; } } - @include media.media('>#{$breakpoint}') { - @include bem.suffix('#{$breakpoint}-hi') { + @include media.media(">#{$breakpoint}") { + @include bem.suffix("#{$breakpoint}-hi") { display: none; } } } - @include bem.at-theme('js') { - @include bem.suffix('js') { + @include bem.at-theme("js") { + @include bem.suffix("js") { display: none; } } - @include bem.at-theme('no-js') { - @include bem.suffix('no-js') { + @include bem.at-theme("no-js") { + @include bem.suffix("no-js") { display: none; } } - @include bem.suffix('empty') { + @include bem.suffix("empty") { &:empty { display: none; } } } - @include bem.utility('va-top') { + @include bem.utility("va-top") { vertical-align: top; } - @include bem.utility('va-baseline') { + @include bem.utility("va-baseline") { vertical-align: baseline; } - @include bem.utility('va-middle') { + @include bem.utility("va-middle") { vertical-align: middle; } - @include bem.utility('va-bottom') { + @include bem.utility("va-bottom") { vertical-align: bottom; } - @include bem.utility('ta-start') { + @include bem.utility("ta-start") { text-align: start; } - @include bem.utility('ta-end') { + @include bem.utility("ta-end") { text-align: end; } - @include bem.utility('ta-center') { + @include bem.utility("ta-center") { text-align: center; } - @include bem.utility('fw-normal') { + @include bem.utility("fw-normal") { font-weight: normal; } - @include bem.utility('ai-center') { + @include bem.utility("ai-center") { align-items: center; } - @include bem.utility('ai-start') { + @include bem.utility("ai-start") { align-items: flex-start; } - @include bem.utility('ai-end') { + @include bem.utility("ai-end") { align-items: flex-end; } - @include bem.utility('ai-stretch') { + @include bem.utility("ai-stretch") { align-items: stretch; } - @include bem.utility('ac-center') { + @include bem.utility("ac-center") { align-content: center; } - @include bem.utility('jc-center') { + @include bem.utility("jc-center") { justify-content: center; } - @include bem.utility('jc-start') { + @include bem.utility("jc-start") { justify-content: flex-start; } - @include bem.utility('jc-end') { + @include bem.utility("jc-end") { justify-content: flex-end; } - @include bem.utility('tt-upper') { + @include bem.utility("tt-upper") { text-transform: uppercase; } - @include bem.utility('tt-lower') { + @include bem.utility("tt-lower") { text-transform: lowercase; } - @include bem.utility('c-heading') { + @include bem.utility("c-heading") { color: props.get(vars.$theme, --heading); @each $theme in map.keys(props.get(vars.$transparent-colors)) { @@ -198,7 +198,7 @@ $-aspect-ratios: ( } } - @include bem.utility('c-text') { + @include bem.utility("c-text") { color: props.get(vars.$theme, --text); @each $theme in map.keys(props.get(vars.$transparent-colors)) { @@ -210,7 +210,7 @@ $-aspect-ratios: ( } } - @include bem.utility('c-mute') { + @include bem.utility("c-mute") { color: props.get(vars.$theme, --text-mute); @each $theme in map.keys(props.get(vars.$transparent-colors)) { @@ -222,7 +222,7 @@ $-aspect-ratios: ( } } - @include bem.utility('c-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)) { @@ -235,189 +235,195 @@ $-aspect-ratios: ( } @each $mod, $size in $-font-sizes { - @include bem.utility('fs-#{$mod}') { + @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') { + @include bem.utility("#{$dir}-100") { #{$prop}: 100%; } - @include bem.utility('#{$dir}-75') { + @include bem.utility("#{$dir}-75") { #{$prop}: 75%; } - @include bem.utility('#{$dir}-50') { + @include bem.utility("#{$dir}-50") { #{$prop}: 50%; } - @include bem.utility('#{$dir}-25') { + @include bem.utility("#{$dir}-25") { #{$prop}: 25%; } - @include bem.utility('#{$dir}-1px') { + @include bem.utility("#{$dir}-1px") { #{$prop}: 1px; } - @include bem.utility('#{$dir}-0') { + @include bem.utility("#{$dir}-0") { #{$prop}: 0; } } - @include bem.utility('elp') { - overflow: hidden; + @include bem.utility("elp") { + overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + white-space: nowrap; } - @include bem.utility('hyph') { + @include bem.utility("hyph") { hyphens: auto; hyphenate-limit-chars: auto; } - @include bem.utility('tw-balance') { + @include bem.utility("tw-balance") { text-wrap-style: balance; } - @include bem.utility('o-auto') { + @include bem.utility("o-auto") { overflow: auto; } - @include bem.utility('o-hidden') { + @include bem.utility("o-hidden") { overflow: hidden; } - @include bem.utility('p-static') { + @include bem.utility("p-static") { position: static; } - @include bem.utility('p-relative') { + @include bem.utility("p-relative") { position: relative; } - @include bem.utility('p-fixed') { + @include bem.utility("p-fixed") { position: fixed; } - @include bem.utility('p-sticky-bs') { - position: sticky; + @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; + @include bem.utility("p-sticky-be") { + position: sticky; inset-block-end: 0; } - @include bem.utility('br-round') { + @include bem.utility("br-round") { border-radius: props.get(vars.$rounding); } - @include bem.utility('br-round-sm') { + @include bem.utility("br-round-sm") { border-radius: props.get(vars.$rounding--sm); } @each $dir, $prefix in $-axes { @each $mod, $size in $-sizes { - @include bem.utility('#{$dir}g-#{$mod}') { + @include bem.utility("#{$dir}g-#{$mod}") { #{$prefix}gap: props.get($size); } } } @each $dir, $suffix in $-dirs { - @include bem.utility('m#{$dir}-auto') { + @include bem.utility("m#{$dir}-auto") { margin#{$suffix}: auto; } - @include bem.utility('p#{$dir}-auto') { + @include bem.utility("p#{$dir}-auto") { padding#{$suffix}: auto; } @each $mod, $size in $-sizes { - @include bem.utility('m#{$dir}-#{$mod}') { + @include bem.utility("m#{$dir}-#{$mod}") { margin#{$suffix}: props.get($size); } - @include bem.utility('p#{$dir}-#{$mod}') { + @include bem.utility("p#{$dir}-#{$mod}") { padding#{$suffix}: props.get($size); } } - @include bem.utility('b#{$dir}-0') { + @include bem.utility("b#{$dir}-0") { border#{$suffix}: 0; - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { border#{$suffix}: 0; } } - @include bem.suffix('dark') { + @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.utility("b#{$dir}-1") { + border#{$suffix}: props.get(vars.$border-width--thin) solid + props.get(vars.$theme, --border); - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + border#{$suffix}: props.get(vars.$border-width--thin) solid + props.get(vars.$theme, --border); } } - @include bem.suffix('dark') { + @include bem.suffix("dark") { @media (prefers-color-scheme: dark) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); + 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.utility("b#{$dir}-1-mute") { + border#{$suffix}: props.get(vars.$border-width--thin) solid + props.get(vars.$theme, --border-mute); - @include bem.suffix('light') { + @include bem.suffix("light") { @media (prefers-color-scheme: light) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); + border#{$suffix}: props.get(vars.$border-width--thin) solid + props.get(vars.$theme, --border-mute); } } - @include bem.suffix('dark') { + @include bem.suffix("dark") { @media (prefers-color-scheme: dark) { - border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); + border#{$suffix}: props.get(vars.$border-width--thin) solid + props.get(vars.$theme, --border-mute); } } } } - @include bem.utility('mbs-neutralize') { + @include bem.utility("mbs-neutralize") { &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } @each $mod, $value in $-aspect-ratios { - @include bem.utility('ar-#{$mod}') { + @include bem.utility("ar-#{$mod}") { aspect-ratio: string.unquote($value); } } - @include bem.utility('sr-only') { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; + @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%); + border: 0; + clip-path: inset(50%); } } diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index f2a6ff5..c05b798 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -1,39 +1,44 @@ -@use 'sass:meta'; -@use 'pkg:include-media/dist/include-media' as media; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:include-media/dist/include-media" as media; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@use '../objects/card.vars' as card; +@use "../objects/card.vars" as card; -@forward 'card-list.vars'; -@use 'card-list.vars' as vars; +@forward "card-list.vars"; +@use "card-list.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.layout('card-list') { - display: flex; + @include bem.layout("card-list") { + display: flex; flex-direction: column; - gap: props.get(vars.$row-gap); + gap: props.get(vars.$row-gap); - @include bem.modifier('merge') { - position: relative; - gap: 0; + @include bem.modifier("merge") { + position: relative; + gap: 0; border-radius: props.get(card.$rounding); - @include bem.elem('card') { - border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color); + @include bem.elem("card") { + border-color: props.get(card.$border-color) props.get(card.$border-color) + props.get(vars.$border-color); background-clip: content-box; - box-shadow: none; + box-shadow: none; &:not(:last-child) { - position: relative; + position: relative; border-end-start-radius: 0; - border-end-end-radius: 0; + border-end-end-radius: 0; } - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { @@ -46,19 +51,28 @@ } @include bem.next-twin-elem { - margin-block-start: calc(-1 * props.get(card.$border-width)); - border-block-start-color: transparent; + margin-block-start: calc(-1 * props.get(card.$border-width)); + border-block-start-color: transparent; border-start-start-radius: 0; - border-start-end-radius: 0; + border-start-end-radius: 0; - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active { border-block-start-color: props.get(card.$hover--border-color); } &:focus-visible { - margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width)); + margin-block-start: calc( + -1 * + props.get(card.$border-width) - props.get( + card.$key-focus--border-width + ) + ); } } } @@ -67,7 +81,11 @@ border-block-end-color: props.get(card.$border-color); } - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active { border-color: props.get(card.$hover--border-color); @@ -75,17 +93,20 @@ &:focus-visible { border-color: props.get(card.$hover--bg-color); - box-shadow: - 0 0 0 - calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width)) + box-shadow: 0 0 0 + calc( + props.get(card.$key-focus--border-width) + + props.get(card.$key-focus--outline-width) + ) props.get(card.$key-focus--outline-color); } } } - @include bem.modifier('borderless') { - @include bem.elem('card') { - border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color); + @include bem.modifier("borderless") { + @include bem.elem("card") { + border-color: props.get(card.$bg-color) props.get(card.$bg-color) + props.get(vars.$border-color); @include bem.next-twin-elem { border-block-start-color: transparent; @@ -95,7 +116,11 @@ border-block-end-color: props.get(card.$bg-color); } - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active { border-color: props.get(card.$hover--border-color); @@ -108,84 +133,87 @@ } } - @include bem.modifier('shadow') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + @include bem.modifier("shadow") { + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(card.$shadow-color); } - @include bem.modifier('interactive') { - transition: transform .2s, box-shadow .2s; + @include bem.modifier("interactive") { + transition: + transform 0.2s, + box-shadow 0.2s; &:hover, &:active, &:focus-within { box-shadow: none; - transform: translateY(props.get(card.$hover--offset-b)); + transform: translateY(props.get(card.$hover--offset-b)); } } } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { row-gap: props.get(vars.$quiet--row-gap); } - @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts { + @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, + $breakpoint in vars.$grid-layouts + { @include bem.modifier($mod) { - display: grid; + display: grid; grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr)); - gap: props.get($row-gap) props.get($col-gap); + gap: props.get($row-gap) props.get($col-gap); - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { row-gap: props.get($quiet--row-gap); } - @include media.media('<=#{$breakpoint}') { + @include media.media("<=#{$breakpoint}") { display: flex; } } } - @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts { + @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, + $breakpoint in vars.$flex-layouts + { @include bem.modifier($mod) { - display: flex; + display: flex; flex-flow: row wrap; - gap: props.get($row-gap) props.get($col-gap); + gap: props.get($row-gap) props.get($col-gap); - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { row-gap: props.get($quiet--row-gap); } - @include bem.elem('card') { - flex: 0.1 0 auto; + @include bem.elem("card") { + flex: 0.1 0 auto; inline-size: props.get($col-width); } - @include media.media('<=#{$breakpoint}') { + @include media.media("<=#{$breakpoint}") { flex-flow: column nowrap; - @include bem.elem('card') { + @include bem.elem("card") { inline-size: auto; } } } } - @include bem.modifier('masonry') { - display: block; - columns: auto props.get(vars.$masonry--col-width); + @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') { + @include bem.elem("card") { margin-block-end: props.get(vars.$masonry--row-gap); - break-inside: avoid; + break-inside: avoid; } - @include bem.modifier('quiet') { - @include bem.elem('card') { + @include bem.modifier("quiet") { + @include bem.elem("card") { margin-block-end: props.get(vars.$masonry--quiet--row-gap); } } @@ -194,34 +222,34 @@ @each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts { @include bem.modifier($mod) { flex-flow: row wrap; - gap: props.get($row-gap) props.get($col-gap); + gap: props.get($row-gap) props.get($col-gap); - @include bem.modifier('no-flush') { + @include bem.modifier("no-flush") { &::after { - display: block; - flex: 1 0 auto; + display: block; + flex: 1 0 auto; inline-size: props.get($row-height); - content: ''; + content: ""; } } - @include bem.elem('card') { - flex: 1 0 auto; + @include bem.elem("card") { + flex: 1 0 auto; max-inline-size: 100%; } - @include bem.elem('card-image') { + @include bem.elem("card-image") { block-size: props.get($row-height); } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { row-gap: props.get($quiet--row-gap); } } } - @include bem.modifier('aspect-5\\/4') { - @include bem.elem('card-image') { + @include bem.modifier("aspect-5\\/4") { + @include bem.elem("card-image") { aspect-ratio: 5 / 4; } } diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss index fb89b52..ece68f3 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss @@ -1,61 +1,116 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use '../objects/card' as card; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "../objects/card" as card; -$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; +$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; -$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default; -$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default; -$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; -$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default; +$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default; +$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default; +$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; +$grid--quiet--row-gap: props.def( + --l-card-list--grid--quiet--row-gap, + props.get(core.$size--800) +) !default; -$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default; -$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default; -$grid-sm--col-width: props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default; -$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default; +$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default; +$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default; +$grid-sm--col-width: props.def( + --l-card-list--grid-sm--col-width, + props.get(core.$size--4600) +) !default; +$grid-sm--quiet--row-gap: props.def( + --l-card-list--grid-sm--quiet--row-gap, + props.get(core.$size--800) +) !default; -$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default; -$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default; -$grid-xs--col-width: props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default; -$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default; +$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default; +$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default; +$grid-xs--col-width: props.def( + --l-card-list--grid-xs--col-width, + props.get(core.$size--1600) +) !default; +$grid-xs--quiet--row-gap: props.def( + --l-card-list--grid-xs--quiet--row-gap, + props.get(core.$size--800) +) !default; $grid-layouts: ( - 'grid' $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, - 'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, - 'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs, + "grid" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, + "grid-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, + "grid-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs ) !default; $flex-layouts: ( - 'flex' $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, - 'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, - 'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs, + "flex" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, + "flex-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, + "flex-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs ) !default; -$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default; -$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default; -$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; -$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; +$masonry-h--row-gap: props.def( + --l-card-list--masonry-h--row-gap, + props.get(core.$size--400) +) !default; +$masonry-h--col-gap: props.def( + --l-card-list--masonry-h--col-gap, + props.get(core.$size--400) +) !default; +$masonry-h--row-height: props.def( + --l-card-list--masonry-h--row-height, + props.get(core.$size--3200) +) !default; +$masonry-h--quiet--row-gap: props.def( + --l-card-list--masonry-h--quiet--row-gap, + props.get(core.$size--800) +) !default; -$masonry-h-sm--row-gap: props.def(--l-card-list--masonry-h-sm--row-gap, props.get(core.$size--400)) !default; -$masonry-h-sm--col-gap: props.def(--l-card-list--masonry-h-sm--col-gap, props.get(core.$size--400)) !default; -$masonry-h-sm--row-height: props.def(--l-card-list--masonry-h-sm--row-height, props.get(core.$size--2600)) !default; -$masonry-h-sm--quiet--row-gap: props.def(--l-card-list--masonry-h-sm--quiet--row-gap, props.get(core.$size--800)) !default; +$masonry-h-sm--row-gap: props.def( + --l-card-list--masonry-h-sm--row-gap, + props.get(core.$size--400) +) !default; +$masonry-h-sm--col-gap: props.def( + --l-card-list--masonry-h-sm--col-gap, + props.get(core.$size--400) +) !default; +$masonry-h-sm--row-height: props.def( + --l-card-list--masonry-h-sm--row-height, + props.get(core.$size--2600) +) !default; +$masonry-h-sm--quiet--row-gap: props.def( + --l-card-list--masonry-h-sm--quiet--row-gap, + props.get(core.$size--800) +) !default; $masonry-h-layouts: ( - 'masonry-h' $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height $masonry-h--quiet--row-gap, - 'masonry-h-sm' $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height $masonry-h-sm--quiet--row-gap, + "masonry-h" $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height + $masonry-h--quiet--row-gap, + "masonry-h-sm" $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height + $masonry-h-sm--quiet--row-gap ) !default; -$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; -$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; -$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default; -$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default; +$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; +$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; +$masonry--col-width: props.def( + --l-card-list--masonry--col-width, + props.get(core.$size--3200) +) !default; +$masonry--quiet--row-gap: props.def( + --l-card-list--masonry--quiet--row-gap, + props.get(core.$size--800) +) !default; -$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default; -$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default; +$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default; +$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default; $shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default; $shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default; -$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default; -$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default; +$border-color: props.def( + --l-card-list--border-color, + props.get(card.$border-color), + "color" +) !default; +$border-color-dark: props.def( + --l-card-list--border-color, + props.get(core.$theme, --border-mute), + "dark" +) !default; diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index 46ded23..7b3dc3f 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -1,37 +1,37 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'container.vars'; -@use 'container.vars' as vars; +@forward "container.vars"; +@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') { + @include bem.layout("container") { @each $mod, $size in vars.$fixed-sizes { @include bem.modifier($mod) { max-inline-size: props.get($size); - margin-inline: auto; + margin-inline: auto; } } - @include bem.modifier('pad-i') { + @include bem.modifier("pad-i") { padding-inline: props.get(vars.$pad-i); } - @include bem.modifier('pad-b') { + @include bem.modifier("pad-b") { padding-block: props.get(vars.$pad-b); } @each $mod, $pad-i, $pad-b in vars.$sizes { @include bem.modifier($mod) { - @include bem.modifier('pad-i') { + @include bem.modifier("pad-i") { padding-inline: props.get($pad-i); } - @include bem.modifier('pad-b') { + @include bem.modifier("pad-b") { padding-block: props.get($pad-b); } } diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss index 094046f..09ef165 100644 --- a/src/layouts/_container.vars.scss +++ b/src/layouts/_container.vars.scss @@ -1,39 +1,36 @@ -@use 'pkg:iro-sass/src/functions' as fn; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/functions" as fn; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default; $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: 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--600)) !default; $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default; -$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), 'md') !default; -$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), 'md') !default; +$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), "md") !default; +$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), "md") !default; -$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default; -$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default; +$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), "sm") !default; +$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), "sm") !default; -$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default; -$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default; +$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), "xs") !default; +$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), "xs") !default; $sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default; $sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default; -$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default; -$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default; +$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), "sm") !default; +$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), "sm") !default; -$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default; -$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default; +$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), "xs") !default; +$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), "xs") !default; -$sizes: ( - 'sm' $sm--pad-i $sm--pad-b, - 'md' $sm--pad-i $sm--pad-b, -) !default; +$sizes: ("sm" $sm--pad-i $sm--pad-b, "md" $sm--pad-i $sm--pad-b) !default; diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss index ea0b268..70d29f9 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss @@ -1,18 +1,18 @@ -@use 'pkg:iro-sass/src/bem'; +@use "pkg:iro-sass/bem"; @mixin styles { - @include bem.layout('flex') { + @include bem.layout("flex") { display: flex; - @include bem.modifier('column') { + @include bem.modifier("column") { flex-direction: column; } - @include bem.modifier('wrap') { + @include bem.modifier("wrap") { flex-wrap: wrap; } - @include bem.modifier('wrap-reverse') { + @include bem.modifier("wrap-reverse") { flex-wrap: wrap-reverse; } } diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index f094cbc..f71e469 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -1,57 +1,57 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'form.vars'; -@use 'form.vars' as vars; +@forward "form.vars"; +@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; + @include bem.layout("form") { + display: flex; flex-direction: column; - gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); + gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); - @include bem.elem('item') { + @include bem.elem("item") { display: block; } - @include bem.elem('item-content') { - @include bem.modifier('align-start') { + @include bem.elem("item-content") { + @include bem.modifier("align-start") { align-self: start; } } - @include bem.modifier('row') { + @include bem.modifier("row") { flex-direction: row; - align-items: flex-end; + align-items: flex-end; } - @include bem.modifier('labels-start', 'labels-end') { - display: grid; - grid-template-rows: auto; + @include bem.modifier("labels-start", "labels-end") { + display: grid; + grid-template-rows: auto; grid-template-columns: auto 1fr; - align-items: baseline; + align-items: baseline; - @include bem.elem('item') { + @include bem.elem("item") { display: contents; } - @include bem.elem('item-label') { - grid-column: 1; + @include bem.elem("item-label") { + grid-column: 1; padding-inline-end: 0; } - @include bem.elem('item-content') { - grid-column: 2; + @include bem.elem("item-content") { + grid-column: 2; margin-block-start: 0; } } - @include bem.modifier('labels-end') { - @include bem.elem('item-label') { + @include bem.modifier("labels-end") { + @include bem.elem("item-label") { text-align: end; } } diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss index 52670cc..68cb23a 100644 --- a/src/layouts/_form.vars.scss +++ b/src/layouts/_form.vars.scss @@ -1,5 +1,5 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default; +$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default; $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default; diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss index 32b3097..00787db 100644 --- a/src/layouts/_hlist.scss +++ b/src/layouts/_hlist.scss @@ -1,30 +1,30 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'hlist.vars'; -@use 'hlist.vars' as vars; -@use '../objects/button.vars' as button; +@forward "hlist.vars"; +@use "hlist.vars" as vars; +@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('hlist') { - display: inline-flex; + @include bem.layout("hlist") { + display: inline-flex; flex-wrap: wrap; - gap: props.get(vars.$gap); + gap: props.get(vars.$gap); @each $mod, $size in vars.$sizes { @include bem.modifier($mod) { gap: props.get($size); - @include bem.modifier('separated') { - @include bem.elem('item') { + @include bem.modifier("separated") { + @include bem.elem("item") { @include bem.next-twin-elem { &::before { - content: '·'; - margin-inline: calc(.65 * props.get($size)); + content: "·"; + margin-inline: calc(0.65 * props.get($size)); } } } @@ -32,40 +32,51 @@ } } - @include bem.modifier('separated') { + @include bem.modifier("separated") { gap: 0; - @include bem.elem('item') { + @include bem.elem("item") { @include bem.next-twin-elem { &::before { - content: '·'; - margin-inline: calc(.65 * props.get(vars.$gap)); + content: "·"; + margin-inline: calc(0.65 * props.get(vars.$gap)); } } } } - @include bem.modifier('buttons') { + @include bem.modifier("buttons") { 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) - 0.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('buttons-#{$mod}') { + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes + { + @include bem.modifier("buttons-#{$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("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("icon") { + margin-inline: calc( + -1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em * + (props.get(button.$line-height) - 1) + ); } } } diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss index 2d99057..557cfae 100644 --- a/src/layouts/_hlist.vars.scss +++ b/src/layouts/_hlist.vars.scss @@ -1,16 +1,16 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default; $gapless: props.def(--l-hlist--gapless, 0) !default; -$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default; -$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default; -$xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default; +$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default; +$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default; +$xl: props.def(--l-hlist--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/_media.scss b/src/layouts/_media.scss index 4492ea9..b6732bf 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss @@ -1,17 +1,17 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'media.vars'; -@use 'media.vars' as vars; +@forward "media.vars"; +@use "media.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.layout('media') { - display: flex; - gap: props.get(vars.$gap); + @include bem.layout("media") { + display: flex; + gap: props.get(vars.$gap); align-items: center; line-height: 1.4; @@ -21,19 +21,19 @@ } } - @include bem.modifier('wrap') { + @include bem.modifier("wrap") { flex-wrap: wrap; } - @include bem.elem('block') { + @include bem.elem("block") { flex: 0 0 auto; - @include bem.modifier('shrink', 'main') { - flex-shrink: 1; + @include bem.modifier("shrink", "main") { + flex-shrink: 1; min-inline-size: 0; } - @include bem.modifier('main') { + @include bem.modifier("main") { inline-size: 100%; } } diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss index 78e157f..f24ea2a 100644 --- a/src/layouts/_media.vars.scss +++ b/src/layouts/_media.vars.scss @@ -1,16 +1,16 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default; +$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default; $gapless: props.def(--l-media--gapless, 0) !default; -$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default; -$lg: props.def(--l-media--lg, props.get(core.$size--300)) !default; -$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default; +$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default; +$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 ab983b9..57e2512 100644 --- a/src/layouts/_overflow.scss +++ b/src/layouts/_overflow.scss @@ -1,10 +1,10 @@ -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; @mixin styles { - @include bem.layout('overflow') { - overflow: auto; + @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 ea651c7..1bffddd 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss @@ -1,101 +1,110 @@ -@use 'sass:meta'; -@use 'pkg:include-media/dist/include-media' as media; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:include-media/dist/include-media" as media; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'split-view.vars'; -@use 'split-view.vars' as vars; +@forward "split-view.vars"; +@use "split-view.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.layout('split-view') { - display: flex; - gap: props.get(vars.$col-gap); + @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%; + @include bem.elem("panel") { + flex: 1 1 auto; + inline-size: 100%; min-inline-size: 0; &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } - @include bem.modifier('side-25') { - flex: 0 0 auto; + @include bem.modifier("side-25") { + flex: 0 0 auto; inline-size: 25%; } - @include bem.modifier('min-50') { + @include bem.modifier("min-50") { min-inline-size: props.get(vars.$panel--min-50); } - @include bem.modifier('min-100') { + @include bem.modifier("min-100") { min-inline-size: props.get(vars.$panel--min-100); } - @include bem.modifier('min-200') { + @include bem.modifier("min-200") { min-inline-size: props.get(vars.$panel--min-200); } - @include bem.modifier('sticky') { - position: sticky; + @include bem.modifier("sticky") { + position: sticky; inset-block-start: props.get(vars.$panel--sticky-offset); } } - @include bem.modifier('gapless') { + @include bem.modifier("gapless") { gap: props.get(vars.$gapless); - @include bem.elem('panel') { - @include bem.modifier('min-50') { - min-inline-size: calc(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless)); + @include bem.elem("panel") { + @include bem.modifier("min-50") { + min-inline-size: calc( + props.get(vars.$panel--min-50) + + props.get(vars.$col-gap) - props.get(vars.$gapless) + ); } - @include bem.modifier('min-100') { - min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless)); + @include bem.modifier("min-100") { + min-inline-size: calc( + props.get(vars.$panel--min-100) + + props.get(vars.$col-gap) - props.get(vars.$gapless) + ); } - @include bem.modifier('min-200') { - min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless)); + @include bem.modifier("min-200") { + min-inline-size: calc( + props.get(vars.$panel--min-200) + + props.get(vars.$col-gap) - props.get(vars.$gapless) + ); } } } - @include bem.elem('content') { + @include bem.elem("content") { inline-size: 100%; } - @include media.media('<=md') { + @include media.media("<=md") { flex-direction: column; - gap: props.get(vars.$row-gap); - align-items: stretch; + gap: props.get(vars.$row-gap); + align-items: stretch; - @include bem.modifier('gapless') { + @include bem.modifier("gapless") { gap: props.get(vars.$gapless); } - @include bem.modifier('wrap-reverse') { + @include bem.modifier("wrap-reverse") { flex-direction: column-reverse; } - @include bem.elem('panel') { + @include bem.elem("panel") { inline-size: auto; - @include bem.modifier('side-25') { + @include bem.modifier("side-25") { inline-size: auto; } - @include bem.modifier('min-50', 'min-100', 'min-200') { + @include bem.modifier("min-50", "min-100", "min-200") { min-inline-size: 0; } - @include bem.modifier('sticky') { + @include bem.modifier("sticky") { position: static; } } diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss index b2944e7..9b6dd21 100644 --- a/src/layouts/_split-view.vars.scss +++ b/src/layouts/_split-view.vars.scss @@ -1,13 +1,16 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default; -$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default; +$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default; +$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default; $gapless: props.def(--l-split-view--gapless, 0rem) !default; -$panel--min-50: props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default; +$panel--min-50: props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default; $panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default; $panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default; -$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default; +$panel--sticky-offset: props.def( + --l-split-view--panel--sticky-offset, + props.get(core.$sticky-top-offset) +) !default; diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index c2a1c58..3aeb781 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -1,44 +1,37 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'alert.vars'; -@use 'alert.vars' as vars; +@forward "alert.vars"; +@use "alert.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('alert') { - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); + @include bem.object("alert") { + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) props.get(vars.$shadow-color); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } @each $mod, $theme in vars.$themes-config { @include bem.modifier($mod) { background-color: props.get(vars.$themes, $theme, --bg-color); border-color: props.get(vars.$themes, $theme, --border-color); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(vars.$themes, $theme, --shadow-color); } } diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss index bbd3dad..aedd917 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss @@ -1,36 +1,50 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; -$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; -$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; +$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; +$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; +$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; -$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default; -$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default; +$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default; +$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default; $shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default; $shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default; -$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default; +$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), "color") !default; +$border-color: props.def( + --o-alert--border-color, + props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) + props.get(core.$theme, --text-mute), + "color" +) !default; -$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; +$shadow-color: props.def( + --o-alert--shadow-color, + props.get(core.$transparent-colors, --black, --200), + "color" +) !default; $themes-config: ( - accent: --accent, + accent: --accent, positive: --positive, negative: --negative, - warning: --warning, + warning: --warning, ) !default; -$themes: props.def(--o-alert, (), 'color'); +$themes: props.def(--o-alert, (), "color"); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - $key: ( - --bg-color: props.get(core.$theme, --bg-l2), - --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), - --shadow-color: props.get(core.$theme, $key, --200), + $themes: props.merge( + $themes, + ( + $key: ( + --bg-color: props.get(core.$theme, --bg-l2), + --border-color: props.get(core.$theme, $key, --700) + props.get(core.$theme, $key, --700) + props.get(core.$theme, $key, --800), + --shadow-color: props.get(core.$theme, $key, --200), + ), ) - )); + ); } diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 272c213..f805502 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -1,118 +1,135 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'avatar.vars'; -@use 'avatar.vars' as vars; +@forward "avatar.vars"; +@use "avatar.vars" as vars; @mixin status($indicator-size) { - @include bem.elem('status') { + @include bem.elem("status") { inline-size: props.get($indicator-size); - block-size: props.get($indicator-size); - - @include bem.sibling-elem('content') { - mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at - calc(100% - .5 * props.get($indicator-size)) - calc(100% - .5 * props.get($indicator-size)), - transparent 95%, - #fff); + block-size: props.get($indicator-size); + + @include bem.sibling-elem("content") { + mask-image: radial-gradient( + circle calc(0.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) + at calc(100% - 0.5 * props.get($indicator-size)) + calc(100% - 0.5 * props.get($indicator-size)), + transparent 95%, + #fff + ); } } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('avatar') { - position: relative; - display: inline-block; - font-style: normal; - vertical-align: .05em; - border-radius: props.get(vars.$rounding); + @include bem.object("avatar") { + position: relative; + display: inline-block; + font-style: normal; + vertical-align: 0.05em; + border-radius: props.get(vars.$rounding); &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: 1; + display: none; pointer-events: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - content: ''; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: props.get(vars.$rounding); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + content: ""; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: props.get(vars.$rounding); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } - @include bem.elem('status') { - position: absolute; - inset-block-end: 0; + @include bem.elem("status") { + position: absolute; + inset-block-end: 0; inset-inline-end: 0; } - @include bem.elem('icon') { - position: absolute; - inset-block-end: 0; + @include bem.elem("icon") { + position: absolute; + inset-block-end: 0; inset-inline-end: 0; - display: flex; - align-items: flex-end; - justify-content: flex-end; - inline-size: props.get(vars.$icon-size); - block-size: props.get(vars.$icon-size); + display: flex; + align-items: flex-end; + justify-content: flex-end; + inline-size: props.get(vars.$icon-size); + block-size: props.get(vars.$icon-size); - @include bem.sibling-elem('content') { + @include bem.sibling-elem("content") { clip-path: props.get(vars.$icon-mask); } } - @include bem.elem('content') { - display: block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - font-size: props.get(vars.$font-size); - line-height: props.get(vars.$size); - text-align: center; - object-fit: cover; - object-position: center center; - border-radius: props.get(vars.$rounding); + @include bem.elem("content") { + display: block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$size); + text-align: center; + object-fit: cover; + object-position: center center; + border-radius: props.get(vars.$rounding); } - @include bem.modifier('circle') { + @include bem.modifier("circle") { border-radius: 100%; &::after { border-radius: 100%; } - @include bem.elem('content') { + @include bem.elem("content") { border-radius: 100%; } } - @include bem.modifier('placeholder') { - @include bem.elem('content') { + @include bem.modifier("placeholder") { + @include bem.elem("content") { background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); } } - @include bem.modifier('colored') { - @include bem.elem('content') { - color: #fff; - background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); + @include bem.modifier("colored") { + @include bem.elem("content") { + color: #fff; + background-color: hsl( + props.get(vars.$bg-color--h), + props.get(vars.$bg-color--s), + props.get(vars.$bg-color--l) + ); } } - @include bem.modifier('colored-gradient') { - @include bem.elem('content') { - color: #fff; - background: linear-gradient(props.get(vars.$bg-angle), - hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), - hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); + @include bem.modifier("colored-gradient") { + @include bem.elem("content") { + color: #fff; + background: linear-gradient( + props.get(vars.$bg-angle), + hsl( + props.get(vars.$bg-color--h), + props.get(vars.$bg-color--s), + props.get(vars.$bg-color--l) + ), + hsl( + props.get(vars.$bg-color-2--h), + props.get(vars.$bg-color-2--s), + props.get(vars.$bg-color-2--l) + ) + ); } } @@ -122,19 +139,19 @@ @include bem.modifier($mod) { @include status($indicator-size); - @include bem.elem('icon') { + @include bem.elem("icon") { inline-size: props.get($icon-size); - block-size: props.get($icon-size); + block-size: props.get($icon-size); - @include bem.sibling-elem('content') { - clip-path: props.get($icon-mask); + @include bem.sibling-elem("content") { + clip-path: props.get($icon-mask); } } - @include bem.elem('content') { + @include bem.elem("content") { inline-size: props.get($size); - block-size: props.get($size); - font-size: props.get($font-size); + block-size: props.get($size); + font-size: props.get($font-size); line-height: props.get($size); } } diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index 467d7cc..7d1c342 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss @@ -1,79 +1,102 @@ -@use 'sass:math'; +@use "sass:math"; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; @function icon-mask($p) { $offset: 0.15 * math.div(0.5, $p); @return 'data:image/svg+xml;utf8,#avatar_mask'; } -$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; -$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; -$indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default; +$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; +$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; +$indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default; $indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default; -$rounding: props.def(--o-avatar--rounding, 25%) !default; -$icon-size: props.def(--o-avatar--icon-size, 1.2em) !default; -$icon-mask: props.def(--o-avatar--icon-mask, url(icon-mask(.5))) !default; +$rounding: props.def(--o-avatar--rounding, 25%) !default; +$icon-size: props.def(--o-avatar--icon-size, 1.2em) !default; +$icon-mask: props.def(--o-avatar--icon-mask, url(icon-mask(0.5))) !default; -$size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default; -$font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default; -$indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default; -$icon-size--xxxl: props.def(--o-avatar--xxxl--icon-size, 1.9em) !default; -$icon-mask--xxxl: props.def(--o-avatar--xxxl--icon-mask, url(icon-mask(.75))) !default; +$size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default; +$font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default; +$indicator-size--xxxl: props.def( + --o-avatar--xxxl--indicator-size, + props.get(core.$size--400) +) !default; +$icon-size--xxxl: props.def(--o-avatar--xxxl--icon-size, 1.9em) !default; +$icon-mask--xxxl: props.def(--o-avatar--xxxl--icon-mask, url(icon-mask(0.75))) !default; -$size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default; -$font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default; -$indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default; -$icon-size--xxl: props.def(--o-avatar--xxl--icon-size, 1.7em) !default; -$icon-mask--xxl: props.def(--o-avatar--xxl--icon-mask, url(icon-mask(.7))) !default; +$size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default; +$font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default; +$indicator-size--xxl: props.def( + --o-avatar--xxl--indicator-size, + props.get(core.$size--300) +) !default; +$icon-size--xxl: props.def(--o-avatar--xxl--icon-size, 1.7em) !default; +$icon-mask--xxl: props.def(--o-avatar--xxl--icon-mask, url(icon-mask(0.7))) !default; -$size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default; -$font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default; +$size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default; +$font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default; $indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default; -$icon-size--xl: props.def(--o-avatar--xl--icon-size, 1.5em) !default; -$icon-mask--xl: props.def(--o-avatar--xl--icon-mask, url(icon-mask(.6))) !default; +$icon-size--xl: props.def(--o-avatar--xl--icon-size, 1.5em) !default; +$icon-mask--xl: props.def(--o-avatar--xl--icon-mask, url(icon-mask(0.6))) !default; -$size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default; -$font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default; +$size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default; +$font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default; $indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default; -$icon-size--lg: props.def(--o-avatar--lg--icon-size, 1.25em) !default; -$icon-mask--lg: props.def(--o-avatar--lg--icon-mask, url(icon-mask(.55))) !default; +$icon-size--lg: props.def(--o-avatar--lg--icon-size, 1.25em) !default; +$icon-mask--lg: props.def(--o-avatar--lg--icon-mask, url(icon-mask(0.55))) !default; -$size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default; -$font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default; +$size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default; +$font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default; $indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default; -$icon-size--sm: props.def(--o-avatar--sm--icon-size, 1.2em) !default; -$icon-mask--sm: props.def(--o-avatar--sm--icon-mask, url(icon-mask(.5))) !default; +$icon-size--sm: props.def(--o-avatar--sm--icon-size, 1.2em) !default; +$icon-mask--sm: props.def(--o-avatar--sm--icon-mask, url(icon-mask(0.5))) !default; -$size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default; -$font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default; +$size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default; +$font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default; $indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default; -$icon-size--xs: props.def(--o-avatar--xs--icon-size, 1.2em) !default; -$icon-mask--xs: props.def(--o-avatar--xs--icon-mask, url(icon-mask(.5))) !default; +$icon-size--xs: props.def(--o-avatar--xs--icon-size, 1.2em) !default; +$icon-mask--xs: props.def(--o-avatar--xs--icon-mask, url(icon-mask(0.5))) !default; -$key-focus--border-width: props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-avatar--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-avatar--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-avatar--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default; -$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; -$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; +$bg-color--h: props.def(--o-avatar--bg-color--h, 354, "color") !default; +$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, "color") !default; +$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, "color") !default; -$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default; -$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default; -$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default; +$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, "color") !default; +$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, "color") !default; +$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, "color") !default; $bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default; -$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--border-color: props.def( + --o-avatar--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-avatar--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; $sizes: ( - 'xs' $size--xs $font-size--xs $indicator-size--xs $icon-size--xs $icon-mask--xs, - 'sm' $size--sm $font-size--sm $indicator-size--sm $icon-size--sm $icon-mask--sm, - 'lg' $size--lg $font-size--lg $indicator-size--lg $icon-size--lg $icon-mask--lg, - 'xl' $size--xl $font-size--xl $indicator-size--xl $icon-size--xl $icon-mask--xl, - 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl $icon-size--xxl $icon-mask--xxl, - 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl $icon-size--xxxl $icon-mask--xxxl, + "xs" $size--xs $font-size--xs $indicator-size--xs $icon-size--xs $icon-mask--xs, + "sm" $size--sm $font-size--sm $indicator-size--sm $icon-size--sm $icon-mask--sm, + "lg" $size--lg $font-size--lg $indicator-size--lg $icon-size--lg $icon-mask--lg, + "xl" $size--xl $font-size--xl $indicator-size--xl $icon-size--xl $icon-mask--xl, + "xxl" $size--xxl $font-size--xxl $indicator-size--xxl $icon-size--xxl $icon-mask--xxl, + "xxxl" $size--xxxl $font-size--xxxl $indicator-size--xxxl $icon-size--xxxl $icon-mask--xxxl ) !default; diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 6660abf..1a7d1fa 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss @@ -1,23 +1,23 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'backdrop.vars'; -@use 'backdrop.vars' as vars; +@forward "backdrop.vars"; +@use "backdrop.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('backdrop') { - position: fixed; - inset: 0; - z-index: props.get(vars.$z-index); - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: auto; + @include bem.object("backdrop") { + position: fixed; + inset: 0; + z-index: props.get(vars.$z-index); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: auto; background-color: props.get(vars.$bg-color); - backdrop-filter: blur(props.get(vars.$blur)); + backdrop-filter: blur(props.get(vars.$blur)); } } diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss index 9206117..78f4742 100644 --- a/src/objects/_backdrop.vars.scss +++ b/src/objects/_backdrop.vars.scss @@ -1,6 +1,10 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$z-index: props.def(--o-backdrop--z-index, 10000) !default; -$blur: props.def(--o-backdrop--blur, 2em) !default; -$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default; +$z-index: props.def(--o-backdrop--z-index, 10000) !default; +$blur: props.def(--o-backdrop--blur, 2em) !default; +$bg-color: props.def( + --o-backdrop--bg-color, + props.get(core.$transparent-colors, --black, --600), + "color" +) !default; diff --git a/src/objects/_button.scss b/src/objects/_button.scss index a3c8187..8adc0f7 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -1,115 +1,119 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'button.vars'; -@use 'button.vars' as vars; +@forward "button.vars"; +@use "button.vars" as vars; @mixin -apply-theme($theme, $key: ()) { - color: props.get($theme, list.join($key, --disabled --label-color)...); + color: props.get($theme, list.join($key, --disabled --label-color)...); background-color: props.get($theme, list.join($key, --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --disabled --border-color)...); + border-color: props.get($theme, list.join($key, --disabled --border-color)...); &::after { outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width) + ) props.get($theme, list.join($key, --key-focus --outline-color)...); } &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --label-color)...); + color: props.get($theme, list.join($key, --label-color)...); background-color: props.get($theme, list.join($key, --bg-color)...); - border-color: props.get($theme, list.join($key, --border-color)...); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --shadow-color)...); + border-color: props.get($theme, list.join($key, --border-color)...); + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...); &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --hover --label-color)...); + color: props.get($theme, list.join($key, --hover --label-color)...); background-color: props.get($theme, list.join($key, --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --hover --border-color)...); + border-color: props.get($theme, list.join($key, --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --active --label-color)...); + color: props.get($theme, list.join($key, --active --label-color)...); background-color: props.get($theme, list.join($key, --active --bg-color)...); - border-color: props.get($theme, list.join($key, --active --border-color)...); - box-shadow: none; + border-color: props.get($theme, list.join($key, --active --border-color)...); + box-shadow: none; } } - @include bem.modifier('badge') { - color: props.get($theme, list.join($key, --badge --label-color)...); + @include bem.modifier("badge") { + color: props.get($theme, list.join($key, --badge --label-color)...); background-color: props.get($theme, list.join($key, --badge --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --border-color)...); - box-shadow: none; + border-color: props.get($theme, list.join($key, --badge --border-color)...); + box-shadow: none; &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --badge --label-color)...); + color: props.get($theme, list.join($key, --badge --label-color)...); background-color: props.get($theme, list.join($key, --badge --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --border-color)...); - box-shadow: none; + border-color: props.get($theme, list.join($key, --badge --border-color)...); + box-shadow: none; &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --badge --hover --label-color)...); + color: props.get($theme, list.join($key, --badge --hover --label-color)...); background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); + border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); } &:active { - color: props.get($theme, list.join($key, --badge --active --label-color)...); - background-color: props.get($theme, list.join($key, --badge --active --bg-color)...); - border-color: props.get($theme, list.join($key, --badge --active --border-color)...); + color: props.get($theme, list.join($key, --badge --active --label-color)...); + background-color: props.get( + $theme, + list.join($key, --badge --active --bg-color)... + ); + border-color: props.get( + $theme, + list.join($key, --badge --active --border-color)... + ); } } } - @include bem.modifier('quiet') { - color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); + @include bem.modifier("quiet") { + color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); background-color: transparent; - border-color: transparent; + border-color: transparent; &:link, &:visited, &:enabled { - color: props.get($theme, list.join($key, --quiet --label-color)...); + color: props.get($theme, list.join($key, --quiet --label-color)...); background-color: transparent; - border-color: transparent; - box-shadow: none; + border-color: transparent; + box-shadow: none; &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --quiet --hover --label-color)...); + color: props.get($theme, list.join($key, --quiet --hover --label-color)...); background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); - border-color: transparent; + border-color: transparent; } &:active { - color: props.get($theme, list.join($key, --quiet --active --label-color)...); - background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); - border-color: transparent; + color: props.get($theme, list.join($key, --quiet --active --label-color)...); + background-color: props.get( + $theme, + list.join($key, --quiet --active --bg-color)... + ); + border-color: transparent; } } } - @include bem.is('highlighted') { + @include bem.is("highlighted") { &:link, &:visited, &:enabled { @@ -121,32 +125,27 @@ box-shadow: 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get($theme, list.join($key, --highlighted --shadow-color)...); + props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) + props.get($theme, list.join($key, --highlighted --shadow-color)...); &:focus-visible { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...); } } } - @include bem.is('selected') { - color: props.get($theme, list.join($key, --selected --disabled --label-color)...); + @include bem.is("selected") { + color: props.get($theme, list.join($key, --selected --disabled --label-color)...); background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); + border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { - color: props.get($theme, list.join($key, --selected --label-color)...); + @include bem.multi("&:link, &:visited, &:enabled", "modifier" "badge") { + color: props.get($theme, list.join($key, --selected --label-color)...); background-color: props.get($theme, list.join($key, --selected --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --border-color)...); + border-color: props.get($theme, list.join($key, --selected --border-color)...); } &:link, @@ -154,47 +153,67 @@ &:enabled { &:hover, &:focus-visible { - color: props.get($theme, list.join($key, --selected --hover --label-color)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); + color: props.get($theme, list.join($key, --selected --hover --label-color)...); + background-color: props.get( + $theme, + list.join($key, --selected --hover --bg-color)... + ); + border-color: props.get( + $theme, + list.join($key, --selected --hover --border-color)... + ); } &:active { - color: props.get($theme, list.join($key, --selected --active --label-color)...); - background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); - border-color: props.get($theme, list.join($key, --selected --active --border-color)...); + color: props.get($theme, list.join($key, --selected --active --label-color)...); + background-color: props.get( + $theme, + list.join($key, --selected --active --bg-color)... + ); + border-color: props.get( + $theme, + list.join($key, --selected --active --border-color)... + ); } } } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('button') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - text-overflow: ellipsis; - font-size: props.get(vars.$font-size); - line-height: props.get(vars.$line-height); - text-align: center; - white-space: nowrap; - text-decoration: none; - border: props.get(vars.$border-width) solid transparent; - border-radius: props.get(vars.$rounding); - transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("button") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + text-overflow: ellipsis; + font-size: props.get(vars.$font-size); + line-height: props.get(vars.$line-height); + text-align: center; + white-space: nowrap; + text-decoration: none; + border: props.get(vars.$border-width) solid transparent; + border-radius: props.get(vars.$rounding); + transition: + color 0.1s, + background-color 0.1s, + border-color 0.1s, + box-shadow 0.1s; &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; + position: absolute; + inset: calc( + -1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset) + ); + z-index: 1; + display: none; pointer-events: none; - outline: transparent solid props.get(vars.$key-focus--border-width); - content: ''; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + outline: transparent solid props.get(vars.$key-focus--border-width); + content: ""; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); } &:link, @@ -209,7 +228,7 @@ } } - @include bem.elem('label') { + @include bem.elem("label") { display: inline-block; margin-inline: props.get(vars.$pad-i-label); } @@ -222,79 +241,91 @@ } } - @include bem.modifier('pill') { + @include bem.modifier("pill") { padding-inline: props.get(vars.$pad-i-pill); - border-radius: 100em; + border-radius: 100em; &::after { - border-radius: 100em; + border-radius: 100em; } } - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); + @include bem.modifier("icon") { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); padding-inline: 0; } - @include bem.modifier('wide') { - @include bem.elem('label') { + @include bem.modifier("wide") { + @include bem.elem("label") { margin-inline: props.get(vars.$pad-i-wide); } } - @include bem.modifier('justify') { + @include bem.modifier("justify") { text-align: justify; text-align-last: justify; } - @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { + @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, + $font-size in vars.$fixed-sizes + { @include bem.modifier($mod) { - padding-block: props.get($pad-b); + padding-block: props.get($pad-b); padding-inline: props.get($pad-i); - font-size: props.get($font-size); + font-size: props.get($font-size); - @include bem.elem('label') { + @include bem.elem("label") { margin-inline: props.get($pad-i-label); } - @include bem.modifier('pill') { + @include bem.modifier("pill") { padding-inline: props.get($pad-i-pill); } - @include bem.modifier('icon') { - inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); + @include bem.modifier("icon") { + inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); padding-inline: 0; } - @include bem.modifier('wide') { - @include bem.elem('label') { + @include bem.modifier("wide") { + @include bem.elem("label") { margin-inline: props.get($pad-i-wide); } } } } - @include bem.modifier('align-block') { + @include bem.modifier("align-block") { margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); + @include bem.modifier("pill") { + margin-inline: calc( + -1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width) + ); } - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + @include bem.modifier("icon") { + margin-inline: calc( + -1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - 0.5em * + (props.get(vars.$line-height) - 1) + ); } @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { @include bem.modifier($mod) { margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); - @include bem.modifier('pill') { - margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); + @include bem.modifier("pill") { + margin-inline: calc( + -1 * props.get($pad-i-pill) - props.get(vars.$border-width) + ); } - @include bem.modifier('icon') { - margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); + @include bem.modifier("icon") { + margin-inline: calc( + -1 * props.get($pad-b) - props.get(vars.$border-width) - 0.5em * + (props.get(vars.$line-height) - 1) + ); } } } diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 3f835ae..a137d6d 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -1,386 +1,456 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$line-height: props.def(--o-button--line-height, 1.4) !default; +$line-height: props.def(--o-button--line-height, 1.4) !default; $border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default; -$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; +$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; -$pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default; +$pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default; $pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default; -$pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default; -$pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default; -$pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default; -$font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default; +$pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default; +$pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default; +$pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default; +$font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default; -$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default; +$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default; $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default; -$pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default; -$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default; -$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default; -$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default; - -$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; -$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; -$pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default; -$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default; -$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; -$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; - -$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; +$pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default; +$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default; +$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default; +$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default; + +$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; +$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; +$pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default; +$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default; +$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; +$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; + +$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default; -$pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default; -$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; -$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; -$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; +$pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default; +$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; +$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; +$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; -$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; +$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default; -$pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default; -$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; -$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; -$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; +$pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default; +$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; +$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; +$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; -$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; -$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; +$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; +$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; -$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-button--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-button--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-button--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; $fixed-sizes: ( - 'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs, - 'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, - 'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, - 'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, + "xs" $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs, + "sm" $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, + "lg" $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, + "xl" $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl ) !default; -$themes: props.def(--o-button, (), 'color'); +$themes: props.def(--o-button, (), "color"); $default-theme-override: () !default; -$default-theme: map.deep-merge(( - --bg-color: props.get(core.$theme, --bg-l2), - --label-color: props.get(core.$theme, --text), - --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), - --shadow-color: props.get(core.$theme, --shadow), - - --hover: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - - --disabled: ( - --bg-color: transparent, - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --text-disabled), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, --focus, --border), - --shadow-color: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --heading), - - --hover: ( - --bg-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text), - ), - - --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text-mute), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, --text), - +$default-theme: map.deep-merge( + ( + --bg-color: props.get(core.$theme, --bg-l2), + --label-color: props.get(core.$theme, --text), + --border-color: props.get(core.$theme, --box, --border) + props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), + --shadow-color: props.get(core.$theme, --shadow), --hover: ( - --bg-color: props.get(core.$theme, --border-mute), + --bg-color: props.get(core.$theme, --bg-l1), --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), ), --active: ( - --bg-color: props.get(core.$theme, --border), + --bg-color: props.get(core.$theme, --border-mute), --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), ), --disabled: ( + --bg-color: transparent, --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --text-disabled), ), - ), -), $default-theme-override) !default; -$default-theme: props.def(--o-button, $default-theme, 'color'); -$default-theme-dark-override: () !default; -$default-theme-dark: map.deep-merge(( - --bg-color: props.get(core.$theme, --border-mute), - --border-color: props.get(core.$theme, --border-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border), - --border-color: props.get(core.$theme, --border), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-strong), - ), - - --selected: ( - --border-color: props.get(core.$theme, --text), - ), -), $default-theme-override) !default; -$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); - -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), - $themes: props.merge($themes, ( - $button-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), - --shadow-color: props.get(core.$transparent-colors, --black, --200), + --highlighted: ( + --border-color: props.get(core.$theme, --focus, --border), + --shadow-color: props.get(core.$theme, --focus, --outline), + ), + --selected: ( + --bg-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --heading), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --400), + --bg-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text), ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --500), + --bg-color: props.get(core.$theme, --text-mute), + --label-color: props.get(core.$theme, --base, --50), + --border-color: props.get(core.$theme, --text-mute), ), --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --300), + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), ), + ), - --key-focus: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), + --badge: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-mute), + --hover: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border), ), - --highlighted: ( - --border-color: props.get(core.$transparent-colors, $theme, --900), - --shadow-color: props.get(core.$transparent-colors, --black, --200), + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --heading), + --border-color: props.get(core.$theme, --border-strong), ), + ), - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), - - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), - - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --text), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), + --quiet: ( + --label-color: props.get(core.$theme, --text), + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), + ), - --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --500), - --border-color: props.get(core.$transparent-colors, $theme, --100), - ), + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), ), - --badge: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ), + $default-theme-override +) !default; +$default-theme: props.def(--o-button, $default-theme, "color"); - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), +$default-theme-dark-override: () !default; +$default-theme-dark: map.deep-merge( + ( + --bg-color: props.get(core.$theme, --border-mute), + --border-color: props.get(core.$theme, --border-mute), + --hover: ( + --bg-color: props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --border), + ), - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --label-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: transparent, - ), - ), + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-strong), + ), - --quiet: ( - --label-color: props.get(core.$transparent-colors, $theme, --900), + --selected: ( + --border-color: props.get(core.$theme, --text), + ), + ), + $default-theme-override +) !default; +$default-theme-dark: props.def(--o-button, $default-theme-dark, "dark"); - --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), +@each $theme in map.keys(props.get(core.$transparent-colors)) { + $button-theme: --static-#{string.slice($theme, 3)}; - --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), + $themes: props.merge( + $themes, + ( + $button-theme: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --300) + props.get(core.$transparent-colors, $theme, --300) + props.get(core.$transparent-colors, $theme, --400), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --400), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --100), + --label-color: props.get(core.$transparent-colors, $theme, --500), + --border-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --key-focus: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + + --highlighted: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --shadow-color: props.get(core.$transparent-colors, --black, --200), + ), + + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --text), + --border-color: props.get(core.$transparent-colors, $theme, --100) + props.get(core.$transparent-colors, $theme, --100) + props.get(core.$transparent-colors, $theme, --200), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --border-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --border-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + --border-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + ), + + --badge: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + --border-color: transparent, + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + --border-color: transparent, + ), + ), + + --quiet: ( + --label-color: props.get(core.$transparent-colors, $theme, --900), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --disabled: ( + --label-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + ), + ), ), - - --disabled: ( - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), ) - )); + ); } $themes-config: ( - accent: --accent, + accent: --accent, positive: --positive, negative: --negative, - warning: --warning, + warning: --warning, ) !default; @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), - --shadow-color: props.get(core.$theme, $key, --200), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --600), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --800), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --bg-l1), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border), - ), - - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), - ), - - --highlighted: ( - --border-color: props.get(core.$theme, $key, --900), - --shadow-color: props.get(core.$theme, $key, --200), - ), - - --selected: ( - --bg-color: props.get(core.$theme, #{$key}-static, --900), - --label-color: props.get(core.$theme, #{$key}-static, --900-text), - --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), - - --hover: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1000), - --label-color: props.get(core.$theme, #{$key}-static, --1000-text), - --border-color: props.get(core.$theme, #{$key}-static, --1000), - ), - - --active: ( - --bg-color: props.get(core.$theme, #{$key}-static, --1100), - --label-color: props.get(core.$theme, #{$key}-static, --1100-text), - --border-color: props.get(core.$theme, #{$key}-static, --1100), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), - ), - ), - - --badge: ( - --bg-color: props.get(core.$theme, $key, --100), - --label-color: props.get(core.$theme, $key, --1100), - --border-color: props.get(core.$theme, $key, --300), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - --border-color: props.get(core.$theme, $key, --400), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - --border-color: props.get(core.$theme, $key, --500), - ), - ), - - --quiet: ( - --label-color: props.get(core.$theme, $key, --1100), - - --hover: ( - --bg-color: props.get(core.$theme, $key, --200), - --label-color: props.get(core.$theme, $key, --1200), - ), - - --active: ( - --bg-color: props.get(core.$theme, $key, --300), - --label-color: props.get(core.$theme, $key, --1300), - ), - - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), - ), - ), + $themes: props.merge( + $themes, + ( + --#{$theme}: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --500) + props.get(core.$theme, $key, --500) + props.get(core.$theme, $key, --600), + --shadow-color: props.get(core.$theme, $key, --200), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --600), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --800), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --bg-l1), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border), + ), + + --key-focus: ( + --border-color: props.get(core.$theme, --focus, --border), + --outline-color: props.get(core.$theme, --focus, --outline), + ), + + --highlighted: ( + --border-color: props.get(core.$theme, $key, --900), + --shadow-color: props.get(core.$theme, $key, --200), + ), + + --selected: ( + --bg-color: props.get(core.$theme, #{$key}-static, --900), + --label-color: props.get(core.$theme, #{$key}-static, --900-text), + --border-color: props.get(core.$theme, #{$key}-static, --900) + props.get(core.$theme, #{$key}-static, --900) + props.get(core.$theme, #{$key}-static, --1000), + --hover: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1000), + --label-color: props.get( + core.$theme, + #{$key}-static, + --1000-text + ), + --border-color: props.get(core.$theme, #{$key}-static, --1000), + ), + + --active: ( + --bg-color: props.get(core.$theme, #{$key}-static, --1100), + --label-color: props.get( + core.$theme, + #{$key}-static, + --1100-text + ), + --border-color: props.get(core.$theme, #{$key}-static, --1100), + ), + + --disabled: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-mute), + ), + ), + + --badge: ( + --bg-color: props.get(core.$theme, $key, --100), + --label-color: props.get(core.$theme, $key, --1100), + --border-color: props.get(core.$theme, $key, --300), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + --border-color: props.get(core.$theme, $key, --400), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + --border-color: props.get(core.$theme, $key, --500), + ), + ), + + --quiet: ( + --label-color: props.get(core.$theme, $key, --1100), + --hover: ( + --bg-color: props.get(core.$theme, $key, --200), + --label-color: props.get(core.$theme, $key, --1200), + ), + + --active: ( + --bg-color: props.get(core.$theme, $key, --300), + --label-color: props.get(core.$theme, $key, --1300), + ), + + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), + ), + ), + ) ) - )); + ); } diff --git a/src/objects/_card.scss b/src/objects/_card.scss index b8bc727..3275bc8 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -1,84 +1,95 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'avatar.vars' as avatar; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "avatar.vars" as avatar; -@forward 'card.vars'; -@use 'card.vars' as vars; +@forward "card.vars"; +@use "card.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('card') { - position: relative; - display: flex; - flex-direction: column; + @include bem.object("card") { + position: relative; + display: flex; + flex-direction: column; background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + transition: + transform 0.2s, + background-color 0.2s, + border-color 0.2s, + box-shadow 0.2s; + + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { background-color: props.get(vars.$hover--bg-color); - border-color: props.get(vars.$hover--border-color); - box-shadow: none; - transform: translateY(props.get(vars.$hover--offset-b)); + border-color: props.get(vars.$hover--border-color); + box-shadow: none; + transform: translateY(props.get(vars.$hover--offset-b)); } &:focus-visible { - margin: calc(-1 * props.get(vars.$key-focus--border-width)); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - box-shadow: - 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + border: calc( + props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width) + ) + solid transparent; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); - transition: transform .2s; + transition: transform 0.2s; } } - @include bem.modifier('borderless') { + @include bem.modifier("borderless") { border-color: props.get(vars.$bg-color); } - @include bem.modifier('shadow') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + @include bem.modifier("shadow") { + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(vars.$shadow-color); - @include bem.modifier('quiet') { - @include bem.elem('image') { - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) + @include bem.modifier("quiet") { + @include bem.elem("image") { + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) + props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) props.get(vars.$shadow-color); } } } - @include bem.modifier('highlight') { + @include bem.modifier("highlight") { margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width)); border-color: props.get(vars.$highlight--border-color); border-width: props.get(vars.$highlight--border-width); - box-shadow: - props.get(vars.$highlight--shadow-x) - props.get(vars.$highlight--shadow-y) - props.get(vars.$highlight--shadow-blur) - props.get(vars.$highlight--shadow-grow) + box-shadow: props.get(vars.$highlight--shadow-x) props.get(vars.$highlight--shadow-y) + props.get(vars.$highlight--shadow-blur) props.get(vars.$highlight--shadow-grow) props.get(vars.$highlight--shadow-color); - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active { border-color: props.get(vars.$highlight--border-color); @@ -86,207 +97,238 @@ } } - @include bem.elem('avatar') { - margin-block-start: props.get(vars.$pad-b); + @include bem.elem("avatar") { + margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); } - @include bem.elem('image') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: calc(100% + 2 * props.get(vars.$border-width)); - margin: calc(-1 * props.get(vars.$border-width)); - overflow: hidden; - object-fit: cover; - transition: background-color .2s, transform .2s, opacity .2s; + @include bem.elem("image") { + position: relative; + display: block; + flex: 0 0 auto; + inline-size: calc(100% + 2 * props.get(vars.$border-width)); + margin: calc(-1 * props.get(vars.$border-width)); + overflow: hidden; + object-fit: cover; + transition: + background-color 0.2s, + transform 0.2s, + opacity 0.2s; &:first-child { - border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-start-start-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + border-start-end-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); } &:last-child { - border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-end-start-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + border-end-end-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); } - @include bem.next-elem('avatar') { - margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); + @include bem.next-elem("avatar") { + margin-block-start: calc(-0.7 * props.get(avatar.$size--xl)); } } - @include bem.elem('image-img') { - display: block; + @include bem.elem("image-img") { + display: block; inline-size: 100%; - block-size: 100%; - object-fit: cover; + block-size: 100%; + object-fit: cover; } - @include bem.elem('image-overlay') { - position: absolute; + @include bem.elem("image-overlay") { + position: absolute; inset-block-end: 0; - inset-inline: 0; - z-index: 5; - padding-block: props.get(vars.$image-overlay--pad-b); - padding-inline: props.get(vars.$image-overlay--pad-i); + inset-inline: 0; + z-index: 5; + padding-block: props.get(vars.$image-overlay--pad-b); + padding-inline: props.get(vars.$image-overlay--pad-i); } - @include bem.elem('body') { - flex: 0 0 auto; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); + @include bem.elem("body") { + flex: 0 0 auto; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } - @include bem.modifier('no-mbs-neutralize') { + @include bem.modifier("no-mbs-neutralize") { &::before { display: none; } } - @include bem.modifier('main') { - flex-shrink: 1; - block-size: 100%; + @include bem.modifier("main") { + flex-shrink: 1; + block-size: 100%; min-block-size: 0; } } - @include bem.elem('content') { + @include bem.elem("content") { margin-block-start: props.get(vars.$spacing); } - @include bem.elem('footer') { - flex: 0 0 auto; - padding-block: 0 props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); + @include bem.elem("footer") { + flex: 0 0 auto; + padding-block: 0 props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); margin-block-start: calc(-1 * props.get(vars.$pad-b)); &::before { - display: block; - block-size: props.get(vars.$divider-width); - margin-block: props.get(vars.$spacing); - content: ''; + display: block; + block-size: props.get(vars.$divider-width); + margin-block: props.get(vars.$spacing); + content: ""; background-color: props.get(vars.$divider-width); } } - @include bem.modifier('quiet') { - margin-inline: 0; + @include bem.modifier("quiet") { + margin-inline: 0; background-color: transparent; - border: 0; - box-shadow: none; - - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + border: 0; + box-shadow: none; + + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { background-color: transparent; - transform: none; + transform: none; - @include bem.elem('image') { + @include bem.elem("image") { background-color: props.get(vars.$quiet--hover--image-color); - opacity: .75; - transform: translateY(props.get(vars.$hover--offset-b)); + opacity: 0.75; + transform: translateY(props.get(vars.$hover--offset-b)); } } &:focus-visible { - margin: 0; - outline: none; - border: 0; + margin: 0; + outline: none; + border: 0; box-shadow: none; - @include bem.elem('image') { - margin: calc(-1 * props.get(vars.$key-focus--border-width) - props.get(vars.$border-width)); - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + @include bem.elem("image") { + margin: calc( + -1 * + props.get(vars.$key-focus--border-width) - props.get( + vars.$border-width + ) + ); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); background-color: props.get(vars.$quiet--hover--image-color); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); - opacity: 1; + opacity: 1; } } } - @include bem.elem('image') { - position: relative; + @include bem.elem("image") { + position: relative; background-color: props.get(vars.$quiet--image-color); - background-clip: padding-box; - border-radius: props.get(vars.$rounding); + background-clip: padding-box; + border-radius: props.get(vars.$rounding); } - @include bem.elem('body') { - padding: 0; + @include bem.elem("body") { + padding: 0; padding-block-start: props.get(vars.$spacing); } - @include bem.elem('footer') { + @include bem.elem("footer") { padding-inline: 0; } } - @include bem.modifier('thumbnail') { - @include bem.elem('image') { + @include bem.modifier("thumbnail") { + @include bem.elem("image") { border-radius: props.get(vars.$rounding); } - @include bem.elem('body') { - position: absolute; - inset-block-end: calc(-1 * props.get(vars.$border-width)); - inset-inline: calc(-1 * props.get(vars.$border-width)); - z-index: 10; - visibility: hidden; - background-color: props.get(vars.$hover--bg-color); - border-color: transparent; - border-style: solid; - border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); - border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); - opacity: 0; + @include bem.elem("body") { + position: absolute; + inset-block-end: calc(-1 * props.get(vars.$border-width)); + inset-inline: calc(-1 * props.get(vars.$border-width)); + z-index: 10; + visibility: hidden; + background-color: props.get(vars.$hover--bg-color); + border-color: transparent; + border-style: solid; + border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); + border-end-start-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + border-end-end-radius: calc( + props.get(vars.$rounding) - props.get(vars.$border-width) + ); + opacity: 0; transition: - border-color .2s ease, - opacity .2s ease, - visibility 0s .2s linear; + border-color 0.2s ease, + opacity 0.2s ease, + visibility 0s 0.2s linear; } - @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + @include bem.multi( + "&:link, &:visited, &:enabled", + "modifier" "interactive", + "modifier" "collapsible" + ) { &:hover, &:active, &:focus-visible { - @include bem.elem('body') { - visibility: visible; + @include bem.elem("body") { + visibility: visible; border-color: props.get(vars.$hover--border-color); - opacity: 1; + opacity: 1; transition: - border-color .2s ease, - opacity .2s ease, - visibility .2s linear; + border-color 0.2s ease, + opacity 0.2s ease, + visibility 0.2s linear; } } } } - @include bem.modifier('horizontal') { + @include bem.modifier("horizontal") { flex-direction: row; - align-items: center; + align-items: center; - @include bem.elem('image') { - align-self: stretch; + @include bem.elem("image") { + align-self: stretch; inline-size: auto; &:first-child { - border-start-end-radius: 0; - border-end-start-radius: props.get(vars.$rounding); + border-start-end-radius: 0; + border-end-start-radius: props.get(vars.$rounding); } &:last-child { @@ -295,37 +337,38 @@ } } - @include bem.elem('body') { - @include bem.modifier('main') { - block-size: auto; - min-block-size: none; - inline-size: 100%; + @include bem.elem("body") { + @include bem.modifier("main") { + block-size: auto; + min-block-size: none; + inline-size: 100%; min-inline-size: 0; } } } - @include bem.modifier('collapsible') { + @include bem.modifier("collapsible") { display: block; interpolate-size: allow-keywords; @include bem.elem("header") { - display: flex; + display: flex; align-items: center; - gap: 1em; - cursor: pointer; + gap: 1em; + cursor: pointer; &::before { - margin: 0; + margin: 0; inline-size: 1em; - font-size: 0.8em; - content: "▶"; + font-size: 0.8em; + content: "▶"; } &:focus-visible { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); outline-offset: calc(-1 * props.get(vars.$key-focus--border-width)); - border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); } @include bem.next-elem("body") { @@ -334,7 +377,7 @@ } &::details-content { - opacity: 0; + opacity: 0; block-size: 0; overflow-y: clip; transition: @@ -351,7 +394,7 @@ } &::details-content { - opacity: 1; + opacity: 1; block-size: auto; } } diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 4616c80..96f3cb9 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -1,51 +1,130 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; -$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; -$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default; -$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; -$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; -$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; -$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; +$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; +$sub-border-width: props.def( + --o-card--sub-border-width, + props.get(core.$border-width--thick) +) !default; +$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; +$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; +$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; +$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; -$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; +$hover--offset-b: props.def( + --o-card--hover--offset-b, + calc(-1 * props.get(core.$size--65)) +) !default; -$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; -$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; +$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; +$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; $shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default; $shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default; -$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-card--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-card--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-card--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default; -$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; -$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; +$shadow-color: props.def( + --o-card--shadow-color, + props.get(core.$theme, --shadow), + "color" +) !default; +$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), "color") !default; +$border-color: props.def( + --o-card--border-color, + props.get(core.$theme, --box, --border), + "color" +) !default; +$divider-color: props.def( + --o-card--divider-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$highlight--shadow-x: props.def(--o-card--highlight--shadow-x, props.get(core.$shadow--l2--x)) !default; -$highlight--shadow-y: props.def(--o-card--highlight--shadow-y, props.get(core.$shadow--l2--y)) !default; -$highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(core.$shadow--l2--blur)) !default; -$highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default; +$highlight--shadow-x: props.def( + --o-card--highlight--shadow-x, + props.get(core.$shadow--l2--x) +) !default; +$highlight--shadow-y: props.def( + --o-card--highlight--shadow-y, + props.get(core.$shadow--l2--y) +) !default; +$highlight--shadow-blur: props.def( + --o-card--highlight--shadow-blur, + props.get(core.$shadow--l2--blur) +) !default; +$highlight--shadow-grow: props.def( + --o-card--highlight--shadow-grow, + props.get(core.$shadow--l2--grow) +) !default; -$highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default; -$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --800), 'color') !default; -$highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default; +$highlight--border-width: props.def( + --o-card--highlight--border-width, + props.get(core.$border-width--medium) +) !default; +$highlight--border-color: props.def( + --o-card--highlight--border-color, + props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) + props.get(core.$theme, --accent, --800), + "color" +) !default; +$highlight--shadow-color: props.def( + --o-card--highlight--shadow-color, + props.get(core.$theme, --accent, --200), + "color" +) !default; -$hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default; -$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; +$hover--bg-color: props.def( + --o-card--hover--bg-color, + color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), + "color" +) !default; +$hover--border-color: props.def( + --o-card--hover--border-color, + props.get(core.$theme, --border), + "color" +) !default; -$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-card--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-card--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-card--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; -$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; +$quiet--image-color: props.def( + --o-card--quiet--image-color, + props.get(core.$theme, --bg-base), + "color" +) !default; +$quiet--hover--image-color: props.def( + --o-card--quiet--hover--image-color, + props.get(core.$theme, --border), + "color" +) !default; -$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default; -$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default; +$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), "sm") !default; +$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), "sm") !default; diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index f3fb793..60cee65 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,130 +1,140 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/functions' as fn; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/functions" as fn; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'checkbox.vars'; -@use 'checkbox.vars' as vars; +@forward "checkbox.vars"; +@use "checkbox.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('checkbox') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); + @include bem.object("checkbox") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); - - @include bem.elem('box') { - position: relative; - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$box-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc( + props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get( + vars.$key-focus--border-offset + ) + ); + + @include bem.elem("box") { + position: relative; + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + margin-block-start: calc( + 0.5em * props.get(core.$font--standard--line-height) - 0.5 * + props.get(vars.$size) - props.get(vars.$key-focus--border-offset) + ); + vertical-align: top; + background-color: props.get(vars.$box-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset) + ); &::before, &::after { position: absolute; - display: block; - content: ''; + display: block; + content: ""; } &::before { - inset-block-start: props.get(vars.$border-width); + inset-block-start: props.get(vars.$border-width); inset-inline-start: props.get(vars.$border-width); - z-index: 2; - inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); - background-color: props.get(vars.$box-bg-color); - transition: transform .2s ease; + z-index: 2; + inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + background-color: props.get(vars.$box-bg-color); + transition: transform 0.2s ease; } &::after { - inset-block-start: calc(.5 * props.get(vars.$size) - 1px); - inset-inline-start: calc(1.5 * props.get(vars.$border-width)); - z-index: 3; - box-sizing: border-box; - inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); - block-size: 0; - border-color: props.get(vars.$box-bg-color); - border-style: solid; - border-radius: 2px; - transform: scale(0); - transition: transform .2s ease; - border-block-width: 0 2px; + inset-block-start: calc(0.5 * props.get(vars.$size) - 1px); + inset-inline-start: calc(1.5 * props.get(vars.$border-width)); + z-index: 3; + box-sizing: border-box; + inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); + block-size: 0; + border-color: props.get(vars.$box-bg-color); + border-style: solid; + border-radius: 2px; + transform: scale(0); + transition: transform 0.2s ease; + border-block-width: 0 2px; border-inline-width: 0 2px; } } - @include bem.elem('check-icon') { - position: absolute; - inset-block-start: calc(1 * props.get(vars.$border-width)); + @include bem.elem("check-icon") { + position: absolute; + inset-block-start: calc(1 * props.get(vars.$border-width)); inset-inline-start: calc(1 * props.get(vars.$border-width)); - z-index: 2; - display: block; - inline-size: calc(100% - 2 * props.get(vars.$border-width)); - block-size: calc(100% - 2 * props.get(vars.$border-width)); - margin: 0; - color: props.get(vars.$box-bg-color); - stroke-width: fn.px-to-rem(3px); - transform: scale(0); - transform-origin: 40% 90%; - transition: transform .2s ease; + z-index: 2; + display: block; + inline-size: calc(100% - 2 * props.get(vars.$border-width)); + block-size: calc(100% - 2 * props.get(vars.$border-width)); + margin: 0; + color: props.get(vars.$box-bg-color); + stroke-width: fn.px-to-rem(3px); + transform: scale(0); + transform-origin: 40% 90%; + transition: transform 0.2s ease; } - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + @include bem.elem("label") { + margin-inline-start: calc( + props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset) + ); } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; + @include bem.elem("native") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$hover--box-border-color); } } &:checked { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { &::before { transform: scale(0); } - @include bem.elem('check-icon') { + @include bem.elem("check-icon") { transform: scale(1); } } } &:indeterminate { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { &::before { transform: scale(0); } @@ -133,18 +143,18 @@ transform: scale(1); } - @include bem.elem('check-icon') { + @include bem.elem("check-icon") { transform: scale(0); } } } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -154,58 +164,59 @@ } &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$key-focus--label-color); } - @include bem.sibling-elem('box') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + @include bem.sibling-elem("box") { + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } } - @include bem.modifier('standalone') { - @include bem.elem('box') { + @include bem.modifier("standalone") { + @include bem.elem("box") { margin-block-start: 0; } } - @include bem.modifier('accent') { - @include bem.elem('native') { + @include bem.modifier("accent") { + @include bem.elem("native") { &:checked { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:indeterminate { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:disabled { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -214,13 +225,13 @@ } &:checked { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); } } &:indeterminate { - @include bem.sibling-elem('box') { + @include bem.sibling-elem("box") { background-color: props.get(vars.$disabled--box-border-color); } } diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index 278aac8..8362aa7 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -1,32 +1,92 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; -$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; -$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; -$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; +$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default; +$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def( + --o-checkbox--border-width, + props.get(core.$border-width--medium) +) !default; +$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-checkbox--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-checkbox--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-checkbox--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$box-border-color: props.def( + --o-checkbox--box-border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$box-bg-color: props.def( + --o-checkbox--box-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default; +$hover--label-color: props.def( + --o-checkbox--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--box-border-color: props.def( + --o-checkbox--hover--box-border-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default; -$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; +$accent--box-border-color: props.def( + --o-checkbox--accent--box-border-color, + props.get(core.$theme, --accent, --900), + "color" +) !default; +$accent--hover--box-border-color: props.def( + --o-checkbox--accent--hover--box-border-color, + props.get(core.$theme, --accent, --1000), + "color" +) !default; -$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default; -$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$disabled--label-color: props.def( + --o-checkbox--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--box-border-color: props.def( + --o-checkbox--disabled--box-border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; +$disabled--box-bg-color: props.def( + --o-checkbox--disabled--box-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-checkbox--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-checkbox--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-checkbox--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index d2ee8c3..f5584e6 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -1,29 +1,29 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'dialog.vars'; -@use 'dialog.vars' as vars; +@forward "dialog.vars"; +@use "dialog.vars" as vars; -@use 'backdrop.vars' as backdrop; -@use 'divider.vars' as divider; +@use "backdrop.vars" as backdrop; +@use "divider.vars" as divider; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('dialog') { - display: none; - box-sizing: border-box; - inline-size: 100%; - max-inline-size: none; - block-size: 100%; - min-block-size: 0; - max-block-size: none; - padding: props.get(vars.$pad-b) props.get(vars.$pad-i); - margin: 0; + @include bem.object("dialog") { + display: none; + box-sizing: border-box; + inline-size: 100%; + max-inline-size: none; + block-size: 100%; + min-block-size: 0; + max-block-size: none; + padding: props.get(vars.$pad-b) props.get(vars.$pad-i); + margin: 0; background-color: transparent; - border: 0; + border: 0; &::backdrop { background-color: props.get(backdrop.$bg-color); @@ -31,38 +31,40 @@ } &[open], - &:popover-open { - display: flex; + &:popover-open { + display: flex; flex-direction: column; } - @include bem.elem('content') { - pointer-events: auto; - border-radius: props.get(vars.$rounding); + @include bem.elem("content") { + pointer-events: auto; + border-radius: props.get(vars.$rounding); background-color: props.get(vars.$bg-color); } - @include bem.elem('header') { - display: flex; + @include bem.elem("header") { + display: flex; align-items: center; - padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0; + padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0; } - @include bem.elem('divider') { + @include bem.elem("divider") { margin-inline: props.get(vars.$body--pad-i); - @include bem.next-elem('body') { - padding-block-start: calc(.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b)); + @include bem.next-elem("body") { + padding-block-start: calc( + 0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b) + ); } } - @include bem.elem('body') { + @include bem.elem("body") { padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } } diff --git a/src/objects/_dialog.vars.scss b/src/objects/_dialog.vars.scss index 39c47ba..8650e51 100644 --- a/src/objects/_dialog.vars.scss +++ b/src/objects/_dialog.vars.scss @@ -1,10 +1,10 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use '../layouts/container.vars' as container; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "../layouts/container.vars" as container; -$pad-b: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; -$pad-i: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; +$pad-b: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; +$pad-i: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default; $rounding: props.def(--o-dialog--rounding, props.get(core.$rounding)) !default; $border-width: props.def(--o-dialog--border-width, props.get(core.$border-width--thin)) !default; @@ -12,5 +12,9 @@ $border-width: props.def(--o-dialog--border-width, props.get(core.$border-width- $body--pad-b: props.def(--o-dialog--body--pad-b, props.get(container.$pad-i)) !default; $body--pad-i: props.def(--o-dialog--body--pad-i, props.get(container.$pad-i)) !default; -$bg-color: props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), 'color') !default; -$border-color: props.def(--o-dialog--border-color, props.get(core.$theme, --border-mute), 'color') !default; +$bg-color: props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), "color") !default; +$border-color: props.def( + --o-dialog--border-color, + props.get(core.$theme, --border-mute), + "color" +) !default; diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index d81284b..f082d12 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss @@ -1,38 +1,38 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'divider.vars'; -@use 'divider.vars' as vars; +@forward "divider.vars"; +@use "divider.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('divider') { - display: flex; - flex: 0 0 auto; - flex-direction: row; - align-items: center; - block-size: 1em; - margin-block: props.get(vars.$margin-b); - font-size: props.get(vars.$strong--label-font-size); - font-weight: 700; - line-height: 1; - color: props.get(vars.$strong--label-color); - text-transform: uppercase; - letter-spacing: props.get(vars.$letter-spacing); + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("divider") { + display: flex; + flex: 0 0 auto; + flex-direction: row; + align-items: center; + block-size: 1em; + margin-block: props.get(vars.$margin-b); + font-size: props.get(vars.$strong--label-font-size); + font-weight: 700; + line-height: 1; + color: props.get(vars.$strong--label-color); + text-transform: uppercase; + letter-spacing: props.get(vars.$letter-spacing); background-color: transparent; &::before, &::after { - flex: 1 1 auto; - inline-size: 100%; - block-size: props.get(vars.$strong--border-width); - content: ''; + flex: 1 1 auto; + inline-size: 100%; + block-size: props.get(vars.$strong--border-width); + content: ""; background-color: props.get(vars.$strong--bg-color); } @@ -40,15 +40,15 @@ display: block; } - @include bem.elem('label') { + @include bem.elem("label") { flex: 0 0 auto; } - @include bem.modifier('vertical') { - align-self: stretch; - inline-size: props.get(vars.$vertical--border-width); - block-size: auto; - margin-block: 0; + @include bem.modifier("vertical") { + align-self: stretch; + inline-size: props.get(vars.$vertical--border-width); + block-size: auto; + margin-block: 0; background-color: props.get(vars.$strong--bg-color); &::before, @@ -57,13 +57,13 @@ } } - @include bem.modifier('dot') { - align-self: center; - inline-size: props.get(vars.$dot--size); - block-size: props.get(vars.$dot--size); - margin-block: 0; + @include bem.modifier("dot") { + align-self: center; + inline-size: props.get(vars.$dot--size); + block-size: props.get(vars.$dot--size); + margin-block: 0; background-color: props.get(vars.$strong--bg-color); - border-radius: props.get(vars.$dot--size); + border-radius: props.get(vars.$dot--size); &::before, &::after { @@ -71,73 +71,73 @@ } } - @include bem.modifier('medium') { - font-size: props.get(vars.$medium--label-font-size); + @include bem.modifier("medium") { + font-size: props.get(vars.$medium--label-font-size); font-weight: 500; - color: props.get(vars.$medium--label-color); + color: props.get(vars.$medium--label-color); &::before, &::after { - block-size: props.get(vars.$medium--border-width); + block-size: props.get(vars.$medium--border-width); background-color: props.get(vars.$medium--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$medium--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$medium--bg-color); } } - @include bem.modifier('quiet') { - font-size: props.get(vars.$quiet--label-font-size); + @include bem.modifier("quiet") { + font-size: props.get(vars.$quiet--label-font-size); font-weight: 500; - color: props.get(vars.$quiet--label-color); + color: props.get(vars.$quiet--label-color); &::before, &::after { - block-size: props.get(vars.$quiet--border-width); + block-size: props.get(vars.$quiet--border-width); background-color: props.get(vars.$quiet--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$vertical--quiet--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$dot--quiet--bg-color); } } - @include bem.modifier('faint') { - font-size: props.get(vars.$faint--label-font-size); + @include bem.modifier("faint") { + font-size: props.get(vars.$faint--label-font-size); font-weight: 500; - color: props.get(vars.$faint--label-color); + color: props.get(vars.$faint--label-color); &::before, &::after { - block-size: props.get(vars.$faint--border-width); + block-size: props.get(vars.$faint--border-width); background-color: props.get(vars.$faint--bg-color); } - @include bem.modifier('vertical') { + @include bem.modifier("vertical") { background-color: props.get(vars.$vertical--quiet--bg-color); } - @include bem.modifier('dot') { + @include bem.modifier("dot") { background-color: props.get(vars.$dot--quiet--bg-color); } } - @include bem.modifier('labelled') { + @include bem.modifier("labelled") { &::before { margin-inline-end: 1em; } &::after { - display: block; + display: block; margin-inline-start: 1em; } } @@ -149,7 +149,7 @@ background-color: props.get(vars.$themes, $theme, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$themes, $theme, --label); } } @@ -162,39 +162,39 @@ background-color: props.get(vars.$static-themes, $theme, --strong, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --strong, --label); } - @include bem.modifier('medium') { + @include bem.modifier("medium") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --medium, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --medium, --label); } } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --quiet, --label); } } - @include bem.modifier('faint') { + @include bem.modifier("faint") { &::before, &::after { background-color: props.get(vars.$static-themes, $theme, --faint, --bg); } - @include bem.elem('label') { + @include bem.elem("label") { color: props.get(vars.$static-themes, $theme, --faint, --label); } } diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index a8b0f9f..38224d4 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -1,80 +1,153 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; -$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; -$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; -$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; +$vertical--border-width: props.def( + --o-divider--vertical--width, + props.get(core.$border-width--thin) +) !default; +$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; +$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default; -$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; -$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; +$strong--border-width: props.def( + --o-divider--strong--border-width, + props.get(core.$border-width--thick) +) !default; +$strong--label-font-size: props.def( + --o-divider--strong--label-font-size, + props.get(core.$font-size--100) +) !default; -$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; -$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; +$medium--border-width: props.def( + --o-divider--medium--border-width, + props.get(core.$border-width--medium) +) !default; +$medium--label-font-size: props.def( + --o-divider--medium--label-font-size, + props.get(core.$font-size--75) +) !default; -$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default; -$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default; +$quiet--border-width: props.def( + --o-divider--quiet--border-width, + props.get(core.$border-width--thin) +) !default; +$quiet--label-font-size: props.def( + --o-divider--quiet--label-font-size, + props.get(core.$font-size--50) +) !default; -$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; -$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; +$faint--border-width: props.def( + --o-divider--faint--border-width, + props.get(core.$border-width--thin) +) !default; +$faint--label-font-size: props.def( + --o-divider--faint--label-font-size, + props.get(core.$font-size--50) +) !default; -$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default; -$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default; +$strong--bg-color: props.def( + --o-divider--strong--bg-color, + props.get(core.$theme, --text), + "color" +) !default; +$strong--label-color: props.def( + --o-divider--strong--label-color, + props.get(core.$theme, --text), + "color" +) !default; -$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; -$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; +$medium--bg-color: props.def( + --o-divider--medium--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$medium--label-color: props.def( + --o-divider--medium--label-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default; -$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$quiet--bg-color: props.def( + --o-divider--quiet--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$quiet--label-color: props.def( + --o-divider--quiet--label-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$faint--bg-color: props.def( + --o-divider--faint--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$faint--label-color: props.def( + --o-divider--faint--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$vertical--quiet--bg-color: props.def( + --o-divider--vertical--quiet--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$dot--quiet--bg-color: props.def( + --o-divider--dot--quiet--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$static-themes: props.def(--o-divider, (), 'color'); +$static-themes: props.def(--o-divider, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $button-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $button-theme: ( - --strong: ( - --bg: props.get(core.$transparent-colors, $theme, --800), - --label: props.get(core.$transparent-colors, $theme, --900), - ), - --medium: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --quiet: ( - --bg: props.get(core.$transparent-colors, $theme, --300), - --label: props.get(core.$transparent-colors, $theme, --500), - ), - --faint: ( - --bg: props.get(core.$transparent-colors, $theme, --200), - --label: props.get(core.$transparent-colors, $theme, --400), - ), + $static-themes: props.merge( + $static-themes, + ( + $button-theme: ( + --strong: ( + --bg: props.get(core.$transparent-colors, $theme, --800), + --label: props.get(core.$transparent-colors, $theme, --900), + ), + --medium: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --quiet: ( + --bg: props.get(core.$transparent-colors, $theme, --300), + --label: props.get(core.$transparent-colors, $theme, --500), + ), + --faint: ( + --bg: props.get(core.$transparent-colors, $theme, --200), + --label: props.get(core.$transparent-colors, $theme, --400), + ), + ), ) - )); + ); } $themes-config: ( - accent: --accent, + accent: --accent, negative: --negative, ) !default; -$themes: props.def(--o-divider, (), 'color'); +$themes: props.def(--o-divider, (), "color"); @each $theme, $key in $themes-config { - $themes: props.merge($themes, ( - --#{$theme}: ( - --bg: props.get(core.$theme, $key, --800), - --label: props.get(core.$theme, $key, --1000), + $themes: props.merge( + $themes, + ( + --#{$theme}: ( + --bg: props.get(core.$theme, $key, --800), + --label: props.get(core.$theme, $key, --1000), + ) ) - )); + ); } diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index 655e662..0257b32 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -1,49 +1,55 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'icon.vars' as icon; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "icon.vars" as icon; -@forward 'emoji.vars'; -@use 'emoji.vars' as vars; +@forward "emoji.vars"; +@use "emoji.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('emoji') { - position: relative; - display: inline-block; - inline-size: calc(props.get(vars.$size)); - block-size: calc(props.get(vars.$size)); - padding: calc(props.get(vars.$pad)); - margin: calc(-1 * props.get(vars.$pad)); + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("emoji") { + position: relative; + display: inline-block; + inline-size: calc(props.get(vars.$size)); + block-size: calc(props.get(vars.$size)); + padding: calc(props.get(vars.$pad)); + margin: calc(-1 * props.get(vars.$pad)); vertical-align: props.get(vars.$valign); - object-fit: contain; + object-fit: contain; - @include bem.modifier('icon') { - margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); + @include bem.modifier("icon") { + margin: calc( + -1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size)) + ); vertical-align: props.get(icon.$valign); } @each $mod, $size, $valign in vars.$sizes { @include bem.modifier($mod) { - inline-size: props.get($size); - block-size: props.get($size); + inline-size: props.get($size); + block-size: props.get($size); vertical-align: props.get($valign); - @include bem.modifier('icon') { - margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); + @include bem.modifier("icon") { + margin: calc( + -1 * props.get(vars.$pad) - 0.5 * (props.get($size) - props.get(icon.$size)) + ); } } } - @include bem.modifier('zoomable') { + @include bem.modifier("zoomable") { border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); - transition: transform .2s ease, background-color .2s ease; + transition: + transform 0.2s ease, + background-color 0.2s ease; &:hover { background-color: props.get(vars.$bg-color); - transform: scale(props.get(vars.$zoom)); + transform: scale(props.get(vars.$zoom)); } } } diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index cf940cf..1c2a0e2 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -1,26 +1,26 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; -$pad: props.def(--o-emoji--pad, .3em) !default; +$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; +$pad: props.def(--o-emoji--pad, 0.3em) !default; $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default; -$zoom: props.def(--o-emoji--zoom, 3) !default; -$valign: props.def(--o-emoji--valign, -.25em) !default; +$zoom: props.def(--o-emoji--zoom, 3) !default; +$valign: props.def(--o-emoji--valign, -0.25em) !default; -$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; -$valign--125: props.def(--o-emoji--125--valign, -.45em) !default; +$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; +$valign--125: props.def(--o-emoji--125--valign, -0.45em) !default; -$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; -$valign--150: props.def(--o-emoji--150--valign, -.65em) !default; +$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; +$valign--150: props.def(--o-emoji--150--valign, -0.65em) !default; -$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; +$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; $valign--200: props.def(--o-emoji--200--valign, -1em) !default; $sizes: ( - '125' $size--125 $valign--125, - '150' $size--150 $valign--150, - '200' $size--200 $valign--200, + "125" $size--125 $valign--125, + "150" $size--150 $valign--150, + "200" $size--200 $valign--200 ) !default; -$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), "color") !default; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 23875f5..fb664b4 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,74 +1,74 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'field-label.vars'; -@use 'field-label.vars' as vars; +@forward "field-label.vars"; +@use "field-label.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('field-label') { - @include bem.elem('label') { - display: block; - flex: 0 0 auto; + @include bem.object("field-label") { + @include bem.elem("label") { + display: block; + flex: 0 0 auto; padding-inline-end: props.get(vars.$spacing-i); - font-size: props.get(vars.$label-font-size); - font-weight: 400; - line-height: 1.3; - color: props.get(vars.$label-color); + font-size: props.get(vars.$label-font-size); + font-weight: 400; + line-height: 1.3; + color: props.get(vars.$label-color); - @include bem.next-elem('content') { + @include bem.next-elem("content") { margin-block-start: props.get(vars.$spacing-b); } } - @include bem.elem('content') { + @include bem.elem("content") { display: block; - flex: 1 1 auto; + flex: 1 1 auto; } - @include bem.elem('hint') { - display: block; + @include bem.elem("hint") { + display: block; margin-block-start: props.get(vars.$spacing-b); - font-size: props.get(vars.$hint-font-size); - color: props.get(vars.$hint-color); + font-size: props.get(vars.$hint-font-size); + color: props.get(vars.$hint-color); } - @include bem.is('invalid') { - @include bem.elem('hint') { + @include bem.is("invalid") { + @include bem.elem("hint") { color: props.get(vars.$error-hint-color); } } - @include bem.is('disabled') { - @include bem.elem('label', 'hint') { + @include bem.is("disabled") { + @include bem.elem("label", "hint") { color: props.get(vars.$disabled-color); } } - @include bem.modifier('align-start', 'align-end') { - display: flex; + @include bem.modifier("align-start", "align-end") { + display: flex; align-items: baseline; - @include bem.elem('label') { + @include bem.elem("label") { display: inline-block; - @include bem.next-elem('content') { + @include bem.next-elem("content") { margin-block-start: 0; } } } - @include bem.modifier('align-start') { - @include bem.elem('label') { + @include bem.modifier("align-start") { + @include bem.elem("label") { text-align: start; } } - @include bem.modifier('align-end') { - @include bem.elem('label') { + @include bem.modifier("align-end") { + @include bem.elem("label") { text-align: end; } } diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss index 5bd4547..4588e70 100644 --- a/src/objects/_field-label.vars.scss +++ b/src/objects/_field-label.vars.scss @@ -1,12 +1,34 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; -$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; -$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default; -$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default; +$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default; +$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default; +$label-font-size: props.def( + --o-field-label--label-font-size, + props.get(core.$font-size--75) +) !default; +$hint-font-size: props.def( + --o-field-label--hint-font-size, + props.get(core.$font-size--75) +) !default; -$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default; -$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default; -$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default; -$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default; +$label-color: props.def( + --o-field-label--label-color, + props.get(core.$theme, --text-mute), + "color" +) !default; +$hint-color: props.def( + --o-field-label--hint-color, + props.get(core.$theme, --text-mute), + "color" +) !default; +$error-hint-color: props.def( + --o-field-label--error-hint-color, + props.get(core.$theme, --negative, --900), + "color" +) !default; +$disabled-color: props.def( + --o-field-label--disabled-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss index 04b9bdf..d3e37b3 100644 --- a/src/objects/_figure.scss +++ b/src/objects/_figure.scss @@ -1,25 +1,25 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'figure.vars'; -@use 'figure.vars' as vars; +@forward "figure.vars"; +@use "figure.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('figure') { - @include bem.elem('caption') { - padding-block: props.get(vars.$pad-b); - font-size: props.get(vars.$font-size); - color: props.get(vars.$text-color); + @include bem.object("figure") { + @include bem.elem("caption") { + padding-block: props.get(vars.$pad-b); + font-size: props.get(vars.$font-size); + color: props.get(vars.$text-color); border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } } diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss index 3de3406..936932d 100644 --- a/src/objects/_figure.vars.scss +++ b/src/objects/_figure.vars.scss @@ -1,9 +1,17 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; +$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; $border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default; -$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; +$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; -$text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default; +$text-color: props.def( + --o-figure--text-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$border-color: props.def( + --o-figure--border-color, + props.get(core.$theme, --border), + "color" +) !default; diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 0e8392e..87a6269 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,64 +1,70 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'heading.vars'; -@use 'heading.vars' as vars; +@forward "heading.vars"; +@use "heading.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('heading') { - display: block; - margin-block-start: props.get(vars.$margin-bs); - font-family: props.get(vars.$font-family); - font-weight: props.get(vars.$font-weight); + @include bem.object("heading") { + display: block; + margin-block-start: props.get(vars.$margin-bs); + font-family: props.get(vars.$font-family); + font-weight: props.get(vars.$font-weight); font-feature-settings: props.get(vars.$feature-settings); - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - text-transform: props.get(vars.$text-transform); - letter-spacing: normal; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + text-transform: props.get(vars.$text-transform); + letter-spacing: normal; & + & { margin-block-start: props.get(vars.$margin-bs-sibling); } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent props.get(vars.$bg-start), - props.get(vars.$bg-color) props.get(vars.$bg-start), - props.get(vars.$bg-color) props.get(vars.$bg-end), - transparent props.get(vars.$bg-end)); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent props.get(vars.$bg-start), + props.get(vars.$bg-color) props.get(vars.$bg-start), + props.get(vars.$bg-color) props.get(vars.$bg-end), + transparent props.get(vars.$bg-end) + ); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in vars.$sizes + { @include bem.modifier($mod) { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes { + @include bem.modifier("display") { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in vars.$display--sizes + { @include bem.modifier($mod) { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); - transform: translateX(props.get(vars.$offset)); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); + transform: translateX(props.get(vars.$offset)); } } } @@ -73,18 +79,26 @@ } } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent props.get(vars.$bg-start), - props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), - props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), - transparent props.get(vars.$bg-end)); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent props.get(vars.$bg-start), + props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), + props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), + transparent props.get(vars.$bg-end) + ); } - @include bem.modifier('display') { + @include bem.modifier("display") { @each $mod, $value in vars.$sizes { @include bem.modifier($mod) { - color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color); + color: props.get( + vars.$static-themes, + $theme, + --display, + --#{$mod}, + --text-color + ); } } } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 4267b8c..8943622 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -1,208 +1,472 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$offset: props.def(--o-heading--offset, -.02em) !default; -$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; +$offset: props.def(--o-heading--offset, -0.02em) !default; +$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; -$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; -$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; - -$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default; -$text-color--xl: props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default; -$text-color--lg: props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default; -$text-color--md: props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default; -$text-color--sm: props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$text-color--xs: props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default; - -$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default; -$display--text-color--xl: props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--lg: props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--md: props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--sm: props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default; -$display--text-color--xs: props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; - -$bg-start: props.def(--o-heading--bg-start, .05em) !default; -$bg-end: props.def(--o-heading--bg-end, .5em) !default; - -$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; -$line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default; -$font-weight: props.def(--o-heading--font-weight, bold) !default; -$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform: props.def(--o-heading--text-transform, none) !default; - -$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; -$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default; -$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; -$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default; - -$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; -$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default; -$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; -$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default; - -$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; -$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; -$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; -$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; -$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default; - -$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; -$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; -$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; -$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; -$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--md: props.def(--o-heading--md--text-transform, none) !default; - -$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; -$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default; -$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default; -$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default; -$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default; - -$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; -$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; -$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default; -$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; -$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default; +$text-color: props.def( + --o-heading--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), "color") !default; + +$text-color--xxl: props.def( + --o-heading--xxl--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$text-color--xl: props.def( + --o-heading--xl--text-color, + props.get($text-color--xxl), + "color" +) !default; +$text-color--lg: props.def( + --o-heading--lg--text-color, + props.get($text-color--xxl), + "color" +) !default; +$text-color--md: props.def( + --o-heading--md--text-color, + props.get($text-color--xxl), + "color" +) !default; +$text-color--sm: props.def( + --o-heading--sm--text-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$text-color--xs: props.def( + --o-heading--xs--text-color, + props.get($text-color--sm), + "color" +) !default; + +$display--text-color--xxl: props.def( + --o-heading--display--xxl--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$display--text-color--xl: props.def( + --o-heading--display--xl--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--lg: props.def( + --o-heading--display--lg--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--md: props.def( + --o-heading--display--md--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--sm: props.def( + --o-heading--display--sm--text-color, + props.get($display--text-color--xxl), + "color" +) !default; +$display--text-color--xs: props.def( + --o-heading--display--xs--text-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; + +$bg-start: props.def(--o-heading--bg-start, 0.05em) !default; +$bg-end: props.def(--o-heading--bg-end, 0.5em) !default; + +$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; +$line-height: props.def( + --o-heading--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-weight: props.def(--o-heading--font-weight, bold) !default; +$feature-settings: props.def( + --o-heading--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform: props.def(--o-heading--text-transform, none) !default; + +$font-family--xxl: props.def( + --o-heading--xxl--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--xxl: props.def( + --o-heading--xxl--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; +$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default; +$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; +$feature-settings--xxl: props.def( + --o-heading--xxl--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default; + +$font-family--xl: props.def( + --o-heading--xl--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--xl: props.def( + --o-heading--xl--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; +$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default; +$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; +$feature-settings--xl: props.def( + --o-heading--xl--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default; + +$font-family--lg: props.def( + --o-heading--lg--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--lg: props.def( + --o-heading--lg--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; +$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; +$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; +$feature-settings--lg: props.def( + --o-heading--lg--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default; + +$font-family--md: props.def( + --o-heading--md--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--md: props.def( + --o-heading--md--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; +$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; +$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; +$feature-settings--md: props.def( + --o-heading--md--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--md: props.def(--o-heading--md--text-transform, none) !default; + +$font-family--sm: props.def( + --o-heading--sm--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--sm: props.def( + --o-heading--sm--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default; +$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default; +$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default; +$feature-settings--sm: props.def( + --o-heading--sm--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default; + +$font-family--xs: props.def( + --o-heading--xs--font-family, + props.get(core.$font--standard--family) +) !default; +$line-height--xs: props.def( + --o-heading--xs--line-height, + props.get(core.$font--standard--line-height) +) !default; +$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; +$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default; +$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; +$feature-settings--xs: props.def( + --o-heading--xs--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default; $sizes: ( - 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs $text-color--xs, - 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm $text-color--sm, - 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md $text-color--md, - 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg $text-color--lg, - 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl $text-color--xl, - 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl $text-color--xxl, -) !default; - -$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; -$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default; -$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default; -$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; -$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; -$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default; - -$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; -$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; -$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default; -$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; -$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; -$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default; - -$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; -$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; -$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default; -$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; -$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 1px) !default; -$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; -$display--text-transform--lg: props.def(--o-heading--display--lg--text-transform, uppercase) !default; - -$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; -$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default; -$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; -$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default; - -$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--100)) !default; -$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; -$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; -$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default; - -$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; -$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; -$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default; -$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; -$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default; - -$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; -$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; -$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default; -$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default; -$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default; -$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; + "xs" $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs + $feature-settings--xs $text-transform--xs $text-color--xs, + "sm" $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm + $feature-settings--sm $text-transform--sm $text-color--sm, + "md" $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md + $feature-settings--md $text-transform--md $text-color--md, + "lg" $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg + $feature-settings--lg $text-transform--lg $text-color--lg, + "xl" $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl + $feature-settings--xl $text-transform--xl $text-color--xl, + "xxl" $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl + $feature-settings--xxl $text-transform--xxl $text-color--xxl +) !default; + +$display--font-family--xxl: props.def( + --o-heading--display--xxl--font-family, + props.get(core.$font--headline--family) +) !default; +$display--line-height--xxl: props.def( + --o-heading--display--xxl--line-height, + props.get(core.$font--headline--line-height) +) !default; +$display--font-size--xxl: props.def( + --o-heading--display--xxl--font-size, + props.get(core.$font-size--1100) +) !default; +$display--font-weight--xxl: props.def( + --o-heading--display--xxl--font-weight, + props.get(core.$font--headline--weight) +) !default; +$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; +$display--feature-settings--xxl: props.def( + --o-heading--display--xxl--feature-settings, + props.get(core.$font--headline--feature-settings) +) !default; +$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default; + +$display--font-family--xl: props.def( + --o-heading--display--xl--font-family, + props.get(core.$font--headline--family) +) !default; +$display--line-height--xl: props.def( + --o-heading--display--xl--line-height, + props.get(core.$font--headline--line-height) +) !default; +$display--font-size--xl: props.def( + --o-heading--display--xl--font-size, + props.get(core.$font-size--700) +) !default; +$display--font-weight--xl: props.def( + --o-heading--display--xl--font-weight, + props.get(core.$font--headline--weight) +) !default; +$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; +$display--feature-settings--xl: props.def( + --o-heading--display--xl--feature-settings, + props.get(core.$font--headline--feature-settings) +) !default; +$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default; + +$display--font-family--lg: props.def( + --o-heading--display--lg--font-family, + props.get(core.$font--headline--family) +) !default; +$display--line-height--lg: props.def( + --o-heading--display--lg--line-height, + props.get(core.$font--headline--line-height) +) !default; +$display--font-size--lg: props.def( + --o-heading--display--lg--font-size, + props.get(core.$font-size--300) +) !default; +$display--font-weight--lg: props.def( + --o-heading--display--lg--font-weight, + props.get(core.$font--headline--weight) +) !default; +$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 1px) !default; +$display--feature-settings--lg: props.def( + --o-heading--display--lg--feature-settings, + props.get(core.$font--headline--feature-settings) +) !default; +$display--text-transform--lg: props.def( + --o-heading--display--lg--text-transform, + uppercase +) !default; + +$display--font-family--md: props.def( + --o-heading--display--md--font-family, + props.get(core.$font--standard--family) +) !default; +$display--line-height--md: props.def( + --o-heading--display--md--line-height, + props.get(core.$font--standard--line-height) +) !default; +$display--font-size--md: props.def( + --o-heading--display--md--font-size, + props.get(core.$font-size--150) +) !default; +$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default; +$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; +$display--feature-settings--md: props.def( + --o-heading--display--md--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default; + +$display--font-family--sm: props.def( + --o-heading--display--sm--font-family, + props.get(core.$font--standard--family) +) !default; +$display--line-height--sm: props.def( + --o-heading--display--sm--line-height, + props.get(core.$font--standard--line-height) +) !default; +$display--font-size--sm: props.def( + --o-heading--display--sm--font-size, + props.get(core.$font-size--100) +) !default; +$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; +$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; +$display--feature-settings--sm: props.def( + --o-heading--display--sm--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default; + +$display--font-family--xs: props.def( + --o-heading--display--xs--font-family, + props.get(core.$font--standard--family) +) !default; +$display--line-height--xs: props.def( + --o-heading--display--xs--line-height, + props.get(core.$font--standard--line-height) +) !default; +$display--font-size--xs: props.def( + --o-heading--display--xs--font-size, + props.get(core.$font-size--50) +) !default; +$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default; +$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; +$display--feature-settings--xs: props.def( + --o-heading--display--xs--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; +$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default; + +$display--font-size--xxl--md: props.def( + --o-heading--display--xxl--font-size, + props.get(core.$font-size--900), + "md" +) !default; +$display--font-size--xl--md: props.def( + --o-heading--display--xl--font-size, + props.get(core.$font-size--600), + "md" +) !default; +$display--font-size--lg--md: props.def( + --o-heading--display--lg--font-size, + props.get(core.$font-size--200), + "md" +) !default; +$display--font-size--md--md: props.def( + --o-heading--display--md--font-size, + props.get(core.$font-size--100), + "md" +) !default; +$display--font-size--sm--md: props.def( + --o-heading--display--sm--font-size, + props.get(core.$font-size--75), + "md" +) !default; +$display--font-size--xs--md: props.def( + --o-heading--display--xs--font-size, + props.get(core.$font-size--50), + "md" +) !default; $display--sizes: ( - 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs $display--text-color--xs, - 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm $display--text-color--sm, - 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md $display--text-color--md, - 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg $display--text-color--lg, - 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl, - 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl, + "xs" $display--font-family--xs $display--line-height--xs $display--font-size--xs + $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs + $display--text-transform--xs $display--text-color--xs, + "sm" $display--font-family--sm $display--line-height--sm $display--font-size--sm + $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm + $display--text-transform--sm $display--text-color--sm, + "md" $display--font-family--md $display--line-height--md $display--font-size--md + $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md + $display--text-transform--md $display--text-color--md, + "lg" $display--font-family--lg $display--line-height--lg $display--font-size--lg + $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg + $display--text-transform--lg $display--text-color--lg, + "xl" $display--font-family--xl $display--line-height--xl $display--font-size--xl + $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl + $display--text-transform--xl $display--text-color--xl, + "xxl" $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl + $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl + $display--text-transform--xxl $display--text-color--xxl ) !default; -$static-themes: props.def(--o-heading, (), 'color'); +$static-themes: props.def(--o-heading, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $heading-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $heading-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --text-color: props.get(core.$transparent-colors, $theme, --900), - - --xxl: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --xl: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --lg: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --md: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --sm: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - --xs: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - - --display: ( - --xxl: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --xl: ( + $static-themes: props.merge( + $static-themes, + ( + $heading-theme: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), --text-color: props.get(core.$transparent-colors, $theme, --900), + --xxl: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --xl: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --lg: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --md: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + --sm: ( + --text-color: props.get(core.$transparent-colors, $theme, --500), + ), + --xs: ( + --text-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --display: ( + --xxl: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --xl: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --lg: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --md: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --sm: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + --xs: ( + --text-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + ), + ), ), - --lg: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --md: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --sm: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - --xs: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - ), ) - )); + ); } diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 1d046e0..7baa3f8 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -1,24 +1,24 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'icon.vars'; -@use 'icon.vars' as vars; +@forward "icon.vars"; +@use "icon.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('icon') { - display: inline; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - vertical-align: props.get(vars.$valign); - stroke-width: props.get(vars.$stroke-width); - stroke-linecap: round; + @include bem.object("icon") { + display: inline; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + vertical-align: props.get(vars.$valign); + stroke-width: props.get(vars.$stroke-width); + stroke-linecap: round; stroke-linejoin: round; - @include bem.modifier('block') { + @include bem.modifier("block") { display: block; } } diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss index 2a37212..4fdbfae 100644 --- a/src/objects/_icon.vars.scss +++ b/src/objects/_icon.vars.scss @@ -1,5 +1,5 @@ -@use 'pkg:iro-sass/src/props'; +@use "pkg:iro-sass/props"; $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; -$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; -$valign: props.def(--o-icon--valign, -.18em) !default; +$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; +$valign: props.def(--o-icon--valign, -0.18em) !default; diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index a173d57..2b4abad 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -1,40 +1,40 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'lightbox.vars'; -@use 'lightbox.vars' as vars; +@forward "lightbox.vars"; +@use "lightbox.vars" as vars; -@use 'button.vars' as button; -@use 'backdrop.vars' as backdrop; -@use 'thumbnail.vars' as thumbnail; +@use "button.vars" as button; +@use "backdrop.vars" as backdrop; +@use "thumbnail.vars" as thumbnail; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('lightbox') { - box-sizing: border-box; - display: none; - flex: 1 1 auto; - grid-template-areas: 'image' 'thumbnails'; - grid-template-rows: 1fr auto; + @include materialize-at-root(meta.module-variables("vars")); + + @include bem.object("lightbox") { + box-sizing: border-box; + display: none; + flex: 1 1 auto; + grid-template-areas: "image" "thumbnails"; + grid-template-rows: 1fr auto; grid-template-columns: 1fr; - align-items: center; - justify-items: center; - inline-size: 100%; - max-inline-size: none; - block-size: 100%; - min-block-size: 0; - max-block-size: none; - padding: 0; - margin: 0; - overflow: hidden; - background-color: transparent; - border: 0; - pointer-events: none; + align-items: center; + justify-items: center; + inline-size: 100%; + max-inline-size: none; + block-size: 100%; + min-block-size: 0; + max-block-size: none; + padding: 0; + margin: 0; + overflow: hidden; + background-color: transparent; + border: 0; + pointer-events: none; &::backdrop { background-color: props.get(backdrop.$bg-color); @@ -42,7 +42,7 @@ } &[open], - &:popover-open { + &:popover-open { display: grid; } @@ -50,80 +50,79 @@ pointer-events: auto; } - @include bem.elem('info', 'controls') { - position: absolute; + @include bem.elem("info", "controls") { + position: absolute; inset-block-start: props.get(vars.$pad); - z-index: 20; - display: flex; - align-items: center; - block-size: props.get(vars.$controls--block-size); - padding-inline: props.get(vars.$controls--pad-i); - background-color: props.get(vars.$controls--bg); - border-radius: 10em; - box-shadow: - props.get(vars.$controls--shadow-x) - props.get(vars.$controls--shadow-y) - props.get(vars.$controls--shadow-blur) - props.get(vars.$controls--shadow-grow) + z-index: 20; + display: flex; + align-items: center; + block-size: props.get(vars.$controls--block-size); + padding-inline: props.get(vars.$controls--pad-i); + background-color: props.get(vars.$controls--bg); + border-radius: 10em; + box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y) + props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow) props.get(vars.$controls--shadow-color); } - @include bem.elem('info') { - inset-inline-start: props.get(vars.$pad); + @include bem.elem("info") { + inset-inline-start: props.get(vars.$pad); font-variant-numeric: tabular-nums; } - @include bem.elem('controls') { - inset-inline-end: props.get(vars.$pad); + @include bem.elem("controls") { + inset-inline-end: props.get(vars.$pad); } - @include bem.elem('img') { - position: relative; - z-index: 10; - display: block; - grid-area: image; - inline-size: auto; + @include bem.elem("img") { + position: relative; + z-index: 10; + display: block; + grid-area: image; + inline-size: auto; min-inline-size: 0; max-inline-size: 100%; - block-size: auto; - min-block-size: 0; - max-block-size: 100%; - user-select: none; - object-fit: contain; + block-size: auto; + min-block-size: 0; + max-block-size: 100%; + user-select: none; + object-fit: contain; - @include bem.is('hidden') { + @include bem.is("hidden") { display: none; - @include bem.next-elem('placeholder') { + @include bem.next-elem("placeholder") { display: block; } } } - @include bem.elem('placeholder') { - position: absolute; - inset-block-start: 50%; + @include bem.elem("placeholder") { + position: absolute; + inset-block-start: 50%; inset-inline-start: 50%; - z-index: 5; - display: none; - transform: translate(-50, -50); + z-index: 5; + display: none; + transform: translate(-50, -50); } - @include bem.elem('thumbnails') { - display: flex; - grid-area: thumbnails; - gap: props.get(vars.$thumbnail--spacing); + @include bem.elem("thumbnails") { + display: flex; + grid-area: thumbnails; + gap: props.get(vars.$thumbnail--spacing); justify-content: center; - padding: props.get(vars.$pad); - overflow: auto; + padding: props.get(vars.$pad); + overflow: auto; } - @include bem.elem('thumbnail') { + @include bem.elem("thumbnail") { inline-size: props.get(vars.$thumbnail--width); - transition: inline-size .2s ease, margin-inline .2s ease; + transition: + inline-size 0.2s ease, + margin-inline 0.2s ease; - @include bem.is('selected') { - inline-size: props.get(vars.$thumbnail--active--width); + @include bem.is("selected") { + inline-size: props.get(vars.$thumbnail--active--width); margin-inline: props.get(vars.$thumbnail--active--spacing); } } diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 6fb84f7..dc9a2a1 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -1,37 +1,80 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default; -$controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default; -$controls--block-size: props.def(--o-lightbox--controls--block-size, props.get(core.$size--550)) !default; +$controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default; +$controls--block-size: props.def( + --o-lightbox--controls--block-size, + props.get(core.$size--550) +) !default; -$controls--shadow-x: props.def(--o-lightbox--controls--shadow-x, props.get(core.$shadow--l2--x)) !default; -$controls--shadow-y: props.def(--o-lightbox--controls--shadow-y, props.get(core.$shadow--l2--y)) !default; -$controls--shadow-blur: props.def(--o-lightbox--controls--shadow-blur, props.get(core.$shadow--l2--blur)) !default; -$controls--shadow-grow: props.def(--o-lightbox--controls--shadow-grow, props.get(core.$shadow--l2--grow)) !default; +$controls--shadow-x: props.def( + --o-lightbox--controls--shadow-x, + props.get(core.$shadow--l2--x) +) !default; +$controls--shadow-y: props.def( + --o-lightbox--controls--shadow-y, + props.get(core.$shadow--l2--y) +) !default; +$controls--shadow-blur: props.def( + --o-lightbox--controls--shadow-blur, + props.get(core.$shadow--l2--blur) +) !default; +$controls--shadow-grow: props.def( + --o-lightbox--controls--shadow-grow, + props.get(core.$shadow--l2--grow) +) !default; -$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; -$thumbnail--spacing: props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default; -$thumbnail--active--width: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default; -$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default; +$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default; +$thumbnail--spacing: props.def( + --o-lightbox--thumbnail--spacing, + props.get(core.$size--100) +) !default; +$thumbnail--active--width: props.def( + --o-lightbox--thumbnail--active--width, + props.get(core.$size--1000) +) !default; +$thumbnail--active--spacing: props.def( + --o-lightbox--thumbnail--active--spacing, + props.get(core.$size--250) +) !default; -$thumbnail--width--md: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default; -$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default; +$thumbnail--width--md: props.def( + --o-lightbox--thumbnail--width, + props.get(core.$size--400), + "md" +) !default; +$thumbnail--active--width--md: props.def( + --o-lightbox--thumbnail--active--width, + props.get(core.$size--600), + "md" +) !default; -$controls--bg: props.def(--o-lightbox--controls--bg, props.get(core.$transparent-colors, --black, --700), 'color') !default; -$controls--shadow-color: props.def(--o-lightbox--controls--shadow-color, props.get(core.$transparent-colors, --black, --300), 'color') !default; +$controls--bg: props.def( + --o-lightbox--controls--bg, + props.get(core.$transparent-colors, --black, --700), + "color" +) !default; +$controls--shadow-color: props.def( + --o-lightbox--controls--shadow-color, + props.get(core.$transparent-colors, --black, --300), + "color" +) !default; -$static-themes: props.def(--o-lightbox, (), 'color'); +$static-themes: props.def(--o-lightbox, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $lightbox-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $lightbox-theme: ( - --text: props.get(core.$transparent-colors, $theme, --text), + $static-themes: props.merge( + $static-themes, + ( + $lightbox-theme: ( + --text: props.get(core.$transparent-colors, $theme, --text), + ), ) - )); + ); } diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index dce14a8..c7fbc0e 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -1,75 +1,82 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'icon.vars' as icon; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "icon.vars" as icon; -@forward 'menu.vars'; -@use 'menu.vars' as vars; +@forward "menu.vars"; +@use "menu.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('menu') { - display: flex; + @include bem.object("menu") { + display: flex; flex-direction: column; - gap: props.get(vars.$spacing); + gap: props.get(vars.$spacing); - @include bem.elem('header') { - padding-block: props.get(vars.$item--pad-b); + @include bem.elem("header") { + padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$header--font-size); - font-weight: 500; - color: props.get(vars.$header--label-color); + font-size: props.get(vars.$header--font-size); + font-weight: 500; + color: props.get(vars.$header--label-color); text-transform: uppercase; - letter-spacing: .5px; + letter-spacing: 0.5px; @include bem.next-twin-elem { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + margin-block-start: calc( + props.get(vars.$separator-width) + props.get(vars.$spacing) + ); } } - @include bem.elem('item') { - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); - color: props.get(vars.$item--disabled--label-color); + @include bem.elem("item") { + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: props.get(vars.$item--key-focus--outline-width) solid transparent; - border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); + border: props.get(vars.$item--key-focus--outline-width) solid transparent; + border-radius: calc( + props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width) + ); &:link, &:visited, &:enabled { color: currentColor; - @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { - color: props.get(vars.$item--hover--label-color); + @include bem.multi("&:hover, &:focus-visible", "is" "selected") { + color: props.get(vars.$item--hover--label-color); background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: props.get(vars.$item--active--label-color); + color: props.get(vars.$item--active--label-color); background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + outline: props.get(vars.$item--key-focus--border-color) solid + props.get(vars.$item--key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$item--key-focus--border-width) + + props.get(vars.$item--key-focus--outline-width) + ) props.get(vars.$item--key-focus--outline-color); } } - @include bem.next-elem('header') { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + @include bem.next-elem("header") { + margin-block-start: calc( + props.get(vars.$separator-width) + props.get(vars.$spacing) + ); } } - @include bem.elem('header') { + @include bem.elem("header") { &:link, &:visited, &:enabled { @@ -77,25 +84,25 @@ } } - @include bem.elem('separator') { - block-size: 1px; - margin-block: props.get(vars.$separator-width); - margin-inline: props.get(vars.$item--pad-i); + @include bem.elem("separator") { + block-size: 1px; + margin-block: props.get(vars.$separator-width); + margin-inline: props.get(vars.$item--pad-i); background-color: props.get(vars.$separator-color); } - @include bem.elem('slot') { - padding-block: props.get(vars.$item--pad-b); + @include bem.elem("slot") { + padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); } - @include bem.elem('icon-slot') { - display: flex; + @include bem.elem("icon-slot") { + display: flex; justify-content: center; - inline-size: props.get(icon.$size); + inline-size: props.get(icon.$size); } - @include bem.modifier('pull') { + @include bem.modifier("pull") { margin: calc(-1 * props.get(vars.$item--pad-i)); } } diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss index 9396117..c168c30 100644 --- a/src/objects/_menu.vars.scss +++ b/src/objects/_menu.vars.scss @@ -1,29 +1,74 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$spacing: props.def(--o-menu--spacing, 0em) !default; +$spacing: props.def(--o-menu--spacing, 0em) !default; $header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default; -$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; +$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default; -$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; +$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default; $item--rounding: props.def(--o-menu--item--rounding, 0em) !default; -$item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$item--key-focus--border-width: props.def( + --o-menu--item--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$item--key-focus--border-offset: props.def( + --o-menu--item--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$item--key-focus--outline-width: props.def( + --o-menu--item--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default; -$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default; +$separator-color: props.def( + --o-menu--separator-color, + props.get(core.$theme, --border), + "color" +) !default; +$header--label-color: props.def( + --o-menu--header--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--hover--bg-color: props.def( + --o-menu--item--hover--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$item--hover--label-color: props.def( + --o-menu--item--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; -$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--active--bg-color: props.def( + --o-menu--item--active--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$item--active--label-color: props.def( + --o-menu--item--active--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$item--disabled--label-color: props.def( + --o-menu--item--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$item--key-focus--border-color: props.def( + --o-menu--item--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$item--key-focus--outline-color: props.def( + --o-menu--item--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index cc1eaaa..4b678e0 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -1,151 +1,197 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:list"; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'navbar.vars'; -@use 'navbar.vars' as vars; +@forward "navbar.vars"; +@use "navbar.vars" as vars; @mixin -apply-theme($theme, $key: ()) { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --disabled --label-color)...); } - @include bem.elem('item-content') { + @include bem.elem("item-content") { color: props.get($theme, list.join($key, --disabled --text-color)...); &::after { - outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + outline: props.get($theme, list.join($key, --key-focus --border)...) solid + props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get($theme, list.join($key, --key-focus --outline)...); } } - @include bem.elem('item') { + @include bem.elem("item") { &:link, &:visited, &:enabled { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --label-color)...); } - @include bem.elem('item-content') { + @include bem.elem("item-content") { color: props.get($theme, list.join($key, --text-color)...); } &:hover, &:focus-visible { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --hover --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --hover --text-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --hover --text-color)...); background-color: props.get($theme, list.join($key, --hover --bg-color)...); } } &:focus-visible { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --key-focus --label)...); } } &:active { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --active --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --active --text-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --active --text-color)...); background-color: props.get($theme, list.join($key, --active --bg-color)...); } } } - @include bem.is('selected') { - @include bem.elem('item-label') { + @include bem.is("selected") { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --selected --disabled --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --disabled --text-color)...); - background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --selected --disabled --text-color)...); + background-color: props.get( + $theme, + list.join($key, --selected --disabled --bg-color)... + ); } &:link, &:visited, &:enabled { - @include bem.elem('item-label') { + @include bem.elem("item-label") { color: props.get($theme, list.join($key, --selected --label-color)...); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --text-color)...); + @include bem.elem("item-content") { + color: props.get($theme, list.join($key, --selected --text-color)...); background-color: props.get($theme, list.join($key, --selected --bg-color)...); } &:hover, &:focus-visible { - @include bem.elem('item-label') { - color: props.get($theme, list.join($key, --selected --hover --label-color)...); + @include bem.elem("item-label") { + color: props.get( + $theme, + list.join($key, --selected --hover --label-color)... + ); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --hover --text-color)...); - background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --selected --hover --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --selected --hover --bg-color)... + ); } } &:active { - @include bem.elem('item-label') { - color: props.get($theme, list.join($key, --selected --active --label-color)...); + @include bem.elem("item-label") { + color: props.get( + $theme, + list.join($key, --selected --active --label-color)... + ); } - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --selected --active --text-color)...); - background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --selected --active --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --selected --active --bg-color)... + ); } } } } } - @include bem.modifier('quiet') { - @include bem.elem('item') { - @include bem.is('selected') { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...); + @include bem.modifier("quiet") { + @include bem.elem("item") { + @include bem.is("selected") { + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --disabled --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --disabled --bg-color)... + ); } &:link, &:visited, &:enabled { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --bg-color)... + ); } &:hover, &:focus-visible { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --hover --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --hover --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --hover --bg-color)... + ); } } &:active { - @include bem.elem('item-content') { - color: props.get($theme, list.join($key, --quiet --selected --active --text-color)...); - background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...); + @include bem.elem("item-content") { + color: props.get( + $theme, + list.join($key, --quiet --selected --active --text-color)... + ); + background-color: props.get( + $theme, + list.join($key, --quiet --selected --active --bg-color)... + ); } } } @@ -155,64 +201,64 @@ } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('navbar') { - display: flex; + @include bem.object("navbar") { + display: flex; block-size: props.get(vars.$block-size); - @include bem.elem('item-label') { - order: 2; + @include bem.elem("item-label") { + order: 2; margin-block-start: props.get(vars.$item--pad-b-icon); - font-size: props.get(vars.$item--label-font-size); - font-weight: bold; + font-size: props.get(vars.$item--label-font-size); + font-weight: bold; - @include bem.next-elem('item-content') { - padding-block: props.get(vars.$item--pad-b-icon); + @include bem.next-elem("item-content") { + padding-block: props.get(vars.$item--pad-b-icon); padding-inline: props.get(vars.$item--pad-i-icon); - font-size: props.get(vars.$item--icon-size); + font-size: props.get(vars.$item--icon-size); } } - @include bem.elem('item-content-text') { + @include bem.elem("item-content-text") { margin-inline: props.get(vars.$item--pad-i-label); } - @include bem.elem('item-content') { - position: relative; - order: 1; - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$item--font-size); - white-space: nowrap; - border-radius: 100em; + @include bem.elem("item-content") { + position: relative; + order: 1; + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$item--font-size); + white-space: nowrap; + border-radius: 100em; &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: -10; - display: block; - visibility: hidden; + position: absolute; + inset: calc(-1 * props.get(vars.$key-focus--border-offset)); + z-index: -10; + display: block; + visibility: hidden; pointer-events: none; - content: ''; - border-radius: 100em; + content: ""; + border-radius: 100em; } } - @include bem.elem('item') { - display: flex; - flex-direction: column; - align-items: center; + @include bem.elem("item") { + display: flex; + flex-direction: column; + align-items: center; justify-content: center; - inline-size: 100%; - padding-inline: calc(.5 * props.get(vars.$spacing)); - font-weight: 500; + inline-size: 100%; + padding-inline: calc(0.5 * props.get(vars.$spacing)); + font-weight: 500; &:link, &:visited, &:enabled { &:focus-visible { - @include bem.elem('item-content') { + @include bem.elem("item-content") { &::after { visibility: visible; } @@ -220,7 +266,7 @@ } } - @include bem.is('selected') { + @include bem.is("selected") { font-weight: bold; } } @@ -233,22 +279,21 @@ } } - @include bem.modifier('hide-unselected') { - @include bem.elem('item') { + @include bem.modifier("hide-unselected") { + @include bem.elem("item") { display: none; - @include bem.is('selected') { + @include bem.is("selected") { display: flex; } } } - @include bem.modifier('adapt') { + @include bem.modifier("adapt") { block-size: 100%; } - - @include bem.modifier('align-block') { + @include bem.modifier("align-block") { margin-inline: calc(-1 * props.get(vars.$item--pad-i)); } } diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index e96b714..b7d7e16 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -1,178 +1,242 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default; -$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !default; - -$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; -$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; -$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; -$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default; -$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default; -$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default; -$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; - -$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; - -$themes: props.def(--o-navbar, (), 'color'); +$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !default; + +$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; +$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; +$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; +$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default; +$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default; +$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default; +$item--label-font-size: props.def( + --o-navbar--item--label-font-size, + props.get(core.$font-size--50) +) !default; + +$key-focus--border-width: props.def( + --o-navbar--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-navbar--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-navbar--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; + +$themes: props.def(--o-navbar, (), "color"); $default-theme-override: () !default; -$default-theme: map.deep-merge(( - --text-color: props.get(core.$theme, --text), - --label-color: props.get(core.$theme, --text-mute), - - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --text), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border), - --text-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --text-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --text-disabled), - ), - - --key-focus: ( - --label: props.get(core.$theme, --focus, --text), - --border: props.get(core.$theme, --focus, --border), - --outline: props.get(core.$theme, --focus, --outline), - ), - - --selected: ( - --bg-color: props.get(core.$theme, --heading), - --text-color: props.get(core.$theme, --base, --50), - --label-color: props.get(core.$theme, --heading), - +$default-theme: map.deep-merge( + ( + --text-color: props.get(core.$theme, --text), + --label-color: props.get(core.$theme, --text-mute), --hover: ( - --bg-color: props.get(core.$theme, --text), - --text-color: props.get(core.$theme, --base, --50), - --label-color: props.get(core.$theme, --heading), + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --heading), + --label-color: props.get(core.$theme, --text), ), --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --text-color: props.get(core.$theme, --base, --50), + --bg-color: props.get(core.$theme, --border), + --text-color: props.get(core.$theme, --heading), --label-color: props.get(core.$theme, --heading), ), --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --border-strong), + --text-color: props.get(core.$theme, --border-strong), --label-color: props.get(core.$theme, --text-disabled), ), - ), - - --quiet: ( - --selected: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --heading), - --hover: ( - --bg-color: props.get(core.$theme, --border), - --text-color: props.get(core.$theme, --heading), - ), - - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --text-color: props.get(core.$theme, --heading), - ), - - --disabled: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --border-strong), - ), - ) - ) -), $default-theme-override) !default; -$default-theme: props.def(--o-navbar, $default-theme, 'color'); - -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $nav-theme: --static-#{string.slice($theme, 3)}; - - $themes: props.merge($themes, ( - $nav-theme: ( - --text-color: props.get(core.$transparent-colors, $theme, --800), - --label-color: props.get(core.$transparent-colors, $theme, --700), + --key-focus: ( + --label: props.get(core.$theme, --focus, --text), + --border: props.get(core.$theme, --focus, --border), + --outline: props.get(core.$theme, --focus, --outline), + ), + --selected: ( + --bg-color: props.get(core.$theme, --heading), + --text-color: props.get(core.$theme, --base, --50), + --label-color: props.get(core.$theme, --heading), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --text-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --800), + --bg-color: props.get(core.$theme, --text), + --text-color: props.get(core.$theme, --base, --50), + --label-color: props.get(core.$theme, --heading), ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --text-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$theme, --text-mute), + --text-color: props.get(core.$theme, --base, --50), + --label-color: props.get(core.$theme, --heading), ), --disabled: ( - --text-color: props.get(core.$transparent-colors, $theme, --500), - --label-color: props.get(core.$transparent-colors, $theme, --500), - ), - - --key-focus: ( - --label: props.get(core.$transparent-colors, $theme, --800), - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --border-strong), + --label-color: props.get(core.$theme, --text-disabled), ), + ), + --quiet: ( --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --900), - --text-color: props.get(core.$transparent-colors, $theme, --text), - --label-color: props.get(core.$transparent-colors, $theme, --800), - + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --heading), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --text-color: props.get(core.$transparent-colors, $theme, --text), - --label-color: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$theme, --border), + --text-color: props.get(core.$theme, --heading), ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --800), - --text-color: props.get(core.$transparent-colors, $theme, --text), - --label-color: props.get(core.$transparent-colors, $theme, --900), + --bg-color: props.get(core.$theme, --border-strong), + --text-color: props.get(core.$theme, --heading), ), --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), - --text-color: props.get(core.$transparent-colors, $theme, --500), - --label-color: props.get(core.$transparent-colors, $theme, --100), + --bg-color: props.get(core.$theme, --border-mute), + --text-color: props.get(core.$theme, --border-strong), ), ), + ), + ), + $default-theme-override +) !default; +$default-theme: props.def(--o-navbar, $default-theme, "color"); - --quiet: ( - --selected: ( - --bg-color: props.get(core.$transparent-colors, $theme, --300), - --text-color: props.get(core.$transparent-colors, $theme, --900), +@each $theme in map.keys(props.get(core.$transparent-colors)) { + $nav-theme: --static-#{string.slice($theme, 3)}; + $themes: props.merge( + $themes, + ( + $nav-theme: ( + --text-color: props.get(core.$transparent-colors, $theme, --800), + --label-color: props.get(core.$transparent-colors, $theme, --700), --hover: ( - --bg-color: props.get(core.$transparent-colors, $theme, --400), - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --text-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --800), + ), --active: ( - --bg-color: props.get(core.$transparent-colors, $theme, --500), - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --text-color: props.get(core.$transparent-colors, $theme, --900), + --label-color: props.get(core.$transparent-colors, $theme, --900), + ), --disabled: ( - --bg-color: props.get(core.$transparent-colors, $theme, --100), - --text-color: props.get(core.$transparent-colors, $theme, --500), - ), - ) - ) + --text-color: props.get(core.$transparent-colors, $theme, --500), + --label-color: props.get(core.$transparent-colors, $theme, --500), + ), + + --key-focus: ( + --label: props.get(core.$transparent-colors, $theme, --800), + --border: props.get(core.$transparent-colors, $theme, --900), + --outline: props.get(core.$transparent-colors, $theme, --300), + ), + + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --900), + --text-color: props.get(core.$transparent-colors, $theme, --text), + --label-color: props.get(core.$transparent-colors, $theme, --800), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --text-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --800), + --text-color: props.get( + core.$transparent-colors, + $theme, + --text + ), + --label-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --disabled: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --text-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + --label-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + ), + ), + + --quiet: ( + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + --hover: ( + --bg-color: props.get( + core.$transparent-colors, + $theme, + --400 + ), + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --active: ( + --bg-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + --text-color: props.get( + core.$transparent-colors, + $theme, + --900 + ), + ), + + --disabled: ( + --bg-color: props.get( + core.$transparent-colors, + $theme, + --100 + ), + --text-color: props.get( + core.$transparent-colors, + $theme, + --500 + ), + ), + ), + ), + ), ) - )); + ); } diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index f503812..88448e0 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -1,21 +1,27 @@ -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use '../config'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:list"; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "../config"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; @mixin styles { - @include bem.object('palette') { - display: flex; + @include bem.object("palette") { + display: flex; block-size: 3em; - @include bem.elem('item') { + @include bem.elem("item") { flex: 1 1 auto; $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); - $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); + $levels: map.get( + config.$themes, + config.$theme-default, + light, + --levels, + list.nth($palette, 2) + ); @for $i from 1 through list.length($levels) { $key: list.nth(map.keys($levels), $i); @@ -26,11 +32,19 @@ } } - @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { - $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); + @each $palette-name, + $palette in map.get(config.$themes, config.$theme-default, light, --palettes) + { + $levels: map.get( + config.$themes, + config.$theme-default, + light, + --levels, + list.nth($palette, 2) + ); @include bem.modifier(string.slice($palette-name, 3)) { - @include bem.elem('item') { + @include bem.elem("item") { @for $i from 1 through list.length($levels) { $key: list.nth(map.keys($levels), $i); @@ -42,17 +56,21 @@ } } - @include bem.modifier('static') { + @include bem.modifier("static") { @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { $levels: map.get(config.$static-colors, --levels); @include bem.modifier(string.slice($palette-name, 3)) { - @include bem.elem('item') { + @include bem.elem("item") { @for $i from 1 through list.length($levels) { $key: list.nth(map.keys($levels), $i); &:nth-child(#{$i}) { - background-color: props.get(core.$theme, #{$palette-name}-static, $key); + background-color: props.get( + core.$theme, + #{$palette-name}-static, + $key + ); } } } diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss index 683f57e..d0af033 100644 --- a/src/objects/_placeholders.scss +++ b/src/objects/_placeholders.scss @@ -1,22 +1,22 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'placeholders.vars'; -@use 'placeholders.vars' as vars; +@forward "placeholders.vars"; +@use "placeholders.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('placeholders') { - @include bem.elem('placeholder') { - display: inline-block; - min-block-size: props.get(vars.$min-block-size); - vertical-align: middle; + @include bem.object("placeholders") { + @include bem.elem("placeholder") { + display: inline-block; + min-block-size: props.get(vars.$min-block-size); + vertical-align: middle; background-color: currentColor; - border-radius: props.get(vars.$rounding); - opacity: props.get(vars.$opacity); + border-radius: props.get(vars.$rounding); + opacity: props.get(vars.$opacity); } } } diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss index 1ac4ef7..87e1657 100644 --- a/src/objects/_placeholders.vars.scss +++ b/src/objects/_placeholders.vars.scss @@ -1,6 +1,6 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default; -$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; -$opacity: props.def(--o-placeholder--opacity, .5) !default; +$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; +$opacity: props.def(--o-placeholder--opacity, 0.5) !default; diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 1cb5660..90187c1 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -1,44 +1,40 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'popover.vars'; -@use 'popover.vars' as vars; +@forward "popover.vars"; +@use "popover.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('popover') { - position: fixed; - inset-block-start: 0; + @include bem.object("popover") { + position: fixed; + inset-block-start: 0; inset-inline-start: 0; - z-index: props.get(vars.$z-index); - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin: 0; - color: currentColor; - background-color: props.get(vars.$bg-color); - border: props.get(vars.$border-width) solid transparent; - border-color: props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); - box-shadow: - props.get(vars.$shadow-x) - props.get(vars.$shadow-y) - props.get(vars.$shadow-blur) - props.get(vars.$shadow-grow) - props.get(vars.$shadow-color); - transform: translate(var(--x), var(--y)); + z-index: props.get(vars.$z-index); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin: 0; + color: currentColor; + background-color: props.get(vars.$bg-color); + border: props.get(vars.$border-width) solid transparent; + border-color: props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); + box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur) + props.get(vars.$shadow-grow) props.get(vars.$shadow-color); + transform: translate(var(--x), var(--y)); - @include bem.modifier('up-left') { + @include bem.modifier("up-left") { transform: translate(var(--x), calc(var(--y) - 100%)); } - @include bem.modifier('up-right') { + @include bem.modifier("up-right") { transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); } - @include bem.modifier('down-right') { + @include bem.modifier("down-right") { transform: translate(calc(var(--x) - 100%), var(--y)); } } diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss index 202d71a..df1072e 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss @@ -1,19 +1,28 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$z-index: props.def(--o-popover--z-index, 11000) !default; -$pad-i: props.def(--o-popover--pad-i, 0) !default; -$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; +$z-index: props.def(--o-popover--z-index, 11000) !default; +$pad-i: props.def(--o-popover--pad-i, 0) !default; +$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default; $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default; -$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; -$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; +$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; +$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; -$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default; -$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default; +$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default; +$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default; $shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default; $shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default; -$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default; -$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default; +$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), "color") !default; +$border-color: props.def( + --o-popover--border-color, + props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) + props.get(core.$theme, --box, --border-strong), + "color" +) !default; +$shadow-color: props.def( + --o-popover--shadow-color, + props.get(core.$theme, --shadow), + "color" +) !default; diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index ae4a85a..c964657 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -1,92 +1,100 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'radio.vars'; -@use 'radio.vars' as vars; +@forward "radio.vars"; +@use "radio.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('radio') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); + @include bem.object("radio") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - - @include bem.elem('circle') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$diameter); - block-size: props.get(vars.$diameter); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$circle-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc( + props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get( + vars.$key-focus--border-offset + ) + ); + + @include bem.elem("circle") { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$diameter); + block-size: props.get(vars.$diameter); + margin-block-start: calc( + 0.5em * props.get(core.$font--standard--line-height) - 0.5 * + props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset) + ); + vertical-align: top; + background-color: props.get(vars.$circle-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; &::after { - position: relative; - inset-block-start: props.get(vars.$border-width); + position: relative; + inset-block-start: props.get(vars.$border-width); inset-inline-start: props.get(vars.$border-width); - display: block; - inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - content: ''; - background-color: props.get(vars.$circle-bg-color); - border-radius: props.get(vars.$diameter); - transition: transform .2s ease; + display: block; + inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + content: ""; + background-color: props.get(vars.$circle-bg-color); + border-radius: props.get(vars.$diameter); + transition: transform 0.2s ease; } } - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + @include bem.elem("label") { + margin-inline-start: calc( + props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset) + ); } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; + @include bem.elem("native") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$hover--circle-border-color); } } &:checked { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { &::after { - transform: scale(.44); + transform: scale(0.44); } } } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -96,45 +104,46 @@ } &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$key-focus--label-color); } - @include bem.sibling-elem('circle') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + @include bem.sibling-elem("circle") { + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } } - @include bem.modifier('standalone') { - @include bem.elem('circle') { + @include bem.modifier("standalone") { + @include bem.elem("circle") { margin-block-start: 0; } } - @include bem.modifier('accent') { - @include bem.elem('native') { + @include bem.modifier("accent") { + @include bem.elem("native") { &:checked { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$accent--circle-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$accent--hover--circle-border-color); } } } &:disabled { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -143,7 +152,7 @@ } &:checked { - @include bem.sibling-elem('circle') { + @include bem.sibling-elem("circle") { background-color: props.get(vars.$disabled--circle-border-color); } } diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss index a5f249d..e7a41a4 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss @@ -1,33 +1,90 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; -$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; -$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; -$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; -$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; +$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; +$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-radio--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-radio--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-radio--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$circle-border-color: props.def( + --o-radio--circle-border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$circle-bg-color: props.def( + --o-radio--circle-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default; +$hover--label-color: props.def( + --o-radio--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--circle-border-color: props.def( + --o-radio--hover--circle-border-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; +$accent--circle-border-color: props.def( + --o-radio--accent--circle-border-color, + props.get(core.$theme, --accent, --900), + "color" +) !default; -$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; +$accent--hover--circle-border-color: props.def( + --o-radio--accent--hover--circle-border-color, + props.get(core.$theme, --accent, --1000), + "color" +) !default; -$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default; -$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default; +$disabled--label-color: props.def( + --o-radio--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--circle-border-color: props.def( + --o-radio--disabled--circle-border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; +$disabled--circle-bg-color: props.def( + --o-radio--disabled--circle-bg-color, + props.get(core.$theme, --base, --75), + "color" +) !default; -$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-radio--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-radio--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-radio--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 272d38c..ed0f3dc 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss @@ -1,76 +1,79 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use 'icon.vars' as icon; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "icon.vars" as icon; -@forward 'side-nav.vars'; -@use 'side-nav.vars' as vars; +@forward "side-nav.vars"; +@use "side-nav.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('side-nav') { - display: flex; + @include bem.object("side-nav") { + display: flex; flex-direction: column; - gap: props.get(vars.$spacing); + gap: props.get(vars.$spacing); - @include bem.elem('header') { - padding-block: props.get(vars.$item--pad-b); + @include bem.elem("header") { + padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$header--font-size); - font-weight: 500; - color: props.get(vars.$header--label-color); + font-size: props.get(vars.$header--font-size); + font-weight: 500; + color: props.get(vars.$header--label-color); text-transform: uppercase; - letter-spacing: .5px; + letter-spacing: 0.5px; @include bem.next-twin-elem { margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } - @include bem.elem('item') { - display: block; - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); - color: props.get(vars.$item--disabled--label-color); + @include bem.elem("item") { + display: block; + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: props.get(vars.$item--key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); + border: props.get(vars.$item--key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset) + ); &:link, &:visited, &:enabled { color: currentColor; - @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { - color: props.get(vars.$item--hover--label-color); + @include bem.multi("&:hover, &:focus-visible", "is" "selected") { + color: props.get(vars.$item--hover--label-color); background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: props.get(vars.$item--active--label-color); + color: props.get(vars.$item--active--label-color); background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + outline: props.get(vars.$item--key-focus--border-color) solid + props.get(vars.$item--key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$item--key-focus--border-width) + + props.get(vars.$item--key-focus--outline-width) + ) props.get(vars.$item--key-focus--outline-color); } } - @include bem.next-elem('header') { + @include bem.next-elem("header") { margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); } } - @include bem.elem('header') { + @include bem.elem("header") { &:link, &:visited, &:enabled { @@ -78,14 +81,14 @@ } } - @include bem.elem('separator') { + @include bem.elem("separator") { block-size: props.get(vars.$separator); } - @include bem.elem('icon-slot') { - display: flex; + @include bem.elem("icon-slot") { + display: flex; justify-content: center; - inline-size: props.get(icon.$size); + inline-size: props.get(icon.$size); } } } diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index d6a7de1..8abb0df 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -1,28 +1,72 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; -$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default; -$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; +$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default; +$header--font-size: props.def( + --o-side-nav--header--font-size, + props.get(core.$font-size--50) +) !default; +$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; -$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default; -$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; +$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default; +$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; -$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$item--key-focus--border-width: props.def( + --o-side-nav--item--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$item--key-focus--border-offset: props.def( + --o-side-nav--item--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$item--key-focus--outline-width: props.def( + --o-side-nav--item--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$header--label-color: props.def( + --o-side-nav--header--label-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--hover--bg-color: props.def( + --o-side-nav--item--hover--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$item--hover--label-color: props.def( + --o-side-nav--item--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default; -$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default; +$item--active--bg-color: props.def( + --o-side-nav--item--active--bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$item--active--label-color: props.def( + --o-side-nav--item--active--label-color, + props.get(core.$theme, --heading), + "color" +) !default; -$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; +$item--disabled--label-color: props.def( + --o-side-nav--item--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; -$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$item--key-focus--border-color: props.def( + --o-side-nav--item--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$item--key-focus--outline-color: props.def( + --o-side-nav--item--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index fe8fe26..8885929 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -1,22 +1,22 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'status-indicator.vars'; -@use 'status-indicator.vars' as vars; +@forward "status-indicator.vars"; +@use "status-indicator.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('status-indicator') { - display: inline-block; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); + @include bem.object("status-indicator") { + display: inline-block; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); background-color: props.get(vars.$default); - border-radius: 10em; + border-radius: 10em; @each $theme in map.keys(props.get(vars.$themes)) { @include bem.is(string.slice($theme, 3)) { diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index dfe628f..66a11e8 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -1,26 +1,32 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../config'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../config"; +@use "../core.vars" as core; $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; -$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default; -$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; +$default: props.def( + --o-status-indicator--default, + props.get(core.$theme, --border-strong), + "color" +) !default; +$primary: props.def( + --o-status-indicator--primary, + props.get(core.$theme, --text), + "color" +) !default; $themes-config: ( - accent: --accent, + accent: --accent, positive: --positive, negative: --negative, - warning: --warning, + warning: --warning, ) !default; -$themes: props.def(--o-status-indicator, (), 'color'); +$themes: props.def(--o-status-indicator, (), "color"); @each $theme, $key in $themes-config { @if $theme != --base { - $themes: props.merge($themes, ( - --#{$theme}: props.get(core.$theme, $key, --700), - )); + $themes: props.merge($themes, (--#{$theme}: props.get(core.$theme, $key, --700))); } } diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 0ef95e6..c1f7411 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,73 +1,79 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'switch.vars'; -@use 'switch.vars' as vars; +@forward "switch.vars"; +@use "switch.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('switch') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); + @include bem.object("switch") { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - - @include bem.elem('indicator') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$inline-size); - block-size: props.get(vars.$block-size); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$track-bg-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; - transition: background-color .2s ease; + margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc( + props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get( + vars.$key-focus--border-offset + ) + ); + + @include bem.elem("indicator") { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$inline-size); + block-size: props.get(vars.$block-size); + margin-block-start: calc( + 0.5em * props.get(core.$font--standard--line-height) - 0.5 * + props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset) + ); + vertical-align: top; + background-color: props.get(vars.$track-bg-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; + transition: background-color 0.2s ease; &::after { - display: block; - inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - content: ''; + display: block; + inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + content: ""; background-color: props.get(vars.$handle-bg-color); - border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); - border-radius: props.get(vars.$inline-size); - transition: transform .2s ease; + border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); + border-radius: props.get(vars.$inline-size); + transition: transform 0.2s ease; } } - @include bem.elem('label') { + @include bem.elem("label") { margin-inline-start: props.get(vars.$label-gap); } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; + @include bem.elem("native") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { &::after { border-color: props.get(vars.$hover--handle-border-color); } @@ -75,18 +81,23 @@ } &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$handle-border-color); &::after { border-color: props.get(vars.$handle-border-color); - transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); + transform: translate( + calc( + props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px + ), + 0 + ); } } &:hover, &:focus-visible { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$hover--handle-border-color); &::after { @@ -97,21 +108,21 @@ } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$disabled--track-bg-color); &::after { background-color: props.get(vars.$disabled--handle-bg-color); - border-color: props.get(vars.$disabled--handle-border-color); + border-color: props.get(vars.$disabled--handle-border-color); } } &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$disabled--handle-border-color); &::after { @@ -122,32 +133,33 @@ } &:focus-visible { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$key-focus--label-color); } - @include bem.sibling-elem('indicator') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + @include bem.sibling-elem("indicator") { + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } } - @include bem.modifier('standalone') { - @include bem.elem('indicator') { + @include bem.modifier("standalone") { + @include bem.elem("indicator") { margin-block-start: 0; } } - @include bem.modifier('accent') { - @include bem.elem('native') { + @include bem.modifier("accent") { + @include bem.elem("native") { &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$accent--handle-border-color); &::after { @@ -157,7 +169,7 @@ &:hover, &:focus-visible { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$accent--hover--handle-border-color); &::after { @@ -168,12 +180,12 @@ } &:disabled { - @include bem.sibling-elem('label') { + @include bem.sibling-elem("label") { color: props.get(vars.$disabled--label-color); } &:checked { - @include bem.sibling-elem('indicator') { + @include bem.sibling-elem("indicator") { background-color: props.get(vars.$disabled--handle-border-color); &::after { diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss index 761cacd..6f56ec7 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss @@ -1,36 +1,101 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; -$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; -$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; -$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; -$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; -$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; -$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; +$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; -$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-switch--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-switch--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-switch--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default; -$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$track-bg-color: props.def( + --o-switch--track-bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$handle-border-color: props.def( + --o-switch--handle-border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$handle-bg-color: props.def( + --o-switch--handle-bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; -$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default; -$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default; +$hover--label-color: props.def( + --o-switch--hover--label-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--handle-border-color: props.def( + --o-switch--hover--handle-border-color, + props.get(core.$theme, --text-mute), + "color" +) !default; -$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default; +$accent--handle-border-color: props.def( + --o-switch--accent--handle-border-color, + props.get(core.$theme, --accent, --900), + "color" +) !default; -$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default; +$accent--hover--handle-border-color: props.def( + --o-switch--accent--hover--handle-border-color, + props.get(core.$theme, --accent, --1000), + "color" +) !default; -$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default; -$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default; -$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default; +$disabled--label-color: props.def( + --o-switch--disabled--label-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--track-bg-color: props.def( + --o-switch--disabled--track-bg-color, + props.get(core.$theme, --border), + "color" +) !default; +$disabled--handle-border-color: props.def( + --o-switch--disabled--handle-border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; +$disabled--handle-bg-color: props.def( + --o-switch--disabled--handle-bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; -$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--label-color: props.def( + --o-switch--key-focus--label-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-switch--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-switch--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index d43208f..02519f9 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss @@ -1,75 +1,77 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'tabbar.vars'; -@use 'tabbar.vars' as vars; +@forward "tabbar.vars"; +@use "tabbar.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('tabbar') { + @include bem.object("tabbar") { min-inline-size: 0; - block-size: props.get(vars.$block-size); - overflow: hidden; + block-size: props.get(vars.$block-size); + overflow: hidden; &::after { - display: block; - block-size: props.get(vars.$border--width); + display: block; + block-size: props.get(vars.$border--width); margin-block-start: calc(-1 * props.get(vars.$border--width)); - content: ''; - background-color: props.get(vars.$railing--bg-color); + content: ""; + background-color: props.get(vars.$railing--bg-color); } - @include bem.elem('tabs') { - display: flex; - block-size: 100%; + @include bem.elem("tabs") { + display: flex; + block-size: 100%; overflow-inline: auto; } - @include bem.modifier('quiet') { + @include bem.modifier("quiet") { box-shadow: none; } - @include bem.modifier('adapt') { + @include bem.modifier("adapt") { block-size: 100%; } - @include bem.modifier('snap') { + @include bem.modifier("snap") { scroll-snap-align: start; } - @include bem.elem('tab') { - position: relative; - display: flex; - align-items: center; - padding-inline: calc(.5 * props.get(vars.$spacing)); - margin-inline: calc(-.5 * props.get(vars.$spacing)); - color: props.get(vars.$tab--text-color); - white-space: nowrap; + @include bem.elem("tab") { + position: relative; + display: flex; + align-items: center; + padding-inline: calc(0.5 * props.get(vars.$spacing)); + margin-inline: calc(-0.5 * props.get(vars.$spacing)); + color: props.get(vars.$tab--text-color); + white-space: nowrap; &::before { - position: absolute; + position: absolute; inset-block-start: 50%; - inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); - z-index: -10; - block-size: 1.5em; - content: ''; - border-radius: props.get(vars.$rounding); - transform: translateY(-50%); + inset-inline: calc( + -1 * props.get(vars.$tab--pad-i) + 0.5 * props.get(vars.$spacing) + ); + z-index: -10; + block-size: 1.5em; + content: ""; + border-radius: props.get(vars.$rounding); + transform: translateY(-50%); } &::after { - position: absolute; - inset-block-end: 0; - inset-inline: calc(.5 * props.get(vars.$spacing)); - z-index: 10; - display: none; - block-size: props.get(vars.$indicator--width); - content: ''; + position: absolute; + inset-block-end: 0; + inset-inline: calc(0.5 * props.get(vars.$spacing)); + z-index: 10; + display: none; + block-size: props.get(vars.$indicator--width); + content: ""; background-color: props.get(vars.$tab--selected--text-color); } @@ -83,21 +85,25 @@ &:focus-visible { &::before { - color: props.get(vars.$key-focus--text-color); + color: props.get(vars.$key-focus--text-color); text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); box-shadow: 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } } @include bem.next-twin-elem { - margin-inline-start: calc(.5 * props.get(vars.$spacing)); + margin-inline-start: calc(0.5 * props.get(vars.$spacing)); } - @include bem.is('selected') { + @include bem.is("selected") { color: props.get(vars.$tab--selected--text-color); &::after { @@ -106,13 +112,13 @@ } } - @include bem.modifier('accent') { - @include bem.elem('tab') { + @include bem.modifier("accent") { + @include bem.elem("tab") { &::after { background-color: props.get(vars.$tab--accent--text-color); } - @include bem.is('selected') { + @include bem.is("selected") { color: props.get(vars.$tab--accent--text-color); } } diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss index d9cc53e..d26f302 100644 --- a/src/objects/_tabbar.vars.scss +++ b/src/objects/_tabbar.vars.scss @@ -1,26 +1,66 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; -$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; -$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; +$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; +$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; -$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default; -$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; +$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default; +$indicator--width: props.def( + --o-tabbar--indicator--width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-tabbar--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-tabbar--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-tabbar--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; -$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; -$tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; +$tab--text-color: props.def( + --o-tabbar--tab--text-color, + props.get(core.$theme, --text-mute), + "color" +) !default; +$tab--selected--text-color: props.def( + --o-tabbar--tab--selected--text-color, + props.get(core.$theme, --heading), + "color" +) !default; +$tab--accent--text-color: props.def( + --o-tabbar--tab--accent--text-color, + props.get(core.$theme, --accent, --1100), + "color" +) !default; -$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$railing--bg-color: props.def( + --o-tabbar--railing--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; -$key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--text-color: props.def( + --o-tabbar--key-focus--text-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --o-tabbar--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-tabbar--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; diff --git a/src/objects/_table.scss b/src/objects/_table.scss index effa61f..a985f78 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -1,57 +1,57 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'table.vars'; -@use 'table.vars' as vars; +@forward "table.vars"; +@use "table.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('table') { - border-spacing: 0; + @include bem.object("table") { + border-spacing: 0; border-collapse: separate; - @include bem.modifier('fixed') { + @include bem.modifier("fixed") { table-layout: fixed; } - @include bem.elem('head-cell') { - padding-block: props.get(vars.$pad-b); + @include bem.elem("head-cell") { + padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); - font-family: props.get(vars.$heading--font-family); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); - color: props.get(vars.$heading-color); - text-align: start; + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + color: props.get(vars.$heading-color); + text-align: start; text-transform: props.get(vars.$heading--text-transform); letter-spacing: props.get(vars.$heading--letter-spacing); } - @include bem.elem('cell') { - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - border-color: props.get(vars.$border-color); - border-style: solid; - border-width: 0; + @include bem.elem("cell") { + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + border-color: props.get(vars.$border-color); + border-style: solid; + border-width: 0; border-block-start-width: props.get(vars.$border-width); - @include bem.modifier('divider') { + @include bem.modifier("divider") { border-inline-end-width: props.get(vars.$border-width); } } - @include bem.elem('row') { + @include bem.elem("row") { &:last-child { - @include bem.elem('cell') { + @include bem.elem("cell") { border-block-end-width: props.get(vars.$border-width); } } } - @include bem.modifier('flush') { - @include bem.elem('head-cell', 'cell') { + @include bem.modifier("flush") { + @include bem.elem("head-cell", "cell") { &:first-child { padding-inline-start: 0; } @@ -62,8 +62,8 @@ } } - @include bem.modifier('box') { - @include bem.elem('cell') { + @include bem.modifier("box") { + @include bem.elem("cell") { background-color: props.get(vars.$box--bg-color); &:first-child { @@ -75,9 +75,9 @@ } } - @include bem.elem('row') { + @include bem.elem("row") { &:first-child { - @include bem.elem('cell') { + @include bem.elem("cell") { &:first-child { border-start-start-radius: props.get(vars.$rounding); } @@ -89,7 +89,7 @@ } &:last-child { - @include bem.elem('cell') { + @include bem.elem("cell") { &:first-child { border-end-start-radius: props.get(vars.$rounding); } @@ -102,35 +102,35 @@ } } - @include bem.modifier('interactive') { - @include bem.elem('row') { - @include bem.elem('cell') { + @include bem.modifier("interactive") { + @include bem.elem("row") { + @include bem.elem("cell") { cursor: pointer; } &:hover { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$hover--bg-color); } } &:active { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$active--bg-color); } } } - @include bem.modifier('box') { - @include bem.elem('row') { + @include bem.modifier("box") { + @include bem.elem("row") { &:hover { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$box--hover--bg-color); } } &:active { - @include bem.elem('cell') { + @include bem.elem("cell") { background-color: props.get(vars.$box--active--bg-color); } } @@ -138,8 +138,8 @@ } } - @include bem.modifier('sm') { - @include bem.elem('head-cell', 'cell') { + @include bem.modifier("sm") { + @include bem.elem("head-cell", "cell") { padding-block: props.get(vars.$pad-b--sm); } } diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss index 7c5683c..e00010f 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss @@ -1,25 +1,59 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; -$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; -$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; +$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; +$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; +$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; -$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; -$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default; -$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; +$heading--font-family: props.def( + --o-table--heading--font-family, + props.get(core.$font--standard--family) +) !default; +$heading--font-size: props.def( + --o-table--heading--font-size, + props.get(core.$font-size--50) +) !default; +$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; $heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default; -$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default; +$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, 0.5px) !default; $pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; -$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default; -$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default; -$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default; +$border-color: props.def( + --o-table--border-color, + props.get(core.$theme, --border), + "color" +) !default; +$heading-color: props.def( + --o-table--heading-color, + props.get(core.$theme, --heading), + "color" +) !default; +$hover--bg-color: props.def( + --o-table--hover--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$active--bg-color: props.def( + --o-table--active--bg-color, + props.get(core.$theme, --border), + "color" +) !default; -$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default; -$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default; -$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$box--bg-color: props.def( + --o-table--box--bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; +$box--hover--bg-color: props.def( + --o-table--box--hover--bg-color, + props.get(core.$theme, --bg-base), + "color" +) !default; +$box--active--bg-color: props.def( + --o-table--box--active--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 5a48df3..a8d3ec8 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,84 +1,91 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'text-field.vars'; -@use 'text-field.vars' as vars; +@forward "text-field.vars"; +@use "text-field.vars" as vars; @mixin -invalid { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); - - @include bem.sibling-elem('bg') { - inset-block: $focus-border-offset; - inset-inline: $focus-border-offset; - border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); + $focus-border-offset: calc( + props.get(vars.$border-width) - props.get(vars.$focus--border-width) + ); + + @include bem.sibling-elem("bg") { + inset-block: $focus-border-offset; + inset-inline: $focus-border-offset; + border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } &:hover { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$error--hover--border-color); } } &:focus { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$error--focus--border-color); } } } @mixin -keyboard-focus { - @include bem.sibling-elem('bg') { - outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); - border-color: props.get(vars.$key-focus--border-color); + @include bem.sibling-elem("bg") { + outline: props.get(vars.$key-focus--outline-color) solid + props.get(vars.$key-focus--border-width); + border-color: props.get(vars.$key-focus--border-color); //outline-offset: props.get(vars.$focus --border); } } @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('text-field') { - $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); + @include bem.object("text-field") { + $focus-border-offset: calc( + props.get(vars.$border-width) - props.get(vars.$focus--border-width) + ); - position: relative; - min-inline-size: 0; + position: relative; + min-inline-size: 0; background-color: props.get(vars.$bg-color); - border-radius: props.get(vars.$rounding); + border-radius: props.get(vars.$rounding); - @include bem.elem('bg') { - position: absolute; - inset-block: 0; - inset-inline: 0; - display: block; + @include bem.elem("bg") { + position: absolute; + inset-block: 0; + inset-inline: 0; + display: block; pointer-events: none; - border: props.get(vars.$border-width) solid props.get(vars.$border-color); - border-radius: props.get(vars.$rounding); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); } - @include bem.elem('native') { - box-sizing: border-box; - inline-size: 100%; - padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); - padding-inline: props.get(vars.$pad-i); - font: inherit; - line-height: props.get(vars.$line-height); - color: props.get(vars.$text-color); - appearance: none; - resize: none; + @include bem.elem("native") { + box-sizing: border-box; + inline-size: 100%; + padding-block: calc( + props.get(vars.$pad-b) - 0.5em * (props.get(vars.$line-height) - 1) + ); + padding-inline: props.get(vars.$pad-i); + font: inherit; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + appearance: none; + resize: none; background-color: transparent; - border: 1px solid transparent; + border: 1px solid transparent; &::placeholder { font-style: italic; - color: props.get(vars.$placeholder-color); - opacity: 1; + color: props.get(vars.$placeholder-color); + opacity: 1; } &:hover { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$hover--border-color); } } @@ -86,10 +93,11 @@ &:focus { outline: 0; - @include bem.sibling-elem('bg') { - inset-block: $focus-border-offset; - inset-inline: $focus-border-offset; - border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); + @include bem.sibling-elem("bg") { + inset-block: $focus-border-offset; + inset-inline: $focus-border-offset; + border: props.get(vars.$focus--border-width) solid + props.get(vars.$focus--border-color); border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } } @@ -104,46 +112,49 @@ } } - @include bem.modifier('extended') { + @include bem.modifier("extended") { padding: props.get(vars.$extended--pad); - @include bem.multi('&', 'elem' 'bg') { + @include bem.multi("&", "elem" "bg") { border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); } - @include bem.elem('native') { + @include bem.elem("native") { &:focus { - @include bem.sibling-elem('bg') { - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); + @include bem.sibling-elem("bg") { + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$extended--pad) - + $focus-border-offset + ); } } } } - @include bem.modifier('pill') { - @include bem.multi('&', 'elem' 'bg') { + @include bem.modifier("pill") { + @include bem.multi("&", "elem" "bg") { border-radius: 100em; } - @include bem.elem('native') { + @include bem.elem("native") { padding-inline: props.get(vars.$pad-i-pill); &:focus { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-radius: 100em; } } } - @include bem.modifier('extended') { - @include bem.elem('native') { + @include bem.modifier("extended") { + @include bem.elem("native") { padding-inline: props.get(vars.$pad-i); } } } - @include bem.is('invalid') { - @include bem.elem('native') { + @include bem.is("invalid") { + @include bem.elem("native") { @include -invalid; &:focus-visible { @@ -152,10 +163,10 @@ } } - @include bem.is('disabled') { + @include bem.is("disabled") { background-color: props.get(vars.$disabled--bg-color); - @include bem.elem('native') { + @include bem.elem("native") { color: props.get(vars.$disabled--text-color); &::placeholder { @@ -163,21 +174,21 @@ } } - @include bem.elem('bg') { + @include bem.elem("bg") { border-color: props.get(vars.$disabled--border-color); } - @include bem.is('invalid') { - @include bem.elem('native') { - @include bem.sibling-elem('bg') { + @include bem.is("invalid") { + @include bem.elem("native") { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$disabled--border-color); } } } - @include bem.elem('native') { + @include bem.elem("native") { &:invalid { - @include bem.sibling-elem('bg') { + @include bem.sibling-elem("bg") { border-color: props.get(vars.$disabled--border-color); } } diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss index ef06822..9a2a16a 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss @@ -1,39 +1,108 @@ -@use 'sass:map'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$line-height: props.def(--o-text-field--line-height, 1.4) !default; -$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; -$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default; -$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; -$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; -$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default; +$line-height: props.def(--o-text-field--line-height, 1.4) !default; +$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; +$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default; +$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; +$border-width: props.def( + --o-text-field--border-width, + props.get(core.$border-width--thin) +) !default; +$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default; $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; -$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; +$focus--border-width: props.def( + --o-text-field--focus--border-width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-text-field--key-focus--border-width, + props.get(core.$key-focus--outline-width) +) !default; -$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default; -$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default; -$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default; +$bg-color: props.def( + --o-text-field--bg-color, + props.get(core.$theme, --base, --50), + "color" +) !default; +$placeholder-color: props.def( + --o-text-field--placeholder-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; +$text-color: props.def( + --o-text-field--text-color, + props.get(core.$theme, --text), + "color" +) !default; +$border-color: props.def( + --o-text-field--border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; -$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$hover--border-color: props.def( + --o-text-field--hover--border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$focus--border-color: props.def( + --o-text-field--focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; -$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--border-color: props.def( + --o-text-field--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-text-field--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default; +$error--border-color: props.def( + --o-text-field--error--border-color, + props.get(core.$theme, --negative, --700), + "color" +) !default; -$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default; +$error--hover--border-color: props.def( + --o-text-field--error--hover--border-color, + props.get(core.$theme, --negative, --900), + "color" +) !default; -$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default; +$error--focus--border-color: props.def( + --o-text-field--error--focus--border-color, + props.get(core.$theme, --negative, --900), + "color" +) !default; -$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default; -$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default; -$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default; +$disabled--bg-color: props.def( + --o-text-field--disabled--bg-color, + props.get(core.$theme, --border-mute), + "color" +) !default; +$disabled--placeholder-color: props.def( + --o-text-field--disabled--placeholder-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--text-color: props.def( + --o-text-field--disabled--text-color, + props.get(core.$theme, --text-disabled), + "color" +) !default; +$disabled--border-color: props.def( + --o-text-field--disabled--border-color, + props.get(core.$theme, --border-mute), + "color" +) !default; diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 9925dd0..c7a9791 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -1,65 +1,66 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'thumbnail.vars'; -@use 'thumbnail.vars' as vars; +@forward "thumbnail.vars"; +@use "thumbnail.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.object('thumbnail') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: props.get(vars.$size); - block-size: props.get(vars.$size); - overflow: hidden; - outline: props.get(vars.$border-color) solid props.get(vars.$border-width); + @include bem.object("thumbnail") { + position: relative; + display: block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + overflow: hidden; + outline: props.get(vars.$border-color) solid props.get(vars.$border-width); outline-offset: calc(-1 * props.get(vars.$border-width)); - border-radius: props.get(vars.$rounding); + border-radius: props.get(vars.$rounding); &:hover, &:active, &:focus-visible { outline-color: props.get(vars.$hover--border-color); - opacity: 1; + opacity: 1; } - @include bem.elem('image') { - position: absolute; - inset-block-start: 0; + @include bem.elem("image") { + position: absolute; + inset-block-start: 0; inset-inline-start: 0; - display: block; - inline-size: 100%; - block-size: 100%; - object-fit: cover; - object-position: center center; + display: block; + inline-size: 100%; + block-size: 100%; + object-fit: cover; + object-position: center center; } - @include bem.elem('icon') { - position: absolute; - inset-block-start: 50%; + @include bem.elem("icon") { + position: absolute; + inset-block-start: 50%; inset-inline-start: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } &:focus-visible { $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); - margin: $focus-border-offset; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + margin: $focus-border-offset; + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); outline-offset: 0; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--outline-width) + + props.get(vars.$key-focus--border-width) + ) props.get(vars.$key-focus--outline-color); } @@ -73,18 +74,18 @@ outline-color: props.get(vars.$static-themes, $theme, --hover, --border); } - @include bem.is('selected') { + @include bem.is("selected") { border-color: props.get(vars.$static-themes, $theme, --selected, --border); } &:focus-visible { outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); - border-color: transparent; - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) + border-color: transparent; + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--outline-width) + + props.get(vars.$key-focus--border-width) + ) props.get(vars.$static-themes, $theme, --key-focus, --outline); } } diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index a5625fc..737a626 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -1,51 +1,85 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; - -$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; -$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; -$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; + +$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default; +$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; +$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; -$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default; +$selected--border-width: props.def( + --o-thumbnail--selected--border-width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --o-thumbnail--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --o-thumbnail--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --o-thumbnail--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default; +$border-color: props.def( + --o-thumbnail--border-color, + props.get(core.$theme, --border-strong), + "color" +) !default; -$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$hover--border-color: props.def( + --o-thumbnail--hover--border-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default; +$selected--border-color: props.def( + --o-thumbnail--selected--border-color, + props.get(core.$theme, --heading), + "color" +) !default; -$key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--border-color: props.def( + --o-thumbnail--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --o-thumbnail--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default; +$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), "md") !default; -$static-themes: props.def(--o-thumbnail, (), 'color'); +$static-themes: props.def(--o-thumbnail, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $thumbnail-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $thumbnail-theme: ( - --border: props.get(core.$transparent-colors, $theme, --400), - - --hover: ( - --border: props.get(core.$transparent-colors, $theme, --500), - ), + $static-themes: props.merge( + $static-themes, + ( + $thumbnail-theme: ( + --border: props.get(core.$transparent-colors, $theme, --400), + --hover: ( + --border: props.get(core.$transparent-colors, $theme, --500), + ), - --selected: ( - --border: props.get(core.$transparent-colors, $theme, --900), - ), + --selected: ( + --border: props.get(core.$transparent-colors, $theme, --900), + ), - --key-focus: ( - --border: props.get(core.$transparent-colors, $theme, --900), - --outline: props.get(core.$transparent-colors, $theme, --300), - ), + --key-focus: ( + --border: props.get(core.$transparent-colors, $theme, --900), + --outline: props.get(core.$transparent-colors, $theme, --300), + ), + ), ) - )); + ); } diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index 10e6d81..bc4fd39 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss @@ -1,25 +1,27 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'blockquotes.vars'; -@use 'blockquotes.vars' as vars; +@forward "blockquotes.vars"; +@use "blockquotes.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('blockquotes') { + @include bem.scope("blockquotes") { blockquote { padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); - margin-block: props.get(vars.$margin-bs) 0; - margin-inline: 1px 0; - border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); + margin-block: props.get(vars.$margin-bs) 0; + margin-inline: 1px 0; + border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); } - @include bem.modifier('compact') { + @include bem.modifier("compact") { blockquote { - padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); + padding-inline-start: calc( + props.get(vars.$compact--indent) - props.get(vars.$border-width) + ); } } } diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss index 63c40b0..117b4a6 100644 --- a/src/scopes/_blockquotes.vars.scss +++ b/src/scopes/_blockquotes.vars.scss @@ -1,11 +1,24 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "./implicit.vars" as implicit; -$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; -$margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; +$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; +$margin-bs: props.def( + --s-blockquotes--margin-bs, + props.get(implicit.$paragraph--margin-bs) +) !default; +$border-width: props.def( + --s-blockquotes--border-width, + props.get(core.$border-width--thick) +) !default; -$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; +$compact--indent: props.def( + --s-blockquotes--compact--indent, + props.get(core.$list--compact-indent) +) !default; -$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default; +$border-color: props.def( + --s-blockquotes--border-color, + props.get(core.$theme, --border), + "color" +) !default; diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss index 77a3eb1..6c5ba63 100644 --- a/src/scopes/_body.scss +++ b/src/scopes/_body.scss @@ -1,15 +1,15 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'body.vars'; -@use 'body.vars' as vars; +@forward "body.vars"; +@use "body.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('body') { + @include bem.scope("body") { font-size: props.get(vars.$font-size); line-height: props.get(vars.$line-height); @@ -30,11 +30,11 @@ } img { - display: block; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$img--max-block-size); + display: block; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$img--max-block-size); margin-block-start: props.get(vars.$paragraph--margin-bs); } diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss index 981ef32..414e0c1 100644 --- a/src/scopes/_body.vars.scss +++ b/src/scopes/_body.vars.scss @@ -1,12 +1,25 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -@use '../layouts/container.vars' as container; +@use "../layouts/container.vars" as container; -$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; -$line-height: props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default; -$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; -$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; -$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; +$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; +$line-height: props.def( + --s-body--line-height, + calc(props.get(core.$font--standard--line-height) + 0.1) +) !default; +$paragraph--margin-bs: props.def( + --s-body--paragraph--margin-bs, + props.get(core.$size--300) +) !default; +$paragraph--max-inline-size: props.def( + --s-body--paragraph--max-inline-size, + props.get(container.$fixed) +) !default; +$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; -$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; +$strong--text-color: props.def( + --s-body--strong--text-color, + props.get(core.$theme, --heading), + "color" +) !default; diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index db43de0..d931c22 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -1,39 +1,39 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'code.vars'; -@use 'code.vars' as vars; +@forward "code.vars"; +@use "code.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('code') { + @include bem.scope("code") { code { - padding-block: props.get(vars.$inline--pad-b); - padding-inline: props.get(vars.$inline--pad-i); - color: props.get(vars.$inline--fg); + padding-block: props.get(vars.$inline--pad-b); + padding-inline: props.get(vars.$inline--pad-i); + color: props.get(vars.$inline--fg); background-color: props.get(vars.$inline--bg); - border-radius: props.get(vars.$inline--rounding); + border-radius: props.get(vars.$inline--rounding); } pre { - padding-block: props.get(vars.$block--pad-b); - padding-inline: props.get(vars.$block--pad-i); - margin-block: props.get(vars.$block--margin-bs) 0; - margin-inline: 0; - color: props.get(vars.$block--fg); + padding-block: props.get(vars.$block--pad-b); + padding-inline: props.get(vars.$block--pad-i); + margin-block: props.get(vars.$block--margin-bs) 0; + margin-inline: 0; + color: props.get(vars.$block--fg); background-color: props.get(vars.$block--bg); - border-radius: props.get(vars.$block--rounding); + border-radius: props.get(vars.$block--rounding); code { - display: inline-block; - padding: 0; + display: inline-block; + padding: 0; margin-inline-end: props.get(vars.$block--pad-i); - color: currentColor; - background-color: transparent; - border-radius: 0; + color: currentColor; + background-color: transparent; + border-radius: 0; } } } diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss index 329d372..e22421c 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss @@ -1,18 +1,25 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "./implicit.vars" as implicit; -$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; -$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; +$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; +$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default; -$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; -$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; -$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; +$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; +$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; +$block--margin-bs: props.def( + --s-code--block--margin-bs, + props.get(implicit.$paragraph--margin-bs) +) !default; +$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; -$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; -$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; +$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), "color") !default; +$inline--bg: props.def( + --s-code--inline--bg, + props.get(core.$theme, --base, --200), + "color" +) !default; -$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default; -$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default; +$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), "color") !default; +$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), "color") !default; diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss index c993f5a..852ab5a 100644 --- a/src/scopes/_figures.scss +++ b/src/scopes/_figures.scss @@ -1,20 +1,20 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../objects/figure.vars' as figure; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../objects/figure.vars" as figure; @mixin styles { - @include bem.scope('figures') { + @include bem.scope("figures") { figcaption { - padding-block: props.get(figure.$pad-b); - font-size: props.get(figure.$font-size); - color: props.get(figure.$text-color); + padding-block: props.get(figure.$pad-b); + font-size: props.get(figure.$font-size); + color: props.get(figure.$text-color); border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); &::before { - display: block; - margin-block: -100em 100em; - content: ''; + display: block; + margin-block: -100em 100em; + content: ""; } } } diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 23623fd..a6a7bbb 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,8 +1,8 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../objects/heading.vars' as heading; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../objects/heading.vars" as heading; @mixin styles { /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -15,56 +15,62 @@ xxl: h1, ); - @include bem.scope('headings') { + @include bem.scope("headings") { h1, h2, h3, h4, h5, h6 { - display: block; - margin-block-start: props.get(heading.$margin-bs); - font-family: props.get(heading.$font-family); - font-weight: props.get(heading.$font-weight); + display: block; + margin-block-start: props.get(heading.$margin-bs); + font-family: props.get(heading.$font-family); + font-weight: props.get(heading.$font-weight); font-feature-settings: props.get(heading.$feature-settings); - line-height: props.get(heading.$line-height); - text-transform: props.get(heading.$text-transform); - letter-spacing: normal; - transform: translateX(props.get(heading.$offset)); + line-height: props.get(heading.$line-height); + text-transform: props.get(heading.$text-transform); + letter-spacing: normal; + transform: translateX(props.get(heading.$offset)); } - @include bem.elem('highlight') { - background-image: linear-gradient(to top, - transparent .15em, - props.get(heading.$bg-color) .15em, - props.get(heading.$bg-color) .6em, - transparent .6em); + @include bem.elem("highlight") { + background-image: linear-gradient( + to top, + transparent 0.15em, + props.get(heading.$bg-color) 0.15em, + props.get(heading.$bg-color) 0.6em, + transparent 0.6em + ); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in heading.$sizes + { #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } - @include bem.modifier('display') { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes { + @include bem.modifier("display") { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, + $feature-settings, $text-transform, $text-color in heading.$display--sizes + { #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } } @@ -79,10 +85,16 @@ } } - @include bem.modifier('display') { + @include bem.modifier("display") { @each $mod, $value in heading.$sizes { #{map.get($-size-map, $mod)} { - color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color); + color: props.get( + heading.$static-themes, + $theme, + --display, + --#{$mod}, + --text-color + ); } } } diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index 728fd22..f8c575d 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -1,21 +1,21 @@ -@use 'sass:map'; -@use 'sass:math'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; - -@forward 'implicit.vars'; -@use 'implicit.vars' as vars; +@use "sass:map"; +@use "sass:math"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; + +@forward "implicit.vars"; +@use "implicit.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); @layer scope { html { - accent-color: props.get(core.$theme, --accent, --600); + accent-color: props.get(core.$theme, --accent, --600); scrollbar-color: props.get(core.$theme, --text-disabled) transparent; &:has(dialog[open]), @@ -26,31 +26,31 @@ } body { - padding: 0; - margin: 0; - font-family: props.get(vars.$body--font-family); - font-size: props.get(vars.$body--font-size); + padding: 0; + margin: 0; + font-family: props.get(vars.$body--font-family); + font-size: props.get(vars.$body--font-size); font-feature-settings: props.get(vars.$body--feature-settings); - line-height: props.get(vars.$body--line-height); - color: props.get(core.$theme, --text); - background-color: props.get(core.$theme, --bg-base); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); } pre, code { - font-family: props.get(vars.$code--font-family); - font-size: props.get(vars.$code--font-size); + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); font-feature-settings: props.get(vars.$code--feature-settings); - line-height: props.get(vars.$code--line-height); + line-height: props.get(vars.$code--line-height); } pre { - margin: 0; + margin: 0; overflow-x: auto; code { font-size: 1em; - color: currentColor; + color: currentColor; } } @@ -60,13 +60,13 @@ h4, h5, h6 { - margin-block: props.get(vars.$heading--margin-bs) 0; - font-family: props.get(vars.$heading--font-family); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); + margin-block: props.get(vars.$heading--margin-bs) 0; + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); font-feature-settings: props.get(vars.$heading--feature-settings); - line-height: props.get(vars.$heading--line-height); - color: props.get(vars.$heading--color); + line-height: props.get(vars.$heading--line-height); + color: props.get(vars.$heading--color); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); @@ -91,14 +91,14 @@ ul, ol { - padding: 0; - margin: 0; + padding: 0; + margin: 0; list-style: none; } li { padding: 0; - margin: 0; + margin: 0; } :focus, @@ -108,28 +108,27 @@ :link, :visited { - color: currentColor; + color: currentColor; text-decoration: none; } - button, input, textarea { - box-sizing: content-box; - padding: 0; - margin: 0; - font-family: inherit; - font-size: 1em; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - color: currentColor; - text-align: inherit; + box-sizing: content-box; + padding: 0; + margin: 0; + font-family: inherit; + font-size: 1em; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + color: currentColor; + text-align: inherit; text-transform: inherit; - appearance: none; - background: none; - border: 0; + appearance: none; + background: none; + border: 0; &::-moz-focus-inner { border: 0; @@ -139,7 +138,7 @@ input, textarea { &::placeholder { - color: props.get(core.$theme, --text-mute); + color: props.get(core.$theme, --text-mute); opacity: 1; } @@ -153,15 +152,15 @@ } hr { - block-size: props.get(core.$border-width--thin); - margin: 0; + block-size: props.get(core.$border-width--thin); + margin: 0; background-color: props.get(core.$theme, --border); - border: 0; + border: 0; } figure { padding: 0; - margin: 0; + margin: 0; } @each $theme in map.keys(props.get(core.$transparent-colors)) { diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index 64d4a8f..f0256b0 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -1,26 +1,69 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default; +$paragraph--margin-bs: props.def( + --s-implicit--paragraph--margin-bs, + props.get(core.$size--200) +) !default; -$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; +$small--font-size: props.def( + --s-implicit--small--font-size, + props.get(core.$font-size--75) +) !default; -$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; -$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; -$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); -$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default; +$body--font-family: props.def( + --s-implicit--body--font-family, + props.get(core.$font--standard--family) +) !default; +$body--line-height: props.def( + --s-implicit--body--line-height, + props.get(core.$font--standard--line-height) +) !default; +$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); +$body--feature-settings: props.def( + --s-implicit--body--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; -$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; -$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; -$code--font-size: props.def(--s-implicit--code--font-size, .93em); -$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default; +$code--font-family: props.def( + --s-implicit--code--font-family, + props.get(core.$font--mono--family) +) !default; +$code--line-height: props.def( + --s-implicit--code--line-height, + props.get(core.$font--mono--line-height) +) !default; +$code--font-size: props.def(--s-implicit--code--font-size, 0.93em); +$code--feature-settings: props.def( + --s-implicit--code--feature-settings, + props.get(core.$font--mono--feature-settings) +) !default; -$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; -$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; -$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default; -$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; -$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default; -$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); -$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; +$heading--margin-bs: props.def( + --s-implicit--heading--margin-bs, + props.get(core.$size--700) +) !default; +$heading--margin-bs-sibling: props.def( + --s-implicit--heading--margin-bs-sibling, + props.get(core.$size--325) +) !default; +$heading--font-family: props.def( + --s-implicit--heading--font-family, + props.get(core.$font--standard--family) +) !default; +$heading--line-height: props.def( + --s-implicit--heading--line-height, + props.get(core.$font--standard--line-height) +) !default; +$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default; +$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); +$heading--feature-settings: props.def( + --s-implicit--heading--feature-settings, + props.get(core.$font--standard--feature-settings) +) !default; -$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default; +$heading--color: props.def( + --s-implicit--heading--color, + props.get(core.$theme, --heading), + "color" +) !default; diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 8498487..fea78f1 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -1,78 +1,79 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; +@use "sass:map"; +@use "sass:meta"; +@use "sass:string"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; -@forward 'links.vars'; -@use 'links.vars' as vars; +@forward "links.vars"; +@use "links.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('links') { + @include bem.scope("links") { :link, :visited { - color: currentColor; - text-decoration: underline; + color: currentColor; + text-decoration: underline; text-decoration-thickness: props.get(vars.$underline-width); - text-decoration-color: props.get(vars.$underline-color); - border-radius: props.get(vars.$rounding-sm); - box-decoration-break: clone; + text-decoration-color: props.get(vars.$underline-color); + border-radius: props.get(vars.$rounding-sm); + box-decoration-break: clone; &:hover { - text-decoration: underline; + text-decoration: underline; text-decoration-thickness: props.get(vars.$hover--underline-width); - text-decoration-skip-ink: none; + text-decoration-skip-ink: none; } &:focus-visible { - color: props.get(vars.$key-focus--text-color); + color: props.get(vars.$key-focus--text-color); text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + outline: props.get(vars.$key-focus--border-color) solid + props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } - @include bem.modifier('invisible') { + @include bem.modifier("invisible") { :link, :visited { text-decoration: none; } } - @include bem.modifier('colored') { + @include bem.modifier("colored") { :link { - color: props.get(vars.$colored--text-color); + color: props.get(vars.$colored--text-color); text-decoration-color: props.get(vars.$colored--underline-color); &:hover { - color: props.get(vars.$colored--hover--text-color); + color: props.get(vars.$colored--hover--text-color); } } :visited { - color: props.get(vars.$colored--visited--text-color); + color: props.get(vars.$colored--visited--text-color); text-decoration-color: props.get(vars.$colored--visited--underline-color); &:hover { - color: props.get(vars.$colored--visited--hover--text-color); + color: props.get(vars.$colored--visited--hover--text-color); } } } - @include bem.modifier('mark-external') { + @include bem.modifier("mark-external") { :link, :visited { - &[href^='http'] { + &[href^="http"] { &::after { - content: ' ↗'; + content: " ↗"; } } } @@ -82,21 +83,30 @@ @include bem.modifier(string.slice($theme, 3)) { :link, :visited { - color: props.get(vars.$static-themes, $theme, --text-color); - text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); + color: props.get(vars.$static-themes, $theme, --text-color); + text-decoration-color: props.get( + vars.$static-themes, + $theme, + --underline-color + ); &:hover { - color: props.get(vars.$static-themes, $theme, --hover, --text-color); + color: props.get(vars.$static-themes, $theme, --hover, --text-color); } &:focus-visible { - color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); - outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); + outline-color: props.get( + vars.$static-themes, + $theme, + --key-focus, + --border-color + ); + box-shadow: 0 0 0 + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$static-themes, $theme, --key-focus, --outline-color); } } @@ -106,21 +116,26 @@ :has(img) { img { margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc( + props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) + ); } &:link, &:visited { &:focus-visible { - outline: none; + outline: none; box-shadow: none; img { outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + calc( + props.get(vars.$key-focus--border-width) + + props.get(vars.$key-focus--outline-width) + ) props.get(vars.$key-focus--outline-color); } } diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index cd80e4c..c06789b 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -1,49 +1,106 @@ -@use 'sass:map'; -@use 'sass:string'; -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; +@use "sass:map"; +@use "sass:string"; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; -$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; -$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; -$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; -$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; +$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; +$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; +$underline-width: props.def( + --s-links--underline-width, + props.get(core.$border-width--thin) +) !default; +$hover--underline-width: props.def( + --s-links--hover--underline-width, + props.get(core.$border-width--medium) +) !default; -$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; -$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; +$key-focus--border-width: props.def( + --s-links--key-focus--border-width, + props.get(core.$key-focus--border-width) +) !default; +$key-focus--border-offset: props.def( + --s-links--key-focus--border-offset, + props.get(core.$key-focus--border-offset) +) !default; +$key-focus--outline-width: props.def( + --s-links--key-focus--outline-width, + props.get(core.$key-focus--outline-width) +) !default; -$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; +$underline-color: props.def( + --s-links--underline-color, + props.get(core.$theme, --text-mute-more), + "color" +) !default; -$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; -$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; -$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; +$colored--text-color: props.def( + --s-links--colored--text-color, + props.get(core.$theme, --accent, --1100), + "color" +) !default; +$colored--underline-color: props.def( + --s-links--colored--underline-color, + props.get(core.$theme, --accent, --600), + "color" +) !default; +$colored--hover--text-color: props.def( + --s-links--colored--hover--text-color, + props.get(core.$theme, --accent, --1300), + "color" +) !default; -$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; -$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; -$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; +$colored--visited--text-color: props.def( + --s-links--colored--visited--text-color, + props.get(core.$theme, --purple, --1100), + "color" +) !default; +$colored--visited--underline-color: props.def( + --s-links--colored--visited--underline-color, + props.get(core.$theme, --purple, --600), + "color" +) !default; +$colored--visited--hover--text-color: props.def( + --s-links--colored--visited--hover--text-color, + props.get(core.$theme, --purple, --1300), + "color" +) !default; -$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; -$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$key-focus--text-color: props.def( + --s-links--key-focus--text-color, + props.get(core.$theme, --focus, --text), + "color" +) !default; +$key-focus--border-color: props.def( + --s-links--key-focus--border-color, + props.get(core.$theme, --focus, --border), + "color" +) !default; +$key-focus--outline-color: props.def( + --s-links--key-focus--outline-color, + props.get(core.$theme, --focus, --outline), + "color" +) !default; -$static-themes: props.def(--s-links, (), 'color'); +$static-themes: props.def(--s-links, (), "color"); @each $theme in map.keys(props.get(core.$transparent-colors)) { $link-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge($static-themes, ( - $link-theme: ( - --text-color: currentColor, - --underline-color: props.get(core.$transparent-colors, $theme, --500), + $static-themes: props.merge( + $static-themes, + ( + $link-theme: ( + --text-color: currentColor, + --underline-color: props.get(core.$transparent-colors, $theme, --500), + --hover: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), - --hover: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), - - --key-focus: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), + --key-focus: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), + ), ) - )); + ); } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index 0285bb0..7b9ddbc 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.scss @@ -1,20 +1,20 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../core.vars' as core; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../core.vars" as core; -@forward 'lists.vars'; -@use 'lists.vars' as vars; +@forward "lists.vars"; +@use "lists.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('lists') { + @include bem.scope("lists") { ul, ol { padding-inline-start: props.get(vars.$indent); - margin-block-start: props.get(vars.$margin-bs); + margin-block-start: props.get(vars.$margin-bs); ul, ol { @@ -31,22 +31,22 @@ } dl { - padding: 0; - margin-block: props.get(vars.$margin-bs) 0; + padding: 0; + margin-block: props.get(vars.$margin-bs) 0; margin-inline: 0; } dt { font-weight: bold; - color: props.get(core.$theme, --heading); + color: props.get(core.$theme, --heading); } dd { - margin-block: 0; + margin-block: 0; margin-inline: props.get(vars.$indent) 0; } - @include bem.modifier('compact') { + @include bem.modifier("compact") { ul, ol { padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss index e40f194..57fcc54 100644 --- a/src/scopes/_lists.vars.scss +++ b/src/scopes/_lists.vars.scss @@ -1,8 +1,11 @@ -@use 'pkg:iro-sass/src/props'; -@use '../core.vars' as core; -@use './implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "../core.vars" as core; +@use "./implicit.vars" as implicit; -$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; +$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; +$compact--indent: props.def( + --s-lists--compact--indent, + props.get(core.$list--compact-indent) +) !default; diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index cb3a10c..7442874 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -1,40 +1,40 @@ -@use 'sass:meta'; -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../props' as *; -@use '../objects/table.vars' as table; +@use "sass:meta"; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../props" as *; +@use "../objects/table.vars" as table; -@forward 'tables.vars'; -@use 'tables.vars' as vars; +@forward "tables.vars"; +@use "tables.vars" as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables("vars")); - @include bem.scope('tables') { + @include bem.scope("tables") { table { margin-block-start: props.get(vars.$margin-bs); - border-spacing: 0; - border-collapse: separate; + border-spacing: 0; + border-collapse: separate; } th { - padding-block: props.get(table.$pad-b); + padding-block: props.get(table.$pad-b); padding-inline: props.get(table.$pad-i); - font-family: props.get(table.$heading--font-family); - font-size: props.get(table.$heading--font-size); - font-weight: props.get(table.$heading--font-weight); - color: props.get(table.$heading-color); - text-align: start; + font-family: props.get(table.$heading--font-family); + font-size: props.get(table.$heading--font-size); + font-weight: props.get(table.$heading--font-weight); + color: props.get(table.$heading-color); + text-align: start; text-transform: props.get(table.$heading--text-transform); letter-spacing: props.get(table.$heading--letter-spacing); } td { - padding-block: props.get(table.$pad-b); - padding-inline: props.get(table.$pad-i); - border-color: props.get(table.$border-color); - border-style: solid; - border-width: 0; + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + border-color: props.get(table.$border-color); + border-style: solid; + border-width: 0; border-block-start-width: props.get(table.$border-width); } @@ -46,7 +46,7 @@ } } - @include bem.modifier('flush') { + @include bem.modifier("flush") { th, td { &:first-child { @@ -59,7 +59,7 @@ } } - @include bem.modifier('box') { + @include bem.modifier("box") { td { background-color: props.get(table.$box--bg-color); diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index dfb4c76..12d0a0c 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss @@ -1,4 +1,4 @@ -@use 'pkg:iro-sass/src/props'; -@use 'implicit.vars' as implicit; +@use "pkg:iro-sass/props"; +@use "implicit.vars" as implicit; $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss index 20e3bcd..2a88480 100644 --- a/src_demo/components/_box.scss +++ b/src_demo/components/_box.scss @@ -1,9 +1,9 @@ -@use 'pkg:iro-sass/src/bem'; -@use 'pkg:iro-sass/src/props'; -@use '../../src/core.vars'; +@use "pkg:iro-sass/bem"; +@use "pkg:iro-sass/props"; +@use "../../src/core.vars"; -@include bem.component('box') { - padding: 2em; - margin-block: 2em; - border: 1px solid props.get(core.$theme, --border); +@include bem.component("box") { + padding: 2em; + margin-block: 2em; + border: 1px solid props.get(core.$theme, --border); } diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss index acfccbe..acd32a5 100644 --- a/src_demo/components/_content.scss +++ b/src_demo/components/_content.scss @@ -1,6 +1,6 @@ -@use 'pkg:iro-sass/src/bem'; +@use "pkg:iro-sass/bem"; -@include bem.component('content') { - grid-area: content; - overflow: auto; +@include bem.component("content") { + grid-area: content; + overflow: auto; } diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss index 7643d07..4542847 100644 --- a/src_demo/components/_sidebar.scss +++ b/src_demo/components/_sidebar.scss @@ -1,7 +1,7 @@ -@use 'pkg:iro-sass/src/bem'; +@use "pkg:iro-sass/bem"; -@include bem.component('sidebar') { - grid-area: sidebar; - min-inline-size: 15em; - min-block-size: 0; +@include bem.component("sidebar") { + grid-area: sidebar; + min-inline-size: 15em; + min-block-size: 0; } diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss index 8d80995..7471cdb 100644 --- a/src_demo/components/_view.scss +++ b/src_demo/components/_view.scss @@ -1,9 +1,9 @@ -@use 'pkg:iro-sass/src/bem'; +@use "pkg:iro-sass/bem"; -@include bem.component('view') { - display: none; +@include bem.component("view") { + display: none; - &:target { - display: block; - } + &:target { + display: block; + } } -- cgit v1.3.1