From 894aee1a5ca3f01292f6db7da9a903fdb2235065 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 12 Feb 2023 20:48:13 +0100 Subject: Update --- src/_declare-vars.scss | 12 ++--- src/_functions.scss | 22 ++++++--- src/objects/_alert.scss | 8 ++-- src/objects/_badge.scss | 8 ++-- src/objects/_button.scss | 14 +++--- src/objects/_checkbox.scss | 4 +- src/objects/_field-label.scss | 2 +- src/objects/_overflow-button.scss | 98 ++++++++++++++++++++++++++++++++++++++ src/objects/_radio.scss | 4 +- src/objects/_status-indicator.scss | 6 +-- src/objects/_switch.scss | 4 +- src/objects/_text-field.scss | 8 ++-- src/scopes/_code.scss | 4 +- src/scopes/_colored-links.scss | 6 +-- src/scopes/_invisible-links.scss | 2 +- 15 files changed, 154 insertions(+), 48 deletions(-) (limited to 'src') diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 051d20b..ce91b5c 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -215,15 +215,15 @@ --selection: ( --bg: fn.color(--accent --primary --selection, null), - --bg-img: fn.color(--accent --primary --semi, null), - --fg: fn.color(--accent --primary --fg, null), + --bg-img: fn.color(--accent --primary --quiet --obj-lo, null), + --fg: fn.color(--accent --primary --solid --fg, null), ), --focus: ( - --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --semi, null), - --fill: fn.color(--accent --primary --bg, null), - --text: fn.color(--accent --primary --obj, null), - --fill-text: fn.color(--accent --primary --fg, null), + --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null), + --fill: fn.color(--accent --primary --solid --bg, null), + --text: fn.color(--accent --primary --solid --obj, null), + --fill-text: fn.color(--accent --primary --solid --fg, null), ), ), ), 'colors'); diff --git a/src/_functions.scss b/src/_functions.scss index efc73e2..6da533d 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -106,14 +106,22 @@ @function color-palette($base, $dir: 1) { @return ( - --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%), - --bg: $base, - --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), - --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), - --faint: rgba($base, .1), - --semi: rgba($base, .4), + --solid: ( + --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%), + --bg: $base, + --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), + --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), + --fg: blend.contrast($base), + ), + --quiet: ( + --bg: rgba($base, .1), + --obj: rgba($base, .2), + --obj-lo: rgba($base, .4), + --fg-hi: $base, + --fg: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), + --fg-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), + ), --selection: rgba($base, .99), - --fg: blend.contrast($base), ); } diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index 31a1605..b90e0ec 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss @@ -15,10 +15,10 @@ --colors: ( --bg: fn.global-color(--bg-hi2), --border: fn.global-color(--fg-hi2), - --border-primary: fn.global-color(--accent --primary --bg-hi), - --border-error: fn.global-color(--accent --error --bg-hi), - --border-success: fn.global-color(--accent --success --bg-hi), - --border-warning: fn.global-color(--accent --warning --bg-hi), + --border-primary: fn.global-color(--accent --primary --solid --bg-hi), + --border-error: fn.global-color(--accent --error --solid --bg-hi), + --border-success: fn.global-color(--accent --success --solid --bg-hi), + --border-warning: fn.global-color(--accent --warning --solid --bg-hi), ), ), 'colors'); diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 8ef2699..251263c 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss @@ -34,13 +34,13 @@ ), --accent: ( - --bg: fn.global-color(--accent --primary --bg), - --label: fn.global-color(--accent --primary --fg), + --bg: fn.global-color(--accent --primary --solid --bg), + --label: fn.global-color(--accent --primary --solid --fg), --hover: ( - --bg: fn.global-color(--accent --primary --obj), + --bg: fn.global-color(--accent --primary --solid --obj), ), --active: ( - --bg: fn.global-color(--accent --primary --obj-lo), + --bg: fn.global-color(--accent --primary --solid --obj-lo), ), ), ), diff --git a/src/objects/_button.scss b/src/objects/_button.scss index df1438f..cf12b12 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -65,19 +65,19 @@ ), ), --accent: ( - --bg: fn.global-color(--accent --primary --bg), - --label: fn.global-color(--accent --primary --fg), - --outline-label: fn.global-color(--accent --primary --obj), + --bg: fn.global-color(--accent --primary --solid --bg), + --label: fn.global-color(--accent --primary --solid --fg), + --outline-label: fn.global-color(--accent --primary --solid --obj), --shadow: 0 0 0 0 transparent, --hover: ( - --bg: fn.global-color(--accent --primary --obj), - --label: fn.global-color(--accent --primary --fg), + --bg: fn.global-color(--accent --primary --solid --obj), + --label: fn.global-color(--accent --primary --solid --fg), --shadow: 0 0 0 0 transparent, ), --active: ( - --bg: fn.global-color(--accent --primary --obj-lo), - --label: fn.global-color(--accent --primary --fg), + --bg: fn.global-color(--accent --primary --solid --obj-lo), + --label: fn.global-color(--accent --primary --solid --fg), --shadow: 0 0 0 0 transparent, ), ), diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 5443354..186ddf1 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -22,10 +22,10 @@ --box-border: fn.global-color(--fg), ), --accent: ( - --box-border: fn.global-color(--accent --primary --bg), + --box-border: fn.global-color(--accent --primary --solid --bg), --hover: ( - --box-border: fn.global-color(--accent --primary --obj), + --box-border: fn.global-color(--accent --primary --solid --obj), ), ), --key-focus: ( diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 0507a68..2127a09 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-hi), - --error-hint: fn.global-color(--accent --error --bg), + --error-hint: fn.global-color(--accent --error --quiet --fg), --disabled: fn.global-color(--fg-hi3), ), ), 'colors'); diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss index 3920a37..d768492 100644 --- a/src/objects/_overflow-button.scss +++ b/src/objects/_overflow-button.scss @@ -37,6 +37,63 @@ --border: fn.global-color(--focus --fill), --shadow: fn.global-color(--focus --shadow), ), + + --red: ( + --hover: ( + --bg: fn.global-color(--red --quiet --bg), + --label: fn.global-color(--red --quiet --fg), + ), + --active: ( + --bg: fn.global-color(--red --quiet --obj), + --label: fn.global-color(--red --quiet --fg-lo), + ), + --selected: ( + --bg: fn.global-color(--red --quiet --bg), + --label: fn.global-color(--red --quiet --fg), + + --hover: ( + --label: fn.global-color(--red --quiet --fg-lo), + ), + ), + ), + + --blue: ( + --hover: ( + --bg: fn.global-color(--blue --quiet --bg), + --label: fn.global-color(--blue --quiet --fg), + ), + --active: ( + --bg: fn.global-color(--blue --quiet --obj), + --label: fn.global-color(--blue --quiet --fg-lo), + ), + --selected: ( + --bg: fn.global-color(--blue --quiet --bg), + --label: fn.global-color(--blue --quiet --fg), + + --hover: ( + --label: fn.global-color(--blue --quiet --fg-lo), + ), + ), + ), + + --green: ( + --hover: ( + --bg: fn.global-color(--green --quiet --bg), + --label: fn.global-color(--green --quiet --fg), + ), + --active: ( + --bg: fn.global-color(--green --quiet --obj), + --label: fn.global-color(--green --quiet --fg-lo), + ), + --selected: ( + --bg: fn.global-color(--green --quiet --bg), + --label: fn.global-color(--green --quiet --fg), + + --hover: ( + --label: fn.global-color(--green --quiet --fg-lo), + ), + ), + ) ), ), 'colors'); @@ -122,6 +179,47 @@ } } } + + @each $color in 'red' 'blue' 'green' { + @include iro.bem-modifier($color) { + &:link, + &:visited, + &:enabled { + &:hover { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --hover --bg); + color: fn.color(--#{$color} --hover --label); + } + } + + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --active --bg); + color: fn.color(--#{$color} --active --label); + } + } + } + + @include iro.bem-is('selected') { + &:link, + &:visited, + &:enabled { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --selected --bg); + color: fn.color(--#{$color} --selected --label); + } + + &:hover, + &:active { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --selected --bg); + color: fn.color(--#{$color} --selected --hover --label); + } + } + } + } + } + } @include iro.bem-at-theme('keyboard') { &:focus { diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 65dfa66..5af7a12 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -22,10 +22,10 @@ --circle-border: fn.global-color(--fg), ), --accent: ( - --circle-border: fn.global-color(--accent --primary --bg), + --circle-border: fn.global-color(--accent --primary --solid --bg), --hover: ( - --circle-border: fn.global-color(--accent --primary --obj), + --circle-border: fn.global-color(--accent --primary --solid --obj), ), ), --key-focus: ( diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index b316f69..0849d82 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(--green --bg-hi), - --yellow: fn.global-color(--yellow --bg-hi), - --red: fn.global-color(--red --bg-hi), + --green: fn.global-color(--green --solid --bg-hi), + --yellow: fn.global-color(--yellow --solid --bg-hi), + --red: fn.global-color(--red --solid --bg-hi), ), ), 'colors'); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index ad39115..cbbb9b7 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -24,10 +24,10 @@ --handle-border: fn.global-color(--fg), ), --accent: ( - --handle-border: fn.global-color(--accent --primary --bg), + --handle-border: fn.global-color(--accent --primary --solid --bg), --hover: ( - --handle-border: fn.global-color(--accent --primary --obj), + --handle-border: fn.global-color(--accent --primary --solid --obj), ), ), --key-focus: ( diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 643e8d9..baed043 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -61,7 +61,7 @@ --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.global-color(--accent --primary --bg), + --border: fn.global-color(--accent --primary --solid --bg), --shadow: 0 0 0 0 transparent, ), --key-focus: ( @@ -69,15 +69,15 @@ --shadow: fn.global-color(--focus --shadow), ), --error: ( - --border: fn.global-color(--accent --error --bg-hi), + --border: fn.global-color(--accent --error --solid --bg-hi), --shadow: 0 0 0 0 transparent, --hover: ( - --border: fn.global-color(--accent --error --bg), + --border: fn.global-color(--accent --error --solid --bg), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: fn.global-color(--accent --error --bg), + --border: fn.global-color(--accent --error --solid --bg), --shadow: 0 0 0 0 transparent, ), ), diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss index 57cd43c..6a022f4 100644 --- a/src/scopes/_code.scss +++ b/src/scopes/_code.scss @@ -21,8 +21,8 @@ @include iro.props-store(( --colors: ( --inline: ( - --fg: fn.global-color(--red --obj-lo), - --bg: fn.global-color(--red --faint), + --fg: fn.global-color(--red --quiet --fg), + --bg: fn.global-color(--red --quiet --obj-lo), ), --block: ( --fg: fn.global-color(--fg), diff --git a/src/scopes/_colored-links.scss b/src/scopes/_colored-links.scss index 0c58bf1..29125f5 100644 --- a/src/scopes/_colored-links.scss +++ b/src/scopes/_colored-links.scss @@ -4,11 +4,11 @@ @include iro.props-namespace('colored-links') { @include iro.props-store(( --colors: ( - --idle: fn.global-color(--accent --link-idle --obj-lo), - --visited: fn.global-color(--accent --link-visited --obj-lo), + --idle: fn.global-color(--accent --link-idle --quiet --fg-lo), + --visited: fn.global-color(--accent --link-visited --quiet --fg-lo), --key-focus: ( --border: fn.global-color(--focus --fill), - --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), + --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), ), ) ), 'colors'); diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss index e4493d4..32e8e7c 100644 --- a/src/scopes/_invisible-links.scss +++ b/src/scopes/_invisible-links.scss @@ -6,7 +6,7 @@ --colors: ( --key-focus: ( --border: fn.global-color(--focus --fill), - --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), + --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --bg), ), ) ), 'colors'); -- cgit v1.2.3-54-g00ecf