danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
Merge pull request #450 from dpc-sdp/task/style-dictionary-utils
Replace postcss-for in util generators
author
Jason Smith
committer
GitHub
date
(Mar 1, 2023, 11:39 PM UTC)
commit
658faa17
658faa1781249be5431504aca0f6ad14b94f9051
parent
45dc8bac
45dc8bac0a58dca8068a72adee8a45fa90c246e9
+1932
-247
-1
.postcssrc.json
-1
.postcssrc.json
-1
package.json
-1
package.json
+2
-2
packages/ripple-ui-core/package.json
+2
-2
packages/ripple-ui-core/package.json
···
31
31
"build:styles": "vite build --config global-css.vite.config.ts && rimraf ./dist/delete.es.js",
32
32
"build:svg-sprite": "ts-node ./src/scripts/generate-icon-sprite.ts",
33
33
"build:custom-svg-list": "ts-node ./src/scripts/generate-custom-icon-list.ts",
34
-
"build:tokens": "node ./tokens/processor.js",
34
+
"build:tokens": "ts-node ./tokens/processor.ts",
35
+
"build:utils": "ts-node ./tokens/utils.ts",
35
36
"watch": "pnpm build:types && vite build --watch",
36
37
"clean": "(rimraf dist* && rimraf tsconfig.tsbuildinfo) | true",
37
38
"preview": "vite preview",
···
51
52
"mitt": "^3.0.0",
52
53
"normalize.css": "^8.0.1",
53
54
"postcss-each": "^1.1.0",
54
-
"postcss-for": "^2.1.1",
55
55
"postcss-nested": "^6.0.0",
56
56
"postcss-normalize": "^10.0.1",
57
57
"postcss-preset-env": "^8.0.1",
+30
-4
packages/ripple-ui-core/src/components/spinner/RplSpinner.css
+30
-4
packages/ripple-ui-core/src/components/spinner/RplSpinner.css
···
31
31
animation-duration: calc(8 * var(--local-spinner-delay));
32
32
animation-iteration-count: infinite;
33
33
34
-
@for $i from 1 to 8 {
35
-
&:nth-child($(i)) {
36
-
animation-delay: calc(($i - 1) * var(--local-spinner-delay));
37
-
}
34
+
&:nth-child(1) {
35
+
animation-delay: 0;
36
+
}
37
+
38
+
&:nth-child(2) {
39
+
animation-delay: var(--local-spinner-delay);
40
+
}
41
+
42
+
&:nth-child(3) {
43
+
animation-delay: calc(2 * var(--local-spinner-delay));
44
+
}
45
+
46
+
&:nth-child(4) {
47
+
animation-delay: calc(3 * var(--local-spinner-delay));
48
+
}
49
+
50
+
&:nth-child(5) {
51
+
animation-delay: calc(4 * var(--local-spinner-delay));
52
+
}
53
+
54
+
&:nth-child(6) {
55
+
animation-delay: calc(5 * var(--local-spinner-delay));
56
+
}
57
+
58
+
&:nth-child(7) {
59
+
animation-delay: calc(6 * var(--local-spinner-delay));
60
+
}
61
+
62
+
&:nth-child(8) {
63
+
animation-delay: calc(7 * var(--local-spinner-delay));
38
64
}
39
65
}
40
66
}
-1
packages/ripple-ui-core/src/nuxt.ts
-1
packages/ripple-ui-core/src/nuxt.ts
packages/ripple-ui-core/src/styles/_vars.css
packages/ripple-ui-core/src/styles/generated/_vars.css
packages/ripple-ui-core/src/styles/_vars.css
packages/ripple-ui-core/src/styles/generated/_vars.css
+943
packages/ripple-ui-core/src/styles/generated/_grid.css
+943
packages/ripple-ui-core/src/styles/generated/_grid.css
···
1
+
/**
2
+
* Grid util
3
+
*
4
+
* This file is automatically generated, do not edit directly!
5
+
*/
6
+
.rpl-grid {
7
+
display: grid;
8
+
grid-template-columns: repeat(var(--local-grid-cols, 12), minmax(0, 1fr));
9
+
grid-template-rows: auto;
10
+
gap: var(--rpl-sp-4);
11
+
margin: 0;
12
+
padding: 0;
13
+
14
+
@media (--rpl-bp-m) {
15
+
gap: var(--rpl-sp-6);
16
+
}
17
+
18
+
@media (--rpl-bp-xl) {
19
+
gap: var(--rpl-sp-7);
20
+
}
21
+
22
+
/* No row-gap variant */
23
+
&.rpl-grid--no-row-gap {
24
+
row-gap: 0;
25
+
}
26
+
}
27
+
28
+
/* Columns */
29
+
30
+
/* Mobile */
31
+
.rpl-col-12 {
32
+
--local-grid-cols: 12;
33
+
34
+
grid-column-end: span 12;
35
+
}
36
+
37
+
/* Small */
38
+
.rpl-col-12-s {
39
+
@media (--rpl-bp-s) {
40
+
--local-grid-cols: 12;
41
+
42
+
grid-column-end: span 12;
43
+
}
44
+
}
45
+
46
+
/* Medium */
47
+
.rpl-col-12-m {
48
+
@media (--rpl-bp-m) {
49
+
--local-grid-cols: 12;
50
+
51
+
grid-column-end: span 12;
52
+
}
53
+
}
54
+
55
+
/* Large */
56
+
.rpl-col-12-l {
57
+
@media (--rpl-bp-l) {
58
+
--local-grid-cols: 12;
59
+
60
+
grid-column-end: span 12;
61
+
}
62
+
}
63
+
64
+
/* XL */
65
+
.rpl-col-12-xl {
66
+
@media (--rpl-bp-xl) {
67
+
--local-grid-cols: 12;
68
+
69
+
grid-column-end: span 12;
70
+
}
71
+
}
72
+
73
+
/* Mobile */
74
+
.rpl-col-11 {
75
+
--local-grid-cols: 11;
76
+
77
+
grid-column-end: span 11;
78
+
}
79
+
80
+
/* Small */
81
+
.rpl-col-11-s {
82
+
@media (--rpl-bp-s) {
83
+
--local-grid-cols: 11;
84
+
85
+
grid-column-end: span 11;
86
+
}
87
+
}
88
+
89
+
/* Medium */
90
+
.rpl-col-11-m {
91
+
@media (--rpl-bp-m) {
92
+
--local-grid-cols: 11;
93
+
94
+
grid-column-end: span 11;
95
+
}
96
+
}
97
+
98
+
/* Large */
99
+
.rpl-col-11-l {
100
+
@media (--rpl-bp-l) {
101
+
--local-grid-cols: 11;
102
+
103
+
grid-column-end: span 11;
104
+
}
105
+
}
106
+
107
+
/* XL */
108
+
.rpl-col-11-xl {
109
+
@media (--rpl-bp-xl) {
110
+
--local-grid-cols: 11;
111
+
112
+
grid-column-end: span 11;
113
+
}
114
+
}
115
+
116
+
/* Mobile */
117
+
.rpl-col-10 {
118
+
--local-grid-cols: 10;
119
+
120
+
grid-column-end: span 10;
121
+
}
122
+
123
+
/* Small */
124
+
.rpl-col-10-s {
125
+
@media (--rpl-bp-s) {
126
+
--local-grid-cols: 10;
127
+
128
+
grid-column-end: span 10;
129
+
}
130
+
}
131
+
132
+
/* Medium */
133
+
.rpl-col-10-m {
134
+
@media (--rpl-bp-m) {
135
+
--local-grid-cols: 10;
136
+
137
+
grid-column-end: span 10;
138
+
}
139
+
}
140
+
141
+
/* Large */
142
+
.rpl-col-10-l {
143
+
@media (--rpl-bp-l) {
144
+
--local-grid-cols: 10;
145
+
146
+
grid-column-end: span 10;
147
+
}
148
+
}
149
+
150
+
/* XL */
151
+
.rpl-col-10-xl {
152
+
@media (--rpl-bp-xl) {
153
+
--local-grid-cols: 10;
154
+
155
+
grid-column-end: span 10;
156
+
}
157
+
}
158
+
159
+
/* Mobile */
160
+
.rpl-col-9 {
161
+
--local-grid-cols: 9;
162
+
163
+
grid-column-end: span 9;
164
+
}
165
+
166
+
/* Small */
167
+
.rpl-col-9-s {
168
+
@media (--rpl-bp-s) {
169
+
--local-grid-cols: 9;
170
+
171
+
grid-column-end: span 9;
172
+
}
173
+
}
174
+
175
+
/* Medium */
176
+
.rpl-col-9-m {
177
+
@media (--rpl-bp-m) {
178
+
--local-grid-cols: 9;
179
+
180
+
grid-column-end: span 9;
181
+
}
182
+
}
183
+
184
+
/* Large */
185
+
.rpl-col-9-l {
186
+
@media (--rpl-bp-l) {
187
+
--local-grid-cols: 9;
188
+
189
+
grid-column-end: span 9;
190
+
}
191
+
}
192
+
193
+
/* XL */
194
+
.rpl-col-9-xl {
195
+
@media (--rpl-bp-xl) {
196
+
--local-grid-cols: 9;
197
+
198
+
grid-column-end: span 9;
199
+
}
200
+
}
201
+
202
+
/* Mobile */
203
+
.rpl-col-8 {
204
+
--local-grid-cols: 8;
205
+
206
+
grid-column-end: span 8;
207
+
}
208
+
209
+
/* Small */
210
+
.rpl-col-8-s {
211
+
@media (--rpl-bp-s) {
212
+
--local-grid-cols: 8;
213
+
214
+
grid-column-end: span 8;
215
+
}
216
+
}
217
+
218
+
/* Medium */
219
+
.rpl-col-8-m {
220
+
@media (--rpl-bp-m) {
221
+
--local-grid-cols: 8;
222
+
223
+
grid-column-end: span 8;
224
+
}
225
+
}
226
+
227
+
/* Large */
228
+
.rpl-col-8-l {
229
+
@media (--rpl-bp-l) {
230
+
--local-grid-cols: 8;
231
+
232
+
grid-column-end: span 8;
233
+
}
234
+
}
235
+
236
+
/* XL */
237
+
.rpl-col-8-xl {
238
+
@media (--rpl-bp-xl) {
239
+
--local-grid-cols: 8;
240
+
241
+
grid-column-end: span 8;
242
+
}
243
+
}
244
+
245
+
/* Mobile */
246
+
.rpl-col-7 {
247
+
--local-grid-cols: 7;
248
+
249
+
grid-column-end: span 7;
250
+
}
251
+
252
+
/* Small */
253
+
.rpl-col-7-s {
254
+
@media (--rpl-bp-s) {
255
+
--local-grid-cols: 7;
256
+
257
+
grid-column-end: span 7;
258
+
}
259
+
}
260
+
261
+
/* Medium */
262
+
.rpl-col-7-m {
263
+
@media (--rpl-bp-m) {
264
+
--local-grid-cols: 7;
265
+
266
+
grid-column-end: span 7;
267
+
}
268
+
}
269
+
270
+
/* Large */
271
+
.rpl-col-7-l {
272
+
@media (--rpl-bp-l) {
273
+
--local-grid-cols: 7;
274
+
275
+
grid-column-end: span 7;
276
+
}
277
+
}
278
+
279
+
/* XL */
280
+
.rpl-col-7-xl {
281
+
@media (--rpl-bp-xl) {
282
+
--local-grid-cols: 7;
283
+
284
+
grid-column-end: span 7;
285
+
}
286
+
}
287
+
288
+
/* Mobile */
289
+
.rpl-col-6 {
290
+
--local-grid-cols: 6;
291
+
292
+
grid-column-end: span 6;
293
+
}
294
+
295
+
/* Small */
296
+
.rpl-col-6-s {
297
+
@media (--rpl-bp-s) {
298
+
--local-grid-cols: 6;
299
+
300
+
grid-column-end: span 6;
301
+
}
302
+
}
303
+
304
+
/* Medium */
305
+
.rpl-col-6-m {
306
+
@media (--rpl-bp-m) {
307
+
--local-grid-cols: 6;
308
+
309
+
grid-column-end: span 6;
310
+
}
311
+
}
312
+
313
+
/* Large */
314
+
.rpl-col-6-l {
315
+
@media (--rpl-bp-l) {
316
+
--local-grid-cols: 6;
317
+
318
+
grid-column-end: span 6;
319
+
}
320
+
}
321
+
322
+
/* XL */
323
+
.rpl-col-6-xl {
324
+
@media (--rpl-bp-xl) {
325
+
--local-grid-cols: 6;
326
+
327
+
grid-column-end: span 6;
328
+
}
329
+
}
330
+
331
+
/* Mobile */
332
+
.rpl-col-5 {
333
+
--local-grid-cols: 5;
334
+
335
+
grid-column-end: span 5;
336
+
}
337
+
338
+
/* Small */
339
+
.rpl-col-5-s {
340
+
@media (--rpl-bp-s) {
341
+
--local-grid-cols: 5;
342
+
343
+
grid-column-end: span 5;
344
+
}
345
+
}
346
+
347
+
/* Medium */
348
+
.rpl-col-5-m {
349
+
@media (--rpl-bp-m) {
350
+
--local-grid-cols: 5;
351
+
352
+
grid-column-end: span 5;
353
+
}
354
+
}
355
+
356
+
/* Large */
357
+
.rpl-col-5-l {
358
+
@media (--rpl-bp-l) {
359
+
--local-grid-cols: 5;
360
+
361
+
grid-column-end: span 5;
362
+
}
363
+
}
364
+
365
+
/* XL */
366
+
.rpl-col-5-xl {
367
+
@media (--rpl-bp-xl) {
368
+
--local-grid-cols: 5;
369
+
370
+
grid-column-end: span 5;
371
+
}
372
+
}
373
+
374
+
/* Mobile */
375
+
.rpl-col-4 {
376
+
--local-grid-cols: 4;
377
+
378
+
grid-column-end: span 4;
379
+
}
380
+
381
+
/* Small */
382
+
.rpl-col-4-s {
383
+
@media (--rpl-bp-s) {
384
+
--local-grid-cols: 4;
385
+
386
+
grid-column-end: span 4;
387
+
}
388
+
}
389
+
390
+
/* Medium */
391
+
.rpl-col-4-m {
392
+
@media (--rpl-bp-m) {
393
+
--local-grid-cols: 4;
394
+
395
+
grid-column-end: span 4;
396
+
}
397
+
}
398
+
399
+
/* Large */
400
+
.rpl-col-4-l {
401
+
@media (--rpl-bp-l) {
402
+
--local-grid-cols: 4;
403
+
404
+
grid-column-end: span 4;
405
+
}
406
+
}
407
+
408
+
/* XL */
409
+
.rpl-col-4-xl {
410
+
@media (--rpl-bp-xl) {
411
+
--local-grid-cols: 4;
412
+
413
+
grid-column-end: span 4;
414
+
}
415
+
}
416
+
417
+
/* Mobile */
418
+
.rpl-col-3 {
419
+
--local-grid-cols: 3;
420
+
421
+
grid-column-end: span 3;
422
+
}
423
+
424
+
/* Small */
425
+
.rpl-col-3-s {
426
+
@media (--rpl-bp-s) {
427
+
--local-grid-cols: 3;
428
+
429
+
grid-column-end: span 3;
430
+
}
431
+
}
432
+
433
+
/* Medium */
434
+
.rpl-col-3-m {
435
+
@media (--rpl-bp-m) {
436
+
--local-grid-cols: 3;
437
+
438
+
grid-column-end: span 3;
439
+
}
440
+
}
441
+
442
+
/* Large */
443
+
.rpl-col-3-l {
444
+
@media (--rpl-bp-l) {
445
+
--local-grid-cols: 3;
446
+
447
+
grid-column-end: span 3;
448
+
}
449
+
}
450
+
451
+
/* XL */
452
+
.rpl-col-3-xl {
453
+
@media (--rpl-bp-xl) {
454
+
--local-grid-cols: 3;
455
+
456
+
grid-column-end: span 3;
457
+
}
458
+
}
459
+
460
+
/* Mobile */
461
+
.rpl-col-2 {
462
+
--local-grid-cols: 2;
463
+
464
+
grid-column-end: span 2;
465
+
}
466
+
467
+
/* Small */
468
+
.rpl-col-2-s {
469
+
@media (--rpl-bp-s) {
470
+
--local-grid-cols: 2;
471
+
472
+
grid-column-end: span 2;
473
+
}
474
+
}
475
+
476
+
/* Medium */
477
+
.rpl-col-2-m {
478
+
@media (--rpl-bp-m) {
479
+
--local-grid-cols: 2;
480
+
481
+
grid-column-end: span 2;
482
+
}
483
+
}
484
+
485
+
/* Large */
486
+
.rpl-col-2-l {
487
+
@media (--rpl-bp-l) {
488
+
--local-grid-cols: 2;
489
+
490
+
grid-column-end: span 2;
491
+
}
492
+
}
493
+
494
+
/* XL */
495
+
.rpl-col-2-xl {
496
+
@media (--rpl-bp-xl) {
497
+
--local-grid-cols: 2;
498
+
499
+
grid-column-end: span 2;
500
+
}
501
+
}
502
+
503
+
/* Mobile */
504
+
.rpl-col-1 {
505
+
--local-grid-cols: 1;
506
+
507
+
grid-column-end: span 1;
508
+
}
509
+
510
+
/* Small */
511
+
.rpl-col-1-s {
512
+
@media (--rpl-bp-s) {
513
+
--local-grid-cols: 1;
514
+
515
+
grid-column-end: span 1;
516
+
}
517
+
}
518
+
519
+
/* Medium */
520
+
.rpl-col-1-m {
521
+
@media (--rpl-bp-m) {
522
+
--local-grid-cols: 1;
523
+
524
+
grid-column-end: span 1;
525
+
}
526
+
}
527
+
528
+
/* Large */
529
+
.rpl-col-1-l {
530
+
@media (--rpl-bp-l) {
531
+
--local-grid-cols: 1;
532
+
533
+
grid-column-end: span 1;
534
+
}
535
+
}
536
+
537
+
/* XL */
538
+
.rpl-col-1-xl {
539
+
@media (--rpl-bp-xl) {
540
+
--local-grid-cols: 1;
541
+
542
+
grid-column-end: span 1;
543
+
}
544
+
}
545
+
546
+
/* Column start utility classes */
547
+
548
+
/* Mobile */
549
+
.rpl-col-start-12 {
550
+
grid-column-start: 12;
551
+
}
552
+
553
+
/* Small */
554
+
.rpl-col-start-12-s {
555
+
@media (--rpl-bp-s) {
556
+
grid-column-start: 12;
557
+
}
558
+
}
559
+
560
+
/* Medium */
561
+
.rpl-col-start-12-m {
562
+
@media (--rpl-bp-m) {
563
+
grid-column-start: 12;
564
+
}
565
+
}
566
+
567
+
/* Large */
568
+
.rpl-col-start-12-l {
569
+
@media (--rpl-bp-l) {
570
+
grid-column-start: 12;
571
+
}
572
+
}
573
+
574
+
/* XL */
575
+
.rpl-col-start-12-xl {
576
+
@media (--rpl-bp-xl) {
577
+
grid-column-start: 12;
578
+
}
579
+
}
580
+
581
+
/* Mobile */
582
+
.rpl-col-start-11 {
583
+
grid-column-start: 11;
584
+
}
585
+
586
+
/* Small */
587
+
.rpl-col-start-11-s {
588
+
@media (--rpl-bp-s) {
589
+
grid-column-start: 11;
590
+
}
591
+
}
592
+
593
+
/* Medium */
594
+
.rpl-col-start-11-m {
595
+
@media (--rpl-bp-m) {
596
+
grid-column-start: 11;
597
+
}
598
+
}
599
+
600
+
/* Large */
601
+
.rpl-col-start-11-l {
602
+
@media (--rpl-bp-l) {
603
+
grid-column-start: 11;
604
+
}
605
+
}
606
+
607
+
/* XL */
608
+
.rpl-col-start-11-xl {
609
+
@media (--rpl-bp-xl) {
610
+
grid-column-start: 11;
611
+
}
612
+
}
613
+
614
+
/* Mobile */
615
+
.rpl-col-start-10 {
616
+
grid-column-start: 10;
617
+
}
618
+
619
+
/* Small */
620
+
.rpl-col-start-10-s {
621
+
@media (--rpl-bp-s) {
622
+
grid-column-start: 10;
623
+
}
624
+
}
625
+
626
+
/* Medium */
627
+
.rpl-col-start-10-m {
628
+
@media (--rpl-bp-m) {
629
+
grid-column-start: 10;
630
+
}
631
+
}
632
+
633
+
/* Large */
634
+
.rpl-col-start-10-l {
635
+
@media (--rpl-bp-l) {
636
+
grid-column-start: 10;
637
+
}
638
+
}
639
+
640
+
/* XL */
641
+
.rpl-col-start-10-xl {
642
+
@media (--rpl-bp-xl) {
643
+
grid-column-start: 10;
644
+
}
645
+
}
646
+
647
+
/* Mobile */
648
+
.rpl-col-start-9 {
649
+
grid-column-start: 9;
650
+
}
651
+
652
+
/* Small */
653
+
.rpl-col-start-9-s {
654
+
@media (--rpl-bp-s) {
655
+
grid-column-start: 9;
656
+
}
657
+
}
658
+
659
+
/* Medium */
660
+
.rpl-col-start-9-m {
661
+
@media (--rpl-bp-m) {
662
+
grid-column-start: 9;
663
+
}
664
+
}
665
+
666
+
/* Large */
667
+
.rpl-col-start-9-l {
668
+
@media (--rpl-bp-l) {
669
+
grid-column-start: 9;
670
+
}
671
+
}
672
+
673
+
/* XL */
674
+
.rpl-col-start-9-xl {
675
+
@media (--rpl-bp-xl) {
676
+
grid-column-start: 9;
677
+
}
678
+
}
679
+
680
+
/* Mobile */
681
+
.rpl-col-start-8 {
682
+
grid-column-start: 8;
683
+
}
684
+
685
+
/* Small */
686
+
.rpl-col-start-8-s {
687
+
@media (--rpl-bp-s) {
688
+
grid-column-start: 8;
689
+
}
690
+
}
691
+
692
+
/* Medium */
693
+
.rpl-col-start-8-m {
694
+
@media (--rpl-bp-m) {
695
+
grid-column-start: 8;
696
+
}
697
+
}
698
+
699
+
/* Large */
700
+
.rpl-col-start-8-l {
701
+
@media (--rpl-bp-l) {
702
+
grid-column-start: 8;
703
+
}
704
+
}
705
+
706
+
/* XL */
707
+
.rpl-col-start-8-xl {
708
+
@media (--rpl-bp-xl) {
709
+
grid-column-start: 8;
710
+
}
711
+
}
712
+
713
+
/* Mobile */
714
+
.rpl-col-start-7 {
715
+
grid-column-start: 7;
716
+
}
717
+
718
+
/* Small */
719
+
.rpl-col-start-7-s {
720
+
@media (--rpl-bp-s) {
721
+
grid-column-start: 7;
722
+
}
723
+
}
724
+
725
+
/* Medium */
726
+
.rpl-col-start-7-m {
727
+
@media (--rpl-bp-m) {
728
+
grid-column-start: 7;
729
+
}
730
+
}
731
+
732
+
/* Large */
733
+
.rpl-col-start-7-l {
734
+
@media (--rpl-bp-l) {
735
+
grid-column-start: 7;
736
+
}
737
+
}
738
+
739
+
/* XL */
740
+
.rpl-col-start-7-xl {
741
+
@media (--rpl-bp-xl) {
742
+
grid-column-start: 7;
743
+
}
744
+
}
745
+
746
+
/* Mobile */
747
+
.rpl-col-start-6 {
748
+
grid-column-start: 6;
749
+
}
750
+
751
+
/* Small */
752
+
.rpl-col-start-6-s {
753
+
@media (--rpl-bp-s) {
754
+
grid-column-start: 6;
755
+
}
756
+
}
757
+
758
+
/* Medium */
759
+
.rpl-col-start-6-m {
760
+
@media (--rpl-bp-m) {
761
+
grid-column-start: 6;
762
+
}
763
+
}
764
+
765
+
/* Large */
766
+
.rpl-col-start-6-l {
767
+
@media (--rpl-bp-l) {
768
+
grid-column-start: 6;
769
+
}
770
+
}
771
+
772
+
/* XL */
773
+
.rpl-col-start-6-xl {
774
+
@media (--rpl-bp-xl) {
775
+
grid-column-start: 6;
776
+
}
777
+
}
778
+
779
+
/* Mobile */
780
+
.rpl-col-start-5 {
781
+
grid-column-start: 5;
782
+
}
783
+
784
+
/* Small */
785
+
.rpl-col-start-5-s {
786
+
@media (--rpl-bp-s) {
787
+
grid-column-start: 5;
788
+
}
789
+
}
790
+
791
+
/* Medium */
792
+
.rpl-col-start-5-m {
793
+
@media (--rpl-bp-m) {
794
+
grid-column-start: 5;
795
+
}
796
+
}
797
+
798
+
/* Large */
799
+
.rpl-col-start-5-l {
800
+
@media (--rpl-bp-l) {
801
+
grid-column-start: 5;
802
+
}
803
+
}
804
+
805
+
/* XL */
806
+
.rpl-col-start-5-xl {
807
+
@media (--rpl-bp-xl) {
808
+
grid-column-start: 5;
809
+
}
810
+
}
811
+
812
+
/* Mobile */
813
+
.rpl-col-start-4 {
814
+
grid-column-start: 4;
815
+
}
816
+
817
+
/* Small */
818
+
.rpl-col-start-4-s {
819
+
@media (--rpl-bp-s) {
820
+
grid-column-start: 4;
821
+
}
822
+
}
823
+
824
+
/* Medium */
825
+
.rpl-col-start-4-m {
826
+
@media (--rpl-bp-m) {
827
+
grid-column-start: 4;
828
+
}
829
+
}
830
+
831
+
/* Large */
832
+
.rpl-col-start-4-l {
833
+
@media (--rpl-bp-l) {
834
+
grid-column-start: 4;
835
+
}
836
+
}
837
+
838
+
/* XL */
839
+
.rpl-col-start-4-xl {
840
+
@media (--rpl-bp-xl) {
841
+
grid-column-start: 4;
842
+
}
843
+
}
844
+
845
+
/* Mobile */
846
+
.rpl-col-start-3 {
847
+
grid-column-start: 3;
848
+
}
849
+
850
+
/* Small */
851
+
.rpl-col-start-3-s {
852
+
@media (--rpl-bp-s) {
853
+
grid-column-start: 3;
854
+
}
855
+
}
856
+
857
+
/* Medium */
858
+
.rpl-col-start-3-m {
859
+
@media (--rpl-bp-m) {
860
+
grid-column-start: 3;
861
+
}
862
+
}
863
+
864
+
/* Large */
865
+
.rpl-col-start-3-l {
866
+
@media (--rpl-bp-l) {
867
+
grid-column-start: 3;
868
+
}
869
+
}
870
+
871
+
/* XL */
872
+
.rpl-col-start-3-xl {
873
+
@media (--rpl-bp-xl) {
874
+
grid-column-start: 3;
875
+
}
876
+
}
877
+
878
+
/* Mobile */
879
+
.rpl-col-start-2 {
880
+
grid-column-start: 2;
881
+
}
882
+
883
+
/* Small */
884
+
.rpl-col-start-2-s {
885
+
@media (--rpl-bp-s) {
886
+
grid-column-start: 2;
887
+
}
888
+
}
889
+
890
+
/* Medium */
891
+
.rpl-col-start-2-m {
892
+
@media (--rpl-bp-m) {
893
+
grid-column-start: 2;
894
+
}
895
+
}
896
+
897
+
/* Large */
898
+
.rpl-col-start-2-l {
899
+
@media (--rpl-bp-l) {
900
+
grid-column-start: 2;
901
+
}
902
+
}
903
+
904
+
/* XL */
905
+
.rpl-col-start-2-xl {
906
+
@media (--rpl-bp-xl) {
907
+
grid-column-start: 2;
908
+
}
909
+
}
910
+
911
+
/* Mobile */
912
+
.rpl-col-start-1 {
913
+
grid-column-start: 1;
914
+
}
915
+
916
+
/* Small */
917
+
.rpl-col-start-1-s {
918
+
@media (--rpl-bp-s) {
919
+
grid-column-start: 1;
920
+
}
921
+
}
922
+
923
+
/* Medium */
924
+
.rpl-col-start-1-m {
925
+
@media (--rpl-bp-m) {
926
+
grid-column-start: 1;
927
+
}
928
+
}
929
+
930
+
/* Large */
931
+
.rpl-col-start-1-l {
932
+
@media (--rpl-bp-l) {
933
+
grid-column-start: 1;
934
+
}
935
+
}
936
+
937
+
/* XL */
938
+
.rpl-col-start-1-xl {
939
+
@media (--rpl-bp-xl) {
940
+
grid-column-start: 1;
941
+
}
942
+
}
943
+
+288
packages/ripple-ui-core/src/styles/generated/_margin.css
+288
packages/ripple-ui-core/src/styles/generated/_margin.css
···
1
+
/**
2
+
* Margin util
3
+
*
4
+
* This file is automatically generated, do not edit directly!
5
+
*/
6
+
.rpl-u-margin-1 {
7
+
margin: var(--rpl-sp-1);
8
+
}
9
+
10
+
.rpl-u-margin-t-1 {
11
+
margin-top: var(--rpl-sp-1);
12
+
}
13
+
14
+
.rpl-u-margin-r-1 {
15
+
margin-right: var(--rpl-sp-1);
16
+
}
17
+
18
+
.rpl-u-margin-b-1 {
19
+
margin-bottom: var(--rpl-sp-1);
20
+
}
21
+
22
+
.rpl-u-margin-l-1 {
23
+
margin-left: var(--rpl-sp-1);
24
+
}
25
+
26
+
.rpl-u-margin-2 {
27
+
margin: var(--rpl-sp-2);
28
+
}
29
+
30
+
.rpl-u-margin-t-2 {
31
+
margin-top: var(--rpl-sp-2);
32
+
}
33
+
34
+
.rpl-u-margin-r-2 {
35
+
margin-right: var(--rpl-sp-2);
36
+
}
37
+
38
+
.rpl-u-margin-b-2 {
39
+
margin-bottom: var(--rpl-sp-2);
40
+
}
41
+
42
+
.rpl-u-margin-l-2 {
43
+
margin-left: var(--rpl-sp-2);
44
+
}
45
+
46
+
.rpl-u-margin-3 {
47
+
margin: var(--rpl-sp-3);
48
+
}
49
+
50
+
.rpl-u-margin-t-3 {
51
+
margin-top: var(--rpl-sp-3);
52
+
}
53
+
54
+
.rpl-u-margin-r-3 {
55
+
margin-right: var(--rpl-sp-3);
56
+
}
57
+
58
+
.rpl-u-margin-b-3 {
59
+
margin-bottom: var(--rpl-sp-3);
60
+
}
61
+
62
+
.rpl-u-margin-l-3 {
63
+
margin-left: var(--rpl-sp-3);
64
+
}
65
+
66
+
.rpl-u-margin-4 {
67
+
margin: var(--rpl-sp-4);
68
+
}
69
+
70
+
.rpl-u-margin-t-4 {
71
+
margin-top: var(--rpl-sp-4);
72
+
}
73
+
74
+
.rpl-u-margin-r-4 {
75
+
margin-right: var(--rpl-sp-4);
76
+
}
77
+
78
+
.rpl-u-margin-b-4 {
79
+
margin-bottom: var(--rpl-sp-4);
80
+
}
81
+
82
+
.rpl-u-margin-l-4 {
83
+
margin-left: var(--rpl-sp-4);
84
+
}
85
+
86
+
.rpl-u-margin-5 {
87
+
margin: var(--rpl-sp-5);
88
+
}
89
+
90
+
.rpl-u-margin-t-5 {
91
+
margin-top: var(--rpl-sp-5);
92
+
}
93
+
94
+
.rpl-u-margin-r-5 {
95
+
margin-right: var(--rpl-sp-5);
96
+
}
97
+
98
+
.rpl-u-margin-b-5 {
99
+
margin-bottom: var(--rpl-sp-5);
100
+
}
101
+
102
+
.rpl-u-margin-l-5 {
103
+
margin-left: var(--rpl-sp-5);
104
+
}
105
+
106
+
.rpl-u-margin-6 {
107
+
margin: var(--rpl-sp-6);
108
+
}
109
+
110
+
.rpl-u-margin-t-6 {
111
+
margin-top: var(--rpl-sp-6);
112
+
}
113
+
114
+
.rpl-u-margin-r-6 {
115
+
margin-right: var(--rpl-sp-6);
116
+
}
117
+
118
+
.rpl-u-margin-b-6 {
119
+
margin-bottom: var(--rpl-sp-6);
120
+
}
121
+
122
+
.rpl-u-margin-l-6 {
123
+
margin-left: var(--rpl-sp-6);
124
+
}
125
+
126
+
.rpl-u-margin-7 {
127
+
margin: var(--rpl-sp-7);
128
+
}
129
+
130
+
.rpl-u-margin-t-7 {
131
+
margin-top: var(--rpl-sp-7);
132
+
}
133
+
134
+
.rpl-u-margin-r-7 {
135
+
margin-right: var(--rpl-sp-7);
136
+
}
137
+
138
+
.rpl-u-margin-b-7 {
139
+
margin-bottom: var(--rpl-sp-7);
140
+
}
141
+
142
+
.rpl-u-margin-l-7 {
143
+
margin-left: var(--rpl-sp-7);
144
+
}
145
+
146
+
.rpl-u-margin-8 {
147
+
margin: var(--rpl-sp-8);
148
+
}
149
+
150
+
.rpl-u-margin-t-8 {
151
+
margin-top: var(--rpl-sp-8);
152
+
}
153
+
154
+
.rpl-u-margin-r-8 {
155
+
margin-right: var(--rpl-sp-8);
156
+
}
157
+
158
+
.rpl-u-margin-b-8 {
159
+
margin-bottom: var(--rpl-sp-8);
160
+
}
161
+
162
+
.rpl-u-margin-l-8 {
163
+
margin-left: var(--rpl-sp-8);
164
+
}
165
+
166
+
.rpl-u-margin-9 {
167
+
margin: var(--rpl-sp-9);
168
+
}
169
+
170
+
.rpl-u-margin-t-9 {
171
+
margin-top: var(--rpl-sp-9);
172
+
}
173
+
174
+
.rpl-u-margin-r-9 {
175
+
margin-right: var(--rpl-sp-9);
176
+
}
177
+
178
+
.rpl-u-margin-b-9 {
179
+
margin-bottom: var(--rpl-sp-9);
180
+
}
181
+
182
+
.rpl-u-margin-l-9 {
183
+
margin-left: var(--rpl-sp-9);
184
+
}
185
+
186
+
.rpl-u-margin-10 {
187
+
margin: var(--rpl-sp-10);
188
+
}
189
+
190
+
.rpl-u-margin-t-10 {
191
+
margin-top: var(--rpl-sp-10);
192
+
}
193
+
194
+
.rpl-u-margin-r-10 {
195
+
margin-right: var(--rpl-sp-10);
196
+
}
197
+
198
+
.rpl-u-margin-b-10 {
199
+
margin-bottom: var(--rpl-sp-10);
200
+
}
201
+
202
+
.rpl-u-margin-l-10 {
203
+
margin-left: var(--rpl-sp-10);
204
+
}
205
+
206
+
.rpl-u-margin-11 {
207
+
margin: var(--rpl-sp-11);
208
+
}
209
+
210
+
.rpl-u-margin-t-11 {
211
+
margin-top: var(--rpl-sp-11);
212
+
}
213
+
214
+
.rpl-u-margin-r-11 {
215
+
margin-right: var(--rpl-sp-11);
216
+
}
217
+
218
+
.rpl-u-margin-b-11 {
219
+
margin-bottom: var(--rpl-sp-11);
220
+
}
221
+
222
+
.rpl-u-margin-l-11 {
223
+
margin-left: var(--rpl-sp-11);
224
+
}
225
+
226
+
.rpl-u-margin-12 {
227
+
margin: var(--rpl-sp-12);
228
+
}
229
+
230
+
.rpl-u-margin-t-12 {
231
+
margin-top: var(--rpl-sp-12);
232
+
}
233
+
234
+
.rpl-u-margin-r-12 {
235
+
margin-right: var(--rpl-sp-12);
236
+
}
237
+
238
+
.rpl-u-margin-b-12 {
239
+
margin-bottom: var(--rpl-sp-12);
240
+
}
241
+
242
+
.rpl-u-margin-l-12 {
243
+
margin-left: var(--rpl-sp-12);
244
+
}
245
+
246
+
.rpl-u-margin-13 {
247
+
margin: var(--rpl-sp-13);
248
+
}
249
+
250
+
.rpl-u-margin-t-13 {
251
+
margin-top: var(--rpl-sp-13);
252
+
}
253
+
254
+
.rpl-u-margin-r-13 {
255
+
margin-right: var(--rpl-sp-13);
256
+
}
257
+
258
+
.rpl-u-margin-b-13 {
259
+
margin-bottom: var(--rpl-sp-13);
260
+
}
261
+
262
+
.rpl-u-margin-l-13 {
263
+
margin-left: var(--rpl-sp-13);
264
+
}
265
+
266
+
.rpl-u-margin-14 {
267
+
margin: var(--rpl-sp-14);
268
+
}
269
+
270
+
.rpl-u-margin-t-14 {
271
+
margin-top: var(--rpl-sp-14);
272
+
}
273
+
274
+
.rpl-u-margin-r-14 {
275
+
margin-right: var(--rpl-sp-14);
276
+
}
277
+
278
+
.rpl-u-margin-b-14 {
279
+
margin-bottom: var(--rpl-sp-14);
280
+
}
281
+
282
+
.rpl-u-margin-l-14 {
283
+
margin-left: var(--rpl-sp-14);
284
+
}
285
+
286
+
.rpl-u-margin-none {
287
+
margin: 0;
288
+
}
+285
packages/ripple-ui-core/src/styles/generated/_padding.css
+285
packages/ripple-ui-core/src/styles/generated/_padding.css
···
1
+
/**
2
+
* Padding util
3
+
*
4
+
* This file is automatically generated, do not edit directly!
5
+
*/
6
+
.rpl-u-padding-1 {
7
+
padding: var(--rpl-sp-1);
8
+
}
9
+
10
+
.rpl-u-padding-t-1 {
11
+
padding-top: var(--rpl-sp-1);
12
+
}
13
+
14
+
.rpl-u-padding-r-1 {
15
+
padding-right: var(--rpl-sp-1);
16
+
}
17
+
18
+
.rpl-u-padding-b-1 {
19
+
padding-bottom: var(--rpl-sp-1);
20
+
}
21
+
22
+
.rpl-u-padding-l-1 {
23
+
padding-left: var(--rpl-sp-1);
24
+
}
25
+
26
+
.rpl-u-padding-2 {
27
+
padding: var(--rpl-sp-2);
28
+
}
29
+
30
+
.rpl-u-padding-t-2 {
31
+
padding-top: var(--rpl-sp-2);
32
+
}
33
+
34
+
.rpl-u-padding-r-2 {
35
+
padding-right: var(--rpl-sp-2);
36
+
}
37
+
38
+
.rpl-u-padding-b-2 {
39
+
padding-bottom: var(--rpl-sp-2);
40
+
}
41
+
42
+
.rpl-u-padding-l-2 {
43
+
padding-left: var(--rpl-sp-2);
44
+
}
45
+
46
+
.rpl-u-padding-3 {
47
+
padding: var(--rpl-sp-3);
48
+
}
49
+
50
+
.rpl-u-padding-t-3 {
51
+
padding-top: var(--rpl-sp-3);
52
+
}
53
+
54
+
.rpl-u-padding-r-3 {
55
+
padding-right: var(--rpl-sp-3);
56
+
}
57
+
58
+
.rpl-u-padding-b-3 {
59
+
padding-bottom: var(--rpl-sp-3);
60
+
}
61
+
62
+
.rpl-u-padding-l-3 {
63
+
padding-left: var(--rpl-sp-3);
64
+
}
65
+
66
+
.rpl-u-padding-4 {
67
+
padding: var(--rpl-sp-4);
68
+
}
69
+
70
+
.rpl-u-padding-t-4 {
71
+
padding-top: var(--rpl-sp-4);
72
+
}
73
+
74
+
.rpl-u-padding-r-4 {
75
+
padding-right: var(--rpl-sp-4);
76
+
}
77
+
78
+
.rpl-u-padding-b-4 {
79
+
padding-bottom: var(--rpl-sp-4);
80
+
}
81
+
82
+
.rpl-u-padding-l-4 {
83
+
padding-left: var(--rpl-sp-4);
84
+
}
85
+
86
+
.rpl-u-padding-5 {
87
+
padding: var(--rpl-sp-5);
88
+
}
89
+
90
+
.rpl-u-padding-t-5 {
91
+
padding-top: var(--rpl-sp-5);
92
+
}
93
+
94
+
.rpl-u-padding-r-5 {
95
+
padding-right: var(--rpl-sp-5);
96
+
}
97
+
98
+
.rpl-u-padding-b-5 {
99
+
padding-bottom: var(--rpl-sp-5);
100
+
}
101
+
102
+
.rpl-u-padding-l-5 {
103
+
padding-left: var(--rpl-sp-5);
104
+
}
105
+
106
+
.rpl-u-padding-6 {
107
+
padding: var(--rpl-sp-6);
108
+
}
109
+
110
+
.rpl-u-padding-t-6 {
111
+
padding-top: var(--rpl-sp-6);
112
+
}
113
+
114
+
.rpl-u-padding-r-6 {
115
+
padding-right: var(--rpl-sp-6);
116
+
}
117
+
118
+
.rpl-u-padding-b-6 {
119
+
padding-bottom: var(--rpl-sp-6);
120
+
}
121
+
122
+
.rpl-u-padding-l-6 {
123
+
padding-left: var(--rpl-sp-6);
124
+
}
125
+
126
+
.rpl-u-padding-7 {
127
+
padding: var(--rpl-sp-7);
128
+
}
129
+
130
+
.rpl-u-padding-t-7 {
131
+
padding-top: var(--rpl-sp-7);
132
+
}
133
+
134
+
.rpl-u-padding-r-7 {
135
+
padding-right: var(--rpl-sp-7);
136
+
}
137
+
138
+
.rpl-u-padding-b-7 {
139
+
padding-bottom: var(--rpl-sp-7);
140
+
}
141
+
142
+
.rpl-u-padding-l-7 {
143
+
padding-left: var(--rpl-sp-7);
144
+
}
145
+
146
+
.rpl-u-padding-8 {
147
+
padding: var(--rpl-sp-8);
148
+
}
149
+
150
+
.rpl-u-padding-t-8 {
151
+
padding-top: var(--rpl-sp-8);
152
+
}
153
+
154
+
.rpl-u-padding-r-8 {
155
+
padding-right: var(--rpl-sp-8);
156
+
}
157
+
158
+
.rpl-u-padding-b-8 {
159
+
padding-bottom: var(--rpl-sp-8);
160
+
}
161
+
162
+
.rpl-u-padding-l-8 {
163
+
padding-left: var(--rpl-sp-8);
164
+
}
165
+
166
+
.rpl-u-padding-9 {
167
+
padding: var(--rpl-sp-9);
168
+
}
169
+
170
+
.rpl-u-padding-t-9 {
171
+
padding-top: var(--rpl-sp-9);
172
+
}
173
+
174
+
.rpl-u-padding-r-9 {
175
+
padding-right: var(--rpl-sp-9);
176
+
}
177
+
178
+
.rpl-u-padding-b-9 {
179
+
padding-bottom: var(--rpl-sp-9);
180
+
}
181
+
182
+
.rpl-u-padding-l-9 {
183
+
padding-left: var(--rpl-sp-9);
184
+
}
185
+
186
+
.rpl-u-padding-10 {
187
+
padding: var(--rpl-sp-10);
188
+
}
189
+
190
+
.rpl-u-padding-t-10 {
191
+
padding-top: var(--rpl-sp-10);
192
+
}
193
+
194
+
.rpl-u-padding-r-10 {
195
+
padding-right: var(--rpl-sp-10);
196
+
}
197
+
198
+
.rpl-u-padding-b-10 {
199
+
padding-bottom: var(--rpl-sp-10);
200
+
}
201
+
202
+
.rpl-u-padding-l-10 {
203
+
padding-left: var(--rpl-sp-10);
204
+
}
205
+
206
+
.rpl-u-padding-11 {
207
+
padding: var(--rpl-sp-11);
208
+
}
209
+
210
+
.rpl-u-padding-t-11 {
211
+
padding-top: var(--rpl-sp-11);
212
+
}
213
+
214
+
.rpl-u-padding-r-11 {
215
+
padding-right: var(--rpl-sp-11);
216
+
}
217
+
218
+
.rpl-u-padding-b-11 {
219
+
padding-bottom: var(--rpl-sp-11);
220
+
}
221
+
222
+
.rpl-u-padding-l-11 {
223
+
padding-left: var(--rpl-sp-11);
224
+
}
225
+
226
+
.rpl-u-padding-12 {
227
+
padding: var(--rpl-sp-12);
228
+
}
229
+
230
+
.rpl-u-padding-t-12 {
231
+
padding-top: var(--rpl-sp-12);
232
+
}
233
+
234
+
.rpl-u-padding-r-12 {
235
+
padding-right: var(--rpl-sp-12);
236
+
}
237
+
238
+
.rpl-u-padding-b-12 {
239
+
padding-bottom: var(--rpl-sp-12);
240
+
}
241
+
242
+
.rpl-u-padding-l-12 {
243
+
padding-left: var(--rpl-sp-12);
244
+
}
245
+
246
+
.rpl-u-padding-13 {
247
+
padding: var(--rpl-sp-13);
248
+
}
249
+
250
+
.rpl-u-padding-t-13 {
251
+
padding-top: var(--rpl-sp-13);
252
+
}
253
+
254
+
.rpl-u-padding-r-13 {
255
+
padding-right: var(--rpl-sp-13);
256
+
}
257
+
258
+
.rpl-u-padding-b-13 {
259
+
padding-bottom: var(--rpl-sp-13);
260
+
}
261
+
262
+
.rpl-u-padding-l-13 {
263
+
padding-left: var(--rpl-sp-13);
264
+
}
265
+
266
+
.rpl-u-padding-14 {
267
+
padding: var(--rpl-sp-14);
268
+
}
269
+
270
+
.rpl-u-padding-t-14 {
271
+
padding-top: var(--rpl-sp-14);
272
+
}
273
+
274
+
.rpl-u-padding-r-14 {
275
+
padding-right: var(--rpl-sp-14);
276
+
}
277
+
278
+
.rpl-u-padding-b-14 {
279
+
padding-bottom: var(--rpl-sp-14);
280
+
}
281
+
282
+
.rpl-u-padding-l-14 {
283
+
padding-left: var(--rpl-sp-14);
284
+
}
285
+
+5
-5
packages/ripple-ui-core/src/styles/global.css
+5
-5
packages/ripple-ui-core/src/styles/global.css
···
2
2
@import 'normalize.css';
3
3
4
4
/* Variables */
5
-
@import '_vars.css';
5
+
@import 'generated/_vars.css';
6
6
7
7
/* Breakpoints */
8
8
@import '_breakpoints.css';
···
11
11
@import 'utilities/_accessibility.css';
12
12
@import 'utilities/_container.css';
13
13
@import 'utilities/_focus.css';
14
-
@import 'utilities/_grid.css';
14
+
@import 'generated/_grid.css';
15
15
@import 'utilities/_lists.css';
16
-
@import 'utilities/_margin.css';
17
-
@import 'utilities/_padding.css';
18
-
@import 'utilities/_size.css';
16
+
@import 'generated/_margin.css';
17
+
@import 'generated/_padding.css';
18
+
@import 'generated/_size.css';
19
19
@import 'utilities/_typography.css';
20
20
@import 'utilities/_aspect.css';
21
21
@import 'utilities/_print.css';
-103
packages/ripple-ui-core/src/styles/utilities/_grid.css
-103
packages/ripple-ui-core/src/styles/utilities/_grid.css
···
1
-
.rpl-grid {
2
-
display: grid;
3
-
grid-template-columns: repeat(var(--local-grid-cols, 12), minmax(0, 1fr));
4
-
grid-template-rows: auto;
5
-
gap: var(--rpl-sp-4);
6
-
margin: 0;
7
-
padding: 0;
8
-
9
-
@media (--rpl-bp-m) {
10
-
gap: var(--rpl-sp-6);
11
-
}
12
-
13
-
@media (--rpl-bp-xl) {
14
-
gap: var(--rpl-sp-7);
15
-
}
16
-
17
-
/* No row-gap variant */
18
-
&.rpl-grid--no-row-gap {
19
-
row-gap: 0;
20
-
}
21
-
}
22
-
23
-
/* Columns */
24
-
@for $i from 12 to 1 {
25
-
/* Mobile */
26
-
.rpl-col-$(i) {
27
-
--local-grid-cols: $i;
28
-
29
-
grid-column-end: span $i;
30
-
}
31
-
32
-
/* Small */
33
-
.rpl-col-$(i)-s {
34
-
@media (--rpl-bp-s) {
35
-
--local-grid-cols: $i;
36
-
37
-
grid-column-end: span $i;
38
-
}
39
-
}
40
-
41
-
/* Medium */
42
-
.rpl-col-$(i)-m {
43
-
@media (--rpl-bp-m) {
44
-
--local-grid-cols: $i;
45
-
46
-
grid-column-end: span $i;
47
-
}
48
-
}
49
-
50
-
/* Large */
51
-
.rpl-col-$(i)-l {
52
-
@media (--rpl-bp-l) {
53
-
--local-grid-cols: $i;
54
-
55
-
grid-column-end: span $i;
56
-
}
57
-
}
58
-
59
-
/* XL */
60
-
.rpl-col-$(i)-xl {
61
-
@media (--rpl-bp-xl) {
62
-
--local-grid-cols: $i;
63
-
64
-
grid-column-end: span $i;
65
-
}
66
-
}
67
-
}
68
-
69
-
/* Column start utility classes */
70
-
@for $i from 12 to 1 {
71
-
/* Mobile */
72
-
.rpl-col-start-$(i) {
73
-
grid-column-start: $i;
74
-
}
75
-
76
-
/* Small */
77
-
.rpl-col-start-$(i)-s {
78
-
@media (--rpl-bp-s) {
79
-
grid-column-start: $i;
80
-
}
81
-
}
82
-
83
-
/* Medium */
84
-
.rpl-col-start-$(i)-m {
85
-
@media (--rpl-bp-m) {
86
-
grid-column-start: $i;
87
-
}
88
-
}
89
-
90
-
/* Large */
91
-
.rpl-col-start-$(i)-l {
92
-
@media (--rpl-bp-l) {
93
-
grid-column-start: $i;
94
-
}
95
-
}
96
-
97
-
/* XL */
98
-
.rpl-col-start-$(i)-xl {
99
-
@media (--rpl-bp-xl) {
100
-
grid-column-start: $i;
101
-
}
102
-
}
103
-
}
-26
packages/ripple-ui-core/src/styles/utilities/_margin.css
-26
packages/ripple-ui-core/src/styles/utilities/_margin.css
···
1
-
/* Margin */
2
-
@for $i from 1 to 14 {
3
-
.rpl-u-margin-$i {
4
-
margin: var(--rpl-sp-$(i));
5
-
}
6
-
7
-
.rpl-u-margin-t-$i {
8
-
margin-top: var(--rpl-sp-$(i));
9
-
}
10
-
11
-
.rpl-u-margin-r-$i {
12
-
margin-right: var(--rpl-sp-$(i));
13
-
}
14
-
15
-
.rpl-u-margin-b-$i {
16
-
margin-bottom: var(--rpl-sp-$(i));
17
-
}
18
-
19
-
.rpl-u-margin-l-$i {
20
-
margin-left: var(--rpl-sp-$(i));
21
-
}
22
-
}
23
-
24
-
.rpl-u-margin-none {
25
-
margin: 0;
26
-
}
-22
packages/ripple-ui-core/src/styles/utilities/_padding.css
-22
packages/ripple-ui-core/src/styles/utilities/_padding.css
···
1
-
/* Padding */
2
-
@for $i from 1 to 14 {
3
-
.rpl-u-padding-$(i) {
4
-
padding: var(--rpl-sp-$(i));
5
-
}
6
-
7
-
.rpl-u-padding-t-$i {
8
-
padding-top: var(--rpl-sp-$(i));
9
-
}
10
-
11
-
.rpl-u-padding-r-$i {
12
-
padding-right: var(--rpl-sp-$(i));
13
-
}
14
-
15
-
.rpl-u-padding-b-$i {
16
-
padding-bottom: var(--rpl-sp-$(i));
17
-
}
18
-
19
-
.rpl-u-padding-l-$i {
20
-
padding-left: var(--rpl-sp-$(i));
21
-
}
22
-
}
+6
-1
packages/ripple-ui-core/src/styles/utilities/_size.css
packages/ripple-ui-core/src/styles/generated/_size.css
+6
-1
packages/ripple-ui-core/src/styles/utilities/_size.css
packages/ripple-ui-core/src/styles/generated/_size.css
+1
-1
packages/ripple-ui-core/tokens/config.json
+1
-1
packages/ripple-ui-core/tokens/config.json
-64
packages/ripple-ui-core/tokens/processor.js
-64
packages/ripple-ui-core/tokens/processor.js
···
1
-
const StyleDictionary = require('style-dictionary')
2
-
const baseConfig = require('./config.json')
3
-
const yaml = require('yaml')
4
-
5
-
StyleDictionary.registerTransform({
6
-
name: 'size/pixels',
7
-
type: 'value',
8
-
matcher: (token) => {
9
-
return ['sp', 'bp'].includes(token.attributes.category)
10
-
},
11
-
transformer: (token) => {
12
-
return `${token.value}px`
13
-
}
14
-
})
15
-
16
-
StyleDictionary.registerTransform({
17
-
name: 'gradient',
18
-
type: 'value',
19
-
matcher: (token) => {
20
-
return ['gradient'].includes(token.attributes.category)
21
-
},
22
-
transformer: (token) => {
23
-
return `${token.value}px`
24
-
}
25
-
})
26
-
27
-
StyleDictionary.registerFilter({
28
-
name: 'validToken',
29
-
matcher: function (token) {
30
-
return ['dimension', 'string', 'number', 'color'].includes(token.type)
31
-
}
32
-
})
33
-
34
-
StyleDictionary.registerFilter({
35
-
name: 'isColor',
36
-
matcher: function (token) {
37
-
console.log(token.attributes)
38
-
return token.attributes.category === 'clr'
39
-
}
40
-
})
41
-
42
-
StyleDictionary.registerFileHeader({
43
-
name: 'rplHeader',
44
-
fileHeader: (_defaultMessage) => {
45
-
return [
46
-
`The values in this file are controlled by the SDP design team.`,
47
-
`Please email design@dpc.vic.gov.au if you wish to modify them.`,
48
-
``,
49
-
`This file is automatically generated, do not edit directly!`
50
-
]
51
-
}
52
-
})
53
-
54
-
const StyleDictionaryExtended = StyleDictionary.extend({
55
-
...baseConfig,
56
-
parsers: [
57
-
{
58
-
pattern: /\.yaml$/,
59
-
parse: ({ contents, filePath }) => yaml.parse(contents)
60
-
}
61
-
]
62
-
})
63
-
64
-
StyleDictionaryExtended.buildAllPlatforms()
+55
packages/ripple-ui-core/tokens/processor.ts
+55
packages/ripple-ui-core/tokens/processor.ts
···
1
+
import StyleDictionary from 'style-dictionary'
2
+
import baseConfig from './config.json'
3
+
import yaml from 'yaml'
4
+
5
+
StyleDictionary.registerTransform({
6
+
name: 'size/pixels',
7
+
type: 'value',
8
+
matcher: (token) => ['sp', 'bp'].includes(token.attributes?.category || ''),
9
+
transformer: (token) => `${token.value}px`
10
+
})
11
+
12
+
StyleDictionary.registerTransform({
13
+
name: 'gradient',
14
+
type: 'value',
15
+
matcher: (token) => ['gradient'].includes(token.attributes?.category || ''),
16
+
transformer: (token) => `${token.value}px`
17
+
})
18
+
19
+
StyleDictionary.registerFilter({
20
+
name: 'validToken',
21
+
matcher: (token) =>
22
+
['dimension', 'string', 'number', 'color'].includes(token.type)
23
+
})
24
+
25
+
StyleDictionary.registerFilter({
26
+
name: 'isColor',
27
+
matcher: (token) => {
28
+
console.log(token.attributes)
29
+
return token.attributes?.category === 'clr'
30
+
}
31
+
})
32
+
33
+
StyleDictionary.registerFileHeader({
34
+
name: 'rplHeader',
35
+
fileHeader: () => {
36
+
return [
37
+
`The values in this file are controlled by the SDP design team.`,
38
+
`Please email design@dpc.vic.gov.au if you wish to modify them.`,
39
+
``,
40
+
`This file is automatically generated, do not edit directly!`
41
+
]
42
+
}
43
+
})
44
+
45
+
const StyleDictionaryExtended = StyleDictionary.extend({
46
+
...baseConfig,
47
+
parsers: [
48
+
{
49
+
pattern: /\.yaml$/,
50
+
parse: ({ contents }) => yaml.parse(contents)
51
+
}
52
+
]
53
+
})
54
+
55
+
StyleDictionaryExtended.buildAllPlatforms()
+9
packages/ripple-ui-core/tokens/utils.ts
+9
packages/ripple-ui-core/tokens/utils.ts
+143
packages/ripple-ui-core/tokens/utils/grid.ts
+143
packages/ripple-ui-core/tokens/utils/grid.ts
···
1
+
import StyleDictionary from 'style-dictionary'
2
+
3
+
StyleDictionary.registerFormat({
4
+
name: 'utilities/gridClasses',
5
+
formatter: function ({ dictionary }) {
6
+
let output = `/**
7
+
* Grid util
8
+
*
9
+
* This file is automatically generated, do not edit directly!
10
+
*/
11
+
.rpl-grid {
12
+
display: grid;
13
+
grid-template-columns: repeat(var(--local-grid-cols, ${dictionary.properties.steps.value}), minmax(0, 1fr));
14
+
grid-template-rows: auto;
15
+
gap: var(--rpl-sp-4);
16
+
margin: 0;
17
+
padding: 0;
18
+
19
+
@media (--rpl-bp-m) {
20
+
gap: var(--rpl-sp-6);
21
+
}
22
+
23
+
@media (--rpl-bp-xl) {
24
+
gap: var(--rpl-sp-7);
25
+
}
26
+
27
+
/* No row-gap variant */
28
+
&.rpl-grid--no-row-gap {
29
+
row-gap: 0;
30
+
}
31
+
}
32
+
33
+
/* Columns */
34
+
35
+
`
36
+
for (let i = dictionary.properties.steps.value; i > 0; i--) {
37
+
output += `/* Mobile */
38
+
.rpl-col-${i} {
39
+
--local-grid-cols: ${i};
40
+
41
+
grid-column-end: span ${i};
42
+
}
43
+
44
+
/* Small */
45
+
.rpl-col-${i}-s {
46
+
@media (--rpl-bp-s) {
47
+
--local-grid-cols: ${i};
48
+
49
+
grid-column-end: span ${i};
50
+
}
51
+
}
52
+
53
+
/* Medium */
54
+
.rpl-col-${i}-m {
55
+
@media (--rpl-bp-m) {
56
+
--local-grid-cols: ${i};
57
+
58
+
grid-column-end: span ${i};
59
+
}
60
+
}
61
+
62
+
/* Large */
63
+
.rpl-col-${i}-l {
64
+
@media (--rpl-bp-l) {
65
+
--local-grid-cols: ${i};
66
+
67
+
grid-column-end: span ${i};
68
+
}
69
+
}
70
+
71
+
/* XL */
72
+
.rpl-col-${i}-xl {
73
+
@media (--rpl-bp-xl) {
74
+
--local-grid-cols: ${i};
75
+
76
+
grid-column-end: span ${i};
77
+
}
78
+
}
79
+
80
+
`
81
+
}
82
+
output += `/* Column start utility classes */
83
+
84
+
`
85
+
for (let i = dictionary.properties.steps.value; i > 0; i--) {
86
+
output += `/* Mobile */
87
+
.rpl-col-start-${i} {
88
+
grid-column-start: ${i};
89
+
}
90
+
91
+
/* Small */
92
+
.rpl-col-start-${i}-s {
93
+
@media (--rpl-bp-s) {
94
+
grid-column-start: ${i};
95
+
}
96
+
}
97
+
98
+
/* Medium */
99
+
.rpl-col-start-${i}-m {
100
+
@media (--rpl-bp-m) {
101
+
grid-column-start: ${i};
102
+
}
103
+
}
104
+
105
+
/* Large */
106
+
.rpl-col-start-${i}-l {
107
+
@media (--rpl-bp-l) {
108
+
grid-column-start: ${i};
109
+
}
110
+
}
111
+
112
+
/* XL */
113
+
.rpl-col-start-${i}-xl {
114
+
@media (--rpl-bp-xl) {
115
+
grid-column-start: ${i};
116
+
}
117
+
}
118
+
119
+
`
120
+
}
121
+
return output
122
+
}
123
+
})
124
+
125
+
StyleDictionary.extend({
126
+
properties: {
127
+
steps: {
128
+
value: 12
129
+
}
130
+
},
131
+
platforms: {
132
+
css: {
133
+
buildPath: 'src/styles/generated/',
134
+
transformGroup: 'css',
135
+
files: [
136
+
{
137
+
destination: '_grid.css',
138
+
format: 'utilities/gridClasses'
139
+
}
140
+
]
141
+
}
142
+
}
143
+
}).buildAllPlatforms()
+61
packages/ripple-ui-core/tokens/utils/margin.ts
+61
packages/ripple-ui-core/tokens/utils/margin.ts
···
1
+
import StyleDictionary from 'style-dictionary'
2
+
3
+
StyleDictionary.registerFormat({
4
+
name: 'utilities/marginClasses',
5
+
formatter: function ({ dictionary }) {
6
+
let output = `/**
7
+
* Margin util
8
+
*
9
+
* This file is automatically generated, do not edit directly!
10
+
*/
11
+
`
12
+
for (let i = 0; i < dictionary.properties.steps.value; i++) {
13
+
output += `.rpl-u-margin-${i + 1} {
14
+
margin: var(--rpl-sp-${i + 1});
15
+
}
16
+
17
+
.rpl-u-margin-t-${i + 1} {
18
+
margin-top: var(--rpl-sp-${i + 1});
19
+
}
20
+
21
+
.rpl-u-margin-r-${i + 1} {
22
+
margin-right: var(--rpl-sp-${i + 1});
23
+
}
24
+
25
+
.rpl-u-margin-b-${i + 1} {
26
+
margin-bottom: var(--rpl-sp-${i + 1});
27
+
}
28
+
29
+
.rpl-u-margin-l-${i + 1} {
30
+
margin-left: var(--rpl-sp-${i + 1});
31
+
}
32
+
33
+
`
34
+
}
35
+
output += `.rpl-u-margin-none {
36
+
margin: 0;
37
+
}
38
+
`
39
+
return output
40
+
}
41
+
})
42
+
43
+
StyleDictionary.extend({
44
+
properties: {
45
+
steps: {
46
+
value: 14
47
+
}
48
+
},
49
+
platforms: {
50
+
css: {
51
+
buildPath: 'src/styles/generated/',
52
+
transformGroup: 'css',
53
+
files: [
54
+
{
55
+
destination: '_margin.css',
56
+
format: 'utilities/marginClasses'
57
+
}
58
+
]
59
+
}
60
+
}
61
+
}).buildAllPlatforms()
+58
packages/ripple-ui-core/tokens/utils/padding.ts
+58
packages/ripple-ui-core/tokens/utils/padding.ts
···
1
+
import StyleDictionary from 'style-dictionary'
2
+
3
+
// Padding
4
+
StyleDictionary.registerFormat({
5
+
name: 'utilities/paddingClasses',
6
+
formatter: function ({ dictionary }) {
7
+
let output = `/**
8
+
* Padding util
9
+
*
10
+
* This file is automatically generated, do not edit directly!
11
+
*/
12
+
`
13
+
for (let i = 0; i < dictionary.properties.steps.value; i++) {
14
+
output += `.rpl-u-padding-${i + 1} {
15
+
padding: var(--rpl-sp-${i + 1});
16
+
}
17
+
18
+
.rpl-u-padding-t-${i + 1} {
19
+
padding-top: var(--rpl-sp-${i + 1});
20
+
}
21
+
22
+
.rpl-u-padding-r-${i + 1} {
23
+
padding-right: var(--rpl-sp-${i + 1});
24
+
}
25
+
26
+
.rpl-u-padding-b-${i + 1} {
27
+
padding-bottom: var(--rpl-sp-${i + 1});
28
+
}
29
+
30
+
.rpl-u-padding-l-${i + 1} {
31
+
padding-left: var(--rpl-sp-${i + 1});
32
+
}
33
+
34
+
`
35
+
}
36
+
return output
37
+
}
38
+
})
39
+
40
+
StyleDictionary.extend({
41
+
properties: {
42
+
steps: {
43
+
value: 14
44
+
}
45
+
},
46
+
platforms: {
47
+
css: {
48
+
buildPath: 'src/styles/generated/',
49
+
transformGroup: 'css',
50
+
files: [
51
+
{
52
+
destination: '_padding.css',
53
+
format: 'utilities/paddingClasses'
54
+
}
55
+
]
56
+
}
57
+
}
58
+
}).buildAllPlatforms()
+45
packages/ripple-ui-core/tokens/utils/size.ts
+45
packages/ripple-ui-core/tokens/utils/size.ts
···
1
+
import StyleDictionary from 'style-dictionary'
2
+
3
+
StyleDictionary.registerFormat({
4
+
name: 'utilities/sizeClasses',
5
+
formatter: ({ dictionary }) => {
6
+
let output = `/**
7
+
* Size util
8
+
*
9
+
* This file is automatically generated, do not edit directly!
10
+
*/
11
+
.rpl-u-size {
12
+
`
13
+
for (let i = 0; i < dictionary.properties.steps.value; i++) {
14
+
output += ` &-${i + 1} {
15
+
width: var(--rpl-sp-${i + 1});
16
+
height: var(--rpl-sp-${i + 1});
17
+
}
18
+
19
+
`
20
+
}
21
+
output += `}
22
+
`
23
+
return output
24
+
}
25
+
})
26
+
27
+
StyleDictionary.extend({
28
+
properties: {
29
+
steps: {
30
+
value: 14
31
+
}
32
+
},
33
+
platforms: {
34
+
css: {
35
+
buildPath: 'src/styles/generated/',
36
+
transformGroup: 'css',
37
+
files: [
38
+
{
39
+
destination: '_size.css',
40
+
format: 'utilities/sizeClasses'
41
+
}
42
+
]
43
+
}
44
+
}
45
+
}).buildAllPlatforms()
+1
-16
pnpm-lock.yaml
+1
-16
pnpm-lock.yaml
···
58
58
hygen: ^6.2.11
59
59
jest: ^29.4.2
60
60
jest-environment-jsdom: ^29.4.2
61
-
postcss-for: ^2.1.1
62
61
postcss-nested: ^6.0.0
63
62
postcss-normalize: ^10.0.1
64
63
postcss-preset-env: ^8.0.1
···
109
108
hygen: 6.2.11
110
109
jest: 29.4.2_ucpl6toqp57nqodtp3vxxi6g5a
111
110
jest-environment-jsdom: 29.4.2
112
-
postcss-for: 2.1.1
113
111
postcss-nested: 6.0.0_postcss@8.4.21
114
112
postcss-normalize: 10.0.1_jrpp4geoaqu5dz2gragkckznb4
115
113
postcss-preset-env: 8.0.1_postcss@8.4.21
···
480
478
normalize.css: ^8.0.1
481
479
pathe: ^1.1.0
482
480
postcss-each: ^1.1.0
483
-
postcss-for: ^2.1.1
484
481
postcss-nested: ^6.0.0
485
482
postcss-normalize: ^10.0.1
486
483
postcss-preset-env: ^8.0.1
···
509
506
mitt: 3.0.0
510
507
normalize.css: 8.0.1
511
508
postcss-each: 1.1.0_postcss@8.4.21
512
-
postcss-for: 2.1.1
513
509
postcss-nested: 6.0.0_postcss@8.4.21
514
510
postcss-normalize: 10.0.1_jrpp4geoaqu5dz2gragkckznb4
515
511
postcss-preset-env: 8.0.1_postcss@8.4.21
···
9850
9846
'@babel/core': 7.20.12
9851
9847
find-cache-dir: 3.3.2
9852
9848
schema-utils: 4.0.0
9853
-
webpack: 5.75.0_esbuild@0.16.17
9849
+
webpack: 5.75.0
9854
9850
dev: true
9855
9851
9856
9852
/babel-messages/6.23.0:
···
22434
22430
dependencies:
22435
22431
postcss: 8.4.21
22436
22432
22437
-
/postcss-for/2.1.1:
22438
-
resolution: {integrity: sha512-X0R84FCyr5cqzW4+/g4Dvz2OUe1iwC3G/atIrwEpiRstZlBBpknV+ETlIneSTnw/iXgUnEoTRaO2qXY62YWLhQ==}
22439
-
dependencies:
22440
-
postcss: 8.4.21
22441
-
postcss-simple-vars: 2.0.0
22442
-
22443
22433
/postcss-gap-properties/4.0.1_postcss@8.4.21:
22444
22434
resolution: {integrity: sha512-V5OuQGw4lBumPlwHWk/PRfMKjaq/LTGR4WDTemIMCaMevArVfCCA9wBJiL1VjDAd+rzuCIlkRoRvDsSiAaZ4Fg==}
22445
22435
engines: {node: ^14 || ^16 || >=18}
···
23046
23036
dependencies:
23047
23037
cssesc: 3.0.0
23048
23038
util-deprecate: 1.0.2
23049
-
23050
-
/postcss-simple-vars/2.0.0:
23051
-
resolution: {integrity: sha512-HllLaKKCBOdKudyzqrw/ve5rWouM9cDL+WHaSF9q4CkBEPjdTdiKNw1xF2dAz5rUKrxVmnUmOYxamwy37dnq2Q==}
23052
-
dependencies:
23053
-
postcss: 8.4.21
23054
23039
23055
23040
/postcss-simple-vars/6.0.3_postcss@8.4.21:
23056
23041
resolution: {integrity: sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==}