From 64a841c69ead262666dd0754218585d0f05cf735 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 23 Jun 2024 19:05:33 +0200 Subject: WIP: New color calculations --- src/objects/_radio.scss | 197 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 src/objects/_radio.scss (limited to 'src/objects/_radio.scss') diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss new file mode 100644 index 0000000..5f461ce --- /dev/null +++ b/src/objects/_radio.scss @@ -0,0 +1,197 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('radio') { + @include iro.props-store(( + --dims: ( + --diameter: fn.global-dim(--size --200), + --label-gap: fn.global-dim(--size --125), + --border: fn.global-dim(--border --medium), + --pad-i: fn.global-dim(--size --65), + --pad-b: fn.global-dim(--size --65), + --rounding: fn.global-dim(--rounding), + --spacing-sibling: fn.global-dim(--size --300), + ), + --colors: ( + --circle-border: fn.global-color(--text-mute), + --circle-bg: fn.global-color(--base --75), + + --hover: ( + --label: fn.global-color(--heading), + --circle-border: fn.global-color(--text), + ), + --accent: ( + --circle-border: fn.global-color(--accent --900), + + --hover: ( + --circle-border: fn.global-color(--accent --1000), + ), + ), + --key-focus: ( + --bg: fn.global-color(--focus-static --400), + --label: fn.global-color(--focus-static --400-text), + --circle-border: fn.global-color(--focus-static --1000), + --circle-bg: fn.global-color(--focus-static --1000-text), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + --circle-border: fn.global-color(--border-strong), + --circle-bg: fn.global-color(--base --75), + ) + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-flex; + position: relative; + align-items: flex-start; + margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i)); + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + + @include iro.bem-elem('bg') { + display: block; + position: absolute; + z-index: -1; + inset-block: 0; + inset-inline: 0; + border-radius: fn.dim(--rounding); + pointer-events: none; + } + + @include iro.bem-elem('circle') { + display: block; + box-sizing: border-box; + flex: 0 0 auto; + inline-size: fn.dim(--diameter); + block-size: fn.dim(--diameter); + margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter))); + border-radius: 2em; + background-color: fn.color(--circle-border); + + &::after { + content: ''; + display: block; + position: relative; + inset-block-start: fn.dim(--border); + inset-inline-start: fn.dim(--border); + inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); + block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); + transition: transform .2s ease; + border-radius: fn.dim(--diameter); + background-color: fn.color(--circle-bg); + } + } + + @include iro.bem-elem('label') { + align-self: baseline; + margin-inline-start: fn.dim(--label-gap); + } + + @include iro.bem-elem('native') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; + margin: 0; + padding: 0; + overflow: hidden; + opacity: .0001; + + &:hover { + @include iro.bem-sibling-elem('label') { + color: fn.color(--hover --label); + } + + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--hover --circle-border); + } + } + + &:checked { + @include iro.bem-sibling-elem('circle') { + &::after { + transform: scale(.44); + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('label') { + color: fn.color(--disabled --label); + } + + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--disabled --circle-border); + + &::after { + background-color: fn.color(--disabled --circle-bg); + } + } + } + + &:focus-visible { + @include iro.bem-sibling-elem('bg') { + background-color: fn.color(--key-focus --bg); + } + + @include iro.bem-sibling-elem('label') { + color: fn.color(--key-focus --label); + } + + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--key-focus --circle-border); + + &::after { + background-color: fn.color(--key-focus --circle-bg); + } + } + } + } + + @include iro.bem-modifier('standalone') { + @include iro.bem-elem('circle') { + margin-block-start: 0; + } + } + + @include iro.bem-modifier('accent') { + @include iro.bem-elem('native') { + &:checked { + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--accent --circle-border); + } + + &:hover { + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--accent --hover --circle-border); + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--disabled --circle-border); + + &::after { + background-color: fn.color(--disabled --circle-bg); + } + } + + &:checked { + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--disabled --circle-border); + } + } + } + + &:focus-visible { + @include iro.bem-sibling-elem('circle') { + background-color: fn.color(--key-focus --circle-border); + } + } + } + } + } +} -- cgit v1.2.3-70-g09d2