@rolster/styles-foundations 2.6.15 → 2.6.16

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 (8) hide show
  1. package/dist/styles.css +54 -31
  2. package/dist/styles.css.map +1 -1
  3. package/dist/styles.min.css +17 -7
  4. package/dist/styles.rtl.css +54 -31
  5. package/dist/styles.rtl.min.css +17 -7
  6. package/package.json +1 -1
  7. package/scss/components/data-table.scss +37 -13
  8. package/scss/foundations/colors.scss +26 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/styles-foundations",
3
- "version": "2.6.15",
3
+ "version": "2.6.16",
4
4
  "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
5
5
  "sass": "scss/styles.scss",
6
6
  "style": "dist/styles.css",
package/scss/components/data-table.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Datatable Component
2
- // v2.6.6
2
+ // v2.6.7
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 16/Dic/2025
6
+ // Updated: 22/Dic/2025
7
7
 
8
8
  @mixin datatable_cell_vars() {
9
9
  --rlc-field-box-body-background: transparent;
@@ -126,16 +126,39 @@
126
126
  --pvt-datatable-table-overflow: initial;
127
127
  --pvt-datatable-body-overflow: initial;
128
128
 
129
+ --pvt-datatable-border-radius: var(
130
+ --rlc-datatable-border-radius,
131
+ var(--rls-sizing-x4)
132
+ );
133
+
129
134
  --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
130
135
  --pvt-datatable-header-background: var(
131
136
  --rlc-datatable-header-background,
132
137
  var(--rls-app-color-100)
133
138
  );
139
+ --pvt-datatable-header-border: var(
140
+ --rlc-datatable-header-border,
141
+ var(--rls-app-border-1-200)
142
+ );
134
143
 
135
- --pvt-datatable-record-background: var(
136
- --rlc-datatable-record-background,
144
+ --pvt-datatable-row-background: var(
145
+ --rlc-datatable-row-background,
137
146
  transparent
138
147
  );
148
+ --pvt-datatable-row-border: var(
149
+ --rlc-datatable-row-border,
150
+ var(--rls-app-border-1-200)
151
+ );
152
+
153
+ --pvt-datatable-summary-background: var(
154
+ --rlc-datatable-summary-background,
155
+ var(--rls-app-color-100)
156
+ );
157
+
158
+ --pvt-datatable-footer-background: var(
159
+ --rlc-datatable-footer-background,
160
+ var(--rls-app-color-100)
161
+ );
139
162
 
140
163
  --pvt-datatable-floating-background: var(--rls-app-color-100);
141
164
 
@@ -199,7 +222,8 @@
199
222
  padding: var(--pvt-datatable-padding-component);
200
223
  box-sizing: border-box;
201
224
  background: var(--pvt-datatable-header-background);
202
- border-radius: var(--rls-sizing-x4);
225
+ border: var(--pvt-datatable-header-border);
226
+ border-radius: var(--pvt-datatable-border-radius);
203
227
  }
204
228
 
205
229
  &__table {
@@ -230,8 +254,8 @@
230
254
  padding: 0rem var(--rls-sizing-x6);
231
255
  box-sizing: border-box;
232
256
  background: var(--pvt-datatable-header-background);
233
- border: var(--rls-app-border-1-200);
234
- border-radius: var(--rls-sizing-x4);
257
+ border: var(--pvt-datatable-header-border);
258
+ border-radius: var(--pvt-datatable-border-radius);
235
259
 
236
260
  .rls-poster {
237
261
  width: calc(100% - var(--rls-sizing-x2));
@@ -288,9 +312,9 @@
288
312
  column-gap: var(--rls-sizing-x6);
289
313
  padding: 0rem var(--rls-sizing-x6);
290
314
  box-sizing: border-box;
291
- background: var(--pvt-datatable-record-background);
292
- border: var(--rls-app-border-1-200);
293
- border-radius: var(--rls-sizing-x4);
315
+ background: var(--pvt-datatable-row-background);
316
+ border: var(--pvt-datatable-row-border);
317
+ border-radius: var(--pvt-datatable-border-radius);
294
318
 
295
319
  &--success {
296
320
  --pvt-datatable-floating-background: var(--rls-success-color-100);
@@ -402,7 +426,7 @@
402
426
  }
403
427
 
404
428
  &__summary {
405
- --pvt-datatable-record-background: var(--rls-app-color-100);
429
+ --pvt-datatable-row-background: var(--pvt-datatable-summary-background);
406
430
 
407
431
  flex: 0 0 auto;
408
432
  padding-right: var(--pvt-datatable-header-padding-right);
@@ -410,13 +434,13 @@
410
434
  }
411
435
 
412
436
  &__footer {
413
- --pvt-datatable-record-background: var(--rls-app-color-100);
437
+ --pvt-datatable-row-background: var(--pvt-datatable-footer-background);
414
438
 
415
439
  position: relative;
416
440
  flex: 0 0 auto;
417
441
  width: 100%;
442
+ overflow: hidden;
418
443
  padding: var(--pvt-datatable-padding-component);
419
444
  box-sizing: border-box;
420
- overflow: hidden;
421
445
  }
422
446
  }
package/scss/foundations/colors.scss CHANGED
@@ -1,30 +1,32 @@
1
1
  // Rolster Technology Colors Foundations
2
- // v2.6.7
2
+ // v2.6.8
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 03/Mar/2022
6
- // Updated: 16/Dic/2025
6
+ // Updated: 22/Dic/2025
7
7
 
8
8
  @use 'helpers' as helpers;
9
9
 
10
10
  body {
11
- --rls-app-color-900: var(--rls-project-color-900, #26303b);
11
+ --rls-app-color-950: var(--rls-project-color-950, #26303b);
12
12
 
13
- --rls-app-color-800: var(--rls-project-color-800, #323755);
13
+ --rls-app-color-900: var(--rls-project-color-900, #32384e);
14
14
 
15
- --rls-app-color-700: var(--rls-project-color-700, #464b60);
15
+ --rls-app-color-800: var(--rls-project-color-800, #3f4661);
16
16
 
17
- --rls-app-color-600: var(--rls-project-color-600, #616e99);
17
+ --rls-app-color-700: var(--rls-project-color-700, #515a7d);
18
+
19
+ --rls-app-color-600: var(--rls-project-color-600, #67739f);
18
20
 
19
21
  --rls-app-color-500: var(--rls-project-color-500, #828fbf);
20
22
 
21
- --rls-app-color-400: var(--rls-project-color-400, #bdc0dc);
23
+ --rls-app-color-400: var(--rls-project-color-400, #a5b0e8);
22
24
 
23
- --rls-app-color-300: var(--rls-project-color-300, #d6d9f0);
25
+ --rls-app-color-300: var(--rls-project-color-300, #c2cbf5);
24
26
 
25
- --rls-app-color-200: var(--rls-project-color-200, #e7eaf7);
27
+ --rls-app-color-200: var(--rls-project-color-200, #e0e5ff);
26
28
 
27
- --rls-app-color-100: var(--rls-project-color-100, #f7f9ff);
29
+ --rls-app-color-100: var(--rls-project-color-100, #f5f7ff);
28
30
 
29
31
  --rls-app-color-050: var(--rls-project-color-050, #ffffff);
30
32
 
@@ -39,8 +41,8 @@ body {
39
41
  #409cf0,
40
42
  #82bdf7,
41
43
  #bddbfa,
42
- #e1edfd,
43
- #f1f7fe
44
+ #ddebfc,
45
+ #f0f7fe
44
46
  );
45
47
 
46
48
  @include helpers.rolster-theme(
@@ -269,24 +271,26 @@ body {
269
271
  );
270
272
 
271
273
  &[app-theme='dark'] {
272
- --rls-app-color-050: var(--rls-project-color-050, #28323d);
274
+ --rls-app-color-050: var(--rls-project-color-050, #26303b);
275
+
276
+ --rls-app-color-100: var(--rls-project-color-100, #32384e);
273
277
 
274
- --rls-app-color-100: var(--rls-project-color-100, #343957);
278
+ --rls-app-color-200: var(--rls-project-color-200, #3f4661);
275
279
 
276
- --rls-app-color-200: var(--rls-project-color-200, #484d6b);
280
+ --rls-app-color-300: var(--rls-project-color-300, #515a7d);
277
281
 
278
- --rls-app-color-300: var(--rls-project-color-300, #626f9b);
282
+ --rls-app-color-400: var(--rls-project-color-400, #67739f);
279
283
 
280
- --rls-app-color-400: var(--rls-project-color-400, #808dbe);
284
+ --rls-app-color-500: var(--rls-project-color-500, #828fbf);
281
285
 
282
- --rls-app-color-500: var(--rls-project-color-500, #bdc0dc);
286
+ --rls-app-color-600: var(--rls-project-color-600, #a5b0e8);
283
287
 
284
- --rls-app-color-600: var(--rls-project-color-600, #d6d9f0);
288
+ --rls-app-color-700: var(--rls-project-color-700, #c2cbf5);
285
289
 
286
- --rls-app-color-700: var(--rls-project-color-700, #e5e8f5);
290
+ --rls-app-color-800: var(--rls-project-color-800, #e0e5ff);
287
291
 
288
- --rls-app-color-800: var(--rls-project-color-800, #f4f7ff);
292
+ --rls-app-color-900: var(--rls-project-color-900, #f5f7ff);
289
293
 
290
- --rls-app-color-900: var(--rls-project-color-900, #ffffff);
294
+ --rls-app-color-950: var(--rls-project-color-950, #ffffff);
291
295
  }
292
296
  }