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/_vars.scss | 71 ++++++++++++++++++++++------------------------------------ 1 file changed, 27 insertions(+), 44 deletions(-) (limited to 'src/_vars.scss') 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'); -- cgit v1.2.3-70-g09d2