From a8d6946bbc6b4c835b2812ddb8eae98393777199 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 13 Feb 2022 16:01:03 +0100 Subject: Improved accent structure --- src/_config.scss | 24 ++++++------ src/_declare-vars.scss | 80 ++++++++++++++++++++------------------ src/_functions.scss | 32 ++++++++------- src/objects/_button.scss | 8 ++-- src/objects/_checkbox.scss | 4 +- src/objects/_field-label.scss | 2 +- src/objects/_radio.scss | 4 +- src/objects/_status-indicator.scss | 6 +-- src/objects/_switch.scss | 4 +- src/objects/_text-field.scss | 8 ++-- 10 files changed, 92 insertions(+), 80 deletions(-) diff --git a/src/_config.scss b/src/_config.scss index 78f81c7..b54cb37 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -16,15 +16,17 @@ media.$unit-intervals: ( ); $wanted-grays: ( - -1.25, - -1.1, - 1, - 1.15, - 1.3, - 1.73, - 2.4, - 3.26, - 5, - 11, - 21, + --1: -1.25, + --2: -1.1, + --3: 1, + + --4: 1.15, + --5: 1.3, + --6: 1.73, + + --7: 2.4, + --8: 3.26, + --9: 5, + --10: 11, + --11: 21, ); diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index fa6de76..44b7d0e 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -70,32 +70,30 @@ @include iro.fn-execute { @include iro.props-store(( --colors: ( - --gray-h: 220, - --gray-s: 5%, - - --bg-hi2: fn.color(--gray1, null), // Lightest background - --bg-hi: fn.color(--gray2, null), // Lighter background - --bg: fn.color(--gray3, null), // Background - - --obj-hi: fn.color(--gray4, null), - --obj: fn.color(--gray5, null), - --obj-lo: fn.color(--gray6, null), - - --fg-hi3: fn.color(--gray7, null), // Disabled text - --fg-hi2: fn.color(--gray8, null), // Placeholder text - --fg-hi: fn.color(--gray9, null), // Faint text - --fg: fn.color(--gray10, null), // Text - --fg-lo: fn.color(--gray11, null), // Strong text + --bg-hi2: fn.color(--gray --1, null), // Lightest background + --bg-hi: fn.color(--gray --2, null), // Lighter background + --bg: fn.color(--gray --3, null), // Background + + --obj-hi: fn.color(--gray --4, null), + --obj: fn.color(--gray --5, null), + --obj-lo: fn.color(--gray --6, null), + + --fg-hi3: fn.color(--gray --7, null), // Disabled text + --fg-hi2: fn.color(--gray --8, null), // Placeholder text + --fg-hi: fn.color(--gray --9, null), // Faint text + --fg: fn.color(--gray --10, null), // Text + --fg-lo: fn.color(--gray --11, null), // Strong text + + --gray: ( --h: 220, --s: 5% ), + --blue: fn.color-palette(blend.lch(48% 50 279)), + --red: fn.color-palette(blend.lch(48% 50 23)), + --green: fn.color-palette(blend.lch(63% 50 141)), + --yellow: fn.color-palette(blend.lch(73% 50 90)), --accent: ( - --blue: fn.accent-palette(blend.lch(48% 50 279)), - --red: fn.accent-palette(blend.lch(48% 50 23)), - --green: fn.accent-palette(blend.lch(58% 50 141)), - --yellow: fn.accent-palette(blend.lch(73% 50 90)), - - --primary: iro.props-ref('colors', --colors --accent --blue), - --error: iro.props-ref('colors', --colors --accent --red), - --success: iro.props-ref('colors', --colors --accent --green), + --primary: iro.props-ref('colors', --colors --blue), + --error: iro.props-ref('colors', --colors --red), + --success: iro.props-ref('colors', --colors --green), ), --selection: ( @@ -106,7 +104,7 @@ --focus: ( --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), - --fill: fn.color(--accent --primary --main, null), + --fill: fn.color(--accent --primary --bg, null), --text: fn.color(--accent --primary --lo, null), --fill-text: fn.color(--accent --primary --fg, null), ), @@ -114,11 +112,15 @@ ), 'colors'); @include iro.props-store(( - --colors: fn.gray-palette(94%) + --colors: ( + --gray: fn.gray-palette(94%), + ), ), 'palette-light'); @include iro.props-store(( - --colors: fn.gray-palette(100%) + --colors: ( + --gray: fn.gray-palette(100%), + ), ), 'palette-light-raised'); } @@ -127,25 +129,29 @@ @include iro.fn-execute { @include iro.props-store(( --colors: ( + --blue: fn.color-palette(blend.lch(58% 60 279), -1), + --red: fn.color-palette(blend.lch(58% 60 23), -1), + --green: fn.color-palette(blend.lch(73% 60 141), -1), + --yellow: fn.color-palette(blend.lch(83% 60 90), -1), + --accent: ( - --blue: fn.accent-palette(blend.lch(58% 60 279), -1), - --red: fn.accent-palette(blend.lch(58% 60 23), -1), - --green: fn.accent-palette(blend.lch(68% 60 141), -1), - --yellow: fn.accent-palette(blend.lch(83% 60 90), -1), - - --primary: iro.props-ref('colors-dark', --colors --accent --blue), - --error: iro.props-ref('colors-dark', --colors --accent --red), - --success: iro.props-ref('colors-dark', --colors --accent --green), + --primary: iro.props-ref('colors-dark', --colors --blue), + --error: iro.props-ref('colors-dark', --colors --red), + --success: iro.props-ref('colors-dark', --colors --green), ), ) ), 'colors-dark'); @include iro.props-store(( - --colors: fn.gray-palette(9%) + --colors: ( + --gray: fn.gray-palette(9%), + ), ), 'palette-dark'); @include iro.props-store(( - --colors: fn.gray-palette(16%) + --colors: ( + --gray: fn.gray-palette(16%), + ), ), 'palette-dark-raised'); } diff --git a/src/_functions.scss b/src/_functions.scss index 56fdf39..c45dcfb 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -78,10 +78,12 @@ } } - $wanted-contrast: nth($wanted-contrasts, $wanted-idx); + $wanted: nth($wanted-contrasts, $wanted-idx); + $wanted-key: nth($wanted, 1); + $wanted-contrast: nth($wanted, 2); @if $contrast >= $wanted-contrast { - $result: append($result, $color); + $result: map.set($result, $wanted-key, $color); $wanted-idx: $wanted-idx + 1; } @else { $colors-idx: $colors-idx + $dir * 1; @@ -90,19 +92,23 @@ $last-color: nth($colors, if($dir == -1, 1, $colors-len)); - @for $i from $wanted-idx through $wanted-len { - $result: append($result, $last-color); + @if $wanted-idx <= $wanted-len { + @for $i from $wanted-idx through $wanted-len { + $wanted: nth($wanted-contrasts, $i); + $wanted-key: nth($wanted, 1); + $result: map.set($result, $wanted-key, $last-color); + } } @return $result; } -@function accent-palette($base, $dir: 1) { +@function color-palette($base, $dir: 1) { @return ( - --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), - --main: $base, - --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), - --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), + --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), + --bg: $base, + --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), + --obj-lo: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), --semi: rgba($base, .4), --selection: rgba($base, .99), --fg: blend.contrast($base), @@ -118,11 +124,9 @@ $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); - $palette: (); - - @for $i from 1 through length($colors) { - $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i)))); + @each $key, $color in $colors { + $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color))); } - @return $palette; + @return $colors; } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 586ee84..f93f342 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -57,18 +57,18 @@ ), ), --accent: ( - --bg: fn.global-color(--accent --primary --main), + --bg: fn.global-color(--accent --primary --bg), --label: fn.global-color(--accent --primary --fg), - --outline-label: fn.global-color(--accent --primary --lo), + --outline-label: fn.global-color(--accent --primary --obj), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.global-color(--accent --primary --lo), + --bg: fn.global-color(--accent --primary --obj), --label: fn.global-color(--accent --primary --fg), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.global-color(--accent --primary --lo2), + --bg: fn.global-color(--accent --primary --obj-lo), --label: fn.global-color(--accent --primary --fg), --shadow: 0 0 0 0 transparent, ), diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index be47eee..b7762d2 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -23,10 +23,10 @@ --box-border: fn.global-color(--fg), ), --accent: ( - --box-border: fn.global-color(--accent --primary --main), + --box-border: fn.global-color(--accent --primary --bg), --hover: ( - --box-border: fn.global-color(--accent --primary --lo), + --box-border: fn.global-color(--accent --primary --obj), ), ), --key-focus: ( diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 4b75282..a42be1d 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -15,7 +15,7 @@ --colors: ( --label: fn.global-color(--fg-hi), --hint: fn.global-color(--fg), - --error-hint: fn.global-color(--accent --error --main), + --error-hint: fn.global-color(--accent --error --bg), --disabled: fn.global-color(--fg-hi3), ), ), 'colors'); diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 85f94f2..7346a74 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -23,10 +23,10 @@ --circle-border: fn.global-color(--fg), ), --accent: ( - --circle-border: fn.global-color(--accent --primary --main), + --circle-border: fn.global-color(--accent --primary --bg), --hover: ( - --circle-border: fn.global-color(--accent --primary --lo), + --circle-border: fn.global-color(--accent --primary --obj), ), ), --key-focus: ( diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index e06c80b..0ddd115 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss @@ -11,9 +11,9 @@ @include iro.props-store(( --colors: ( --default: fn.global-color(--obj-lo), - --green: fn.global-color(--accent --green --hi), - --yellow: fn.global-color(--accent --yellow --hi), - --red: fn.global-color(--accent --red --hi), + --green: fn.global-color(--green --bg-hi), + --yellow: fn.global-color(--yellow --bg-hi), + --red: fn.global-color(--red --bg-hi), ), ), 'colors'); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index e0ff178..06b5540 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -25,10 +25,10 @@ --handle-border: fn.global-color(--fg), ), --accent: ( - --handle-border: fn.global-color(--accent --primary --main), + --handle-border: fn.global-color(--accent --primary --bg), --hover: ( - --handle-border: fn.global-color(--accent --primary --lo), + --handle-border: fn.global-color(--accent --primary --obj), ), ), --key-focus: ( diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index b18b404..856c41f 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -56,7 +56,7 @@ --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.global-color(--accent --primary --main), + --border: fn.global-color(--accent --primary --bg), --shadow: 0 0 0 0 transparent, ), --key-focus: ( @@ -64,15 +64,15 @@ --shadow: fn.global-color(--focus --shadow), ), --error: ( - --border: fn.global-color(--accent --error --hi), + --border: fn.global-color(--accent --error --bg-hi), --shadow: 0 0 0 0 transparent, --hover: ( - --border: fn.global-color(--accent --error --main), + --border: fn.global-color(--accent --error --bg), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.global-color(--accent --error --main), + --border: fn.global-color(--accent --error --bg), --shadow: 0 0 0 0 transparent, ), ), -- cgit v1.2.3-70-g09d2