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.scss320
1 files changed, 160 insertions, 160 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 799ee47..861b600 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -4,194 +4,194 @@
4@use 'iro-sass/src/easing' as easing; 4@use 'iro-sass/src/easing' as easing;
5 5
6$static-colors: ( 6$static-colors: (
7 --base: hsl(0, 0%, 98%), 7 --base: hsl(0, 0%, 98%),
8 8
9 --levels: ( 9 --levels: (
10 --100: math.div(0, 12) * 110 - 10, 10 --100: math.div(0, 12) * 110 - 10,
11 --200: math.div(1, 12) * 110 - 10, 11 --200: math.div(1, 12) * 110 - 10,
12 --300: math.div(2, 12) * 110 - 10, 12 --300: math.div(2, 12) * 110 - 10,
13 --400: math.div(3, 12) * 110 - 10, 13 --400: math.div(3, 12) * 110 - 10,
14 --500: math.div(4, 12) * 110 - 10, 14 --500: math.div(4, 12) * 110 - 10,
15 --600: math.div(5, 12) * 110 - 10, 15 --600: math.div(5, 12) * 110 - 10,
16 --700: math.div(6, 12) * 110 - 10, 16 --700: math.div(6, 12) * 110 - 10,
17 --800: math.div(7, 12) * 110 - 10, 17 --800: math.div(7, 12) * 110 - 10,
18 --900: math.div(8, 12) * 110 - 10, 18 --900: math.div(8, 12) * 110 - 10,
19 --1000: math.div(9, 12) * 110 - 10, 19 --1000: math.div(9, 12) * 110 - 10,
20 --1100: math.div(10, 12) * 110 - 10, 20 --1100: math.div(10, 12) * 110 - 10,
21 --1200: math.div(11, 12) * 110 - 10, 21 --1200: math.div(11, 12) * 110 - 10,
22 --1300: math.div(12, 12) * 110 - 10, 22 --1300: math.div(12, 12) * 110 - 10,
23 ), 23 ),
24 24
25 --palettes: ( 25 --palettes: (
26 --blue: oklch(56% .14 275.25), 26 --blue: oklch(56% .14 275.25),
27 --purple: oklch(56% .14 305.58), 27 --purple: oklch(56% .14 305.58),
28 --red: oklch(56% .14 14.69), 28 --red: oklch(56% .14 14.69),
29 --green: oklch(56% .14 150.48), 29 --green: oklch(56% .14 150.48),
30 --yellow: oklch(56% .14 84.08), 30 --yellow: oklch(56% .14 84.08),
31 ), 31 ),
32 32
33 --transparents: ( 33 --transparents: (
34 --100: 0, 34 --100: 0,
35 --200: .1, 35 --200: .1,
36 --300: .25, 36 --300: .25,
37 --400: .4, 37 --400: .4,
38 --500: .55, 38 --500: .55,
39 --600: .7, 39 --600: .7,
40 --700: .8, 40 --700: .8,
41 --800: .9, 41 --800: .9,
42 --900: 1, 42 --900: 1,
43 ), 43 ),
44); 44);
45 45
46$semantic-colors-common: ( 46$semantic-colors-common: (
47 --accent: --blue, 47 --accent: --blue,
48 --accent-static: --blue-static, 48 --accent-static: --blue-static,
49 --positive: --green, 49 --positive: --green,
50 --positive-static: --green-static, 50 --positive-static: --green-static,
51 --negative: --red, 51 --negative: --red,
52 --negative-static: --red-static, 52 --negative-static: --red-static,
53 --warning: --yellow, 53 --warning: --yellow,
54 --warning-static: --yellow-static, 54 --warning-static: --yellow-static,
55 55
56 --focus-raw: --accent, 56 --focus-raw: --accent,
57 --focus-static: --accent-static, 57 --focus-static: --accent-static,
58 58
59 --border-mute: --base --200, 59 --border-mute: --base --200,
60 --border: --base --300, 60 --border: --base --300,
61 --border-strong: --base --400, 61 --border-strong: --base --400,
62 62
63 --text-disabled: --base --500, 63 --text-disabled: --base --500,
64 --text-mute-more: --base --600, 64 --text-mute-more: --base --600,
65 --text-mute: --base --700, 65 --text-mute: --base --700,
66 --text: --base --800, 66 --text: --base --800,
67 --heading: --base --900, 67 --heading: --base --900,
68 68
69 --focus: ( 69 --focus: (
70 --outline: --focus-raw --400, 70 --outline: --focus-raw --400,
71 --border-mute: --focus-raw --900, 71 --border-mute: --focus-raw --900,
72 --border: --focus-raw --1000, 72 --border: --focus-raw --1000,
73 --border-text: --focus-raw --1000-text, 73 --border-text: --focus-raw --1000-text,
74 --border-strong: --focus-raw --1100, 74 --border-strong: --focus-raw --1100,
75 --text: --focus-raw --1100, 75 --text: --focus-raw --1100,
76 ), 76 ),
77); 77);
78 78
79$theme-light: ( 79$theme-light: (
80 --levels: ( 80 --levels: (
81 --grays: ( 81 --grays: (
82 --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))), 82 --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
83 --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))), 83 --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
84 --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))), 84 --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
85 85
86 --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))), 86 --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
87 --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))), 87 --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
88 --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))), 88 --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
89 89
90 --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))), 90 --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
91 --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))), 91 --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
92 --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))), 92 --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
93 --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))), 93 --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
94 --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))), 94 --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
95 ), 95 ),
96 96
97 --colors: ( 97 --colors: (
98 --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), 98 --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
99 --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), 99 --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
100 --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), 100 --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
101 --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), 101 --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
102 --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), 102 --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
103 --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), 103 --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
104 --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), 104 --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
105 --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), 105 --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
106 --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), 106 --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
107 --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), 107 --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
108 --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), 108 --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
109 --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), 109 --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
110 --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), 110 --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
111 ), 111 ),
112 ), 112 ),
113 113
114 --palettes: ( 114 --palettes: (
115 --base: hsl(260, 70%, 98%) --grays, 115 --base: hsl(260, 70%, 98%) --grays,
116 --blue: oklch(56% .16 275.25) --colors, 116 --blue: oklch(56% .16 275.25) --colors,
117 --purple: oklch(56% .16 305.58) --colors, 117 --purple: oklch(56% .16 305.58) --colors,
118 --red: oklch(56% .16 14.69) --colors, 118 --red: oklch(56% .16 14.69) --colors,
119 --green: oklch(56% .16 150.48) --colors, 119 --green: oklch(56% .16 150.48) --colors,
120 --yellow: oklch(56% .16 84.08) --colors, 120 --yellow: oklch(56% .16 84.08) --colors,
121 ), 121 ),
122 122
123 --semantic: map.merge($semantic-colors-common, ( 123 --semantic: map.merge($semantic-colors-common, (
124 --bg-l2: --base --50, 124 --bg-l2: --base --50,
125 --bg-l1: --base --100, 125 --bg-l1: --base --100,
126 --bg-base: --base --200, 126 --bg-base: --base --200,
127 127
128 --box: ( 128 --box: (
129 --border: --base --200, 129 --border: --base --200,
130 --border-strong: --base --300, 130 --border-strong: --base --300,
131 ), 131 ),
132 )), 132 )),
133 133
134 --constants: ( 134 --constants: (
135 --shadow: rgba(#000, .1), 135 --shadow: rgba(#000, .1),
136 ), 136 ),
137); 137);
138 138
139$theme-dark: ( 139$theme-dark: (
140 --levels: ( 140 --levels: (
141 --grays: ( 141 --grays: (
142 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), 142 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
143 --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))), 143 --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
144 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), 144 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
145 145
146 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), 146 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
147 --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))), 147 --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
148 --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))), 148 --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
149 149
150 --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))), 150 --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
151 --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))), 151 --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
152 --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))), 152 --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
153 --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))), 153 --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
154 --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))), 154 --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
155 ), 155 ),
156 156
157 --colors: ( 157 --colors: (
158 --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))), 158 --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
159 --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))), 159 --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
160 --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))), 160 --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
161 --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))), 161 --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
162 --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))), 162 --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
163 --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))), 163 --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
164 --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))), 164 --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
165 --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))), 165 --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
166 --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))), 166 --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
167 --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))), 167 --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
168 --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))), 168 --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
169 --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))), 169 --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
170 --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))), 170 --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
171 ), 171 ),
172 ), 172 ),
173 173
174 --palettes: ( 174 --palettes: (
175 --base: hsl(257, 7%, 20%) --grays, 175 --base: hsl(257, 7%, 20%) --grays,
176 --blue: oklch(56% .16 275.25) --colors, 176 --blue: oklch(56% .16 275.25) --colors,
177 --purple: oklch(56% .16 305.58) --colors, 177 --purple: oklch(56% .16 305.58) --colors,
178 --red: oklch(56% .16 14.69) --colors, 178 --red: oklch(56% .16 14.69) --colors,
179 --green: oklch(56% .16 150.48) --colors, 179 --green: oklch(56% .16 150.48) --colors,
180 --yellow: oklch(56% .16 84.08) --colors, 180 --yellow: oklch(56% .16 84.08) --colors,
181 ), 181 ),
182 182
183 --semantic: map.merge($semantic-colors-common, ( 183 --semantic: map.merge($semantic-colors-common, (
184 --bg-base: --base --50, 184 --bg-base: --base --50,
185 --bg-l1: --base --75, 185 --bg-l1: --base --75,
186 --bg-l2: --base --100, 186 --bg-l2: --base --100,
187 187
188 --box: ( 188 --box: (
189 --border: --base --100, 189 --border: --base --100,
190 --border-strong: --base --100, 190 --border-strong: --base --100,
191 ), 191 ),
192 )), 192 )),
193 193
194 --constants: ( 194 --constants: (
195 --shadow: rgba(#000, .35), 195 --shadow: rgba(#000, .35),
196 ), 196 ),
197); 197);