@rolster/styles-foundations 2.0.1 → 2.2.1

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 (12) hide show
  1. package/dist/rolster-styles.css +218 -105
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +218 -105
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_rolster-components.scss +10 -5
  7. package/scss/components/_app.scss +3 -2
  8. package/scss/components/_box-field.scss +5 -7
  9. package/scss/components/_list-field.scss +3 -3
  10. package/scss/foundations/_colors.foundation.scss +136 -114
  11. package/scss/foundations/_themes.foundation.scss +13 -1
  12. package/scss/utilities/_normalize.utility.scss +10 -4
package/dist/rolster-styles.css CHANGED
@@ -24,125 +24,181 @@
24
24
  --rls-light-border-500: rgba(255, 255, 255, 1);
25
25
  --rls-light-border-300: rgba(185, 195, 231, 1);
26
26
  --rls-light-border-100: rgba(128, 141, 190, 1);
27
- --rls-standard-color-900: rgba(21, 56, 101, 1);
28
- --rls-standard-color-700: rgba(17, 75, 147, 1);
29
- --rls-standard-color-500: rgba(33, 122, 214, 1);
30
- --rls-standard-color-300: rgba(136, 186, 241, 1);
31
- --rls-standard-color-100: rgba(227, 236, 251, 1);
32
- --rls-standard-skeleton-500: rgba(17, 75, 147, 0.5);
33
- --rls-standard-skeleton-300: rgba(17, 75, 147, 0.25);
34
- --rls-standard-skeleton-100: rgba(17, 75, 147, 0.1);
35
- --rls-standard-shadow-500: rgba(33, 122, 214, 0.24);
36
- --rls-standard-backdrop-500: rgba(21, 56, 101, 0.8);
27
+ --rls-standard-color-900: rgba(20, 39, 61, 1);
28
+ --rls-standard-backdrop-900: rgba(20, 39, 61, 0.8);
29
+ --rls-standard-color-700: rgba(32, 83, 136, 1);
30
+ --rls-standard-skeleton-500: rgba(32, 83, 136, 0.5);
31
+ --rls-standard-skeleton-300: rgba(32, 83, 136, 0.25);
32
+ --rls-standard-skeleton-100: rgba(32, 83, 136, 0.1);
33
+ --rls-standard-color-500: rgba(53, 128, 194, 1);
34
+ --rls-standard-shadow-500: rgba(53, 128, 194, 0.24);
35
+ --rls-standard-color-400: rgba(148, 190, 229, 1);
36
+ --rls-standard-color-300: rgba(198, 219, 241, 1);
37
+ --rls-standard-color-200: rgba(229, 238, 249, 1);
38
+ --rls-standard-color-100: rgba(243, 247, 252, 1);
39
+ --rls-standard-gradient-700: linear-gradient(
40
+ 180deg,
41
+ var(--rls-standard-color-700) 0%,
42
+ var(--rls-standard-color-900) 100%
43
+ );
37
44
  --rls-standard-gradient-500: linear-gradient(
38
45
  180deg,
39
- rgb(33, 122, 214) 0%,
40
- rgb(17, 75, 147) 100%
46
+ var(--rls-standard-color-500) 0%,
47
+ var(--rls-standard-color-700) 100%
41
48
  );
42
- --rls-success-color-900: rgba(4, 80, 56, 1);
49
+ --rls-success-color-900: rgba(1, 45, 33, 1);
50
+ --rls-success-backdrop-900: rgba(1, 45, 33, 0.8);
43
51
  --rls-success-color-700: rgba(0, 124, 82, 1);
44
- --rls-success-color-500: rgba(10, 191, 121, 1);
45
- --rls-success-color-300: rgba(106, 235, 177, 1);
46
- --rls-success-color-100: rgba(208, 251, 227, 1);
47
52
  --rls-success-skeleton-500: rgba(0, 124, 82, 0.5);
48
53
  --rls-success-skeleton-300: rgba(0, 124, 82, 0.25);
49
54
  --rls-success-skeleton-100: rgba(0, 124, 82, 0.1);
55
+ --rls-success-color-500: rgba(10, 191, 121, 1);
50
56
  --rls-success-shadow-500: rgba(10, 191, 121, 0.24);
51
- --rls-success-backdrop-500: rgba(4, 80, 56, 0.8);
57
+ --rls-success-color-400: rgba(106, 235, 177, 1);
58
+ --rls-success-color-300: rgba(164, 246, 203, 1);
59
+ --rls-success-color-200: rgba(208, 251, 227, 1);
60
+ --rls-success-color-100: rgba(235, 254, 244, 1);
61
+ --rls-success-gradient-700: linear-gradient(
62
+ 180deg,
63
+ var(--rls-success-color-700) 0%,
64
+ var(--rls-success-color-900) 100%
65
+ );
52
66
  --rls-success-gradient-500: linear-gradient(
53
67
  180deg,
54
- rgb(10, 191, 121) 0%,
55
- rgb(0, 124, 82) 100%
68
+ var(--rls-success-color-500) 0%,
69
+ var(--rls-success-color-700) 100%
56
70
  );
57
- --rls-info-color-900: rgba(7, 70, 115, 1);
58
- --rls-info-color-700: rgba(0, 100, 170, 1);
71
+ --rls-info-color-900: rgba(4, 45, 77, 1);
72
+ --rls-info-backdrop-900: rgba(4, 45, 77, 0.8);
73
+ --rls-info-color-700: rgba(0, 101, 170, 1);
74
+ --rls-info-skeleton-500: rgba(0, 101, 170, 0.5);
75
+ --rls-info-skeleton-300: rgba(0, 101, 170, 0.25);
76
+ --rls-info-skeleton-100: rgba(0, 101, 170, 0.1);
59
77
  --rls-info-color-500: rgba(2, 159, 245, 1);
60
- --rls-info-color-300: rgba(118, 207, 255, 1);
61
- --rls-info-color-100: rgba(222, 241, 255, 1);
62
- --rls-info-skeleton-500: rgba(0, 100, 170, 0.5);
63
- --rls-info-skeleton-300: rgba(0, 100, 170, 0.25);
64
- --rls-info-skeleton-100: rgba(0, 100, 170, 0.1);
65
78
  --rls-info-shadow-500: rgba(2, 159, 245, 0.24);
66
- --rls-info-backdrop-500: rgba(7, 70, 115, 0.8);
79
+ --rls-info-color-400: rgba(118, 207, 255, 1);
80
+ --rls-info-color-300: rgba(182, 228, 255, 1);
81
+ --rls-info-color-200: rgba(222, 241, 255, 1);
82
+ --rls-info-color-100: rgba(239, 248, 255, 1);
83
+ --rls-info-gradient-700: linear-gradient(
84
+ 180deg,
85
+ var(--rls-info-color-700) 0%,
86
+ var(--rls-info-color-900) 100%
87
+ );
67
88
  --rls-info-gradient-500: linear-gradient(
68
89
  180deg,
69
- rgb(2, 159, 245) 0%,
70
- rgb(0, 100, 170) 100%
90
+ var(--rls-info-color-500) 0%,
91
+ var(--rls-info-color-700) 100%
92
+ );
93
+ --rls-warning-color-900: rgba(70, 27, 2, 1);
94
+ --rls-warning-backdrop-900: rgba(70, 27, 2, 0.8);
95
+ --rls-warning-color-700: rgba(148, 64, 12, 1);
96
+ --rls-warning-skeleton-500: rgba(148, 64, 12, 0.5);
97
+ --rls-warning-skeleton-300: rgba(148, 64, 12, 0.25);
98
+ --rls-warning-skeleton-100: rgba(148, 64, 12, 0.1);
99
+ --rls-warning-color-500: rgba(222, 123, 2, 1);
100
+ --rls-warning-shadow-500: rgba(222, 123, 2, 0.24);
101
+ --rls-warning-color-400: rgba(255, 195, 32, 1);
102
+ --rls-warning-color-300: rgba(255, 221, 103, 1);
103
+ --rls-warning-color-200: rgba(255, 232, 136, 1);
104
+ --rls-warning-color-100: rgba(255, 245, 198, 1);
105
+ --rls-warning-gradient-700: linear-gradient(
106
+ 180deg,
107
+ var(--rls-warning-color-700) 0%,
108
+ var(--rls-warning-color-900) 100%
71
109
  );
72
- --rls-warning-color-900: rgb(116, 68, 15, 1);
73
- --rls-warning-color-700: rgba(166, 107, 2, 1);
74
- --rls-warning-color-500: rgb(255, 206, 0, 1);
75
- --rls-warning-color-300: rgba(255, 238, 65, 1);
76
- --rls-warning-color-100: rgba(255, 254, 193, 1);
77
- --rls-warning-skeleton-500: rgba(166, 107, 2, 0.5);
78
- --rls-warning-skeleton-300: rgba(166, 107, 2, 0.25);
79
- --rls-warning-skeleton-100: rgba(166, 107, 2, 0.1);
80
- --rls-warning-shadow-500: rgba(255, 206, 0, 0.24);
81
- --rls-warning-backdrop-500: rgba(116, 68, 15, 0.8);
82
110
  --rls-warning-gradient-500: linear-gradient(
83
111
  180deg,
84
- rgb(255, 206, 0) 0%,
85
- rgb(166, 107, 2) 100%
112
+ var(--rls-warning-color-500) 0%,
113
+ var(--rls-warning-color-700) 100%
86
114
  );
87
- --rls-danger-color-900: rgba(136, 20, 20, 1);
88
- --rls-danger-color-700: rgba(200, 13, 13, 1);
115
+ --rls-danger-color-900: rgba(75, 4, 4, 1);
116
+ --rls-danger-backdrop-900: rgba(75, 4, 4, 0.8);
117
+ --rls-danger-color-700: rgba(157, 23, 23, 1);
118
+ --rls-danger-skeleton-500: rgba(157, 23, 23, 0.5);
119
+ --rls-danger-skeleton-300: rgba(157, 23, 23, 0.25);
120
+ --rls-danger-skeleton-100: rgba(157, 23, 23, 0.1);
89
121
  --rls-danger-color-500: rgba(255, 44, 44, 1);
90
- --rls-danger-color-300: rgba(255, 157, 157, 1);
91
- --rls-danger-color-100: rgba(255, 223, 223, 1);
92
- --rls-danger-skeleton-500: rgba(200, 13, 13, 0.5);
93
- --rls-danger-skeleton-300: rgba(200, 13, 13, 0.25);
94
- --rls-danger-skeleton-100: rgba(200, 13, 13, 0.1);
95
122
  --rls-danger-shadow-500: rgba(255, 44, 44, 0.24);
96
- --rls-danger-backdrop-500: rgba(136, 20, 20, 0.8);
123
+ --rls-danger-color-400: rgba(255, 157, 157, 1);
124
+ --rls-danger-color-300: rgba(255, 197, 197, 1);
125
+ --rls-danger-color-200: rgba(255, 223, 223, 1);
126
+ --rls-danger-color-100: rgba(255, 241, 241, 1);
127
+ --rls-danger-gradient-700: linear-gradient(
128
+ 180deg,
129
+ var(--rls-danger-color-700) 0%,
130
+ var(--rls-danger-color-900) 100%
131
+ );
97
132
  --rls-danger-gradient-500: linear-gradient(
98
133
  180deg,
99
- rgb(255, 44, 44) 0%,
100
- rgb(200, 13, 13) 100%
134
+ var(--rls-danger-color-500) 0%,
135
+ var(--rls-danger-color-700) 100%
101
136
  );
102
- --rls-amaizing-color-900: rgb(63, 19, 63, 1);
103
- --rls-amaizing-color-700: rgb(142, 58, 145, 1);
137
+ --rls-amaizing-color-900: rgba(63, 19, 63, 1);
138
+ --rls-amaizing-backdrop-900: rgba(63, 19, 63, 0.8);
139
+ --rls-amaizing-color-700: rgba(118, 49, 119, 1);
140
+ --rls-amaizing-skeleton-500: rgba(118, 49, 119, 0.5);
141
+ --rls-amaizing-skeleton-300: rgba(118, 49, 119, 0.25);
142
+ --rls-amaizing-skeleton-100: rgba(118, 49, 119, 0.1);
104
143
  --rls-amaizing-color-500: rgba(170, 73, 176, 1);
105
- --rls-amaizing-color-300: rgba(217, 147, 223, 1);
106
- --rls-amaizing-color-100: rgba(240, 217, 245, 1);
107
- --rls-amaizing-skeleton-500: rgba(142, 58, 145, 0.5);
108
- --rls-amaizing-skeleton-300: rgba(142, 58, 145, 0.25);
109
- --rls-amaizing-skeleton-100: rgba(142, 58, 145, 0.1);
110
144
  --rls-amaizing-shadow-500: rgba(170, 73, 176, 0.24);
111
- --rls-amaizing-backdrop-500: rgba(63, 19, 63, 0.8);
145
+ --rls-amaizing-color-400: rgba(231, 187, 236, 1);
146
+ --rls-amaizing-color-300: rgba(240, 217, 245, 1);
147
+ --rls-amaizing-color-200: rgba(248, 237, 250, 1);
148
+ --rls-amaizing-color-100: rgba(252, 246, 253, 1);
149
+ --rls-amaizing-gradient-700: linear-gradient(
150
+ 180deg,
151
+ var(--rls-amaizing-color-700) 0%,
152
+ var(--rls-amaizing-color-900) 100%
153
+ );
112
154
  --rls-amaizing-gradient-500: linear-gradient(
113
155
  180deg,
114
- rgb(170, 73, 176) 0%,
115
- rgb(142, 58, 145) 100%
156
+ var(--rls-amaizing-color-500) 0%,
157
+ var(--rls-amaizing-color-700) 100%
116
158
  );
117
- --rls-smartness-color-900: rgba(93, 57, 49, 1);
118
- --rls-smartness-color-700: rgba(140, 83, 66, 1);
159
+ --rls-smartness-color-900: rgba(50, 24, 22, 1);
160
+ --rls-smartness-backdrop-900: rgba(50, 24, 22, 0.8);
161
+ --rls-smartness-color-700: rgba(131, 69, 58, 1);
162
+ --rls-smartness-skeleton-500: rgba(131, 69, 58, 0.5);
163
+ --rls-smartness-skeleton-300: rgba(131, 69, 58, 0.25);
164
+ --rls-smartness-skeleton-100: rgba(131, 69, 58, 0.1);
119
165
  --rls-smartness-color-500: rgba(182, 121, 89, 1);
120
- --rls-smartness-color-300: rgba(219, 193, 172, 1);
121
- --rls-smartness-color-100: rgb(243, 234, 225, 1);
122
- --rls-smartness-skeleton-500: rgba(140, 83, 66, 0.5);
123
- --rls-smartness-skeleton-300: rgba(140, 83, 66, 0.25);
124
- --rls-smartness-skeleton-100: rgba(140, 83, 66, 0.1);
125
166
  --rls-smartness-shadow-500: rgba(182, 121, 89, 0.24);
126
- --rls-smartness-backdrop-500: rgba(93, 57, 49, 0.8);
167
+ --rls-smartness-color-400: rgba(201, 163, 128, 1);
168
+ --rls-smartness-color-300: rgba(220, 196, 171, 1);
169
+ --rls-smartness-color-200: rgba(238, 226, 215, 1);
170
+ --rls-smartness-color-100: rgba(249, 246, 241, 1);
171
+ --rls-smartness-gradient-700: linear-gradient(
172
+ 180deg,
173
+ var(--rls-smartness-color-700) 0%,
174
+ var(--rls-smartness-color-900) 100%
175
+ );
127
176
  --rls-smartness-gradient-500: linear-gradient(
128
177
  180deg,
129
- rgb(182, 121, 89) 0%,
130
- rgb(140, 83, 66) 100%
178
+ var(--rls-smartness-color-500) 0%,
179
+ var(--rls-smartness-color-700) 100%
131
180
  );
132
- --rls-obsidian-color-900: rgba(58, 50, 45, 1);
133
- --rls-obsidian-color-700: rgba(97, 84, 71, 1);
181
+ --rls-obsidian-color-900: rgba(41, 34, 31, 1);
182
+ --rls-obsidian-backdrop-900: rgba(41, 34, 31, 0.8);
183
+ --rls-obsidian-color-700: rgba(98, 83, 70, 1);
184
+ --rls-obsidian-skeleton-500: rgba(98, 83, 70, 0.5);
185
+ --rls-obsidian-skeleton-300: rgba(98, 83, 70, 0.25);
186
+ --rls-obsidian-skeleton-100: rgba(98, 83, 70, 0.1);
134
187
  --rls-obsidian-color-500: rgba(141, 127, 101, 1);
135
- --rls-obsidian-color-300: rgb(178, 170, 146, 1);
136
- --rls-obsidian-color-100: rgb(230, 228, 219, 1);
137
- --rls-obsidian-skeleton-500: rgba(97, 84, 71, 0.5);
138
- --rls-obsidian-skeleton-300: rgba(97, 84, 71, 0.25);
139
- --rls-obsidian-skeleton-100: rgba(97, 84, 71, 0.1);
140
188
  --rls-obsidian-shadow-500: rgba(141, 127, 101, 0.24);
141
- --rls-obsidian-backdrop-500: rgba(58, 50, 45, 0.8);
189
+ --rls-obsidian-color-400: rgba(178, 170, 146, 1);
190
+ --rls-obsidian-color-300: rgba(206, 202, 186, 1);
191
+ --rls-obsidian-color-200: rgba(230, 228, 219, 1);
192
+ --rls-obsidian-color-100: rgba(245, 245, 241, 1);
193
+ --rls-obsidian-gradient-700: linear-gradient(
194
+ 180deg,
195
+ var(--rls-obsidian-color-700) 0%,
196
+ var(--rls-obsidian-color-900) 100%
197
+ );
142
198
  --rls-obsidian-gradient-500: linear-gradient(
143
199
  180deg,
144
- rgb(141, 127, 101) 0%,
145
- rgb(97, 84, 71) 100%
200
+ var(--rls-obsidian-color-500) 0%,
201
+ var(--rls-obsidian-color-700) 100%
146
202
  );
147
203
  }
148
204
 
@@ -1243,14 +1299,20 @@
1243
1299
  --rls-theme-color-900: var(--rls-standard-color-900);
1244
1300
  --rls-theme-color-700: var(--rls-standard-color-700);
1245
1301
  --rls-theme-color-500: var(--rls-standard-color-500);
1302
+ --rls-theme-color-400: var(--rls-standard-color-400);
1246
1303
  --rls-theme-color-300: var(--rls-standard-color-300);
1304
+ --rls-theme-color-200: var(--rls-standard-color-200);
1247
1305
  --rls-theme-color-100: var(--rls-standard-color-100);
1306
+ --rls-theme-font-900: var(--rls-standard-color-100);
1307
+ --rls-theme-font-500: var(--rls-standard-color-100);
1308
+ --rls-theme-font-100: var(--rls-standard-color-900);
1248
1309
  --rls-theme-skeleton-500: var(--rls-standard-skeleton-500);
1249
1310
  --rls-theme-skeleton-300: var(--rls-standard-skeleton-300);
1250
1311
  --rls-theme-skeleton-100: var(--rls-standard-skeleton-100);
1251
1312
  --rls-theme-shadow-500: var(--rls-standard-shadow-500);
1252
- --rls-theme-backdrop-500: var(--rls-standard-backdrop-500);
1313
+ --rls-theme-backdrop-900: var(--rls-standard-backdrop-900);
1253
1314
  --rls-theme-gradient-500: var(--rls-standard-gradient-500);
1315
+ --rls-theme-gradient-700: var(--rls-standard-gradient-500);
1254
1316
  --rls-theme-border-1-900: var(--rls-border-1) solid
1255
1317
  var(--rls-standard-color-900);
1256
1318
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1287,14 +1349,20 @@
1287
1349
  --rls-theme-color-900: var(--rls-success-color-900);
1288
1350
  --rls-theme-color-700: var(--rls-success-color-700);
1289
1351
  --rls-theme-color-500: var(--rls-success-color-500);
1352
+ --rls-theme-color-400: var(--rls-success-color-400);
1290
1353
  --rls-theme-color-300: var(--rls-success-color-300);
1354
+ --rls-theme-color-200: var(--rls-success-color-200);
1291
1355
  --rls-theme-color-100: var(--rls-success-color-100);
1356
+ --rls-theme-font-900: var(--rls-success-color-100);
1357
+ --rls-theme-font-500: var(--rls-success-color-100);
1358
+ --rls-theme-font-100: var(--rls-success-color-900);
1292
1359
  --rls-theme-skeleton-500: var(--rls-success-skeleton-500);
1293
1360
  --rls-theme-skeleton-300: var(--rls-success-skeleton-300);
1294
1361
  --rls-theme-skeleton-100: var(--rls-success-skeleton-100);
1295
1362
  --rls-theme-shadow-500: var(--rls-success-shadow-500);
1296
- --rls-theme-backdrop-500: var(--rls-success-backdrop-500);
1363
+ --rls-theme-backdrop-900: var(--rls-success-backdrop-900);
1297
1364
  --rls-theme-gradient-500: var(--rls-success-gradient-500);
1365
+ --rls-theme-gradient-700: var(--rls-success-gradient-500);
1298
1366
  --rls-theme-border-1-900: var(--rls-border-1) solid
1299
1367
  var(--rls-success-color-900);
1300
1368
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1331,14 +1399,20 @@
1331
1399
  --rls-theme-color-900: var(--rls-info-color-900);
1332
1400
  --rls-theme-color-700: var(--rls-info-color-700);
1333
1401
  --rls-theme-color-500: var(--rls-info-color-500);
1402
+ --rls-theme-color-400: var(--rls-info-color-400);
1334
1403
  --rls-theme-color-300: var(--rls-info-color-300);
1404
+ --rls-theme-color-200: var(--rls-info-color-200);
1335
1405
  --rls-theme-color-100: var(--rls-info-color-100);
1406
+ --rls-theme-font-900: var(--rls-info-color-100);
1407
+ --rls-theme-font-500: var(--rls-info-color-100);
1408
+ --rls-theme-font-100: var(--rls-info-color-900);
1336
1409
  --rls-theme-skeleton-500: var(--rls-info-skeleton-500);
1337
1410
  --rls-theme-skeleton-300: var(--rls-info-skeleton-300);
1338
1411
  --rls-theme-skeleton-100: var(--rls-info-skeleton-100);
1339
1412
  --rls-theme-shadow-500: var(--rls-info-shadow-500);
1340
- --rls-theme-backdrop-500: var(--rls-info-backdrop-500);
1413
+ --rls-theme-backdrop-900: var(--rls-info-backdrop-900);
1341
1414
  --rls-theme-gradient-500: var(--rls-info-gradient-500);
1415
+ --rls-theme-gradient-700: var(--rls-info-gradient-500);
1342
1416
  --rls-theme-border-1-900: var(--rls-border-1) solid var(--rls-info-color-900);
1343
1417
  --rls-theme-border-2-900: var(--rls-border-2) solid var(--rls-info-color-900);
1344
1418
  --rls-theme-border-4-900: var(--rls-border-4) solid var(--rls-info-color-900);
@@ -1360,14 +1434,20 @@
1360
1434
  --rls-theme-color-900: var(--rls-warning-color-900);
1361
1435
  --rls-theme-color-700: var(--rls-warning-color-700);
1362
1436
  --rls-theme-color-500: var(--rls-warning-color-500);
1437
+ --rls-theme-color-400: var(--rls-warning-color-400);
1363
1438
  --rls-theme-color-300: var(--rls-warning-color-300);
1439
+ --rls-theme-color-200: var(--rls-warning-color-200);
1364
1440
  --rls-theme-color-100: var(--rls-warning-color-100);
1441
+ --rls-theme-font-900: var(--rls-warning-color-100);
1442
+ --rls-theme-font-500: var(--rls-warning-color-100);
1443
+ --rls-theme-font-100: var(--rls-warning-color-900);
1365
1444
  --rls-theme-skeleton-500: var(--rls-warning-skeleton-500);
1366
1445
  --rls-theme-skeleton-300: var(--rls-warning-skeleton-300);
1367
1446
  --rls-theme-skeleton-100: var(--rls-warning-skeleton-100);
1368
1447
  --rls-theme-shadow-500: var(--rls-warning-shadow-500);
1369
- --rls-theme-backdrop-500: var(--rls-warning-backdrop-500);
1448
+ --rls-theme-backdrop-900: var(--rls-warning-backdrop-900);
1370
1449
  --rls-theme-gradient-500: var(--rls-warning-gradient-500);
1450
+ --rls-theme-gradient-700: var(--rls-warning-gradient-500);
1371
1451
  --rls-theme-border-1-900: var(--rls-border-1) solid
1372
1452
  var(--rls-warning-color-900);
1373
1453
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1404,14 +1484,20 @@
1404
1484
  --rls-theme-color-900: var(--rls-danger-color-900);
1405
1485
  --rls-theme-color-700: var(--rls-danger-color-700);
1406
1486
  --rls-theme-color-500: var(--rls-danger-color-500);
1487
+ --rls-theme-color-400: var(--rls-danger-color-400);
1407
1488
  --rls-theme-color-300: var(--rls-danger-color-300);
1489
+ --rls-theme-color-200: var(--rls-danger-color-200);
1408
1490
  --rls-theme-color-100: var(--rls-danger-color-100);
1491
+ --rls-theme-font-900: var(--rls-danger-color-100);
1492
+ --rls-theme-font-500: var(--rls-danger-color-100);
1493
+ --rls-theme-font-100: var(--rls-danger-color-900);
1409
1494
  --rls-theme-skeleton-500: var(--rls-danger-skeleton-500);
1410
1495
  --rls-theme-skeleton-300: var(--rls-danger-skeleton-300);
1411
1496
  --rls-theme-skeleton-100: var(--rls-danger-skeleton-100);
1412
1497
  --rls-theme-shadow-500: var(--rls-danger-shadow-500);
1413
- --rls-theme-backdrop-500: var(--rls-danger-backdrop-500);
1498
+ --rls-theme-backdrop-900: var(--rls-danger-backdrop-900);
1414
1499
  --rls-theme-gradient-500: var(--rls-danger-gradient-500);
1500
+ --rls-theme-gradient-700: var(--rls-danger-gradient-500);
1415
1501
  --rls-theme-border-1-900: var(--rls-border-1) solid
1416
1502
  var(--rls-danger-color-900);
1417
1503
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1448,14 +1534,20 @@
1448
1534
  --rls-theme-color-900: var(--rls-amaizing-color-900);
1449
1535
  --rls-theme-color-700: var(--rls-amaizing-color-700);
1450
1536
  --rls-theme-color-500: var(--rls-amaizing-color-500);
1537
+ --rls-theme-color-400: var(--rls-amaizing-color-400);
1451
1538
  --rls-theme-color-300: var(--rls-amaizing-color-300);
1539
+ --rls-theme-color-200: var(--rls-amaizing-color-200);
1452
1540
  --rls-theme-color-100: var(--rls-amaizing-color-100);
1541
+ --rls-theme-font-900: var(--rls-amaizing-color-100);
1542
+ --rls-theme-font-500: var(--rls-amaizing-color-100);
1543
+ --rls-theme-font-100: var(--rls-amaizing-color-900);
1453
1544
  --rls-theme-skeleton-500: var(--rls-amaizing-skeleton-500);
1454
1545
  --rls-theme-skeleton-300: var(--rls-amaizing-skeleton-300);
1455
1546
  --rls-theme-skeleton-100: var(--rls-amaizing-skeleton-100);
1456
1547
  --rls-theme-shadow-500: var(--rls-amaizing-shadow-500);
1457
- --rls-theme-backdrop-500: var(--rls-amaizing-backdrop-500);
1548
+ --rls-theme-backdrop-900: var(--rls-amaizing-backdrop-900);
1458
1549
  --rls-theme-gradient-500: var(--rls-amaizing-gradient-500);
1550
+ --rls-theme-gradient-700: var(--rls-amaizing-gradient-500);
1459
1551
  --rls-theme-border-1-900: var(--rls-border-1) solid
1460
1552
  var(--rls-amaizing-color-900);
1461
1553
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1492,14 +1584,20 @@
1492
1584
  --rls-theme-color-900: var(--rls-smartness-color-900);
1493
1585
  --rls-theme-color-700: var(--rls-smartness-color-700);
1494
1586
  --rls-theme-color-500: var(--rls-smartness-color-500);
1587
+ --rls-theme-color-400: var(--rls-smartness-color-400);
1495
1588
  --rls-theme-color-300: var(--rls-smartness-color-300);
1589
+ --rls-theme-color-200: var(--rls-smartness-color-200);
1496
1590
  --rls-theme-color-100: var(--rls-smartness-color-100);
1591
+ --rls-theme-font-900: var(--rls-smartness-color-100);
1592
+ --rls-theme-font-500: var(--rls-smartness-color-100);
1593
+ --rls-theme-font-100: var(--rls-smartness-color-900);
1497
1594
  --rls-theme-skeleton-500: var(--rls-smartness-skeleton-500);
1498
1595
  --rls-theme-skeleton-300: var(--rls-smartness-skeleton-300);
1499
1596
  --rls-theme-skeleton-100: var(--rls-smartness-skeleton-100);
1500
1597
  --rls-theme-shadow-500: var(--rls-smartness-shadow-500);
1501
- --rls-theme-backdrop-500: var(--rls-smartness-backdrop-500);
1598
+ --rls-theme-backdrop-900: var(--rls-smartness-backdrop-900);
1502
1599
  --rls-theme-gradient-500: var(--rls-smartness-gradient-500);
1600
+ --rls-theme-gradient-700: var(--rls-smartness-gradient-500);
1503
1601
  --rls-theme-border-1-900: var(--rls-border-1) solid
1504
1602
  var(--rls-smartness-color-900);
1505
1603
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1536,14 +1634,20 @@
1536
1634
  --rls-theme-color-900: var(--rls-obsidian-color-900);
1537
1635
  --rls-theme-color-700: var(--rls-obsidian-color-700);
1538
1636
  --rls-theme-color-500: var(--rls-obsidian-color-500);
1637
+ --rls-theme-color-400: var(--rls-obsidian-color-400);
1539
1638
  --rls-theme-color-300: var(--rls-obsidian-color-300);
1639
+ --rls-theme-color-200: var(--rls-obsidian-color-200);
1540
1640
  --rls-theme-color-100: var(--rls-obsidian-color-100);
1641
+ --rls-theme-font-900: var(--rls-obsidian-color-100);
1642
+ --rls-theme-font-500: var(--rls-obsidian-color-100);
1643
+ --rls-theme-font-100: var(--rls-obsidian-color-900);
1541
1644
  --rls-theme-skeleton-500: var(--rls-obsidian-skeleton-500);
1542
1645
  --rls-theme-skeleton-300: var(--rls-obsidian-skeleton-300);
1543
1646
  --rls-theme-skeleton-100: var(--rls-obsidian-skeleton-100);
1544
1647
  --rls-theme-shadow-500: var(--rls-obsidian-shadow-500);
1545
- --rls-theme-backdrop-500: var(--rls-obsidian-backdrop-500);
1648
+ --rls-theme-backdrop-900: var(--rls-obsidian-backdrop-900);
1546
1649
  --rls-theme-gradient-500: var(--rls-obsidian-gradient-500);
1650
+ --rls-theme-gradient-700: var(--rls-obsidian-gradient-500);
1547
1651
  --rls-theme-border-1-900: var(--rls-border-1) solid
1548
1652
  var(--rls-obsidian-color-900);
1549
1653
  --rls-theme-border-2-900: var(--rls-border-2) solid
@@ -1591,6 +1695,7 @@
1591
1695
  :root {
1592
1696
  --rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
1593
1697
  'Segoe UI', Roboto, Helvetica;
1698
+ --rlc-app-body-background: var(--rls-app-background-500);
1594
1699
  }
1595
1700
 
1596
1701
  html {
@@ -1606,9 +1711,13 @@ body {
1606
1711
  right: 0rem;
1607
1712
  margin: 0rem;
1608
1713
  padding: 0rem;
1609
- -webkit-tap-highlight-color: transparent;
1610
1714
  color: var(--rls-app-color-500);
1611
- background: var(--rls-app-background-300);
1715
+ background: var(--rlc-app-body-background);
1716
+ -webkit-tap-highlight-color: transparent;
1717
+ }
1718
+ body.rls-app-body {
1719
+ --rlc-boxfield-body-background: rgba(248, 248, 248, 1);
1720
+ --rlc-app-body-background: var(--rls-app-background-300);
1612
1721
  }
1613
1722
 
1614
1723
  div {
@@ -3908,6 +4017,9 @@ button {
3908
4017
  }
3909
4018
 
3910
4019
  :root {
4020
+ --rlc-app-header-background: var(--rls-app-background-100);
4021
+ --rlc-app-navbar-background: var(--rls-app-background-100);
4022
+ --rlc-app-content-background: var(--rls-app-background-500);
3911
4023
  --rlc-action-color: var(--rls-app-color-300);
3912
4024
  --rlc-action-ripple-color: var(--rlc-action-color);
3913
4025
  --rlc-action-ripple-dimension: var(--rls-sizing-x18);
@@ -3923,7 +4035,8 @@ button {
3923
4035
  --rlc-ballot-subtitle-text-overflow: initial;
3924
4036
  --rlc-ballot-subtitle-white-space: initial;
3925
4037
  --rlc-boxfield-body-padding: 0rem;
3926
- --rlc-boxfield-body-border: var(--rls-theme-border-1-100);
4038
+ --rlc-boxfield-body-background: rgba(255, 255, 255, 1);
4039
+ --rlc-boxfield-body-border: var(--rls-app-border-1-100);
3927
4040
  --rlc-boxfield-body-shadow: none;
3928
4041
  --rlc-boxfield-label-font-color: var(--rls-app-color-300);
3929
4042
  --rlc-breadcrumb-height: var(--rls-sizing-x18);
@@ -3941,9 +4054,9 @@ button {
3941
4054
  --rlc-icon-height: var(--rls-sizing-x12);
3942
4055
  --rlc-icon-color: inherit;
3943
4056
  --rlc-input-font-color: var(--rls-app-color-500);
3944
- --rls-input-font-size: var(--rls-input-font-size);
4057
+ --rlc-input-font-size: var(--rls-input-font-size);
3945
4058
  --rlc-input-text-align: left;
3946
- --rls-input-letter-spacing: var(--rls-input-letter-spacing);
4059
+ --rlc-input-letter-spacing: var(--rls-input-letter-spacing);
3947
4060
  --rlc-input-height: var(--rls-sizing-x12);
3948
4061
  --rlc-input-parent-padding: 0rem;
3949
4062
  --rlc-poster-height: var(--rls-sizing-x18);
@@ -3987,7 +4100,7 @@ button {
3987
4100
  height: var(--rls-sizing-x28);
3988
4101
  box-sizing: border-box;
3989
4102
  z-index: var(--rls-z-index-8);
3990
- background: var(--rls-app-background-100);
4103
+ background: var(--rlc-app-header-background);
3991
4104
  }
3992
4105
  .rls-app__header + .rls-app__page,
3993
4106
  .rls-app__header + .rls-app__content {
@@ -4002,6 +4115,7 @@ button {
4002
4115
  padding: 0rem;
4003
4116
  overflow: auto;
4004
4117
  box-sizing: border-box;
4118
+ background: var(--rlc-app-content-background);
4005
4119
  }
4006
4120
 
4007
4121
  .rls-app__page {
@@ -4023,7 +4137,7 @@ button {
4023
4137
  overflow: auto;
4024
4138
  box-sizing: border-box;
4025
4139
  border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
4026
- background: var(--rls-app-background-100);
4140
+ background: var(--rlc-app-navbar-background);
4027
4141
  }
4028
4142
  .rls-app__page__nav + .rls-app__page__content {
4029
4143
  --rlc-snackbar-left: calc(50% + 80rem);
@@ -4053,9 +4167,8 @@ button {
4053
4167
  }
4054
4168
 
4055
4169
  .rls-box-field {
4056
- --pvt-body-background: rgba(248, 248, 248, 1);
4057
- --pvt-body-opacity: 1;
4058
4170
  --pvt-label-opacity: 1;
4171
+ --pvt-body-opacity: 1;
4059
4172
  position: relative;
4060
4173
  display: flex;
4061
4174
  flex-direction: column;
@@ -4065,10 +4178,10 @@ button {
4065
4178
  transition: height 160ms 0ms var(--rls-standard-curve);
4066
4179
  }
4067
4180
  .rls-box-field--focused {
4068
- --pvt-body-background: var(--rls-app-background-500);
4181
+ --rlc-boxfield-body-background: var(--rls-app-background-500);
4069
4182
  --rlc-boxfield-body-border: var(--rls-theme-border-1-500);
4070
4183
  --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
4071
- --rlc-boxfield-label-font-color: var(--rls-app-color-500);
4184
+ --rlc-boxfield-label-font-color: var(--rls-theme-color-500);
4072
4185
  }
4073
4186
  .rls-box-field--error {
4074
4187
  --rlc-boxfield-body-border: var(--rls-border-1) solid
@@ -4077,7 +4190,7 @@ button {
4077
4190
  --rlc-boxfield-label-font-color: var(--rls-danger-color-500);
4078
4191
  }
4079
4192
  .rls-box-field--disabled {
4080
- --pvt-body-background: var(--rls-app-background-500);
4193
+ --rlc-boxfield-body-background: var(--rls-app-background-500);
4081
4194
  --pvt-body-opacity: 0.75;
4082
4195
  --pvt-label-opacity: 0.5;
4083
4196
  }
@@ -4106,7 +4219,7 @@ button {
4106
4219
  overflow: hidden;
4107
4220
  opacity: var(--pvt-body-opacity);
4108
4221
  border-radius: var(--rls-sizing-x2);
4109
- background: var(--pvt-body-background);
4222
+ background: var(--rlc-boxfield-body-background);
4110
4223
  padding: var(--rlc-boxfield-body-padding);
4111
4224
  border: var(--rlc-boxfield-body-border);
4112
4225
  box-shadow: var(--rlc-boxfield-body-shadow);
@@ -4444,9 +4557,9 @@ button {
4444
4557
  outline: none;
4445
4558
  background: transparent;
4446
4559
  color: var(--rlc-input-font-color);
4447
- font-size: var(--rls-input-font-size);
4560
+ font-size: var(--rlc-input-font-size);
4448
4561
  font-weight: var(--rls-font-weight-medium);
4449
- letter-spacing: var(--rls-input-letter-spacing);
4562
+ letter-spacing: var(--rlc-input-letter-spacing);
4450
4563
  }
4451
4564
  .rls-list-field__control::placeholder {
4452
4565
  color: var(--rls-app-color-100);
@@ -4580,7 +4693,7 @@ button {
4580
4693
  opacity: var(--pvt-backdrop-opacity);
4581
4694
  z-index: var(--rls-z-index-2);
4582
4695
  will-change: opacity;
4583
- background: var(--rls-theme-backdrop-500);
4696
+ background: var(--rls-theme-backdrop-900);
4584
4697
  backdrop-filter: blur(2px);
4585
4698
  transition:
4586
4699
  opacity 120ms 0ms var(--rls-deceleration-curve),