@rolster/styles-foundations 1.1.10 → 1.1.11

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/rolster-styles.css +69 -62
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +69 -62
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_rolster-components.scss +1 -0
  7. package/scss/components/_data-table.scss +10 -4
  8. package/scss/foundations/_colors-foundations.scss +64 -62
package/dist/rolster-styles.css CHANGED
@@ -39,80 +39,81 @@
39
39
  rgb(33, 122, 214) 0%,
40
40
  rgb(17, 75, 147) 100%
41
41
  );
42
- --color-success-900: rgba(16, 81, 70, 1);
43
- --color-success-700: rgba(10, 123, 104, 1);
44
- --color-success-500: rgba(12, 192, 157, 1);
45
- --color-success-300: rgba(87, 241, 204, 1);
46
- --color-success-100: rgba(202, 253, 238, 1);
47
- --skeleton-success-500: rgba(10, 123, 104, 0.5);
48
- --skeleton-success-300: rgba(10, 123, 104, 0.25);
49
- --skeleton-success-100: rgba(10, 123, 104, 0.1);
50
- --box-shadow-success-500: rgba(12, 192, 157, 0.24);
51
- --backdrop-success-500: rgba(16, 81, 70, 0.8);
42
+ --color-success-900: rgba(4, 80, 56, 1);
43
+ --color-success-700: rgba(0, 124, 82, 1);
44
+ --color-success-500: rgba(10, 191, 121, 1);
45
+ --color-success-300: rgba(106, 235, 177, 1);
46
+ --color-success-100: rgba(208, 251, 227, 1);
47
+ --skeleton-success-500: rgba(0, 124, 82, 0.5);
48
+ --skeleton-success-300: rgba(0, 124, 82, 0.25);
49
+ --skeleton-success-100: rgba(0, 124, 82, 0.1);
50
+ --box-shadow-success-500: rgba(10, 191, 121, 0.24);
51
+ --backdrop-success-500: rgba(4, 80, 56, 0.8);
52
52
  --gradient-success-500: linear-gradient(
53
53
  180deg,
54
- rgb(12, 192, 157) 0%,
55
- rgb(10, 123, 104) 100%
54
+ rgb(10, 191, 121) 0%,
55
+ rgb(0, 124, 82) 100%
56
56
  );
57
- --color-info-900: rgba(10, 77, 112, 1);
58
- --color-info-700: rgba(0, 110, 164, 1);
59
- --color-info-500: rgba(24, 182, 246, 1);
60
- --color-info-300: rgba(122, 215, 255, 1);
61
- --color-info-100: rgba(218, 243, 253, 1);
62
- --skeleton-info-500: rgba(0, 110, 164, 0.5);
63
- --skeleton-info-300: rgba(0, 110, 164, 0.25);
64
- --skeleton-info-100: rgba(0, 110, 164, 0.1);
65
- --box-shadow-info-500: rgba(24, 182, 246, 0.24);
66
- --backdrop-info-500: rgba(10, 77, 112, 0.8);
57
+ --color-info-900: rgba(7, 70, 115, 1);
58
+ --color-info-700: rgba(0, 100, 170, 1);
59
+ --color-info-500: rgba(2, 159, 245, 1);
60
+ --color-info-300: rgba(118, 207, 255, 1);
61
+ --color-info-100: rgba(222, 241, 255, 1);
62
+ --skeleton-info-500: rgba(0, 100, 170, 0.5);
63
+ --skeleton-info-300: rgba(0, 100, 170, 0.25);
64
+ --skeleton-info-100: rgba(0, 100, 170, 0.1);
65
+ --box-shadow-info-500: rgba(2, 159, 245, 0.24);
66
+ --backdrop-info-500: rgba(7, 70, 115, 0.8);
67
67
  --gradient-info-500: linear-gradient(
68
68
  180deg,
69
- rgb(24, 182, 246) 0%,
70
- rgb(0, 110, 164) 100%
69
+ rgb(2, 159, 245) 0%,
70
+ rgb(0, 100, 170) 100%
71
71
  );
72
- --color-happy-900: rgb(63, 3, 104, 1);
73
- --color-happy-700: rgb(113, 27, 174, 1);
74
- --color-happy-500: rgba(154, 43, 242, 1);
75
- --color-happy-300: rgb(197, 127, 255, 1);
76
- --color-happy-100: rgb(243, 219, 238, 1);
77
- --skeleton-happy-500: rgba(113, 27, 174, 0.5);
78
- --skeleton-happy-300: rgba(113, 27, 174, 0.25);
79
- --skeleton-happy-100: rgba(113, 27, 174, 0.1);
80
- --box-shadow-happy-500: rgba(154, 43, 242, 0.24);
81
- --backdrop-happy-500: rgba(63, 3, 104, 0.8);
72
+ --color-happy-900: rgb(63, 19, 63, 1);
73
+ --color-happy-700: rgb(142, 58, 145, 1);
74
+ --color-happy-500: rgba(170, 73, 176, 1);
75
+ --color-happy-300: rgba(217, 147, 223, 1);
76
+ --color-happy-100: rgba(240, 217, 245, 1);
77
+ --skeleton-happy-500: rgba(142, 58, 145, 0.5);
78
+ --skeleton-happy-300: rgba(142, 58, 145, 0.25);
79
+ --skeleton-happy-100: rgba(142, 58, 145, 0.1);
80
+ --box-shadow-happy-500: rgba(170, 73, 176, 0.24);
81
+ --backdrop-happy-500: rgba(63, 19, 63, 0.8);
82
82
  --gradient-happy-500: linear-gradient(
83
83
  180deg,
84
- rgb(154, 43, 242) 0%,
85
- rgb(113, 27, 174) 100%
84
+ rgb(170, 73, 176) 0%,
85
+ rgb(142, 58, 145) 100%
86
86
  );
87
- --color-warning-900: rgb(70, 27, 2, 1);
88
- --color-warning-700: rgba(164, 96, 4, 1);
89
- --color-warning-500: rgb(239, 178, 3, 1);
90
- --color-warning-300: rgb(255, 196, 28, 1);
91
- --color-warning-100: rgb(255, 249, 194, 1);
92
- --skeleton-warning-500: rgba(164, 96, 4, 0.5);
93
- --skeleton-warning-300: rgba(164, 96, 4, 0.25);
94
- --skeleton-warning-100: rgba(164, 96, 4, 0.1);
95
- --box-shadow-warning-500: rgba(239, 178, 3, 0.24);
96
- --backdrop-warning-500: rgba(70, 27, 2, 0.8);
87
+ --color-warning-900: rgb(116, 68, 15, 1);
88
+ --color-warning-700: rgba(166, 107, 2, 1);
89
+ --color-warning-500: rgb(255, 206, 0, 1);
90
+ --color-warning-300: rgba(255, 238, 65, 1);
91
+ --color-warning-100: rgba(255, 254, 193, 1);
92
+ --skeleton-warning-500: rgba(166, 107, 2, 0.5);
93
+ --skeleton-warning-300: rgba(166, 107, 2, 0.25);
94
+ --skeleton-warning-100: rgba(166, 107, 2, 0.1);
95
+ --box-shadow-warning-500: rgba(255, 206, 0, 0.24);
96
+ --backdrop-warning-500: rgba(116, 68, 15, 0.8);
97
97
  --gradient-warning-500: linear-gradient(
98
98
  180deg,
99
- rgb(239, 178, 3) 0%,
100
- rgb(164, 96, 4) 100%
99
+ rgb(255, 206, 0) 0%,
100
+ rgb(166, 107, 2) 100%
101
101
  );
102
- --color-danger-900: rgba(130, 26, 26, 1);
103
- --color-danger-700: rgba(190, 23, 23, 1);
104
- --color-danger-500: rgba(244, 60, 60, 1);
105
- --color-danger-300: rgba(255, 162, 162, 1);
106
- --color-danger-100: rgba(254, 242, 242, 1);
107
- --skeleton-danger-500: rgba(190, 23, 23, 0.5);
108
- --skeleton-danger-300: rgba(190, 23, 23, 0.25);
109
- --skeleton-danger-100: rgba(190, 23, 23, 0.1);
110
- --box-shadow-danger-500: rgba(244, 60, 60, 0.24);
111
- --backdrop-danger-500: rgba(130, 26, 26, 0.8);
102
+ color: #881414;
103
+ --color-danger-900: rgba(136, 20, 20, 1);
104
+ --color-danger-700: rgba(200, 13, 13, 1);
105
+ --color-danger-500: rgba(255, 44, 44, 1);
106
+ --color-danger-300: rgba(255, 157, 157, 1);
107
+ --color-danger-100: rgba(255, 223, 223, 1);
108
+ --skeleton-danger-500: rgba(200, 13, 13, 0.5);
109
+ --skeleton-danger-300: rgba(200, 13, 13, 0.25);
110
+ --skeleton-danger-100: rgba(200, 13, 13, 0.1);
111
+ --box-shadow-danger-500: rgba(255, 44, 44, 0.24);
112
+ --backdrop-danger-500: rgba(136, 20, 20, 0.8);
112
113
  --gradient-danger-500: linear-gradient(
113
114
  180deg,
114
- rgb(244, 60, 60) 0%,
115
- rgb(190, 23, 23) 100%
115
+ rgb(255, 44, 44) 0%,
116
+ rgb(200, 13, 13) 100%
116
117
  );
117
118
  --color-coffee-900: rgba(93, 57, 49, 1);
118
119
  --color-coffee-700: rgba(140, 83, 66, 1);
@@ -3722,6 +3723,7 @@ button {
3722
3723
  --rls-card-content-padding: var(--sizing-x8);
3723
3724
  --rls-datatable-letter-spacing: 0.0625em;
3724
3725
  --rls-datatable-font-size: 7rem;
3726
+ --rls-datatable-width-scroll: var(--sizing-x12);
3725
3727
  --rls-form-footer-justify-content: end;
3726
3728
  --rls-icon-font-size: var(--sizing-x12);
3727
3729
  --rls-icon-width: var(--sizing-x12);
@@ -3913,11 +3915,15 @@ button {
3913
3915
  .rls-datatable {
3914
3916
  --rls-input-font-size: var(--rls-datatable-font-size);
3915
3917
  --rls-input-letter-spacing: var(--rls-datatable-letter-spacing);
3918
+ --pvt-header-padding-right: var(--sizing-x6);
3916
3919
  position: relative;
3917
3920
  width: 100%;
3918
3921
  border-radius: var(--sizing-x4);
3919
3922
  box-sizing: border-box;
3920
3923
  }
3924
+ .rls-datatable--scrolleable {
3925
+ --pvt-header-padding-right: var(--sizing-x12);
3926
+ }
3921
3927
  .rls-datatable > table {
3922
3928
  display: flex;
3923
3929
  flex-direction: column;
@@ -3931,7 +3937,8 @@ button {
3931
3937
  .rls-datatable__header {
3932
3938
  display: flex;
3933
3939
  column-gap: var(--sizing-x4);
3934
- padding: 0rem var(--sizing-x6);
3940
+ padding-left: var(--sizing-x6);
3941
+ padding-right: var(--pvt-header-padding-right);
3935
3942
  box-sizing: border-box;
3936
3943
  }
3937
3944
  .rls-datatable__title {
@@ -4084,7 +4091,7 @@ button {
4084
4091
  display: flex;
4085
4092
  width: calc(100% - var(--sizing-x2));
4086
4093
  height: 100%;
4087
- margin: var(--sizing-x3) 0rem;
4094
+ margin: var(--sizing-x3) var(--sizing-x2);
4088
4095
  justify-content: center;
4089
4096
  align-items: center;
4090
4097
  overflow: hidden;