summaryrefslogtreecommitdiffstats
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
parentFix again (diff)
downloadiro-design-894aee1a5ca3f01292f6db7da9a903fdb2235065.tar.gz
iro-design-894aee1a5ca3f01292f6db7da9a903fdb2235065.tar.bz2
iro-design-894aee1a5ca3f01292f6db7da9a903fdb2235065.zip
Update
Diffstat
-rw-r--r--src/_declare-vars.scss12
-rw-r--r--src/_functions.scss22
-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
-rw-r--r--src/scopes/_code.scss4
-rw-r--r--src/scopes/_colored-links.scss6
-rw-r--r--src/scopes/_invisible-links.scss2
-rw-r--r--tpl/objects/overflow-button.pug3
-rw-r--r--tpl/views/overflow-button.pug27
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 @@
215 215
216 --selection: ( 216 --selection: (
217 --bg: fn.color(--accent --primary --selection, null), 217 --bg: fn.color(--accent --primary --selection, null),
218 --bg-img: fn.color(--accent --primary --semi, null), 218 --bg-img: fn.color(--accent --primary --quiet --obj-lo, null),
219 --fg: fn.color(--accent --primary --fg, null), 219 --fg: fn.color(--accent --primary --solid --fg, null),
220 ), 220 ),
221 221
222 --focus: ( 222 --focus: (
223 --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --semi, null), 223 --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null),
224 --fill: fn.color(--accent --primary --bg, null), 224 --fill: fn.color(--accent --primary --solid --bg, null),
225 --text: fn.color(--accent --primary --obj, null), 225 --text: fn.color(--accent --primary --solid --obj, null),
226 --fill-text: fn.color(--accent --primary --fg, null), 226 --fill-text: fn.color(--accent --primary --solid --fg, null),
227 ), 227 ),
228 ), 228 ),
229), 'colors'); 229), '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 @@
106 106
107@function color-palette($base, $dir: 1) { 107@function color-palette($base, $dir: 1) {
108 @return ( 108 @return (
109 --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%), 109 --solid: (
110 --bg: $base, 110 --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%),
111 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%), 111 --bg: $base,
112 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%), 112 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%),
113 --faint: rgba($base, .1), 113 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
114 --semi: rgba($base, .4), 114 --fg: blend.contrast($base),
115 ),
116 --quiet: (
117 --bg: rgba($base, .1),
118 --obj: rgba($base, .2),
119 --obj-lo: rgba($base, .4),
120 --fg-hi: $base,
121 --fg: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%),
122 --fg-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
123 ),
115 --selection: rgba($base, .99), 124 --selection: rgba($base, .99),
116 --fg: blend.contrast($base),
117 ); 125 );
118} 126}
119 127
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 ),
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 @@
21 @include iro.props-store(( 21 @include iro.props-store((
22 --colors: ( 22 --colors: (
23 --inline: ( 23 --inline: (
24 --fg: fn.global-color(--red --obj-lo), 24 --fg: fn.global-color(--red --quiet --fg),
25 --bg: fn.global-color(--red --faint), 25 --bg: fn.global-color(--red --quiet --obj-lo),
26 ), 26 ),
27 --block: ( 27 --block: (
28 --fg: fn.global-color(--fg), 28 --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 @@
4@include iro.props-namespace('colored-links') { 4@include iro.props-namespace('colored-links') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --colors: ( 6 --colors: (
7 --idle: fn.global-color(--accent --link-idle --obj-lo), 7 --idle: fn.global-color(--accent --link-idle --quiet --fg-lo),
8 --visited: fn.global-color(--accent --link-visited --obj-lo), 8 --visited: fn.global-color(--accent --link-visited --quiet --fg-lo),
9 --key-focus: ( 9 --key-focus: (
10 --border: fn.global-color(--focus --fill), 10 --border: fn.global-color(--focus --fill),
11 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), 11 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo),
12 ), 12 ),
13 ) 13 )
14 ), 'colors'); 14 ), '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 @@
6 --colors: ( 6 --colors: (
7 --key-focus: ( 7 --key-focus: (
8 --border: fn.global-color(--focus --fill), 8 --border: fn.global-color(--focus --fill),
9 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --semi), 9 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --bg),
10 ), 10 ),
11 ) 11 )
12 ), 'colors'); 12 ), '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
7 'u-d-block': attributes.block, 7 'u-d-block': attributes.block,
8 'is-selected': attributes.selected 8 'is-selected': attributes.selected
9 } 9 }
10 if (attributes.variant) {
11 classes['o-overflow-button--' + attributes.variant] = true
12 }
10 if (attributes.class) { 13 if (attributes.class) {
11 classes[attributes.class] = true; 14 classes[attributes.class] = true;
12 } 15 }
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
8 +overflow-button(icon='trash' disabled=true)= 'Disabled' 8 +overflow-button(icon='trash' disabled=true)= 'Disabled'
9 = ' ' 9 = ' '
10 +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' 10 +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
11
12 .c-box
13 +overflow-button(icon='trash' variant='red')= '123'
14 = ' '
15 +overflow-button(icon='trash' variant='red' selected=true)= 'Delete'
16 = ' '
17 +overflow-button(icon='trash' variant='red' disabled=true)= 'Disabled'
18 = ' '
19 +overflow-button(icon='trash' variant='red' selected=true disabled=true)= 'Selected + disabled'
20
21 .c-box
22 +overflow-button(icon='trash' variant='blue')= '123'
23 = ' '
24 +overflow-button(icon='trash' variant='blue' selected=true)= 'Delete'
25 = ' '
26 +overflow-button(icon='trash' variant='blue' disabled=true)= 'Disabled'
27 = ' '
28 +overflow-button(icon='trash' variant='blue' selected=true disabled=true)= 'Selected + disabled'
29
30 .c-box
31 +overflow-button(icon='trash' variant='green')= '123'
32 = ' '
33 +overflow-button(icon='trash' variant='green' selected=true)= 'Delete'
34 = ' '
35 +overflow-button(icon='trash' variant='green' disabled=true)= 'Disabled'
36 = ' '
37 +overflow-button(icon='trash' variant='green' selected=true disabled=true)= 'Selected + disabled'
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 07:27:12 +0000