From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src_old/objects/_action-button.scss | 343 ++++++++++++++++++++++++++++++++++++ 1 file changed, 343 insertions(+) create mode 100644 src_old/objects/_action-button.scss (limited to 'src_old/objects/_action-button.scss') diff --git a/src_old/objects/_action-button.scss b/src_old/objects/_action-button.scss new file mode 100644 index 0000000..7fe9d44 --- /dev/null +++ b/src_old/objects/_action-button.scss @@ -0,0 +1,343 @@ +@use 'sass:list'; +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +$sizes: 'sm' 'lg' 'xl' !default; +$static-themes: 'black' 'white' !default; + +@mixin static-theme($theme: ()) { + border-color: fn.color(list.join($theme, --disabled --border)); + background-color: fn.color(list.join($theme, --disabled --bg)); + color: fn.color(list.join($theme, --disabled --label)); + + &::after { + outline-color: fn.color(list.join($theme, --key-focus --border)); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); + } + + &:link, + &:visited, + &:enabled { + border-color: fn.color(list.join($theme, --border)); + background-color: fn.color(list.join($theme, --bg)); + color: fn.color(list.join($theme, --label)); + + &:hover, + &:focus-visible { + border-color: fn.color(list.join($theme, --hover --border)); + background-color: fn.color(list.join($theme, --hover --bg)); + color: fn.color(list.join($theme, --hover --label)); + } + + &:active { + border-color: fn.color(list.join($theme, --active --border)); + background-color: fn.color(list.join($theme, --active --bg)); + color: fn.color(list.join($theme, --active --label)); + } + } + + @include iro.bem-modifier('quiet') { + border-color: transparent; + background-color: transparent; + color: fn.color(list.join($theme, --quiet --disabled --label)); + + &:link, + &:visited, + &:enabled { + border-color: transparent; + background-color: transparent; + color: fn.color(list.join($theme, --quiet --label)); + + &:hover, + &:focus-visible { + border-color: transparent; + background-color: fn.color(list.join($theme, --quiet --hover --bg)); + color: fn.color(list.join($theme, --quiet --hover --label)); + } + + &:active { + border-color: transparent; + background-color: fn.color(list.join($theme, --quiet --active --bg)); + color: fn.color(list.join($theme, --quiet --active --label)); + } + } + } + + @include iro.bem-is('selected') { + border-color: fn.color(list.join($theme, --selected --disabled --border)); + background-color: fn.color(list.join($theme, --selected --disabled --bg)); + color: fn.color(list.join($theme, --selected --disabled --label)); + + &:link, + &:visited, + &:enabled { + border-color: fn.color(list.join($theme, --selected --border)); + background-color: fn.color(list.join($theme, --selected --bg)); + color: fn.color(list.join($theme, --selected --label)); + + &:hover, + &:focus-visible { + border-color: fn.color(list.join($theme, --selected --hover --border)); + background-color: fn.color(list.join($theme, --selected --hover --bg)); + color: fn.color(list.join($theme, --selected --hover --label)); + } + + &:active { + border-color: fn.color(list.join($theme, --selected --active --border)); + background-color: fn.color(list.join($theme, --selected --active --bg)); + color: fn.color(list.join($theme, --selected --active --label)); + } + } + } +} + +@include iro.props-namespace('action-button') { + @include iro.props-store(( + --dims: ( + --line-height: 1.4, + --pad-i: fn.global-dim(--size --150), + --pad-i-pill: fn.global-dim(--size --200), + --pad-b: fn.global-dim(--size --85), + --border: fn.global-dim(--border --thin), + --rounding: fn.global-dim(--rounding), + --font-size: fn.global-dim(--font-size --100), + + --sm: ( + --pad-i: fn.global-dim(--size --100), + --pad-i-pill: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --40), + --font-size: fn.global-dim(--font-size --75), + ), + --lg: ( + --pad-i: fn.global-dim(--size --175), + --pad-i-pill: fn.global-dim(--size --225), + --pad-b: fn.global-dim(--size --115), + --font-size: fn.global-dim(--font-size --150), + ), + --xl: ( + --pad-i: fn.global-dim(--size --225), + --pad-i-pill: fn.global-dim(--size --300), + --pad-b: fn.global-dim(--size --150), + --font-size: fn.global-dim(--font-size --200), + ), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + --border-offset: fn.global-dim(--key-focus --border-offset), + --outline: fn.global-dim(--key-focus --outline), + ), + ), + --colors: ( + --bg: fn.global-color(--base --75), + --label: fn.global-color(--text), + --border: fn.global-color(--border-strong), + + --hover: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + --border: fn.global-color(--text-mute-more), + ), + --active: ( + --bg: fn.global-color(--border), + --label: fn.global-color(--heading), + --border: fn.global-color(--text-mute), + ), + --disabled: ( + --bg: fn.global-color(--bg-l1), + --label: fn.global-color(--border-strong), + --border: fn.global-color(--border), + ), + --key-focus: ( + --border: fn.global-color(--focus --border), + --outline: fn.global-color(--focus --outline), + ), + + --selected: ( + --bg: fn.global-color(--text-mute), + --label: fn.global-color(--base --50), + --border: fn.global-color(--text-mute), + + --hover: ( + --bg: fn.global-color(--text), + --label: fn.global-color(--base --50), + --border: fn.global-color(--text), + ), + --active: ( + --bg: fn.global-color(--heading), + --label: fn.global-color(--base --50), + --border: fn.global-color(--heading), + ), + --disabled: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--border-strong), + --border: fn.global-color(--border-mute), + ), + ), + + --quiet: ( + --label: fn.global-color(--text), + + --hover: ( + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--heading), + ), + --active: ( + --bg: fn.global-color(--border), + --label: fn.global-color(--heading), + ), + --disabled: ( + --label: fn.global-color(--border-strong), + ), + ), + ), + )); + + @each $theme in $static-themes { + @include iro.props-store(( + --colors: ( + --static-#{$theme}: ( + --bg: fn.global-color(--#{$theme}-transparent --100), + --label: fn.global-color(--#{$theme}-transparent --900), + --border: fn.global-color(--#{$theme}-transparent --400), + + --hover: ( + --bg: fn.global-color(--#{$theme}-transparent --300), + --label: fn.global-color(--#{$theme}-transparent --900), + --border: fn.global-color(--#{$theme}-transparent --500), + ), + --active: ( + --bg: fn.global-color(--#{$theme}-transparent --400), + --label: fn.global-color(--#{$theme}-transparent --900), + --border: fn.global-color(--#{$theme}-transparent --600), + ), + --disabled: ( + --bg: fn.global-color(--#{$theme}-transparent --100), + --label: fn.global-color(--#{$theme}-transparent --500), + --border: fn.global-color(--#{$theme}-transparent --300), + ), + --key-focus: ( + --border: fn.global-color(--#{$theme}-transparent --900), + --outline: fn.global-color(--#{$theme}-transparent --300), + ), + + --selected: ( + --bg: fn.global-color(--#{$theme}-transparent --800), + --label: fn.global-color(--#{$theme}-transparent --text), + --border: fn.global-color(--#{$theme}-transparent --100), + + --hover: ( + --bg: fn.global-color(--#{$theme}-transparent --900), + --label: fn.global-color(--#{$theme}-transparent --text), + --border: fn.global-color(--#{$theme}-transparent --100), + ), + --active: ( + --bg: fn.global-color(--#{$theme}-transparent --900), + --label: fn.global-color(--#{$theme}-transparent --text), + --border: fn.global-color(--#{$theme}-transparent --100), + ), + --disabled: ( + --bg: fn.global-color(--#{$theme}-transparent --200), + --label: fn.global-color(--#{$theme}-transparent --500), + --border: fn.global-color(--#{$theme}-transparent --100), + ), + ), + + --quiet: ( + --label: fn.global-color(--#{$theme}-transparent --900), + + --hover: ( + --bg: fn.global-color(--#{$theme}-transparent --300), + --label: fn.global-color(--#{$theme}-transparent --900), + ), + --active: ( + --bg: fn.global-color(--#{$theme}-transparent --400), + --label: fn.global-color(--#{$theme}-transparent --900), + ), + --disabled: ( + --label: fn.global-color(--#{$theme}-transparent --500), + ), + ), + ), + ) + )); + } + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + position: relative; + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + border: fn.dim(--border) solid fn.color(--disabled --border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--disabled --bg); + color: fn.color(--disabled --label); + line-height: fn.dim(--line-height); + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + + &::after { + content: ''; + display: none; + position: absolute; + z-index: 1; + inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); + border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); + outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + pointer-events: none; + } + + &:link, + &:visited, + &:enabled { + &:focus-visible { + &::after { + display: block; + } + } + } + + @include static-theme; + + @each $theme in $static-themes { + @include iro.bem-modifier(static-#{$theme}) { + @include static-theme(--static-#{$theme}); + } + } + + @include iro.bem-modifier('pill') { + padding-inline: fn.dim(--pad-i-pill); + border-radius: 100em; + + &::after { + border-radius: 100em; + } + } + + @each $size in $sizes { + @include iro.bem-modifier($size) { + padding-block: fn.dim(--#{$size} --pad-b); + padding-inline: fn.dim(--#{$size} --pad-i); + font-size: fn.dim(--#{$size} --font-size); + + @include iro.bem-modifier('pill') { + padding-inline: fn.dim(--#{$size} --pad-i-pill); + } + } + } + + @include iro.bem-modifier('icon') { + inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); + padding-inline: 0; + + @each $size in $sizes { + @include iro.bem-modifier($size) { + inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b)); + padding-inline: 0; + } + } + } + } +} -- cgit v1.3.1