From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 13:00:59 +0200 Subject: Revert "Paths" This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226. --- src/_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 +- 91 files changed, 3635 insertions(+), 5589 deletions(-) (limited to 'src') diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index e9e978a..699cd8e 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss @@ -1,20 +1,21 @@ -@use "sass:list"; -@use "sass:map"; -@use "sass:math"; -@use "pkg:iro-sass/easing" as easing; +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'pkg:iro-sass/src/easing' as easing; $static-colors: ( --base: hsl(0, 0%, 98%), + --levels: ( - --100: math.div(0, 12) * 110 - 10, - --200: math.div(1, 12) * 110 - 10, - --300: math.div(2, 12) * 110 - 10, - --400: math.div(3, 12) * 110 - 10, - --500: math.div(4, 12) * 110 - 10, - --600: math.div(5, 12) * 110 - 10, - --700: math.div(6, 12) * 110 - 10, - --800: math.div(7, 12) * 110 - 10, - --900: math.div(8, 12) * 110 - 10, + --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, @@ -22,405 +23,175 @@ $static-colors: ( ), --palettes: ( - --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), + --blue: oklch(56% .14 275.25), + --purple: oklch(56% .14 305.58), + --red: oklch(56% .14 14.69), + --green: oklch(56% .14 150.48), + --yellow: oklch(56% .14 84.08), ), --transparents: ( --100: 0, - --200: 0.1, - --300: 0.25, - --400: 0.4, - --500: 0.55, - --600: 0.7, - --700: 0.8, - --800: 0.9, + --200: .1, + --300: .25, + --400: .4, + --500: .55, + --600: .7, + --700: .8, + --800: .9, --900: 1, ), ); $semantic-colors-common: ( - --accent: --blue, - --accent-static: --blue-static, - --positive: --green, + --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, + --warning: --yellow, + --warning-static: --yellow-static, + + --focus-raw: --accent, + --focus-static: --accent-static, + + --border-mute: --base --200, + --border: --base --300, + --border-strong: --base --400, - --focus-raw: --accent, - --focus-static: --accent-static, + --text-disabled: --base --500, + --text-mute-more: --base --600, + --text-mute: --base --700, + --text: --base --800, + --heading: --base --900, - --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, - ) - ( - 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)), - ), + --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))), ), --colors: ( - --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)), - ), + --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), + --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), + --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), + --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), + --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), + --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), + --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), + --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), + --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), + --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), + --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), + --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), + --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), ), ), --palettes: ( - --base: hsl(260, 70%, 98%) --grays, - --blue: oklch(56% 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, + --base: hsl(260, 70%, 98%) --grays, + --blue: oklch(56% .16 275.25) --colors, + --purple: oklch(56% .16 305.58) --colors, + --red: oklch(56% .16 14.69) --colors, + --green: oklch(56% .16 150.48) --colors, + --yellow: oklch(56% .16 84.08) --colors, ), - --semantic: map.merge( - $semantic-colors-common, - ( - --bg-l2: --base --50, - --bg-l1: --base --100, - --bg-base: --base --200, - --box: ( - --border: --base --200, - --border-strong: --base --300, - ), - ) + --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, 0.1), + --shadow: rgba(#000, .1), ), ); $theme-dark: ( --levels: ( --grays: ( - --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)), - ), + --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))), ), --colors: ( - --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)), - ), + --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))), + --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))), + --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))), + --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))), + --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))), + --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))), + --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))), + --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))), + --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))), + --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))), + --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))), + --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))), + --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))), ), ), --palettes: ( - --base: hsl(257, 7%, 20%) --grays, - --blue: oklch(56% 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, + --base: hsl(257, 7%, 20%) --grays, + --blue: oklch(56% .16 275.25) --colors, + --purple: oklch(56% .16 305.58) --colors, + --red: oklch(56% .16 14.69) --colors, + --green: oklch(56% .16 150.48) --colors, + --yellow: oklch(56% .16 84.08) --colors, ), - --semantic: map.merge( - $semantic-colors-common, - ( - --bg-base: --base --50, - --bg-l1: --base --75, - --bg-l2: --base --100, - --box: ( - --border: --base --100, - --border-strong: --base --100, - ), - ) + --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, 0.35), + --shadow: rgba(#000, .35), ), ); diff --git a/src/_config.scss b/src/_config.scss index 6ddef96..a3ea6ee 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -1,17 +1,14 @@ -@use "sass:list"; -@use "sass:map"; -@use "sass:math"; -@use "pkg:iro-sass/easing" as easing; -@use "config.defaults" as def; +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'pkg:iro-sass/src/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; @@ -20,15 +17,12 @@ $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 3427579..8c761ff 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/bem"; -@use "pkg:iro-sass/props"; -@use "config"; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 bef5f88..11acbfa 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/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; +@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; $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,105 +58,58 @@ $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; @@ -166,34 +119,20 @@ $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 )); } // @@ -203,64 +142,40 @@ $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 8fb0d98..e237ccc 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/easing"; -@use "apca"; +@use 'pkg:iro-sass/src/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,19 +32,17 @@ $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); } @@ -53,11 +51,7 @@ $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 2683ca9..0830375 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/bem"; -@use "pkg:iro-sass/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/src/bem'; +@use 'pkg:iro-sass/src/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 be13e60..f06a5ca 100644 --- a/src/_themes.scss +++ b/src/_themes.scss @@ -1,71 +1,71 @@ -@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 '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 "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 be2faab..dd8e8bb 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -1,27 +1,27 @@ -@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 '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 "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,195 +235,189 @@ $-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 c05b798..f2a6ff5 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -1,44 +1,39 @@ -@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 '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 "../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 { @@ -51,28 +46,19 @@ } @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)); } } } @@ -81,11 +67,7 @@ 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); @@ -93,20 +75,17 @@ &: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; @@ -116,11 +95,7 @@ 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); @@ -133,87 +108,84 @@ } } - @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 0.2s, - box-shadow 0.2s; + @include bem.modifier('interactive') { + transition: transform .2s, box-shadow .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); } } @@ -222,34 +194,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 ece68f3..fb89b52 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss @@ -1,116 +1,61 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "../objects/card" as card; +@use 'pkg:iro-sass/src/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 7b3dc3f..46ded23 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -1,37 +1,37 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 09ef165..094046f 100644 --- a/src/layouts/_container.vars.scss +++ b/src/layouts/_container.vars.scss @@ -1,36 +1,39 @@ -@use "pkg:iro-sass/functions" as fn; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/functions' as fn; +@use 'pkg:iro-sass/src/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 70d29f9..ea0b268 100644 --- a/src/layouts/_flex.scss +++ b/src/layouts/_flex.scss @@ -1,18 +1,18 @@ -@use "pkg:iro-sass/bem"; +@use 'pkg:iro-sass/src/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 f71e469..f094cbc 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -1,57 +1,57 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 68cb23a..52670cc 100644 --- a/src/layouts/_form.vars.scss +++ b/src/layouts/_form.vars.scss @@ -1,5 +1,5 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 00787db..32b3097 100644 --- a/src/layouts/_hlist.scss +++ b/src/layouts/_hlist.scss @@ -1,30 +1,30 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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(0.65 * props.get($size)); + content: '·'; + margin-inline: calc(.65 * props.get($size)); } } } @@ -32,51 +32,40 @@ } } - @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(0.65 * props.get(vars.$gap)); + content: '·'; + margin-inline: calc(.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) - 0.5em * - (props.get(button.$line-height) - 1) - ); + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); } - @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes - { - @include bem.modifier("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) - 0.5em * - (props.get(button.$line-height) - 1) - ); + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); } } } diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss index 557cfae..2d99057 100644 --- a/src/layouts/_hlist.vars.scss +++ b/src/layouts/_hlist.vars.scss @@ -1,16 +1,16 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 b6732bf..4492ea9 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss @@ -1,17 +1,17 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 f24ea2a..78e157f 100644 --- a/src/layouts/_media.vars.scss +++ b/src/layouts/_media.vars.scss @@ -1,16 +1,16 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 57e2512..ab983b9 100644 --- a/src/layouts/_overflow.scss +++ b/src/layouts/_overflow.scss @@ -1,10 +1,10 @@ -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 1bffddd..ea651c7 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss @@ -1,110 +1,101 @@ -@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 '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 *; -@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 9b6dd21..b2944e7 100644 --- a/src/layouts/_split-view.vars.scss +++ b/src/layouts/_split-view.vars.scss @@ -1,16 +1,13 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 3aeb781..c2a1c58 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -1,37 +1,44 @@ -@use "sass:map"; -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 aedd917..bbd3dad 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss @@ -1,50 +1,36 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 f805502..272c213 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -1,135 +1,118 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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(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 - ); + block-size: props.get($indicator-size); + + @include bem.sibling-elem('content') { + mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at + calc(100% - .5 * props.get($indicator-size)) + calc(100% - .5 * props.get($indicator-size)), + transparent 95%, + #fff); } } } @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object("avatar") { - position: relative; - display: inline-block; - font-style: normal; - vertical-align: 0.05em; - border-radius: props.get(vars.$rounding); + @include bem.object('avatar') { + position: relative; + display: inline-block; + font-style: normal; + vertical-align: .05em; + border-radius: props.get(vars.$rounding); &::after { - position: absolute; - inset: calc(-1 * props.get(vars.$key-focus--border-offset)); - z-index: 1; - display: none; + 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))); } } @@ -139,19 +122,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 7d1c342..467d7cc 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss @@ -1,102 +1,79 @@ -@use "sass:math"; +@use 'sass:math'; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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(0.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(.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(0.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(.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(0.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(.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(0.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(.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(0.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(.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(0.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(.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(0.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(.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 1a7d1fa..6660abf 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss @@ -1,23 +1,23 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 78f4742..9206117 100644 --- a/src/objects/_backdrop.vars.scss +++ b/src/objects/_backdrop.vars.scss @@ -1,10 +1,6 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 8adc0f7..a3c8187 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -1,119 +1,115 @@ -@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 *; +@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 *; -@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 { @@ -125,27 +121,32 @@ 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, @@ -153,67 +154,47 @@ &: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 0.1s, - background-color 0.1s, - border-color 0.1s, - box-shadow 0.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 .1s, background-color .1s, border-color .1s, box-shadow .1s; &::after { - position: absolute; - inset: calc( - -1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset) - ); - z-index: 1; - display: none; + 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, @@ -228,7 +209,7 @@ } } - @include bem.elem("label") { + @include bem.elem('label') { display: inline-block; margin-inline: props.get(vars.$pad-i-label); } @@ -241,91 +222,79 @@ } } - @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) - 0.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) - .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) - 0.5em * - (props.get(vars.$line-height) - 1) - ); + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); } } } diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index a137d6d..3f835ae 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -1,456 +1,386 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -$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), +$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, --bg-l1), - --label-color: props.get(core.$theme, --heading), + --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-mute), - --label-color: props.get(core.$theme, --heading), + --bg-color: props.get(core.$theme, --border-strong), + --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), + --quiet: ( + --label-color: props.get(core.$theme, --text), + + --hover: ( + --bg-color: props.get(core.$theme, --border-mute), + --label-color: props.get(core.$theme, --heading), ), - --key-focus: ( - --border-color: props.get(core.$theme, --focus, --border), - --outline-color: props.get(core.$theme, --focus, --outline), + --active: ( + --bg-color: props.get(core.$theme, --border), + --label-color: props.get(core.$theme, --heading), ), - --highlighted: ( - --border-color: props.get(core.$theme, --focus, --border), - --shadow-color: props.get(core.$theme, --focus, --outline), + --disabled: ( + --label-color: props.get(core.$theme, --border-strong), ), + ), +), $default-theme-override) !default; +$default-theme: props.def(--o-button, $default-theme, 'color'); + +$default-theme-dark-override: () !default; +$default-theme-dark: map.deep-merge(( + --bg-color: props.get(core.$theme, --border-mute), + --border-color: props.get(core.$theme, --border-mute), + + --hover: ( + --bg-color: props.get(core.$theme, --border), + --border-color: props.get(core.$theme, --border), + ), + + --active: ( + --bg-color: props.get(core.$theme, --border-strong), + --border-color: props.get(core.$theme, --border-strong), + ), + + --selected: ( + --border-color: props.get(core.$theme, --text), + ), +), $default-theme-override) !default; +$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); + +@each $theme in map.keys(props.get(core.$transparent-colors)) { + $button-theme: --static-#{string.slice($theme, 3)}; + + $themes: props.merge($themes, ( + $button-theme: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), + --shadow-color: props.get(core.$transparent-colors, --black, --200), - --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), + --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.$theme, --text-mute), - --label-color: props.get(core.$theme, --base, --50), - --border-color: props.get(core.$theme, --text-mute), + --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.$theme, --border-mute), - --label-color: props.get(core.$theme, --border-strong), - --border-color: props.get(core.$theme, --border-mute), + --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), ), - ), - --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), + --key-focus: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), ), - --active: ( - --bg-color: props.get(core.$theme, --border-strong), - --label-color: props.get(core.$theme, --heading), - --border-color: props.get(core.$theme, --border-strong), + --highlighted: ( + --border-color: props.get(core.$transparent-colors, $theme, --900), + --shadow-color: props.get(core.$transparent-colors, --black, --200), ), - ), - --quiet: ( - --label-color: props.get(core.$theme, --text), - --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --label-color: props.get(core.$theme, --heading), - ), + --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), - --active: ( - --bg-color: props.get(core.$theme, --border), - --label-color: props.get(core.$theme, --heading), - ), + --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), + ), - --disabled: ( - --label-color: props.get(core.$theme, --border-strong), + --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), + ), ), - ), - ), - $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), - ), + --badge: ( + --bg-color: props.get(core.$transparent-colors, $theme, --200), + --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), - ), + --hover: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), - --selected: ( - --border-color: props.get(core.$theme, --text), - ), - ), - $default-theme-override -) !default; -$default-theme-dark: props.def(--o-button, $default-theme-dark, "dark"); + --active: ( + --bg-color: props.get(core.$transparent-colors, $theme, --400), + --label-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: transparent, + ), + ), -@each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: --static-#{string.slice($theme, 3)}; + --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), + ), - $themes: props.merge( - $themes, - ( - $button-theme: ( - --bg-color: props.get(core.$transparent-colors, $theme, --200), + --active: ( + --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, --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 3275bc8..b8bc727 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -1,95 +1,84 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "avatar.vars" as avatar; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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 0.2s, - background-color 0.2s, - border-color 0.2s, - box-shadow 0.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 .2s, background-color .2s, border-color .2s, box-shadow .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 0.2s; + transition: transform .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); @@ -97,238 +86,207 @@ } } - @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 0.2s, - transform 0.2s, - opacity 0.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 .2s, transform .2s, opacity .2s; &:first-child { - border-start-start-radius: calc( - props.get(vars.$rounding) - props.get(vars.$border-width) - ); - border-start-end-radius: calc( - props.get(vars.$rounding) - props.get(vars.$border-width) - ); + 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(-0.7 * props.get(avatar.$size--xl)); + @include bem.next-elem('avatar') { + margin-block-start: calc(-.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: 0.75; - transform: translateY(props.get(vars.$hover--offset-b)); + opacity: .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 0.2s ease, - opacity 0.2s ease, - visibility 0s 0.2s linear; + border-color .2s ease, + opacity .2s ease, + visibility 0s .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 0.2s ease, - opacity 0.2s ease, - visibility 0.2s linear; + border-color .2s ease, + opacity .2s ease, + visibility .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 { @@ -337,38 +295,37 @@ } } - @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") { @@ -377,7 +334,7 @@ } &::details-content { - opacity: 0; + opacity: 0; block-size: 0; overflow-y: clip; transition: @@ -394,7 +351,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 96f3cb9..4616c80 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -1,130 +1,51 @@ -@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; +@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; $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 60cee65..f3fb793 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,140 +1,130 @@ -@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; +@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; -@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( - 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) - ); + margin-inline: + calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); + + @include bem.elem('box') { + position: relative; + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); + vertical-align: top; + background-color: props.get(vars.$box-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); &::before, &::after { position: absolute; - display: block; - content: ""; + 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 0.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 .2s ease; } &::after { - 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; + inset-block-start: calc(.5 * props.get(vars.$size) - 1px); + inset-inline-start: calc(1.5 * props.get(vars.$border-width)); + z-index: 3; + box-sizing: border-box; + inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); + block-size: 0; + border-color: props.get(vars.$box-bg-color); + border-style: solid; + border-radius: 2px; + transform: scale(0); + transition: transform .2s ease; + border-block-width: 0 2px; border-inline-width: 0 2px; } } - @include bem.elem("check-icon") { - position: absolute; - inset-block-start: calc(1 * props.get(vars.$border-width)); + @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 0.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 .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); } @@ -143,18 +133,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 { @@ -164,59 +154,58 @@ } &: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 { @@ -225,13 +214,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 8362aa7..278aac8 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss @@ -1,92 +1,32 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 f5584e6..d2ee8c3 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -1,29 +1,29 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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,40 +31,38 @@ } &[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( - 0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b) - ); + @include bem.next-elem('body') { + padding-block-start: calc(.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 8650e51..39c47ba 100644 --- a/src/objects/_dialog.vars.scss +++ b/src/objects/_dialog.vars.scss @@ -1,10 +1,10 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "../layouts/container.vars" as container; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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,9 +12,5 @@ $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 f082d12..d81284b 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/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; +@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; -@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 38224d4..a8b0f9f 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -1,153 +1,80 @@ -@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; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -$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; +$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; -$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; +$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; -$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; +$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; -$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; +$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; -$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; +$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; -$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; +$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; -$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; +$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; -$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; +$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; -$vertical--quiet--bg-color: props.def( - --o-divider--vertical--quiet--bg-color, - props.get(core.$theme, --border-mute), - "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; -$dot--quiet--bg-color: props.def( - --o-divider--dot--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; -$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 0257b32..655e662 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss @@ -1,55 +1,49 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "icon.vars" as icon; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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) - 0.5 * (props.get(vars.$size) - props.get(icon.$size)) - ); + @include bem.modifier('icon') { + margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); vertical-align: props.get(icon.$valign); } @each $mod, $size, $valign in vars.$sizes { @include bem.modifier($mod) { - inline-size: props.get($size); - block-size: props.get($size); + 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) - 0.5 * (props.get($size) - props.get(icon.$size)) - ); + @include bem.modifier('icon') { + margin: calc(-1 * props.get(vars.$pad) - .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 0.2s ease, - background-color 0.2s ease; + transition: transform .2s ease, background-color .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 1c2a0e2..cf940cf 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss @@ -1,26 +1,26 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; -$pad: props.def(--o-emoji--pad, 0.3em) !default; +$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; +$pad: props.def(--o-emoji--pad, .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, -0.25em) !default; +$zoom: props.def(--o-emoji--zoom, 3) !default; +$valign: props.def(--o-emoji--valign, -.25em) !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--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default; +$valign--125: props.def(--o-emoji--125--valign, -.45em) !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--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default; +$valign--150: props.def(--o-emoji--150--valign, -.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 fb664b4..23875f5 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,74 +1,74 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 4588e70..5bd4547 100644 --- a/src/objects/_field-label.vars.scss +++ b/src/objects/_field-label.vars.scss @@ -1,34 +1,12 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 d3e37b3..04b9bdf 100644 --- a/src/objects/_figure.scss +++ b/src/objects/_figure.scss @@ -1,25 +1,25 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 936932d..3de3406 100644 --- a/src/objects/_figure.vars.scss +++ b/src/objects/_figure.vars.scss @@ -1,17 +1,9 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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 87a6269..0e8392e 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,70 +1,64 @@ -@use "sass:map"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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)); } } } @@ -79,26 +73,18 @@ } } - @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 8943622..4267b8c 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -1,472 +1,208 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -$offset: props.def(--o-heading--offset, -0.02em) !default; -$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; +$offset: props.def(--o-heading--offset, -.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, 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; +$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; $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), + $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), - --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 - ), - ), - ), ), + --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), + ), + ), ) - ); + )); } diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 7baa3f8..1d046e0 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -1,24 +1,24 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 4fdbfae..2a37212 100644 --- a/src/objects/_icon.vars.scss +++ b/src/objects/_icon.vars.scss @@ -1,5 +1,5 @@ -@use "pkg:iro-sass/props"; +@use 'pkg:iro-sass/src/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, -0.18em) !default; +$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; +$valign: props.def(--o-icon--valign, -.18em) !default; diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 2b4abad..a173d57 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/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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,79 +50,80 @@ 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 0.2s ease, - margin-inline 0.2s ease; + transition: inline-size .2s ease, margin-inline .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 dc9a2a1..6fb84f7 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -1,80 +1,37 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; $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 c7fbc0e..dce14a8 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -1,82 +1,75 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "icon.vars" as icon; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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: 0.5px; + letter-spacing: .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 { @@ -84,25 +77,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 c168c30..9396117 100644 --- a/src/objects/_menu.vars.scss +++ b/src/objects/_menu.vars.scss @@ -1,74 +1,29 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 4b678e0..cc1eaaa 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -1,197 +1,151 @@ -@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 *; +@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 *; -@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)...); } } } @@ -201,64 +155,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(0.5 * props.get(vars.$spacing)); - font-weight: 500; + inline-size: 100%; + padding-inline: calc(.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; } @@ -266,7 +220,7 @@ } } - @include bem.is("selected") { + @include bem.is('selected') { font-weight: bold; } } @@ -279,21 +233,22 @@ } } - @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 b7d7e16..e96b714 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -1,242 +1,178 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; $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), +$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), + --hover: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --heading), - --label-color: props.get(core.$theme, --text), + --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.$theme, --border), - --text-color: props.get(core.$theme, --heading), + --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.$theme, --border-strong), + --bg-color: props.get(core.$theme, --border-mute), + --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), - ), - + --quiet: ( --selected: ( - --bg-color: props.get(core.$theme, --heading), - --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), + --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), + --text-color: props.get(core.$theme, --heading), ), --active: ( - --bg-color: props.get(core.$theme, --text-mute), - --text-color: props.get(core.$theme, --base, --50), - --label-color: props.get(core.$theme, --heading), + --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), - --label-color: props.get(core.$theme, --text-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), + + --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), + ), + + --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), + ), + + --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), ), - ), - --quiet: ( --selected: ( - --bg-color: props.get(core.$theme, --border-mute), - --text-color: props.get(core.$theme, --heading), + --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.$theme, --border), - --text-color: props.get(core.$theme, --heading), + --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.$theme, --border-strong), - --text-color: props.get(core.$theme, --heading), + --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.$theme, --border-mute), - --text-color: props.get(core.$theme, --border-strong), + --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), ), ), - ), - ), - $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)}; + --quiet: ( + --selected: ( + --bg-color: props.get(core.$transparent-colors, $theme, --300), + --text-color: props.get(core.$transparent-colors, $theme, --900), - $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, --300), - --text-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --800), - ), + --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, --400), - --text-color: props.get(core.$transparent-colors, $theme, --900), - --label-color: props.get(core.$transparent-colors, $theme, --900), - ), + --bg-color: props.get(core.$transparent-colors, $theme, --500), + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), --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), - ), - - --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 - ), - ), - ), - ), - ), + --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 88448e0..f503812 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -1,27 +1,21 @@ -@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; +@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; @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); @@ -32,19 +26,11 @@ } } - @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); @@ -56,21 +42,17 @@ } } - @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 d0af033..683f57e 100644 --- a/src/objects/_placeholders.scss +++ b/src/objects/_placeholders.scss @@ -1,22 +1,22 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 87e1657..1ac4ef7 100644 --- a/src/objects/_placeholders.vars.scss +++ b/src/objects/_placeholders.vars.scss @@ -1,6 +1,6 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/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, 0.5) !default; +$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; +$opacity: props.def(--o-placeholder--opacity, .5) !default; diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 90187c1..1cb5660 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss @@ -1,40 +1,44 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 df1072e..202d71a 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss @@ -1,28 +1,19 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 c964657..ae4a85a 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -1,100 +1,92 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; +@use '../core.vars' as core; -@forward "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( - 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; + 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; &::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 0.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 .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(0.44); + transform: scale(.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 { @@ -104,46 +96,45 @@ } &: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 { @@ -152,7 +143,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 e7a41a4..a5f249d 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss @@ -1,90 +1,33 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 ed0f3dc..272d38c 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss @@ -1,79 +1,76 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "icon.vars" as icon; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/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: 0.5px; + letter-spacing: .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 { @@ -81,14 +78,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 8abb0df..d6a7de1 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -1,72 +1,28 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 8885929..fe8fe26 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/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 66a11e8..dfe628f 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -1,32 +1,26 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../config"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 c1f7411..0ef95e6 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,79 +1,73 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; +@use '../core.vars' as core; -@forward "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( - 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; + margin-inline: + calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); + + @include bem.elem('indicator') { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$inline-size); + block-size: props.get(vars.$block-size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); + vertical-align: top; + background-color: props.get(vars.$track-bg-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; + transition: background-color .2s ease; &::after { - display: block; - inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); - content: ""; + 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 0.2s ease; + border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); + border-radius: props.get(vars.$inline-size); + transition: transform .2s ease; } } - @include bem.elem("label") { + @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); } @@ -81,23 +75,18 @@ } &: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) + 0.5px - ), - 0 - ); + transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .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 { @@ -108,21 +97,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 { @@ -133,33 +122,32 @@ } &: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 { @@ -169,7 +157,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 { @@ -180,12 +168,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 6f56ec7..761cacd 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss @@ -1,101 +1,36 @@ -@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; +@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; $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 02519f9..d43208f 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss @@ -1,77 +1,75 @@ -@use "sass:map"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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(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; + @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; &::before { - position: absolute; + position: absolute; inset-block-start: 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%); + inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); + z-index: -10; + block-size: 1.5em; + content: ''; + border-radius: props.get(vars.$rounding); + transform: translateY(-50%); } &::after { - position: absolute; - inset-block-end: 0; - inset-inline: calc(0.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(.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); } @@ -85,25 +83,21 @@ &: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(0.5 * props.get(vars.$spacing)); + margin-inline-start: calc(.5 * props.get(vars.$spacing)); } - @include bem.is("selected") { + @include bem.is('selected') { color: props.get(vars.$tab--selected--text-color); &::after { @@ -112,13 +106,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 d26f302..d9cc53e 100644 --- a/src/objects/_tabbar.vars.scss +++ b/src/objects/_tabbar.vars.scss @@ -1,66 +1,26 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; $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 a985f78..effa61f 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -1,57 +1,57 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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 e00010f..7c5683c 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss @@ -1,59 +1,25 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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, 0.5px) !default; +$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .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 a8d3ec8..5a48df3 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,91 +1,84 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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) - 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; + @include bem.elem('native') { + box-sizing: border-box; + inline-size: 100%; + padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); + padding-inline: props.get(vars.$pad-i); + font: inherit; + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); + appearance: none; + resize: none; background-color: transparent; - border: 1px solid transparent; + 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); } } @@ -93,11 +86,10 @@ &: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); } } @@ -112,49 +104,46 @@ } } - @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 { @@ -163,10 +152,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 { @@ -174,21 +163,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 9a2a16a..ef06822 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss @@ -1,108 +1,39 @@ -@use "sass:map"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'pkg:iro-sass/src/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 c7a9791..9925dd0 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss @@ -1,66 +1,65 @@ -@use "sass:map"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "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); } @@ -74,18 +73,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 737a626..a5625fc 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss @@ -1,85 +1,51 @@ -@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; +@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; $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 bc4fd39..10e6d81 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss @@ -1,27 +1,25 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "blockquotes.vars"; -@use "blockquotes.vars" as vars; +@forward 'blockquotes.vars'; +@use 'blockquotes.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope("blockquotes") { + @include bem.scope('blockquotes') { blockquote { padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); - margin-block: props.get(vars.$margin-bs) 0; - margin-inline: 1px 0; - border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); + margin-block: props.get(vars.$margin-bs) 0; + margin-inline: 1px 0; + border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); } - @include bem.modifier("compact") { + @include bem.modifier('compact') { blockquote { - padding-inline-start: calc( - props.get(vars.$compact--indent) - props.get(vars.$border-width) - ); + padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); } } } diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss index 117b4a6..63c40b0 100644 --- a/src/scopes/_blockquotes.vars.scss +++ b/src/scopes/_blockquotes.vars.scss @@ -1,24 +1,11 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "./implicit.vars" as implicit; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; +@use './implicit.vars' as implicit; -$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; -$margin-bs: props.def( - --s-blockquotes--margin-bs, - props.get(implicit.$paragraph--margin-bs) -) !default; -$border-width: props.def( - --s-blockquotes--border-width, - props.get(core.$border-width--thick) -) !default; +$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; +$margin-bs: props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; +$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default; -$compact--indent: props.def( - --s-blockquotes--compact--indent, - props.get(core.$list--compact-indent) -) !default; +$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default; -$border-color: props.def( - --s-blockquotes--border-color, - props.get(core.$theme, --border), - "color" -) !default; +$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default; diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss index 6c5ba63..77a3eb1 100644 --- a/src/scopes/_body.scss +++ b/src/scopes/_body.scss @@ -1,15 +1,15 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "body.vars"; -@use "body.vars" as vars; +@forward 'body.vars'; +@use 'body.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope("body") { + @include bem.scope('body') { font-size: props.get(vars.$font-size); line-height: props.get(vars.$line-height); @@ -30,11 +30,11 @@ } img { - display: block; - inline-size: auto; - max-inline-size: 100%; - block-size: auto; - max-block-size: props.get(vars.$img--max-block-size); + display: block; + inline-size: auto; + max-inline-size: 100%; + block-size: auto; + max-block-size: props.get(vars.$img--max-block-size); margin-block-start: props.get(vars.$paragraph--margin-bs); } diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss index 414e0c1..981ef32 100644 --- a/src/scopes/_body.vars.scss +++ b/src/scopes/_body.vars.scss @@ -1,25 +1,12 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -@use "../layouts/container.vars" as container; +@use '../layouts/container.vars' as container; -$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; -$line-height: props.def( - --s-body--line-height, - calc(props.get(core.$font--standard--line-height) + 0.1) -) !default; -$paragraph--margin-bs: props.def( - --s-body--paragraph--margin-bs, - props.get(core.$size--300) -) !default; -$paragraph--max-inline-size: props.def( - --s-body--paragraph--max-inline-size, - props.get(container.$fixed) -) !default; -$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; +$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default; +$line-height: props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default; +$paragraph--margin-bs: props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default; +$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default; +$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default; -$strong--text-color: props.def( - --s-body--strong--text-color, - props.get(core.$theme, --heading), - "color" -) !default; +$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default; diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index d931c22..db43de0 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -1,39 +1,39 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "code.vars"; -@use "code.vars" as vars; +@forward 'code.vars'; +@use 'code.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope("code") { + @include bem.scope('code') { code { - padding-block: props.get(vars.$inline--pad-b); - padding-inline: props.get(vars.$inline--pad-i); - color: props.get(vars.$inline--fg); + padding-block: props.get(vars.$inline--pad-b); + padding-inline: props.get(vars.$inline--pad-i); + color: props.get(vars.$inline--fg); background-color: props.get(vars.$inline--bg); - border-radius: props.get(vars.$inline--rounding); + border-radius: props.get(vars.$inline--rounding); } pre { - padding-block: props.get(vars.$block--pad-b); - padding-inline: props.get(vars.$block--pad-i); - margin-block: props.get(vars.$block--margin-bs) 0; - margin-inline: 0; - color: props.get(vars.$block--fg); + padding-block: props.get(vars.$block--pad-b); + padding-inline: props.get(vars.$block--pad-i); + margin-block: props.get(vars.$block--margin-bs) 0; + margin-inline: 0; + color: props.get(vars.$block--fg); background-color: props.get(vars.$block--bg); - border-radius: props.get(vars.$block--rounding); + border-radius: props.get(vars.$block--rounding); code { - display: inline-block; - padding: 0; + display: inline-block; + padding: 0; margin-inline-end: props.get(vars.$block--pad-i); - color: currentColor; - background-color: transparent; - border-radius: 0; + color: currentColor; + background-color: transparent; + border-radius: 0; } } } diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss index e22421c..329d372 100644 --- a/src/scopes/_code.vars.scss +++ b/src/scopes/_code.vars.scss @@ -1,25 +1,18 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "./implicit.vars" as implicit; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; +@use './implicit.vars' as implicit; -$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; -$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; +$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; +$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default; $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default; -$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; -$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; -$block--margin-bs: props.def( - --s-code--block--margin-bs, - props.get(implicit.$paragraph--margin-bs) -) !default; -$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; +$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default; +$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default; +$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; +$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default; -$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), "color") !default; -$inline--bg: props.def( - --s-code--inline--bg, - props.get(core.$theme, --base, --200), - "color" -) !default; +$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default; +$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default; -$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), "color") !default; -$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), "color") !default; +$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default; +$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default; diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss index 852ab5a..c993f5a 100644 --- a/src/scopes/_figures.scss +++ b/src/scopes/_figures.scss @@ -1,20 +1,20 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../objects/figure.vars" as figure; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../objects/figure.vars' as figure; @mixin styles { - @include bem.scope("figures") { + @include bem.scope('figures') { figcaption { - padding-block: props.get(figure.$pad-b); - font-size: props.get(figure.$font-size); - color: props.get(figure.$text-color); + padding-block: props.get(figure.$pad-b); + font-size: props.get(figure.$font-size); + color: props.get(figure.$text-color); border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); &::before { - display: block; - margin-block: -100em 100em; - content: ""; + display: block; + margin-block: -100em 100em; + content: ''; } } } diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index a6a7bbb..23623fd 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -1,8 +1,8 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../objects/heading.vars" as heading; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../objects/heading.vars' as heading; @mixin styles { /* stylelint-disable-next-line scss/dollar-variable-pattern */ @@ -15,62 +15,56 @@ xxl: h1, ); - @include bem.scope("headings") { + @include bem.scope('headings') { h1, h2, h3, h4, h5, h6 { - display: block; - margin-block-start: props.get(heading.$margin-bs); - font-family: props.get(heading.$font-family); - font-weight: props.get(heading.$font-weight); + display: block; + margin-block-start: props.get(heading.$margin-bs); + font-family: props.get(heading.$font-family); + font-weight: props.get(heading.$font-weight); font-feature-settings: props.get(heading.$feature-settings); - line-height: props.get(heading.$line-height); - text-transform: props.get(heading.$text-transform); - letter-spacing: normal; - transform: translateX(props.get(heading.$offset)); + line-height: props.get(heading.$line-height); + text-transform: props.get(heading.$text-transform); + letter-spacing: normal; + transform: translateX(props.get(heading.$offset)); } - @include bem.elem("highlight") { - background-image: linear-gradient( - to top, - transparent 0.15em, - props.get(heading.$bg-color) 0.15em, - props.get(heading.$bg-color) 0.6em, - transparent 0.6em - ); + @include bem.elem('highlight') { + background-image: linear-gradient(to top, + transparent .15em, + props.get(heading.$bg-color) .15em, + props.get(heading.$bg-color) .6em, + transparent .6em); } - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, - $feature-settings, $text-transform, $text-color in heading.$sizes - { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes { #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } - @include bem.modifier("display") { - @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, - $feature-settings, $text-transform, $text-color in heading.$display--sizes - { + @include bem.modifier('display') { + @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes { #{map.get($-size-map, $mod)} { - font-family: props.get($font-family); - font-size: props.get($font-size); - font-weight: props.get($font-weight); + font-family: props.get($font-family); + font-size: props.get($font-size); + font-weight: props.get($font-weight); font-feature-settings: props.get($feature-settings); - line-height: props.get($line-height); - color: props.get($text-color); - text-transform: props.get($text-transform); - letter-spacing: props.get($letter-spacing); + line-height: props.get($line-height); + color: props.get($text-color); + text-transform: props.get($text-transform); + letter-spacing: props.get($letter-spacing); } } } @@ -85,16 +79,10 @@ } } - @include bem.modifier("display") { + @include bem.modifier('display') { @each $mod, $value in heading.$sizes { #{map.get($-size-map, $mod)} { - color: props.get( - heading.$static-themes, - $theme, - --display, - --#{$mod}, - --text-color - ); + color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color); } } } diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index f8c575d..728fd22 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -1,21 +1,21 @@ -@use "sass:map"; -@use "sass:math"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; - -@forward "implicit.vars"; -@use "implicit.vars" as vars; +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; +@use '../core.vars' as core; + +@forward 'implicit.vars'; +@use 'implicit.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); @layer scope { html { - accent-color: props.get(core.$theme, --accent, --600); + accent-color: props.get(core.$theme, --accent, --600); scrollbar-color: props.get(core.$theme, --text-disabled) transparent; &:has(dialog[open]), @@ -26,31 +26,31 @@ } body { - padding: 0; - margin: 0; - font-family: props.get(vars.$body--font-family); - font-size: props.get(vars.$body--font-size); + padding: 0; + margin: 0; + font-family: props.get(vars.$body--font-family); + font-size: props.get(vars.$body--font-size); font-feature-settings: props.get(vars.$body--feature-settings); - line-height: props.get(vars.$body--line-height); - color: props.get(core.$theme, --text); - background-color: props.get(core.$theme, --bg-base); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); } pre, code { - font-family: props.get(vars.$code--font-family); - font-size: props.get(vars.$code--font-size); + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); font-feature-settings: props.get(vars.$code--feature-settings); - line-height: props.get(vars.$code--line-height); + line-height: props.get(vars.$code--line-height); } pre { - margin: 0; + margin: 0; overflow-x: auto; code { font-size: 1em; - color: currentColor; + color: currentColor; } } @@ -60,13 +60,13 @@ h4, h5, h6 { - margin-block: props.get(vars.$heading--margin-bs) 0; - font-family: props.get(vars.$heading--font-family); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); + margin-block: props.get(vars.$heading--margin-bs) 0; + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); font-feature-settings: props.get(vars.$heading--feature-settings); - line-height: props.get(vars.$heading--line-height); - color: props.get(vars.$heading--color); + line-height: props.get(vars.$heading--line-height); + color: props.get(vars.$heading--color); & + & { margin-block-start: props.get(vars.$heading--margin-bs-sibling); @@ -91,14 +91,14 @@ ul, ol { - padding: 0; - margin: 0; + padding: 0; + margin: 0; list-style: none; } li { padding: 0; - margin: 0; + margin: 0; } :focus, @@ -108,27 +108,28 @@ :link, :visited { - color: currentColor; + color: currentColor; text-decoration: none; } + button, input, textarea { - box-sizing: content-box; - padding: 0; - margin: 0; - font-family: inherit; - font-size: 1em; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - color: currentColor; - text-align: inherit; + box-sizing: content-box; + padding: 0; + margin: 0; + font-family: inherit; + font-size: 1em; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + color: currentColor; + text-align: inherit; text-transform: inherit; - appearance: none; - background: none; - border: 0; + appearance: none; + background: none; + border: 0; &::-moz-focus-inner { border: 0; @@ -138,7 +139,7 @@ input, textarea { &::placeholder { - color: props.get(core.$theme, --text-mute); + color: props.get(core.$theme, --text-mute); opacity: 1; } @@ -152,15 +153,15 @@ } hr { - block-size: props.get(core.$border-width--thin); - margin: 0; + block-size: props.get(core.$border-width--thin); + margin: 0; background-color: props.get(core.$theme, --border); - border: 0; + border: 0; } figure { padding: 0; - margin: 0; + margin: 0; } @each $theme in map.keys(props.get(core.$transparent-colors)) { diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss index f0256b0..64d4a8f 100644 --- a/src/scopes/_implicit.vars.scss +++ b/src/scopes/_implicit.vars.scss @@ -1,69 +1,26 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -$paragraph--margin-bs: props.def( - --s-implicit--paragraph--margin-bs, - props.get(core.$size--200) -) !default; +$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default; -$small--font-size: props.def( - --s-implicit--small--font-size, - props.get(core.$font-size--75) -) !default; +$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default; -$body--font-family: props.def( - --s-implicit--body--font-family, - props.get(core.$font--standard--family) -) !default; -$body--line-height: props.def( - --s-implicit--body--line-height, - props.get(core.$font--standard--line-height) -) !default; -$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); -$body--feature-settings: props.def( - --s-implicit--body--feature-settings, - props.get(core.$font--standard--feature-settings) -) !default; +$body--font-family: props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default; +$body--line-height: props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default; +$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100)); +$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$code--font-family: props.def( - --s-implicit--code--font-family, - props.get(core.$font--mono--family) -) !default; -$code--line-height: props.def( - --s-implicit--code--line-height, - props.get(core.$font--mono--line-height) -) !default; -$code--font-size: props.def(--s-implicit--code--font-size, 0.93em); -$code--feature-settings: props.def( - --s-implicit--code--feature-settings, - props.get(core.$font--mono--feature-settings) -) !default; +$code--font-family: props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default; +$code--line-height: props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default; +$code--font-size: props.def(--s-implicit--code--font-size, .93em); +$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default; -$heading--margin-bs: props.def( - --s-implicit--heading--margin-bs, - props.get(core.$size--700) -) !default; -$heading--margin-bs-sibling: props.def( - --s-implicit--heading--margin-bs-sibling, - props.get(core.$size--325) -) !default; -$heading--font-family: props.def( - --s-implicit--heading--font-family, - props.get(core.$font--standard--family) -) !default; -$heading--line-height: props.def( - --s-implicit--heading--line-height, - props.get(core.$font--standard--line-height) -) !default; -$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default; -$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); -$heading--feature-settings: props.def( - --s-implicit--heading--feature-settings, - props.get(core.$font--standard--feature-settings) -) !default; +$heading--margin-bs: props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default; +$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default; +$heading--font-family: props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default; +$heading--line-height: props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default; +$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default; +$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100)); +$heading--feature-settings: props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; -$heading--color: props.def( - --s-implicit--heading--color, - props.get(core.$theme, --heading), - "color" -) !default; +$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default; diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index fea78f1..8498487 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -1,79 +1,78 @@ -@use "sass:map"; -@use "sass:meta"; -@use "sass:string"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; +@use 'sass:map'; +@use 'sass:meta'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; -@forward "links.vars"; -@use "links.vars" as vars; +@forward 'links.vars'; +@use 'links.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope("links") { + @include bem.scope('links') { :link, :visited { - color: currentColor; - text-decoration: underline; + color: currentColor; + text-decoration: underline; text-decoration-thickness: props.get(vars.$underline-width); - text-decoration-color: props.get(vars.$underline-color); - border-radius: props.get(vars.$rounding-sm); - box-decoration-break: clone; + text-decoration-color: props.get(vars.$underline-color); + border-radius: props.get(vars.$rounding-sm); + box-decoration-break: clone; &:hover { - text-decoration: underline; + text-decoration: underline; text-decoration-thickness: props.get(vars.$hover--underline-width); - text-decoration-skip-ink: none; + text-decoration-skip-ink: none; } &:focus-visible { - color: props.get(vars.$key-focus--text-color); + color: props.get(vars.$key-focus--text-color); text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid - props.get(vars.$key-focus--border-width); - box-shadow: 0 0 0 - calc( - props.get(vars.$key-focus--border-width) + - props.get(vars.$key-focus--outline-width) - ) + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) props.get(vars.$key-focus--outline-color); } } - @include bem.modifier("invisible") { + @include bem.modifier('invisible') { :link, :visited { text-decoration: none; } } - @include bem.modifier("colored") { + @include bem.modifier('colored') { :link { - color: props.get(vars.$colored--text-color); + color: props.get(vars.$colored--text-color); text-decoration-color: props.get(vars.$colored--underline-color); &:hover { - color: props.get(vars.$colored--hover--text-color); + color: props.get(vars.$colored--hover--text-color); } } :visited { - color: props.get(vars.$colored--visited--text-color); + color: props.get(vars.$colored--visited--text-color); text-decoration-color: props.get(vars.$colored--visited--underline-color); &:hover { - color: props.get(vars.$colored--visited--hover--text-color); + color: props.get(vars.$colored--visited--hover--text-color); } } } - @include bem.modifier("mark-external") { + @include bem.modifier('mark-external') { :link, :visited { - &[href^="http"] { + &[href^='http'] { &::after { - content: " ↗"; + content: ' ↗'; } } } @@ -83,30 +82,21 @@ @include bem.modifier(string.slice($theme, 3)) { :link, :visited { - color: props.get(vars.$static-themes, $theme, --text-color); - text-decoration-color: props.get( - vars.$static-themes, - $theme, - --underline-color - ); + color: props.get(vars.$static-themes, $theme, --text-color); + text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); &:hover { - color: props.get(vars.$static-themes, $theme, --hover, --text-color); + color: props.get(vars.$static-themes, $theme, --hover, --text-color); } &:focus-visible { - color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); - outline-color: props.get( - vars.$static-themes, - $theme, - --key-focus, - --border-color - ); - box-shadow: 0 0 0 - calc( - props.get(vars.$key-focus--border-width) + - props.get(vars.$key-focus--outline-width) - ) + color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); + outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) props.get(vars.$static-themes, $theme, --key-focus, --outline-color); } } @@ -116,26 +106,21 @@ :has(img) { img { margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc( - props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - ); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); } &:link, &:visited { &:focus-visible { - outline: none; + outline: none; box-shadow: none; img { outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 0 0 - calc( - props.get(vars.$key-focus--border-width) + - props.get(vars.$key-focus--outline-width) - ) + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) props.get(vars.$key-focus--outline-color); } } diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss index c06789b..cd80e4c 100644 --- a/src/scopes/_links.vars.scss +++ b/src/scopes/_links.vars.scss @@ -1,106 +1,49 @@ -@use "sass:map"; -@use "sass:string"; -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; +@use 'sass:map'; +@use 'sass:string'; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; -$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; -$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; -$underline-width: props.def( - --s-links--underline-width, - props.get(core.$border-width--thin) -) !default; -$hover--underline-width: props.def( - --s-links--hover--underline-width, - props.get(core.$border-width--medium) -) !default; +$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; +$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; +$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; +$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; -$key-focus--border-width: props.def( - --s-links--key-focus--border-width, - props.get(core.$key-focus--border-width) -) !default; -$key-focus--border-offset: props.def( - --s-links--key-focus--border-offset, - props.get(core.$key-focus--border-offset) -) !default; -$key-focus--outline-width: props.def( - --s-links--key-focus--outline-width, - props.get(core.$key-focus--outline-width) -) !default; +$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; -$underline-color: props.def( - --s-links--underline-color, - props.get(core.$theme, --text-mute-more), - "color" -) !default; +$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; -$colored--text-color: props.def( - --s-links--colored--text-color, - props.get(core.$theme, --accent, --1100), - "color" -) !default; -$colored--underline-color: props.def( - --s-links--colored--underline-color, - props.get(core.$theme, --accent, --600), - "color" -) !default; -$colored--hover--text-color: props.def( - --s-links--colored--hover--text-color, - props.get(core.$theme, --accent, --1300), - "color" -) !default; +$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; +$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; +$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; -$colored--visited--text-color: props.def( - --s-links--colored--visited--text-color, - props.get(core.$theme, --purple, --1100), - "color" -) !default; -$colored--visited--underline-color: props.def( - --s-links--colored--visited--underline-color, - props.get(core.$theme, --purple, --600), - "color" -) !default; -$colored--visited--hover--text-color: props.def( - --s-links--colored--visited--hover--text-color, - props.get(core.$theme, --purple, --1300), - "color" -) !default; +$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; +$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; +$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; -$key-focus--text-color: props.def( - --s-links--key-focus--text-color, - props.get(core.$theme, --focus, --text), - "color" -) !default; -$key-focus--border-color: props.def( - --s-links--key-focus--border-color, - props.get(core.$theme, --focus, --border), - "color" -) !default; -$key-focus--outline-color: props.def( - --s-links--key-focus--outline-color, - props.get(core.$theme, --focus, --outline), - "color" -) !default; +$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; +$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; +$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; -$static-themes: props.def(--s-links, (), "color"); +$static-themes: props.def(--s-links, (), 'color'); @each $theme in map.keys(props.get(core.$transparent-colors)) { $link-theme: --static-#{string.slice($theme, 3)}; - $static-themes: props.merge( - $static-themes, - ( - $link-theme: ( - --text-color: currentColor, - --underline-color: props.get(core.$transparent-colors, $theme, --500), - --hover: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - ), + $static-themes: props.merge($static-themes, ( + $link-theme: ( + --text-color: currentColor, + --underline-color: props.get(core.$transparent-colors, $theme, --500), - --key-focus: ( - --text-color: props.get(core.$transparent-colors, $theme, --900), - --border-color: props.get(core.$transparent-colors, $theme, --900), - --outline-color: props.get(core.$transparent-colors, $theme, --300), - ), - ), + --hover: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + ), + + --key-focus: ( + --text-color: props.get(core.$transparent-colors, $theme, --900), + --border-color: props.get(core.$transparent-colors, $theme, --900), + --outline-color: props.get(core.$transparent-colors, $theme, --300), + ), ) - ); + )); } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss index 7b9ddbc..0285bb0 100644 --- a/src/scopes/_lists.scss +++ b/src/scopes/_lists.scss @@ -1,20 +1,20 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; +@use '../core.vars' as core; -@forward "lists.vars"; -@use "lists.vars" as vars; +@forward 'lists.vars'; +@use 'lists.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope("lists") { + @include bem.scope('lists') { ul, ol { padding-inline-start: props.get(vars.$indent); - margin-block-start: props.get(vars.$margin-bs); + margin-block-start: props.get(vars.$margin-bs); ul, ol { @@ -31,22 +31,22 @@ } dl { - padding: 0; - margin-block: props.get(vars.$margin-bs) 0; + padding: 0; + margin-block: props.get(vars.$margin-bs) 0; margin-inline: 0; } dt { font-weight: bold; - color: props.get(core.$theme, --heading); + color: props.get(core.$theme, --heading); } dd { - margin-block: 0; + margin-block: 0; margin-inline: props.get(vars.$indent) 0; } - @include bem.modifier("compact") { + @include bem.modifier('compact') { ul, ol { padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss index 57fcc54..e40f194 100644 --- a/src/scopes/_lists.vars.scss +++ b/src/scopes/_lists.vars.scss @@ -1,11 +1,8 @@ -@use "pkg:iro-sass/props"; -@use "../core.vars" as core; -@use "./implicit.vars" as implicit; +@use 'pkg:iro-sass/src/props'; +@use '../core.vars' as core; +@use './implicit.vars' as implicit; -$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; +$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -$compact--indent: props.def( - --s-lists--compact--indent, - props.get(core.$list--compact-indent) -) !default; +$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default; diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss index 7442874..cb3a10c 100644 --- a/src/scopes/_tables.scss +++ b/src/scopes/_tables.scss @@ -1,40 +1,40 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../objects/table.vars" as table; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; +@use '../objects/table.vars' as table; -@forward "tables.vars"; -@use "tables.vars" as vars; +@forward 'tables.vars'; +@use 'tables.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables("vars")); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.scope("tables") { + @include bem.scope('tables') { table { margin-block-start: props.get(vars.$margin-bs); - border-spacing: 0; - border-collapse: separate; + border-spacing: 0; + border-collapse: separate; } th { - padding-block: props.get(table.$pad-b); + padding-block: props.get(table.$pad-b); padding-inline: props.get(table.$pad-i); - font-family: props.get(table.$heading--font-family); - font-size: props.get(table.$heading--font-size); - font-weight: props.get(table.$heading--font-weight); - color: props.get(table.$heading-color); - text-align: start; + font-family: props.get(table.$heading--font-family); + font-size: props.get(table.$heading--font-size); + font-weight: props.get(table.$heading--font-weight); + color: props.get(table.$heading-color); + text-align: start; text-transform: props.get(table.$heading--text-transform); letter-spacing: props.get(table.$heading--letter-spacing); } td { - padding-block: props.get(table.$pad-b); - padding-inline: props.get(table.$pad-i); - border-color: props.get(table.$border-color); - border-style: solid; - border-width: 0; + padding-block: props.get(table.$pad-b); + padding-inline: props.get(table.$pad-i); + border-color: props.get(table.$border-color); + border-style: solid; + border-width: 0; border-block-start-width: props.get(table.$border-width); } @@ -46,7 +46,7 @@ } } - @include bem.modifier("flush") { + @include bem.modifier('flush') { th, td { &:first-child { @@ -59,7 +59,7 @@ } } - @include bem.modifier("box") { + @include bem.modifier('box') { td { background-color: props.get(table.$box--bg-color); diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss index 12d0a0c..dfb4c76 100644 --- a/src/scopes/_tables.vars.scss +++ b/src/scopes/_tables.vars.scss @@ -1,4 +1,4 @@ -@use "pkg:iro-sass/props"; -@use "implicit.vars" as implicit; +@use 'pkg:iro-sass/src/props'; +@use 'implicit.vars' as implicit; $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default; -- cgit v1.3.1