summaryrefslogtreecommitdiffstats
path: root/src/_config.defaults.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_config.defaults.scss')
-rw-r--r--src/_config.defaults.scss199
1 files changed, 199 insertions, 0 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);
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 07:27:19 +0000