summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_config.defaults.scss199
-rw-r--r--src/_config.scss198
-rw-r--r--src/_iro-design.scss1
3 files changed, 207 insertions, 191 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
new file mode 100644
index 0000000..60f0c34
--- /dev/null
+++ b/src/_config.defaults.scss
@@ -0,0 +1,199 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:math';
4@use 'iro-sass/src/easing' as easing;
5
6$palette-chroma-easing: 'ease';
7
8$static-colors: (
9 --base: hsl(0, 0%, 98%),
10
11 --contrasts: (
12 --100: math.div(0, 12) * 110 - 10,
13 --200: math.div(1, 12) * 110 - 10,
14 --300: math.div(2, 12) * 110 - 10,
15 --400: math.div(3, 12) * 110 - 10,
16 --500: math.div(4, 12) * 110 - 10,
17 --600: math.div(5, 12) * 110 - 10,
18 --700: math.div(6, 12) * 110 - 10,
19 --800: math.div(7, 12) * 110 - 10,
20 --900: math.div(8, 12) * 110 - 10,
21 --1000: math.div(9, 12) * 110 - 10,
22 --1100: math.div(10, 12) * 110 - 10,
23 --1200: math.div(11, 12) * 110 - 10,
24 --1300: math.div(12, 12) * 110 - 10,
25 ),
26
27 --palettes: (
28 --blue: oklch(56% .14 275.25),
29 --purple: oklch(56% .14 305.58),
30 --red: oklch(56% .14 14.69),
31 --green: oklch(56% .14 150.48),
32 --yellow: oklch(56% .14 84.08),
33 ),
34
35 --transparents: (
36 --100: 0,
37 --200: .1,
38 --300: .25,
39 --400: .4,
40 --500: .55,
41 --600: .7,
42 --700: .8,
43 --800: .9,
44 --900: 1,
45 ),
46);
47
48$semantic-colors-common: (
49 --accent: --blue,
50 --accent-static: --blue-static,
51 --positive: --green,
52 --positive-static: --green-static,
53 --negative: --red,
54 --negative-static: --red-static,
55 --warning: --yellow,
56 --warning-static: --yellow-static,
57
58 --focus-raw: --accent,
59 --focus-static: --accent-static,
60
61 --border-mute: --base --200,
62 --border: --base --300,
63 --border-strong: --base --400,
64
65 --text-disabled: --base --500,
66 --text-mute-more: --base --600,
67 --text-mute: --base --700,
68 --text: --base --800,
69 --heading: --base --900,
70
71 --focus: (
72 --outline: --focus-raw --400,
73 --border-mute: --focus-raw --900,
74 --border: --focus-raw --1000,
75 --border-text: --focus-raw --1000-text,
76 --border-strong: --focus-raw --1100,
77 --text: --focus-raw --1100,
78 ),
79);
80
81$theme-light: (
82 --contrasts: (
83 --grays: (
84 --50: -8,
85 --75: -4,
86 --100: 0,
87
88 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
89 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
90 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
91
92 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
93 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
94 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
95 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
96 --900: 106,
97 ),
98
99 --colors: (
100 --100: math.div(0, 12) * 96 + 5,
101 --200: math.div(1, 12) * 96 + 5,
102 --300: math.div(2, 12) * 96 + 5,
103 --400: math.div(3, 12) * 96 + 5,
104 --500: math.div(4, 12) * 96 + 5,
105 --600: math.div(5, 12) * 96 + 5,
106 --700: math.div(6, 12) * 96 + 5,
107 --800: math.div(7, 12) * 96 + 5,
108 --900: math.div(8, 12) * 96 + 5,
109 --1000: math.div(9, 12) * 96 + 5,
110 --1100: math.div(10, 12) * 96 + 5,
111 --1200: math.div(11, 12) * 96 + 5,
112 --1300: math.div(12, 12) * 96 + 5,
113 ),
114 ),
115
116 --ranges: (
117 --full: .3,
118 --muted: .1,
119 ),
120
121 --palettes: (
122 --base: hsl(260, 90%, 98%) --grays --full,
123 --blue: oklch(56% .16 275.25) --colors --muted,
124 --purple: oklch(56% .16 305.58) --colors --muted,
125 --red: oklch(56% .16 14.69) --colors --muted,
126 --green: oklch(56% .16 150.48) --colors --muted,
127 --yellow: oklch(56% .16 84.08) --colors --muted,
128 ),
129
130 --semantic: map.merge($semantic-colors-common, (
131 --bg-l2: --base --50,
132 --bg-l1: --base --100,
133 --bg-base: --base --200,
134 )),
135
136 --constants: (
137 --shadow: rgba(#000, .15),
138 ),
139);
140
141$theme-dark: (
142 --contrasts: (
143 --grays: (
144 --50: 4.4,
145 --75: 2.2,
146 --100: 0,
147
148 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
149 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
150 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
151
152 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
153 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
154 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
155 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
156 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
157 ),
158
159 --colors: (
160 --100: math.div(0, 12) * -100 - 5,
161 --200: math.div(1, 12) * -100 - 5,
162 --300: math.div(2, 12) * -100 - 5,
163 --400: math.div(3, 12) * -100 - 5,
164 --500: math.div(4, 12) * -100 - 5,
165 --600: math.div(5, 12) * -100 - 5,
166 --700: math.div(6, 12) * -100 - 5,
167 --800: math.div(7, 12) * -100 - 5,
168 --900: math.div(8, 12) * -100 - 5,
169 --1000: math.div(9, 12) * -100 - 5,
170 --1100: math.div(10, 12) * -100 - 5,
171 --1200: math.div(11, 12) * -100 - 5,
172 --1300: math.div(12, 12) * -100 - 5,
173 ),
174 ),
175
176 --ranges: (
177 --full: 1,
178 --muted: .3,
179 ),
180
181 --palettes: (
182 --base: hsl(257, 7%, 19%) --grays --full,
183 --blue: oklch(56% .16 275.25) --colors --muted,
184 --purple: oklch(56% .16 305.58) --colors --muted,
185 --red: oklch(56% .16 14.69) --colors --muted,
186 --green: oklch(56% .16 150.48) --colors --muted,
187 --yellow: oklch(56% .16 84.08) --colors --muted,
188 ),
189
190 --semantic: map.merge($semantic-colors-common, (
191 --bg-base: --base --50,
192 --bg-l1: --base --75,
193 --bg-l2: --base --100,
194 )),
195
196 --constants: (
197 --shadow: rgba(#000, .5),
198 ),
199);
diff --git a/src/_config.scss b/src/_config.scss
index d2f62da..e0ae933 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -2,212 +2,28 @@
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:math'; 3@use 'sass:math';
4@use 'iro-sass/src/easing' as easing; 4@use 'iro-sass/src/easing' as easing;
5@use 'config.defaults' as def;
5 6
6$palette-chroma-easing: 'ease' !default; 7$palette-chroma-easing: def.$palette-chroma-easing !default;
7 8
8$static-colors-override: () !default; 9$static-colors-override: () !default;
9$static-colors: map.deep-merge(( 10$static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default;
10 --base: hsl(0, 0%, 98%),
11
12 --contrasts: (
13 --100: math.div(0, 12) * 110 - 10,
14 --200: math.div(1, 12) * 110 - 10,
15 --300: math.div(2, 12) * 110 - 10,
16 --400: math.div(3, 12) * 110 - 10,
17 --500: math.div(4, 12) * 110 - 10,
18 --600: math.div(5, 12) * 110 - 10,
19 --700: math.div(6, 12) * 110 - 10,
20 --800: math.div(7, 12) * 110 - 10,
21 --900: math.div(8, 12) * 110 - 10,
22 --1000: math.div(9, 12) * 110 - 10,
23 --1100: math.div(10, 12) * 110 - 10,
24 --1200: math.div(11, 12) * 110 - 10,
25 --1300: math.div(12, 12) * 110 - 10,
26 ),
27
28 --palettes: (
29 --blue: oklch(56% .14 275.25),
30 --purple: oklch(56% .14 305.58),
31 --red: oklch(56% .14 14.69),
32 --green: oklch(56% .14 150.48),
33 --yellow: oklch(56% .14 84.08),
34 ),
35
36 --transparents: (
37 --100: 0,
38 --200: .1,
39 --300: .25,
40 --400: .4,
41 --500: .55,
42 --600: .7,
43 --700: .8,
44 --800: .9,
45 --900: 1,
46 ),
47), $static-colors-override) !default;
48 11
49$semantic-colors-common-override: () !default; 12$semantic-colors-common-override: () !default;
50$semantic-colors-common: map.deep-merge(( 13$semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default;
51 --accent: --blue,
52 --accent-static: --blue-static,
53 --positive: --green,
54 --positive-static: --green-static,
55 --negative: --red,
56 --negative-static: --red-static,
57 --warning: --yellow,
58 --warning-static: --yellow-static,
59
60 --focus-raw: --accent,
61 --focus-static: --accent-static,
62
63 --border-mute: --base --200,
64 --border: --base --300,
65 --border-strong: --base --400,
66
67 --text-disabled: --base --500,
68 --text-mute-more: --base --600,
69 --text-mute: --base --700,
70 --text: --base --800,
71 --heading: --base --900,
72
73 --focus: (
74 --outline: --focus-raw --400,
75 --border-mute: --focus-raw --900,
76 --border: --focus-raw --1000,
77 --border-text: --focus-raw --1000-text,
78 --border-strong: --focus-raw --1100,
79 --text: --focus-raw --1100,
80 ),
81), $semantic-colors-common-override) !default;
82 14
83$theme-light-override: () !default; 15$theme-light-override: () !default;
84$theme-light: map.deep-merge(( 16$theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default;
85 --contrasts: (
86 --grays: (
87 --50: -8,
88 --75: -4,
89 --100: 0,
90
91 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
92 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
93 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
94
95 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
96 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
97 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
98 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
99 --900: 106,
100 ),
101
102 --colors: (
103 --100: math.div(0, 12) * 96 + 5,
104 --200: math.div(1, 12) * 96 + 5,
105 --300: math.div(2, 12) * 96 + 5,
106 --400: math.div(3, 12) * 96 + 5,
107 --500: math.div(4, 12) * 96 + 5,
108 --600: math.div(5, 12) * 96 + 5,
109 --700: math.div(6, 12) * 96 + 5,
110 --800: math.div(7, 12) * 96 + 5,
111 --900: math.div(8, 12) * 96 + 5,
112 --1000: math.div(9, 12) * 96 + 5,
113 --1100: math.div(10, 12) * 96 + 5,
114 --1200: math.div(11, 12) * 96 + 5,
115 --1300: math.div(12, 12) * 96 + 5,
116 ),
117 ),
118
119 --ranges: (
120 --full: .3,
121 --muted: .1,
122 ),
123
124 --palettes: (
125 --base: hsl(260, 90%, 98%) --grays --full,
126 --blue: oklch(56% .16 275.25) --colors --muted,
127 --purple: oklch(56% .16 305.58) --colors --muted,
128 --red: oklch(56% .16 14.69) --colors --muted,
129 --green: oklch(56% .16 150.48) --colors --muted,
130 --yellow: oklch(56% .16 84.08) --colors --muted,
131 ),
132
133 --semantic: map.merge($semantic-colors-common, (
134 --bg-l2: --base --50,
135 --bg-l1: --base --100,
136 --bg-base: --base --200,
137 )),
138
139 --constants: (
140 --shadow: rgba(#000, .15),
141 ),
142), $theme-light-override) !default;
143 17
144$theme-dark-override: () !default; 18$theme-dark-override: () !default;
145$theme-dark: map.deep-merge(( 19$theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
146 --contrasts: (
147 --grays: (
148 --50: 4.4,
149 --75: 2.2,
150 --100: 0,
151
152 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
153 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
154 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
155
156 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
157 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
158 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
159 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
160 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
161 ),
162
163 --colors: (
164 --100: math.div(0, 12) * -100 - 5,
165 --200: math.div(1, 12) * -100 - 5,
166 --300: math.div(2, 12) * -100 - 5,
167 --400: math.div(3, 12) * -100 - 5,
168 --500: math.div(4, 12) * -100 - 5,
169 --600: math.div(5, 12) * -100 - 5,
170 --700: math.div(6, 12) * -100 - 5,
171 --800: math.div(7, 12) * -100 - 5,
172 --900: math.div(8, 12) * -100 - 5,
173 --1000: math.div(9, 12) * -100 - 5,
174 --1100: math.div(10, 12) * -100 - 5,
175 --1200: math.div(11, 12) * -100 - 5,
176 --1300: math.div(12, 12) * -100 - 5,
177 ),
178 ),
179
180 --ranges: (
181 --full: 1,
182 --muted: .3,
183 ),
184
185 --palettes: (
186 --base: hsl(257, 7%, 19%) --grays --full,
187 --blue: oklch(56% .16 275.25) --colors --muted,
188 --purple: oklch(56% .16 305.58) --colors --muted,
189 --red: oklch(56% .16 14.69) --colors --muted,
190 --green: oklch(56% .16 150.48) --colors --muted,
191 --yellow: oklch(56% .16 84.08) --colors --muted,
192 ),
193
194 --semantic: map.merge($semantic-colors-common, (
195 --bg-base: --base --50,
196 --bg-l1: --base --75,
197 --bg-l2: --base --100,
198 )),
199
200 --constants: (
201 --shadow: rgba(#000, .5),
202 ),
203), $theme-dark-override) !default;
204 20
205$themes-override: () !default; 21$themes-override: () !default;
206$themes: map.deep-merge(( 22$themes: map.deep-merge((
207 --main: ( 23 --main: (
208 light: $theme-light, 24 light: $theme-light,
209 dark: $theme-dark, 25 dark: $theme-dark,
210 ) 26 ),
211), $themes-override) !default; 27), $themes-override) !default;
212 28
213$theme-default: list.nth(map.keys($themes), 1) !default; 29$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 988f23a..a80f640 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -19,6 +19,7 @@ $breakpoints: (
19 ) !default, 19 ) !default,
20); 20);
21 21
22@forward 'config.defaults' as config-defaults--*;
22@forward 'config' as config--*; 23@forward 'config' as config--*;
23@forward 'props' as props--*; 24@forward 'props' as props--*;
24@forward 'core' as core--*; 25@forward 'core' as core--*;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 19:15:22 +0000