From 894aee1a5ca3f01292f6db7da9a903fdb2235065 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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 +-
 tpl/objects/overflow-button.pug    |  3 ++
 tpl/views/overflow-button.pug      | 27 +++++++++++
 17 files changed, 184 insertions(+), 48 deletions(-)

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');
diff --git a/tpl/objects/overflow-button.pug b/tpl/objects/overflow-button.pug
index f52f12b..301c6b3 100644
--- a/tpl/objects/overflow-button.pug
+++ b/tpl/objects/overflow-button.pug
@@ -7,6 +7,9 @@ mixin overflow-button
             'u-d-block':         attributes.block,
             'is-selected':       attributes.selected
         }
+        if (attributes.variant) {
+            classes['o-overflow-button--' + attributes.variant] = true
+        }
         if (attributes.class) {
             classes[attributes.class] = true;
         }
diff --git a/tpl/views/overflow-button.pug b/tpl/views/overflow-button.pug
index 112aaab..6eb63a4 100644
--- a/tpl/views/overflow-button.pug
+++ b/tpl/views/overflow-button.pug
@@ -8,3 +8,30 @@ mixin view-overflow-button
             +overflow-button(icon='trash' disabled=true)= 'Disabled'
             = ' '
             +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
+
+        .c-box
+            +overflow-button(icon='trash' variant='red')= '123'
+            = ' '
+            +overflow-button(icon='trash' variant='red' selected=true)= 'Delete'
+            = ' '
+            +overflow-button(icon='trash' variant='red' disabled=true)= 'Disabled'
+            = ' '
+            +overflow-button(icon='trash' variant='red' selected=true disabled=true)= 'Selected + disabled'
+
+        .c-box
+            +overflow-button(icon='trash' variant='blue')= '123'
+            = ' '
+            +overflow-button(icon='trash' variant='blue' selected=true)= 'Delete'
+            = ' '
+            +overflow-button(icon='trash' variant='blue' disabled=true)= 'Disabled'
+            = ' '
+            +overflow-button(icon='trash' variant='blue' selected=true disabled=true)= 'Selected + disabled'
+
+        .c-box
+            +overflow-button(icon='trash' variant='green')= '123'
+            = ' '
+            +overflow-button(icon='trash' variant='green' selected=true)= 'Delete'
+            = ' '
+            +overflow-button(icon='trash' variant='green' disabled=true)= 'Disabled'
+            = ' '
+            +overflow-button(icon='trash' variant='green' selected=true disabled=true)= 'Selected + disabled'
-- 
cgit v1.2.3-70-g09d2