@rolster/styles-foundations 2.6.15 → 2.6.17

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 +72 -49
  2. package/dist/styles.css.map +1 -1
  3. package/dist/styles.min.css +17 -7
  4. package/dist/styles.rtl.css +72 -49
  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 +37 -33
package/dist/styles.rtl.css CHANGED
@@ -89,15 +89,16 @@ body {
89
89
  --rls-sharp-curve: cubic-bezier(0.4, 0, 0.6, 1);
90
90
  }
91
91
  body {
92
- --rls-app-color-900: var(--rls-project-color-900, #26303b);
93
- --rls-app-color-800: var(--rls-project-color-800, #323755);
94
- --rls-app-color-700: var(--rls-project-color-700, #464b60);
95
- --rls-app-color-600: var(--rls-project-color-600, #616e99);
92
+ --rls-app-color-950: var(--rls-project-color-950, #26303b);
93
+ --rls-app-color-900: var(--rls-project-color-900, #32384e);
94
+ --rls-app-color-800: var(--rls-project-color-800, #3f4661);
95
+ --rls-app-color-700: var(--rls-project-color-700, #515a7d);
96
+ --rls-app-color-600: var(--rls-project-color-600, #67739f);
96
97
  --rls-app-color-500: var(--rls-project-color-500, #828fbf);
97
- --rls-app-color-400: var(--rls-project-color-400, #bdc0dc);
98
- --rls-app-color-300: var(--rls-project-color-300, #d6d9f0);
99
- --rls-app-color-200: var(--rls-project-color-200, #e7eaf7);
100
- --rls-app-color-100: var(--rls-project-color-100, #f7f9ff);
98
+ --rls-app-color-400: var(--rls-project-color-400, #a5b0e8);
99
+ --rls-app-color-300: var(--rls-project-color-300, #c2cbf5);
100
+ --rls-app-color-200: var(--rls-project-color-200, #e0e5ff);
101
+ --rls-app-color-100: var(--rls-project-color-100, #f5f7ff);
101
102
  --rls-app-color-050: var(--rls-project-color-050, #ffffff);
102
103
  --rls-primary-color-950: #0b2446;
103
104
  --rls-primary-color-900: #103a6a;
@@ -116,8 +117,8 @@ body {
116
117
  --rls-primary-color-400: #409cf0;
117
118
  --rls-primary-color-300: #82bdf7;
118
119
  --rls-primary-color-200: #bddbfa;
119
- --rls-primary-color-100: #e1edfd;
120
- --rls-primary-color-050: #f1f7fe;
120
+ --rls-primary-color-100: #ddebfc;
121
+ --rls-primary-color-050: #f0f7fe;
121
122
  --rls-primary-gradient-700: linear-gradient(
122
123
  180deg,
123
124
  var(--rls-primary-color-700) 15%,
@@ -143,26 +144,26 @@ body {
143
144
  var(--rls-primary-color-300) 15%,
144
145
  var(--rls-primary-color-400) 85%
145
146
  );
146
- --rls-secondary-color-950: #0e2525;
147
- --rls-secondary-color-900: #20413f;
148
- --rls-secondary-backdrop-900: rgba(32, 65, 63, 0.8);
149
- --rls-secondary-color-800: #224d4b;
150
- --rls-secondary-color-700: #265f5b;
151
- --rls-secondary-skeleton-500: rgba(38, 95, 91, 0.5);
152
- --rls-secondary-skeleton-400: rgba(38, 95, 91, 0.325);
153
- --rls-secondary-skeleton-300: rgba(38, 95, 91, 0.25);
154
- --rls-secondary-skeleton-200: rgba(38, 95, 91, 0.175);
155
- --rls-secondary-skeleton-100: rgba(38, 95, 91, 0.1);
156
- --rls-secondary-color-600: #2b7671;
157
- --rls-secondary-color-500: #39938b;
158
- --rls-secondary-shadow-color-500: rgba(57, 147, 139, 0.24);
147
+ --rls-secondary-color-950: #00341d;
148
+ --rls-secondary-color-900: #0a5d37;
149
+ --rls-secondary-backdrop-900: rgba(10, 93, 55, 0.8);
150
+ --rls-secondary-color-800: #0a7140;
151
+ --rls-secondary-color-700: #04914e;
152
+ --rls-secondary-skeleton-500: rgba(4, 145, 78, 0.5);
153
+ --rls-secondary-skeleton-400: rgba(4, 145, 78, 0.325);
154
+ --rls-secondary-skeleton-300: rgba(4, 145, 78, 0.25);
155
+ --rls-secondary-skeleton-200: rgba(4, 145, 78, 0.175);
156
+ --rls-secondary-skeleton-100: rgba(4, 145, 78, 0.1);
157
+ --rls-secondary-color-600: #00bf63;
158
+ --rls-secondary-color-500: #09de77;
159
+ --rls-secondary-shadow-color-500: rgba(9, 222, 119, 0.24);
159
160
  --rls-secondary-shadow-500: 0px 0px 0px 3px
160
161
  var(--rls-secondary-shadow-color-500);
161
- --rls-secondary-color-400: #53aea5;
162
- --rls-secondary-color-300: #7ecac0;
163
- --rls-secondary-color-200: #aee1d8;
164
- --rls-secondary-color-100: #d7f0ec;
165
- --rls-secondary-color-050: #f3faf8;
162
+ --rls-secondary-color-400: #33f597;
163
+ --rls-secondary-color-300: #76ffbb;
164
+ --rls-secondary-color-200: #b2ffd9;
165
+ --rls-secondary-color-100: #d7ffeb;
166
+ --rls-secondary-color-050: #eefff6;
166
167
  --rls-secondary-gradient-700: linear-gradient(
167
168
  180deg,
168
169
  var(--rls-secondary-color-700) 15%,
@@ -811,16 +812,17 @@ body {
811
812
  );
812
813
  }
813
814
  body[app-theme='dark'] {
814
- --rls-app-color-050: var(--rls-project-color-050, #28323d);
815
- --rls-app-color-100: var(--rls-project-color-100, #343957);
816
- --rls-app-color-200: var(--rls-project-color-200, #484d6b);
817
- --rls-app-color-300: var(--rls-project-color-300, #626f9b);
818
- --rls-app-color-400: var(--rls-project-color-400, #808dbe);
819
- --rls-app-color-500: var(--rls-project-color-500, #bdc0dc);
820
- --rls-app-color-600: var(--rls-project-color-600, #d6d9f0);
821
- --rls-app-color-700: var(--rls-project-color-700, #e5e8f5);
822
- --rls-app-color-800: var(--rls-project-color-800, #f4f7ff);
823
- --rls-app-color-900: var(--rls-project-color-900, #ffffff);
815
+ --rls-app-color-050: var(--rls-project-color-050, #26303b);
816
+ --rls-app-color-100: var(--rls-project-color-100, #32384e);
817
+ --rls-app-color-200: var(--rls-project-color-200, #3f4661);
818
+ --rls-app-color-300: var(--rls-project-color-300, #515a7d);
819
+ --rls-app-color-400: var(--rls-project-color-400, #67739f);
820
+ --rls-app-color-500: var(--rls-project-color-500, #828fbf);
821
+ --rls-app-color-600: var(--rls-project-color-600, #a5b0e8);
822
+ --rls-app-color-700: var(--rls-project-color-700, #c2cbf5);
823
+ --rls-app-color-800: var(--rls-project-color-800, #e0e5ff);
824
+ --rls-app-color-900: var(--rls-project-color-900, #f5f7ff);
825
+ --rls-app-color-950: var(--rls-project-color-950, #ffffff);
824
826
  }
825
827
  body {
826
828
  --rls-app-border-1-transparent: var(--rls-border-1) solid transparent;
@@ -5818,15 +5820,35 @@ button {
5818
5820
  --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
5819
5821
  --pvt-datatable-table-overflow: initial;
5820
5822
  --pvt-datatable-body-overflow: initial;
5823
+ --pvt-datatable-border-radius: var(
5824
+ --rlc-datatable-border-radius,
5825
+ var(--rls-sizing-x4)
5826
+ );
5821
5827
  --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
5822
5828
  --pvt-datatable-header-background: var(
5823
5829
  --rlc-datatable-header-background,
5824
5830
  var(--rls-app-color-100)
5825
5831
  );
5826
- --pvt-datatable-record-background: var(
5827
- --rlc-datatable-record-background,
5832
+ --pvt-datatable-header-border: var(
5833
+ --rlc-datatable-header-border,
5834
+ var(--rls-app-border-1-200)
5835
+ );
5836
+ --pvt-datatable-row-background: var(
5837
+ --rlc-datatable-row-background,
5828
5838
  transparent
5829
5839
  );
5840
+ --pvt-datatable-row-border: var(
5841
+ --rlc-datatable-row-border,
5842
+ var(--rls-app-border-1-200)
5843
+ );
5844
+ --pvt-datatable-summary-background: var(
5845
+ --rlc-datatable-summary-background,
5846
+ var(--rls-app-color-100)
5847
+ );
5848
+ --pvt-datatable-footer-background: var(
5849
+ --rlc-datatable-footer-background,
5850
+ var(--rls-app-color-100)
5851
+ );
5830
5852
  --pvt-datatable-floating-background: var(--rls-app-color-100);
5831
5853
  --rlc-amount-font-size: var(--pvt-datatable-font-size);
5832
5854
  --rlc-amount-width: 100%;
@@ -5877,7 +5899,8 @@ button {
5877
5899
  padding: var(--pvt-datatable-padding-component);
5878
5900
  box-sizing: border-box;
5879
5901
  background: var(--pvt-datatable-header-background);
5880
- border-radius: var(--rls-sizing-x4);
5902
+ border: var(--pvt-datatable-header-border);
5903
+ border-radius: var(--pvt-datatable-border-radius);
5881
5904
  }
5882
5905
  .rls-datatable__table {
5883
5906
  display: flex;
@@ -5904,8 +5927,8 @@ button {
5904
5927
  padding: 0rem var(--rls-sizing-x6);
5905
5928
  box-sizing: border-box;
5906
5929
  background: var(--pvt-datatable-header-background);
5907
- border: var(--rls-app-border-1-200);
5908
- border-radius: var(--rls-sizing-x4);
5930
+ border: var(--pvt-datatable-header-border);
5931
+ border-radius: var(--pvt-datatable-border-radius);
5909
5932
  }
5910
5933
  .rls-datatable__header .rls-poster {
5911
5934
  width: calc(100% - var(--rls-sizing-x2));
@@ -5976,9 +5999,9 @@ button {
5976
5999
  column-gap: var(--rls-sizing-x6);
5977
6000
  padding: 0rem var(--rls-sizing-x6);
5978
6001
  box-sizing: border-box;
5979
- background: var(--pvt-datatable-record-background);
5980
- border: var(--rls-app-border-1-200);
5981
- border-radius: var(--rls-sizing-x4);
6002
+ background: var(--pvt-datatable-row-background);
6003
+ border: var(--pvt-datatable-row-border);
6004
+ border-radius: var(--pvt-datatable-border-radius);
5982
6005
  }
5983
6006
  .rls-datatable__subheader--success,
5984
6007
  .rls-datatable__record--success,
@@ -6155,19 +6178,19 @@ button {
6155
6178
  z-index: var(--rls-z-index-2);
6156
6179
  }
6157
6180
  .rls-datatable__summary {
6158
- --pvt-datatable-record-background: var(--rls-app-color-100);
6181
+ --pvt-datatable-row-background: var(--pvt-datatable-summary-background);
6159
6182
  flex: 0 0 auto;
6160
6183
  padding-left: var(--pvt-datatable-header-padding-right);
6161
6184
  box-sizing: border-box;
6162
6185
  }
6163
6186
  .rls-datatable__footer {
6164
- --pvt-datatable-record-background: var(--rls-app-color-100);
6187
+ --pvt-datatable-row-background: var(--pvt-datatable-footer-background);
6165
6188
  position: relative;
6166
6189
  flex: 0 0 auto;
6167
6190
  width: 100%;
6191
+ overflow: hidden;
6168
6192
  padding: var(--pvt-datatable-padding-component);
6169
6193
  box-sizing: border-box;
6170
- overflow: hidden;
6171
6194
  }
6172
6195
  .rls-field-box {
6173
6196
  --pvt-body-background: var(--rlc-field-box-body-background, transparent);