@rolster/styles-foundations 2.0.1 → 2.2.0

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/rolster-styles.css +208 -99
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +208 -99
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_rolster-components.scss +4 -3
  7. package/scss/components/_box-field.scss +5 -7
  8. package/scss/components/_list-field.scss +1 -1
  9. package/scss/foundations/_colors.foundation.scss +136 -114
  10. package/scss/foundations/_themes.foundation.scss +13 -1
  11. package/scss/utilities/_normalize.utility.scss +10 -4
package/scss/foundations/_colors.foundation.scss CHANGED
@@ -1,9 +1,31 @@
1
1
  // Rolster Technology Colors Foundations
2
- // v2.3.0
2
+ // v2.4.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 03/Mar/2022
6
- // Updated: 26/May/2024
6
+ // Updated: 02/Jun/2024
7
+
8
+ @mixin rolster-theme-900($theme, $r, $g, $b) {
9
+ --rls-#{$theme}-color-900: rgba(#{$r}, #{$g}, #{$b}, 1);
10
+
11
+ --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.8);
12
+ }
13
+
14
+ @mixin rolster-theme-700($theme, $r, $g, $b) {
15
+ --rls-#{$theme}-color-700: rgba(#{$r}, #{$g}, #{$b}, 1);
16
+
17
+ --rls-#{$theme}-skeleton-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
18
+
19
+ --rls-#{$theme}-skeleton-300: rgba(#{$r}, #{$g}, #{$b}, 0.25);
20
+
21
+ --rls-#{$theme}-skeleton-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
22
+ }
23
+
24
+ @mixin rolster-theme-500($theme, $r, $g, $b) {
25
+ --rls-#{$theme}-color-500: rgba(#{$r}, #{$g}, #{$b}, 1);
26
+
27
+ --rls-#{$theme}-shadow-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
28
+ }
7
29
 
8
30
  :root {
9
31
  --rls-dark-background-500: rgba(37, 38, 65, 1);
@@ -44,225 +66,225 @@
44
66
 
45
67
  // COLORS STANDARD
46
68
 
47
- --rls-standard-color-900: rgba(21, 56, 101, 1);
69
+ @include rolster-theme-900('standard', 20, 39, 61);
48
70
 
49
- --rls-standard-color-700: rgba(17, 75, 147, 1);
71
+ @include rolster-theme-700('standard', 32, 83, 136);
50
72
 
51
- --rls-standard-color-500: rgba(33, 122, 214, 1);
73
+ @include rolster-theme-500('standard', 53, 128, 194);
52
74
 
53
- --rls-standard-color-300: rgba(136, 186, 241, 1);
75
+ --rls-standard-color-400: rgba(148, 190, 229, 1);
54
76
 
55
- --rls-standard-color-100: rgba(227, 236, 251, 1);
77
+ --rls-standard-color-300: rgba(198, 219, 241, 1);
56
78
 
57
- --rls-standard-skeleton-500: rgba(17, 75, 147, 0.5);
79
+ --rls-standard-color-200: rgba(229, 238, 249, 1);
58
80
 
59
- --rls-standard-skeleton-300: rgba(17, 75, 147, 0.25);
81
+ --rls-standard-color-100: rgba(243, 247, 252, 1);
60
82
 
61
- --rls-standard-skeleton-100: rgba(17, 75, 147, 0.1);
62
-
63
- --rls-standard-shadow-500: rgba(33, 122, 214, 0.24);
64
-
65
- --rls-standard-backdrop-500: rgba(21, 56, 101, 0.8);
83
+ --rls-standard-gradient-700: linear-gradient(
84
+ 180deg,
85
+ var(--rls-standard-color-700) 0%,
86
+ var(--rls-standard-color-900) 100%
87
+ );
66
88
 
67
89
  --rls-standard-gradient-500: linear-gradient(
68
90
  180deg,
69
- rgb(33, 122, 214) 0%,
70
- rgb(17, 75, 147) 100%
91
+ var(--rls-standard-color-500) 0%,
92
+ var(--rls-standard-color-700) 100%
71
93
  );
72
94
 
73
95
  // COLORS SUCCESS
74
96
 
75
- --rls-success-color-900: rgba(4, 80, 56, 1);
76
-
77
- --rls-success-color-700: rgba(0, 124, 82, 1);
78
-
79
- --rls-success-color-500: rgba(10, 191, 121, 1);
97
+ @include rolster-theme-900('success', 1, 45, 33);
80
98
 
81
- --rls-success-color-300: rgba(106, 235, 177, 1);
99
+ @include rolster-theme-700('success', 0, 124, 82);
82
100
 
83
- --rls-success-color-100: rgba(208, 251, 227, 1);
101
+ @include rolster-theme-500('success', 10, 191, 121);
84
102
 
85
- --rls-success-skeleton-500: rgba(0, 124, 82, 0.5);
103
+ --rls-success-color-400: rgba(106, 235, 177, 1);
86
104
 
87
- --rls-success-skeleton-300: rgba(0, 124, 82, 0.25);
105
+ --rls-success-color-300: rgba(164, 246, 203, 1);
88
106
 
89
- --rls-success-skeleton-100: rgba(0, 124, 82, 0.1);
107
+ --rls-success-color-200: rgba(208, 251, 227, 1);
90
108
 
91
- --rls-success-shadow-500: rgba(10, 191, 121, 0.24);
109
+ --rls-success-color-100: rgba(235, 254, 244, 1);
92
110
 
93
- --rls-success-backdrop-500: rgba(4, 80, 56, 0.8);
111
+ --rls-success-gradient-700: linear-gradient(
112
+ 180deg,
113
+ var(--rls-success-color-700) 0%,
114
+ var(--rls-success-color-900) 100%
115
+ );
94
116
 
95
117
  --rls-success-gradient-500: linear-gradient(
96
118
  180deg,
97
- rgb(10, 191, 121) 0%,
98
- rgb(0, 124, 82) 100%
119
+ var(--rls-success-color-500) 0%,
120
+ var(--rls-success-color-700) 100%
99
121
  );
100
122
 
101
123
  // COLORS INFO
102
124
 
103
- --rls-info-color-900: rgba(7, 70, 115, 1);
104
-
105
- --rls-info-color-700: rgba(0, 100, 170, 1);
125
+ @include rolster-theme-900('info', 4, 45, 77);
106
126
 
107
- --rls-info-color-500: rgba(2, 159, 245, 1);
127
+ @include rolster-theme-700('info', 0, 101, 170);
108
128
 
109
- --rls-info-color-300: rgba(118, 207, 255, 1);
129
+ @include rolster-theme-500('info', 2, 159, 245);
110
130
 
111
- --rls-info-color-100: rgba(222, 241, 255, 1);
131
+ --rls-info-color-400: rgba(118, 207, 255, 1);
112
132
 
113
- --rls-info-skeleton-500: rgba(0, 100, 170, 0.5);
133
+ --rls-info-color-300: rgba(182, 228, 255, 1);
114
134
 
115
- --rls-info-skeleton-300: rgba(0, 100, 170, 0.25);
135
+ --rls-info-color-200: rgba(222, 241, 255, 1);
116
136
 
117
- --rls-info-skeleton-100: rgba(0, 100, 170, 0.1);
137
+ --rls-info-color-100: rgba(239, 248, 255, 1);
118
138
 
119
- --rls-info-shadow-500: rgba(2, 159, 245, 0.24);
120
-
121
- --rls-info-backdrop-500: rgba(7, 70, 115, 0.8);
139
+ --rls-info-gradient-700: linear-gradient(
140
+ 180deg,
141
+ var(--rls-info-color-700) 0%,
142
+ var(--rls-info-color-900) 100%
143
+ );
122
144
 
123
145
  --rls-info-gradient-500: linear-gradient(
124
146
  180deg,
125
- rgb(2, 159, 245) 0%,
126
- rgb(0, 100, 170) 100%
147
+ var(--rls-info-color-500) 0%,
148
+ var(--rls-info-color-700) 100%
127
149
  );
128
150
 
129
151
  // COLORS WARNING
130
152
 
131
- --rls-warning-color-900: rgb(116, 68, 15, 1);
132
-
133
- --rls-warning-color-700: rgba(166, 107, 2, 1);
134
-
135
- --rls-warning-color-500: rgb(255, 206, 0, 1);
153
+ @include rolster-theme-900('warning', 70, 27, 2);
136
154
 
137
- --rls-warning-color-300: rgba(255, 238, 65, 1);
155
+ @include rolster-theme-700('warning', 148, 64, 12);
138
156
 
139
- --rls-warning-color-100: rgba(255, 254, 193, 1);
157
+ @include rolster-theme-500('warning', 222, 123, 2);
140
158
 
141
- --rls-warning-skeleton-500: rgba(166, 107, 2, 0.5);
159
+ --rls-warning-color-400: rgba(255, 195, 32, 1);
142
160
 
143
- --rls-warning-skeleton-300: rgba(166, 107, 2, 0.25);
161
+ --rls-warning-color-300: rgba(255, 221, 103, 1);
144
162
 
145
- --rls-warning-skeleton-100: rgba(166, 107, 2, 0.1);
163
+ --rls-warning-color-200: rgba(255, 232, 136, 1);
146
164
 
147
- --rls-warning-shadow-500: rgba(255, 206, 0, 0.24);
165
+ --rls-warning-color-100: rgba(255, 245, 198, 1);
148
166
 
149
- --rls-warning-backdrop-500: rgba(116, 68, 15, 0.8);
167
+ --rls-warning-gradient-700: linear-gradient(
168
+ 180deg,
169
+ var(--rls-warning-color-700) 0%,
170
+ var(--rls-warning-color-900) 100%
171
+ );
150
172
 
151
173
  --rls-warning-gradient-500: linear-gradient(
152
174
  180deg,
153
- rgb(255, 206, 0) 0%,
154
- rgb(166, 107, 2) 100%
175
+ var(--rls-warning-color-500) 0%,
176
+ var(--rls-warning-color-700) 100%
155
177
  );
156
178
 
157
179
  // COLORS DANGER
158
180
 
159
- --rls-danger-color-900: rgba(136, 20, 20, 1);
160
-
161
- --rls-danger-color-700: rgba(200, 13, 13, 1);
181
+ @include rolster-theme-900('danger', 75, 4, 4);
162
182
 
163
- --rls-danger-color-500: rgba(255, 44, 44, 1);
183
+ @include rolster-theme-700('danger', 157, 23, 23);
164
184
 
165
- --rls-danger-color-300: rgba(255, 157, 157, 1);
185
+ @include rolster-theme-500('danger', 255, 44, 44);
166
186
 
167
- --rls-danger-color-100: rgba(255, 223, 223, 1);
187
+ --rls-danger-color-400: rgba(255, 157, 157, 1);
168
188
 
169
- --rls-danger-skeleton-500: rgba(200, 13, 13, 0.5);
189
+ --rls-danger-color-300: rgba(255, 197, 197, 1);
170
190
 
171
- --rls-danger-skeleton-300: rgba(200, 13, 13, 0.25);
191
+ --rls-danger-color-200: rgba(255, 223, 223, 1);
172
192
 
173
- --rls-danger-skeleton-100: rgba(200, 13, 13, 0.1);
193
+ --rls-danger-color-100: rgba(255, 241, 241, 1);
174
194
 
175
- --rls-danger-shadow-500: rgba(255, 44, 44, 0.24);
176
-
177
- --rls-danger-backdrop-500: rgba(136, 20, 20, 0.8);
195
+ --rls-danger-gradient-700: linear-gradient(
196
+ 180deg,
197
+ var(--rls-danger-color-700) 0%,
198
+ var(--rls-danger-color-900) 100%
199
+ );
178
200
 
179
201
  --rls-danger-gradient-500: linear-gradient(
180
202
  180deg,
181
- rgb(255, 44, 44) 0%,
182
- rgb(200, 13, 13) 100%
203
+ var(--rls-danger-color-500) 0%,
204
+ var(--rls-danger-color-700) 100%
183
205
  );
184
206
 
185
207
  // COLORS AMAIZING
186
208
 
187
- --rls-amaizing-color-900: rgb(63, 19, 63, 1);
188
-
189
- --rls-amaizing-color-700: rgb(142, 58, 145, 1);
190
-
191
- --rls-amaizing-color-500: rgba(170, 73, 176, 1);
209
+ @include rolster-theme-900('amaizing', 63, 19, 63);
192
210
 
193
- --rls-amaizing-color-300: rgba(217, 147, 223, 1);
211
+ @include rolster-theme-700('amaizing', 118, 49, 119);
194
212
 
195
- --rls-amaizing-color-100: rgba(240, 217, 245, 1);
213
+ @include rolster-theme-500('amaizing', 170, 73, 176);
196
214
 
197
- --rls-amaizing-skeleton-500: rgba(142, 58, 145, 0.5);
215
+ --rls-amaizing-color-400: rgba(231, 187, 236, 1);
198
216
 
199
- --rls-amaizing-skeleton-300: rgba(142, 58, 145, 0.25);
217
+ --rls-amaizing-color-300: rgba(240, 217, 245, 1);
200
218
 
201
- --rls-amaizing-skeleton-100: rgba(142, 58, 145, 0.1);
219
+ --rls-amaizing-color-200: rgba(248, 237, 250, 1);
202
220
 
203
- --rls-amaizing-shadow-500: rgba(170, 73, 176, 0.24);
221
+ --rls-amaizing-color-100: rgba(252, 246, 253, 1);
204
222
 
205
- --rls-amaizing-backdrop-500: rgba(63, 19, 63, 0.8);
223
+ --rls-amaizing-gradient-700: linear-gradient(
224
+ 180deg,
225
+ var(--rls-amaizing-color-700) 0%,
226
+ var(--rls-amaizing-color-900) 100%
227
+ );
206
228
 
207
229
  --rls-amaizing-gradient-500: linear-gradient(
208
230
  180deg,
209
- rgb(170, 73, 176) 0%,
210
- rgb(142, 58, 145) 100%
231
+ var(--rls-amaizing-color-500) 0%,
232
+ var(--rls-amaizing-color-700) 100%
211
233
  );
212
234
 
213
235
  // COLORS SMARTNESS
214
236
 
215
- --rls-smartness-color-900: rgba(93, 57, 49, 1);
216
-
217
- --rls-smartness-color-700: rgba(140, 83, 66, 1);
237
+ @include rolster-theme-900('smartness', 50, 24, 22);
218
238
 
219
- --rls-smartness-color-500: rgba(182, 121, 89, 1);
239
+ @include rolster-theme-700('smartness', 131, 69, 58);
220
240
 
221
- --rls-smartness-color-300: rgba(219, 193, 172, 1);
241
+ @include rolster-theme-500('smartness', 182, 121, 89);
222
242
 
223
- --rls-smartness-color-100: rgb(243, 234, 225, 1);
243
+ --rls-smartness-color-400: rgba(201, 163, 128, 1);
224
244
 
225
- --rls-smartness-skeleton-500: rgba(140, 83, 66, 0.5);
245
+ --rls-smartness-color-300: rgba(220, 196, 171, 1);
226
246
 
227
- --rls-smartness-skeleton-300: rgba(140, 83, 66, 0.25);
247
+ --rls-smartness-color-200: rgba(238, 226, 215, 1);
228
248
 
229
- --rls-smartness-skeleton-100: rgba(140, 83, 66, 0.1);
249
+ --rls-smartness-color-100: rgba(249, 246, 241, 1);
230
250
 
231
- --rls-smartness-shadow-500: rgba(182, 121, 89, 0.24);
232
-
233
- --rls-smartness-backdrop-500: rgba(93, 57, 49, 0.8);
251
+ --rls-smartness-gradient-700: linear-gradient(
252
+ 180deg,
253
+ var(--rls-smartness-color-700) 0%,
254
+ var(--rls-smartness-color-900) 100%
255
+ );
234
256
 
235
257
  --rls-smartness-gradient-500: linear-gradient(
236
258
  180deg,
237
- rgb(182, 121, 89) 0%,
238
- rgb(140, 83, 66) 100%
259
+ var(--rls-smartness-color-500) 0%,
260
+ var(--rls-smartness-color-700) 100%
239
261
  );
240
262
 
241
263
  // COLORS OBSIDIAN
242
264
 
243
- --rls-obsidian-color-900: rgba(58, 50, 45, 1);
244
-
245
- --rls-obsidian-color-700: rgba(97, 84, 71, 1);
246
-
247
- --rls-obsidian-color-500: rgba(141, 127, 101, 1);
265
+ @include rolster-theme-900('obsidian', 41, 34, 31);
248
266
 
249
- --rls-obsidian-color-300: rgb(178, 170, 146, 1);
267
+ @include rolster-theme-700('obsidian', 98, 83, 70);
250
268
 
251
- --rls-obsidian-color-100: rgb(230, 228, 219, 1);
269
+ @include rolster-theme-500('obsidian', 141, 127, 101);
252
270
 
253
- --rls-obsidian-skeleton-500: rgba(97, 84, 71, 0.5);
271
+ --rls-obsidian-color-400: rgba(178, 170, 146, 1);
254
272
 
255
- --rls-obsidian-skeleton-300: rgba(97, 84, 71, 0.25);
273
+ --rls-obsidian-color-300: rgba(206, 202, 186, 1);
256
274
 
257
- --rls-obsidian-skeleton-100: rgba(97, 84, 71, 0.1);
275
+ --rls-obsidian-color-200: rgba(230, 228, 219, 1);
258
276
 
259
- --rls-obsidian-shadow-500: rgba(141, 127, 101, 0.24);
277
+ --rls-obsidian-color-100: rgba(245, 245, 241, 1);
260
278
 
261
- --rls-obsidian-backdrop-500: rgba(58, 50, 45, 0.8);
279
+ --rls-obsidian-gradient-700: linear-gradient(
280
+ 180deg,
281
+ var(--rls-obsidian-color-700) 0%,
282
+ var(--rls-obsidian-color-900) 100%
283
+ );
262
284
 
263
285
  --rls-obsidian-gradient-500: linear-gradient(
264
286
  180deg,
265
- rgb(141, 127, 101) 0%,
266
- rgb(97, 84, 71) 100%
287
+ var(--rls-obsidian-color-500) 0%,
288
+ var(--rls-obsidian-color-700) 100%
267
289
  );
268
290
  }
package/scss/foundations/_themes.foundation.scss CHANGED
@@ -67,10 +67,20 @@
67
67
 
68
68
  --rls-theme-color-500: var(--rls-#{$theme}-color-500);
69
69
 
70
+ --rls-theme-color-400: var(--rls-#{$theme}-color-400);
71
+
70
72
  --rls-theme-color-300: var(--rls-#{$theme}-color-300);
73
+
74
+ --rls-theme-color-200: var(--rls-#{$theme}-color-200);
71
75
 
72
76
  --rls-theme-color-100: var(--rls-#{$theme}-color-100);
73
77
 
78
+ --rls-theme-font-900: var(--rls-#{$theme}-color-100);
79
+
80
+ --rls-theme-font-500: var(--rls-#{$theme}-color-100);
81
+
82
+ --rls-theme-font-100: var(--rls-#{$theme}-color-900);
83
+
74
84
  --rls-theme-skeleton-500: var(--rls-#{$theme}-skeleton-500);
75
85
 
76
86
  --rls-theme-skeleton-300: var(--rls-#{$theme}-skeleton-300);
@@ -79,10 +89,12 @@
79
89
 
80
90
  --rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
81
91
 
82
- --rls-theme-backdrop-500: var(--rls-#{$theme}-backdrop-500);
92
+ --rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
83
93
 
84
94
  --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
85
95
 
96
+ --rls-theme-gradient-700: var(--rls-#{$theme}-gradient-500);
97
+
86
98
  @include rolster-border-theme($theme, 900);
87
99
  @include rolster-border-theme($theme, 700);
88
100
  @include rolster-border-theme($theme, 500);
package/scss/utilities/_normalize.utility.scss CHANGED
@@ -1,13 +1,14 @@
1
1
  // Rolster Technology Normalize Utilities
2
- // v2.0.0
2
+ // v2.0.1
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Ago/2022
6
- // Updated: 27/May/2024
6
+ // Updated: 02/Jun/2024
7
7
 
8
8
  :root {
9
9
  --rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
10
10
  'Segoe UI', Roboto, Helvetica;
11
+ --rlc-app-body-background: var(--rls-app-background-500);
11
12
  }
12
13
 
13
14
  html {
@@ -23,9 +24,14 @@ body {
23
24
  right: 0rem;
24
25
  margin: 0rem;
25
26
  padding: 0rem;
26
- -webkit-tap-highlight-color: transparent;
27
27
  color: var(--rls-app-color-500);
28
- background: var(--rls-app-background-300);
28
+ background: var(--rlc-app-body-background);
29
+ -webkit-tap-highlight-color: transparent;
30
+
31
+ &.rls-app-body {
32
+ --rlc-boxfield-body-background: rgba(248, 248, 248, 1);
33
+ --rlc-app-body-background: var(--rls-app-background-300);
34
+ }
29
35
  }
30
36
 
31
37
  div {