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/.old/objects/_checkbox.scss | 249 ------------------------------------ src/.old/objects/_radio.scss | 176 -------------------------- src/_config.scss | 62 ++++----- src/_declare-vars.scss | 8 +- src/_functions.scss | 82 ++++++++++-- src/_objects.scss | 4 +- src/functions/_colors.scss | 159 +++++++++++++++++++++++ src/objects/_badge.scss | 32 ++--- src/objects/_button.scss | 74 ++++++----- src/objects/_checkbox.scss | 271 ++++++++++++++++++++++++++++++++++++++++ src/objects/_radio.scss | 197 +++++++++++++++++++++++++++++ src/objects/_text-field.scss | 11 +- src/scopes/_links.scss | 9 +- 13 files changed, 812 insertions(+), 522 deletions(-) delete mode 100644 src/.old/objects/_checkbox.scss delete mode 100644 src/.old/objects/_radio.scss create mode 100644 src/functions/_colors.scss create mode 100644 src/objects/_checkbox.scss create mode 100644 src/objects/_radio.scss (limited to 'src') diff --git a/src/.old/objects/_checkbox.scss b/src/.old/objects/_checkbox.scss deleted file mode 100644 index b3bb34d..0000000 --- a/src/.old/objects/_checkbox.scss +++ /dev/null @@ -1,249 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('checkbox') { - @include iro.props-store(( - --dims: ( - --size: fn.global-dim(--size --175), - --label-gap: fn.global-dim(--size --125), - --border: fn.global-dim(--border --medium), - --pad-x: fn.global-dim(--size --65), - --pad-y: fn.global-dim(--size --65), - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --box-border: fn.global-color(--fg-hi), - --box-bg: fn.global-color(--bg-hi), - - --hover: ( - --label: fn.global-color(--fg-lo), - --box-border: fn.global-color(--fg), - ), - --accent: ( - --box-border: fn.global-color(--accent --primary --solid --bg), - - --hover: ( - --box-border: fn.global-color(--accent --primary --solid --obj), - ), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --box-border: fn.global-color(--focus --fill), - --shadow: fn.global-color(--focus --shadow), - ), - --disabled: ( - --label: fn.global-color(--fg-hi3), - --box-border: fn.global-color(--obj-lo), - --box-bg: fn.global-color(--bg-hi), - ) - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline-flex; - position: relative; - align-items: flex-start; - margin-right: calc(-1 * fn.dim(--pad-x)); - margin-left: calc(-1 * fn.dim(--pad-x)); - padding: fn.dim(--pad-y) fn.dim(--pad-x); - - @include iro.bem-elem('box') { - display: block; - position: relative; - flex: 0 0 auto; - width: fn.dim(--size); - height: fn.dim(--size); - margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); - border-radius: fn.dim(--border); - background-color: fn.color(--box-border); - - &::before, - &::after { - content: ''; - display: block; - position: absolute; - } - - &::before { - z-index: 2; - top: fn.dim(--border); - left: fn.dim(--border); - width: calc(fn.dim(--size) - 2 * fn.dim(--border)); - height: calc(fn.dim(--size) - 2 * fn.dim(--border)); - transition: transform .2s ease; - background-color: fn.color(--box-bg); - } - - &::after { - z-index: 3; - top: calc(.5 * fn.dim(--size) - 1px); - left: calc(1.5 * fn.dim(--border)); - box-sizing: border-box; - width: calc(fn.dim(--size) - 3 * fn.dim(--border)); - height: 0; - transform: scale(0); - transition: transform .2s ease; - border-width: 0 2px 2px 0; - border-style: solid; - border-radius: 2px; - border-color: fn.color(--box-bg); - } - } - - @include iro.bem-elem('check-icon') { - display: block; - position: absolute; - z-index: 2; - top: calc(1 * fn.dim(--border)); - left: calc(1 * fn.dim(--border)); - width: calc(100% - 2 * fn.dim(--border)); - height: calc(100% - 2 * fn.dim(--border)); - margin: 0; - transform: scale(0); - transform-origin: 40% 90%; - transition: transform .2s ease; - stroke-width: iro.fn-px-to-rem(3px); - color: fn.color(--box-bg); - } - - @include iro.bem-elem('label') { - align-self: baseline; - margin-left: fn.dim(--label-gap); - } - - @include iro.bem-elem('native') { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 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('box') { - background-color: fn.color(--hover --box-border); - } - } - - &:checked { - @include iro.bem-sibling-elem('box') { - &::before { - transform: scale(0); - } - - @include iro.bem-elem('check-icon') { - transform: scale(1); - } - } - } - - &:indeterminate { - @include iro.bem-sibling-elem('box') { - &::before { - transform: scale(0); - } - - &::after { - transform: scale(1); - } - - @include iro.bem-elem('check-icon') { - transform: scale(0); - } - } - } - - &:disabled { - @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); - } - - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - - &::before { - background-color: fn.color(--disabled --box-bg); - } - } - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - @include iro.bem-sibling-elem('label') { - color: fn.color(--key-focus --label); - } - - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--key-focus --box-border); - box-shadow: fn.color(--key-focus --shadow); - } - } - } - } - - @include iro.bem-modifier('standalone') { - @include iro.bem-elem('box') { - margin-top: 0; - } - } - - @include iro.bem-modifier('accent') { - @include iro.bem-elem('native') { - &:checked { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --box-border); - } - - &:hover { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --hover --box-border); - } - } - } - - &:indeterminate { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --box-border); - } - - &:hover { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --hover --box-border); - } - } - } - - &:disabled { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - - &::before { - background-color: fn.color(--disabled --box-bg); - } - } - - &:checked { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - } - } - - &:indeterminate { - @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); - } - } - } - } - } - } -} diff --git a/src/.old/objects/_radio.scss b/src/.old/objects/_radio.scss deleted file mode 100644 index 5af7a12..0000000 --- a/src/.old/objects/_radio.scss +++ /dev/null @@ -1,176 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('radio') { - @include iro.props-store(( - --dims: ( - --diameter: calc(fn.global-dim(--size --175) + 1px), - --label-gap: fn.global-dim(--size --125), - --border: fn.global-dim(--border --medium), - --pad-x: fn.global-dim(--size --65), - --pad-y: fn.global-dim(--size --65), - ), - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --circle-border: fn.global-color(--fg-hi), - --circle-bg: fn.global-color(--bg-hi), - - --hover: ( - --label: fn.global-color(--fg-lo), - --circle-border: fn.global-color(--fg), - ), - --accent: ( - --circle-border: fn.global-color(--accent --primary --solid --bg), - - --hover: ( - --circle-border: fn.global-color(--accent --primary --solid --obj), - ), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --circle-border: fn.global-color(--focus --fill), - --shadow: fn.global-color(--focus --shadow), - ), - --disabled: ( - --label: fn.global-color(--fg-hi3), - --circle-border: fn.global-color(--obj-lo), - --circle-bg: fn.global-color(--bg-hi), - ) - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - display: inline-flex; - position: relative; - align-items: flex-start; - margin-right: calc(-1 * fn.dim(--pad-x)); - margin-left: calc(-1 * fn.dim(--pad-x)); - padding: fn.dim(--pad-y) fn.dim(--pad-x); - - @include iro.bem-elem('circle') { - display: block; - box-sizing: border-box; - flex: 0 0 auto; - width: fn.dim(--diameter); - height: fn.dim(--diameter); - margin-top: 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; - top: fn.dim(--border); - left: fn.dim(--border); - width: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); - height: 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-left: fn.dim(--label-gap); - } - - @include iro.bem-elem('native') { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 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); - } - } - } - - @include iro.bem-at-theme('keyboard') { - &:focus { - @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); - box-shadow: fn.color(--key-focus --shadow); - } - } - } - } - - @include iro.bem-modifier('standalone') { - @include iro.bem-elem('circle') { - margin-top: 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); - } - } - } - } - } - } -} diff --git a/src/_config.scss b/src/_config.scss index 3cffbfd..950ff3b 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -23,7 +23,7 @@ media.$unit-intervals: ( res.$named-viewports: media.$breakpoints; -$palette-precision: 5 !default; +$palette-precision: 0.01 !default; $static-colors: ( --base: hsl(0, 0%, 97%), @@ -56,29 +56,29 @@ $static-colors: ( $theme-light: ( --contrasts: ( --grays: ( - --50: 1.1, - --75: 1.04, - --100: 1, + --50: -10, + --75: -5, + --100: 0, - --200: -1.15, - --300: -1.35, - --400: -1.7, + --200: 13.2375, + --300: 26.475, + --400: 39.7125, - --500: -2.4, - --600: -3.3, - --700: -6, - --800: -13, - --900: -20, + --500: 52.95, + --600: 66.1875, + --700: 79.425, + --800: 92.6625, + --900: 105.9, ), --colors: ( - --100: -1.08, - --200: -1.20, - --300: -1.33, - --400: -1.58, - --500: -1.92, - --600: -2.39, - --700: -3.01, + --100: -1.18, + --200: -1.30, + --300: -1.43, + --400: -1.68, + --500: -2.00, + --600: -2.45, + --700: -3.04, --800: -3.87, --900: -5.07, --1000: -6.72, @@ -90,7 +90,7 @@ $theme-light: ( --ranges: ( --full: 1, - --muted: 0.8, + --muted: .2, ), --palettes: ( @@ -104,15 +104,17 @@ $theme-light: ( --semantic: ( --accent: --blue, - --positive: --green, - --negative: --red, - --warning: --yellow, - --accent-static: --blue-static, + --positive: --green, --positive-static: --green-static, + --negative: --red, --negative-static: --red-static, + --warning: --yellow, --warning-static: --yellow-static, + --focus: --yellow, + --focus-static: --yellow-static, + --bg-l2: --base --50, --bg-l1: --base --100, --bg-base: --base --200, @@ -166,7 +168,7 @@ $theme-dark: ( --ranges: ( --full: 1, - --muted: 0.8, + --muted: .2, ), --palettes: ( @@ -180,15 +182,17 @@ $theme-dark: ( --semantic: ( --accent: --blue, - --positive: --green, - --negative: --red, - --warning: --yellow, - --accent-static: --blue-static, + --positive: --green, --positive-static: --green-static, + --negative: --red, --negative-static: --red-static, + --warning: --yellow, --warning-static: --yellow-static, + --focus: --yellow, + --focus-static: --yellow-static, + --bg-base: --base --50, --bg-l1: --base --75, --bg-l2: --base --100, diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 4574333..2c845fa 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -78,7 +78,7 @@ ), --font-size: ( - --50: iro.fn-px-to-rem(11px), + --50: iro.fn-px-to-rem(12px), --75: iro.fn-px-to-rem(13px), --100: iro.fn-px-to-rem(14px), --150: iro.fn-px-to-rem(16px), @@ -102,8 +102,8 @@ --rounding: 4px, - --focus: ( - --outline-width: 3px, + --key-focus: ( + --border: 4px, ), --paragraph: ( @@ -183,7 +183,6 @@ $palette, map.get(config.$static-colors, --contrasts), 1, - false, map.get(config.$static-colors, --base), ), ), @@ -204,7 +203,6 @@ $base-color, map.get($theme, --contrasts, $contrasts), map.get($theme, --ranges, $ranges), - true, list.nth(map.get($theme, --palettes, --base), 1), ), ), diff --git a/src/_functions.scss b/src/_functions.scss index 8553833..2d4aeef 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -2,11 +2,15 @@ @use 'sass:math'; @use 'sass:map'; @use 'sass:list'; -@use 'iro-sass/src/index' as iro; -@use 'config'; +@use 'sass:meta'; + @use '@oddbird/blend'; @use '@oddbird/blend/sass/convert' as blend-convert; +@use 'functions/colors' as iro-colors; +@use 'iro-sass/src/index' as iro; +@use 'config'; + @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); } @@ -107,7 +111,9 @@ @return $result; } -@function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) { +@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { + $chroma-range: 1 - $chroma-range; + $palette: (); @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { @@ -115,12 +121,25 @@ } $reference-lightness: blend.lightness($reference-color); - $i: -100%; + $i: 0; + + @while $i <= 1 { + $l: $i * 200% - 100%; + $c: 0%; + + @if $chroma-range != 0 { + $c: $i * 2 - 1; + $c: if( + $reference-lightness >= 50%, + math.clamp(0, $c, 1), + math.clamp(0, -1 * $c, 1) + ); + $c: $chroma-range * $c * -100%; + } + + $palette: list.append($palette, blend.scale($base-color, $l: $l, $c: $c)); - @while $i <= 100% { - $c: if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%); - $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c)); - $i: $i + config.$palette-precision; + $i: $i + config.$palette-precision; } $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color); @@ -132,6 +151,53 @@ @return $palette; } +@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { + $base-lch: blend-convert.Lab_to_LCH( + iro-colors.lin_sRGB_to_Oklab( + blend-convert.lin_sRGB( + blend-convert.sassToRgb($base-color) + ) + ) + ); + $ref-y: iro-colors.apca_sRGB_to_Y($reference-color); + + $palette: (); + + @each $key, $contrast in $contrasts { + $y: iro-colors.apcaReverse($contrast, $ref-y); + $l: list.nth($base-lch, 1); + + @if $y != false { + @debug $contrast, $ref-y, $y, iro-colors.apca_Y_to_sRGB($y); + + $y-lch: blend-convert.Lab_to_LCH( + iro-colors.lin_sRGB_to_Oklab( + blend-convert.lin_sRGB( + blend-convert.sassToRgb( + iro-colors.apca_Y_to_sRGB($y) + ) + ) + ) + ); + $l: list.nth($y-lch, 1); + } @else { + @debug $contrast, $ref-y, $y; + } + + $color: oklch($l * 100% list.nth($base-lch, 2) list.nth($base-lch, 3)); + //$color: blend-convert.LCH_to_Lab($color); + //$color: iro-colors.Oklab_to_lin_sRGB($color); + //$color: blend-convert(); + + $palette: map.set($palette, $key, $color); + $palette: map.set($palette, #{$key}-text, if($l > 50%, #000, #fff)); + } + + @debug '-------------------------------------------'; + + @return $palette; +} + @function px-to-em($size, $base: iro.$vars-root-size) { @return math.div($size, $base) * 1em; } diff --git a/src/_objects.scss b/src/_objects.scss index 3dd5176..0f510ff 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -6,8 +6,8 @@ @use 'objects/button'; @use 'objects/text-field'; @use 'objects/field-label'; -// @use 'objects/radio'; -// @use 'objects/checkbox'; +@use 'objects/radio'; +@use 'objects/checkbox'; // @use 'objects/switch'; // @use 'objects/action-button'; // @use 'objects/overflow-button'; diff --git a/src/functions/_colors.scss b/src/functions/_colors.scss new file mode 100644 index 0000000..265c09a --- /dev/null +++ b/src/functions/_colors.scss @@ -0,0 +1,159 @@ +/* stylelint-disable scss/dollar-variable-pattern */ +/* stylelint-disable scss/at-function-pattern */ + +@use 'sass:color'; +@use 'sass:list'; +@use 'sass:map'; +@use 'sass:math'; +@use 'sass:meta'; +@use '@oddbird/blend/sass/utils/pow'; + +$SA98G: ( + mainTRC: 2.4, + + sRco: 0.2126729, + sGco: 0.7151522, + sBco: 0.0721750, + + normBG: 0.56, + normTXT: 0.57, + revTXT: 0.62, + revBG: 0.65, + + blkThrs: 0.022, + blkClmp: 1.414, + scaleBoW: 1.14, + scaleWoB: 1.14, + loBoWoffset: 0.027, + loWoBoffset: 0.027, + deltaYmin: 0.0005, + loClip: 0.0001, + + mFactor: 1.94685544331710, + mOffsetIn: 0.03873938165714010, + mExpAdj: 0.2833433964208690, + mOffsetOut: 0.3128657958707580, +); + +@function lin_sRGB_to_Oklab($color) { + $r_: list.nth($color, 1); + $g_: list.nth($color, 2); + $b_: list.nth($color, 3); + + $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_); + $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_); + $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_); + + @return ( + 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s, + 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s, + 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s, + ); +} + +@function Oklab_to_lin_sRGB($color) { + $l_: list.nth($color, 1); + $a_: list.nth($color, 2); + $b_: list.nth($color, 3); + + $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b-; + $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b-; + $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b-; + + $l: $l * $l * $l; + $m: $m * $m * $m; + $s: $s * $s * $s; + + @return ( + 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * 4s, + -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * 4s, + -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * 4s, + ); +} + +@function apca_sRGB_to_Y($color) { + @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + + map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC)); +} + +@function apca_Y_to_sRGB($y) { + $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); + @return rgb($c, $c, $c); +} + +@function apcaContrast($txtY, $bgY) { + @if $txtY <= map.get($SA98G, blkThrs) { + $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); + } + @if $bgY <= map.get($SA98G, blkThrs) { + $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); + } + + @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { + @return 0; + } + + $outputContrast: 0; + + @if $bgY > $txtY { + $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); + + @if $SAPC >= map.get($SA98G, loClip) { + $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); + } + } @else { + $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); + + @if $SAPC <= -1 * map.get($SA98G, loClip) { + $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); + } + } + + @return outputContrast * 100.0; +} + +@function apcaReverse($contrast, $knownY, $knownType: 'bg') { + $unknownY: $knownY; + + $knownExp: 0; + $unknownExp: 0; + + $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); + $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); + + $contrast: math.div($contrast * 0.01 + $offset, $scale); + + @if $knownY <= map.get($SA98G, blkThrs) { + $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); + } + + @if $knownType == 'bg' { + $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); + } @else { + $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); + $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); + $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); + } + + @if '#{$unknownY}' == '#{math.sqrt(-1)}' { + @return false; + } + + @if $unknownY > 1.06 or $unknownY < 0 { + @return false; + } + + @if $unknownY <= map.get($SA98G, blkThrs) { + $unknownY: math.pow( + ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), + math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp)) + ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); + } + + $unknownY: math.max(math.min($unknownY, 1), 0); + + @return $unknownY; +} diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 23ae305..6001564 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -6,29 +6,33 @@ $themes: accent positive negative warning; @include iro.props-namespace('badge') { @include iro.props-store(( --dims: ( - --pad-b: fn.global-dim(--size --100), + --pad-b: fn.global-dim(--size --50), --pad-i: fn.global-dim(--size --150), --pad-i-pill: fn.global-dim(--size --200), --rounding: fn.global-dim(--rounding), - --font-size: fn.global-dim(--font-size --100), + --font-size: fn.global-dim(--font-size --75), --sm: ( - --pad-b: fn.global-dim(--size --50), + --pad-b: fn.global-dim(--size --25), --pad-i: fn.global-dim(--size --115), --pad-i-pill: fn.global-dim(--size --150), - --font-size: fn.global-dim(--font-size --75), + --font-size: fn.global-dim(--font-size --50), ), --lg: ( - --pad-b: fn.global-dim(--size --125), + --pad-b: fn.global-dim(--size --75), --pad-i: fn.global-dim(--size --175), --pad-i-pill: fn.global-dim(--size --225), - --font-size: fn.global-dim(--font-size --150), + --font-size: fn.global-dim(--font-size --100), ), --xl: ( - --pad-b: fn.global-dim(--size --160), + --pad-b: fn.global-dim(--size --100), --pad-i: fn.global-dim(--size --225), --pad-i-pill: fn.global-dim(--size --300), - --font-size: fn.global-dim(--font-size --200), + --font-size: fn.global-dim(--font-size --150), + ), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), ), ), --colors: ( @@ -43,7 +47,7 @@ $themes: accent positive negative warning; --key-focus: ( --bg: fn.global-color(--base --50), --label: fn.global-color(--heading), - --border: fn.global-color(--yellow-static --400), + --border: fn.global-color(--focus-static --400), ), --quiet: ( @@ -63,13 +67,13 @@ $themes: accent positive negative warning; @include iro.props-store(( --colors: ( --#{$theme}: ( - --bg: fn.global-color(--#{$theme} --800), - --label: fn.global-color(--#{$theme} --800-text), + --bg: fn.global-color(--#{$theme}-static --800), + --label: fn.global-color(--#{$theme}-static --800-text), --hover: ( - --bg: fn.global-color(--#{$theme} --900), + --bg: fn.global-color(--#{$theme}-static --900), ), --active: ( - --bg: fn.global-color(--#{$theme} --900), + --bg: fn.global-color(--#{$theme}-static --900), ), ), @@ -169,7 +173,7 @@ $themes: accent positive negative warning; &:enabled { &:focus-visible { background-color: fn.color(--key-focus --bg); - box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border); + box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border); color: fn.color(--key-focus --label); } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index a823f17..1a0e52c 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -2,7 +2,7 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; -$themes: primary accent positive negative warning; +$themes: accent negative; @mixin button-variant($theme: null) { $key: if($theme == null, (), --#{$theme}); @@ -19,6 +19,7 @@ $themes: primary accent positive negative warning; &:link, &:visited, &:enabled { + border-color: fn.color(list.join($key, --outline-border)); background-color: transparent; color: fn.color(list.join($key, --outline-label)); } @@ -66,11 +67,16 @@ $themes: primary accent positive negative warning; --pad-b: fn.global-dim(--size --150), --font-size: fn.global-dim(--font-size --200), ), + + --key-focus: ( + --border: fn.global-dim(--key-focus --border), + ), ), --colors: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--text), - --outline-label: fn.global-color(--text), + --bg: fn.global-color(--border-mute), + --label: fn.global-color(--text), + --outline-border: fn.global-color(--border), + --outline-label: fn.global-color(--text), --hover: ( --bg: fn.global-color(--border), @@ -81,19 +87,21 @@ $themes: primary accent positive negative warning; --label: fn.global-color(--heading), ), --disabled: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--text-disabled), + --bg: fn.global-color(--border-mute), + --outline-border: fn.global-color(--border), + --label: fn.global-color(--text-disabled), ), --key-focus: ( - --bg: fn.global-color(--base --50), - --label: fn.global-color(--heading), - --border: fn.global-color(--yellow-static --400), + --bg: fn.global-color(--base --50), + --label: fn.global-color(--heading), + --border: fn.global-color(--focus-static --400), ), --primary: ( - --bg: fn.global-color(--base --800), - --label: fn.global-color(--base --800-text), - --outline-label: fn.global-color(--text), + --bg: fn.global-color(--base --800), + --label: fn.global-color(--base --800-text), + --outline-border: fn.global-color(--base --800), + --outline-label: fn.global-color(--text), --hover: ( --bg: fn.global-color(--base --900), @@ -108,26 +116,25 @@ $themes: primary accent positive negative warning; )); @each $theme in $themes { - @if $theme != primary { - @include iro.props-store(( - --colors: ( - --#{$theme}: ( - --bg: fn.global-color(--#{$theme} --900), - --label: fn.global-color(--#{$theme} --900-text), - --outline-label: fn.global-color(--#{$theme} --1000), - - --hover: ( - --bg: fn.global-color(--#{$theme} --1000), - --label: fn.global-color(--#{$theme} --1000-text), - ), - --active: ( - --bg: fn.global-color(--#{$theme} --1100), - --label: fn.global-color(--#{$theme} --1100-text), - ), + @include iro.props-store(( + --colors: ( + --#{$theme}: ( + --bg: fn.global-color(--#{$theme}-static --900), + --label: fn.global-color(--#{$theme}-static --900-text), + --outline-border: fn.global-color(--#{$theme} --900), + --outline-label: fn.global-color(--#{$theme} --1000), + + --hover: ( + --bg: fn.global-color(--#{$theme}-static --1000), + --label: fn.global-color(--#{$theme}-static --1000-text), + ), + --active: ( + --bg: fn.global-color(--#{$theme}-static --1100), + --label: fn.global-color(--#{$theme}-static --1100-text), ), ), - )); - } + ), + )); } @include iro.bem-object(iro.props-namespace()) { @@ -151,6 +158,7 @@ $themes: primary accent positive negative warning; } @include iro.bem-modifier('outline') { + border-color: fn.color(--disabled --outline-border); background-color: transparent; box-shadow: none; } @@ -164,6 +172,10 @@ $themes: primary accent positive negative warning; } @include button-variant(); + + @include iro.bem-modifier('primary') { + @include button-variant('primary'); + } @each $theme in $themes { @include iro.bem-modifier($theme) { @@ -177,7 +189,7 @@ $themes: primary accent positive negative warning; &:focus-visible { border-color: fn.color(--key-focus --border); background-color: fn.color(--key-focus --bg); - box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border); + box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) - fn.dim(--border)) fn.color(--key-focus --border); color: fn.color(--key-focus --label); } } diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss new file mode 100644 index 0000000..8e9e64c --- /dev/null +++ b/src/objects/_checkbox.scss @@ -0,0 +1,271 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('checkbox') { + @include iro.props-store(( + --dims: ( + --size: fn.global-dim(--size --175), + --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: ( + --box-border: fn.global-color(--text-mute), + --box-bg: fn.global-color(--base --75), + + --hover: ( + --label: fn.global-color(--heading), + --box-border: fn.global-color(--text), + ), + --accent: ( + --box-border: fn.global-color(--accent --900), + + --hover: ( + --box-border: fn.global-color(--accent --1000), + ), + ), + --key-focus: ( + --bg: fn.global-color(--focus-static --400), + --label: fn.global-color(--focus-static --400-text), + --box-border: fn.global-color(--focus-static --1000), + --box-bg: fn.global-color(--focus-static --1000-text), + ), + --disabled: ( + --label: fn.global-color(--text-disabled), + --box-border: fn.global-color(--border-strong), + --box-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-b)); + 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('box') { + display: block; + position: relative; + flex: 0 0 auto; + inline-size: fn.dim(--size); + block-size: fn.dim(--size); + margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); + border-radius: fn.dim(--border); + background-color: fn.color(--box-border); + + &::before, + &::after { + content: ''; + display: block; + position: absolute; + } + + &::before { + z-index: 2; + inset-block-start: fn.dim(--border); + inset-inline-start: fn.dim(--border); + inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); + block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); + transition: transform .2s ease; + background-color: fn.color(--box-bg); + } + + &::after { + z-index: 3; + inset-block-start: calc(.5 * fn.dim(--size) - 1px); + inset-inline-start: calc(1.5 * fn.dim(--border)); + box-sizing: border-box; + inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); + block-size: 0; + transform: scale(0); + transition: transform .2s ease; + border-block-width: 0 2px; + border-inline-width: 0 2px; + border-style: solid; + border-radius: 2px; + border-color: fn.color(--box-bg); + } + } + + @include iro.bem-elem('check-icon') { + display: block; + position: absolute; + z-index: 2; + inset-block-start: calc(1 * fn.dim(--border)); + inset-inline-start: calc(1 * fn.dim(--border)); + inline-size: calc(100% - 2 * fn.dim(--border)); + block-size: calc(100% - 2 * fn.dim(--border)); + margin: 0; + transform: scale(0); + transform-origin: 40% 90%; + transition: transform .2s ease; + stroke-width: iro.fn-px-to-rem(3px); + color: fn.color(--box-bg); + } + + @include iro.bem-elem('label') { + align-self: baseline; + margin-left: 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('box') { + background-color: fn.color(--hover --box-border); + } + } + + &:checked { + @include iro.bem-sibling-elem('box') { + &::before { + transform: scale(0); + } + + @include iro.bem-elem('check-icon') { + transform: scale(1); + } + } + } + + &:indeterminate { + @include iro.bem-sibling-elem('box') { + &::before { + transform: scale(0); + } + + &::after { + transform: scale(1); + } + + @include iro.bem-elem('check-icon') { + transform: scale(0); + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('label') { + color: fn.color(--disabled --label); + } + + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--disabled --box-border); + + &::before { + background-color: fn.color(--disabled --box-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('box') { + background-color: fn.color(--key-focus --box-border); + + &::before { + background-color: fn.color(--key-focus --box-bg); + } + } + } + } + + @include iro.bem-modifier('standalone') { + @include iro.bem-elem('box') { + margin-block-start: 0; + } + } + + @include iro.bem-modifier('accent') { + @include iro.bem-elem('native') { + &:checked { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--accent --box-border); + } + + &:hover { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--accent --hover --box-border); + } + } + } + + &:indeterminate { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--accent --box-border); + } + + &:hover { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--accent --hover --box-border); + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--disabled --box-border); + + &::before { + background-color: fn.color(--disabled --box-bg); + } + } + + &:checked { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--disabled --box-border); + } + } + + &:indeterminate { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--disabled --box-border); + } + } + } + + &:focus-visible { + @include iro.bem-sibling-elem('box') { + background-color: fn.color(--key-focus --box-border); + } + } + } + } + } +} 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); + } + } + } + } + } +} diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index de5bcd1..04c809e 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -26,7 +26,8 @@ @mixin keyboard-focus { @include iro.bem-sibling-elem('bg') { - border: fn.dim(--key-focus --border) solid fn.color(--key-focus --border); + border-color: fn.color(--key-focus --border); + box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --outline); } } @@ -46,9 +47,10 @@ --focus: ( --border: fn.global-dim(--border --medium), ), + --key-focus: ( - --border: fn.global-dim(--border --thick), - ) + --border: fn.global-dim(--key-focus --border), + ), ), --colors: ( --bg: fn.global-color(--base --50), @@ -63,7 +65,8 @@ --border: fn.global-color(--accent --900), ), --key-focus: ( - --border: fn.global-color(--yellow-static --400), + --border: fn.global-color(--focus --1300), + --outline: fn.global-color(--focus-static --400), ), --error: ( --border: fn.global-color(--negative --900), diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index a9de8b5..4f36972 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss @@ -33,8 +33,8 @@ ), --key-focus: ( - --bg: fn.global-color(--yellow-static --400), - --text: fn.global-color(--yellow-static --400-text), + --bg: fn.global-color(--focus-static --400), + --text: fn.global-color(--focus-static --400-text), ) ) )); @@ -42,7 +42,9 @@ @include iro.bem-scope(iro.props-namespace()) { :link, :visited { - border-radius: fn.dim(--rounding); + margin: calc(-1 * fn.global-dim(--border --thick)); + padding: fn.global-dim(--border --thick); + border-radius: calc(fn.dim(--rounding) + fn.global-dim(--border --thick)); color: currentColor; text-decoration: underline; text-decoration-color: fn.color(--underline); @@ -56,7 +58,6 @@ &:focus-visible { background-color: fn.color(--key-focus --bg); - box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg); color: fn.color(--key-focus --text); text-decoration: underline; text-decoration-thickness: fn.dim(--hover --underline); -- cgit v1.2.3-70-g09d2