summaryrefslogtreecommitdiffstats
path: root/src/_config.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
committerVolpeon <git@volpeon.ink>2024-10-17 16:45:00 +0200
commit50f6acc739f24bfa2ca080d08e90d82f8fa83543 (patch)
tree404dbe97d34b7e4fc3293c8e6a8c92d9941ac51e /src/_config.scss
parentColors (diff)
downloadiro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.gz
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.tar.bz2
iro-design-50f6acc739f24bfa2ca080d08e90d82f8fa83543.zip
Revamped variable management
Diffstat (limited to 'src/_config.scss')
-rw-r--r--src/_config.scss234
1 files changed, 0 insertions, 234 deletions
diff --git a/src/_config.scss b/src/_config.scss
deleted file mode 100644
index a4e1cfa..0000000
--- a/src/_config.scss
+++ /dev/null
@@ -1,234 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:math';
4@use 'iro-sass/src/index' as iro;
5@use 'iro-sass/src/responsive' as res;
6@use 'iro-sass/src/easing' as easing;
7@use 'include-media/dist/include-media' as media;
8
9iro.$vars-root-size: 16px;
10
11media.$breakpoints: (
12 lg: 1340px,
13 md: 900px,
14 sm: 620px,
15 xs: 400px,
16);
17
18media.$unit-intervals: (
19 'px': 1,
20 'em': .01,
21 'rem': .01,
22 '': 0
23);
24
25res.$named-viewports: media.$breakpoints;
26
27$palette-precision: .01 !default;
28
29$palette-chroma-easing: 'ease' !default;
30
31$static-colors-override: () !default;
32$static-colors: map.deep-merge((
33 --base: hsl(0, 0%, 98%),
34
35 --contrasts: (
36 --100: math.div(0, 12) * 110 - 10,
37 --200: math.div(1, 12) * 110 - 10,
38 --300: math.div(2, 12) * 110 - 10,
39 --400: math.div(3, 12) * 110 - 10,
40 --500: math.div(4, 12) * 110 - 10,
41 --600: math.div(5, 12) * 110 - 10,
42 --700: math.div(6, 12) * 110 - 10,
43 --800: math.div(7, 12) * 110 - 10,
44 --900: math.div(8, 12) * 110 - 10,
45 --1000: math.div(9, 12) * 110 - 10,
46 --1100: math.div(10, 12) * 110 - 10,
47 --1200: math.div(11, 12) * 110 - 10,
48 --1300: math.div(12, 12) * 110 - 10,
49 ),
50
51 --palettes: (
52 --blue: oklch(56% .14 275.25),
53 --purple: oklch(56% .14 305.58),
54 --red: oklch(56% .14 14.69),
55 --green: oklch(56% .14 150.48),
56 --yellow: oklch(56% .14 84.08),
57 ),
58
59 --transparents: (
60 --100: 0,
61 --200: .1,
62 --300: .25,
63 --400: .4,
64 --500: .55,
65 --600: .7,
66 --700: .8,
67 --800: .9,
68 --900: 1,
69 ),
70), $static-colors-override);
71
72$semantic-colors-common-override: () !default;
73$semantic-colors-common: map.deep-merge((
74 --accent: --blue,
75 --accent-static: --blue-static,
76 --positive: --green,
77 --positive-static: --green-static,
78 --negative: --red,
79 --negative-static: --red-static,
80 --warning: --yellow,
81 --warning-static: --yellow-static,
82
83 --focus-raw: --accent,
84 --focus-static: --accent-static,
85
86 --border-mute: --base --200,
87 --border: --base --300,
88 --border-strong: --base --400,
89
90 --text-disabled: --base --500,
91 --text-mute-more: --base --600,
92 --text-mute: --base --700,
93 --text: --base --800,
94 --heading: --base --900,
95
96 --focus: (
97 --outline: --focus-raw --400,
98 --border-mute: --focus-raw --900,
99 --border: --focus-raw --1000,
100 --border-text: --focus-raw --1000-text,
101 --border-strong: --focus-raw --1100,
102 --text: --focus-raw --1100,
103 ),
104), $semantic-colors-common-override);
105
106$theme-light-override: () !default;
107$theme-light: map.deep-merge((
108 --contrasts: (
109 --grays: (
110 --50: -8,
111 --75: -4,
112 --100: 0,
113
114 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
115 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
116 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
117
118 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
119 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
120 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
121 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
122 --900: 106,
123 ),
124
125 --colors: (
126 --100: math.div(0, 12) * 96 + 5,
127 --200: math.div(1, 12) * 96 + 5,
128 --300: math.div(2, 12) * 96 + 5,
129 --400: math.div(3, 12) * 96 + 5,
130 --500: math.div(4, 12) * 96 + 5,
131 --600: math.div(5, 12) * 96 + 5,
132 --700: math.div(6, 12) * 96 + 5,
133 --800: math.div(7, 12) * 96 + 5,
134 --900: math.div(8, 12) * 96 + 5,
135 --1000: math.div(9, 12) * 96 + 5,
136 --1100: math.div(10, 12) * 96 + 5,
137 --1200: math.div(11, 12) * 96 + 5,
138 --1300: math.div(12, 12) * 96 + 5,
139 ),
140 ),
141
142 --ranges: (
143 --full: .3,
144 --muted: .1,
145 ),
146
147 --palettes: (
148 --base: hsl(260, 90%, 98%) --grays --full,
149 --blue: oklch(56% .16 275.25) --colors --muted,
150 --purple: oklch(56% .16 305.58) --colors --muted,
151 --red: oklch(56% .16 14.69) --colors --muted,
152 --green: oklch(56% .16 150.48) --colors --muted,
153 --yellow: oklch(56% .16 84.08) --colors --muted,
154 ),
155
156 --semantic: map.merge($semantic-colors-common, (
157 --bg-l2: --base --50,
158 --bg-l1: --base --100,
159 --bg-base: --base --200,
160 )),
161
162 --constants: (
163 --shadow: rgba(#000, .15),
164 ),
165), $theme-light-override);
166
167$theme-dark-override: () !default;
168$theme-dark: map.deep-merge((
169 --contrasts: (
170 --grays: (
171 --50: 4.4,
172 --75: 2.2,
173 --100: 0,
174
175 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
176 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
177 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
178
179 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
180 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
181 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
182 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
183 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
184 ),
185
186 --colors: (
187 --100: math.div(0, 12) * -100 - 5,
188 --200: math.div(1, 12) * -100 - 5,
189 --300: math.div(2, 12) * -100 - 5,
190 --400: math.div(3, 12) * -100 - 5,
191 --500: math.div(4, 12) * -100 - 5,
192 --600: math.div(5, 12) * -100 - 5,
193 --700: math.div(6, 12) * -100 - 5,
194 --800: math.div(7, 12) * -100 - 5,
195 --900: math.div(8, 12) * -100 - 5,
196 --1000: math.div(9, 12) * -100 - 5,
197 --1100: math.div(10, 12) * -100 - 5,
198 --1200: math.div(11, 12) * -100 - 5,
199 --1300: math.div(12, 12) * -100 - 5,
200 ),
201 ),
202
203 --ranges: (
204 --full: 1,
205 --muted: .3,
206 ),
207
208 --palettes: (
209 --base: hsl(257, 7%, 19%) --grays --full,
210 --blue: oklch(56% .16 275.25) --colors --muted,
211 --purple: oklch(56% .16 305.58) --colors --muted,
212 --red: oklch(56% .16 14.69) --colors --muted,
213 --green: oklch(56% .16 150.48) --colors --muted,
214 --yellow: oklch(56% .16 84.08) --colors --muted,
215 ),
216
217 --semantic: map.merge($semantic-colors-common, (
218 --bg-base: --base --50,
219 --bg-l1: --base --75,
220 --bg-l2: --base --100,
221 )),
222
223 --constants: (
224 --shadow: rgba(#000, .5),
225 ),
226), $theme-dark-override);
227
228$themes-override: () !default;
229$themes: map.deep-merge((
230 light: $theme-light,
231 dark: $theme-dark,
232), $themes-override);
233
234$theme-default: list.nth(map.keys($themes), 1) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 09:30:07 +0000