From 52bc737136ac132790cfeaa4bbaca748feb404a9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 7 Feb 2022 21:31:41 +0100 Subject: Improved accent handling --- src/_apply-vars.scss | 12 ------- src/_vars.scss | 71 +++++++++++++++----------------------- src/objects/_button.scss | 16 ++++----- 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 ++--- 9 files changed, 49 insertions(+), 78 deletions(-) diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index cf4c940..5d18afe 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss @@ -27,24 +27,12 @@ } } -@include iro.bem-theme('grayscale') { - @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent); -} - /*@media (prefers-color-scheme: dark) { @include iro.props-assign('dark'); @include iro.props-assign('dark-palette'); - @include iro.bem-theme('grayscale') { - @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); - } - @include iro.bem-theme('raised') { @include iro.props-assign('dark-raised-palette'); @include iro.props-assign('dark'); - - @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') { - @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent); - } } }*/ diff --git a/src/_vars.scss b/src/_vars.scss index 825ec9c..fd369f7 100644 --- a/src/_vars.scss +++ b/src/_vars.scss @@ -85,11 +85,19 @@ media.$unit-intervals: ( // -@include iro.fn-execute { - $primary-accent-base: hsl(222, 49.8%, 52.4%); - $error-accent-base: hsl(352, 49.8%, 52.4%); - $success-accent-base: hsl(113, 49.8%, 39.6%); +@function accent-palette($base) { + @return ( + --hi: scale-color($base, $lightness: 15%), + --main: $base, + --lo: scale-color($base, $lightness: -15%), + --lo2: scale-color($base, $lightness: -25%), + --semi: rgba($base, .4), + --selection: rgba($base, .99), + --fg: #fff, + ); +} +@include iro.fn-execute { @include iro.props-store(( --colors: ( --bg-hi2: fn.color(--gray1, null), // Lightest background @@ -107,52 +115,27 @@ media.$unit-intervals: ( --fg-lo: fn.color(--gray11, null), // Strong text --accent: ( - --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), - --primary-const: $primary-accent-base, - --primary-const-lo: scale-color($primary-accent-base, $lightness: -15%), - --primary-const-lo2: scale-color($primary-accent-base, $lightness: -25%), - --primary-const-semi: rgba($primary-accent-base, .4), - --primary-const-selection: rgba($primary-accent-base, .99), - --primary-const-fg: #fff, - - --primary-hi: fn.color(--accent --primary-const-hi, null), - --primary: fn.color(--accent --primary-const, null), - --primary-lo: fn.color(--accent --primary-const-lo, null), - --primary-lo2: fn.color(--accent --primary-const-lo2, null), - --primary-fg: fn.color(--accent --primary-const-fg, null), - - --error-hi: scale-color($error-accent-base, $lightness: 15%), - --error: $error-accent-base, - --error-lo: scale-color($error-accent-base, $lightness: -15%), - --error-lo2: scale-color($error-accent-base, $lightness: -25%), - --error-fg: #fff, - - --success-hi: scale-color($success-accent-base, $lightness: 15%), - --success: $success-accent-base, - --success-lo: scale-color($success-accent-base, $lightness: -15%), - --success-lo2: scale-color($success-accent-base, $lightness: -25%), - --success-fg: #fff, - ), - - --grayscale-accent: ( - --primary-hi: fn.color(--fg-hi2, null), - --primary: fn.color(--fg-hi, null), - --primary-lo: fn.color(--fg, null), - --primary-lo2: fn.color(--fg-lo, null), - --primary-fg: #fff, + --blue: accent-palette(hsl(222, 49.8%, 52.4%)), + --red: accent-palette(hsl(352, 49.8%, 52.4%)), + --green: accent-palette(hsl(113, 49.8%, 39.6%)), + --yellow: accent-palette(hsl(50, 59.8%, 52.4%)), + + --primary: iro.props-ref('colors', --colors --accent --blue), + --error: iro.props-ref('colors', --colors --accent --red), + --success: iro.props-ref('colors', --colors --accent --green), ), --selection: ( - --bg: fn.color(--accent --primary-const-selection, null), - --bg-img: fn.color(--accent --primary-const-semi, null), - --fg: fn.color(--accent --primary-const-fg, null), + --bg: fn.color(--accent --primary --selection, null), + --bg-img: fn.color(--accent --primary --semi, null), + --fg: fn.color(--accent --primary --fg, null), ), --focus: ( - --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null), - --fill: fn.color(--accent --primary-const, null), - --text: fn.color(--accent --primary-const-lo, null), - --fill-text: fn.color(--accent --primary-const-fg, null), + --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), + --fill: fn.color(--accent --primary --main, null), + --text: fn.color(--accent --primary --lo, null), + --fill-text: fn.color(--accent --primary --fg, null), ), ), ), 'colors'); diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 32d1193..0df0148 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -51,25 +51,25 @@ ), --key-focus: ( --bg: transparent, - --label: fn.global-color(--accent --primary-lo2), + --label: fn.global-color(--accent --primary --lo2), --border: fn.global-color(--focus --fill), --shadow: fn.global-color(--focus --shadow), ), ), --accent: ( - --bg: fn.global-color(--accent --primary), - --label: fn.global-color(--accent --primary-fg), - --outline-label: fn.global-color(--accent --primary-lo), + --bg: fn.global-color(--accent --primary --main), + --label: fn.global-color(--accent --primary --fg), + --outline-label: fn.global-color(--accent --primary --lo), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.global-color(--accent --primary-lo), - --label: fn.global-color(--accent --primary-fg), + --bg: fn.global-color(--accent --primary --lo), + --label: fn.global-color(--accent --primary --fg), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.global-color(--accent --primary-lo2), - --label: fn.global-color(--accent --primary-fg), + --bg: fn.global-color(--accent --primary --lo2), + --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 efc85d6..053a6ab 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), + --box-border: fn.global-color(--accent --primary --main), --hover: ( - --box-border: fn.global-color(--accent --primary-lo), + --box-border: fn.global-color(--accent --primary --lo), ), ), --key-focus: ( diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index aaa5cca..66f5ef7 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), + --error-hint: fn.global-color(--accent --error --main), --disabled: fn.global-color(--fg-hi3), ), ), 'colors'); diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 46f2a2a..b27766e 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), + --circle-border: fn.global-color(--accent --primary --main), --hover: ( - --circle-border: fn.global-color(--accent --primary-lo), + --circle-border: fn.global-color(--accent --primary --lo), ), ), --key-focus: ( diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index c688cbc..e06c80b 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: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 10%), - --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 10%), - --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 10%), + --green: fn.global-color(--accent --green --hi), + --yellow: fn.global-color(--accent --yellow --hi), + --red: fn.global-color(--accent --red --hi), ), ), 'colors'); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 59e4c55..cc215a5 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), + --handle-border: fn.global-color(--accent --primary --main), --hover: ( - --handle-border: fn.global-color(--accent --primary-lo), + --handle-border: fn.global-color(--accent --primary --lo), ), ), --key-focus: ( diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index b819811..55e8a5c 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), + --border: fn.global-color(--accent --primary --main), --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 --hi), --shadow: 0 0 0 0 transparent, --hover: ( - --border: fn.global-color(--accent --error), + --border: fn.global-color(--accent --error --main), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.global-color(--accent --error), + --border: fn.global-color(--accent --error --main), --shadow: 0 0 0 0 transparent, ), ), -- cgit v1.2.3-70-g09d2