@rolster/styles-foundations 2.6.7 → 2.6.8

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.
@@ -111,7 +111,8 @@ body {
111
111
  --rls-primary-skeleton-100: rgba(9, 78, 155, 0.1);
112
112
  --rls-primary-color-600: #0a63bf;
113
113
  --rls-primary-color-500: #1780e0;
114
- --rls-primary-shadow-500: rgba(23, 128, 224, 0.24);
114
+ --rls-primary-shadow-color-500: rgba(23, 128, 224, 0.24);
115
+ --rls-primary-shadow-500: 0px 0px 0px 3px var(--rls-primary-shadow-color-500);
115
116
  --rls-primary-color-400: #409cf0;
116
117
  --rls-primary-color-300: #82bdf7;
117
118
  --rls-primary-color-200: #bddbfa;
@@ -154,7 +155,9 @@ body {
154
155
  --rls-secondary-skeleton-100: rgba(38, 95, 91, 0.1);
155
156
  --rls-secondary-color-600: #2b7671;
156
157
  --rls-secondary-color-500: #39938b;
157
- --rls-secondary-shadow-500: rgba(57, 147, 139, 0.24);
158
+ --rls-secondary-shadow-color-500: rgba(57, 147, 139, 0.24);
159
+ --rls-secondary-shadow-500: 0px 0px 0px 3px
160
+ var(--rls-secondary-shadow-color-500);
158
161
  --rls-secondary-color-400: #53aea5;
159
162
  --rls-secondary-color-300: #7ecac0;
160
163
  --rls-secondary-color-200: #aee1d8;
@@ -197,7 +200,9 @@ body {
197
200
  --rls-tertiary-skeleton-100: rgba(204, 17, 2, 0.1);
198
201
  --rls-tertiary-color-600: #ff2101;
199
202
  --rls-tertiary-color-500: #ff3c0a;
200
- --rls-tertiary-shadow-500: rgba(255, 60, 10, 0.24);
203
+ --rls-tertiary-shadow-color-500: rgba(255, 60, 10, 0.24);
204
+ --rls-tertiary-shadow-500: 0px 0px 0px 3px
205
+ var(--rls-tertiary-shadow-color-500);
201
206
  --rls-tertiary-color-400: #ff6532;
202
207
  --rls-tertiary-color-300: #ff9a6d;
203
208
  --rls-tertiary-color-200: #ffc4a5;
@@ -240,7 +245,8 @@ body {
240
245
  --rls-success-skeleton-100: rgba(1, 123, 86, 0.1);
241
246
  --rls-success-color-600: #019f6c;
242
247
  --rls-success-color-500: #0bbe81;
243
- --rls-success-shadow-500: rgba(11, 190, 129, 0.24);
248
+ --rls-success-shadow-color-500: rgba(11, 190, 129, 0.24);
249
+ --rls-success-shadow-500: 0px 0px 0px 3px var(--rls-success-shadow-color-500);
244
250
  --rls-success-color-400: #30d798;
245
251
  --rls-success-color-300: #6beab6;
246
252
  --rls-success-color-200: #a5f5cf;
@@ -283,7 +289,8 @@ body {
283
289
  --rls-info-skeleton-100: rgba(0, 117, 167, 0.1);
284
290
  --rls-info-color-600: #0092cf;
285
291
  --rls-info-color-500: #06b6f1;
286
- --rls-info-shadow-500: rgba(6, 182, 241, 0.24);
292
+ --rls-info-shadow-color-500: rgba(6, 182, 241, 0.24);
293
+ --rls-info-shadow-500: 0px 0px 0px 3px var(--rls-info-shadow-color-500);
287
294
  --rls-info-color-400: #31ccff;
288
295
  --rls-info-color-300: #78ddff;
289
296
  --rls-info-color-200: #b7ebff;
@@ -326,7 +333,8 @@ body {
326
333
  --rls-warning-skeleton-100: rgba(170, 71, 19, 0.1);
327
334
  --rls-warning-color-600: #cd6512;
328
335
  --rls-warning-color-500: #e88918;
329
- --rls-warning-shadow-500: rgba(232, 137, 24, 0.24);
336
+ --rls-warning-shadow-color-500: rgba(232, 137, 24, 0.24);
337
+ --rls-warning-shadow-500: 0px 0px 0px 3px var(--rls-warning-shadow-color-500);
330
338
  --rls-warning-color-400: #efa930;
331
339
  --rls-warning-color-300: #f2c057;
332
340
  --rls-warning-color-200: #f6d991;
@@ -369,7 +377,8 @@ body {
369
377
  --rls-danger-skeleton-100: rgba(204, 0, 1, 0.1);
370
378
  --rls-danger-color-600: #fc0607;
371
379
  --rls-danger-color-500: #ff2627;
372
- --rls-danger-shadow-500: rgba(255, 38, 39, 0.24);
380
+ --rls-danger-shadow-color-500: rgba(255, 38, 39, 0.24);
381
+ --rls-danger-shadow-500: 0px 0px 0px 3px var(--rls-danger-shadow-color-500);
373
382
  --rls-danger-color-400: #ff595a;
374
383
  --rls-danger-color-300: #ff9596;
375
384
  --rls-danger-color-200: #ffc1c1;
@@ -412,7 +421,8 @@ body {
412
421
  --rls-berry-skeleton-100: rgba(167, 41, 74, 0.1);
413
422
  --rls-berry-color-600: #c7375a;
414
423
  --rls-berry-color-500: #dc5770;
415
- --rls-berry-shadow-500: rgba(220, 87, 112, 0.24);
424
+ --rls-berry-shadow-color-500: rgba(220, 87, 112, 0.24);
425
+ --rls-berry-shadow-500: 0px 0px 0px 3px var(--rls-berry-shadow-color-500);
416
426
  --rls-berry-color-400: #ec96a4;
417
427
  --rls-berry-color-300: #f1b0b9;
418
428
  --rls-berry-color-200: #f7d4d9;
@@ -455,7 +465,8 @@ body {
455
465
  --rls-ross-skeleton-100: rgba(200, 8, 59, 0.1);
456
466
  --rls-ross-color-600: #ed1146;
457
467
  --rls-ross-color-500: #ff4b6e;
458
- --rls-ross-shadow-500: rgba(255, 75, 110, 0.24);
468
+ --rls-ross-shadow-color-500: rgba(255, 75, 110, 0.24);
469
+ --rls-ross-shadow-500: 0px 0px 0px 3px var(--rls-ross-shadow-color-500);
459
470
  --rls-ross-color-400: #ff6982;
460
471
  --rls-ross-color-300: #ff9fad;
461
472
  --rls-ross-color-200: #ffcad2;
@@ -498,7 +509,8 @@ body {
498
509
  --rls-hope-skeleton-100: rgba(10, 123, 104, 0.1);
499
510
  --rls-hope-color-600: #07a287;
500
511
  --rls-hope-color-500: #0cc09d;
501
- --rls-hope-shadow-500: rgba(12, 192, 157, 0.24);
512
+ --rls-hope-shadow-color-500: rgba(12, 192, 157, 0.24);
513
+ --rls-hope-shadow-500: 0px 0px 0px 3px var(--rls-hope-shadow-color-500);
502
514
  --rls-hope-color-400: #25dcb5;
503
515
  --rls-hope-color-300: #57f1cc;
504
516
  --rls-hope-color-200: #95fade;
@@ -541,7 +553,9 @@ body {
541
553
  --rls-mountains-skeleton-100: rgba(59, 74, 65, 0.1);
542
554
  --rls-mountains-color-600: #4f6457;
543
555
  --rls-mountains-color-500: #5b7163;
544
- --rls-mountains-shadow-500: rgba(91, 113, 99, 0.24);
556
+ --rls-mountains-shadow-color-500: rgba(91, 113, 99, 0.24);
557
+ --rls-mountains-shadow-500: 0px 0px 0px 3px
558
+ var(--rls-mountains-shadow-color-500);
545
559
  --rls-mountains-color-400: #758c7d;
546
560
  --rls-mountains-color-300: #9aaea0;
547
561
  --rls-mountains-color-200: #c1cec4;
@@ -584,7 +598,9 @@ body {
584
598
  --rls-amaizing-skeleton-100: rgba(142, 58, 145, 0.1);
585
599
  --rls-amaizing-color-600: #aa49b0;
586
600
  --rls-amaizing-color-500: #c568cd;
587
- --rls-amaizing-shadow-500: rgba(197, 104, 205, 0.24);
601
+ --rls-amaizing-shadow-color-500: rgba(197, 104, 205, 0.24);
602
+ --rls-amaizing-shadow-500: 0px 0px 0px 3px
603
+ var(--rls-amaizing-shadow-color-500);
588
604
  --rls-amaizing-color-400: #d993df;
589
605
  --rls-amaizing-color-300: #e7bbec;
590
606
  --rls-amaizing-color-200: #f0d9f5;
@@ -627,7 +643,8 @@ body {
627
643
  --rls-purple-skeleton-100: rgba(72, 67, 191, 0.1);
628
644
  --rls-purple-color-600: #5552d9;
629
645
  --rls-purple-color-500: #6e74e6;
630
- --rls-purple-shadow-500: rgba(110, 116, 230, 0.24);
646
+ --rls-purple-shadow-color-500: rgba(110, 116, 230, 0.24);
647
+ --rls-purple-shadow-500: 0px 0px 0px 3px var(--rls-purple-shadow-color-500);
631
648
  --rls-purple-color-400: #8a96ef;
632
649
  --rls-purple-color-300: #acbbf5;
633
650
  --rls-purple-color-200: #cbd6fa;
@@ -670,7 +687,8 @@ body {
670
687
  --rls-amber-skeleton-100: rgba(186, 64, 20, 0.1);
671
688
  --rls-amber-color-600: #e15616;
672
689
  --rls-amber-color-500: #ef6f20;
673
- --rls-amber-shadow-500: rgba(239, 111, 32, 0.24);
690
+ --rls-amber-shadow-color-500: rgba(239, 111, 32, 0.24);
691
+ --rls-amber-shadow-500: 0px 0px 0px 3px var(--rls-amber-shadow-color-500);
674
692
  --rls-amber-color-400: #f28e45;
675
693
  --rls-amber-color-300: #f7b77a;
676
694
  --rls-amber-color-200: #fad5ae;
@@ -713,7 +731,9 @@ body {
713
731
  --rls-smartness-skeleton-100: rgba(131, 69, 58, 0.1);
714
732
  --rls-smartness-color-600: #9c5a43;
715
733
  --rls-smartness-color-500: #b67959;
716
- --rls-smartness-shadow-500: rgba(182, 121, 89, 0.24);
734
+ --rls-smartness-shadow-color-500: rgba(182, 121, 89, 0.24);
735
+ --rls-smartness-shadow-500: 0px 0px 0px 3px
736
+ var(--rls-smartness-shadow-color-500);
717
737
  --rls-smartness-color-400: #bd8a62;
718
738
  --rls-smartness-color-300: #c9a380;
719
739
  --rls-smartness-color-200: #dcc4ab;
@@ -756,7 +776,9 @@ body {
756
776
  --rls-obsidian-skeleton-100: rgba(98, 83, 70, 0.1);
757
777
  --rls-obsidian-color-600: #796955;
758
778
  --rls-obsidian-color-500: #8d7f65;
759
- --rls-obsidian-shadow-500: rgba(141, 127, 101, 0.24);
779
+ --rls-obsidian-shadow-color-500: rgba(141, 127, 101, 0.24);
780
+ --rls-obsidian-shadow-500: 0px 0px 0px 3px
781
+ var(--rls-obsidian-shadow-color-500);
760
782
  --rls-obsidian-color-400: #9c9073;
761
783
  --rls-obsidian-color-300: #b2aa92;
762
784
  --rls-obsidian-color-200: #cecaba;
@@ -2339,6 +2361,7 @@ body {
2339
2361
  --rls-theme-skeleton-300: var(--rls-primary-skeleton-300);
2340
2362
  --rls-theme-skeleton-200: var(--rls-primary-skeleton-200);
2341
2363
  --rls-theme-skeleton-100: var(--rls-primary-skeleton-100);
2364
+ --rls-theme-shadow-color-500: var(--rls-primary-shadow-color-500);
2342
2365
  --rls-theme-shadow-500: var(--rls-primary-shadow-500);
2343
2366
  --rls-theme-backdrop-900: var(--rls-primary-backdrop-900);
2344
2367
  --rls-theme-gradient-700: var(--rls-primary-gradient-700);
@@ -2421,6 +2444,7 @@ body {
2421
2444
  --rls-theme-skeleton-300: var(--rls-secondary-skeleton-300);
2422
2445
  --rls-theme-skeleton-200: var(--rls-secondary-skeleton-200);
2423
2446
  --rls-theme-skeleton-100: var(--rls-secondary-skeleton-100);
2447
+ --rls-theme-shadow-color-500: var(--rls-secondary-shadow-color-500);
2424
2448
  --rls-theme-shadow-500: var(--rls-secondary-shadow-500);
2425
2449
  --rls-theme-backdrop-900: var(--rls-secondary-backdrop-900);
2426
2450
  --rls-theme-gradient-700: var(--rls-secondary-gradient-700);
@@ -2503,6 +2527,7 @@ body {
2503
2527
  --rls-theme-skeleton-300: var(--rls-tertiary-skeleton-300);
2504
2528
  --rls-theme-skeleton-200: var(--rls-tertiary-skeleton-200);
2505
2529
  --rls-theme-skeleton-100: var(--rls-tertiary-skeleton-100);
2530
+ --rls-theme-shadow-color-500: var(--rls-tertiary-shadow-color-500);
2506
2531
  --rls-theme-shadow-500: var(--rls-tertiary-shadow-500);
2507
2532
  --rls-theme-backdrop-900: var(--rls-tertiary-backdrop-900);
2508
2533
  --rls-theme-gradient-700: var(--rls-tertiary-gradient-700);
@@ -2585,6 +2610,7 @@ body {
2585
2610
  --rls-theme-skeleton-300: var(--rls-success-skeleton-300);
2586
2611
  --rls-theme-skeleton-200: var(--rls-success-skeleton-200);
2587
2612
  --rls-theme-skeleton-100: var(--rls-success-skeleton-100);
2613
+ --rls-theme-shadow-color-500: var(--rls-success-shadow-color-500);
2588
2614
  --rls-theme-shadow-500: var(--rls-success-shadow-500);
2589
2615
  --rls-theme-backdrop-900: var(--rls-success-backdrop-900);
2590
2616
  --rls-theme-gradient-700: var(--rls-success-gradient-700);
@@ -2667,6 +2693,7 @@ body {
2667
2693
  --rls-theme-skeleton-300: var(--rls-info-skeleton-300);
2668
2694
  --rls-theme-skeleton-200: var(--rls-info-skeleton-200);
2669
2695
  --rls-theme-skeleton-100: var(--rls-info-skeleton-100);
2696
+ --rls-theme-shadow-color-500: var(--rls-info-shadow-color-500);
2670
2697
  --rls-theme-shadow-500: var(--rls-info-shadow-500);
2671
2698
  --rls-theme-backdrop-900: var(--rls-info-backdrop-900);
2672
2699
  --rls-theme-gradient-700: var(--rls-info-gradient-700);
@@ -2722,6 +2749,7 @@ body {
2722
2749
  --rls-theme-skeleton-300: var(--rls-warning-skeleton-300);
2723
2750
  --rls-theme-skeleton-200: var(--rls-warning-skeleton-200);
2724
2751
  --rls-theme-skeleton-100: var(--rls-warning-skeleton-100);
2752
+ --rls-theme-shadow-color-500: var(--rls-warning-shadow-color-500);
2725
2753
  --rls-theme-shadow-500: var(--rls-warning-shadow-500);
2726
2754
  --rls-theme-backdrop-900: var(--rls-warning-backdrop-900);
2727
2755
  --rls-theme-gradient-700: var(--rls-warning-gradient-700);
@@ -2804,6 +2832,7 @@ body {
2804
2832
  --rls-theme-skeleton-300: var(--rls-danger-skeleton-300);
2805
2833
  --rls-theme-skeleton-200: var(--rls-danger-skeleton-200);
2806
2834
  --rls-theme-skeleton-100: var(--rls-danger-skeleton-100);
2835
+ --rls-theme-shadow-color-500: var(--rls-danger-shadow-color-500);
2807
2836
  --rls-theme-shadow-500: var(--rls-danger-shadow-500);
2808
2837
  --rls-theme-backdrop-900: var(--rls-danger-backdrop-900);
2809
2838
  --rls-theme-gradient-700: var(--rls-danger-gradient-700);
@@ -2886,6 +2915,7 @@ body {
2886
2915
  --rls-theme-skeleton-300: var(--rls-berry-skeleton-300);
2887
2916
  --rls-theme-skeleton-200: var(--rls-berry-skeleton-200);
2888
2917
  --rls-theme-skeleton-100: var(--rls-berry-skeleton-100);
2918
+ --rls-theme-shadow-color-500: var(--rls-berry-shadow-color-500);
2889
2919
  --rls-theme-shadow-500: var(--rls-berry-shadow-500);
2890
2920
  --rls-theme-backdrop-900: var(--rls-berry-backdrop-900);
2891
2921
  --rls-theme-gradient-700: var(--rls-berry-gradient-700);
@@ -2941,6 +2971,7 @@ body {
2941
2971
  --rls-theme-skeleton-300: var(--rls-ross-skeleton-300);
2942
2972
  --rls-theme-skeleton-200: var(--rls-ross-skeleton-200);
2943
2973
  --rls-theme-skeleton-100: var(--rls-ross-skeleton-100);
2974
+ --rls-theme-shadow-color-500: var(--rls-ross-shadow-color-500);
2944
2975
  --rls-theme-shadow-500: var(--rls-ross-shadow-500);
2945
2976
  --rls-theme-backdrop-900: var(--rls-ross-backdrop-900);
2946
2977
  --rls-theme-gradient-700: var(--rls-ross-gradient-700);
@@ -2996,6 +3027,7 @@ body {
2996
3027
  --rls-theme-skeleton-300: var(--rls-hope-skeleton-300);
2997
3028
  --rls-theme-skeleton-200: var(--rls-hope-skeleton-200);
2998
3029
  --rls-theme-skeleton-100: var(--rls-hope-skeleton-100);
3030
+ --rls-theme-shadow-color-500: var(--rls-hope-shadow-color-500);
2999
3031
  --rls-theme-shadow-500: var(--rls-hope-shadow-500);
3000
3032
  --rls-theme-backdrop-900: var(--rls-hope-backdrop-900);
3001
3033
  --rls-theme-gradient-700: var(--rls-hope-gradient-700);
@@ -3051,6 +3083,7 @@ body {
3051
3083
  --rls-theme-skeleton-300: var(--rls-mountains-skeleton-300);
3052
3084
  --rls-theme-skeleton-200: var(--rls-mountains-skeleton-200);
3053
3085
  --rls-theme-skeleton-100: var(--rls-mountains-skeleton-100);
3086
+ --rls-theme-shadow-color-500: var(--rls-mountains-shadow-color-500);
3054
3087
  --rls-theme-shadow-500: var(--rls-mountains-shadow-500);
3055
3088
  --rls-theme-backdrop-900: var(--rls-mountains-backdrop-900);
3056
3089
  --rls-theme-gradient-700: var(--rls-mountains-gradient-700);
@@ -3133,6 +3166,7 @@ body {
3133
3166
  --rls-theme-skeleton-300: var(--rls-amaizing-skeleton-300);
3134
3167
  --rls-theme-skeleton-200: var(--rls-amaizing-skeleton-200);
3135
3168
  --rls-theme-skeleton-100: var(--rls-amaizing-skeleton-100);
3169
+ --rls-theme-shadow-color-500: var(--rls-amaizing-shadow-color-500);
3136
3170
  --rls-theme-shadow-500: var(--rls-amaizing-shadow-500);
3137
3171
  --rls-theme-backdrop-900: var(--rls-amaizing-backdrop-900);
3138
3172
  --rls-theme-gradient-700: var(--rls-amaizing-gradient-700);
@@ -3215,6 +3249,7 @@ body {
3215
3249
  --rls-theme-skeleton-300: var(--rls-purple-skeleton-300);
3216
3250
  --rls-theme-skeleton-200: var(--rls-purple-skeleton-200);
3217
3251
  --rls-theme-skeleton-100: var(--rls-purple-skeleton-100);
3252
+ --rls-theme-shadow-color-500: var(--rls-purple-shadow-color-500);
3218
3253
  --rls-theme-shadow-500: var(--rls-purple-shadow-500);
3219
3254
  --rls-theme-backdrop-900: var(--rls-purple-backdrop-900);
3220
3255
  --rls-theme-gradient-700: var(--rls-purple-gradient-700);
@@ -3297,6 +3332,7 @@ body {
3297
3332
  --rls-theme-skeleton-300: var(--rls-amber-skeleton-300);
3298
3333
  --rls-theme-skeleton-200: var(--rls-amber-skeleton-200);
3299
3334
  --rls-theme-skeleton-100: var(--rls-amber-skeleton-100);
3335
+ --rls-theme-shadow-color-500: var(--rls-amber-shadow-color-500);
3300
3336
  --rls-theme-shadow-500: var(--rls-amber-shadow-500);
3301
3337
  --rls-theme-backdrop-900: var(--rls-amber-backdrop-900);
3302
3338
  --rls-theme-gradient-700: var(--rls-amber-gradient-700);
@@ -3352,6 +3388,7 @@ body {
3352
3388
  --rls-theme-skeleton-300: var(--rls-smartness-skeleton-300);
3353
3389
  --rls-theme-skeleton-200: var(--rls-smartness-skeleton-200);
3354
3390
  --rls-theme-skeleton-100: var(--rls-smartness-skeleton-100);
3391
+ --rls-theme-shadow-color-500: var(--rls-smartness-shadow-color-500);
3355
3392
  --rls-theme-shadow-500: var(--rls-smartness-shadow-500);
3356
3393
  --rls-theme-backdrop-900: var(--rls-smartness-backdrop-900);
3357
3394
  --rls-theme-gradient-700: var(--rls-smartness-gradient-700);
@@ -3434,6 +3471,7 @@ body {
3434
3471
  --rls-theme-skeleton-300: var(--rls-obsidian-skeleton-300);
3435
3472
  --rls-theme-skeleton-200: var(--rls-obsidian-skeleton-200);
3436
3473
  --rls-theme-skeleton-100: var(--rls-obsidian-skeleton-100);
3474
+ --rls-theme-shadow-color-500: var(--rls-obsidian-shadow-color-500);
3437
3475
  --rls-theme-shadow-500: var(--rls-obsidian-shadow-500);
3438
3476
  --rls-theme-backdrop-900: var(--rls-obsidian-backdrop-900);
3439
3477
  --rls-theme-gradient-700: var(--rls-obsidian-gradient-700);
@@ -6049,7 +6087,7 @@ button {
6049
6087
  .rls-field-box--focused {
6050
6088
  --pvt-body-shadow: var(
6051
6089
  --rlc-field-box-body-shadow,
6052
- 0px 0px 0px 3px var(--rls-theme-shadow-500)
6090
+ var(--rls-theme-shadow-500)
6053
6091
  );
6054
6092
  --pvt-label-font-color: var(--rls-theme-color-500);
6055
6093
  --pvt-body-border: var(--pvt-body-border-focused);
@@ -6057,7 +6095,7 @@ button {
6057
6095
  .rls-field-box--error {
6058
6096
  --pvt-body-shadow: var(
6059
6097
  --rlc-field-box-body-shadow-error,
6060
- 0px 0px 0px 3px var(--rls-danger-shadow-500)
6098
+ 0px 0px 0px 3px var(--rls-danger-shadow-color-500)
6061
6099
  );
6062
6100
  --pvt-label-font-color: var(--rls-danger-color-500);
6063
6101
  --pvt-body-border: var(--pvt-body-border-error);
@@ -6248,7 +6286,7 @@ button {
6248
6286
  z-index: var(--rls-z-index-2);
6249
6287
  border: var(--pvt-list-body-border);
6250
6288
  background: var(--rls-app-color-050);
6251
- box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
6289
+ box-shadow: var(--rls-theme-shadow-500);
6252
6290
  transform: var(--pvt-list-transform);
6253
6291
  }
6254
6292
  .rls-field-list__suggestions__body::before {