@rolster/styles-foundations 2.3.4 → 2.3.5

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 (11) hide show
  1. package/dist/rolster-styles.css +56 -6
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +56 -6
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/readme.md +1 -1
  7. package/scss/_rolster-components.scss +19 -4
  8. package/scss/_rolster-styles.scss +8 -4
  9. package/scss/foundations/_colors.foundation.scss +6 -2
  10. package/scss/foundations/_themes.foundation.scss +6 -2
  11. package/scss/utilities/_texts.utility.scss +8 -4
package/dist/rolster-styles.css CHANGED
@@ -28,7 +28,9 @@
28
28
  --rls-standard-backdrop-900: rgba(20, 39, 61, 0.8);
29
29
  --rls-standard-color-700: rgba(32, 83, 136, 1);
30
30
  --rls-standard-skeleton-500: rgba(32, 83, 136, 0.5);
31
+ --rls-standard-skeleton-400: rgba(32, 83, 136, 0.325);
31
32
  --rls-standard-skeleton-300: rgba(32, 83, 136, 0.25);
33
+ --rls-standard-skeleton-200: rgba(32, 83, 136, 0.175);
32
34
  --rls-standard-skeleton-100: rgba(32, 83, 136, 0.1);
33
35
  --rls-standard-color-500: rgba(53, 128, 194, 1);
34
36
  --rls-standard-shadow-500: rgba(53, 128, 194, 0.24);
@@ -50,7 +52,9 @@
50
52
  --rls-success-backdrop-900: rgba(1, 45, 33, 0.8);
51
53
  --rls-success-color-700: rgba(0, 124, 82, 1);
52
54
  --rls-success-skeleton-500: rgba(0, 124, 82, 0.5);
55
+ --rls-success-skeleton-400: rgba(0, 124, 82, 0.325);
53
56
  --rls-success-skeleton-300: rgba(0, 124, 82, 0.25);
57
+ --rls-success-skeleton-200: rgba(0, 124, 82, 0.175);
54
58
  --rls-success-skeleton-100: rgba(0, 124, 82, 0.1);
55
59
  --rls-success-color-500: rgba(10, 191, 121, 1);
56
60
  --rls-success-shadow-500: rgba(10, 191, 121, 0.24);
@@ -72,7 +76,9 @@
72
76
  --rls-info-backdrop-900: rgba(4, 45, 77, 0.8);
73
77
  --rls-info-color-700: rgba(0, 101, 170, 1);
74
78
  --rls-info-skeleton-500: rgba(0, 101, 170, 0.5);
79
+ --rls-info-skeleton-400: rgba(0, 101, 170, 0.325);
75
80
  --rls-info-skeleton-300: rgba(0, 101, 170, 0.25);
81
+ --rls-info-skeleton-200: rgba(0, 101, 170, 0.175);
76
82
  --rls-info-skeleton-100: rgba(0, 101, 170, 0.1);
77
83
  --rls-info-color-500: rgba(2, 159, 245, 1);
78
84
  --rls-info-shadow-500: rgba(2, 159, 245, 0.24);
@@ -94,7 +100,9 @@
94
100
  --rls-warning-backdrop-900: rgba(70, 27, 2, 0.8);
95
101
  --rls-warning-color-700: rgba(148, 64, 12, 1);
96
102
  --rls-warning-skeleton-500: rgba(148, 64, 12, 0.5);
103
+ --rls-warning-skeleton-400: rgba(148, 64, 12, 0.325);
97
104
  --rls-warning-skeleton-300: rgba(148, 64, 12, 0.25);
105
+ --rls-warning-skeleton-200: rgba(148, 64, 12, 0.175);
98
106
  --rls-warning-skeleton-100: rgba(148, 64, 12, 0.1);
99
107
  --rls-warning-color-500: rgba(222, 123, 2, 1);
100
108
  --rls-warning-shadow-500: rgba(222, 123, 2, 0.24);
@@ -116,7 +124,9 @@
116
124
  --rls-danger-backdrop-900: rgba(75, 4, 4, 0.8);
117
125
  --rls-danger-color-700: rgba(157, 23, 23, 1);
118
126
  --rls-danger-skeleton-500: rgba(157, 23, 23, 0.5);
127
+ --rls-danger-skeleton-400: rgba(157, 23, 23, 0.325);
119
128
  --rls-danger-skeleton-300: rgba(157, 23, 23, 0.25);
129
+ --rls-danger-skeleton-200: rgba(157, 23, 23, 0.175);
120
130
  --rls-danger-skeleton-100: rgba(157, 23, 23, 0.1);
121
131
  --rls-danger-color-500: rgba(255, 44, 44, 1);
122
132
  --rls-danger-shadow-500: rgba(255, 44, 44, 0.24);
@@ -138,7 +148,9 @@
138
148
  --rls-amaizing-backdrop-900: rgba(63, 19, 63, 0.8);
139
149
  --rls-amaizing-color-700: rgba(118, 49, 119, 1);
140
150
  --rls-amaizing-skeleton-500: rgba(118, 49, 119, 0.5);
151
+ --rls-amaizing-skeleton-400: rgba(118, 49, 119, 0.325);
141
152
  --rls-amaizing-skeleton-300: rgba(118, 49, 119, 0.25);
153
+ --rls-amaizing-skeleton-200: rgba(118, 49, 119, 0.175);
142
154
  --rls-amaizing-skeleton-100: rgba(118, 49, 119, 0.1);
143
155
  --rls-amaizing-color-500: rgba(170, 73, 176, 1);
144
156
  --rls-amaizing-shadow-500: rgba(170, 73, 176, 0.24);
@@ -160,7 +172,9 @@
160
172
  --rls-smartness-backdrop-900: rgba(50, 24, 22, 0.8);
161
173
  --rls-smartness-color-700: rgba(131, 69, 58, 1);
162
174
  --rls-smartness-skeleton-500: rgba(131, 69, 58, 0.5);
175
+ --rls-smartness-skeleton-400: rgba(131, 69, 58, 0.325);
163
176
  --rls-smartness-skeleton-300: rgba(131, 69, 58, 0.25);
177
+ --rls-smartness-skeleton-200: rgba(131, 69, 58, 0.175);
164
178
  --rls-smartness-skeleton-100: rgba(131, 69, 58, 0.1);
165
179
  --rls-smartness-color-500: rgba(182, 121, 89, 1);
166
180
  --rls-smartness-shadow-500: rgba(182, 121, 89, 0.24);
@@ -182,7 +196,9 @@
182
196
  --rls-obsidian-backdrop-900: rgba(41, 34, 31, 0.8);
183
197
  --rls-obsidian-color-700: rgba(98, 83, 70, 1);
184
198
  --rls-obsidian-skeleton-500: rgba(98, 83, 70, 0.5);
199
+ --rls-obsidian-skeleton-400: rgba(98, 83, 70, 0.325);
185
200
  --rls-obsidian-skeleton-300: rgba(98, 83, 70, 0.25);
201
+ --rls-obsidian-skeleton-200: rgba(98, 83, 70, 0.175);
186
202
  --rls-obsidian-skeleton-100: rgba(98, 83, 70, 0.1);
187
203
  --rls-obsidian-color-500: rgba(141, 127, 101, 1);
188
204
  --rls-obsidian-shadow-500: rgba(141, 127, 101, 0.24);
@@ -1307,7 +1323,9 @@
1307
1323
  --rls-theme-font-500: var(--rls-standard-color-100);
1308
1324
  --rls-theme-font-100: var(--rls-standard-color-900);
1309
1325
  --rls-theme-skeleton-500: var(--rls-standard-skeleton-500);
1326
+ --rls-theme-skeleton-400: var(--rls-standard-skeleton-400);
1310
1327
  --rls-theme-skeleton-300: var(--rls-standard-skeleton-300);
1328
+ --rls-theme-skeleton-200: var(--rls-standard-skeleton-200);
1311
1329
  --rls-theme-skeleton-100: var(--rls-standard-skeleton-100);
1312
1330
  --rls-theme-shadow-500: var(--rls-standard-shadow-500);
1313
1331
  --rls-theme-backdrop-900: var(--rls-standard-backdrop-900);
@@ -1357,7 +1375,9 @@
1357
1375
  --rls-theme-font-500: var(--rls-success-color-100);
1358
1376
  --rls-theme-font-100: var(--rls-success-color-900);
1359
1377
  --rls-theme-skeleton-500: var(--rls-success-skeleton-500);
1378
+ --rls-theme-skeleton-400: var(--rls-success-skeleton-400);
1360
1379
  --rls-theme-skeleton-300: var(--rls-success-skeleton-300);
1380
+ --rls-theme-skeleton-200: var(--rls-success-skeleton-200);
1361
1381
  --rls-theme-skeleton-100: var(--rls-success-skeleton-100);
1362
1382
  --rls-theme-shadow-500: var(--rls-success-shadow-500);
1363
1383
  --rls-theme-backdrop-900: var(--rls-success-backdrop-900);
@@ -1407,7 +1427,9 @@
1407
1427
  --rls-theme-font-500: var(--rls-info-color-100);
1408
1428
  --rls-theme-font-100: var(--rls-info-color-900);
1409
1429
  --rls-theme-skeleton-500: var(--rls-info-skeleton-500);
1430
+ --rls-theme-skeleton-400: var(--rls-info-skeleton-400);
1410
1431
  --rls-theme-skeleton-300: var(--rls-info-skeleton-300);
1432
+ --rls-theme-skeleton-200: var(--rls-info-skeleton-200);
1411
1433
  --rls-theme-skeleton-100: var(--rls-info-skeleton-100);
1412
1434
  --rls-theme-shadow-500: var(--rls-info-shadow-500);
1413
1435
  --rls-theme-backdrop-900: var(--rls-info-backdrop-900);
@@ -1442,7 +1464,9 @@
1442
1464
  --rls-theme-font-500: var(--rls-warning-color-100);
1443
1465
  --rls-theme-font-100: var(--rls-warning-color-900);
1444
1466
  --rls-theme-skeleton-500: var(--rls-warning-skeleton-500);
1467
+ --rls-theme-skeleton-400: var(--rls-warning-skeleton-400);
1445
1468
  --rls-theme-skeleton-300: var(--rls-warning-skeleton-300);
1469
+ --rls-theme-skeleton-200: var(--rls-warning-skeleton-200);
1446
1470
  --rls-theme-skeleton-100: var(--rls-warning-skeleton-100);
1447
1471
  --rls-theme-shadow-500: var(--rls-warning-shadow-500);
1448
1472
  --rls-theme-backdrop-900: var(--rls-warning-backdrop-900);
@@ -1492,7 +1516,9 @@
1492
1516
  --rls-theme-font-500: var(--rls-danger-color-100);
1493
1517
  --rls-theme-font-100: var(--rls-danger-color-900);
1494
1518
  --rls-theme-skeleton-500: var(--rls-danger-skeleton-500);
1519
+ --rls-theme-skeleton-400: var(--rls-danger-skeleton-400);
1495
1520
  --rls-theme-skeleton-300: var(--rls-danger-skeleton-300);
1521
+ --rls-theme-skeleton-200: var(--rls-danger-skeleton-200);
1496
1522
  --rls-theme-skeleton-100: var(--rls-danger-skeleton-100);
1497
1523
  --rls-theme-shadow-500: var(--rls-danger-shadow-500);
1498
1524
  --rls-theme-backdrop-900: var(--rls-danger-backdrop-900);
@@ -1542,7 +1568,9 @@
1542
1568
  --rls-theme-font-500: var(--rls-amaizing-color-100);
1543
1569
  --rls-theme-font-100: var(--rls-amaizing-color-900);
1544
1570
  --rls-theme-skeleton-500: var(--rls-amaizing-skeleton-500);
1571
+ --rls-theme-skeleton-400: var(--rls-amaizing-skeleton-400);
1545
1572
  --rls-theme-skeleton-300: var(--rls-amaizing-skeleton-300);
1573
+ --rls-theme-skeleton-200: var(--rls-amaizing-skeleton-200);
1546
1574
  --rls-theme-skeleton-100: var(--rls-amaizing-skeleton-100);
1547
1575
  --rls-theme-shadow-500: var(--rls-amaizing-shadow-500);
1548
1576
  --rls-theme-backdrop-900: var(--rls-amaizing-backdrop-900);
@@ -1592,7 +1620,9 @@
1592
1620
  --rls-theme-font-500: var(--rls-smartness-color-100);
1593
1621
  --rls-theme-font-100: var(--rls-smartness-color-900);
1594
1622
  --rls-theme-skeleton-500: var(--rls-smartness-skeleton-500);
1623
+ --rls-theme-skeleton-400: var(--rls-smartness-skeleton-400);
1595
1624
  --rls-theme-skeleton-300: var(--rls-smartness-skeleton-300);
1625
+ --rls-theme-skeleton-200: var(--rls-smartness-skeleton-200);
1596
1626
  --rls-theme-skeleton-100: var(--rls-smartness-skeleton-100);
1597
1627
  --rls-theme-shadow-500: var(--rls-smartness-shadow-500);
1598
1628
  --rls-theme-backdrop-900: var(--rls-smartness-backdrop-900);
@@ -1642,7 +1672,9 @@
1642
1672
  --rls-theme-font-500: var(--rls-obsidian-color-100);
1643
1673
  --rls-theme-font-100: var(--rls-obsidian-color-900);
1644
1674
  --rls-theme-skeleton-500: var(--rls-obsidian-skeleton-500);
1675
+ --rls-theme-skeleton-400: var(--rls-obsidian-skeleton-400);
1645
1676
  --rls-theme-skeleton-300: var(--rls-obsidian-skeleton-300);
1677
+ --rls-theme-skeleton-200: var(--rls-obsidian-skeleton-200);
1646
1678
  --rls-theme-skeleton-100: var(--rls-obsidian-skeleton-100);
1647
1679
  --rls-theme-shadow-500: var(--rls-obsidian-shadow-500);
1648
1680
  --rls-theme-backdrop-900: var(--rls-obsidian-backdrop-900);
@@ -2964,24 +2996,28 @@ p {
2964
2996
  .align-center {
2965
2997
  --rlc-amount-text-align: center;
2966
2998
  --rlc-input-text-align: center;
2999
+ --rlc-poster-text-align: center;
2967
3000
  text-align: center !important;
2968
3001
  }
2969
3002
 
2970
3003
  .align-justify {
2971
- --rlc-amount-text-align: start;
2972
- --rlc-input-text-align: left;
3004
+ --rlc-amount-text-align: flex-start;
3005
+ --rlc-input-text-align: justify;
3006
+ --rlc-poster-text-align: flex-start;
2973
3007
  text-align: justify !important;
2974
3008
  }
2975
3009
 
2976
3010
  .align-left {
2977
- --rlc-amount-text-align: start;
3011
+ --rlc-amount-text-align: flex-start;
2978
3012
  --rlc-input-text-align: left;
3013
+ --rlc-poster-text-align: flex-start;
2979
3014
  text-align: left !important;
2980
3015
  }
2981
3016
 
2982
3017
  .align-right {
2983
- --rlc-amount-text-align: end;
3018
+ --rlc-amount-text-align: flex-end;
2984
3019
  --rlc-input-text-align: right;
3020
+ --rlc-poster-text-align: flex-end;
2985
3021
  text-align: right !important;
2986
3022
  }
2987
3023
 
@@ -4111,14 +4147,26 @@ button {
4111
4147
  --rlc-input-text-align: left;
4112
4148
  --rlc-input-letter-spacing: var(--rls-input-letter-spacing);
4113
4149
  --rlc-input-height: var(--rls-sizing-x12);
4114
- --rlc-poster-height: var(--rls-sizing-x18);
4150
+ --rlc-label-font-size: var(--rls-smalltext-font-size);
4151
+ --rlc-label-letter-spacing: var(--rls-smalltext-letter-spacing);
4152
+ --rlc-label-height: var(--rls-smalltext-line-height);
4153
+ --rlc-poster-font-size: var(--rls-body-font-size);
4154
+ --rlc-poster-letter-spacing: var(--rls-body-letter-spacing);
4155
+ --rlc-poster-height: var(--rls-body-line-height);
4115
4156
  --rlc-poster-padding: var(--rls-sizing-x4);
4157
+ --rlc-poster-text-align: center;
4116
4158
  --rlc-progress-circular-dimension: var(--rls-sizing-x28);
4117
4159
  --rlc-snackbar-left: 50%;
4160
+ --rlc-skeleton-height: inherit;
4161
+ --rlc-skeleton-text-font-size: var(--rls-body-font-size);
4162
+ --rlc-skeleton-text-height: var(--rls-body-line-height);
4163
+ --rlc-skeleton-text-letter-spacing: var(--rls-body-letter-spacing);
4118
4164
  --rlc-switch-element-size: var(--rls-sizing-x12);
4119
4165
  --rlc-switch-bar-radius: var(--rls-sizing-x3);
4120
4166
  --rlc-switch-bar-height: var(--rls-sizing-x6);
4121
- --rlc-tabulartext-char-width: 5rem;
4167
+ --rlc-tabulartext-text-align: flex-start;
4168
+ --rlc-tabulartext-font-size: var(--rls-body-font-size);
4169
+ --rlc-tabulartext-char-width: 5.5rem;
4122
4170
  --rlc-tabulartext-pointer-width: 2rem;
4123
4171
  --rlc-toolbar-height: var(--rls-sizing-x28);
4124
4172
  }
@@ -4804,11 +4852,13 @@ button {
4804
4852
  --rls-app-font-size-1360: 2.5px;
4805
4853
  --rls-app-font-size-1820: 2.925px;
4806
4854
  }
4855
+
4807
4856
  @media screen and (min-width: 1360px) {
4808
4857
  .rls-aspect-ratio {
4809
4858
  --rls-app-font-size: var(--rls-app-font-size-1360);
4810
4859
  }
4811
4860
  }
4861
+
4812
4862
  @media screen and (min-width: 1820px) {
4813
4863
  .rls-aspect-ratio {
4814
4864
  --rls-app-font-size: var(--rls-app-font-size-1820);