@rolster/styles-foundations 2.3.39 → 2.4.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.
@@ -1,448 +1,247 @@
1
1
  // Rolster Technology Colors Foundations
2
- // v2.5.2
2
+ // v2.6.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 03/Mar/2022
6
- // Updated: 13/Mar/2025
6
+ // Updated: 18/Abr/2025
7
7
 
8
- @mixin rolster-theme-900($theme, $r, $g, $b) {
9
- --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.8);
10
-
11
- --rls-#{$theme}-color-900: rgba(#{$r}, #{$g}, #{$b}, 1);
12
- }
13
-
14
- @mixin rolster-theme-700($theme, $r, $g, $b) {
15
- --rls-#{$theme}-skeleton-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
16
-
17
- --rls-#{$theme}-skeleton-400: rgba(#{$r}, #{$g}, #{$b}, 0.325);
18
-
19
- --rls-#{$theme}-skeleton-300: rgba(#{$r}, #{$g}, #{$b}, 0.25);
20
-
21
- --rls-#{$theme}-skeleton-200: rgba(#{$r}, #{$g}, #{$b}, 0.175);
22
-
23
- --rls-#{$theme}-skeleton-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
24
-
25
- --rls-#{$theme}-color-700: rgba(#{$r}, #{$g}, #{$b}, 1);
26
- }
27
-
28
- @mixin rolster-theme-500($theme, $r, $g, $b) {
29
- --rls-#{$theme}-shadow-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
30
-
31
- --rls-#{$theme}-color-500: rgba(#{$r}, #{$g}, #{$b}, 1);
32
- }
8
+ @use 'helpers' as helpers;
33
9
 
34
10
  :root {
35
- --rls-dark-background-500: rgba(37, 38, 65, 1);
36
-
37
- --rls-dark-background-300: rgba(52, 57, 87, 1);
38
-
39
- --rls-dark-background-100: rgba(72, 77, 107, 1);
40
-
41
- --rls-light-background-500: rgba(255, 255, 255, 1);
42
-
43
- --rls-light-background-300: rgba(239, 242, 252, 1);
44
-
45
- --rls-light-background-100: rgba(221, 223, 237, 1);
46
-
47
- --rls-dark-color-500: rgba(40, 50, 61, 1);
48
-
49
- --rls-dark-color-300: rgba(98, 111, 155, 1);
50
-
51
- --rls-dark-color-100: rgba(173, 186, 212, 1);
52
-
53
- --rls-light-color-500: rgba(255, 255, 255, 1);
54
-
55
- --rls-light-color-300: rgba(185, 195, 231, 1);
56
-
57
- --rls-light-color-100: rgba(128, 141, 190, 1);
58
-
59
- --rls-dark-border-500: rgba(85, 95, 131, 1);
60
-
61
- --rls-dark-border-300: rgba(173, 186, 230, 1);
62
-
63
- --rls-dark-border-100: rgba(209, 214, 239, 1);
64
-
65
- --rls-light-border-500: rgba(255, 255, 255, 1);
66
-
67
- --rls-light-border-300: rgba(185, 195, 231, 1);
68
-
69
- --rls-light-border-100: rgba(128, 141, 190, 1);
70
-
71
- // COLORS STANDARD
72
-
73
- --rls-standard-color-950: rgba(20, 39, 61, 1);
74
-
75
- @include rolster-theme-900('standard', 29, 59, 93);
76
-
77
- --rls-standard-color-800: rgba(29, 69, 111, 1);
78
-
79
- @include rolster-theme-700('standard', 31, 81, 133);
80
-
81
- --rls-standard-color-600: rgba(37, 101, 164, 1);
82
-
83
- @include rolster-theme-500('standard', 53, 128, 194);
84
-
85
- --rls-standard-color-400: rgba(90, 156, 214, 1);
86
-
87
- --rls-standard-color-300: rgba(148, 190, 229, 1);
88
-
89
- --rls-standard-color-200: rgba(198, 219, 241, 1);
90
-
91
- --rls-standard-color-100: rgba(229, 238, 249, 1);
92
-
93
- --rls-standard-color-050: rgba(243, 247, 252, 1);
94
-
95
- --rls-standard-gradient-700: linear-gradient(
96
- 180deg,
97
- var(--rls-standard-color-700) 0%,
98
- var(--rls-standard-color-900) 100%
99
- );
100
-
101
- --rls-standard-gradient-500: linear-gradient(
102
- 180deg,
103
- var(--rls-standard-color-500) 0%,
104
- var(--rls-standard-color-700) 100%
105
- );
106
-
107
- --rls-standard-gradient-300: linear-gradient(
108
- 180deg,
109
- var(--rls-standard-color-300) 0%,
110
- var(--rls-standard-color-500) 100%
11
+ --rls-app-color-900: rgba(40, 50, 61, 1);
12
+
13
+ --rls-app-color-800: rgba(52, 57, 87, 1);
14
+
15
+ --rls-app-color-700: rgba(72, 77, 107, 1);
16
+
17
+ --rls-app-color-600: rgba(98, 111, 155, 1);
18
+
19
+ --rls-app-color-500: rgba(128, 141, 190, 1);
20
+
21
+ --rls-app-color-400: rgba(173, 186, 212, 1);
22
+
23
+ --rls-app-color-300: rgba(197, 203, 209, 1);
24
+
25
+ --rls-app-color-200: rgba(209, 214, 239, 1);
26
+
27
+ --rls-app-color-100: rgba(239, 242, 252, 1);
28
+
29
+ --rls-app-color-050: rgba(255, 255, 255, 1);
30
+
31
+ @include helpers.rolster-theme(
32
+ 'primary',
33
+ #0e2425,
34
+ #204140,
35
+ #224d4b,
36
+ #265f5c,
37
+ #2c7873,
38
+ #39938b,
39
+ #52afa5,
40
+ #7dcbc1,
41
+ #aee1d8,
42
+ #d7f0ec,
43
+ #f3faf8
44
+ );
45
+
46
+ @include helpers.rolster-theme(
47
+ 'secondary',
48
+ #0b2446,
49
+ #0e335d,
50
+ #0c4480,
51
+ #094f9b,
52
+ #0a63bf,
53
+ #1781e0,
54
+ #409df0,
55
+ #82bef7,
56
+ #bddbfa,
57
+ #e1edfd,
58
+ #f1f7fe
59
+ );
60
+
61
+ @include helpers.rolster-theme(
62
+ 'tertiary',
63
+ #440d0b,
64
+ #7d221f,
65
+ #97211d,
66
+ #b6241f,
67
+ #d92f29,
68
+ #ed5752,
69
+ #f67773,
70
+ #faaaa7,
71
+ #fdcdcb,
72
+ #fde4e3,
73
+ #fef2f2
74
+ );
75
+
76
+ @include helpers.rolster-theme(
77
+ 'success',
78
+ #012d22,
79
+ #04503b,
80
+ #046146,
81
+ #017b56,
82
+ #019f6c,
83
+ #0bbe81,
84
+ #30d798,
85
+ #6beab6,
86
+ #a5f5cf,
87
+ #d0fbe4,
88
+ #ecfdf5
89
+ );
90
+
91
+ @include helpers.rolster-theme(
92
+ 'info',
93
+ #063852,
94
+ #085172,
95
+ #02628a,
96
+ #0075a7,
97
+ #0092cf,
98
+ #06b6f1,
99
+ #31ccff,
100
+ #78ddff,
101
+ #b7ebff,
102
+ #dff4ff,
103
+ #effaff
104
+ );
105
+
106
+ @include helpers.rolster-theme(
107
+ 'warning',
108
+ #411607,
109
+ #722f15,
110
+ #8a3816,
111
+ #aa4713,
112
+ #cd6512,
113
+ #e88918,
114
+ #efa930,
115
+ #f2c057,
116
+ #f6d991,
117
+ #fbedca,
118
+ #fef8ec
119
+ );
120
+
121
+ @include helpers.rolster-theme(
122
+ 'danger',
123
+ #500000,
124
+ #900c0d,
125
+ #af0506,
126
+ #cc0001,
127
+ #fc0607,
128
+ #ff2627,
129
+ #ff595a,
130
+ #ff9596,
131
+ #ffc1c1,
132
+ #ffdddd,
133
+ #fff0f0
134
+ );
135
+
136
+ @include helpers.rolster-theme(
137
+ 'berry',
138
+ #430e1e,
139
+ #78233f,
140
+ #8c2543,
141
+ #a7294a,
142
+ #c7375a,
143
+ #dc5770,
144
+ #ec96a4,
145
+ #f1b0b9,
146
+ #f7d4d9,
147
+ #fbe8e9,
148
+ #fdf3f4
149
+ );
150
+
151
+ @include helpers.rolster-theme(
152
+ 'mountains',
153
+ #161d18,
154
+ #2c352f,
155
+ #323d36,
156
+ #3b4a41,
157
+ #4f6457,
158
+ #5b7163,
159
+ #758c7d,
160
+ #9aaea0,
161
+ #c1cec4,
162
+ #e0e7e1,
163
+ #f6f7f6
164
+ );
165
+
166
+ @include helpers.rolster-theme(
167
+ 'amaizing',
168
+ #3f133f,
169
+ #632c63,
170
+ #763177,
171
+ #8e3a91,
172
+ #aa49b0,
173
+ #c568cd,
174
+ #d993df,
175
+ #e7bbec,
176
+ #f0d9f5,
177
+ #f8edfa,
178
+ #fcf6fd
179
+ );
180
+
181
+ @include helpers.rolster-theme(
182
+ 'amber',
183
+ #3f110b,
184
+ #752819,
185
+ #912d1b,
186
+ #b73717,
187
+ #dd4b1a,
188
+ #eb6424,
189
+ #ef8448,
190
+ #f4af7d,
191
+ #f9d0af,
192
+ #fcead8,
193
+ #fcead8
194
+ );
195
+
196
+ @include helpers.rolster-theme(
197
+ 'smartness',
198
+ #321816,
199
+ #5a302d,
200
+ #6c3934,
201
+ #83453a,
202
+ #9c5a43,
203
+ #b67959,
204
+ #bd8a62,
205
+ #c9a380,
206
+ #dcc4ab,
207
+ #eee2d7,
208
+ #f9f6f1
209
+ );
210
+
211
+ @include helpers.rolster-theme(
212
+ 'obsidian',
213
+ #29221f,
214
+ #4a3f39,
215
+ #54483f,
216
+ #625346,
217
+ #796955,
218
+ #8d7f65,
219
+ #9c9073,
220
+ #b2aa92,
221
+ #cecaba,
222
+ #e6e4db,
223
+ #f5f5f1
111
224
  );
225
+ }
112
226
 
113
- // COLORS SUCCESS
114
-
115
- --rls-success-color-950: rgba(1, 45, 34, 1);
116
-
117
- @include rolster-theme-900('success', 4, 80, 59);
118
-
119
- --rls-success-color-800: rgba(4, 97, 70, 1);
120
-
121
- @include rolster-theme-700('success', 1, 123, 86);
122
-
123
- --rls-success-color-600: rgba(1, 159, 108, 1);
124
-
125
- @include rolster-theme-500('success', 11, 190, 129);
126
-
127
- --rls-success-color-400: rgba(48, 215, 152, 1);
128
-
129
- --rls-success-color-300: rgba(107, 234, 182, 1);
130
-
131
- --rls-success-color-200: rgba(165, 245, 207, 1);
132
-
133
- --rls-success-color-100: rgba(208, 251, 228, 1);
134
-
135
- --rls-success-color-050: rgba(236, 253, 245, 1);
136
-
137
- --rls-success-gradient-700: linear-gradient(
138
- 180deg,
139
- var(--rls-success-color-700) 0%,
140
- var(--rls-success-color-900) 100%
141
- );
142
-
143
- --rls-success-gradient-500: linear-gradient(
144
- 180deg,
145
- var(--rls-success-color-500) 0%,
146
- var(--rls-success-color-700) 100%
147
- );
148
-
149
- --rls-success-gradient-300: linear-gradient(
150
- 180deg,
151
- var(--rls-success-color-300) 0%,
152
- var(--rls-success-color-500) 100%
153
- );
154
-
155
- // COLORS INFO
156
-
157
- --rls-info-color-950: rgb(4, 45, 77, 1);
158
-
159
- @include rolster-theme-900('info', 7, 70, 115);
160
-
161
- --rls-info-color-800: rgba(0, 85, 140, 1);
162
-
163
- @include rolster-theme-700('info', 0, 101, 170);
164
-
165
- --rls-info-color-600: rgba(0, 126, 210, 1);
166
-
167
- @include rolster-theme-500('info', 2, 159, 245);
168
-
169
- --rls-info-color-400: rgba(45, 184, 255, 1);
170
-
171
- --rls-info-color-300: rgba(118, 207, 255, 1);
172
-
173
- --rls-info-color-200: rgba(182, 228, 255, 1);
174
-
175
- --rls-info-color-100: rgba(222, 241, 255, 1);
176
-
177
- --rls-info-color-050: rgba(239, 248, 255, 1);
178
-
179
- --rls-info-gradient-700: linear-gradient(
180
- 180deg,
181
- var(--rls-info-color-700) 0%,
182
- var(--rls-info-color-900) 100%
183
- );
184
-
185
- --rls-info-gradient-500: linear-gradient(
186
- 180deg,
187
- var(--rls-info-color-500) 0%,
188
- var(--rls-info-color-700) 100%
189
- );
190
-
191
- --rls-info-gradient-300: linear-gradient(
192
- 180deg,
193
- var(--rls-info-color-300) 0%,
194
- var(--rls-info-color-500) 100%
195
- );
196
-
197
- // COLORS WARNING
198
-
199
- --rls-warning-color-950: rgba(72, 29, 0, 1);
200
-
201
- @include rolster-theme-900('warning', 124, 58, 11);
202
-
203
- --rls-warning-color-800: rgba(152, 70, 8, 1);
204
-
205
- @include rolster-theme-700('warning', 187, 91, 2);
206
-
207
- --rls-warning-color-600: rgba(226, 131, 0, 1);
208
-
209
- @include rolster-theme-500('warning', 246, 167, 0);
210
-
211
- --rls-warning-color-400: rgba(255, 207, 27, 1);
212
-
213
- --rls-warning-color-300: rgba(255, 224, 70, 1);
214
-
215
- --rls-warning-color-200: rgba(255, 239, 133, 1);
216
-
217
- --rls-warning-color-100: rgba(255, 247, 197, 1);
218
-
219
- --rls-warning-color-050: rgba(255, 253, 234, 1);
220
-
221
- --rls-warning-gradient-700: linear-gradient(
222
- 180deg,
223
- var(--rls-warning-color-700) 0%,
224
- var(--rls-warning-color-900) 100%
225
- );
226
-
227
- --rls-warning-gradient-500: linear-gradient(
228
- 180deg,
229
- var(--rls-warning-color-500) 0%,
230
- var(--rls-warning-color-700) 100%
231
- );
232
-
233
- --rls-warning-gradient-300: linear-gradient(
234
- 180deg,
235
- var(--rls-warning-color-300) 0%,
236
- var(--rls-warning-color-500) 100%
237
- );
238
-
239
- // COLORS DANGER
240
-
241
- --rls-danger-color-950: rgba(79, 2, 22, 1);
242
-
243
- @include rolster-theme-900('danger', 141, 14, 50);
244
-
245
- --rls-danger-color-800: rgba(165, 12, 50, 1);
246
-
247
- @include rolster-theme-700('danger', 197, 11, 51);
248
-
249
- --rls-danger-color-600: rgba(220, 20, 59, 1);
250
-
251
- @include rolster-theme-500('danger', 251, 56, 84);
252
-
253
- --rls-danger-color-400: rgba(255, 107, 125, 1);
254
-
255
- --rls-danger-color-300: rgba(255, 160, 170, 1);
256
-
257
- --rls-danger-color-200: rgba(255, 203, 209, 1);
258
-
259
- --rls-danger-color-100: rgba(255, 227, 228, 1);
260
-
261
- --rls-danger-color-050: rgba(255, 240, 242, 1);
262
-
263
- --rls-danger-gradient-700: linear-gradient(
264
- 180deg,
265
- var(--rls-danger-color-700) 0%,
266
- var(--rls-danger-color-900) 100%
267
- );
268
-
269
- --rls-danger-gradient-500: linear-gradient(
270
- 180deg,
271
- var(--rls-danger-color-500) 0%,
272
- var(--rls-danger-color-700) 100%
273
- );
274
-
275
- --rls-danger-gradient-300: linear-gradient(
276
- 180deg,
277
- var(--rls-danger-color-300) 0%,
278
- var(--rls-danger-color-500) 100%
279
- );
280
-
281
- // COLORS AMAIZING
282
-
283
- --rls-amaizing-color-950: rgba(63, 19, 63, 1);
284
-
285
- @include rolster-theme-900('amaizing', 99, 44, 99);
286
-
287
- --rls-amaizing-color-800: rgba(118, 49, 119, 1);
288
-
289
- @include rolster-theme-700('amaizing', 142, 58, 145);
290
-
291
- --rls-amaizing-color-600: rgba(170, 73, 176, 1);
292
-
293
- @include rolster-theme-500('amaizing', 197, 104, 205);
294
-
295
- --rls-amaizing-color-400: rgba(217, 147, 223, 1);
296
-
297
- --rls-amaizing-color-300: rgba(231, 187, 236, 1);
298
-
299
- --rls-amaizing-color-200: rgba(240, 217, 245, 1);
300
-
301
- --rls-amaizing-color-100: rgba(248, 237, 250, 1);
302
-
303
- --rls-amaizing-color-050: rgba(252, 246, 253, 1);
304
-
305
- --rls-amaizing-gradient-700: linear-gradient(
306
- 180deg,
307
- var(--rls-amaizing-color-700) 0%,
308
- var(--rls-amaizing-color-900) 100%
309
- );
310
-
311
- --rls-amaizing-gradient-500: linear-gradient(
312
- 180deg,
313
- var(--rls-amaizing-color-500) 0%,
314
- var(--rls-amaizing-color-700) 100%
315
- );
316
-
317
- --rls-amaizing-gradient-300: linear-gradient(
318
- 180deg,
319
- var(--rls-amaizing-color-300) 0%,
320
- var(--rls-amaizing-color-500) 100%
321
- );
322
-
323
- // COLORS AMBER
324
-
325
- --rls-amber-color-950: rgba(63, 17, 11, 1);
326
-
327
- @include rolster-theme-900('amber', 117, 40, 25);
328
-
329
- --rls-amber-color-800: rgba(145, 45, 27, 1);
330
-
331
- @include rolster-theme-700('amber', 183, 55, 23);
332
-
333
- --rls-amber-color-600: rgba(221, 75, 26, 1);
334
-
335
- @include rolster-theme-500('amber', 235, 100, 36);
336
-
337
- --rls-amber-color-400: rgba(239, 132, 72, 1);
338
-
339
- --rls-amber-color-300: rgba(244, 175, 125, 1);
340
-
341
- --rls-amber-color-200: rgba(249, 208, 175, 1);
342
-
343
- --rls-amber-color-100: rgba(252, 234, 216, 1);
344
-
345
- --rls-amber-color-050: rgba(252, 234, 216, 1);
346
-
347
- --rls-amber-gradient-700: linear-gradient(
348
- 180deg,
349
- var(--rls-amber-color-700) 0%,
350
- var(--rls-amber-color-900) 100%
351
- );
352
-
353
- --rls-amber-gradient-500: linear-gradient(
354
- 180deg,
355
- var(--rls-amber-color-500) 0%,
356
- var(--rls-amber-color-700) 100%
357
- );
358
-
359
- --rls-amber-gradient-300: linear-gradient(
360
- 180deg,
361
- var(--rls-amber-color-300) 0%,
362
- var(--rls-amber-color-500) 100%
363
- );
364
-
365
- // COLORS SMARTNESS
366
-
367
- --rls-smartness-color-950: rgba(50, 24, 22, 1);
368
-
369
- @include rolster-theme-900('smartness', 90, 48, 45);
370
-
371
- --rls-smartness-color-800: rgba(108, 57, 52, 1);
372
-
373
- @include rolster-theme-700('smartness', 131, 69, 58);
374
-
375
- --rls-smartness-color-600: rgba(156, 90, 67, 1);
376
-
377
- @include rolster-theme-500('smartness', 182, 121, 89);
378
-
379
- --rls-smartness-color-400: rgba(189, 138, 98, 1);
380
-
381
- --rls-smartness-color-300: rgba(201, 163, 128, 1);
382
-
383
- --rls-smartness-color-200: rgba(220, 196, 171, 1);
384
-
385
- --rls-smartness-color-100: rgba(238, 226, 215, 1);
386
-
387
- --rls-smartness-color-050: rgba(249, 246, 241, 1);
388
-
389
- --rls-smartness-gradient-700: linear-gradient(
390
- 180deg,
391
- var(--rls-smartness-color-700) 0%,
392
- var(--rls-smartness-color-900) 100%
393
- );
394
-
395
- --rls-smartness-gradient-500: linear-gradient(
396
- 180deg,
397
- var(--rls-smartness-color-500) 0%,
398
- var(--rls-smartness-color-700) 100%
399
- );
400
-
401
- --rls-smartness-gradient-300: linear-gradient(
402
- 180deg,
403
- var(--rls-smartness-color-300) 0%,
404
- var(--rls-smartness-color-500) 100%
405
- );
406
-
407
- // COLORS OBSIDIAN
408
-
409
- --rls-obsidian-color-950: rgba(41, 34, 31, 1);
410
-
411
- @include rolster-theme-900('obsidian', 74, 63, 57);
412
-
413
- --rls-obsidian-color-800: rgba(84, 72, 63, 1);
414
-
415
- @include rolster-theme-700('obsidian', 98, 83, 70);
227
+ *[app-theme='dark'] {
228
+ --rls-app-color-900: rgba(255, 255, 255, 1);
416
229
 
417
- --rls-obsidian-color-600: rgba(121, 105, 85, 1);
230
+ --rls-app-color-800: rgba(239, 242, 252, 1);
418
231
 
419
- @include rolster-theme-500('obsidian', 141, 127, 101);
232
+ --rls-app-color-700: rgba(209, 214, 239, 1);
420
233
 
421
- --rls-obsidian-color-400: rgba(156, 144, 115, 1);
234
+ --rls-app-color-600: rgba(197, 203, 209, 1);
422
235
 
423
- --rls-obsidian-color-300: rgba(178, 170, 146, 1);
236
+ --rls-app-color-500: rgba(173, 186, 212, 1);
424
237
 
425
- --rls-obsidian-color-200: rgba(206, 202, 186, 1);
238
+ --rls-app-color-400: rgba(128, 141, 190, 1);
426
239
 
427
- --rls-obsidian-color-100: rgba(230, 228, 219, 1);
240
+ --rls-app-color-300: rgba(98, 111, 155, 1);
428
241
 
429
- --rls-obsidian-color-050: rgba(245, 245, 241, 1);
242
+ --rls-app-color-200: rgba(72, 77, 107, 1);
430
243
 
431
- --rls-obsidian-gradient-700: linear-gradient(
432
- 180deg,
433
- var(--rls-obsidian-color-700) 0%,
434
- var(--rls-obsidian-color-900) 100%
435
- );
244
+ --rls-app-color-100: rgba(52, 57, 87, 1);
436
245
 
437
- --rls-obsidian-gradient-500: linear-gradient(
438
- 180deg,
439
- var(--rls-obsidian-color-500) 0%,
440
- var(--rls-obsidian-color-700) 100%
441
- );
442
-
443
- --rls-obsidian-gradient-300: linear-gradient(
444
- 180deg,
445
- var(--rls-obsidian-color-300) 0%,
446
- var(--rls-obsidian-color-500) 100%
447
- );
246
+ --rls-app-color-050: rgba(40, 50, 61, 1);
448
247
  }