summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-02-12 20:48:13 +0100
committerVolpeon <git@volpeon.ink>2023-02-12 20:48:13 +0100
commit894aee1a5ca3f01292f6db7da9a903fdb2235065 (patch)
tree39caa2c8160b1a526034c808aa6bdbca4c147432 /src/objects
parentFix again (diff)
downloadiro-design-894aee1a5ca3f01292f6db7da9a903fdb2235065.tar.gz
iro-design-894aee1a5ca3f01292f6db7da9a903fdb2235065.tar.bz2
iro-design-894aee1a5ca3f01292f6db7da9a903fdb2235065.zip
Update
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_alert.scss8
-rw-r--r--src/objects/_badge.scss8
-rw-r--r--src/objects/_button.scss14
-rw-r--r--src/objects/_checkbox.scss4
-rw-r--r--src/objects/_field-label.scss2
-rw-r--r--src/objects/_overflow-button.scss98
-rw-r--r--src/objects/_radio.scss4
-rw-r--r--src/objects/_status-indicator.scss6
-rw-r--r--src/objects/_switch.scss4
-rw-r--r--src/objects/_text-field.scss8
10 files changed, 127 insertions, 29 deletions
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 @@
15 --colors: ( 15 --colors: (
16 --bg: fn.global-color(--bg-hi2), 16 --bg: fn.global-color(--bg-hi2),
17 --border: fn.global-color(--fg-hi2), 17 --border: fn.global-color(--fg-hi2),
18 --border-primary: fn.global-color(--accent --primary --bg-hi), 18 --border-primary: fn.global-color(--accent --primary --solid --bg-hi),
19 --border-error: fn.global-color(--accent --error --bg-hi), 19 --border-error: fn.global-color(--accent --error --solid --bg-hi),
20 --border-success: fn.global-color(--accent --success --bg-hi), 20 --border-success: fn.global-color(--accent --success --solid --bg-hi),
21 --border-warning: fn.global-color(--accent --warning --bg-hi), 21 --border-warning: fn.global-color(--accent --warning --solid --bg-hi),
22 ), 22 ),
23 ), 'colors'); 23 ), 'colors');
24 24
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 @@
34 ), 34 ),
35 35
36 --accent: ( 36 --accent: (
37 --bg: fn.global-color(--accent --primary --bg), 37 --bg: fn.global-color(--accent --primary --solid --bg),
38 --label: fn.global-color(--accent --primary --fg), 38 --label: fn.global-color(--accent --primary --solid --fg),
39 --hover: ( 39 --hover: (
40 --bg: fn.global-color(--accent --primary --obj), 40 --bg: fn.global-color(--accent --primary --solid --obj),
41 ), 41 ),
42 --active: ( 42 --active: (
43 --bg: fn.global-color(--accent --primary --obj-lo), 43 --bg: fn.global-color(--accent --primary --solid --obj-lo),
44 ), 44 ),
45 ), 45 ),
46 ), 46 ),
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 @@
65 ), 65 ),
66 ), 66 ),
67 --accent: ( 67 --accent: (
68 --bg: fn.global-color(--accent --primary --bg), 68 --bg: fn.global-color(--accent --primary --solid --bg),
69 --label: fn.global-color(--accent --primary --fg), 69 --label: fn.global-color(--accent --primary --solid --fg),
70 --outline-label: fn.global-color(--accent --primary --obj), 70 --outline-label: fn.global-color(--accent --primary --solid --obj),
71 --shadow: 0 0 0 0 transparent, 71 --shadow: 0 0 0 0 transparent,
72 72
73 --hover: ( 73 --hover: (
74 --bg: fn.global-color(--accent --primary --obj), 74 --bg: fn.global-color(--accent --primary --solid --obj),
75 --label: fn.global-color(--accent --primary --fg), 75 --label: fn.global-color(--accent --primary --solid --fg),
76 --shadow: 0 0 0 0 transparent, 76 --shadow: 0 0 0 0 transparent,
77 ), 77 ),
78 --active: ( 78 --active: (
79 --bg: fn.global-color(--accent --primary --obj-lo), 79 --bg: fn.global-color(--accent --primary --solid --obj-lo),
80 --label: fn.global-color(--accent --primary --fg), 80 --label: fn.global-color(--accent --primary --solid --fg),
81 --shadow: 0 0 0 0 transparent, 81 --shadow: 0 0 0 0 transparent,
82 ), 82 ),
83 ), 83 ),
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 @@
22 --box-border: fn.global-color(--fg), 22 --box-border: fn.global-color(--fg),
23 ), 23 ),
24 --accent: ( 24 --accent: (
25 --box-border: fn.global-color(--accent --primary --bg), 25 --box-border: fn.global-color(--accent --primary --solid --bg),
26 26
27 --hover: ( 27 --hover: (
28 --box-border: fn.global-color(--accent --primary --obj), 28 --box-border: fn.global-color(--accent --primary --solid --obj),
29 ), 29 ),
30 ), 30 ),
31 --key-focus: ( 31 --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 @@
15 --colors: ( 15 --colors: (
16 --label: fn.global-color(--fg-hi), 16 --label: fn.global-color(--fg-hi),
17 --hint: fn.global-color(--fg-hi), 17 --hint: fn.global-color(--fg-hi),
18 --error-hint: fn.global-color(--accent --error --bg), 18 --error-hint: fn.global-color(--accent --error --quiet --fg),
19 --disabled: fn.global-color(--fg-hi3), 19 --disabled: fn.global-color(--fg-hi3),
20 ), 20 ),
21 ), 'colors'); 21 ), '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 @@
37 --border: fn.global-color(--focus --fill), 37 --border: fn.global-color(--focus --fill),
38 --shadow: fn.global-color(--focus --shadow), 38 --shadow: fn.global-color(--focus --shadow),
39 ), 39 ),
40
41 --red: (
42 --hover: (
43 --bg: fn.global-color(--red --quiet --bg),
44 --label: fn.global-color(--red --quiet --fg),
45 ),
46 --active: (
47 --bg: fn.global-color(--red --quiet --obj),
48 --label: fn.global-color(--red --quiet --fg-lo),
49 ),
50 --selected: (
51 --bg: fn.global-color(--red --quiet --bg),
52 --label: fn.global-color(--red --quiet --fg),
53
54 --hover: (
55 --label: fn.global-color(--red --quiet --fg-lo),
56 ),
57 ),
58 ),
59
60 --blue: (
61 --hover: (
62 --bg: fn.global-color(--blue --quiet --bg),
63 --label: fn.global-color(--blue --quiet --fg),
64 ),
65 --active: (
66 --bg: fn.global-color(--blue --quiet --obj),
67 --label: fn.global-color(--blue --quiet --fg-lo),
68 ),
69 --selected: (
70 --bg: fn.global-color(--blue --quiet --bg),
71 --label: fn.global-color(--blue --quiet --fg),
72
73 --hover: (
74 --label: fn.global-color(--blue --quiet --fg-lo),
75 ),
76 ),
77 ),
78
79 --green: (
80 --hover: (
81 --bg: fn.global-color(--green --quiet --bg),
82 --label: fn.global-color(--green --quiet --fg),
83 ),
84 --active: (
85 --bg: fn.global-color(--green --quiet --obj),
86 --label: fn.global-color(--green --quiet --fg-lo),
87 ),
88 --selected: (
89 --bg: fn.global-color(--green --quiet --bg),
90 --label: fn.global-color(--green --quiet --fg),
91
92 --hover: (
93 --label: fn.global-color(--green --quiet --fg-lo),
94 ),
95 ),
96 )
40 ), 97 ),
41 ), 'colors'); 98 ), 'colors');
42 99
@@ -122,6 +179,47 @@
122 } 179 }
123 } 180 }
124 } 181 }
182
183 @each $color in 'red' 'blue' 'green' {
184 @include iro.bem-modifier($color) {
185 &:link,
186 &:visited,
187 &:enabled {
188 &:hover {
189 @include iro.bem-elem('inside') {
190 background-color: fn.color(--#{$color} --hover --bg);
191 color: fn.color(--#{$color} --hover --label);
192 }
193 }
194
195 &:active {
196 @include iro.bem-elem('inside') {
197 background-color: fn.color(--#{$color} --active --bg);
198 color: fn.color(--#{$color} --active --label);
199 }
200 }
201 }
202
203 @include iro.bem-is('selected') {
204 &:link,
205 &:visited,
206 &:enabled {
207 @include iro.bem-elem('inside') {
208 background-color: fn.color(--#{$color} --selected --bg);
209 color: fn.color(--#{$color} --selected --label);
210 }
211
212 &:hover,
213 &:active {
214 @include iro.bem-elem('inside') {
215 background-color: fn.color(--#{$color} --selected --bg);
216 color: fn.color(--#{$color} --selected --hover --label);
217 }
218 }
219 }
220 }
221 }
222 }
125 223
126 @include iro.bem-at-theme('keyboard') { 224 @include iro.bem-at-theme('keyboard') {
127 &:focus { 225 &: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 @@
22 --circle-border: fn.global-color(--fg), 22 --circle-border: fn.global-color(--fg),
23 ), 23 ),
24 --accent: ( 24 --accent: (
25 --circle-border: fn.global-color(--accent --primary --bg), 25 --circle-border: fn.global-color(--accent --primary --solid --bg),
26 26
27 --hover: ( 27 --hover: (
28 --circle-border: fn.global-color(--accent --primary --obj), 28 --circle-border: fn.global-color(--accent --primary --solid --obj),
29 ), 29 ),
30 ), 30 ),
31 --key-focus: ( 31 --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 @@
11 @include iro.props-store(( 11 @include iro.props-store((
12 --colors: ( 12 --colors: (
13 --default: fn.global-color(--obj-lo), 13 --default: fn.global-color(--obj-lo),
14 --green: fn.global-color(--green --bg-hi), 14 --green: fn.global-color(--green --solid --bg-hi),
15 --yellow: fn.global-color(--yellow --bg-hi), 15 --yellow: fn.global-color(--yellow --solid --bg-hi),
16 --red: fn.global-color(--red --bg-hi), 16 --red: fn.global-color(--red --solid --bg-hi),
17 ), 17 ),
18 ), 'colors'); 18 ), 'colors');
19 19
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 @@
24 --handle-border: fn.global-color(--fg), 24 --handle-border: fn.global-color(--fg),
25 ), 25 ),
26 --accent: ( 26 --accent: (
27 --handle-border: fn.global-color(--accent --primary --bg), 27 --handle-border: fn.global-color(--accent --primary --solid --bg),
28 28
29 --hover: ( 29 --hover: (
30 --handle-border: fn.global-color(--accent --primary --obj), 30 --handle-border: fn.global-color(--accent --primary --solid --obj),
31 ), 31 ),
32 ), 32 ),
33 --key-focus: ( 33 --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 @@
61 --shadow: 0 0 0 0 transparent, 61 --shadow: 0 0 0 0 transparent,
62 ), 62 ),
63 --focus: ( 63 --focus: (
64 --border: fn.global-color(--accent --primary --bg), 64 --border: fn.global-color(--accent --primary --solid --bg),
65 --shadow: 0 0 0 0 transparent, 65 --shadow: 0 0 0 0 transparent,
66 ), 66 ),
67 --key-focus: ( 67 --key-focus: (
@@ -69,15 +69,15 @@
69 --shadow: fn.global-color(--focus --shadow), 69 --shadow: fn.global-color(--focus --shadow),
70 ), 70 ),
71 --error: ( 71 --error: (
72 --border: fn.global-color(--accent --error --bg-hi), 72 --border: fn.global-color(--accent --error --solid --bg-hi),
73 --shadow: 0 0 0 0 transparent, 73 --shadow: 0 0 0 0 transparent,
74 74
75 --hover: ( 75 --hover: (
76 --border: fn.global-color(--accent --error --bg), 76 --border: fn.global-color(--accent --error --solid --bg),
77 --shadow: 0 0 0 0 transparent, 77 --shadow: 0 0 0 0 transparent,
78 ), 78 ),
79 --focus: ( 79 --focus: (
80 --border: fn.global-color(--accent --error --bg), 80 --border: fn.global-color(--accent --error --solid --bg),
81 --shadow: 0 0 0 0 transparent, 81 --shadow: 0 0 0 0 transparent,
82 ), 82 ),
83 ), 83 ),
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-25 22:31:14 +0000