summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-25 22:29:57 +0200
committerVolpeon <git@volpeon.ink>2024-06-25 22:29:57 +0200
commit231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466 (patch)
treee48e7b5ea098f3b556544b49de665a9ccde2e26c
parentAdded back action button (diff)
downloadiro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.tar.gz
iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.tar.bz2
iro-design-231b45ea9fe01ee0d8a7fcda0d7f9a2f4e435466.zip
Action button styling
Diffstat
-rw-r--r--src/_config.scss80
-rw-r--r--src/_declare-vars.scss2
-rw-r--r--src/objects/_action-button.scss116
3 files changed, 90 insertions, 108 deletions
diff --git a/src/_config.scss b/src/_config.scss
index da97476..56a74e1 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -69,6 +69,39 @@ $static-colors: (
69 ), 69 ),
70) !default; 70) !default;
71 71
72$semantic-colors-common: (
73 --accent: --blue,
74 --accent-static: --blue-static,
75 --positive: --green,
76 --positive-static: --green-static,
77 --negative: --red,
78 --negative-static: --red-static,
79 --warning: --yellow,
80 --warning-static: --yellow-static,
81
82 --focus-raw: --accent,
83 --focus-static: --accent-static,
84
85 --border-mute: --base --200,
86 --border: --base --300,
87 --border-strong: --base --400,
88
89 --text-disabled: --base --500,
90 --text-mute-more: --base --600,
91 --text-mute: --base --700,
92 --text: --base --800,
93 --heading: --base --900,
94
95 --focus: (
96 --outline: --focus-raw --400,
97 --border-mute: --focus-raw --900,
98 --border: --focus-raw --1000,
99 --border-text: --focus-raw --1000-text,
100 --border-strong: --focus-raw --1100,
101 --text: --focus-raw --1100,
102 ),
103) !default;
104
72$theme-light: ( 105$theme-light: (
73 --contrasts: ( 106 --contrasts: (
74 --grays: ( 107 --grays: (
@@ -117,6 +150,12 @@ $theme-light: (
117 --green: oklch(56% 0.16 150.48) --colors --muted, 150 --green: oklch(56% 0.16 150.48) --colors --muted,
118 --yellow: oklch(56% 0.16 84.08) --colors --muted, 151 --yellow: oklch(56% 0.16 84.08) --colors --muted,
119 ), 152 ),
153
154 --semantic: map.merge($semantic-colors-common, (
155 --bg-l2: --base --50,
156 --bg-l1: --base --100,
157 --bg-base: --base --200,
158 )),
120) !default; 159) !default;
121 160
122$theme-dark: ( 161$theme-dark: (
@@ -167,43 +206,12 @@ $theme-dark: (
167 --green: oklch(56% 0.16 150.48) --colors --muted, 206 --green: oklch(56% 0.16 150.48) --colors --muted,
168 --yellow: oklch(56% 0.16 84.08) --colors --muted, 207 --yellow: oklch(56% 0.16 84.08) --colors --muted,
169 ), 208 ),
170) !default;
171
172$semantic-colors: (
173 --accent: --blue,
174 --accent-static: --blue-static,
175 --positive: --green,
176 --positive-static: --green-static,
177 --negative: --red,
178 --negative-static: --red-static,
179 --warning: --yellow,
180 --warning-static: --yellow-static,
181
182 --focus-raw: --accent,
183 --focus-static: --accent-static,
184
185 --bg-l2: --base --50,
186 --bg-l1: --base --100,
187 --bg-base: --base --200,
188
189 --border-mute: --base --200,
190 --border: --base --300,
191 --border-strong: --base --400,
192
193 --text-disabled: --base --500,
194 --text-mute-more: --base --600,
195 --text-mute: --base --700,
196 --text: --base --800,
197 --heading: --base --900,
198 209
199 --focus: ( 210 --semantic: map.merge($semantic-colors-common, (
200 --outline: --focus-raw --400, 211 --bg-base: --base --50,
201 --border-mute: --focus-raw --900, 212 --bg-l1: --base --75,
202 --border: --focus-raw --1000, 213 --bg-l2: --base --100,
203 --border-text: --focus-raw --1000-text, 214 )),
204 --border-strong: --focus-raw --1100,
205 --text: --focus-raw --1100,
206 ),
207) !default; 215) !default;
208 216
209$themes: ( 217$themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index f657057..a38fb8c 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -227,7 +227,7 @@
227 ), $tree); 227 ), $tree);
228 } 228 }
229 229
230 @each $color, $ref in config.$semantic-colors { 230 @each $color, $ref in map.get($theme, --semantic) {
231 $res: (); 231 $res: ();
232 232
233 @if meta.type-of($ref) == 'map' { 233 @if meta.type-of($ref) == 'map' {
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 }
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 07:37:53 +0000