@rolster/styles-foundations 1.1.13 → 2.0.1

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 (39) hide show
  1. package/dist/rolster-styles.css +1695 -1469
  2. package/dist/rolster-styles.min.css +1 -1
  3. package/dist/rolster-styles.rtl.css +1695 -1469
  4. package/dist/rolster-styles.rtl.min.css +1 -1
  5. package/package.json +1 -1
  6. package/readme.md +1 -1
  7. package/scss/_rolster-components.scss +52 -50
  8. package/scss/_rolster-foundations.scss +9 -9
  9. package/scss/_rolster-styles.scss +15 -2
  10. package/scss/_rolster-utilities.scss +9 -9
  11. package/scss/components/_app.scss +16 -16
  12. package/scss/components/_box-field.scss +32 -31
  13. package/scss/components/_data-table.scss +75 -72
  14. package/scss/components/_form.scss +7 -7
  15. package/scss/components/_list-field.scss +69 -70
  16. package/scss/foundations/_animations.foundation.scss +16 -0
  17. package/scss/foundations/_colors.foundation.scss +268 -0
  18. package/scss/foundations/_elevations.foundation.scss +157 -0
  19. package/scss/foundations/_sizings.foundation.scss +74 -0
  20. package/scss/foundations/_themes.foundation.scss +160 -0
  21. package/scss/foundations/_typographics.foundation.scss +26 -0
  22. package/scss/utilities/_colors.utility.scss +54 -0
  23. package/scss/utilities/_helpers.utility.scss +124 -0
  24. package/scss/utilities/{_layout-utilities.scss → _layout.utility.scss} +6 -6
  25. package/scss/utilities/{_normalize-utilities.scss → _normalize.utility.scss} +8 -7
  26. package/scss/utilities/{_texts-utilities.scss → _texts.utility.scss} +14 -14
  27. package/scss/utilities/_themes.utility.scss +42 -0
  28. package/scss/utilities/_typographics.utility.scss +107 -0
  29. package/scss/foundations/_animations-foundations.scss +0 -16
  30. package/scss/foundations/_colors-foundations.scss +0 -270
  31. package/scss/foundations/_elevations-foundations.scss +0 -157
  32. package/scss/foundations/_sizings-foundations.scss +0 -74
  33. package/scss/foundations/_themes-foundations.scss +0 -160
  34. package/scss/foundations/_typographics-foundations.scss +0 -26
  35. package/scss/utilities/_colors-utilities.scss +0 -54
  36. package/scss/utilities/_helpers-utilities.scss +0 -124
  37. package/scss/utilities/_themes-utilities.scss +0 -42
  38. package/scss/utilities/_typographics-utilities.scss +0 -107
  39. /package/scss/foundations/{_responsives-foundations.scss → _responsives.foundation.scss} +0 -0
package/scss/_rolster-components.scss CHANGED
@@ -1,79 +1,81 @@
1
1
  // Rolster Technology Components
2
- // v1.2.0
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 13/Abr/2023
6
- // Updated: 13/Abr/2024
6
+ // Updated: 26/May/2024
7
7
 
8
8
  :root {
9
- --rls-action-color: var(--color-theme-300);
10
- --rls-action-ripple-color: var(--rls-action-color);
11
- --rls-action-ripple-dimension: var(--sizing-x18);
12
- --rls-action-ripple-position: -9rem;
9
+ --rlc-action-color: var(--rls-app-color-300);
10
+ --rlc-action-ripple-color: var(--rlc-action-color);
11
+ --rlc-action-ripple-dimension: var(--rls-sizing-x18);
12
+ --rlc-action-ripple-position: -9rem;
13
13
 
14
- --rls-avatar-font-size: var(--title-font-size);
15
- --rls-avatar-border-radius: var(--sizing-x4);
16
- --rls-avatar-width: var(--sizing-x24);
17
- --rls-avatar-height: var(--sizing-x24);
14
+ --rlc-avatar-font-size: var(--rls-title-font-size);
15
+ --rlc-avatar-border-radius: var(--rls-sizing-x4);
16
+ --rlc-avatar-width: var(--rls-sizing-x24);
17
+ --rlc-avatar-height: var(--rls-sizing-x24);
18
18
 
19
- --rls-amount-text-align: start;
19
+ --rlc-amount-text-align: start;
20
20
 
21
- --rls-ballot-subtitle-width: 100%;
22
- --rls-ballot-subtitle-height: var(--smalltext-line-height);
23
- --rls-ballot-subtitle-overflow: initial;
24
- --rls-ballot-subtitle-text-overflow: initial;
25
- --rls-ballot-subtitle-white-space: initial;
21
+ --rlc-ballot-subtitle-width: 100%;
22
+ --rlc-ballot-subtitle-height: var(--rls-smalltext-line-height);
23
+ --rlc-ballot-subtitle-overflow: initial;
24
+ --rlc-ballot-subtitle-text-overflow: initial;
25
+ --rlc-ballot-subtitle-white-space: initial;
26
26
 
27
- --rls-boxfield-body-padding: 0rem;
28
- --rls-boxfield-body-border: var(--border-1-theme-100);
29
- --rls-boxfield-body-shadow: none;
30
- --rls-boxfield-label-font-color: var(--color-theme-300);
27
+ --rlc-boxfield-body-padding: 0rem;
28
+ --rlc-boxfield-body-border: var(--rls-theme-border-1-100);
29
+ --rlc-boxfield-body-shadow: none;
30
+ --rlc-boxfield-label-font-color: var(--rls-app-color-300);
31
31
 
32
- --rls-breadcrumb-height: var(--sizing-x18);
32
+ --rlc-breadcrumb-height: var(--rls-sizing-x18);
33
33
 
34
- --rls-button-label-text-transform: uppercase;
35
- --rls-button-content-padding: 0rem var(--sizing-x4);
36
- --rls-button-content-radius: var(--sizing-x2);
34
+ --rlc-button-label-text-transform: uppercase;
35
+ --rlc-button-content-padding: 0rem var(--rls-sizing-x4);
36
+ --rlc-button-content-radius: var(--rls-sizing-x2);
37
37
 
38
- --rls-card-content-padding: var(--sizing-x8);
38
+ --rlc-card-content-padding: var(--rls-sizing-x8);
39
39
 
40
- --rls-datatable-letter-spacing: 0.0625em;
41
- --rls-datatable-font-size: 7rem;
42
- --rls-datatable-width-scroll: var(--sizing-x4);
43
- --rls-datatable-padding-scroll: 0rem;
40
+ --rlc-datatable-letter-spacing: 0.0625em;
41
+ --rlc-datatable-font-size: 7rem;
42
+ --rlc-datatable-width-scroll: var(--rls-sizing-x4);
43
+ --rlc-datatable-padding-scroll: 0rem;
44
44
 
45
- --rls-form-footer-justify-content: end;
45
+ --rlc-form-footer-justify-content: end;
46
46
 
47
- --rls-icon-font-size: var(--sizing-x12);
48
- --rls-icon-width: var(--sizing-x12);
49
- --rls-icon-height: var(--sizing-x12);
50
- --rls-icon-color: inherit;
47
+ --rlc-icon-font-size: var(--rls-sizing-x12);
48
+ --rlc-icon-width: var(--rls-sizing-x12);
49
+ --rlc-icon-height: var(--rls-sizing-x12);
50
+ --rlc-icon-color: inherit;
51
51
 
52
- --rls-input-font-color: var(--color-theme-500);
53
- --rls-input-font-size: var(--input-font-size);
54
- --rls-input-text-align: left;
55
- --rls-input-letter-spacing: var(--input-letter-spacing);
56
- --rls-input-height: var(--sizing-x12);
57
- --rls-input-parent-padding: 0rem;
52
+ --rlc-input-font-color: var(--rls-app-color-500);
53
+ --rls-input-font-size: var(--rls-input-font-size);
54
+ --rlc-input-text-align: left;
55
+ --rls-input-letter-spacing: var(--rls-input-letter-spacing);
56
+ --rlc-input-height: var(--rls-sizing-x12);
57
+ --rlc-input-parent-padding: 0rem;
58
58
 
59
- --rls-poster-height: var(--sizing-x18);
60
- --rls-poster-padding: var(--sizing-x4);
59
+ --rlc-poster-height: var(--rls-sizing-x18);
60
+ --rlc-poster-padding: var(--rls-sizing-x4);
61
+
62
+ --rlc-progress-circular-dimension: var(--rls-sizing-x28);
61
63
 
62
- --rls-snackbar-left: 50%;
64
+ --rlc-snackbar-left: 50%;
63
65
 
64
- --rls-switch-element-size: var(--sizing-x12);
65
- --rls-switch-bar-radius: var(--sizing-x3);
66
- --rls-switch-bar-height: var(--sizing-x6);
66
+ --rlc-switch-element-size: var(--rls-sizing-x12);
67
+ --rlc-switch-bar-radius: var(--rls-sizing-x3);
68
+ --rlc-switch-bar-height: var(--rls-sizing-x6);
67
69
 
68
- --rls-tabulartext-char-width: 5rem;
69
- --rls-tabulartext-pointer-width: 2rem;
70
+ --rlc-tabulartext-char-width: 5rem;
71
+ --rlc-tabulartext-pointer-width: 2rem;
70
72
 
71
- --rls-toolbar-height: var(--sizing-x28);
73
+ --rlc-toolbar-height: var(--rls-sizing-x28);
72
74
  }
73
75
 
74
76
  * {
75
77
  scrollbar-width: thin;
76
- scrollbar-color: var(--color-rolster-300) var(--background-theme-100);
78
+ scrollbar-color: var(--rls-theme-color-300) var(--rls-app-background-100);
77
79
  }
78
80
 
79
81
  @import 'components/app';
package/scss/_rolster-foundations.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // Rolster Technology Foundations
2
- // v1.0.1
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 03/Mar/2022
6
- // Updated: 03/Oct/2023
6
+ // Updated: 26/May/2023
7
7
 
8
- @import 'foundations/animations-foundations';
9
- @import 'foundations/colors-foundations';
10
- @import 'foundations/sizings-foundations';
11
- @import 'foundations/responsives-foundations';
12
- @import 'foundations/elevations-foundations';
13
- @import 'foundations/themes-foundations';
14
- @import 'foundations/typographics-foundations';
8
+ @import 'foundations/animations.foundation';
9
+ @import 'foundations/colors.foundation';
10
+ @import 'foundations/sizings.foundation';
11
+ @import 'foundations/responsives.foundation';
12
+ @import 'foundations/elevations.foundation';
13
+ @import 'foundations/themes.foundation';
14
+ @import 'foundations/typographics.foundation';
package/scss/_rolster-styles.scss CHANGED
@@ -1,10 +1,23 @@
1
1
  // Rolster Technology Styles
2
- // v1.0.0
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Ago/2022
6
- // Updated: 13/Abr/2023
6
+ // Updated: 27/May/2024
7
7
 
8
8
  @import 'rolster-foundations';
9
9
  @import 'rolster-utilities';
10
10
  @import 'rolster-components';
11
+
12
+ .rls-aspect-ratio {
13
+ --rls-app-font-size-1360: 2.5px;
14
+ --rls-app-font-size-1820: 2.925px;
15
+
16
+ @media screen and (min-width: 1360px) {
17
+ --rls-app-font-size: var(--rls-app-font-size-1360);
18
+ }
19
+
20
+ @media screen and (min-width: 1820px) {
21
+ --rls-app-font-size: var(--rls-app-font-size-1820);
22
+ }
23
+ }
package/scss/_rolster-utilities.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // Rolster Technology Utilities
2
- // v1.0.1
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 13/Abr/2023
6
- // Updated: 23/Sep/2023
6
+ // Updated: 26/May/2023
7
7
 
8
- @import 'utilities/normalize-utilities';
9
- @import 'utilities/colors-utilities';
10
- @import 'utilities/layout-utilities';
11
- @import 'utilities/themes-utilities';
12
- @import 'utilities/texts-utilities';
13
- @import 'utilities/typographics-utilities';
14
- @import 'utilities/helpers-utilities';
8
+ @import 'utilities/normalize.utility';
9
+ @import 'utilities/colors.utility';
10
+ @import 'utilities/layout.utility';
11
+ @import 'utilities/themes.utility';
12
+ @import 'utilities/texts.utility';
13
+ @import 'utilities/typographics.utility';
14
+ @import 'utilities/helpers.utility';
package/scss/components/_app.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology App Component
2
- // v1.1.0
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 27/Ene/2024
6
+ // Updated: 26/May/2024
7
7
 
8
8
  .rls-app {
9
9
  &__body {
@@ -16,26 +16,26 @@
16
16
  margin: 0rem;
17
17
  width: 100%;
18
18
  height: 100%;
19
- z-index: var(--z-index-8);
19
+ z-index: var(--rls-z-index-8);
20
20
  overflow: hidden;
21
21
  transition:
22
- left 240ms 0ms var(--standard-curve),
23
- width 240ms 0ms var(--standard-curve);
22
+ left 240ms 0ms var(--rls-standard-curve),
23
+ width 240ms 0ms var(--rls-standard-curve);
24
24
  }
25
25
 
26
26
  &__header {
27
- --rls-toolbar-height: 100%;
27
+ --rlc-toolbar-height: 100%;
28
28
 
29
29
  position: relative;
30
30
  width: 100%;
31
- height: var(--sizing-x28);
31
+ height: var(--rls-sizing-x28);
32
32
  box-sizing: border-box;
33
- z-index: var(--z-index-8);
34
- background: var(--background-theme-100);
33
+ z-index: var(--rls-z-index-8);
34
+ background: var(--rls-app-background-100);
35
35
 
36
36
  & + .rls-app__page,
37
37
  & + .rls-app__content {
38
- height: calc(100vh - var(--sizing-x28));
38
+ height: calc(100vh - var(--rls-sizing-x28));
39
39
  }
40
40
  }
41
41
 
@@ -67,11 +67,11 @@
67
67
  padding: 0rem;
68
68
  overflow: auto;
69
69
  box-sizing: border-box;
70
- border-radius: 0rem 0rem var(--sizing-x16) 0rem;
71
- background: var(--background-theme-100);
70
+ border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
71
+ background: var(--rls-app-background-100);
72
72
 
73
73
  & + .rls-app__page__content {
74
- --rls-snackbar-left: calc(50% + 80rem);
74
+ --rlc-snackbar-left: calc(50% + 80rem);
75
75
 
76
76
  width: calc(100% - 160rem);
77
77
  }
@@ -91,13 +91,13 @@
91
91
  }
92
92
 
93
93
  .rls-divider {
94
- height: var(--sizing-x1);
94
+ height: var(--rls-sizing-x1);
95
95
  background-image: linear-gradient(
96
96
  to right,
97
- var(--border-theme-100) 50%,
97
+ var(--rls-app-border-100) 50%,
98
98
  rgba(255, 255, 255, 0) 0%
99
99
  );
100
100
  background-position: bottom;
101
- background-size: var(--sizing-x4);
101
+ background-size: var(--rls-sizing-x4);
102
102
  background-repeat: repeat-x;
103
103
  }
package/scss/components/_box-field.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology BoxField Component
2
- // v1.1.4
2
+ // v2.0.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 08/Sep/2022
6
- // Updated: 27/Ene/2024
6
+ // Updated: 26/May/2024
7
7
 
8
8
  .rls-box-field {
9
9
  --pvt-body-background: rgba(248, 248, 248, 1);
@@ -13,27 +13,28 @@
13
13
  position: relative;
14
14
  display: flex;
15
15
  flex-direction: column;
16
- row-gap: var(--sizing-x2);
16
+ row-gap: var(--rls-sizing-x2);
17
17
  width: 100%;
18
18
  box-sizing: border-box;
19
- transition: height 160ms 0ms var(--standard-curve);
19
+ transition: height 160ms 0ms var(--rls-standard-curve);
20
20
 
21
21
  &--focused {
22
- --rls-boxfield-body-border: var(--border-1-rolster-500);
23
- --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
24
- --rls-boxfield-label-font-color: var(--color-rolster-500);
22
+ --pvt-body-background: var(--rls-app-background-500);
25
23
 
26
- --pvt-body-background: var(--background-theme-500);
24
+ --rlc-boxfield-body-border: var(--rls-theme-border-1-500);
25
+ --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
26
+ --rlc-boxfield-label-font-color: var(--rls-app-color-500);
27
27
  }
28
28
 
29
29
  &--error {
30
- --rls-boxfield-body-border: var(--border-1) solid var(--color-danger-500);
31
- --rls-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
32
- --rls-boxfield-label-font-color: var(--color-danger-500);
30
+ --rlc-boxfield-body-border: var(--rls-border-1) solid
31
+ var(--rls-danger-color-500);
32
+ --rlc-boxfield-body-shadow: 0px 0px 0px 3px var(--box-shadow-danger-500);
33
+ --rlc-boxfield-label-font-color: var(--rls-danger-color-500);
33
34
  }
34
35
 
35
36
  &--disabled {
36
- --pvt-body-background: var(--background-theme-500);
37
+ --pvt-body-background: var(--rls-app-background-500);
37
38
  --pvt-body-opacity: 0.75;
38
39
  --pvt-label-opacity: 0.5;
39
40
  }
@@ -43,19 +44,19 @@
43
44
  width: 100%;
44
45
  padding: 0rem 5rem;
45
46
  box-sizing: border-box;
46
- color: var(--rls-boxfield-label-font-color);
47
+ color: var(--rlc-boxfield-label-font-color);
47
48
  opacity: var(--pvt-label-opacity);
48
49
  overflow: hidden;
49
50
  white-space: nowrap;
50
51
  text-overflow: ellipsis;
51
- font-weight: var(--font-weight-medium);
52
- font-size: var(--smalltext-font-size);
53
- letter-spacing: var(--smalltext-letter-spacing);
54
- min-height: var(--smalltext-line-height);
55
- line-height: var(--smalltext-line-height);
52
+ font-weight: var(--rls-font-weight-medium);
53
+ font-size: var(--rls-smalltext-font-size);
54
+ letter-spacing: var(--rls-smalltext-letter-spacing);
55
+ min-height: var(--rls-smalltext-line-height);
56
+ line-height: var(--rls-smalltext-line-height);
56
57
 
57
58
  span {
58
- color: var(--color-danger-500);
59
+ color: var(--rls-danger-color-500);
59
60
  }
60
61
  }
61
62
 
@@ -64,30 +65,30 @@
64
65
  box-sizing: border-box;
65
66
  overflow: hidden;
66
67
  opacity: var(--pvt-body-opacity);
67
- border-radius: var(--sizing-x2);
68
+ border-radius: var(--rls-sizing-x2);
68
69
  background: var(--pvt-body-background);
69
- padding: var(--rls-boxfield-body-padding);
70
- border: var(--rls-boxfield-body-border);
71
- box-shadow: var(--rls-boxfield-body-shadow);
70
+ padding: var(--rlc-boxfield-body-padding);
71
+ border: var(--rlc-boxfield-body-border);
72
+ box-shadow: var(--rlc-boxfield-body-shadow);
72
73
  }
73
74
 
74
75
  &__helper {
75
- color: var(--color-theme-100);
76
+ color: var(--rls-app-color-100);
76
77
  padding: 0rem 5rem;
77
78
  box-sizing: border-box;
78
- font-weight: var(--font-weight-medium);
79
- font-size: var(--overline-font-size);
80
- letter-spacing: var(--overline-letter-spacing);
81
- min-height: var(--overline-line-height);
82
- line-height: var(--overline-line-height);
79
+ font-weight: var(--rls-font-weight-medium);
80
+ font-size: var(--rls-overline-font-size);
81
+ letter-spacing: var(--rls-overline-letter-spacing);
82
+ min-height: var(--rls-overline-line-height);
83
+ line-height: var(--rls-overline-line-height);
83
84
  overflow: hidden;
84
85
  text-overflow: ellipsis;
85
86
  white-space: nowrap;
86
87
  }
87
88
 
88
89
  &__error {
89
- padding: 0rem var(--sizing-x4);
90
+ padding: 0rem var(--rls-sizing-x4);
90
91
  box-sizing: border-box;
91
- margin-top: var(--sizing-x1);
92
+ margin-top: var(--rls-sizing-x1);
92
93
  }
93
94
  }