1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
@use 'sass:list';
@use 'sass:map';
@use 'iro-sass/src/index' as iro;
@use 'iro-sass/src/responsive' as res;
@use 'include-media/dist/include-media' as media;
@use '@oddbird/blend';
iro.$vars-root-size: 16px;
media.$breakpoints: (
lg: 1340px,
md: 900px,
sm: 620px,
xs: 400px,
);
media.$unit-intervals: (
'px': 1,
'em': .01,
'rem': .01,
'': 0
);
res.$named-viewports: media.$breakpoints;
$palette-precision: 5 !default;
$theme-light: (
--contrasts: (
--grays: (
--50: 1.1,
--75: 1.04,
--100: 1,
--200: -1.15,
--300: -1.35,
--400: -1.7,
--500: -2.4,
--600: -3.3,
--700: -6,
--800: -13,
--900: -20,
),
--colors: (
--100: -1.08,
--200: -1.20,
--300: -1.33,
--400: -1.58,
--500: -1.92,
--600: -2.39,
--700: -3.01,
--800: -3.87,
--900: -5.07,
--1000: -6.72,
--1100: -8.84,
--1200: -11.31,
--1300: -13.94,
),
),
--ranges: (
--full: 1,
--muted: 0.8,
),
--palettes: (
--base: hsl(0, 0%, 97%) --grays --full,
--blue: blend.lch(48% 50 279) --colors --muted,
--purple: blend.lch(48% 50 308) --colors --muted,
--red: blend.lch(48% 50 23) --colors --muted,
--green: blend.lch(63% 50 147) --colors --muted,
--yellow: blend.lch(68% 50 80) --colors --muted,
),
--semantic-colors: (
--accent: --blue,
--focus: --yellow-static,
--bg-l2: --base --50,
--bg-l1: --base --100,
--bg-base: --base --200,
--border-mute: --base --200,
--border: --base --300,
--border-strong: --base --400,
--text-disabled: --base --500,
--text-mute-more: --base --600,
--text-mute: --base --700,
--text: --base --800,
--heading: --base --900,
),
) !default;
$theme-dark: (
--contrasts: (
--grays: (
--50: -1.31,
--75: -1.18,
--100: 1,
--200: 1.15,
--300: 1.35,
--400: 1.7,
--500: 2.4,
--600: 3.3,
--700: 6,
--800: 13,
--900: 20,
),
--colors: (
--100: 1.12,
--200: 1.30,
--300: 1.58,
--400: 1.96,
--500: 2.45,
--600: 3.09,
--700: 3.90,
--800: 4.85,
--900: 6.02,
--1000: 7.34,
--1100: 8.77,
--1200: 10.18,
--1300: 11.64,
),
),
--ranges: (
--full: 1,
--muted: 0.8,
),
--palettes: (
--base: hsl(0, 0%, 19%) --grays --full,
--blue: blend.lch(48% 50 279) --colors --muted,
--purple: blend.lch(48% 50 308) --colors --muted,
--red: blend.lch(48% 50 23) --colors --muted,
--green: blend.lch(63% 50 147) --colors --muted,
--yellow: blend.lch(68% 50 80) --colors --muted,
),
--semantic-colors: (
--accent: --blue,
--focus: --yellow-static,
--bg-base: --base --50,
--bg-l1: --base --75,
--bg-l2: --base --100,
--border-mute: --base --200,
--border: --base --300,
--border-strong: --base --400,
--text-disabled: --base --500,
--text-mute-more: --base --600,
--text-mute: --base --700,
--text: --base --800,
--heading: --base --900,
),
) !default;
$themes: (
light: $theme-light,
dark: $theme-dark,
) !default;
$theme-default: list.nth(map.keys($themes), 1) !default;
|
