@rolemodel/optics 2.2.0 → 2.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 (37) hide show
  1. package/.github/workflows/linting.yml +2 -1
  2. package/.github/workflows/publish-storybook.yml +2 -1
  3. package/.github/workflows/release-package.yml +2 -1
  4. package/.stylelintrc.json +3 -2
  5. package/.yarn/install-state.gz +0 -0
  6. package/build_token_json.js +5 -4
  7. package/dist/css/addons/panel.css +3 -3
  8. package/dist/css/addons/tom-select.css +5 -5
  9. package/dist/css/components/accordion.css +3 -3
  10. package/dist/css/components/alert.css +2 -2
  11. package/dist/css/components/avatar.css +6 -6
  12. package/dist/css/components/button.css +3 -3
  13. package/dist/css/components/button_group.css +4 -4
  14. package/dist/css/components/card.css +4 -4
  15. package/dist/css/components/confirm-dialog.css +1 -1
  16. package/dist/css/components/divider.css +7 -6
  17. package/dist/css/components/form.css +13 -14
  18. package/dist/css/components/icon.css +4 -4
  19. package/dist/css/components/modal.css +25 -43
  20. package/dist/css/components/navbar.css +6 -4
  21. package/dist/css/components/pagination.css +1 -1
  22. package/dist/css/components/segmented-control.css +5 -5
  23. package/dist/css/components/side_panel.css +4 -4
  24. package/dist/css/components/sidebar.css +11 -8
  25. package/dist/css/components/spinner.css +3 -3
  26. package/dist/css/components/switch.css +8 -8
  27. package/dist/css/components/table.css +3 -3
  28. package/dist/css/components/tooltip.css +2 -2
  29. package/dist/css/core/base.css +3 -4
  30. package/dist/css/core/layout.css +114 -7
  31. package/dist/css/core/tokens/base_tokens.css +6 -5
  32. package/dist/css/core/utilities.css +93 -68
  33. package/dist/css/optics.css +321 -209
  34. package/dist/css/optics.min.css +1 -1
  35. package/dist/package.json +15 -14
  36. package/dist/tokens/tokens.json +1 -1
  37. package/package.json +15 -14
package/dist/css/core/utilities.css CHANGED
@@ -1,14 +1,16 @@
1
1
  /* Container Properties */
2
2
 
3
3
  .container {
4
- width: 100%;
5
- max-width: var(--op-breakpoint-medium);
6
- padding: 0 var(--op-space-large);
7
- margin: 0 auto;
4
+ inline-size: 100%;
5
+ margin-block: 0;
6
+ margin-inline: auto;
7
+ max-inline-size: var(--op-breakpoint-medium);
8
+ padding-block: 0;
9
+ padding-inline: var(--op-space-large);
8
10
  }
9
11
 
10
12
  .container--sm {
11
- max-width: var(--op-breakpoint-small);
13
+ max-inline-size: var(--op-breakpoint-small);
12
14
  }
13
15
 
14
16
  .container--md-padding {
@@ -20,49 +22,49 @@
20
22
  }
21
23
 
22
24
  .container--xs {
23
- max-width: var(--op-breakpoint-x-small);
25
+ max-inline-size: var(--op-breakpoint-x-small);
24
26
  }
25
27
 
26
28
  /* Width Properties */
27
29
 
28
30
  .full-width {
29
- width: 100%;
31
+ inline-size: 100%;
30
32
  }
31
33
 
32
34
  .half-width {
33
- width: 50%;
35
+ inline-size: 50%;
34
36
  }
35
37
 
36
38
  .four-fifths-width {
37
- width: calc(100% * 4 / 5);
39
+ inline-size: calc(100% * 4 / 5);
38
40
  }
39
41
 
40
42
  .three-fifths-width {
41
- width: calc(100% * 3 / 5);
43
+ inline-size: calc(100% * 3 / 5);
42
44
  }
43
45
 
44
46
  .two-fifths-width {
45
- width: calc(100% * 2 / 5);
47
+ inline-size: calc(100% * 2 / 5);
46
48
  }
47
49
 
48
50
  .one-fifth-width {
49
- width: calc(100% * 1 / 5);
51
+ inline-size: calc(100% * 1 / 5);
50
52
  }
51
53
 
52
54
  .three-quarters-width {
53
- width: calc(100% * 3 / 4);
55
+ inline-size: calc(100% * 3 / 4);
54
56
  }
55
57
 
56
58
  .one-quarter-width {
57
- width: calc(100% * 1 / 4);
59
+ inline-size: calc(100% * 1 / 4);
58
60
  }
59
61
 
60
62
  .two-thirds-width {
61
- width: calc(100% * 2 / 3);
63
+ inline-size: calc(100% * 2 / 3);
62
64
  }
63
65
 
64
66
  .one-third-width {
65
- width: calc(100% * 1 / 3);
67
+ inline-size: calc(100% * 1 / 3);
66
68
  }
67
69
 
68
70
  /* Flex Properties */
@@ -201,7 +203,7 @@
201
203
  /* Text Alignment */
202
204
 
203
205
  .text-left {
204
- text-align: left;
206
+ text-align: start;
205
207
  }
206
208
 
207
209
  .text-center {
@@ -209,7 +211,7 @@
209
211
  }
210
212
 
211
213
  .text-right {
212
- text-align: right;
214
+ text-align: end;
213
215
  }
214
216
 
215
217
  .text-justify {
@@ -249,169 +251,157 @@
249
251
  /* Vertical Margin */
250
252
 
251
253
  .margin-y-xl {
252
- margin-top: var(--op-space-x-large);
253
- margin-bottom: var(--op-space-x-large);
254
+ margin-block: var(--op-space-x-large);
254
255
  }
255
256
 
256
257
  .margin-y-lg {
257
- margin-top: var(--op-space-large);
258
- margin-bottom: var(--op-space-large);
258
+ margin-block: var(--op-space-large);
259
259
  }
260
260
 
261
261
  .margin-y-md {
262
- margin-top: var(--op-space-medium);
263
- margin-bottom: var(--op-space-medium);
262
+ margin-block: var(--op-space-medium);
264
263
  }
265
264
 
266
265
  .margin-y-sm {
267
- margin-top: var(--op-space-small);
268
- margin-bottom: var(--op-space-small);
266
+ margin-block: var(--op-space-small);
269
267
  }
270
268
 
271
269
  .margin-y-xs {
272
- margin-top: var(--op-space-x-small);
273
- margin-bottom: var(--op-space-x-small);
270
+ margin-block: var(--op-space-x-small);
274
271
  }
275
272
 
276
273
  .margin-y-none {
277
- margin-top: 0;
278
- margin-bottom: 0;
274
+ margin-block: 0;
279
275
  }
280
276
 
281
277
  /* Horizontal Margin */
282
278
 
283
279
  .margin-x-xl {
284
- margin-right: var(--op-space-x-large);
285
- margin-left: var(--op-space-x-large);
280
+ margin-inline: var(--op-space-x-large);
286
281
  }
287
282
 
288
283
  .margin-x-lg {
289
- margin-right: var(--op-space-large);
290
- margin-left: var(--op-space-large);
284
+ margin-inline: var(--op-space-large);
291
285
  }
292
286
 
293
287
  .margin-x-md {
294
- margin-right: var(--op-space-medium);
295
- margin-left: var(--op-space-medium);
288
+ margin-inline: var(--op-space-medium);
296
289
  }
297
290
 
298
291
  .margin-x-sm {
299
- margin-right: var(--op-space-small);
300
- margin-left: var(--op-space-small);
292
+ margin-inline: var(--op-space-small);
301
293
  }
302
294
 
303
295
  .margin-x-xs {
304
- margin-right: var(--op-space-x-small);
305
- margin-left: var(--op-space-x-small);
296
+ margin-inline: var(--op-space-x-small);
306
297
  }
307
298
 
308
299
  .margin-x-none {
309
- margin-right: 0;
310
- margin-left: 0;
300
+ margin-inline: 0;
311
301
  }
312
302
 
313
303
  /* Top Margin */
314
304
 
315
305
  .margin-top-xl {
316
- margin-top: var(--op-space-x-large);
306
+ margin-block-start: var(--op-space-x-large);
317
307
  }
318
308
 
319
309
  .margin-top-lg {
320
- margin-top: var(--op-space-large);
310
+ margin-block-start: var(--op-space-large);
321
311
  }
322
312
 
323
313
  .margin-top-md {
324
- margin-top: var(--op-space-medium);
314
+ margin-block-start: var(--op-space-medium);
325
315
  }
326
316
 
327
317
  .margin-top-sm {
328
- margin-top: var(--op-space-small);
318
+ margin-block-start: var(--op-space-small);
329
319
  }
330
320
 
331
321
  .margin-top-xs {
332
- margin-top: var(--op-space-x-small);
322
+ margin-block-start: var(--op-space-x-small);
333
323
  }
334
324
 
335
325
  .margin-top-none {
336
- margin-top: 0;
326
+ margin-block-start: 0;
337
327
  }
338
328
 
339
329
  /* Bottom Margin */
340
330
 
341
331
  .margin-bottom-xl {
342
- margin-bottom: var(--op-space-x-large);
332
+ margin-block-end: var(--op-space-x-large);
343
333
  }
344
334
 
345
335
  .margin-bottom-lg {
346
- margin-bottom: var(--op-space-large);
336
+ margin-block-end: var(--op-space-large);
347
337
  }
348
338
 
349
339
  .margin-bottom-md {
350
- margin-bottom: var(--op-space-medium);
340
+ margin-block-end: var(--op-space-medium);
351
341
  }
352
342
 
353
343
  .margin-bottom-sm {
354
- margin-bottom: var(--op-space-small);
344
+ margin-block-end: var(--op-space-small);
355
345
  }
356
346
 
357
347
  .margin-bottom-xs {
358
- margin-bottom: var(--op-space-x-small);
348
+ margin-block-end: var(--op-space-x-small);
359
349
  }
360
350
 
361
351
  .margin-bottom-none {
362
- margin-bottom: 0;
352
+ margin-block-end: 0;
363
353
  }
364
354
 
365
355
  /* Right Margin */
366
356
 
367
357
  .margin-right-xl {
368
- margin-right: var(--op-space-x-large);
358
+ margin-inline-end: var(--op-space-x-large);
369
359
  }
370
360
 
371
361
  .margin-right-lg {
372
- margin-right: var(--op-space-large);
362
+ margin-inline-end: var(--op-space-large);
373
363
  }
374
364
 
375
365
  .margin-right-md {
376
- margin-right: var(--op-space-medium);
366
+ margin-inline-end: var(--op-space-medium);
377
367
  }
378
368
 
379
369
  .margin-right-sm {
380
- margin-right: var(--op-space-small);
370
+ margin-inline-end: var(--op-space-small);
381
371
  }
382
372
 
383
373
  .margin-right-xs {
384
- margin-right: var(--op-space-x-small);
374
+ margin-inline-end: var(--op-space-x-small);
385
375
  }
386
376
 
387
377
  .margin-right-none {
388
- margin-left: 0;
378
+ margin-inline-start: 0;
389
379
  }
390
380
 
391
381
  /* Left Margin */
392
382
 
393
383
  .margin-left-xl {
394
- margin-left: var(--op-space-x-large);
384
+ margin-inline-start: var(--op-space-x-large);
395
385
  }
396
386
 
397
387
  .margin-left-lg {
398
- margin-left: var(--op-space-large);
388
+ margin-inline-start: var(--op-space-large);
399
389
  }
400
390
 
401
391
  .margin-left-md {
402
- margin-left: var(--op-space-medium);
392
+ margin-inline-start: var(--op-space-medium);
403
393
  }
404
394
 
405
395
  .margin-left-sm {
406
- margin-left: var(--op-space-small);
396
+ margin-inline-start: var(--op-space-small);
407
397
  }
408
398
 
409
399
  .margin-left-xs {
410
- margin-left: var(--op-space-x-small);
400
+ margin-inline-start: var(--op-space-x-small);
411
401
  }
412
402
 
413
403
  .margin-left-none {
414
- margin-left: 0;
404
+ margin-inline-start: 0;
415
405
  }
416
406
 
417
407
  /*
@@ -422,8 +412,43 @@
422
412
  .sr-only {
423
413
  position: absolute !important;
424
414
  overflow: hidden;
425
- width: 1px;
426
- height: 1px;
415
+ block-size: 1px;
427
416
  clip: rect(1px 1px 1px 1px);
428
417
  clip: rect(1px, 1px, 1px, 1px);
418
+ inline-size: 1px;
419
+ }
420
+
421
+ /* Advanced Layout Utilities */
422
+
423
+ /* Equivalent to .flex.flex-col.gap-md */
424
+ .op-stack {
425
+ display: flex;
426
+ flex-direction: column;
427
+ }
428
+
429
+ :where(.op-stack) {
430
+ gap: var(--op-space-medium);
431
+ }
432
+
433
+ /* Equivalent to .flex.flex-wrap.items-center.gap-md */
434
+ .op-cluster {
435
+ display: flex;
436
+ flex-wrap: wrap;
437
+ }
438
+
439
+ :where(.op-cluster) {
440
+ align-items: center;
441
+ gap: var(--op-space-medium);
442
+ }
443
+
444
+ /* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
445
+ .op-split {
446
+ display: flex;
447
+ flex-wrap: wrap;
448
+ justify-content: space-between;
449
+ }
450
+
451
+ :where(.op-split) {
452
+ align-items: center;
453
+ gap: var(--op-space-medium);
429
454
  }