@rolster/styles-foundations 2.5.44 → 2.6.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.
- package/dist/styles.css +1556 -269
- package/dist/styles.css.map +1 -1
- package/dist/styles.min.css +31 -21
- package/dist/styles.rtl.css +1556 -269
- package/dist/styles.rtl.min.css +31 -21
- package/package.json +1 -1
- package/scss/components/app.scss +2 -2
- package/scss/components/data-table.scss +75 -43
- package/scss/components/field-box.scss +42 -22
- package/scss/components/field-list.scss +46 -28
- package/scss/foundations/borders.scss +14 -0
- package/scss/foundations/colors.scss +100 -55
- package/scss/foundations/flex-boxs.scss +66 -0
- package/scss/foundations/helpers.scss +18 -6
- package/scss/foundations/themes.scss +53 -20
- package/scss/foundations.scss +4 -2
|
@@ -1,61 +1,61 @@
|
|
|
1
1
|
// Rolster Technology Colors Foundations
|
|
2
|
-
// v2.6.
|
|
2
|
+
// v2.6.5
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 03/Mar/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 26/Oct/2025
|
|
7
7
|
|
|
8
8
|
@use 'helpers' as helpers;
|
|
9
9
|
|
|
10
10
|
body {
|
|
11
|
-
--rls-app-color-900:
|
|
11
|
+
--rls-app-color-900: var(--rls-project-color-900, #28323d);
|
|
12
12
|
|
|
13
|
-
--rls-app-color-800:
|
|
13
|
+
--rls-app-color-800: var(--rls-project-color-800, #343957);
|
|
14
14
|
|
|
15
|
-
--rls-app-color-700:
|
|
15
|
+
--rls-app-color-700: var(--rls-project-color-700, #484d6b);
|
|
16
16
|
|
|
17
|
-
--rls-app-color-600:
|
|
17
|
+
--rls-app-color-600: var(--rls-project-color-600, #626f9b);
|
|
18
18
|
|
|
19
|
-
--rls-app-color-500:
|
|
19
|
+
--rls-app-color-500: var(--rls-project-color-500, #808dbe);
|
|
20
20
|
|
|
21
|
-
--rls-app-color-400:
|
|
21
|
+
--rls-app-color-400: var(--rls-project-color-400, #bdc0dc);
|
|
22
22
|
|
|
23
|
-
--rls-app-color-300:
|
|
23
|
+
--rls-app-color-300: var(--rls-project-color-300, #d6d9f0);
|
|
24
24
|
|
|
25
|
-
--rls-app-color-200:
|
|
25
|
+
--rls-app-color-200: var(--rls-project-color-200, #e5e8f5);
|
|
26
26
|
|
|
27
|
-
--rls-app-color-100:
|
|
27
|
+
--rls-app-color-100: var(--rls-project-color-100, #f4f7ff);
|
|
28
28
|
|
|
29
|
-
--rls-app-color-050:
|
|
29
|
+
--rls-app-color-050: var(--rls-project-color-050, #ffffff);
|
|
30
30
|
|
|
31
31
|
@include helpers.rolster-theme(
|
|
32
32
|
'primary',
|
|
33
|
-
#
|
|
34
|
-
#
|
|
35
|
-
#
|
|
36
|
-
#
|
|
37
|
-
#
|
|
38
|
-
#
|
|
39
|
-
#
|
|
40
|
-
#
|
|
41
|
-
#
|
|
42
|
-
#
|
|
43
|
-
#
|
|
33
|
+
#0d275e,
|
|
34
|
+
#0c409c,
|
|
35
|
+
#064dd9,
|
|
36
|
+
#0058f8,
|
|
37
|
+
#0471ff,
|
|
38
|
+
#1b91ff,
|
|
39
|
+
#46b5ff,
|
|
40
|
+
#81d1ff,
|
|
41
|
+
#b4e2ff,
|
|
42
|
+
#d5edff,
|
|
43
|
+
#ecf8ff
|
|
44
44
|
);
|
|
45
45
|
|
|
46
46
|
@include helpers.rolster-theme(
|
|
47
47
|
'secondary',
|
|
48
|
-
#
|
|
49
|
-
#
|
|
50
|
-
#
|
|
51
|
-
#
|
|
52
|
-
#
|
|
53
|
-
#
|
|
54
|
-
#
|
|
55
|
-
#
|
|
56
|
-
#
|
|
57
|
-
#
|
|
58
|
-
#
|
|
48
|
+
#003426,
|
|
49
|
+
#005c42,
|
|
50
|
+
#00714e,
|
|
51
|
+
#008f60,
|
|
52
|
+
#00b373,
|
|
53
|
+
#00da8b,
|
|
54
|
+
#0cdd90,
|
|
55
|
+
#56ffbb,
|
|
56
|
+
#98ffd1,
|
|
57
|
+
#c9ffe5,
|
|
58
|
+
#e9fff5
|
|
59
59
|
);
|
|
60
60
|
|
|
61
61
|
@include helpers.rolster-theme(
|
|
@@ -148,6 +148,36 @@ body {
|
|
|
148
148
|
#fdf3f4
|
|
149
149
|
);
|
|
150
150
|
|
|
151
|
+
@include helpers.rolster-theme(
|
|
152
|
+
'ross',
|
|
153
|
+
#500119,
|
|
154
|
+
#8f0c37,
|
|
155
|
+
#a80939,
|
|
156
|
+
#c8083b,
|
|
157
|
+
#ed1146,
|
|
158
|
+
#ff4b6e,
|
|
159
|
+
#ff6982,
|
|
160
|
+
#ff9fad,
|
|
161
|
+
#ffcad2,
|
|
162
|
+
#ffe2e6,
|
|
163
|
+
#fff0f1
|
|
164
|
+
);
|
|
165
|
+
|
|
166
|
+
@include helpers.rolster-theme(
|
|
167
|
+
'hope',
|
|
168
|
+
#02312c,
|
|
169
|
+
#105146,
|
|
170
|
+
#0d6255,
|
|
171
|
+
#0a7b68,
|
|
172
|
+
#07a287,
|
|
173
|
+
#0cc09d,
|
|
174
|
+
#25dcb5,
|
|
175
|
+
#57f1cc,
|
|
176
|
+
#95fade,
|
|
177
|
+
#cafdee,
|
|
178
|
+
#effef9
|
|
179
|
+
);
|
|
180
|
+
|
|
151
181
|
@include helpers.rolster-theme(
|
|
152
182
|
'mountains',
|
|
153
183
|
#161d18,
|
|
@@ -178,19 +208,34 @@ body {
|
|
|
178
208
|
#fcf6fd
|
|
179
209
|
);
|
|
180
210
|
|
|
211
|
+
@include helpers.rolster-theme(
|
|
212
|
+
'purple',
|
|
213
|
+
#201f47,
|
|
214
|
+
#35347b,
|
|
215
|
+
#3c399a,
|
|
216
|
+
#4843bf,
|
|
217
|
+
#5552d9,
|
|
218
|
+
#6e74e6,
|
|
219
|
+
#8a96ef,
|
|
220
|
+
#acbbf5,
|
|
221
|
+
#cbd6fa,
|
|
222
|
+
#e2e9fd,
|
|
223
|
+
#eff4fe
|
|
224
|
+
);
|
|
225
|
+
|
|
181
226
|
@include helpers.rolster-theme(
|
|
182
227
|
'amber',
|
|
183
|
-
#
|
|
184
|
-
#
|
|
185
|
-
#
|
|
186
|
-
#
|
|
187
|
-
#
|
|
188
|
-
#
|
|
189
|
-
#
|
|
190
|
-
#
|
|
191
|
-
#
|
|
192
|
-
#
|
|
193
|
-
#
|
|
228
|
+
#40150a,
|
|
229
|
+
#772c17,
|
|
230
|
+
#943418,
|
|
231
|
+
#ba4014,
|
|
232
|
+
#e15616,
|
|
233
|
+
#ef6f20,
|
|
234
|
+
#f28e45,
|
|
235
|
+
#f7b77a,
|
|
236
|
+
#fad5ae,
|
|
237
|
+
#fdecd7,
|
|
238
|
+
#fef7ee
|
|
194
239
|
);
|
|
195
240
|
|
|
196
241
|
@include helpers.rolster-theme(
|
|
@@ -224,24 +269,24 @@ body {
|
|
|
224
269
|
);
|
|
225
270
|
|
|
226
271
|
&[app-theme='dark'] {
|
|
227
|
-
--rls-app-color-050:
|
|
272
|
+
--rls-app-color-050: var(--rls-project-color-050, #28323d);
|
|
228
273
|
|
|
229
|
-
--rls-app-color-100:
|
|
274
|
+
--rls-app-color-100: var(--rls-project-color-100, #343957);
|
|
230
275
|
|
|
231
|
-
--rls-app-color-200:
|
|
276
|
+
--rls-app-color-200: var(--rls-project-color-200, #484d6b);
|
|
232
277
|
|
|
233
|
-
--rls-app-color-300:
|
|
278
|
+
--rls-app-color-300: var(--rls-project-color-300, #626f9b);
|
|
234
279
|
|
|
235
|
-
--rls-app-color-400:
|
|
280
|
+
--rls-app-color-400: var(--rls-project-color-400, #808dbe);
|
|
236
281
|
|
|
237
|
-
--rls-app-color-500:
|
|
282
|
+
--rls-app-color-500: var(--rls-project-color-500, #bdc0dc);
|
|
238
283
|
|
|
239
|
-
--rls-app-color-600:
|
|
284
|
+
--rls-app-color-600: var(--rls-project-color-600, #d6d9f0);
|
|
240
285
|
|
|
241
|
-
--rls-app-color-700:
|
|
286
|
+
--rls-app-color-700: var(--rls-project-color-700, #e5e8f5);
|
|
242
287
|
|
|
243
|
-
--rls-app-color-800:
|
|
288
|
+
--rls-app-color-800: var(--rls-project-color-800, #f4f7ff);
|
|
244
289
|
|
|
245
|
-
--rls-app-color-900:
|
|
290
|
+
--rls-app-color-900: var(--rls-project-color-900, #ffffff);
|
|
246
291
|
}
|
|
247
292
|
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
// Rolster Technology FlexBoxs Foundations
|
|
2
|
+
// v1.0.0
|
|
3
|
+
// @license MIT
|
|
4
|
+
// Author: Rolster Developers
|
|
5
|
+
// Created: 08/Nov/2025
|
|
6
|
+
// Updated: 08/Nov/2025
|
|
7
|
+
|
|
8
|
+
@mixin flex_row($gap) {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
column-gap: #{$gap};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@mixin flex_column($gap) {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
row-gap: #{$gap};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.rls-flex-row-0 {
|
|
21
|
+
@include flex_row(0rem);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.rls-flex-row-2 {
|
|
25
|
+
@include flex_row(2rem);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.rls-flex-row-4 {
|
|
29
|
+
@include flex_row(4rem);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.rls-flex-row-8 {
|
|
33
|
+
@include flex_row(8rem);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.rls-flex-row-12 {
|
|
37
|
+
@include flex_row(12rem);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.rls-flex-row-16 {
|
|
41
|
+
@include flex_row(16rem);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.rls-flex-column-0 {
|
|
45
|
+
@include flex_column(0rem);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.rls-flex-column-2 {
|
|
49
|
+
@include flex_column(2rem);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.rls-flex-column-4 {
|
|
53
|
+
@include flex_column(4rem);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.rls-flex-column-8 {
|
|
57
|
+
@include flex_column(8rem);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.rls-flex-column-12 {
|
|
61
|
+
@include flex_column(12rem);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.rls-flex-column-16 {
|
|
65
|
+
@include flex_column(16rem);
|
|
66
|
+
}
|
|
@@ -83,19 +83,31 @@
|
|
|
83
83
|
|
|
84
84
|
--rls-#{$theme}-gradient-700: linear-gradient(
|
|
85
85
|
180deg,
|
|
86
|
-
var(--rls-#{$theme}-color-700)
|
|
87
|
-
var(--rls-#{$theme}-color-
|
|
86
|
+
var(--rls-#{$theme}-color-700) 15%,
|
|
87
|
+
var(--rls-#{$theme}-color-800) 85%
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
--rls-#{$theme}-gradient-600: linear-gradient(
|
|
91
|
+
180deg,
|
|
92
|
+
var(--rls-#{$theme}-color-600) 15%,
|
|
93
|
+
var(--rls-#{$theme}-color-700) 85%
|
|
88
94
|
);
|
|
89
95
|
|
|
90
96
|
--rls-#{$theme}-gradient-500: linear-gradient(
|
|
91
97
|
180deg,
|
|
92
|
-
var(--rls-#{$theme}-color-500)
|
|
93
|
-
var(--rls-#{$theme}-color-
|
|
98
|
+
var(--rls-#{$theme}-color-500) 15%,
|
|
99
|
+
var(--rls-#{$theme}-color-600) 85%
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
--rls-#{$theme}-gradient-400: linear-gradient(
|
|
103
|
+
180deg,
|
|
104
|
+
var(--rls-#{$theme}-color-400) 15%,
|
|
105
|
+
var(--rls-#{$theme}-color-500) 85%
|
|
94
106
|
);
|
|
95
107
|
|
|
96
108
|
--rls-#{$theme}-gradient-300: linear-gradient(
|
|
97
109
|
180deg,
|
|
98
|
-
var(--rls-#{$theme}-color-300)
|
|
99
|
-
var(--rls-#{$theme}-color-
|
|
110
|
+
var(--rls-#{$theme}-color-300) 15%,
|
|
111
|
+
var(--rls-#{$theme}-color-400) 85%
|
|
100
112
|
);
|
|
101
113
|
}
|
|
@@ -1,9 +1,20 @@
|
|
|
1
1
|
// Rolster Technology Themes Foundations
|
|
2
|
-
// v2.
|
|
2
|
+
// v2.5.0
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 03/Mar/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 26/Oct/2025
|
|
7
|
+
|
|
8
|
+
@mixin rolster-app-border($token) {
|
|
9
|
+
--rls-app-border-1-#{$token}: var(--rls-border-1) solid
|
|
10
|
+
var(--rls-app-color-#{$token});
|
|
11
|
+
|
|
12
|
+
--rls-app-border-2-#{$token}: var(--rls-border-2) solid
|
|
13
|
+
var(--rls-app-color-#{$token});
|
|
14
|
+
|
|
15
|
+
--rls-app-border-4-#{$token}: var(--rls-border-4) solid
|
|
16
|
+
var(--rls-app-color-#{$token});
|
|
17
|
+
}
|
|
7
18
|
|
|
8
19
|
@mixin rolster-border-color($theme, $token) {
|
|
9
20
|
--rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
|
|
@@ -18,9 +29,13 @@
|
|
|
18
29
|
|
|
19
30
|
@mixin rolster-border-token($theme) {
|
|
20
31
|
@include rolster-border-color($theme, 100);
|
|
32
|
+
@include rolster-border-color($theme, 200);
|
|
21
33
|
@include rolster-border-color($theme, 300);
|
|
34
|
+
@include rolster-border-color($theme, 400);
|
|
22
35
|
@include rolster-border-color($theme, 500);
|
|
36
|
+
@include rolster-border-color($theme, 600);
|
|
23
37
|
@include rolster-border-color($theme, 700);
|
|
38
|
+
@include rolster-border-color($theme, 800);
|
|
24
39
|
@include rolster-border-color($theme, 900);
|
|
25
40
|
}
|
|
26
41
|
|
|
@@ -78,35 +93,38 @@
|
|
|
78
93
|
|
|
79
94
|
--rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
|
|
80
95
|
|
|
96
|
+
--rls-theme-gradient-700: var(--rls-#{$theme}-gradient-700);
|
|
97
|
+
|
|
98
|
+
--rls-theme-gradient-600: var(--rls-#{$theme}-gradient-600);
|
|
99
|
+
|
|
81
100
|
--rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
|
|
82
101
|
|
|
83
|
-
--rls-theme-gradient-
|
|
102
|
+
--rls-theme-gradient-400: var(--rls-#{$theme}-gradient-400);
|
|
103
|
+
|
|
104
|
+
--rls-theme-gradient-300: var(--rls-#{$theme}-gradient-300);
|
|
84
105
|
|
|
85
106
|
@include rolster-border-theme($theme, 900);
|
|
107
|
+
@include rolster-border-theme($theme, 800);
|
|
86
108
|
@include rolster-border-theme($theme, 700);
|
|
109
|
+
@include rolster-border-theme($theme, 600);
|
|
87
110
|
@include rolster-border-theme($theme, 500);
|
|
111
|
+
@include rolster-border-theme($theme, 400);
|
|
88
112
|
@include rolster-border-theme($theme, 300);
|
|
113
|
+
@include rolster-border-theme($theme, 200);
|
|
89
114
|
@include rolster-border-theme($theme, 100);
|
|
90
115
|
}
|
|
91
116
|
|
|
92
117
|
body {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
--rls-app-border-4-300: var(--rls-border-4) solid var(--rls-app-color-400);
|
|
104
|
-
|
|
105
|
-
--rls-app-border-1-500: var(--rls-border-1) solid var(--rls-app-color-600);
|
|
106
|
-
|
|
107
|
-
--rls-app-border-2-500: var(--rls-border-2) solid var(--rls-app-color-600);
|
|
108
|
-
|
|
109
|
-
--rls-app-border-4-500: var(--rls-border-4) solid var(--rls-app-color-600);
|
|
118
|
+
@include rolster-app-border('050');
|
|
119
|
+
@include rolster-app-border('100');
|
|
120
|
+
@include rolster-app-border('200');
|
|
121
|
+
@include rolster-app-border('300');
|
|
122
|
+
@include rolster-app-border('400');
|
|
123
|
+
@include rolster-app-border('500');
|
|
124
|
+
@include rolster-app-border('600');
|
|
125
|
+
@include rolster-app-border('700');
|
|
126
|
+
@include rolster-app-border('800');
|
|
127
|
+
@include rolster-app-border('900');
|
|
110
128
|
|
|
111
129
|
@include rolster-border-token('primary');
|
|
112
130
|
@include rolster-border-token('secondary');
|
|
@@ -116,8 +134,11 @@ body {
|
|
|
116
134
|
@include rolster-border-token('warning');
|
|
117
135
|
@include rolster-border-token('danger');
|
|
118
136
|
@include rolster-border-token('berry');
|
|
137
|
+
@include rolster-border-token('ross');
|
|
138
|
+
@include rolster-border-token('hope');
|
|
119
139
|
@include rolster-border-token('mountains');
|
|
120
140
|
@include rolster-border-token('amaizing');
|
|
141
|
+
@include rolster-border-token('purple');
|
|
121
142
|
@include rolster-border-token('amber');
|
|
122
143
|
@include rolster-border-token('smartness');
|
|
123
144
|
@include rolster-border-token('obsidian');
|
|
@@ -153,6 +174,14 @@ body {
|
|
|
153
174
|
@include rolster-theme('berry');
|
|
154
175
|
}
|
|
155
176
|
|
|
177
|
+
*[rls-theme='ross'] {
|
|
178
|
+
@include rolster-theme('ross');
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
*[rls-theme='hope'] {
|
|
182
|
+
@include rolster-theme('hope');
|
|
183
|
+
}
|
|
184
|
+
|
|
156
185
|
*[rls-theme='mountains'] {
|
|
157
186
|
@include rolster-theme('mountains');
|
|
158
187
|
}
|
|
@@ -161,6 +190,10 @@ body {
|
|
|
161
190
|
@include rolster-theme('amaizing');
|
|
162
191
|
}
|
|
163
192
|
|
|
193
|
+
*[rls-theme='purple'] {
|
|
194
|
+
@include rolster-theme('purple');
|
|
195
|
+
}
|
|
196
|
+
|
|
164
197
|
*[rls-theme='amber'] {
|
|
165
198
|
@include rolster-theme('amber');
|
|
166
199
|
}
|
package/scss/foundations.scss
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
// Rolster Technology Foundations
|
|
2
|
-
// v2.0.
|
|
2
|
+
// v2.0.2
|
|
3
3
|
// @license MIT
|
|
4
4
|
// Author: Rolster Developers
|
|
5
5
|
// Created: 03/Mar/2022
|
|
6
|
-
// Updated:
|
|
6
|
+
// Updated: 08/Nov/2025
|
|
7
7
|
|
|
8
|
+
@use 'foundations/flex-boxs';
|
|
8
9
|
@use 'foundations/animations';
|
|
9
10
|
@use 'foundations/colors';
|
|
11
|
+
@use 'foundations/borders';
|
|
10
12
|
@use 'foundations/sizings';
|
|
11
13
|
@use 'foundations/responsives';
|
|
12
14
|
@use 'foundations/elevations';
|