summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-07 21:31:41 +0100
committerVolpeon <git@volpeon.ink>2022-02-07 21:31:41 +0100
commit52bc737136ac132790cfeaa4bbaca748feb404a9 (patch)
tree653de63a841a3dd30f7572b47af5c9e4ca31c1d6
parentUpdate (diff)
downloadiro-design-52bc737136ac132790cfeaa4bbaca748feb404a9.tar.gz
iro-design-52bc737136ac132790cfeaa4bbaca748feb404a9.tar.bz2
iro-design-52bc737136ac132790cfeaa4bbaca748feb404a9.zip
Improved accent handling
Diffstat
-rw-r--r--src/_apply-vars.scss12
-rw-r--r--src/_vars.scss69
-rw-r--r--src/objects/_button.scss16
-rw-r--r--src/objects/_checkbox.scss4
-rw-r--r--src/objects/_field-label.scss2
-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
9 files changed, 48 insertions, 77 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index cf4c940..5d18afe 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -27,24 +27,12 @@
27 } 27 }
28} 28}
29 29
30@include iro.bem-theme('grayscale') {
31 @include iro.props-assign('colors', $root: --colors --grayscale-accent, $prefix: --colors --accent);
32}
33
34/*@media (prefers-color-scheme: dark) { 30/*@media (prefers-color-scheme: dark) {
35 @include iro.props-assign('dark'); 31 @include iro.props-assign('dark');
36 @include iro.props-assign('dark-palette'); 32 @include iro.props-assign('dark-palette');
37 33
38 @include iro.bem-theme('grayscale') {
39 @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
40 }
41
42 @include iro.bem-theme('raised') { 34 @include iro.bem-theme('raised') {
43 @include iro.props-assign('dark-raised-palette'); 35 @include iro.props-assign('dark-raised-palette');
44 @include iro.props-assign('dark'); 36 @include iro.props-assign('dark');
45
46 @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
47 @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
48 }
49 } 37 }
50}*/ 38}*/
diff --git a/src/_vars.scss b/src/_vars.scss
index 825ec9c..fd369f7 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -85,11 +85,19 @@ media.$unit-intervals: (
85 85
86// 86//
87 87
88@include iro.fn-execute { 88@function accent-palette($base) {
89 $primary-accent-base: hsl(222, 49.8%, 52.4%); 89 @return (
90 $error-accent-base: hsl(352, 49.8%, 52.4%); 90 --hi: scale-color($base, $lightness: 15%),
91 $success-accent-base: hsl(113, 49.8%, 39.6%); 91 --main: $base,
92 --lo: scale-color($base, $lightness: -15%),
93 --lo2: scale-color($base, $lightness: -25%),
94 --semi: rgba($base, .4),
95 --selection: rgba($base, .99),
96 --fg: #fff,
97 );
98}
92 99
100@include iro.fn-execute {
93 @include iro.props-store(( 101 @include iro.props-store((
94 --colors: ( 102 --colors: (
95 --bg-hi2: fn.color(--gray1, null), // Lightest background 103 --bg-hi2: fn.color(--gray1, null), // Lightest background
@@ -107,52 +115,27 @@ media.$unit-intervals: (
107 --fg-lo: fn.color(--gray11, null), // Strong text 115 --fg-lo: fn.color(--gray11, null), // Strong text
108 116
109 --accent: ( 117 --accent: (
110 --primary-const-hi: scale-color($primary-accent-base, $lightness: 15%), 118 --blue: accent-palette(hsl(222, 49.8%, 52.4%)),
111 --primary-const: $primary-accent-base, 119 --red: accent-palette(hsl(352, 49.8%, 52.4%)),
112 --primary-const-lo: scale-color($primary-accent-base, $lightness: -15%), 120 --green: accent-palette(hsl(113, 49.8%, 39.6%)),
113 --primary-const-lo2: scale-color($primary-accent-base, $lightness: -25%), 121 --yellow: accent-palette(hsl(50, 59.8%, 52.4%)),
114 --primary-const-semi: rgba($primary-accent-base, .4),
115 --primary-const-selection: rgba($primary-accent-base, .99),
116 --primary-const-fg: #fff,
117
118 --primary-hi: fn.color(--accent --primary-const-hi, null),
119 --primary: fn.color(--accent --primary-const, null),
120 --primary-lo: fn.color(--accent --primary-const-lo, null),
121 --primary-lo2: fn.color(--accent --primary-const-lo2, null),
122 --primary-fg: fn.color(--accent --primary-const-fg, null),
123
124 --error-hi: scale-color($error-accent-base, $lightness: 15%),
125 --error: $error-accent-base,
126 --error-lo: scale-color($error-accent-base, $lightness: -15%),
127 --error-lo2: scale-color($error-accent-base, $lightness: -25%),
128 --error-fg: #fff,
129
130 --success-hi: scale-color($success-accent-base, $lightness: 15%),
131 --success: $success-accent-base,
132 --success-lo: scale-color($success-accent-base, $lightness: -15%),
133 --success-lo2: scale-color($success-accent-base, $lightness: -25%),
134 --success-fg: #fff,
135 ),
136 122
137 --grayscale-accent: ( 123 --primary: iro.props-ref('colors', --colors --accent --blue),
138 --primary-hi: fn.color(--fg-hi2, null), 124 --error: iro.props-ref('colors', --colors --accent --red),
139 --primary: fn.color(--fg-hi, null), 125 --success: iro.props-ref('colors', --colors --accent --green),
140 --primary-lo: fn.color(--fg, null),
141 --primary-lo2: fn.color(--fg-lo, null),
142 --primary-fg: #fff,
143 ), 126 ),
144 127
145 --selection: ( 128 --selection: (
146 --bg: fn.color(--accent --primary-const-selection, null), 129 --bg: fn.color(--accent --primary --selection, null),
147 --bg-img: fn.color(--accent --primary-const-semi, null), 130 --bg-img: fn.color(--accent --primary --semi, null),
148 --fg: fn.color(--accent --primary-const-fg, null), 131 --fg: fn.color(--accent --primary --fg, null),
149 ), 132 ),
150 133
151 --focus: ( 134 --focus: (
152 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary-const-semi, null), 135 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
153 --fill: fn.color(--accent --primary-const, null), 136 --fill: fn.color(--accent --primary --main, null),
154 --text: fn.color(--accent --primary-const-lo, null), 137 --text: fn.color(--accent --primary --lo, null),
155 --fill-text: fn.color(--accent --primary-const-fg, null), 138 --fill-text: fn.color(--accent --primary --fg, null),
156 ), 139 ),
157 ), 140 ),
158 ), 'colors'); 141 ), 'colors');
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 32d1193..0df0148 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -51,25 +51,25 @@
51 ), 51 ),
52 --key-focus: ( 52 --key-focus: (
53 --bg: transparent, 53 --bg: transparent,
54 --label: fn.global-color(--accent --primary-lo2), 54 --label: fn.global-color(--accent --primary --lo2),
55 --border: fn.global-color(--focus --fill), 55 --border: fn.global-color(--focus --fill),
56 --shadow: fn.global-color(--focus --shadow), 56 --shadow: fn.global-color(--focus --shadow),
57 ), 57 ),
58 ), 58 ),
59 --accent: ( 59 --accent: (
60 --bg: fn.global-color(--accent --primary), 60 --bg: fn.global-color(--accent --primary --main),
61 --label: fn.global-color(--accent --primary-fg), 61 --label: fn.global-color(--accent --primary --fg),
62 --outline-label: fn.global-color(--accent --primary-lo), 62 --outline-label: fn.global-color(--accent --primary --lo),
63 --shadow: 0 0 0 0 transparent, 63 --shadow: 0 0 0 0 transparent,
64 64
65 --hover: ( 65 --hover: (
66 --bg: fn.global-color(--accent --primary-lo), 66 --bg: fn.global-color(--accent --primary --lo),
67 --label: fn.global-color(--accent --primary-fg), 67 --label: fn.global-color(--accent --primary --fg),
68 --shadow: 0 0 0 0 transparent, 68 --shadow: 0 0 0 0 transparent,
69 ), 69 ),
70 --active: ( 70 --active: (
71 --bg: fn.global-color(--accent --primary-lo2), 71 --bg: fn.global-color(--accent --primary --lo2),
72 --label: fn.global-color(--accent --primary-fg), 72 --label: fn.global-color(--accent --primary --fg),
73 --shadow: 0 0 0 0 transparent, 73 --shadow: 0 0 0 0 transparent,
74 ), 74 ),
75 ), 75 ),
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index efc85d6..053a6ab 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -23,10 +23,10 @@
23 --box-border: fn.global-color(--fg), 23 --box-border: fn.global-color(--fg),
24 ), 24 ),
25 --accent: ( 25 --accent: (
26 --box-border: fn.global-color(--accent --primary), 26 --box-border: fn.global-color(--accent --primary --main),
27 27
28 --hover: ( 28 --hover: (
29 --box-border: fn.global-color(--accent --primary-lo), 29 --box-border: fn.global-color(--accent --primary --lo),
30 ), 30 ),
31 ), 31 ),
32 --key-focus: ( 32 --key-focus: (
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index aaa5cca..66f5ef7 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), 17 --hint: fn.global-color(--fg),
18 --error-hint: fn.global-color(--accent --error), 18 --error-hint: fn.global-color(--accent --error --main),
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/_radio.scss b/src/objects/_radio.scss
index 46f2a2a..b27766e 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -23,10 +23,10 @@
23 --circle-border: fn.global-color(--fg), 23 --circle-border: fn.global-color(--fg),
24 ), 24 ),
25 --accent: ( 25 --accent: (
26 --circle-border: fn.global-color(--accent --primary), 26 --circle-border: fn.global-color(--accent --primary --main),
27 27
28 --hover: ( 28 --hover: (
29 --circle-border: fn.global-color(--accent --primary-lo), 29 --circle-border: fn.global-color(--accent --primary --lo),
30 ), 30 ),
31 ), 31 ),
32 --key-focus: ( 32 --key-focus: (
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index c688cbc..e06c80b 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: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 10%), 14 --green: fn.global-color(--accent --green --hi),
15 --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 10%), 15 --yellow: fn.global-color(--accent --yellow --hi),
16 --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 10%), 16 --red: fn.global-color(--accent --red --hi),
17 ), 17 ),
18 ), 'colors'); 18 ), 'colors');
19 19
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 59e4c55..cc215a5 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -25,10 +25,10 @@
25 --handle-border: fn.global-color(--fg), 25 --handle-border: fn.global-color(--fg),
26 ), 26 ),
27 --accent: ( 27 --accent: (
28 --handle-border: fn.global-color(--accent --primary), 28 --handle-border: fn.global-color(--accent --primary --main),
29 29
30 --hover: ( 30 --hover: (
31 --handle-border: fn.global-color(--accent --primary-lo), 31 --handle-border: fn.global-color(--accent --primary --lo),
32 ), 32 ),
33 ), 33 ),
34 --key-focus: ( 34 --key-focus: (
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b819811..55e8a5c 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -56,7 +56,7 @@
56 --shadow: 0 0 0 0 transparent, 56 --shadow: 0 0 0 0 transparent,
57 ), 57 ),
58 --focus: ( 58 --focus: (
59 --border: fn.global-color(--accent --primary), 59 --border: fn.global-color(--accent --primary --main),
60 --shadow: 0 0 0 0 transparent, 60 --shadow: 0 0 0 0 transparent,
61 ), 61 ),
62 --key-focus: ( 62 --key-focus: (
@@ -64,15 +64,15 @@
64 --shadow: fn.global-color(--focus --shadow), 64 --shadow: fn.global-color(--focus --shadow),
65 ), 65 ),
66 --error: ( 66 --error: (
67 --border: fn.global-color(--accent --error-hi), 67 --border: fn.global-color(--accent --error --hi),
68 --shadow: 0 0 0 0 transparent, 68 --shadow: 0 0 0 0 transparent,
69 69
70 --hover: ( 70 --hover: (
71 --border: fn.global-color(--accent --error), 71 --border: fn.global-color(--accent --error --main),
72 --shadow: 0 0 0 0 transparent, 72 --shadow: 0 0 0 0 transparent,
73 ), 73 ),
74 --focus: ( 74 --focus: (
75 --border: fn.global-color(--accent --error), 75 --border: fn.global-color(--accent --error --main),
76 --shadow: 0 0 0 0 transparent, 76 --shadow: 0 0 0 0 transparent,
77 ), 77 ),
78 ), 78 ),
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-26 14:16:50 +0000