@carissa-io/theme-default 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/DESIGN.md +46 -0
  2. package/README.md +54 -0
  3. package/dist/index.css +248 -179
  4. package/package.json +1 -1
  5. package/scss/_modes.scss +90 -0
  6. package/scss/_tokens.scss +20 -0
  7. package/scss/index.scss +198 -196
package/scss/index.scss CHANGED
@@ -3,30 +3,32 @@
3
3
 
4
4
  // The palette and the shared values live in _tokens.scss (the public token API); the blocks below only use them.
5
5
  @use 'tokens' as *;
6
+ @use 'modes' as *;
6
7
 
7
8
  @use '@carissa-io/components-input/scss' as input with (
8
9
  // Typography: neutral grotesque stack (no webfont to load), label = bold, uppercase, tracking-widest
9
10
  $c-input-font-family: $font-family,
10
- $c-input-font-size: 1rem,
11
+ $c-input-font-size: $font-size-body,
11
12
  $c-input-label-layout: notched,
12
13
  $c-input-label-font-size: $label-font-size,
13
14
  $c-input-label-font-weight: $label-font-weight,
14
15
  $c-input-label-text-transform: uppercase,
15
16
  $c-input-label-letter-spacing: $label-letter-spacing,
16
- $c-input-label-color: $muted,
17
- $c-input-color: $text,
17
+ $c-input-label-color: $var-muted,
18
+ $c-input-color: $var-text,
18
19
 
19
20
  // Surface and borders: high contrast, absolute black as the primary color
20
- $c-input-background: $white,
21
- $c-input-placeholder-color: $muted,
22
- $c-input-border-color: $muted,
23
- $c-input-border-color-hover: $black,
24
- $c-input-focus-color: $focus-color,
25
- $c-input-focus-ring: $focus-color,
21
+ $c-input-background: $var-background,
22
+ $c-input-placeholder-color: $var-muted,
23
+ $c-input-border-color: $var-muted,
24
+ $c-input-border-color-hover: $var-primary,
25
+ $c-input-focus-color: $var-focus,
26
+ $c-input-focus-ring: $var-focus,
26
27
  $c-input-focus-ring-width: $focus-width,
27
- $c-input-error-ring: $error,
28
- $c-input-disabled-background: $surface,
29
- $c-input-disabled-color: $disabled-text,
28
+ $c-input-error-ring: $var-error,
29
+ $c-input-error-color: $var-error, // the default red of the component, kept in step with the ring
30
+ $c-input-disabled-background: $var-surface,
31
+ $c-input-disabled-color: $var-disabled-text,
30
32
 
31
33
  // Box: square corners, 44px minimum touch target
32
34
  $c-input-radius: $radius,
@@ -43,8 +45,8 @@
43
45
  $c-input-transition: border-color $transition-duration ease,
44
46
 
45
47
  // Side button
46
- $c-input-button-color: $muted,
47
- $c-input-button-color-hover: $black
48
+ $c-input-button-color: $var-muted,
49
+ $c-input-button-color-hover: $var-primary
48
50
  );
49
51
 
50
52
  @use '@carissa-io/components-button/scss' as button with (
@@ -63,49 +65,49 @@
63
65
  $c-button-transition: (color $transition-duration ease, background-color $transition-duration ease, border-color $transition-duration ease),
64
66
 
65
67
  // Primary: absolute black, white text
66
- $c-button-primary-color: $white,
67
- $c-button-primary-background: $black,
68
- $c-button-primary-border-color: $black,
69
- $c-button-primary-color-hover: $white,
70
- $c-button-primary-background-hover: $primary-hover,
71
- $c-button-primary-border-color-hover: $primary-hover,
72
- $c-button-primary-color-active: $white,
73
- $c-button-primary-background-active: $primary-active,
74
- $c-button-primary-border-color-active: $primary-active,
75
- $c-button-primary-color-disabled: $disabled-text,
76
- $c-button-primary-background-disabled: $surface,
77
- $c-button-primary-border-color-disabled: $surface,
68
+ $c-button-primary-color: $var-on-primary,
69
+ $c-button-primary-background: $var-primary,
70
+ $c-button-primary-border-color: $var-primary,
71
+ $c-button-primary-color-hover: $var-on-primary,
72
+ $c-button-primary-background-hover: $var-primary-hover,
73
+ $c-button-primary-border-color-hover: $var-primary-hover,
74
+ $c-button-primary-color-active: $var-on-primary,
75
+ $c-button-primary-background-active: $var-primary-active,
76
+ $c-button-primary-border-color-active: $var-primary-active,
77
+ $c-button-primary-color-disabled: $var-disabled-text,
78
+ $c-button-primary-background-disabled: $var-surface,
79
+ $c-button-primary-border-color-disabled: $var-surface,
78
80
 
79
81
  // Secondary: 1px #737373 border, black on hover
80
- $c-button-secondary-color: $text,
81
- $c-button-secondary-background: $white,
82
- $c-button-secondary-border-color: $muted,
83
- $c-button-secondary-color-hover: $black,
84
- $c-button-secondary-background-hover: $white,
85
- $c-button-secondary-border-color-hover: $black,
86
- $c-button-secondary-color-active: $black,
87
- $c-button-secondary-background-active: $surface,
88
- $c-button-secondary-border-color-active: $black,
89
- $c-button-secondary-color-disabled: $disabled-text,
90
- $c-button-secondary-background-disabled: $white,
91
- $c-button-secondary-border-color-disabled: $disabled-border,
82
+ $c-button-secondary-color: $var-text,
83
+ $c-button-secondary-background: $var-background,
84
+ $c-button-secondary-border-color: $var-muted,
85
+ $c-button-secondary-color-hover: $var-primary,
86
+ $c-button-secondary-background-hover: $var-background,
87
+ $c-button-secondary-border-color-hover: $var-primary,
88
+ $c-button-secondary-color-active: $var-primary,
89
+ $c-button-secondary-background-active: $var-surface,
90
+ $c-button-secondary-border-color-active: $var-primary,
91
+ $c-button-secondary-color-disabled: $var-disabled-text,
92
+ $c-button-secondary-background-disabled: $var-background,
93
+ $c-button-secondary-border-color-disabled: $var-disabled-border,
92
94
 
93
95
  // Ghost: transparent, a light surface on hover
94
- $c-button-ghost-color: $text,
96
+ $c-button-ghost-color: $var-text,
95
97
  $c-button-ghost-background: transparent,
96
98
  $c-button-ghost-border-color: transparent,
97
- $c-button-ghost-color-hover: $black,
98
- $c-button-ghost-background-hover: $surface,
99
+ $c-button-ghost-color-hover: $var-primary,
100
+ $c-button-ghost-background-hover: $var-surface,
99
101
  $c-button-ghost-border-color-hover: transparent,
100
- $c-button-ghost-color-active: $black,
101
- $c-button-ghost-background-active: $surface-active,
102
+ $c-button-ghost-color-active: $var-primary,
103
+ $c-button-ghost-background-active: $var-surface-active,
102
104
  $c-button-ghost-border-color-active: transparent,
103
- $c-button-ghost-color-disabled: $disabled-text,
105
+ $c-button-ghost-color-disabled: $var-disabled-text,
104
106
  $c-button-ghost-background-disabled: transparent,
105
107
  $c-button-ghost-border-color-disabled: transparent,
106
108
 
107
109
  // Focus: 1px black ring, offset from the button
108
- $c-button-focus-color: $focus-color,
110
+ $c-button-focus-color: $var-focus,
109
111
  $c-button-focus-width: $focus-width,
110
112
  $c-button-focus-offset: 2px
111
113
  );
@@ -115,8 +117,8 @@
115
117
  @use '@carissa-io/components-checkbox/scss' as checkbox with (
116
118
  // Typography: body text (not the uppercase field-label style), same stack
117
119
  $c-checkbox-font-family: $font-family,
118
- $c-checkbox-font-size: 1rem,
119
- $c-checkbox-label-color: $text,
120
+ $c-checkbox-font-size: $font-size-body,
121
+ $c-checkbox-label-color: $var-text,
120
122
 
121
123
  // Row: 44px minimum touch target
122
124
  $c-checkbox-min-height: $min-height,
@@ -125,30 +127,30 @@
125
127
 
126
128
  // Box: 20px square, 1px #737373 border, black on hover
127
129
  $c-checkbox-box-size: 1.25rem,
128
- $c-checkbox-border-color: $muted,
129
- $c-checkbox-border-color-hover: $black,
130
- $c-checkbox-background: $white,
130
+ $c-checkbox-border-color: $var-muted,
131
+ $c-checkbox-border-color-hover: $var-primary,
132
+ $c-checkbox-background: $var-background,
131
133
  $c-checkbox-radius: $radius,
132
134
 
133
135
  // Checked: black box, white mark
134
- $c-checkbox-checked-background: $black,
135
- $c-checkbox-checked-border-color: $black,
136
- $c-checkbox-mark-color: $white,
136
+ $c-checkbox-checked-background: $var-primary,
137
+ $c-checkbox-checked-border-color: $var-primary,
138
+ $c-checkbox-mark-color: $var-on-primary,
137
139
  $c-checkbox-mark-size: 1rem,
138
140
 
139
141
  // Disabled: #a3a3a3 on #f5f5f5
140
- $c-checkbox-disabled-color: $disabled-text,
141
- $c-checkbox-disabled-background: $surface,
142
- $c-checkbox-disabled-border-color: $disabled-border,
143
- $c-checkbox-disabled-mark-color: $disabled-text,
142
+ $c-checkbox-disabled-color: $var-disabled-text,
143
+ $c-checkbox-disabled-background: $var-surface,
144
+ $c-checkbox-disabled-border-color: $var-disabled-border,
145
+ $c-checkbox-disabled-mark-color: $var-disabled-text,
144
146
 
145
147
  // Focus: 1px black ring, offset from the box
146
- $c-checkbox-focus-color: $focus-color,
148
+ $c-checkbox-focus-color: $var-focus,
147
149
  $c-checkbox-focus-width: $focus-width,
148
150
  $c-checkbox-focus-offset: 2px,
149
151
 
150
152
  // Error: same red as the input error ring
151
- $c-checkbox-error-color: $error,
153
+ $c-checkbox-error-color: $var-error,
152
154
  $c-checkbox-error-font-size: 0.8125rem
153
155
  );
154
156
 
@@ -157,28 +159,28 @@
157
159
  $c-switch-track-width: 2.5rem,
158
160
  $c-switch-track-height: 1.25rem,
159
161
  $c-switch-track-radius: $radius,
160
- $c-switch-track-background: $white,
161
- $c-switch-track-border-color: $muted,
162
- $c-switch-track-border-color-hover: $black,
163
- $c-switch-track-background-checked: $black,
164
- $c-switch-track-border-color-checked: $black,
165
- $c-switch-track-border-color-invalid: $error,
166
- $c-switch-track-background-disabled: $surface,
167
- $c-switch-track-border-color-disabled: $disabled-border,
162
+ $c-switch-track-background: $var-background,
163
+ $c-switch-track-border-color: $var-muted,
164
+ $c-switch-track-border-color-hover: $var-primary,
165
+ $c-switch-track-background-checked: $var-primary,
166
+ $c-switch-track-border-color-checked: $var-primary,
167
+ $c-switch-track-border-color-invalid: $var-error,
168
+ $c-switch-track-background-disabled: $var-surface,
169
+ $c-switch-track-border-color-disabled: $var-disabled-border,
168
170
 
169
171
  // Thumb: square, #737373 when off, white when on
170
172
  $c-switch-thumb-size: 0.875rem,
171
173
  $c-switch-thumb-offset: 0.125rem,
172
174
  $c-switch-thumb-radius: $radius,
173
- $c-switch-thumb-color: $muted,
174
- $c-switch-thumb-color-checked: $white,
175
- $c-switch-thumb-color-disabled: $disabled-text,
175
+ $c-switch-thumb-color: $var-muted,
176
+ $c-switch-thumb-color-checked: $var-on-primary,
177
+ $c-switch-thumb-color-disabled: $var-disabled-text,
176
178
 
177
179
  // Motion: subtle, 200ms
178
180
  $c-switch-transition: (background-color $transition-duration ease, border-color $transition-duration ease, transform $transition-duration ease),
179
181
 
180
182
  // Focus: 1px black ring, offset from the track
181
- $c-switch-focus-color: $focus-color,
183
+ $c-switch-focus-color: $var-focus,
182
184
  $c-switch-focus-width: $focus-width,
183
185
  $c-switch-focus-offset: 2px
184
186
  );
@@ -190,10 +192,10 @@
190
192
  $c-radio-group-legend-font-weight: $label-font-weight,
191
193
  $c-radio-group-legend-text-transform: uppercase,
192
194
  $c-radio-group-legend-letter-spacing: $label-letter-spacing,
193
- $c-radio-group-legend-color: $muted,
195
+ $c-radio-group-legend-color: $var-muted,
194
196
  $c-radio-group-legend-line-height: 1rem,
195
- $c-radio-group-label-font-size: 1rem,
196
- $c-radio-group-label-color: $text,
197
+ $c-radio-group-label-font-size: $font-size-body,
198
+ $c-radio-group-label-color: $var-text,
197
199
 
198
200
  // Rows: 44px minimum touch target
199
201
  $c-radio-group-min-height: $min-height,
@@ -203,42 +205,42 @@
203
205
 
204
206
  // Dot: 20px circle (a radio is round, so the radius stays 50%), 1px #737373 border, black on hover
205
207
  $c-radio-group-dot-size: 1.25rem,
206
- $c-radio-group-border-color: $muted,
207
- $c-radio-group-border-color-hover: $black,
208
- $c-radio-group-background: $white,
208
+ $c-radio-group-border-color: $var-muted,
209
+ $c-radio-group-border-color-hover: $var-primary,
210
+ $c-radio-group-background: $var-background,
209
211
 
210
212
  // Checked: black border and a 10px black inner dot
211
- $c-radio-group-checked-color: $black,
213
+ $c-radio-group-checked-color: $var-primary,
212
214
  $c-radio-group-inner-size: 0.625rem,
213
- $c-radio-group-inner-color: $black,
215
+ $c-radio-group-inner-color: $var-primary,
214
216
 
215
217
  // Disabled: #a3a3a3 on #f5f5f5
216
- $c-radio-group-disabled-color: $disabled-text,
217
- $c-radio-group-disabled-background: $surface,
218
- $c-radio-group-disabled-border-color: $disabled-border,
219
- $c-radio-group-disabled-inner-color: $disabled-text,
218
+ $c-radio-group-disabled-color: $var-disabled-text,
219
+ $c-radio-group-disabled-background: $var-surface,
220
+ $c-radio-group-disabled-border-color: $var-disabled-border,
221
+ $c-radio-group-disabled-inner-color: $var-disabled-text,
220
222
 
221
223
  // Focus: the dot's border grows from 1px to 2px, black
222
- $c-radio-group-focus-color: $focus-color,
224
+ $c-radio-group-focus-color: $var-focus,
223
225
  $c-radio-group-focus-width: $focus-width,
224
226
 
225
227
  // Error: same red as the input error ring
226
- $c-radio-group-error-color: $error,
228
+ $c-radio-group-error-color: $var-error,
227
229
  $c-radio-group-error-font-size: 0.8125rem
228
230
  );
229
231
 
230
232
  @use '@carissa-io/components-slider/scss' as slider with (
231
233
  // Typography: label = the field-label style, live value = body text
232
234
  $c-slider-font-family: $font-family,
233
- $c-slider-font-size: 1rem,
234
- $c-slider-color: $text,
235
+ $c-slider-font-size: $font-size-body,
236
+ $c-slider-color: $var-text,
235
237
  $c-slider-label-font-size: $label-font-size,
236
238
  $c-slider-label-font-weight: $label-font-weight,
237
239
  $c-slider-label-text-transform: uppercase,
238
240
  $c-slider-label-letter-spacing: $label-letter-spacing,
239
- $c-slider-label-color: $muted,
240
- $c-slider-value-font-size: 1rem,
241
- $c-slider-value-color: $text,
241
+ $c-slider-label-color: $var-muted,
242
+ $c-slider-value-font-size: $font-size-body,
243
+ $c-slider-value-color: $var-text,
242
244
 
243
245
  // Control: 44px minimum touch target, subtle 200ms motion
244
246
  $c-slider-min-height: $min-height,
@@ -246,37 +248,37 @@
246
248
 
247
249
  // Track: 2px #737373 line with a black fill
248
250
  $c-slider-track-height: 2px,
249
- $c-slider-track-color: $muted,
250
- $c-slider-track-fill-color: $black,
251
+ $c-slider-track-color: $var-muted,
252
+ $c-slider-track-fill-color: $var-primary,
251
253
  $c-slider-track-radius: $radius,
252
254
 
253
255
  // Thumb: 20px black square with a 1px white border; slightly lighter on hover and active
254
256
  $c-slider-thumb-size: 1.25rem,
255
- $c-slider-thumb-color: $black,
256
- $c-slider-thumb-color-hover: $primary-hover,
257
- $c-slider-thumb-color-active: $primary-active,
257
+ $c-slider-thumb-color: $var-primary,
258
+ $c-slider-thumb-color-hover: $var-primary-hover,
259
+ $c-slider-thumb-color-active: $var-primary-active,
258
260
  $c-slider-thumb-border-width: 1px,
259
- $c-slider-thumb-border-color: $white,
261
+ $c-slider-thumb-border-color: $var-background,
260
262
  $c-slider-thumb-radius: $radius,
261
263
 
262
264
  // Disabled: #a3a3a3 on a #d4d4d4 track
263
- $c-slider-disabled-color: $disabled-text,
264
- $c-slider-disabled-track-color: $disabled-border,
265
- $c-slider-disabled-fill-color: $disabled-text,
266
- $c-slider-disabled-thumb-color: $disabled-text,
265
+ $c-slider-disabled-color: $var-disabled-text,
266
+ $c-slider-disabled-track-color: $var-disabled-border,
267
+ $c-slider-disabled-fill-color: $var-disabled-text,
268
+ $c-slider-disabled-thumb-color: $var-disabled-text,
267
269
 
268
270
  // Focus: 1px black ring, offset from the thumb
269
- $c-slider-focus-color: $focus-color,
271
+ $c-slider-focus-color: $var-focus,
270
272
  $c-slider-focus-width: $focus-width,
271
273
  $c-slider-focus-offset: 2px
272
274
  );
273
275
 
274
276
  @use '@carissa-io/components-popover/scss' as popover with (
275
277
  // Panel: white, 1px #737373 border, square, flat (no shadow), 4px below the anchor
276
- $c-popover-background: $white,
277
- $c-popover-color: $text,
278
+ $c-popover-background: $var-background,
279
+ $c-popover-color: $var-text,
278
280
  $c-popover-border-width: 1px,
279
- $c-popover-border-color: $muted,
281
+ $c-popover-border-color: $var-muted,
280
282
  $c-popover-radius: $radius,
281
283
  $c-popover-shadow: none,
282
284
  $c-popover-offset: 0.5rem, // clears the half of a notched label that overhangs the field
@@ -286,27 +288,27 @@
286
288
  @use '@carissa-io/components-listbox/scss' as listbox with (
287
289
  // Options: body text, 44px minimum touch target
288
290
  $c-listbox-font-family: $font-family,
289
- $c-listbox-font-size: 1rem,
291
+ $c-listbox-font-size: $font-size-body,
290
292
  $c-listbox-max-height: 15rem,
291
- $c-listbox-option-color: $text,
293
+ $c-listbox-option-color: $var-text,
292
294
  $c-listbox-option-min-height: $min-height,
293
295
  $c-listbox-option-padding-y: 0,
294
296
  $c-listbox-option-padding-x: 0.75rem,
295
297
  $c-listbox-option-transition: (background-color $transition-duration ease, color $transition-duration ease),
296
298
 
297
299
  // Active: the hover surface
298
- $c-listbox-option-active-color: $text,
299
- $c-listbox-option-active-background: $surface,
300
+ $c-listbox-option-active-color: $var-text,
301
+ $c-listbox-option-active-background: $var-surface,
300
302
 
301
303
  // Selected: bold with a 2px black bar on the inline-start side
302
- $c-listbox-option-selected-color: $text,
303
- $c-listbox-option-selected-font-weight: 700,
304
+ $c-listbox-option-selected-color: $var-text,
305
+ $c-listbox-option-selected-font-weight: $font-weight-bold,
304
306
  $c-listbox-option-selected-marker-width: 2px,
305
- $c-listbox-option-selected-marker-color: $black,
307
+ $c-listbox-option-selected-marker-color: $var-primary,
306
308
 
307
309
  // Disabled and empty
308
- $c-listbox-option-disabled-color: $disabled-text,
309
- $c-listbox-empty-color: $muted,
310
+ $c-listbox-option-disabled-color: $var-disabled-text,
311
+ $c-listbox-empty-color: $var-muted,
310
312
  $c-listbox-empty-padding: 0.75rem
311
313
  );
312
314
 
@@ -314,22 +316,22 @@
314
316
  // input, popover and listbox styles, which are already loaded and configured by the blocks above: keep this block after them.
315
317
  @use '@carissa-io/components-select/scss' as select with (
316
318
  // Trigger: body text, placeholder in the same muted tone as the input placeholder
317
- $c-select-trigger-color: $text,
318
- $c-select-placeholder-color: $muted,
319
+ $c-select-trigger-color: $var-text,
320
+ $c-select-placeholder-color: $var-muted,
319
321
  $c-select-trigger-min-height: 1.5em,
320
322
 
321
323
  // Arrow: shared with the Combobox
322
324
  $c-select-arrow-size: $arrow-size,
323
325
  $c-select-arrow-offset: $arrow-offset,
324
- $c-select-arrow-color: $arrow-color,
325
- $c-select-arrow-color-hover: $arrow-color-active,
326
- $c-select-arrow-color-open: $arrow-color-active,
327
- $c-select-arrow-color-disabled: $arrow-color-disabled,
326
+ $c-select-arrow-color: $var-arrow-color,
327
+ $c-select-arrow-color-hover: $var-arrow-color-active,
328
+ $c-select-arrow-color-open: $var-arrow-color-active,
329
+ $c-select-arrow-color-disabled: $var-arrow-color-disabled,
328
330
  $c-select-arrow-transition: $arrow-transition,
329
331
  $c-select-arrow-rotate-open: $arrow-rotate-open,
330
332
 
331
333
  // Open: the focused border
332
- $c-select-open-border-color: $focus-color
334
+ $c-select-open-border-color: $var-focus
333
335
  );
334
336
 
335
337
  // Combobox: the same field as Select with a text input in place of the button, and the same arrow. Its index forwards
@@ -337,16 +339,16 @@
337
339
  // after Select, which forwards them too).
338
340
  @use '@carissa-io/components-combobox/scss' as combobox with (
339
341
  // Text: body text; the placeholder stays the input's muted one
340
- $c-combobox-color: $text,
342
+ $c-combobox-color: $var-text,
341
343
  $c-combobox-min-height: 1.5em,
342
344
 
343
345
  // Arrow: shared with the Select
344
346
  $c-combobox-arrow-size: $arrow-size,
345
347
  $c-combobox-arrow-offset: $arrow-offset,
346
- $c-combobox-arrow-color: $arrow-color,
347
- $c-combobox-arrow-color-hover: $arrow-color-active,
348
- $c-combobox-arrow-color-open: $arrow-color-active,
349
- $c-combobox-arrow-color-disabled: $arrow-color-disabled,
348
+ $c-combobox-arrow-color: $var-arrow-color,
349
+ $c-combobox-arrow-color-hover: $var-arrow-color-active,
350
+ $c-combobox-arrow-color-open: $var-arrow-color-active,
351
+ $c-combobox-arrow-color-disabled: $var-arrow-color-disabled,
350
352
  $c-combobox-arrow-transition: $arrow-transition,
351
353
  $c-combobox-arrow-rotate-open: $arrow-rotate-open
352
354
  );
@@ -357,28 +359,28 @@
357
359
  // Box: dashed 1px #737373 (the input border), black on hover and while files are dragged over it
358
360
  $c-upload-border-style: dashed,
359
361
  $c-upload-transition: (border-color $transition-duration ease, background-color $transition-duration ease, box-shadow $transition-duration ease, color $transition-duration ease),
360
- $c-upload-dragging-border-color: $black,
361
- $c-upload-dragging-background: $surface,
362
+ $c-upload-dragging-border-color: $var-primary,
363
+ $c-upload-dragging-background: $var-surface,
362
364
 
363
365
  // Zone: a visible target with centered body text
364
366
  $c-upload-zone-min-height: 5.5rem,
365
367
  $c-upload-zone-padding: 0.75rem 0,
366
- $c-upload-zone-color: $muted,
368
+ $c-upload-zone-color: $var-muted,
367
369
  $c-upload-zone-text-align: center,
368
370
 
369
371
  // Files: 44px rows split by a 1px light line
370
372
  $c-upload-file-min-height: $min-height,
371
373
  $c-upload-file-padding: 0,
372
- $c-upload-file-separator-color: $surface-active,
373
- $c-upload-file-name-font-size: 1rem,
374
- $c-upload-file-name-color: $text,
374
+ $c-upload-file-separator-color: $var-surface-active,
375
+ $c-upload-file-name-font-size: $font-size-body,
376
+ $c-upload-file-name-color: $var-text,
375
377
 
376
378
  // Remove button: 44px square, muted icon turning black, 1px black focus ring
377
379
  $c-upload-remove-size: 2.75rem,
378
- $c-upload-remove-color: $muted,
379
- $c-upload-remove-color-hover: $black,
380
+ $c-upload-remove-color: $var-muted,
381
+ $c-upload-remove-color-hover: $var-primary,
380
382
  $c-upload-remove-radius: $radius,
381
- $c-upload-remove-focus-color: $focus-color,
383
+ $c-upload-remove-focus-color: $var-focus,
382
384
  $c-upload-remove-focus-width: $focus-width,
383
385
  $c-upload-remove-focus-offset: -1px
384
386
  );
@@ -388,7 +390,7 @@
388
390
  @use '@carissa-io/components-calendar/scss' as calendar with (
389
391
  // Typography
390
392
  $c-calendar-font-family: $font-family,
391
- $c-calendar-font-size: 1rem,
393
+ $c-calendar-font-size: $font-size-body,
392
394
  $c-calendar-transition: (background-color $transition-duration ease, color $transition-duration ease, border-color $transition-duration ease),
393
395
 
394
396
  // Title: the label style, between the two 44px navigation buttons
@@ -396,16 +398,16 @@
396
398
  $c-calendar-title-font-weight: $label-font-weight,
397
399
  $c-calendar-title-text-transform: uppercase,
398
400
  $c-calendar-title-letter-spacing: $label-letter-spacing,
399
- $c-calendar-title-color: $muted,
401
+ $c-calendar-title-color: $var-muted,
400
402
 
401
403
  // Navigation: muted icon turning black, 1px black ring drawn inside
402
404
  $c-calendar-nav-size: $min-height,
403
- $c-calendar-nav-color: $muted,
404
- $c-calendar-nav-color-hover: $black,
405
+ $c-calendar-nav-color: $var-muted,
406
+ $c-calendar-nav-color-hover: $var-primary,
405
407
  $c-calendar-nav-background-hover: transparent,
406
- $c-calendar-nav-color-disabled: $disabled-text,
408
+ $c-calendar-nav-color-disabled: $var-disabled-text,
407
409
  $c-calendar-nav-radius: $radius,
408
- $c-calendar-nav-focus-color: $focus-color,
410
+ $c-calendar-nav-focus-color: $var-focus,
409
411
  $c-calendar-nav-focus-width: $focus-width,
410
412
  $c-calendar-nav-focus-offset: -1px,
411
413
 
@@ -414,25 +416,25 @@
414
416
  $c-calendar-weekday-font-weight: $label-font-weight,
415
417
  $c-calendar-weekday-text-transform: uppercase,
416
418
  $c-calendar-weekday-letter-spacing: $label-letter-spacing,
417
- $c-calendar-weekday-color: $muted,
419
+ $c-calendar-weekday-color: $var-muted,
418
420
 
419
421
  // Days: 44px squares in body text, light hover surface
420
422
  $c-calendar-day-width: $min-height,
421
423
  $c-calendar-day-height: $min-height,
422
- $c-calendar-day-font-size: 1rem,
423
- $c-calendar-day-color: $text,
424
+ $c-calendar-day-font-size: $font-size-body,
425
+ $c-calendar-day-color: $var-text,
424
426
  $c-calendar-day-radius: $radius,
425
- $c-calendar-day-color-hover: $text,
426
- $c-calendar-day-background-hover: $surface,
427
- $c-calendar-selected-color: $white,
428
- $c-calendar-selected-background: $black,
429
- $c-calendar-selected-border-color: $black,
427
+ $c-calendar-day-color-hover: $var-text,
428
+ $c-calendar-day-background-hover: $var-surface,
429
+ $c-calendar-selected-color: $var-on-primary,
430
+ $c-calendar-selected-background: $var-primary,
431
+ $c-calendar-selected-border-color: $var-primary,
430
432
  $c-calendar-today-border-width: 1px,
431
- $c-calendar-today-border-color: $black,
432
- $c-calendar-disabled-color: $disabled-text,
433
+ $c-calendar-today-border-color: $var-primary,
434
+ $c-calendar-disabled-color: $var-disabled-text,
433
435
 
434
436
  // Focus: 1px black ring drawn inside the day so it is not clipped
435
- $c-calendar-focus-color: $focus-color,
437
+ $c-calendar-focus-color: $var-focus,
436
438
  $c-calendar-focus-width: $focus-width,
437
439
  $c-calendar-focus-offset: -1px
438
440
  );
@@ -442,8 +444,8 @@
442
444
  // this block after them. The panel gets a little padding so the calendar does not touch the Popover's border.
443
445
  @use '@carissa-io/components-date-picker/scss' as date-picker with (
444
446
  // Trigger: body text, placeholder in the same muted tone as the input placeholder
445
- $c-date-picker-trigger-color: $text,
446
- $c-date-picker-placeholder-color: $muted,
447
+ $c-date-picker-trigger-color: $var-text,
448
+ $c-date-picker-placeholder-color: $var-muted,
447
449
  $c-date-picker-trigger-min-height: 1.5em,
448
450
 
449
451
  // Panel
@@ -452,14 +454,14 @@
452
454
  // Icon: the arrow's size, offset and colors, without the rotation
453
455
  $c-date-picker-icon-size: $arrow-size,
454
456
  $c-date-picker-icon-offset: $arrow-offset,
455
- $c-date-picker-icon-color: $arrow-color,
456
- $c-date-picker-icon-color-hover: $arrow-color-active,
457
- $c-date-picker-icon-color-open: $arrow-color-active,
458
- $c-date-picker-icon-color-disabled: $arrow-color-disabled,
457
+ $c-date-picker-icon-color: $var-arrow-color,
458
+ $c-date-picker-icon-color-hover: $var-arrow-color-active,
459
+ $c-date-picker-icon-color-open: $var-arrow-color-active,
460
+ $c-date-picker-icon-color-disabled: $var-arrow-color-disabled,
459
461
  $c-date-picker-icon-transition: color $transition-duration ease,
460
462
 
461
463
  // Open: the focused border
462
- $c-date-picker-open-border-color: $focus-color
464
+ $c-date-picker-open-border-color: $var-focus
463
465
  );
464
466
 
465
467
  // Search: the Input with a leading icon and a clear button built on the input's start/end slots. Its index forwards the
@@ -468,13 +470,13 @@
468
470
  @use '@carissa-io/components-search/scss' as search with (
469
471
  // Search icon
470
472
  $c-search-icon-size: 1.25rem,
471
- $c-search-icon-color: $muted,
472
- $c-search-icon-color-focus: $black,
473
+ $c-search-icon-color: $var-muted,
474
+ $c-search-icon-color-focus: $var-primary,
473
475
 
474
476
  // Clear button
475
477
  $c-search-clear-icon-size: 1rem,
476
- $c-search-clear-color: $muted,
477
- $c-search-clear-color-hover: $black,
478
+ $c-search-clear-color: $var-muted,
479
+ $c-search-clear-color-hover: $var-primary,
478
480
 
479
481
  // Motion
480
482
  $c-search-transition: color $transition-duration ease
@@ -487,73 +489,73 @@
487
489
  @use '@carissa-io/components-typography/scss' as typography with (
488
490
  // Headings
489
491
  $c-heading-font-family: $font-family,
490
- $c-heading-color: $text,
492
+ $c-heading-color: $var-text,
491
493
 
492
- $c-heading-display-font-size: 3.5rem,
493
- $c-heading-display-font-weight: 900,
494
+ $c-heading-display-font-size: $font-size-display,
495
+ $c-heading-display-font-weight: $font-weight-black,
494
496
  $c-heading-display-line-height: 1.05,
495
497
  $c-heading-display-letter-spacing: -0.04em,
496
498
 
497
- $c-heading-1-font-size: 2.5rem,
498
- $c-heading-1-font-weight: 900,
499
+ $c-heading-1-font-size: $font-size-h1,
500
+ $c-heading-1-font-weight: $font-weight-black,
499
501
  $c-heading-1-line-height: 1.1,
500
502
  $c-heading-1-letter-spacing: -0.03em,
501
503
 
502
- $c-heading-2-font-size: 1.75rem,
503
- $c-heading-2-font-weight: 900,
504
+ $c-heading-2-font-size: $font-size-h2,
505
+ $c-heading-2-font-weight: $font-weight-black,
504
506
  $c-heading-2-line-height: 1.2,
505
507
  $c-heading-2-letter-spacing: -0.02em,
506
508
 
507
- $c-heading-3-font-size: 1.25rem,
508
- $c-heading-3-font-weight: 700,
509
- $c-heading-3-line-height: 1.3,
509
+ $c-heading-3-font-size: $font-size-h3,
510
+ $c-heading-3-font-weight: $font-weight-bold,
511
+ $c-heading-3-line-height: $line-height-tight,
510
512
  $c-heading-3-letter-spacing: normal,
511
513
 
512
- $c-heading-4-font-size: 1.125rem,
513
- $c-heading-4-font-weight: 700,
514
- $c-heading-4-line-height: 1.3,
514
+ $c-heading-4-font-size: $font-size-h4,
515
+ $c-heading-4-font-weight: $font-weight-bold,
516
+ $c-heading-4-line-height: $line-height-tight,
515
517
  $c-heading-4-letter-spacing: normal,
516
518
 
517
- $c-heading-5-font-size: 1rem,
518
- $c-heading-5-font-weight: 700,
519
+ $c-heading-5-font-size: $font-size-h5,
520
+ $c-heading-5-font-weight: $font-weight-bold,
519
521
  $c-heading-5-line-height: 1.4,
520
522
  $c-heading-5-letter-spacing: normal,
521
523
 
522
- $c-heading-6-font-size: 0.875rem,
523
- $c-heading-6-font-weight: 700,
524
+ $c-heading-6-font-size: $font-size-h6,
525
+ $c-heading-6-font-weight: $font-weight-bold,
524
526
  $c-heading-6-line-height: 1.4,
525
527
  $c-heading-6-letter-spacing: normal,
526
528
 
527
529
  // Text
528
530
  $c-text-font-family: $font-family,
529
- $c-text-color: $text,
530
- $c-text-muted-color: $muted,
531
+ $c-text-color: $var-text,
532
+ $c-text-muted-color: $var-muted,
531
533
  $c-text-mono-font-family: $font-family-mono,
532
534
 
533
- $c-text-body-font-size: 1rem,
534
- $c-text-body-font-weight: 400,
535
- $c-text-body-line-height: 1.5,
535
+ $c-text-body-font-size: $font-size-body,
536
+ $c-text-body-font-weight: $font-weight-regular,
537
+ $c-text-body-line-height: $line-height-normal,
536
538
 
537
- $c-text-lead-font-size: 1.25rem,
538
- $c-text-lead-font-weight: 400,
539
- $c-text-lead-line-height: 1.5,
539
+ $c-text-lead-font-size: $font-size-lead,
540
+ $c-text-lead-font-weight: $font-weight-regular,
541
+ $c-text-lead-line-height: $line-height-normal,
540
542
 
541
- $c-text-small-font-size: 0.875rem,
542
- $c-text-small-font-weight: 400,
543
- $c-text-small-line-height: 1.5,
543
+ $c-text-small-font-size: $font-size-small,
544
+ $c-text-small-font-weight: $font-weight-regular,
545
+ $c-text-small-line-height: $line-height-normal,
544
546
 
545
- $c-text-caption-font-size: 0.75rem,
546
- $c-text-caption-font-weight: 400,
547
+ $c-text-caption-font-size: $font-size-caption,
548
+ $c-text-caption-font-weight: $font-weight-regular,
547
549
  $c-text-caption-line-height: 1.4,
548
550
 
549
551
  // Overline: the field-label style
550
- $c-text-overline-font-size: $label-font-size,
552
+ $c-text-overline-font-size: $font-size-overline,
551
553
  $c-text-overline-font-weight: $label-font-weight,
552
554
  $c-text-overline-line-height: 1.4,
553
555
  $c-text-overline-letter-spacing: $label-letter-spacing,
554
556
  $c-text-overline-text-transform: uppercase,
555
557
 
556
- $c-text-mono-font-size: 0.875rem,
557
- $c-text-mono-font-weight: 400,
558
- $c-text-mono-line-height: 1.5
558
+ $c-text-mono-font-size: $font-size-small,
559
+ $c-text-mono-font-weight: $font-weight-regular,
560
+ $c-text-mono-line-height: $line-height-normal
559
561
  );