@rolster/styles-foundations 1.0.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 (63) hide show
  1. package/LICENSE +21 -0
  2. package/dist/styles.css +1924 -0
  3. package/dist/styles.min.css +1 -0
  4. package/dist/styles.rtl.css +1924 -0
  5. package/dist/styles.rtl.min.css +1 -0
  6. package/fonts/fabric/_fabric.-settings.scss +66 -0
  7. package/fonts/fabric/_fabric.scss +69 -0
  8. package/fonts/fabric/fabric-bold.otf +0 -0
  9. package/fonts/fabric/fabric-light.otf +0 -0
  10. package/fonts/fabric/fabric-regular.otf +0 -0
  11. package/fonts/fabric/fabric-semibold.otf +0 -0
  12. package/fonts/fabric/fabric.css +122 -0
  13. package/fonts/mona-sans/_mona-sans-settings.scss +62 -0
  14. package/fonts/mona-sans/_mona-sans.scss +69 -0
  15. package/fonts/mona-sans/mona-sans-bold.woff +0 -0
  16. package/fonts/mona-sans/mona-sans-light.woff +0 -0
  17. package/fonts/mona-sans/mona-sans-medium.woff +0 -0
  18. package/fonts/mona-sans/mona-sans-regular.woff +0 -0
  19. package/fonts/mona-sans/mona-sans-semibold.woff +0 -0
  20. package/fonts/mona-sans/mona-sans.css +118 -0
  21. package/fonts/poppins/_poppins-settings.scss +62 -0
  22. package/fonts/poppins/_poppins.scss +69 -0
  23. package/fonts/poppins/poppins-bold.woff2 +0 -0
  24. package/fonts/poppins/poppins-light.woff2 +0 -0
  25. package/fonts/poppins/poppins-medium.woff2 +0 -0
  26. package/fonts/poppins/poppins-regular.woff2 +0 -0
  27. package/fonts/poppins/poppins-semibold.woff2 +0 -0
  28. package/fonts/poppins/poppins.css +118 -0
  29. package/fonts/space-grotesk/_space-grotesk-settings.scss +62 -0
  30. package/fonts/space-grotesk/_space-grotesk.scss +69 -0
  31. package/fonts/space-grotesk/space-grotesk-bold.woff +0 -0
  32. package/fonts/space-grotesk/space-grotesk-light.woff +0 -0
  33. package/fonts/space-grotesk/space-grotesk-medium.woff +0 -0
  34. package/fonts/space-grotesk/space-grotesk-regular.woff +0 -0
  35. package/fonts/space-grotesk/space-grotesk-semibold.woff +0 -0
  36. package/fonts/space-grotesk/space-grotesk.css +118 -0
  37. package/icons/_rolster-settings.scss +763 -0
  38. package/icons/_rolster.scss +18 -0
  39. package/icons/rolster-icons.eot +0 -0
  40. package/icons/rolster-icons.svg +258 -0
  41. package/icons/rolster-icons.ttf +0 -0
  42. package/icons/rolster-icons.woff +0 -0
  43. package/icons/rolster.css +768 -0
  44. package/package.json +32 -0
  45. package/readme.md +13 -0
  46. package/scss/_rolster-components.scss +9 -0
  47. package/scss/_rolster-foundations.scss +13 -0
  48. package/scss/_rolster-utilities.scss +13 -0
  49. package/scss/components/_app.scss +89 -0
  50. package/scss/components/_box-field.scss +94 -0
  51. package/scss/foundations/_animations-foundations.scss +16 -0
  52. package/scss/foundations/_colors-foundations.scss +200 -0
  53. package/scss/foundations/_elevations-foundations.scss +157 -0
  54. package/scss/foundations/_sizings-foundations.scss +74 -0
  55. package/scss/foundations/_themes-foundations.scss +103 -0
  56. package/scss/foundations/_typographics-foundations.scss +26 -0
  57. package/scss/styles.scss +10 -0
  58. package/scss/utilities/_colors-utilities.scss +54 -0
  59. package/scss/utilities/_layout-utilities.scss +314 -0
  60. package/scss/utilities/_normalize-utilities.scss +211 -0
  61. package/scss/utilities/_texts-utilities.scss +23 -0
  62. package/scss/utilities/_themes-utilities.scss +42 -0
  63. package/scss/utilities/_typographics-utilities.scss +363 -0
package/fonts/poppins/_poppins-settings.scss ADDED
@@ -0,0 +1,62 @@
1
+ // Rolster Technology Fonts Poppins
2
+ // v1.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 03/Mar/2018
6
+ // Updated: 13/Abr/2023
7
+
8
+ :root {
9
+ --rolster-font-size: 16px;
10
+
11
+ --heading-1-size: 2rem;
12
+ --heading-1-letter-spacing: 0em;
13
+ --heading-1-line-height: 2.275rem;
14
+
15
+ --heading-2-size: 1.75rem;
16
+ --heading-2-letter-spacing: 0.02em;
17
+ --heading-2-line-height: 1.925rem;
18
+
19
+ --heading-3-size: 1.5rem;
20
+ --heading-3-letter-spacing: 0.05em;
21
+ --heading-3-line-height: 1.825rem;
22
+
23
+ --heading-4-size: 1.375rem;
24
+ --heading-4-letter-spacing: 0.05em;
25
+ --heading-4-line-height: 1.675rem;
26
+
27
+ --heading-5-size: 1.25rem;
28
+ --heading-5-letter-spacing: 0.05em;
29
+ --heading-5-line-height: 1.575rem;
30
+
31
+ --heading-6-size: 1.15rem;
32
+ --heading-6-letter-spacing: 0.05em;
33
+ --heading-6-line-height: 1.325rem;
34
+
35
+ --title-size: 1.125rem;
36
+ --title-letter-spacing: 0.03em;
37
+ --title-line-height: 1.25rem;
38
+
39
+ --subtitle-size: 1.075rem;
40
+ --subtitle-letter-spacing: 0.03em;
41
+ --subtitle-line-height: 1.175rem;
42
+
43
+ --body-size: 1rem;
44
+ --body-letter-spacing: 0.03em;
45
+ --body-line-height: 1.125rem;
46
+
47
+ --label-size: 0.875rem;
48
+ --label-letter-spacing: 0.05em;
49
+ --label-line-height: 1.025rem;
50
+
51
+ --smalltext-size: 0.75rem;
52
+ --smalltext-letter-spacing: 0.07em;
53
+ --smalltext-line-height: 1rem;
54
+
55
+ --caption-size: 0.7375rem;
56
+ --caption-letter-spacing: 0.07em;
57
+ --caption-line-height: 1rem;
58
+
59
+ --overline-size: 0.675rem;
60
+ --overline-letter-spacing: 0.1em;
61
+ --overline-line-height: 1rem;
62
+ }
package/fonts/poppins/_poppins.scss ADDED
@@ -0,0 +1,69 @@
1
+ // Rolster Technology Fonts Poppins
2
+ // v1.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 03/Mar/2018
6
+ // Updated: 13/Abr/2023
7
+
8
+ @font-face {
9
+ font-family: -rolster-system-font;
10
+ font-style: normal;
11
+ font-weight: 100;
12
+ src: url('poppins-light.woff2') format('woff2');
13
+ }
14
+
15
+ @font-face {
16
+ font-family: -rolster-system-font;
17
+ font-style: normal;
18
+ font-weight: 200;
19
+ src: url('poppins-light.woff2') format('woff2');
20
+ }
21
+
22
+ @font-face {
23
+ font-family: -rolster-system-font;
24
+ font-style: normal;
25
+ font-weight: 300;
26
+ src: url('poppins-light.woff2') format('woff2');
27
+ }
28
+
29
+ @font-face {
30
+ font-family: -rolster-system-font;
31
+ font-style: normal;
32
+ font-weight: 400;
33
+ src: url('poppins-regular.woff2') format('woff2');
34
+ }
35
+
36
+ @font-face {
37
+ font-family: -rolster-system-font;
38
+ font-style: normal;
39
+ font-weight: 500;
40
+ src: url('poppins-medium.woff2') format('woff2');
41
+ }
42
+
43
+ @font-face {
44
+ font-family: -rolster-system-font;
45
+ font-style: normal;
46
+ font-weight: 600;
47
+ src: url('poppins-semibold.woff2') format('woff2');
48
+ }
49
+
50
+ @font-face {
51
+ font-family: -rolster-system-font;
52
+ font-style: normal;
53
+ font-weight: 700;
54
+ src: url('poppins-bold.woff2') format('woff2');
55
+ }
56
+
57
+ @font-face {
58
+ font-family: -rolster-system-font;
59
+ font-style: normal;
60
+ font-weight: 800;
61
+ src: url('poppins-bold.woff2') format('woff2');
62
+ }
63
+
64
+ @font-face {
65
+ font-family: -rolster-system-font;
66
+ font-style: normal;
67
+ font-weight: 900;
68
+ src: url('poppins-bold.woff2') format('woff2');
69
+ }
package/fonts/poppins/poppins-bold.woff2 ADDED
Binary file
package/fonts/poppins/poppins.css ADDED
@@ -0,0 +1,118 @@
1
+ @font-face {
2
+ font-family: -rolster-system-font;
3
+ font-style: normal;
4
+ font-weight: 100;
5
+ src: url('poppins-light.woff2') format('woff2');
6
+ }
7
+
8
+ @font-face {
9
+ font-family: -rolster-system-font;
10
+ font-style: normal;
11
+ font-weight: 200;
12
+ src: url('poppins-light.woff2') format('woff2');
13
+ }
14
+
15
+ @font-face {
16
+ font-family: -rolster-system-font;
17
+ font-style: normal;
18
+ font-weight: 300;
19
+ src: url('poppins-light.woff2') format('woff2');
20
+ }
21
+
22
+ @font-face {
23
+ font-family: -rolster-system-font;
24
+ font-style: normal;
25
+ font-weight: 400;
26
+ src: url('poppins-regular.woff2') format('woff2');
27
+ }
28
+
29
+ @font-face {
30
+ font-family: -rolster-system-font;
31
+ font-style: normal;
32
+ font-weight: 500;
33
+ src: url('poppins-medium.woff2') format('woff2');
34
+ }
35
+
36
+ @font-face {
37
+ font-family: -rolster-system-font;
38
+ font-style: normal;
39
+ font-weight: 600;
40
+ src: url('poppins-semibold.woff2') format('woff2');
41
+ }
42
+
43
+ @font-face {
44
+ font-family: -rolster-system-font;
45
+ font-style: normal;
46
+ font-weight: 700;
47
+ src: url('poppins-bold.woff2') format('woff2');
48
+ }
49
+
50
+ @font-face {
51
+ font-family: -rolster-system-font;
52
+ font-style: normal;
53
+ font-weight: 800;
54
+ src: url('poppins-bold.woff2') format('woff2');
55
+ }
56
+
57
+ @font-face {
58
+ font-family: -rolster-system-font;
59
+ font-style: normal;
60
+ font-weight: 900;
61
+ src: url('poppins-bold.woff2') format('woff2');
62
+ }
63
+
64
+ :root {
65
+ --rolster-font-size: 16px;
66
+
67
+ --heading-1-size: 2rem;
68
+ --heading-1-letter-spacing: 0em;
69
+ --heading-1-line-height: 2.275rem;
70
+
71
+ --heading-2-size: 1.75rem;
72
+ --heading-2-letter-spacing: 0.02em;
73
+ --heading-2-line-height: 1.925rem;
74
+
75
+ --heading-3-size: 1.5rem;
76
+ --heading-3-letter-spacing: 0.05em;
77
+ --heading-3-line-height: 1.825rem;
78
+
79
+ --heading-4-size: 1.375rem;
80
+ --heading-4-letter-spacing: 0.05em;
81
+ --heading-4-line-height: 1.675rem;
82
+
83
+ --heading-5-size: 1.25rem;
84
+ --heading-5-letter-spacing: 0.05em;
85
+ --heading-5-line-height: 1.575rem;
86
+
87
+ --heading-6-size: 1.15rem;
88
+ --heading-6-letter-spacing: 0.05em;
89
+ --heading-6-line-height: 1.325rem;
90
+
91
+ --title-size: 1.125rem;
92
+ --title-letter-spacing: 0.03em;
93
+ --title-line-height: 1.25rem;
94
+
95
+ --subtitle-size: 1.075rem;
96
+ --subtitle-letter-spacing: 0.03em;
97
+ --subtitle-line-height: 1.175rem;
98
+
99
+ --body-size: 1rem;
100
+ --body-letter-spacing: 0.03em;
101
+ --body-line-height: 1.125rem;
102
+
103
+ --label-size: 0.875rem;
104
+ --label-letter-spacing: 0.05em;
105
+ --label-line-height: 1.025rem;
106
+
107
+ --smalltext-size: 0.75rem;
108
+ --smalltext-letter-spacing: 0.07em;
109
+ --smalltext-line-height: 1rem;
110
+
111
+ --caption-size: 0.7375rem;
112
+ --caption-letter-spacing: 0.07em;
113
+ --caption-line-height: 1rem;
114
+
115
+ --overline-size: 0.675rem;
116
+ --overline-letter-spacing: 0.1em;
117
+ --overline-line-height: 1rem;
118
+ }
package/fonts/space-grotesk/_space-grotesk-settings.scss ADDED
@@ -0,0 +1,62 @@
1
+ // Rolster Technology Fonts SpaceGrotesk
2
+ // v1.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 03/Mar/2018
6
+ // Updated: 13/Abr/2023
7
+
8
+ :root {
9
+ --rolster-font-size: 16px;
10
+
11
+ --heading-1-size: 2rem;
12
+ --heading-1-letter-spacing: 0em;
13
+ --heading-1-line-height: 2.275rem;
14
+
15
+ --heading-2-size: 1.75rem;
16
+ --heading-2-letter-spacing: 0.02em;
17
+ --heading-2-line-height: 1.925rem;
18
+
19
+ --heading-3-size: 1.5rem;
20
+ --heading-3-letter-spacing: 0.05em;
21
+ --heading-3-line-height: 1.825rem;
22
+
23
+ --heading-4-size: 1.375rem;
24
+ --heading-4-letter-spacing: 0.05em;
25
+ --heading-4-line-height: 1.675rem;
26
+
27
+ --heading-5-size: 1.25rem;
28
+ --heading-5-letter-spacing: 0.05em;
29
+ --heading-5-line-height: 1.575rem;
30
+
31
+ --heading-6-size: 1.15rem;
32
+ --heading-6-letter-spacing: 0.05em;
33
+ --heading-6-line-height: 1.325rem;
34
+
35
+ --title-size: 1.125rem;
36
+ --title-letter-spacing: 0.03em;
37
+ --title-line-height: 1.25rem;
38
+
39
+ --subtitle-size: 1.075rem;
40
+ --subtitle-letter-spacing: 0.03em;
41
+ --subtitle-line-height: 1.175rem;
42
+
43
+ --body-size: 1rem;
44
+ --body-letter-spacing: 0.03em;
45
+ --body-line-height: 1.125rem;
46
+
47
+ --label-size: 0.875rem;
48
+ --label-letter-spacing: 0.05em;
49
+ --label-line-height: 1.025rem;
50
+
51
+ --smalltext-size: 0.75rem;
52
+ --smalltext-letter-spacing: 0.07em;
53
+ --smalltext-line-height: 1rem;
54
+
55
+ --caption-size: 0.7375rem;
56
+ --caption-letter-spacing: 0.07em;
57
+ --caption-line-height: 1rem;
58
+
59
+ --overline-size: 0.675rem;
60
+ --overline-letter-spacing: 0.1em;
61
+ --overline-line-height: 1rem;
62
+ }
package/fonts/space-grotesk/_space-grotesk.scss ADDED
@@ -0,0 +1,69 @@
1
+ // Rolster Technology Fonts SpaceGrotesk
2
+ // v1.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 03/Mar/2018
6
+ // Updated: 13/Abr/2023
7
+
8
+ @font-face {
9
+ font-family: -rolster-system-font;
10
+ font-style: normal;
11
+ font-weight: 100;
12
+ src: url('space-grotesk-light.woff') format('woff');
13
+ }
14
+
15
+ @font-face {
16
+ font-family: -rolster-system-font;
17
+ font-style: normal;
18
+ font-weight: 200;
19
+ src: url('space-grotesk-light.woff') format('woff');
20
+ }
21
+
22
+ @font-face {
23
+ font-family: -rolster-system-font;
24
+ font-style: normal;
25
+ font-weight: 300;
26
+ src: url('space-grotesk-light.woff') format('woff');
27
+ }
28
+
29
+ @font-face {
30
+ font-family: -rolster-system-font;
31
+ font-style: normal;
32
+ font-weight: 400;
33
+ src: url('space-grotesk-regular.woff') format('woff');
34
+ }
35
+
36
+ @font-face {
37
+ font-family: -rolster-system-font;
38
+ font-style: normal;
39
+ font-weight: 500;
40
+ src: url('space-grotesk-medium.woff') format('woff');
41
+ }
42
+
43
+ @font-face {
44
+ font-family: -rolster-system-font;
45
+ font-style: normal;
46
+ font-weight: 600;
47
+ src: url('space-grotesk-semibold.woff') format('woff');
48
+ }
49
+
50
+ @font-face {
51
+ font-family: -rolster-system-font;
52
+ font-style: normal;
53
+ font-weight: 700;
54
+ src: url('space-grotesk-bold.woff') format('woff');
55
+ }
56
+
57
+ @font-face {
58
+ font-family: -rolster-system-font;
59
+ font-style: normal;
60
+ font-weight: 800;
61
+ src: url('space-grotesk-bold.woff') format('woff');
62
+ }
63
+
64
+ @font-face {
65
+ font-family: -rolster-system-font;
66
+ font-style: normal;
67
+ font-weight: 900;
68
+ src: url('space-grotesk-bold.woff') format('woff');
69
+ }
package/fonts/space-grotesk/space-grotesk.css ADDED
@@ -0,0 +1,118 @@
1
+ @font-face {
2
+ font-family: -rolster-system-font;
3
+ font-style: normal;
4
+ font-weight: 100;
5
+ src: url('space-grotesk-light.woff') format('woff');
6
+ }
7
+
8
+ @font-face {
9
+ font-family: -rolster-system-font;
10
+ font-style: normal;
11
+ font-weight: 200;
12
+ src: url('space-grotesk-light.woff') format('woff');
13
+ }
14
+
15
+ @font-face {
16
+ font-family: -rolster-system-font;
17
+ font-style: normal;
18
+ font-weight: 300;
19
+ src: url('space-grotesk-light.woff') format('woff');
20
+ }
21
+
22
+ @font-face {
23
+ font-family: -rolster-system-font;
24
+ font-style: normal;
25
+ font-weight: 400;
26
+ src: url('space-grotesk-regular.woff') format('woff');
27
+ }
28
+
29
+ @font-face {
30
+ font-family: -rolster-system-font;
31
+ font-style: normal;
32
+ font-weight: 500;
33
+ src: url('space-grotesk-medium.woff') format('woff');
34
+ }
35
+
36
+ @font-face {
37
+ font-family: -rolster-system-font;
38
+ font-style: normal;
39
+ font-weight: 600;
40
+ src: url('space-grotesk-semibold.woff') format('woff');
41
+ }
42
+
43
+ @font-face {
44
+ font-family: -rolster-system-font;
45
+ font-style: normal;
46
+ font-weight: 700;
47
+ src: url('space-grotesk-bold.woff') format('woff');
48
+ }
49
+
50
+ @font-face {
51
+ font-family: -rolster-system-font;
52
+ font-style: normal;
53
+ font-weight: 800;
54
+ src: url('space-grotesk-bold.woff') format('woff');
55
+ }
56
+
57
+ @font-face {
58
+ font-family: -rolster-system-font;
59
+ font-style: normal;
60
+ font-weight: 900;
61
+ src: url('space-grotesk-bold.woff') format('woff');
62
+ }
63
+
64
+ :root {
65
+ --rolster-font-size: 16px;
66
+
67
+ --heading-1-size: 2rem;
68
+ --heading-1-letter-spacing: 0em;
69
+ --heading-1-line-height: 2.275rem;
70
+
71
+ --heading-2-size: 1.75rem;
72
+ --heading-2-letter-spacing: 0.02em;
73
+ --heading-2-line-height: 1.925rem;
74
+
75
+ --heading-3-size: 1.5rem;
76
+ --heading-3-letter-spacing: 0.05em;
77
+ --heading-3-line-height: 1.825rem;
78
+
79
+ --heading-4-size: 1.375rem;
80
+ --heading-4-letter-spacing: 0.05em;
81
+ --heading-4-line-height: 1.675rem;
82
+
83
+ --heading-5-size: 1.25rem;
84
+ --heading-5-letter-spacing: 0.05em;
85
+ --heading-5-line-height: 1.575rem;
86
+
87
+ --heading-6-size: 1.15rem;
88
+ --heading-6-letter-spacing: 0.05em;
89
+ --heading-6-line-height: 1.325rem;
90
+
91
+ --title-size: 1.125rem;
92
+ --title-letter-spacing: 0.03em;
93
+ --title-line-height: 1.25rem;
94
+
95
+ --subtitle-size: 1.075rem;
96
+ --subtitle-letter-spacing: 0.03em;
97
+ --subtitle-line-height: 1.175rem;
98
+
99
+ --body-size: 1rem;
100
+ --body-letter-spacing: 0.03em;
101
+ --body-line-height: 1.125rem;
102
+
103
+ --label-size: 0.875rem;
104
+ --label-letter-spacing: 0.05em;
105
+ --label-line-height: 1.025rem;
106
+
107
+ --smalltext-size: 0.75rem;
108
+ --smalltext-letter-spacing: 0.07em;
109
+ --smalltext-line-height: 1rem;
110
+
111
+ --caption-size: 0.7375rem;
112
+ --caption-letter-spacing: 0.07em;
113
+ --caption-line-height: 1rem;
114
+
115
+ --overline-size: 0.675rem;
116
+ --overline-letter-spacing: 0.1em;
117
+ --overline-line-height: 1rem;
118
+ }