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/_declare-vars.scss | 80 +++++++++++++++++++++++++++----------------------- 1 file changed, 43 insertions(+), 37 deletions(-) (limited to 'src/_declare-vars.scss') 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'); } -- cgit v1.2.3-54-g00ecf