Action button styling

author: Volpeon <git@volpeon.ink> 2024-06-25 22:29:57 +0200
committer: Volpeon <git@volpeon.ink> 2024-06-25 22:29:57 +0200
commit: 231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466 (patch)
tree: e48e7b5ea098f3b556544b49de665a9ccde2e26c /src/objects
parent: Added back action button (diff)
download: iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.tar.gz
iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.tar.bz2
iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.zip
1 files changed, 45 insertions, 71 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6f0288d..6286f4e 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -22,7 +22,7 @@
            --border: fn.global-color(--border-strong),
    
            --hover: (
-                --bg:     fn.global-color(--base --50),
+                --bg:     fn.global-color(--border-mute),
                --label:  fn.global-color(--heading),
                --border: fn.global-color(--text-mute-more),
            ),
@@ -31,20 +31,31 @@
                --label:  fn.global-color(--heading),
                --border: fn.global-color(--text-mute-more),
            ),
+            --disabled: (
+                --bg:     fn.global-color(--bg-l1),
+                --label:  fn.global-color(--border-strong),
+                --border: fn.global-color(--border-mute),
+            ),
            --selected: (
-                --bg:     fn.global-color(--border-mute),
+                --bg:     fn.global-color(--text-mute),
-                --label:  fn.global-color(--text),
+                --label:  fn.global-color(--base --50),
-                --border: fn.global-color(--text-disabled),
+                --border: fn.global-color(--text-mute),
                --hover: (
-                    --label:  fn.global-color(--heading),
+                    --bg:     fn.global-color(--text),
-                    --border: fn.global-color(--text-mute-more),
+                    --label:  fn.global-color(--base --50),
+                    --border: fn.global-color(--text),
+                ),
+                --active: (
+                    --bg:     fn.global-color(--heading),
+                    --label:  fn.global-color(--base --50),
+                    --border: fn.global-color(--heading),
+                ),
+                --disabled: (
+                    --bg:     fn.global-color(--border-mute),
+                    --label:  fn.global-color(--border-strong),
+                    --border: fn.global-color(--border-mute),
                ),
-            ),
-            --disabled: (
-                --bg:     fn.global-color(--bg-base),
-                --label:  fn.global-color(--text-disabled),
-                --border: fn.global-color(--border-mute),
            ),
            --key-focus: (
                --border:  fn.global-color(--focus --border),
@@ -61,15 +72,6 @@
                    --bg:    fn.global-color(--border),
                    --label: fn.global-color(--heading),
                ),
-                --selected: (
-                    --bg:    fn.global-color(--border-mute),
-                    --label: fn.global-color(--text),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--border),
-                        --label: fn.global-color(--heading),
-                    ),
-                ),
                --disabled: (
                    --label: fn.global-color(--text-disabled),
                ),
@@ -132,31 +134,6 @@
            }
        }
    
-        @include iro.bem-is('selected') {
-            &:link,
-            &:visited,
-            &:enabled {
-                border-color:     fn.color(--selected --border);
-                background-color: fn.color(--selected --bg);
-                color:            fn.color(--selected --label);
-        
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    border-color:     fn.color(--selected --hover --border);
-                    background-color: fn.color(--selected --bg);
-                    color:            fn.color(--selected --hover --label);
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        background-color: fn.color(--selected --bg);
-                        color:            fn.color(--selected --hover --label);
-                    }
-                }
-            }
-        }
-    
        @include iro.bem-modifier('quiet') {
            border-color:     transparent;
            background-color: transparent;
@@ -185,35 +162,32 @@
                    box-shadow:       none;
                    color:            fn.color(--quiet --active --label);
                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        background-color: fn.color(--quiet --hover --bg);
-                        color:            fn.color(--quiet --hover --label);
-                    }
-                }
            }
+        }
    
-            @include iro.bem-is('selected') {
+        @include iro.bem-is('selected') {
-                background-color: fn.color(--quiet --selected --bg);
+            border-color:     fn.color(--selected --disabled --border);
-                color:            fn.color(--quiet --disabled --label);
+            background-color: fn.color(--selected --disabled --bg);
+            color:            fn.color(--selected --disabled --label);
-                &:link,
-                &:visited,
-                &:enabled {
-                    border-color:     transparent;
-                    background-color: fn.color(--quiet --selected --bg);
-                    box-shadow:       none;
-                    color:            fn.color(--quiet --selected --label);
-                    &:hover,
+            &:link,
-                    &:active,
+            &:visited,
-                    &:focus-visible {
+            &:enabled {
-                        border-color:     transparent;
+                border-color:     fn.color(--selected --border);
-                        background-color: fn.color(--quiet --selected --hover --bg);
+                background-color: fn.color(--selected --bg);
-                        box-shadow:       none;
+                color:            fn.color(--selected --label);
-                        color:            fn.color(--quiet --selected --hover --label);
+        
-                    }
+                &:hover,
+                &:focus-visible {
+                    border-color:     fn.color(--selected --hover --border);
+                    background-color: fn.color(--selected --hover --bg);
+                    color:            fn.color(--selected --hover --label);
+                }
+        
+                &:active {
+                    border-color:     fn.color(--selected --active --border);
+                    background-color: fn.color(--selected --active --bg);
+                    color:            fn.color(--selected --active --label);
                }
            }
        }
author	Volpeon <git@volpeon.ink>	2024-06-25 22:29:57 +0200
committer	Volpeon <git@volpeon.ink>	2024-06-25 22:29:57 +0200
commit	231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466 (patch)
tree	e48e7b5ea098f3b556544b49de665a9ccde2e26c /src/objects
parent	Added back action button (diff)
download	iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.tar.gz iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.tar.bz2 iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.zip

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 6f0288d..6286f4e 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss
@@ -22,7 +22,7 @@
22	--border: fn.global-color(--border-strong),	22	--border: fn.global-color(--border-strong),
23		23
24	--hover: (	24	--hover: (
25	--bg: fn.global-color(--base --50),	25	--bg: fn.global-color(--border-mute),
26	--label: fn.global-color(--heading),	26	--label: fn.global-color(--heading),
27	--border: fn.global-color(--text-mute-more),	27	--border: fn.global-color(--text-mute-more),
28	),	28	),
@@ -31,20 +31,31 @@
31	--label: fn.global-color(--heading),	31	--label: fn.global-color(--heading),
32	--border: fn.global-color(--text-mute-more),	32	--border: fn.global-color(--text-mute-more),
33	),	33	),
		34	--disabled: (
		35	--bg: fn.global-color(--bg-l1),
		36	--label: fn.global-color(--border-strong),
		37	--border: fn.global-color(--border-mute),
		38	),
34	--selected: (	39	--selected: (
35	--bg: fn.global-color(--border-mute),	40	--bg: fn.global-color(--text-mute),
36	--label: fn.global-color(--text),	41	--label: fn.global-color(--base --50),
37	--border: fn.global-color(--text-disabled),	42	--border: fn.global-color(--text-mute),
38		43
39	--hover: (	44	--hover: (
40	--label: fn.global-color(--heading),	45	--bg: fn.global-color(--text),
41	--border: fn.global-color(--text-mute-more),	46	--label: fn.global-color(--base --50),
		47	--border: fn.global-color(--text),
		48	),
		49	--active: (
		50	--bg: fn.global-color(--heading),
		51	--label: fn.global-color(--base --50),
		52	--border: fn.global-color(--heading),
		53	),
		54	--disabled: (
		55	--bg: fn.global-color(--border-mute),
		56	--label: fn.global-color(--border-strong),
		57	--border: fn.global-color(--border-mute),
42	),	58	),
43	),
44	--disabled: (
45	--bg: fn.global-color(--bg-base),
46	--label: fn.global-color(--text-disabled),
47	--border: fn.global-color(--border-mute),
48	),	59	),
49	--key-focus: (	60	--key-focus: (
50	--border: fn.global-color(--focus --border),	61	--border: fn.global-color(--focus --border),
@@ -61,15 +72,6 @@
61	--bg: fn.global-color(--border),	72	--bg: fn.global-color(--border),
62	--label: fn.global-color(--heading),	73	--label: fn.global-color(--heading),
63	),	74	),
64	--selected: (
65	--bg: fn.global-color(--border-mute),
66	--label: fn.global-color(--text),
67
68	--hover: (
69	--bg: fn.global-color(--border),
70	--label: fn.global-color(--heading),
71	),
72	),
73	--disabled: (	75	--disabled: (
74	--label: fn.global-color(--text-disabled),	76	--label: fn.global-color(--text-disabled),
75	),	77	),
@@ -132,31 +134,6 @@
132	}	134	}
133	}	135	}
134		136
135	@include iro.bem-is('selected') {
136	&:link,
137	&:visited,
138	&:enabled {
139	border-color: fn.color(--selected --border);
140	background-color: fn.color(--selected --bg);
141	color: fn.color(--selected --label);
142
143	&:hover,
144	&:active,
145	&:focus-visible {
146	border-color: fn.color(--selected --hover --border);
147	background-color: fn.color(--selected --bg);
148	color: fn.color(--selected --hover --label);
149	}
150
151	@include iro.bem-at-theme('keyboard') {
152	&:focus {
153	background-color: fn.color(--selected --bg);
154	color: fn.color(--selected --hover --label);
155	}
156	}
157	}
158	}
159
160	@include iro.bem-modifier('quiet') {	137	@include iro.bem-modifier('quiet') {
161	border-color: transparent;	138	border-color: transparent;
162	background-color: transparent;	139	background-color: transparent;
@@ -185,35 +162,32 @@
185	box-shadow: none;	162	box-shadow: none;
186	color: fn.color(--quiet --active --label);	163	color: fn.color(--quiet --active --label);
187	}	164	}
188
189	@include iro.bem-at-theme('keyboard') {
190	&:focus {
191	background-color: fn.color(--quiet --hover --bg);
192	color: fn.color(--quiet --hover --label);
193	}
194	}
195	}	165	}
		166	}
196		167
197	@include iro.bem-is('selected') {	168	@include iro.bem-is('selected') {
198	background-color: fn.color(--quiet --selected --bg);	169	border-color: fn.color(--selected --disabled --border);
199	color: fn.color(--quiet --disabled --label);	170	background-color: fn.color(--selected --disabled --bg);
200		171	color: fn.color(--selected --disabled --label);
201	&:link,
202	&:visited,
203	&:enabled {
204	border-color: transparent;
205	background-color: fn.color(--quiet --selected --bg);
206	box-shadow: none;
207	color: fn.color(--quiet --selected --label);
208		172
209	&:hover,	173	&:link,
210	&:active,	174	&:visited,
211	&:focus-visible {	175	&:enabled {
212	border-color: transparent;	176	border-color: fn.color(--selected --border);
213	background-color: fn.color(--quiet --selected --hover --bg);	177	background-color: fn.color(--selected --bg);
214	box-shadow: none;	178	color: fn.color(--selected --label);
215	color: fn.color(--quiet --selected --hover --label);	179
216	}	180	&:hover,
		181	&:focus-visible {
		182	border-color: fn.color(--selected --hover --border);
		183	background-color: fn.color(--selected --hover --bg);
		184	color: fn.color(--selected --hover --label);
		185	}
		186
		187	&:active {
		188	border-color: fn.color(--selected --active --border);
		189	background-color: fn.color(--selected --active --bg);
		190	color: fn.color(--selected --active --label);
217	}	191	}
218	}	192	}
219	}	193	}