diff options
Diffstat (limited to 'src/_config.scss')
-rw-r--r-- | src/_config.scss | 134 |
1 files changed, 121 insertions, 13 deletions
diff --git a/src/_config.scss b/src/_config.scss index c42ad97..08374fb 100644 --- a/src/_config.scss +++ b/src/_config.scss | |||
@@ -1,6 +1,9 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'sass:map'; | ||
1 | @use 'iro-sass/src/index' as iro; | 3 | @use 'iro-sass/src/index' as iro; |
2 | @use 'iro-sass/src/responsive' as res; | 4 | @use 'iro-sass/src/responsive' as res; |
3 | @use 'include-media/dist/include-media' as media; | 5 | @use 'include-media/dist/include-media' as media; |
6 | @use '@oddbird/blend'; | ||
4 | 7 | ||
5 | iro.$vars-root-size: 16px; | 8 | iro.$vars-root-size: 16px; |
6 | 9 | ||
@@ -20,18 +23,123 @@ media.$unit-intervals: ( | |||
20 | 23 | ||
21 | res.$named-viewports: media.$breakpoints; | 24 | res.$named-viewports: media.$breakpoints; |
22 | 25 | ||
23 | $wanted-grays: ( | 26 | $palette-precision: 5 !default; |
24 | --1: -1.3, | ||
25 | --2: -1.15, | ||
26 | --3: 1, | ||
27 | 27 | ||
28 | --4: 1.15, | 28 | $theme-light: ( |
29 | --5: 1.35, | 29 | --base: hsl(0, 0%, 97%), |
30 | --6: 1.7, | 30 | --blue: blend.lch(48% 50 279), |
31 | --purple: blend.lch(48% 50 308), | ||
32 | --red: blend.lch(48% 50 23), | ||
33 | --green: blend.lch(63% 50 147), | ||
34 | --yellow: blend.lch(68% 50 70), | ||
31 | 35 | ||
32 | --7: 2.4, | 36 | --grays: ( |
33 | --8: 3.3, | 37 | --50: 1.1, |
34 | --9: 6, | 38 | --75: 1.04, |
35 | --10: 13, | 39 | --100: 1, |
36 | --11: 20, | 40 | |
37 | ); | 41 | --200: -1.15, |
42 | --300: -1.35, | ||
43 | --400: -1.7, | ||
44 | |||
45 | --500: -2.4, | ||
46 | --600: -3.3, | ||
47 | --700: -6, | ||
48 | --800: -13, | ||
49 | --900: -20, | ||
50 | ), | ||
51 | --colors: ( | ||
52 | --100: -1.08, | ||
53 | --200: -1.20, | ||
54 | --300: -1.33, | ||
55 | --400: -1.58, | ||
56 | --500: -1.92, | ||
57 | --600: -2.39, | ||
58 | --700: -3.01, | ||
59 | --800: -3.87, | ||
60 | --900: -5.07, | ||
61 | --1000: -6.72, | ||
62 | --1100: -8.84, | ||
63 | --1200: -11.31, | ||
64 | --1300: -13.94, | ||
65 | ), | ||
66 | |||
67 | --accent: --blue, | ||
68 | |||
69 | --bg-l2: --50, | ||
70 | --bg-l1: --100, | ||
71 | --bg-base: --200, | ||
72 | |||
73 | --border-mute: --200, | ||
74 | --border: --300, | ||
75 | --border-strong: --400, | ||
76 | |||
77 | --text-disabled: --500, | ||
78 | --text-mute-more: --600, | ||
79 | --text-mute: --700, | ||
80 | --text: --800, | ||
81 | --heading: --900, | ||
82 | ) !default; | ||
83 | |||
84 | $theme-dark: ( | ||
85 | --base: hsl(0, 0%, 19%), | ||
86 | --blue: blend.lch(48% 50 279), | ||
87 | --purple: blend.lch(48% 50 308), | ||
88 | --red: blend.lch(48% 50 23), | ||
89 | --green: blend.lch(63% 50 147), | ||
90 | --yellow: blend.lch(68% 50 70), | ||
91 | |||
92 | --grays: ( | ||
93 | --50: -1.31, | ||
94 | --75: -1.18, | ||
95 | --100: 1, | ||
96 | |||
97 | --200: 1.15, | ||
98 | --300: 1.35, | ||
99 | --400: 1.7, | ||
100 | |||
101 | --500: 2.4, | ||
102 | --600: 3.3, | ||
103 | --700: 6, | ||
104 | --800: 13, | ||
105 | --900: 20, | ||
106 | ), | ||
107 | --colors: ( | ||
108 | --100: 1.12, | ||
109 | --200: 1.30, | ||
110 | --300: 1.58, | ||
111 | --400: 1.96, | ||
112 | --500: 2.45, | ||
113 | --600: 3.09, | ||
114 | --700: 3.90, | ||
115 | --800: 4.85, | ||
116 | --900: 6.02, | ||
117 | --1000: 7.34, | ||
118 | --1100: 8.77, | ||
119 | --1200: 10.18, | ||
120 | --1300: 11.64, | ||
121 | ), | ||
122 | |||
123 | --accent: --blue, | ||
124 | |||
125 | --bg-base: --50, | ||
126 | --bg-l1: --75, | ||
127 | --bg-l2: --100, | ||
128 | |||
129 | --border-mute: --200, | ||
130 | --border: --300, | ||
131 | --border-strong: --400, | ||
132 | |||
133 | --text-disabled: --500, | ||
134 | --text-mute-more: --600, | ||
135 | --text-mute: --700, | ||
136 | --text: --800, | ||
137 | --heading: --900, | ||
138 | ) !default; | ||
139 | |||
140 | $themes: ( | ||
141 | light: $theme-light, | ||
142 | dark: $theme-dark, | ||
143 | ) !default; | ||
144 | |||
145 | $theme-default: list.nth(map.keys($themes), 1) !default; | ||