@graupl/graupl 1.0.0-alpha.1 → 1.0.0-alpha.2

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.
@@ -124,172 +124,346 @@ $tertiary: (
124
124
  );
125
125
 
126
126
  // Theme colours.
127
- // Colour primary.
128
- $theme-light--primary: var(
129
- --#{defaults.$prefix}-theme-light--primary,
127
+ // Colour primary - light.
128
+ $theme-light--primary--100: var(
129
+ --#{defaults.$prefix}-theme-light--primary--100,
130
+ #{map.get($primary, 100)}
131
+ );
132
+ $theme-light--primary--200: var(
133
+ --#{defaults.$prefix}-theme-light--primary--200,
134
+ #{map.get($primary, 200)}
135
+ );
136
+ $theme-light--primary--300: var(
137
+ --#{defaults.$prefix}-theme-light--primary--300,
138
+ #{map.get($primary, 300)}
139
+ );
140
+ $theme-light--primary--400: var(
141
+ --#{defaults.$prefix}-theme-light--primary--400,
142
+ #{map.get($primary, 400)}
143
+ );
144
+ $theme-light--primary--500: var(
145
+ --#{defaults.$prefix}-theme-light--primary--500,
146
+ #{map.get($primary, 500)}
147
+ );
148
+ $theme-light--primary--600: var(
149
+ --#{defaults.$prefix}-theme-light--primary--600,
150
+ #{map.get($primary, 600)}
151
+ );
152
+ $theme-light--primary--700: var(
153
+ --#{defaults.$prefix}-theme-light--primary--700,
130
154
  #{map.get($primary, 700)}
131
155
  );
132
- $theme-light--primary--dark: var(
133
- --#{defaults.$prefix}-theme-light--primary--dark,
156
+ $theme-light--primary--800: var(
157
+ --#{defaults.$prefix}-theme-light--primary--800,
134
158
  #{map.get($primary, 800)}
135
159
  );
136
- $theme-light--primary--light: var(
137
- --#{defaults.$prefix}-theme-light--primary--light,
160
+ $theme-light--primary--900: var(
161
+ --#{defaults.$prefix}-theme-light--primary--900,
162
+ #{map.get($primary, 900)}
163
+ );
164
+
165
+ // Colour primary - dark.
166
+ $theme-dark--primary--100: var(
167
+ --#{defaults.$prefix}-theme-dark--primary--100,
168
+ #{map.get($primary, 900)}
169
+ );
170
+ $theme-dark--primary--200: var(
171
+ --#{defaults.$prefix}-theme-dark--primary--200,
172
+ #{map.get($primary, 800)}
173
+ );
174
+ $theme-dark--primary--300: var(
175
+ --#{defaults.$prefix}-theme-dark--primary--300,
176
+ #{map.get($primary, 700)}
177
+ );
178
+ $theme-dark--primary--400: var(
179
+ --#{defaults.$prefix}-theme-dark--primary--400,
138
180
  #{map.get($primary, 600)}
139
181
  );
140
- $theme-dark--primary: var(
141
- --#{defaults.$prefix}-theme-dark--primary,
182
+ $theme-dark--primary--500: var(
183
+ --#{defaults.$prefix}-theme-dark--primary--500,
184
+ #{map.get($primary, 500)}
185
+ );
186
+ $theme-dark--primary--600: var(
187
+ --#{defaults.$prefix}-theme-dark--primary--600,
188
+ #{map.get($primary, 400)}
189
+ );
190
+ $theme-dark--primary--700: var(
191
+ --#{defaults.$prefix}-theme-dark--primary--700,
142
192
  #{map.get($primary, 300)}
143
193
  );
144
- $theme-dark--primary--dark: var(
145
- --#{defaults.$prefix}-theme-dark--primary--dark,
194
+ $theme-dark--primary--800: var(
195
+ --#{defaults.$prefix}-theme-dark--primary--800,
146
196
  #{map.get($primary, 200)}
147
197
  );
148
- $theme-dark--primary--light: var(
149
- --#{defaults.$prefix}-theme-dark--primary--light,
150
- #{map.get($primary, 400)}
198
+ $theme-dark--primary--900: var(
199
+ --#{defaults.$prefix}-theme-dark--primary--900,
200
+ #{map.get($primary, 100)}
201
+ );
202
+
203
+ // Colour primary - active.
204
+ $theme-active--primary--100: var(
205
+ --#{defaults.$prefix}-theme-active--primary--100,
206
+ #{$theme-light--primary--100}
207
+ );
208
+ $theme-active--primary--200: var(
209
+ --#{defaults.$prefix}-theme-active--primary--200,
210
+ #{$theme-light--primary--200}
151
211
  );
152
- $theme-active--primary: var(
153
- --#{defaults.$prefix}-theme-active--primary,
154
- #{$theme-light--primary}
212
+ $theme-active--primary--300: var(
213
+ --#{defaults.$prefix}-theme-active--primary--300,
214
+ #{$theme-light--primary--300}
155
215
  );
156
- $theme-active--primary--dark: var(
157
- --#{defaults.$prefix}-theme-active--primary--dark,
158
- #{$theme-light--primary--dark}
216
+ $theme-active--primary--400: var(
217
+ --#{defaults.$prefix}-theme-active--primary--400,
218
+ #{$theme-light--primary--400}
159
219
  );
160
- $theme-active--primary--light: var(
161
- --#{defaults.$prefix}-theme-active--primary--light,
162
- #{$theme-light--primary--light}
220
+ $theme-active--primary--500: var(
221
+ --#{defaults.$prefix}-theme-active--primary--500,
222
+ #{$theme-light--primary--500}
223
+ );
224
+ $theme-active--primary--600: var(
225
+ --#{defaults.$prefix}-theme-active--primary--600,
226
+ #{$theme-light--primary--600}
227
+ );
228
+ $theme-active--primary--700: var(
229
+ --#{defaults.$prefix}-theme-active--primary--700,
230
+ #{$theme-light--primary--700}
231
+ );
232
+ $theme-active--primary--800: var(
233
+ --#{defaults.$prefix}-theme-active--primary--800,
234
+ #{$theme-light--primary--800}
235
+ );
236
+ $theme-active--primary--900: var(
237
+ --#{defaults.$prefix}-theme-active--primary--900,
238
+ #{$theme-light--primary--900}
163
239
  );
164
240
 
165
- // Color secondary.
166
- $theme-light--secondary: var(
167
- --#{defaults.$prefix}-theme-light--secondary,
241
+ // Color secondary - light.
242
+ $theme-light--secondary--100: var(
243
+ --#{defaults.$prefix}-theme-light--secondary--100,
244
+ #{map.get($secondary, 100)}
245
+ );
246
+ $theme-light--secondary--200: var(
247
+ --#{defaults.$prefix}-theme-light--secondary--200,
248
+ #{map.get($secondary, 200)}
249
+ );
250
+ $theme-light--secondary--300: var(
251
+ --#{defaults.$prefix}-theme-light--secondary--300,
252
+ #{map.get($secondary, 300)}
253
+ );
254
+ $theme-light--secondary--400: var(
255
+ --#{defaults.$prefix}-theme-light--secondary--400,
256
+ #{map.get($secondary, 400)}
257
+ );
258
+ $theme-light--secondary--500: var(
259
+ --#{defaults.$prefix}-theme-light--secondary--500,
260
+ #{map.get($secondary, 500)}
261
+ );
262
+ $theme-light--secondary--600: var(
263
+ --#{defaults.$prefix}-theme-light--secondary--600,
264
+ #{map.get($secondary, 600)}
265
+ );
266
+ $theme-light--secondary--700: var(
267
+ --#{defaults.$prefix}-theme-light--secondary--700,
168
268
  #{map.get($secondary, 700)}
169
269
  );
170
- $theme-light--secondary--dark: var(
171
- --#{defaults.$prefix}-theme-light--secondary--dark,
270
+ $theme-light--secondary--800: var(
271
+ --#{defaults.$prefix}-theme-light--secondary--800,
172
272
  #{map.get($secondary, 800)}
173
273
  );
174
- $theme-light--secondary--light: var(
175
- --#{defaults.$prefix}-theme-light--secondary--light,
274
+ $theme-light--secondary--900: var(
275
+ --#{defaults.$prefix}-theme-light--secondary--900,
276
+ #{map.get($secondary, 900)}
277
+ );
278
+
279
+ // Colour secondary - dark.
280
+ $theme-dark--secondary--100: var(
281
+ --#{defaults.$prefix}-theme-dark--secondary--100,
282
+ #{map.get($secondary, 900)}
283
+ );
284
+ $theme-dark--secondary--200: var(
285
+ --#{defaults.$prefix}-theme-dark--secondary--200,
286
+ #{map.get($secondary, 800)}
287
+ );
288
+ $theme-dark--secondary--300: var(
289
+ --#{defaults.$prefix}-theme-dark--secondary--300,
290
+ #{map.get($secondary, 700)}
291
+ );
292
+ $theme-dark--secondary--400: var(
293
+ --#{defaults.$prefix}-theme-dark--secondary--400,
176
294
  #{map.get($secondary, 600)}
177
295
  );
178
- $theme-dark--secondary: var(
179
- --#{defaults.$prefix}-theme-dark--secondary,
296
+ $theme-dark--secondary--500: var(
297
+ --#{defaults.$prefix}-theme-dark--secondary--500,
298
+ #{map.get($secondary, 500)}
299
+ );
300
+ $theme-dark--secondary--600: var(
301
+ --#{defaults.$prefix}-theme-dark--secondary--600,
302
+ #{map.get($secondary, 400)}
303
+ );
304
+ $theme-dark--secondary--700: var(
305
+ --#{defaults.$prefix}-theme-dark--secondary--700,
180
306
  #{map.get($secondary, 300)}
181
307
  );
182
- $theme-dark--secondary--dark: var(
183
- --#{defaults.$prefix}-theme-dark--secondary--dark,
308
+ $theme-dark--secondary--800: var(
309
+ --#{defaults.$prefix}-theme-dark--secondary--800,
184
310
  #{map.get($secondary, 200)}
185
311
  );
186
- $theme-dark--secondary--light: var(
187
- --#{defaults.$prefix}-theme-dark--secondary--light,
188
- #{map.get($secondary, 400)}
312
+ $theme-dark--secondary--900: var(
313
+ --#{defaults.$prefix}-theme-dark--secondary--900,
314
+ #{map.get($secondary, 100)}
189
315
  );
190
- $theme-active--secondary: var(
191
- --#{defaults.$prefix}-theme-active--secondary,
192
- #{$theme-light--secondary}
316
+
317
+ // Colour secondary - active.
318
+ $theme-active--secondary--100: var(
319
+ --#{defaults.$prefix}-theme-active--secondary--100,
320
+ #{$theme-light--secondary--100}
193
321
  );
194
- $theme-active--secondary--dark: var(
195
- --#{defaults.$prefix}-theme-active--secondary--dark,
196
- #{$theme-light--secondary--dark}
322
+ $theme-active--secondary--200: var(
323
+ --#{defaults.$prefix}-theme-active--secondary--200,
324
+ #{$theme-light--secondary--200}
197
325
  );
198
- $theme-active--secondary--light: var(
199
- --#{defaults.$prefix}-theme-active--secondary--light,
200
- #{$theme-light--secondary--light}
326
+ $theme-active--secondary--300: var(
327
+ --#{defaults.$prefix}-theme-active--secondary--300,
328
+ #{$theme-light--secondary--300}
201
329
  );
202
-
203
- // Colour tertiary.
204
- $theme-light--tertiary: var(
205
- --#{defaults.$prefix}-theme-light--tertiary,
206
- #{map.get($tertiary, 700)}
330
+ $theme-active--secondary--400: var(
331
+ --#{defaults.$prefix}-theme-active--secondary--400,
332
+ #{$theme-light--secondary--400}
207
333
  );
208
- $theme-light--tertiary--dark: var(
209
- --#{defaults.$prefix}-theme-light--tertiary--dark,
210
- #{map.get($tertiary, 800)}
334
+ $theme-active--secondary--500: var(
335
+ --#{defaults.$prefix}-theme-active--secondary--500,
336
+ #{$theme-light--secondary--500}
211
337
  );
212
- $theme-light--tertiary--light: var(
213
- --#{defaults.$prefix}-theme-light--tertiary--light,
214
- #{map.get($tertiary, 600)}
338
+ $theme-active--secondary--600: var(
339
+ --#{defaults.$prefix}-theme-active--secondary--600,
340
+ #{$theme-light--secondary--600}
215
341
  );
216
- $theme-dark--tertiary: var(
217
- --#{defaults.$prefix}-theme-dark--tertiary,
218
- #{map.get($tertiary, 300)}
342
+ $theme-active--secondary--700: var(
343
+ --#{defaults.$prefix}-theme-active--secondary--700,
344
+ #{$theme-light--secondary--700}
345
+ );
346
+ $theme-active--secondary--800: var(
347
+ --#{defaults.$prefix}-theme-active--secondary--800,
348
+ #{$theme-light--secondary--800}
349
+ );
350
+ $theme-active--secondary--900: var(
351
+ --#{defaults.$prefix}-theme-active--secondary--900,
352
+ #{$theme-light--secondary--900}
219
353
  );
220
- $theme-dark--tertiary--dark: var(
221
- --#{defaults.$prefix}-theme-dark--tertiary--dark,
354
+
355
+ // Colour tertiary - light.
356
+ $theme-light--tertiary--100: var(
357
+ --#{defaults.$prefix}-theme-light--tertiary--100,
358
+ #{map.get($tertiary, 100)}
359
+ );
360
+ $theme-light--tertiary--200: var(
361
+ --#{defaults.$prefix}-theme-light--tertiary--200,
222
362
  #{map.get($tertiary, 200)}
223
363
  );
224
- $theme-dark--tertiary--light: var(
225
- --#{defaults.$prefix}-theme-dark--tertiary--light,
226
- #{map.get($tertiary, 400)}
364
+ $theme-light--tertiary--300: var(
365
+ --#{defaults.$prefix}-theme-light--tertiary--300,
366
+ #{map.get($tertiary, 300)}
227
367
  );
228
- $theme-active--tertiary: var(
229
- --#{defaults.$prefix}-theme-active--tertiary,
230
- #{$theme-light--tertiary}
368
+ $theme-light--tertiary--400: var(
369
+ --#{defaults.$prefix}-theme-light--tertiary--400,
370
+ #{map.get($tertiary, 400)}
231
371
  );
232
- $theme-active--tertiary--dark: var(
233
- --#{defaults.$prefix}-theme-active--tertiary--dark,
234
- #{$theme-light--tertiary--dark}
372
+ $theme-light--tertiary--500: var(
373
+ --#{defaults.$prefix}-theme-light--tertiary--500,
374
+ #{map.get($tertiary, 500)}
235
375
  );
236
- $theme-active--tertiary--light: var(
237
- --#{defaults.$prefix}-theme-active--tertiary--light,
238
- #{$theme-light--tertiary--light}
376
+ $theme-light--tertiary--600: var(
377
+ --#{defaults.$prefix}-theme-light--tertiary--600,
378
+ #{map.get($tertiary, 600)}
239
379
  );
240
-
241
- // Colour light.
242
- $theme-light--light: var(
243
- --#{defaults.$prefix}-theme-light--light,
244
- #{map.get($primary, 100)}
380
+ $theme-light--tertiary--700: var(
381
+ --#{defaults.$prefix}-theme-light--tertiary--700,
382
+ #{map.get($tertiary, 700)}
245
383
  );
246
- $theme-dark--light: var(
247
- --#{defaults.$prefix}-theme-dark--light,
248
- #{map.get($primary, 900)}
384
+ $theme-light--tertiary--800: var(
385
+ --#{defaults.$prefix}-theme-light--tertiary--800,
386
+ #{map.get($tertiary, 800)}
249
387
  );
250
- $theme-active--light: var(
251
- --#{defaults.$prefix}-theme-active--light,
252
- #{$theme-light--light}
388
+ $theme-light--tertiary--900: var(
389
+ --#{defaults.$prefix}-theme-light--tertiary--900,
390
+ #{map.get($tertiary, 900)}
253
391
  );
254
392
 
255
- // Colour dark.
256
- $theme-light--dark: var(
257
- --#{defaults.$prefix}-theme-light--dark,
258
- #{map.get($primary, 900)}
393
+ // Colour tertiary - dark.
394
+ $theme-dark--tertiary--100: var(
395
+ --#{defaults.$prefix}-theme-dark--tertiary--100,
396
+ #{map.get($tertiary, 900)}
259
397
  );
260
- $theme-dark--dark: var(
261
- --#{defaults.$prefix}-theme-dark--dark,
262
- #{map.get($primary, 100)}
398
+ $theme-dark--tertiary--200: var(
399
+ --#{defaults.$prefix}-theme-dark--tertiary--200,
400
+ #{map.get($tertiary, 800)}
263
401
  );
264
- $theme-active--dark: var(
265
- --#{defaults.$prefix}-theme-active--dark,
266
- #{$theme-light--dark}
402
+ $theme-dark--tertiary--300: var(
403
+ --#{defaults.$prefix}-theme-dark--tertiary--300,
404
+ #{map.get($tertiary, 700)}
267
405
  );
268
-
269
- // Colour shade.
270
- $theme-light--shade--light: var(
271
- --#{defaults.$prefix}-theme-light--shade--light,
272
- #{map.get($primary, 200)}
406
+ $theme-dark--tertiary--400: var(
407
+ --#{defaults.$prefix}-theme-dark--tertiary--400,
408
+ #{map.get($tertiary, 600)}
273
409
  );
274
- $theme-light--shade--dark: var(
275
- --#{defaults.$prefix}-theme-light--shade--dark,
276
- #{map.get($primary, 300)}
410
+ $theme-dark--tertiary--500: var(
411
+ --#{defaults.$prefix}-theme-dark--tertiary--500,
412
+ #{map.get($tertiary, 500)}
277
413
  );
278
- $theme-dark--shade--light: var(
279
- --#{defaults.$prefix}-theme-dark--shade--light,
280
- #{map.get($primary, 800)}
414
+ $theme-dark--tertiary--600: var(
415
+ --#{defaults.$prefix}-theme-dark--tertiary--600,
416
+ #{map.get($tertiary, 400)}
281
417
  );
282
- $theme-dark--shade--dark: var(
283
- --#{defaults.$prefix}-theme-dark--shade--dark,
284
- #{map.get($primary, 700)}
418
+ $theme-dark--tertiary--700: var(
419
+ --#{defaults.$prefix}-theme-dark--tertiary--700,
420
+ #{map.get($tertiary, 300)}
285
421
  );
286
- $theme-active--shade--light: var(
287
- --#{defaults.$prefix}-theme-active--shade--light,
288
- #{$theme-light--shade--light}
422
+ $theme-dark--tertiary--800: var(
423
+ --#{defaults.$prefix}-theme-dark--tertiary--800,
424
+ #{map.get($tertiary, 200)}
289
425
  );
290
- $theme-active--shade--dark: var(
291
- --#{defaults.$prefix}-theme-active--shade--dark,
292
- #{$theme-light--shade--dark}
426
+ $theme-dark--tertiary--900: var(
427
+ --#{defaults.$prefix}-theme-dark--tertiary--900,
428
+ #{map.get($tertiary, 100)}
429
+ );
430
+
431
+ // Colour tertiary - active.
432
+ $theme-active--tertiary--100: var(
433
+ --#{defaults.$prefix}-theme-active--tertiary--100,
434
+ #{$theme-light--tertiary--100}
435
+ );
436
+ $theme-active--tertiary--200: var(
437
+ --#{defaults.$prefix}-theme-active--tertiary--200,
438
+ #{$theme-light--tertiary--200}
439
+ );
440
+ $theme-active--tertiary--300: var(
441
+ --#{defaults.$prefix}-theme-active--tertiary--300,
442
+ #{$theme-light--tertiary--300}
443
+ );
444
+ $theme-active--tertiary--400: var(
445
+ --#{defaults.$prefix}-theme-active--tertiary--400,
446
+ #{$theme-light--tertiary--400}
447
+ );
448
+ $theme-active--tertiary--500: var(
449
+ --#{defaults.$prefix}-theme-active--tertiary--500,
450
+ #{$theme-light--tertiary--500}
451
+ );
452
+ $theme-active--tertiary--600: var(
453
+ --#{defaults.$prefix}-theme-active--tertiary--600,
454
+ #{$theme-light--tertiary--600}
455
+ );
456
+ $theme-active--tertiary--700: var(
457
+ --#{defaults.$prefix}-theme-active--tertiary--700,
458
+ #{$theme-light--tertiary--700}
459
+ );
460
+ $theme-active--tertiary--800: var(
461
+ --#{defaults.$prefix}-theme-active--tertiary--800,
462
+ #{$theme-light--tertiary--800}
463
+ );
464
+ $theme-active--tertiary--900: var(
465
+ --#{defaults.$prefix}-theme-active--tertiary--900,
466
+ #{$theme-light--tertiary--900}
293
467
  );
294
468
 
295
469
  // Font properties.