Better action button / badge color

author: Volpeon <git@volpeon.ink> 2024-11-13 21:19:13 +0100
committer: Volpeon <git@volpeon.ink> 2024-11-13 21:19:13 +0100
commit: e0dc52dccd4a0019d4f495b98e17e299aac02e2d (patch)
tree: d4e1d35eaaf02b47f927d07fa5f3e526d6f60086
parent: Higher contrast badge / selected quiet action button (diff)
download: iro-design-e0dc52dccd4a0019d4f495b98e17e299aac02e2d.tar.gz
iro-design-e0dc52dccd4a0019d4f495b98e17e299aac02e2d.tar.bz2
iro-design-e0dc52dccd4a0019d4f495b98e17e299aac02e2d.zip
3 files changed, 15 insertions, 15 deletions
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 5ba6885..9de985a 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -72,20 +72,20 @@ $default-theme: map.deep-merge((
    ),
    --selected: (
-        --bg-color:     props.get(core.$theme, --text),
+        --bg-color:     props.get(core.$theme, --heading),
        --label-color:  props.get(core.$theme, --base, --50),
-        --border-color: props.get(core.$theme, --text-mute),
+        --border-color: props.get(core.$theme, --heading),
        --hover: (
-            --bg-color:     props.get(core.$theme, --heading),
+            --bg-color:     props.get(core.$theme, --text),
            --label-color:  props.get(core.$theme, --base, --50),
            --border-color: props.get(core.$theme, --text),
        ),
        --active: (
-            --bg-color:     props.get(core.$theme, --heading),
+            --bg-color:     props.get(core.$theme, --text-mute),
            --label-color:  props.get(core.$theme, --base, --50),
-            --border-color: props.get(core.$theme, --heading),
+            --border-color: props.get(core.$theme, --text-mute),
        ),
        --disabled: (
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index f33c662..6327e7b 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -40,16 +40,16 @@ $sizes: (
 $default-theme-override: () !default;
 $default-theme: props.def(--o-badge, (
-    --bg:    props.get(core.$theme, --text),
+    --bg:    props.get(core.$theme, --heading),
    --label: props.get(core.$theme, --bg-l2),
    
    --hover: (
-        --bg:    props.get(core.$theme, --heading),
+        --bg:    props.get(core.$theme, --text),
        --label: props.get(core.$theme, --bg-l2),
    ),
    --active: (
-        --bg:    props.get(core.$theme, --heading),
+        --bg:    props.get(core.$theme, --text-mute),
        --label: props.get(core.$theme, --bg-l2),
    ),
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 36400a2..f70bde7 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -66,19 +66,19 @@ $default-theme: props.def(--o-button, (
    ),
    --primary: (
-        --bg:             props.get(core.$theme, --base, --800),
+        --bg:             props.get(core.$theme, --base, --900),
-        --label:          props.get(core.$theme, --base, --800-text),
+        --label:          props.get(core.$theme, --base, --900-text),
-        --outline-border: props.get(core.$theme, --base, --800),
+        --outline-border: props.get(core.$theme, --base, --900),
        --outline-label:  props.get(core.$theme, --text),
        --hover: (
-            --bg:     props.get(core.$theme, --base, --900),
+            --bg:     props.get(core.$theme, --base, --800),
-            --label:  props.get(core.$theme, --base, --900-text),
+            --label:  props.get(core.$theme, --base, --800-text),
        ),
        --active: (
-            --bg:     props.get(core.$theme, --base, --900),
+            --bg:     props.get(core.$theme, --base, --700),
-            --label:  props.get(core.$theme, --base, --900-text),
+            --label:  props.get(core.$theme, --base, --700-text),
        ),
    ),
 ), 'color');
author	Volpeon <git@volpeon.ink>	2024-11-13 21:19:13 +0100
committer	Volpeon <git@volpeon.ink>	2024-11-13 21:19:13 +0100
commit	e0dc52dccd4a0019d4f495b98e17e299aac02e2d (patch)
tree	d4e1d35eaaf02b47f927d07fa5f3e526d6f60086
parent	Higher contrast badge / selected quiet action button (diff)
download	iro-design-e0dc52dccd4a0019d4f495b98e17e299aac02e2d.tar.gz iro-design-e0dc52dccd4a0019d4f495b98e17e299aac02e2d.tar.bz2 iro-design-e0dc52dccd4a0019d4f495b98e17e299aac02e2d.zip

diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 5ba6885..9de985a 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss
@@ -72,20 +72,20 @@ $default-theme: map.deep-merge((
72	),	72	),
73		73
74	--selected: (	74	--selected: (
75	--bg-color: props.get(core.$theme, --text),	75	--bg-color: props.get(core.$theme, --heading),
76	--label-color: props.get(core.$theme, --base, --50),	76	--label-color: props.get(core.$theme, --base, --50),
77	--border-color: props.get(core.$theme, --text-mute),	77	--border-color: props.get(core.$theme, --heading),
78		78
79	--hover: (	79	--hover: (
80	--bg-color: props.get(core.$theme, --heading),	80	--bg-color: props.get(core.$theme, --text),
81	--label-color: props.get(core.$theme, --base, --50),	81	--label-color: props.get(core.$theme, --base, --50),
82	--border-color: props.get(core.$theme, --text),	82	--border-color: props.get(core.$theme, --text),
83	),	83	),
84		84
85	--active: (	85	--active: (
86	--bg-color: props.get(core.$theme, --heading),	86	--bg-color: props.get(core.$theme, --text-mute),
87	--label-color: props.get(core.$theme, --base, --50),	87	--label-color: props.get(core.$theme, --base, --50),
88	--border-color: props.get(core.$theme, --heading),	88	--border-color: props.get(core.$theme, --text-mute),
89	),	89	),
90		90
91	--disabled: (	91	--disabled: (


diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index f33c662..6327e7b 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss
@@ -40,16 +40,16 @@ $sizes: (
40		40
41	$default-theme-override: () !default;	41	$default-theme-override: () !default;
42	$default-theme: props.def(--o-badge, (	42	$default-theme: props.def(--o-badge, (
43	--bg: props.get(core.$theme, --text),	43	--bg: props.get(core.$theme, --heading),
44	--label: props.get(core.$theme, --bg-l2),	44	--label: props.get(core.$theme, --bg-l2),
45		45
46	--hover: (	46	--hover: (
47	--bg: props.get(core.$theme, --heading),	47	--bg: props.get(core.$theme, --text),
48	--label: props.get(core.$theme, --bg-l2),	48	--label: props.get(core.$theme, --bg-l2),
49	),	49	),
50		50
51	--active: (	51	--active: (
52	--bg: props.get(core.$theme, --heading),	52	--bg: props.get(core.$theme, --text-mute),
53	--label: props.get(core.$theme, --bg-l2),	53	--label: props.get(core.$theme, --bg-l2),
54	),	54	),
55		55


diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 36400a2..f70bde7 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss
@@ -66,19 +66,19 @@ $default-theme: props.def(--o-button, (
66	),	66	),
67		67
68	--primary: (	68	--primary: (
69	--bg: props.get(core.$theme, --base, --800),	69	--bg: props.get(core.$theme, --base, --900),
70	--label: props.get(core.$theme, --base, --800-text),	70	--label: props.get(core.$theme, --base, --900-text),
71	--outline-border: props.get(core.$theme, --base, --800),	71	--outline-border: props.get(core.$theme, --base, --900),
72	--outline-label: props.get(core.$theme, --text),	72	--outline-label: props.get(core.$theme, --text),
73		73
74	--hover: (	74	--hover: (
75	--bg: props.get(core.$theme, --base, --900),	75	--bg: props.get(core.$theme, --base, --800),
76	--label: props.get(core.$theme, --base, --900-text),	76	--label: props.get(core.$theme, --base, --800-text),
77	),	77	),
78		78
79	--active: (	79	--active: (
80	--bg: props.get(core.$theme, --base, --900),	80	--bg: props.get(core.$theme, --base, --700),
81	--label: props.get(core.$theme, --base, --900-text),	81	--label: props.get(core.$theme, --base, --700-text),
82	),	82	),
83	),	83	),
84	), 'color');	84	), 'color');