summaryrefslogtreecommitdiffstats
path: root/src/_config.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_config.scss')
-rw-r--r--src/_config.scss198
1 files changed, 7 insertions, 191 deletions
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;