@rolster/styles-foundations 1.0.0 → 1.0.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.
- package/dist/rolster-styles.css +2763 -0
- package/dist/{styles.min.css → rolster-styles.min.css} +1 -1
- package/dist/rolster-styles.rtl.css +2763 -0
- package/dist/{styles.rtl.min.css → rolster-styles.rtl.min.css} +1 -1
- package/package.json +33 -32
- package/readme.md +13 -13
- package/scss/_rolster-components.scss +61 -9
- package/scss/_rolster-foundations.scss +13 -13
- package/scss/{styles.scss → _rolster-styles.scss} +10 -10
- package/scss/_rolster-utilities.scss +13 -13
- package/scss/components/_app.scss +11 -10
- package/scss/components/_box-field.scss +32 -35
- package/scss/components/_data-table.scss +263 -0
- package/scss/components/_form.scss +30 -0
- package/scss/components/_list-field.scss +253 -0
- package/scss/foundations/_themes-foundations.scss +103 -103
- package/scss/utilities/_colors-utilities.scss +54 -54
- package/scss/utilities/_layout-utilities.scss +314 -314
- package/scss/utilities/_normalize-utilities.scss +2 -2
- package/scss/utilities/_themes-utilities.scss +42 -42
- package/scss/utilities/_typographics-utilities.scss +87 -359
- package/dist/styles.css +0 -1924
- package/dist/styles.rtl.css +0 -1924
- package/fonts/fabric/_fabric.-settings.scss +0 -66
- package/fonts/fabric/_fabric.scss +0 -69
- package/fonts/fabric/fabric-bold.otf +0 -0
- package/fonts/fabric/fabric-light.otf +0 -0
- package/fonts/fabric/fabric-regular.otf +0 -0
- package/fonts/fabric/fabric-semibold.otf +0 -0
- package/fonts/fabric/fabric.css +0 -122
- package/fonts/mona-sans/_mona-sans-settings.scss +0 -62
- package/fonts/mona-sans/_mona-sans.scss +0 -69
- package/fonts/mona-sans/mona-sans-bold.woff +0 -0
- package/fonts/mona-sans/mona-sans-light.woff +0 -0
- package/fonts/mona-sans/mona-sans-medium.woff +0 -0
- package/fonts/mona-sans/mona-sans-regular.woff +0 -0
- package/fonts/mona-sans/mona-sans-semibold.woff +0 -0
- package/fonts/mona-sans/mona-sans.css +0 -118
- package/fonts/poppins/_poppins-settings.scss +0 -62
- package/fonts/poppins/_poppins.scss +0 -69
- package/fonts/poppins/poppins-bold.woff2 +0 -0
- package/fonts/poppins/poppins-light.woff2 +0 -0
- package/fonts/poppins/poppins-medium.woff2 +0 -0
- package/fonts/poppins/poppins-regular.woff2 +0 -0
- package/fonts/poppins/poppins-semibold.woff2 +0 -0
- package/fonts/poppins/poppins.css +0 -118
- package/fonts/space-grotesk/_space-grotesk-settings.scss +0 -62
- package/fonts/space-grotesk/_space-grotesk.scss +0 -69
- package/fonts/space-grotesk/space-grotesk-bold.woff +0 -0
- package/fonts/space-grotesk/space-grotesk-light.woff +0 -0
- package/fonts/space-grotesk/space-grotesk-medium.woff +0 -0
- package/fonts/space-grotesk/space-grotesk-regular.woff +0 -0
- package/fonts/space-grotesk/space-grotesk-semibold.woff +0 -0
- package/fonts/space-grotesk/space-grotesk.css +0 -118
- package/icons/_rolster-settings.scss +0 -763
- package/icons/_rolster.scss +0 -18
- package/icons/rolster-icons.eot +0 -0
- package/icons/rolster-icons.svg +0 -258
- package/icons/rolster-icons.ttf +0 -0
- package/icons/rolster-icons.woff +0 -0
- package/icons/rolster.css +0 -768
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
// Rolster Technology Themes Foundations
|
|
2
|
-
// v1.0.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 03/Mar/2022
|
|
6
|
-
// Updated: 14/Abr/2023
|
|
7
|
-
|
|
8
|
-
@mixin border-theme-rolster($token, $color) {
|
|
9
|
-
--border-1-rolster-#{$token}: var(--border-1) solid
|
|
10
|
-
var(--color-#{$color}-#{$token});
|
|
11
|
-
|
|
12
|
-
--border-2-rolster-#{$token}: var(--border-2) solid
|
|
13
|
-
var(--color-#{$color}-#{$token});
|
|
14
|
-
|
|
15
|
-
--border-4-rolster-#{$token}: var(--border-4) solid
|
|
16
|
-
var(--color-#{$color}-#{$token});
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@mixin theme-rolster($color) {
|
|
20
|
-
--color-rolster-900: var(--color-#{$color}-900);
|
|
21
|
-
|
|
22
|
-
--color-rolster-700: var(--color-#{$color}-700);
|
|
23
|
-
|
|
24
|
-
--color-rolster-500: var(--color-#{$color}-500);
|
|
25
|
-
|
|
26
|
-
--color-rolster-300: var(--color-#{$color}-300);
|
|
27
|
-
|
|
28
|
-
--color-rolster-100: var(--color-#{$color}-100);
|
|
29
|
-
|
|
30
|
-
--skeleton-rolster-500: var(--skeleton-#{$color}-500);
|
|
31
|
-
|
|
32
|
-
--skeleton-rolster-300: var(--skeleton-#{$color}-300);
|
|
33
|
-
|
|
34
|
-
--skeleton-rolster-100: var(--skeleton-#{$color}-100);
|
|
35
|
-
|
|
36
|
-
@include border-theme-rolster(900, $color);
|
|
37
|
-
@include border-theme-rolster(700, $color);
|
|
38
|
-
@include border-theme-rolster(500, $color);
|
|
39
|
-
@include border-theme-rolster(300, $color);
|
|
40
|
-
@include border-theme-rolster(100, $color);
|
|
41
|
-
|
|
42
|
-
--box-shadow-rolster-500: var(--box-shadow-#{$color}-500);
|
|
43
|
-
|
|
44
|
-
--backdrop-rolster-500: var(--backdrop-#{$color}-500);
|
|
45
|
-
|
|
46
|
-
--gradient-rolster-500: var(--gradient-#{$color}-500);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
@mixin border-theme($theme, $token) {
|
|
50
|
-
--border-1-theme-#{$token}: var(--border-1) solid
|
|
51
|
-
var(--border-#{$theme}-#{$token});
|
|
52
|
-
|
|
53
|
-
--border-2-theme-#{$token}: var(--border-2) solid
|
|
54
|
-
var(--border-#{$theme}-#{$token});
|
|
55
|
-
|
|
56
|
-
--border-4-theme-#{$token}: var(--border-4) solid
|
|
57
|
-
var(--border-#{$theme}-#{$token});
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
:root {
|
|
61
|
-
--background-theme-500: var(--background-light-500);
|
|
62
|
-
|
|
63
|
-
--background-theme-300: var(--background-light-300);
|
|
64
|
-
|
|
65
|
-
--background-theme-100: var(--background-light-100);
|
|
66
|
-
|
|
67
|
-
--color-theme-500: var(--color-dark-500);
|
|
68
|
-
|
|
69
|
-
--color-theme-300: var(--color-dark-300);
|
|
70
|
-
|
|
71
|
-
--color-theme-100: var(--color-dark-100);
|
|
72
|
-
|
|
73
|
-
--border-theme-500: var(--border-dark-500);
|
|
74
|
-
|
|
75
|
-
--border-theme-300: var(--border-dark-300);
|
|
76
|
-
|
|
77
|
-
--border-theme-100: var(--border-dark-100);
|
|
78
|
-
|
|
79
|
-
@include border-theme('dark', 500);
|
|
80
|
-
@include border-theme('dark', 300);
|
|
81
|
-
@include border-theme('dark', 100);
|
|
82
|
-
@include theme-rolster('base');
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
*[rls-theme='success'] {
|
|
86
|
-
@include theme-rolster('success');
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
*[rls-theme='info'] {
|
|
90
|
-
@include theme-rolster('info');
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
*[rls-theme='happy'] {
|
|
94
|
-
@include theme-rolster('happy');
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
*[rls-theme='warning'] {
|
|
98
|
-
@include theme-rolster('warning');
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
*[rls-theme='danger'] {
|
|
102
|
-
@include theme-rolster('danger');
|
|
103
|
-
}
|
|
1
|
+
// Rolster Technology Themes Foundations
|
|
2
|
+
// v1.0.0
|
|
3
|
+
// @license MIT
|
|
4
|
+
// Author: Rolster Developers
|
|
5
|
+
// Created: 03/Mar/2022
|
|
6
|
+
// Updated: 14/Abr/2023
|
|
7
|
+
|
|
8
|
+
@mixin border-theme-rolster($token, $color) {
|
|
9
|
+
--border-1-rolster-#{$token}: var(--border-1) solid
|
|
10
|
+
var(--color-#{$color}-#{$token});
|
|
11
|
+
|
|
12
|
+
--border-2-rolster-#{$token}: var(--border-2) solid
|
|
13
|
+
var(--color-#{$color}-#{$token});
|
|
14
|
+
|
|
15
|
+
--border-4-rolster-#{$token}: var(--border-4) solid
|
|
16
|
+
var(--color-#{$color}-#{$token});
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin theme-rolster($color) {
|
|
20
|
+
--color-rolster-900: var(--color-#{$color}-900);
|
|
21
|
+
|
|
22
|
+
--color-rolster-700: var(--color-#{$color}-700);
|
|
23
|
+
|
|
24
|
+
--color-rolster-500: var(--color-#{$color}-500);
|
|
25
|
+
|
|
26
|
+
--color-rolster-300: var(--color-#{$color}-300);
|
|
27
|
+
|
|
28
|
+
--color-rolster-100: var(--color-#{$color}-100);
|
|
29
|
+
|
|
30
|
+
--skeleton-rolster-500: var(--skeleton-#{$color}-500);
|
|
31
|
+
|
|
32
|
+
--skeleton-rolster-300: var(--skeleton-#{$color}-300);
|
|
33
|
+
|
|
34
|
+
--skeleton-rolster-100: var(--skeleton-#{$color}-100);
|
|
35
|
+
|
|
36
|
+
@include border-theme-rolster(900, $color);
|
|
37
|
+
@include border-theme-rolster(700, $color);
|
|
38
|
+
@include border-theme-rolster(500, $color);
|
|
39
|
+
@include border-theme-rolster(300, $color);
|
|
40
|
+
@include border-theme-rolster(100, $color);
|
|
41
|
+
|
|
42
|
+
--box-shadow-rolster-500: var(--box-shadow-#{$color}-500);
|
|
43
|
+
|
|
44
|
+
--backdrop-rolster-500: var(--backdrop-#{$color}-500);
|
|
45
|
+
|
|
46
|
+
--gradient-rolster-500: var(--gradient-#{$color}-500);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@mixin border-theme($theme, $token) {
|
|
50
|
+
--border-1-theme-#{$token}: var(--border-1) solid
|
|
51
|
+
var(--border-#{$theme}-#{$token});
|
|
52
|
+
|
|
53
|
+
--border-2-theme-#{$token}: var(--border-2) solid
|
|
54
|
+
var(--border-#{$theme}-#{$token});
|
|
55
|
+
|
|
56
|
+
--border-4-theme-#{$token}: var(--border-4) solid
|
|
57
|
+
var(--border-#{$theme}-#{$token});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:root {
|
|
61
|
+
--background-theme-500: var(--background-light-500);
|
|
62
|
+
|
|
63
|
+
--background-theme-300: var(--background-light-300);
|
|
64
|
+
|
|
65
|
+
--background-theme-100: var(--background-light-100);
|
|
66
|
+
|
|
67
|
+
--color-theme-500: var(--color-dark-500);
|
|
68
|
+
|
|
69
|
+
--color-theme-300: var(--color-dark-300);
|
|
70
|
+
|
|
71
|
+
--color-theme-100: var(--color-dark-100);
|
|
72
|
+
|
|
73
|
+
--border-theme-500: var(--border-dark-500);
|
|
74
|
+
|
|
75
|
+
--border-theme-300: var(--border-dark-300);
|
|
76
|
+
|
|
77
|
+
--border-theme-100: var(--border-dark-100);
|
|
78
|
+
|
|
79
|
+
@include border-theme('dark', 500);
|
|
80
|
+
@include border-theme('dark', 300);
|
|
81
|
+
@include border-theme('dark', 100);
|
|
82
|
+
@include theme-rolster('base');
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
*[rls-theme='success'] {
|
|
86
|
+
@include theme-rolster('success');
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
*[rls-theme='info'] {
|
|
90
|
+
@include theme-rolster('info');
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
*[rls-theme='happy'] {
|
|
94
|
+
@include theme-rolster('happy');
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
*[rls-theme='warning'] {
|
|
98
|
+
@include theme-rolster('warning');
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
*[rls-theme='danger'] {
|
|
102
|
+
@include theme-rolster('danger');
|
|
103
|
+
}
|
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
// Rolster Technology Colors Utilities
|
|
2
|
-
// v1.0.0
|
|
3
|
-
// @license MIT
|
|
4
|
-
// Author: Rolster Developers
|
|
5
|
-
// Created: 13/Abr/2023
|
|
6
|
-
// Updated: 13/Abr/2023
|
|
7
|
-
|
|
8
|
-
.font-dark-500 {
|
|
9
|
-
color: var(--color-dark-500);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.font-dark-300 {
|
|
13
|
-
color: var(--color-dark-300);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.font-dark-100 {
|
|
17
|
-
color: var(--color-dark-100);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.font-light-500 {
|
|
21
|
-
color: var(--color-light-500);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.font-light-300 {
|
|
25
|
-
color: var(--color-light-300);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.font-light-100 {
|
|
29
|
-
color: var(--color-light-100);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.bg-dark-500 {
|
|
33
|
-
background: var(--background-dark-500);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.bg-dark-300 {
|
|
37
|
-
background: var(--background-dark-300);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.bg-dark-100 {
|
|
41
|
-
background: var(--background-dark-100);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.bg-light-500 {
|
|
45
|
-
background: var(--background-light-500);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.bg-light-300 {
|
|
49
|
-
background: var(--background-light-300);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.bg-light-100 {
|
|
53
|
-
background: var(--background-light-100);
|
|
54
|
-
}
|
|
1
|
+
// Rolster Technology Colors Utilities
|
|
2
|
+
// v1.0.0
|
|
3
|
+
// @license MIT
|
|
4
|
+
// Author: Rolster Developers
|
|
5
|
+
// Created: 13/Abr/2023
|
|
6
|
+
// Updated: 13/Abr/2023
|
|
7
|
+
|
|
8
|
+
.font-dark-500 {
|
|
9
|
+
color: var(--color-dark-500);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.font-dark-300 {
|
|
13
|
+
color: var(--color-dark-300);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.font-dark-100 {
|
|
17
|
+
color: var(--color-dark-100);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.font-light-500 {
|
|
21
|
+
color: var(--color-light-500);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.font-light-300 {
|
|
25
|
+
color: var(--color-light-300);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.font-light-100 {
|
|
29
|
+
color: var(--color-light-100);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.bg-dark-500 {
|
|
33
|
+
background: var(--background-dark-500);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.bg-dark-300 {
|
|
37
|
+
background: var(--background-dark-300);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.bg-dark-100 {
|
|
41
|
+
background: var(--background-dark-100);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.bg-light-500 {
|
|
45
|
+
background: var(--background-light-500);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.bg-light-300 {
|
|
49
|
+
background: var(--background-light-300);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.bg-light-100 {
|
|
53
|
+
background: var(--background-light-100);
|
|
54
|
+
}
|