@rolster/styles-foundations 2.6.0 → 2.6.2

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/styles.css +75 -65
  2. package/dist/styles.css.map +1 -1
  3. package/dist/styles.min.css +9 -5
  4. package/dist/styles.rtl.css +75 -65
  5. package/dist/styles.rtl.min.css +9 -5
  6. package/package.json +1 -1
  7. package/scss/components/app.scss +9 -4
  8. package/scss/components/data-table.scss +7 -6
  9. package/scss/components/field-box.scss +7 -2
  10. package/scss/components/field-list.scss +1 -1
  11. package/scss/foundations/colors.scss +33 -33
package/dist/styles.rtl.css CHANGED
@@ -75,24 +75,24 @@ body {
75
75
  --rls-app-color-200: var(--rls-project-color-200, #e5e8f5);
76
76
  --rls-app-color-100: var(--rls-project-color-100, #f4f7ff);
77
77
  --rls-app-color-050: var(--rls-project-color-050, #ffffff);
78
- --rls-primary-color-950: #0d275e;
79
- --rls-primary-color-900: #0c409c;
80
- --rls-primary-backdrop-900: rgba(12, 64, 156, 0.8);
81
- --rls-primary-color-800: #064dd9;
82
- --rls-primary-color-700: #0058f8;
83
- --rls-primary-skeleton-500: rgba(0, 88, 248, 0.5);
84
- --rls-primary-skeleton-400: rgba(0, 88, 248, 0.325);
85
- --rls-primary-skeleton-300: rgba(0, 88, 248, 0.25);
86
- --rls-primary-skeleton-200: rgba(0, 88, 248, 0.175);
87
- --rls-primary-skeleton-100: rgba(0, 88, 248, 0.1);
88
- --rls-primary-color-600: #0471ff;
89
- --rls-primary-color-500: #1b91ff;
90
- --rls-primary-shadow-500: rgba(27, 145, 255, 0.24);
91
- --rls-primary-color-400: #46b5ff;
92
- --rls-primary-color-300: #81d1ff;
93
- --rls-primary-color-200: #b4e2ff;
94
- --rls-primary-color-100: #d5edff;
95
- --rls-primary-color-050: #ecf8ff;
78
+ --rls-primary-color-950: #0b2446;
79
+ --rls-primary-color-900: #103a6a;
80
+ --rls-primary-backdrop-900: rgba(16, 58, 106, 0.8);
81
+ --rls-primary-color-800: #0c4380;
82
+ --rls-primary-color-700: #094e9b;
83
+ --rls-primary-skeleton-500: rgba(9, 78, 155, 0.5);
84
+ --rls-primary-skeleton-400: rgba(9, 78, 155, 0.325);
85
+ --rls-primary-skeleton-300: rgba(9, 78, 155, 0.25);
86
+ --rls-primary-skeleton-200: rgba(9, 78, 155, 0.175);
87
+ --rls-primary-skeleton-100: rgba(9, 78, 155, 0.1);
88
+ --rls-primary-color-600: #0a63bf;
89
+ --rls-primary-color-500: #1780e0;
90
+ --rls-primary-shadow-500: rgba(23, 128, 224, 0.24);
91
+ --rls-primary-color-400: #409cf0;
92
+ --rls-primary-color-300: #82bdf7;
93
+ --rls-primary-color-200: #bddbfa;
94
+ --rls-primary-color-100: #e1edfd;
95
+ --rls-primary-color-050: #f1f7fe;
96
96
  --rls-primary-gradient-700: linear-gradient(
97
97
  180deg,
98
98
  var(--rls-primary-color-700) 15%,
@@ -118,24 +118,24 @@ body {
118
118
  var(--rls-primary-color-300) 15%,
119
119
  var(--rls-primary-color-400) 85%
120
120
  );
121
- --rls-secondary-color-950: #003426;
122
- --rls-secondary-color-900: #005c42;
123
- --rls-secondary-backdrop-900: rgba(0, 92, 66, 0.8);
124
- --rls-secondary-color-800: #00714e;
125
- --rls-secondary-color-700: #008f60;
126
- --rls-secondary-skeleton-500: rgba(0, 143, 96, 0.5);
127
- --rls-secondary-skeleton-400: rgba(0, 143, 96, 0.325);
128
- --rls-secondary-skeleton-300: rgba(0, 143, 96, 0.25);
129
- --rls-secondary-skeleton-200: rgba(0, 143, 96, 0.175);
130
- --rls-secondary-skeleton-100: rgba(0, 143, 96, 0.1);
131
- --rls-secondary-color-600: #00b373;
132
- --rls-secondary-color-500: #00da8b;
133
- --rls-secondary-shadow-500: rgba(0, 218, 139, 0.24);
134
- --rls-secondary-color-400: #0cdd90;
135
- --rls-secondary-color-300: #56ffbb;
136
- --rls-secondary-color-200: #98ffd1;
137
- --rls-secondary-color-100: #c9ffe5;
138
- --rls-secondary-color-050: #e9fff5;
121
+ --rls-secondary-color-950: #0e2525;
122
+ --rls-secondary-color-900: #20413f;
123
+ --rls-secondary-backdrop-900: rgba(32, 65, 63, 0.8);
124
+ --rls-secondary-color-800: #224d4b;
125
+ --rls-secondary-color-700: #265f5b;
126
+ --rls-secondary-skeleton-500: rgba(38, 95, 91, 0.5);
127
+ --rls-secondary-skeleton-400: rgba(38, 95, 91, 0.325);
128
+ --rls-secondary-skeleton-300: rgba(38, 95, 91, 0.25);
129
+ --rls-secondary-skeleton-200: rgba(38, 95, 91, 0.175);
130
+ --rls-secondary-skeleton-100: rgba(38, 95, 91, 0.1);
131
+ --rls-secondary-color-600: #2b7671;
132
+ --rls-secondary-color-500: #39938b;
133
+ --rls-secondary-shadow-500: rgba(57, 147, 139, 0.24);
134
+ --rls-secondary-color-400: #53aea5;
135
+ --rls-secondary-color-300: #7ecac0;
136
+ --rls-secondary-color-200: #aee1d8;
137
+ --rls-secondary-color-100: #d7f0ec;
138
+ --rls-secondary-color-050: #f3faf8;
139
139
  --rls-secondary-gradient-700: linear-gradient(
140
140
  180deg,
141
141
  var(--rls-secondary-color-700) 15%,
@@ -161,24 +161,24 @@ body {
161
161
  var(--rls-secondary-color-300) 15%,
162
162
  var(--rls-secondary-color-400) 85%
163
163
  );
164
- --rls-tertiary-color-950: #440d0b;
165
- --rls-tertiary-color-900: #7d221f;
166
- --rls-tertiary-backdrop-900: rgba(125, 34, 31, 0.8);
167
- --rls-tertiary-color-800: #97211d;
168
- --rls-tertiary-color-700: #b6241f;
169
- --rls-tertiary-skeleton-500: rgba(182, 36, 31, 0.5);
170
- --rls-tertiary-skeleton-400: rgba(182, 36, 31, 0.325);
171
- --rls-tertiary-skeleton-300: rgba(182, 36, 31, 0.25);
172
- --rls-tertiary-skeleton-200: rgba(182, 36, 31, 0.175);
173
- --rls-tertiary-skeleton-100: rgba(182, 36, 31, 0.1);
174
- --rls-tertiary-color-600: #d92f29;
175
- --rls-tertiary-color-500: #ed5752;
176
- --rls-tertiary-shadow-500: rgba(237, 87, 82, 0.24);
177
- --rls-tertiary-color-400: #f67773;
178
- --rls-tertiary-color-300: #faaaa7;
179
- --rls-tertiary-color-200: #fdcdcb;
180
- --rls-tertiary-color-100: #fde4e3;
181
- --rls-tertiary-color-050: #fef2f2;
164
+ --rls-tertiary-color-950: #460404;
165
+ --rls-tertiary-color-900: #82100c;
166
+ --rls-tertiary-backdrop-900: rgba(130, 16, 12, 0.8);
167
+ --rls-tertiary-color-800: #a1100b;
168
+ --rls-tertiary-color-700: #cc1102;
169
+ --rls-tertiary-skeleton-500: rgba(204, 17, 2, 0.5);
170
+ --rls-tertiary-skeleton-400: rgba(204, 17, 2, 0.325);
171
+ --rls-tertiary-skeleton-300: rgba(204, 17, 2, 0.25);
172
+ --rls-tertiary-skeleton-200: rgba(204, 17, 2, 0.175);
173
+ --rls-tertiary-skeleton-100: rgba(204, 17, 2, 0.1);
174
+ --rls-tertiary-color-600: #ff2101;
175
+ --rls-tertiary-color-500: #ff3c0a;
176
+ --rls-tertiary-shadow-500: rgba(255, 60, 10, 0.24);
177
+ --rls-tertiary-color-400: #ff6532;
178
+ --rls-tertiary-color-300: #ff9a6d;
179
+ --rls-tertiary-color-200: #ffc4a5;
180
+ --rls-tertiary-color-100: #ffe3d3;
181
+ --rls-tertiary-color-050: #fff3ec;
182
182
  --rls-tertiary-gradient-700: linear-gradient(
183
183
  180deg,
184
184
  var(--rls-tertiary-color-700) 15%,
@@ -5609,6 +5609,7 @@ button {
5609
5609
  height: 100%;
5610
5610
  margin: 0rem;
5611
5611
  padding: 0rem;
5612
+ background: var(--rlc-app-navbar-background, var(--rls-theme-color-200));
5612
5613
  transition: width 280ms var(--rls-acceleration-curve);
5613
5614
  }
5614
5615
  .rls-app__page__nav + .rls-app__page__content {
@@ -5619,11 +5620,15 @@ button {
5619
5620
  position: relative;
5620
5621
  width: 100%;
5621
5622
  height: 100%;
5622
- background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
5623
- border-radius: 0rem 0rem 0rem var(--rls-sizing-x16);
5623
+ background: var(
5624
+ --rlc-app-navbar-content-background,
5625
+ rgba(255, 255, 255, 0.84)
5626
+ );
5627
+ backdrop-filter: blur(2px);
5624
5628
  overflow-x: hidden;
5625
5629
  overflow-y: auto;
5626
5630
  box-sizing: border-box;
5631
+ border-left: var(--rls-app-border-1-200);
5627
5632
  }
5628
5633
  .rls-app__page__content {
5629
5634
  display: flex;
@@ -5739,7 +5744,7 @@ button {
5739
5744
  padding: 0rem var(--rls-sizing-x6);
5740
5745
  box-sizing: border-box;
5741
5746
  background: var(--pvt-datatable-header-background);
5742
- border: var(--rls-app-border-1-300);
5747
+ border: var(--rls-app-border-1-200);
5743
5748
  border-radius: var(--rls-sizing-x4);
5744
5749
  }
5745
5750
  .rls-datatable__header .rls-poster {
@@ -5811,7 +5816,7 @@ button {
5811
5816
  padding: 0rem var(--rls-sizing-x6);
5812
5817
  box-sizing: border-box;
5813
5818
  background: var(--pvt-datatable-record-background);
5814
- border: var(--rls-app-border-1-300);
5819
+ border: var(--rls-app-border-1-200);
5815
5820
  border-radius: var(--rls-sizing-x4);
5816
5821
  }
5817
5822
  .rls-datatable__subheader--success,
@@ -5819,28 +5824,28 @@ button {
5819
5824
  .rls-datatable__totals--success {
5820
5825
  --pvt-datatable-floating-background: var(--rls-success-color-100);
5821
5826
  background: var(--rls-success-color-050);
5822
- border: var(--rls-success-border-1-300);
5827
+ border: var(--rls-success-border-1-200);
5823
5828
  }
5824
5829
  .rls-datatable__subheader--info,
5825
5830
  .rls-datatable__record--info,
5826
5831
  .rls-datatable__totals--info {
5827
5832
  --pvt-datatable-floating-background: var(--rls-info-color-100);
5828
5833
  background: var(--rls-info-color-050);
5829
- border: var(--rls-info-border-1-300);
5834
+ border: var(--rls-info-border-1-200);
5830
5835
  }
5831
5836
  .rls-datatable__subheader--warning,
5832
5837
  .rls-datatable__record--warning,
5833
5838
  .rls-datatable__totals--warning {
5834
5839
  --pvt-datatable-floating-background: var(--rls-warning-color-100);
5835
5840
  background: var(--rls-warning-color-050);
5836
- border: var(--rls-warning-border-1-300);
5841
+ border: var(--rls-warning-border-1-200);
5837
5842
  }
5838
5843
  .rls-datatable__subheader--error,
5839
5844
  .rls-datatable__record--error,
5840
5845
  .rls-datatable__totals--error {
5841
5846
  --pvt-datatable-floating-background: var(--rls-danger-color-100);
5842
5847
  background: var(--rls-danger-color-050);
5843
- border: var(--rls-danger-border-1-300);
5848
+ border: var(--rls-danger-border-1-200);
5844
5849
  }
5845
5850
  .rls-datatable__subheader--contained,
5846
5851
  .rls-datatable__record--contained,
@@ -5858,6 +5863,7 @@ button {
5858
5863
  .rls-datatable__data {
5859
5864
  --rlc-field-box-body-background: transparent;
5860
5865
  --rlc-field-box-body-background-focused: transparent;
5866
+ --rlc-field-box-body-background-disabled: transparent;
5861
5867
  --rlc-field-box-body-padding: 0rem;
5862
5868
  --rlc-field-box-body-border: none;
5863
5869
  --rlc-field-box-body-border-focused: none;
@@ -6004,6 +6010,10 @@ button {
6004
6010
  --rlc-field-box-body-background,
6005
6011
  var(--rls-app-color-050)
6006
6012
  );
6013
+ --pvt-body-background-disabled: var(
6014
+ --rlc-field-box-body-background-disabled,
6015
+ var(--rls-app-color-100)
6016
+ );
6007
6017
  --pvt-body-border: var(
6008
6018
  --rlc-field-box-body-border,
6009
6019
  var(--rls-app-border-1-300)
@@ -6055,7 +6065,7 @@ button {
6055
6065
  .rls-field-box--disabled {
6056
6066
  --pvt-body-opacity: 0.75;
6057
6067
  --pvt-label-opacity: 0.5;
6058
- --pvt-body-background: var(--rls-app-color-100);
6068
+ --pvt-body-background: var(--pvt-body-background-disabled);
6059
6069
  --pvt-body-border: var(--pvt-body-border-disabled);
6060
6070
  }
6061
6071
  .rls-field-box--readonly {
@@ -6088,7 +6098,7 @@ button {
6088
6098
  overflow: hidden;
6089
6099
  background: var(--pvt-body-background);
6090
6100
  opacity: var(--pvt-body-opacity);
6091
- border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-x4));
6101
+ border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-x2));
6092
6102
  padding: var(--rlc-field-box-body-padding, 0rem);
6093
6103
  box-sizing: border-box;
6094
6104
  border: var(--pvt-body-border);
@@ -6130,7 +6140,7 @@ button {
6130
6140
  --pvt-list-transform: none;
6131
6141
  --pvt-list-body-component-display: none;
6132
6142
  --pvt-list-body-height: 0rem;
6133
- --pvt-list-body-max-height: 100%;
6143
+ --pvt-list-body-max-height: 160rem;
6134
6144
  --pvt-list-body-border: var(--rls-theme-border-1-500);
6135
6145
  --pvt-list-component-padding: 0rem var(--rls-sizing-x4);
6136
6146
  --pvt-backdrop-opacity: 0;