@rolster/styles-foundations 3.0.4 → 3.0.5

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 (85) hide show
  1. package/LICENSE +21 -21
  2. package/dist/design-system-bordered.css +13 -15
  3. package/dist/design-system-bordered.css.map +1 -1
  4. package/dist/design-system-bordered.min.css +3 -3
  5. package/dist/design-system-filled.css +13 -15
  6. package/dist/design-system-filled.css.map +1 -1
  7. package/dist/design-system-filled.min.css +3 -3
  8. package/package.json +41 -41
  9. package/scss/design-system-bordered/app.scss +228 -228
  10. package/scss/design-system-bordered/atoms/amount.scss +58 -58
  11. package/scss/design-system-bordered/atoms/area-text.scss +100 -100
  12. package/scss/design-system-bordered/atoms/avatar.scss +50 -50
  13. package/scss/design-system-bordered/atoms/badge.scss +51 -51
  14. package/scss/design-system-bordered/atoms/breadcrumb.scss +87 -87
  15. package/scss/design-system-bordered/atoms/button-action.scss +124 -124
  16. package/scss/design-system-bordered/atoms/button-option.scss +49 -49
  17. package/scss/design-system-bordered/atoms/image.scss +37 -37
  18. package/scss/design-system-bordered/atoms/input-decimal.scss +15 -15
  19. package/scss/design-system-bordered/atoms/input-money.scss +15 -15
  20. package/scss/design-system-bordered/atoms/input-number.scss +12 -12
  21. package/scss/design-system-bordered/atoms/input-password.scss +48 -48
  22. package/scss/design-system-bordered/atoms/input-percentage.scss +12 -12
  23. package/scss/design-system-bordered/atoms/input-search.scss +28 -28
  24. package/scss/design-system-bordered/atoms/input-text.scss +12 -12
  25. package/scss/design-system-bordered/atoms/label.scss +20 -20
  26. package/scss/design-system-bordered/atoms/led.scss +31 -31
  27. package/scss/design-system-bordered/atoms/message-icon.scss +21 -21
  28. package/scss/design-system-bordered/atoms/poster.scss +42 -42
  29. package/scss/design-system-bordered/atoms/progress-bar.scss +83 -83
  30. package/scss/design-system-bordered/atoms/progress-circular.scss +59 -59
  31. package/scss/design-system-bordered/atoms/radio-button.scss +55 -55
  32. package/scss/design-system-bordered/atoms/spinner.scss +102 -102
  33. package/scss/design-system-bordered/atoms/switch.scss +71 -71
  34. package/scss/design-system-bordered/atoms/tabular-text.scss +38 -38
  35. package/scss/design-system-bordered/molecules/alert.scss +52 -52
  36. package/scss/design-system-bordered/molecules/button-progress.scss +15 -15
  37. package/scss/design-system-bordered/molecules/button-toggle.scss +100 -100
  38. package/scss/design-system-bordered/molecules/field-area.scss +13 -13
  39. package/scss/design-system-bordered/molecules/field-decimal.scss +14 -14
  40. package/scss/design-system-bordered/molecules/field-file.scss +41 -41
  41. package/scss/design-system-bordered/molecules/field-list-suggestions.scss +65 -65
  42. package/scss/design-system-bordered/molecules/field-money.scss +14 -14
  43. package/scss/design-system-bordered/molecules/field-password.scss +23 -23
  44. package/scss/design-system-bordered/molecules/field-readonly.scss +24 -24
  45. package/scss/design-system-bordered/molecules/label-check-box.scss +72 -72
  46. package/scss/design-system-bordered/molecules/label-radio-button.scss +79 -79
  47. package/scss/design-system-bordered/molecules/label-switch.scss +71 -71
  48. package/scss/design-system-bordered/molecules/message-empty.scss +16 -17
  49. package/scss/design-system-bordered/molecules/pagination.scss +114 -114
  50. package/scss/design-system-bordered/molecules/picker-day-range.scss +109 -109
  51. package/scss/design-system-bordered/molecules/picker-day.scss +117 -117
  52. package/scss/design-system-bordered/molecules/picker-month.scss +67 -67
  53. package/scss/design-system-bordered/molecules/picker-selector-title.scss +54 -54
  54. package/scss/design-system-bordered/molecules/picker-year.scss +113 -113
  55. package/scss/design-system-bordered/molecules/slider.scss +74 -74
  56. package/scss/design-system-bordered/molecules/tabs.scss +51 -51
  57. package/scss/design-system-bordered/molecules/toolbar.scss +53 -53
  58. package/scss/design-system-bordered/organisms/bottom-sheet.scss +108 -108
  59. package/scss/design-system-bordered/organisms/card.scss +36 -36
  60. package/scss/design-system-bordered/organisms/confirmation.scss +186 -186
  61. package/scss/design-system-bordered/organisms/dropdown.scss +45 -45
  62. package/scss/design-system-bordered/organisms/field-autocomplete.scss +79 -79
  63. package/scss/design-system-bordered/organisms/field-clock.scss +62 -62
  64. package/scss/design-system-bordered/organisms/field-date-range.scss +60 -60
  65. package/scss/design-system-bordered/organisms/field-date.scss +61 -61
  66. package/scss/design-system-bordered/organisms/form-navigation.scss +46 -46
  67. package/scss/design-system-bordered/organisms/image-chooser.scss +50 -50
  68. package/scss/design-system-bordered/organisms/image-editor-modal.scss +23 -23
  69. package/scss/design-system-bordered/organisms/image-editor.scss +118 -118
  70. package/scss/design-system-bordered/organisms/modal-sheet.scss +138 -138
  71. package/scss/design-system-bordered/organisms/modal.scss +75 -75
  72. package/scss/design-system-bordered/organisms/picker-clock.scss +144 -144
  73. package/scss/design-system-bordered/organisms/picker-date-range.scss +84 -84
  74. package/scss/design-system-bordered/organisms/picker-date.scss +86 -86
  75. package/scss/design-system-bordered/organisms/snackbar.scss +93 -93
  76. package/scss/design-system-filled/atoms/led.scss +31 -31
  77. package/scss/design-system-filled/molecules/message-empty.scss +16 -17
  78. package/scss/foundations/borders.scss +14 -14
  79. package/scss/foundations/elevations.scss +130 -130
  80. package/scss/foundations/flex-boxs.scss +96 -96
  81. package/scss/foundations/helpers.scss +123 -123
  82. package/scss/foundations/themes.scss +230 -230
  83. package/scss/utilities/helpers.scss +124 -124
  84. package/scss/utilities/layout.scss +83 -83
  85. package/scss/utilities/typographics.scss +208 -208
package/scss/foundations/themes.scss CHANGED
@@ -1,230 +1,230 @@
1
- // Rolster Technology Themes Foundations
2
- // v2.5.3
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 03/Mar/2022
6
- // Updated: 09/Abr/2026
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
- }
18
-
19
- @mixin rolster-border-color($theme, $token) {
20
- --rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
21
- var(--rls-#{$theme}-color-#{$token});
22
-
23
- --rls-#{$theme}-border-2-#{$token}: var(--rls-border-2) solid
24
- var(--rls-#{$theme}-color-#{$token});
25
-
26
- --rls-#{$theme}-border-4-#{$token}: var(--rls-border-4) solid
27
- var(--rls-#{$theme}-color-#{$token});
28
- }
29
-
30
- @mixin rolster-border-token($theme) {
31
- @include rolster-border-color($theme, 100);
32
- @include rolster-border-color($theme, 200);
33
- @include rolster-border-color($theme, 300);
34
- @include rolster-border-color($theme, 400);
35
- @include rolster-border-color($theme, 500);
36
- @include rolster-border-color($theme, 600);
37
- @include rolster-border-color($theme, 700);
38
- @include rolster-border-color($theme, 800);
39
- @include rolster-border-color($theme, 900);
40
- }
41
-
42
- @mixin rolster-border-theme($theme, $token) {
43
- --rls-theme-border-1-#{$token}: var(--rls-border-1) solid
44
- var(--rls-#{$theme}-color-#{$token});
45
-
46
- --rls-theme-border-2-#{$token}: var(--rls-border-2) solid
47
- var(--rls-#{$theme}-color-#{$token});
48
-
49
- --rls-theme-border-4-#{$token}: var(--rls-border-4) solid
50
- var(--rls-#{$theme}-color-#{$token});
51
- }
52
-
53
- @mixin rolster-theme($theme) {
54
- --rls-theme-color-950: var(--rls-#{$theme}-color-950);
55
-
56
- --rls-theme-color-900: var(--rls-#{$theme}-color-900);
57
-
58
- --rls-theme-color-800: var(--rls-#{$theme}-color-800);
59
-
60
- --rls-theme-color-700: var(--rls-#{$theme}-color-700);
61
-
62
- --rls-theme-color-600: var(--rls-#{$theme}-color-600);
63
-
64
- --rls-theme-color-500: var(--rls-#{$theme}-color-500);
65
-
66
- --rls-theme-color-400: var(--rls-#{$theme}-color-400);
67
-
68
- --rls-theme-color-300: var(--rls-#{$theme}-color-300);
69
-
70
- --rls-theme-color-200: var(--rls-#{$theme}-color-200);
71
-
72
- --rls-theme-color-100: var(--rls-#{$theme}-color-100);
73
-
74
- --rls-theme-color-050: var(--rls-#{$theme}-color-050);
75
-
76
- --rls-theme-font-900: var(--rls-#{$theme}-color-050);
77
-
78
- --rls-theme-color-050: var(--rls-#{$theme}-color-050);
79
-
80
- --rls-theme-font-100: var(--rls-#{$theme}-color-900);
81
-
82
- --rls-theme-skeleton-500: var(--rls-#{$theme}-skeleton-500);
83
-
84
- --rls-theme-skeleton-400: var(--rls-#{$theme}-skeleton-400);
85
-
86
- --rls-theme-skeleton-300: var(--rls-#{$theme}-skeleton-300);
87
-
88
- --rls-theme-skeleton-200: var(--rls-#{$theme}-skeleton-200);
89
-
90
- --rls-theme-skeleton-100: var(--rls-#{$theme}-skeleton-100);
91
-
92
- --rls-theme-shadow-color-500: var(--rls-#{$theme}-shadow-color-500);
93
-
94
- --rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
95
-
96
- --rls-theme-backdrop-100: var(--rls-#{$theme}-backdrop-100);
97
-
98
- --rls-theme-backdrop-200: var(--rls-#{$theme}-backdrop-200);
99
-
100
- --rls-theme-backdrop-300: var(--rls-#{$theme}-backdrop-300);
101
-
102
- --rls-theme-backdrop-400: var(--rls-#{$theme}-backdrop-400);
103
-
104
- --rls-theme-backdrop-500: var(--rls-#{$theme}-backdrop-500);
105
-
106
- --rls-theme-backdrop-600: var(--rls-#{$theme}-backdrop-600);
107
-
108
- --rls-theme-backdrop-700: var(--rls-#{$theme}-backdrop-700);
109
-
110
- --rls-theme-backdrop-800: var(--rls-#{$theme}-backdrop-800);
111
-
112
- --rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
113
-
114
- --rls-theme-gradient-700: var(--rls-#{$theme}-gradient-700);
115
-
116
- --rls-theme-gradient-600: var(--rls-#{$theme}-gradient-600);
117
-
118
- --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
119
-
120
- --rls-theme-gradient-400: var(--rls-#{$theme}-gradient-400);
121
-
122
- --rls-theme-gradient-300: var(--rls-#{$theme}-gradient-300);
123
-
124
- @include rolster-border-theme($theme, 900);
125
- @include rolster-border-theme($theme, 800);
126
- @include rolster-border-theme($theme, 700);
127
- @include rolster-border-theme($theme, 600);
128
- @include rolster-border-theme($theme, 500);
129
- @include rolster-border-theme($theme, 400);
130
- @include rolster-border-theme($theme, 300);
131
- @include rolster-border-theme($theme, 200);
132
- @include rolster-border-theme($theme, 100);
133
- }
134
-
135
- body {
136
- @include rolster-app-border('050');
137
- @include rolster-app-border('100');
138
- @include rolster-app-border('200');
139
- @include rolster-app-border('300');
140
- @include rolster-app-border('400');
141
- @include rolster-app-border('500');
142
- @include rolster-app-border('600');
143
- @include rolster-app-border('700');
144
- @include rolster-app-border('800');
145
- @include rolster-app-border('900');
146
-
147
- @include rolster-border-token('standard');
148
- @include rolster-border-token('primary');
149
- @include rolster-border-token('secondary');
150
- @include rolster-border-token('tertiary');
151
- @include rolster-border-token('success');
152
- @include rolster-border-token('info');
153
- @include rolster-border-token('warning');
154
- @include rolster-border-token('danger');
155
- @include rolster-border-token('berry');
156
- @include rolster-border-token('ross');
157
- @include rolster-border-token('hope');
158
- @include rolster-border-token('mountains');
159
- @include rolster-border-token('amaizing');
160
- @include rolster-border-token('purple');
161
- @include rolster-border-token('amber');
162
- @include rolster-border-token('smartness');
163
- @include rolster-border-token('obsidian');
164
-
165
- @include rolster-theme('primary');
166
- }
167
-
168
- *[rls-theme='standard'] {
169
- @include rolster-theme('standard');
170
- }
171
-
172
- *[rls-theme='secondary'] {
173
- @include rolster-theme('secondary');
174
- }
175
-
176
- *[rls-theme='tertiary'] {
177
- @include rolster-theme('tertiary');
178
- }
179
-
180
- *[rls-theme='success'] {
181
- @include rolster-theme('success');
182
- }
183
-
184
- *[rls-theme='info'] {
185
- @include rolster-theme('info');
186
- }
187
-
188
- *[rls-theme='warning'] {
189
- @include rolster-theme('warning');
190
- }
191
-
192
- *[rls-theme='danger'] {
193
- @include rolster-theme('danger');
194
- }
195
-
196
- *[rls-theme='berry'] {
197
- @include rolster-theme('berry');
198
- }
199
-
200
- *[rls-theme='ross'] {
201
- @include rolster-theme('ross');
202
- }
203
-
204
- *[rls-theme='hope'] {
205
- @include rolster-theme('hope');
206
- }
207
-
208
- *[rls-theme='mountains'] {
209
- @include rolster-theme('mountains');
210
- }
211
-
212
- *[rls-theme='amaizing'] {
213
- @include rolster-theme('amaizing');
214
- }
215
-
216
- *[rls-theme='purple'] {
217
- @include rolster-theme('purple');
218
- }
219
-
220
- *[rls-theme='amber'] {
221
- @include rolster-theme('amber');
222
- }
223
-
224
- *[rls-theme='smartness'] {
225
- @include rolster-theme('smartness');
226
- }
227
-
228
- *[rls-theme='obsidian'] {
229
- @include rolster-theme('obsidian');
230
- }
1
+ // Rolster Technology Themes Foundations
2
+ // v2.5.3
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 03/Mar/2022
6
+ // Updated: 09/Abr/2026
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
+ }
18
+
19
+ @mixin rolster-border-color($theme, $token) {
20
+ --rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
21
+ var(--rls-#{$theme}-color-#{$token});
22
+
23
+ --rls-#{$theme}-border-2-#{$token}: var(--rls-border-2) solid
24
+ var(--rls-#{$theme}-color-#{$token});
25
+
26
+ --rls-#{$theme}-border-4-#{$token}: var(--rls-border-4) solid
27
+ var(--rls-#{$theme}-color-#{$token});
28
+ }
29
+
30
+ @mixin rolster-border-token($theme) {
31
+ @include rolster-border-color($theme, 100);
32
+ @include rolster-border-color($theme, 200);
33
+ @include rolster-border-color($theme, 300);
34
+ @include rolster-border-color($theme, 400);
35
+ @include rolster-border-color($theme, 500);
36
+ @include rolster-border-color($theme, 600);
37
+ @include rolster-border-color($theme, 700);
38
+ @include rolster-border-color($theme, 800);
39
+ @include rolster-border-color($theme, 900);
40
+ }
41
+
42
+ @mixin rolster-border-theme($theme, $token) {
43
+ --rls-theme-border-1-#{$token}: var(--rls-border-1) solid
44
+ var(--rls-#{$theme}-color-#{$token});
45
+
46
+ --rls-theme-border-2-#{$token}: var(--rls-border-2) solid
47
+ var(--rls-#{$theme}-color-#{$token});
48
+
49
+ --rls-theme-border-4-#{$token}: var(--rls-border-4) solid
50
+ var(--rls-#{$theme}-color-#{$token});
51
+ }
52
+
53
+ @mixin rolster-theme($theme) {
54
+ --rls-theme-color-950: var(--rls-#{$theme}-color-950);
55
+
56
+ --rls-theme-color-900: var(--rls-#{$theme}-color-900);
57
+
58
+ --rls-theme-color-800: var(--rls-#{$theme}-color-800);
59
+
60
+ --rls-theme-color-700: var(--rls-#{$theme}-color-700);
61
+
62
+ --rls-theme-color-600: var(--rls-#{$theme}-color-600);
63
+
64
+ --rls-theme-color-500: var(--rls-#{$theme}-color-500);
65
+
66
+ --rls-theme-color-400: var(--rls-#{$theme}-color-400);
67
+
68
+ --rls-theme-color-300: var(--rls-#{$theme}-color-300);
69
+
70
+ --rls-theme-color-200: var(--rls-#{$theme}-color-200);
71
+
72
+ --rls-theme-color-100: var(--rls-#{$theme}-color-100);
73
+
74
+ --rls-theme-color-050: var(--rls-#{$theme}-color-050);
75
+
76
+ --rls-theme-font-900: var(--rls-#{$theme}-color-050);
77
+
78
+ --rls-theme-color-050: var(--rls-#{$theme}-color-050);
79
+
80
+ --rls-theme-font-100: var(--rls-#{$theme}-color-900);
81
+
82
+ --rls-theme-skeleton-500: var(--rls-#{$theme}-skeleton-500);
83
+
84
+ --rls-theme-skeleton-400: var(--rls-#{$theme}-skeleton-400);
85
+
86
+ --rls-theme-skeleton-300: var(--rls-#{$theme}-skeleton-300);
87
+
88
+ --rls-theme-skeleton-200: var(--rls-#{$theme}-skeleton-200);
89
+
90
+ --rls-theme-skeleton-100: var(--rls-#{$theme}-skeleton-100);
91
+
92
+ --rls-theme-shadow-color-500: var(--rls-#{$theme}-shadow-color-500);
93
+
94
+ --rls-theme-shadow-500: var(--rls-#{$theme}-shadow-500);
95
+
96
+ --rls-theme-backdrop-100: var(--rls-#{$theme}-backdrop-100);
97
+
98
+ --rls-theme-backdrop-200: var(--rls-#{$theme}-backdrop-200);
99
+
100
+ --rls-theme-backdrop-300: var(--rls-#{$theme}-backdrop-300);
101
+
102
+ --rls-theme-backdrop-400: var(--rls-#{$theme}-backdrop-400);
103
+
104
+ --rls-theme-backdrop-500: var(--rls-#{$theme}-backdrop-500);
105
+
106
+ --rls-theme-backdrop-600: var(--rls-#{$theme}-backdrop-600);
107
+
108
+ --rls-theme-backdrop-700: var(--rls-#{$theme}-backdrop-700);
109
+
110
+ --rls-theme-backdrop-800: var(--rls-#{$theme}-backdrop-800);
111
+
112
+ --rls-theme-backdrop-900: var(--rls-#{$theme}-backdrop-900);
113
+
114
+ --rls-theme-gradient-700: var(--rls-#{$theme}-gradient-700);
115
+
116
+ --rls-theme-gradient-600: var(--rls-#{$theme}-gradient-600);
117
+
118
+ --rls-theme-gradient-500: var(--rls-#{$theme}-gradient-500);
119
+
120
+ --rls-theme-gradient-400: var(--rls-#{$theme}-gradient-400);
121
+
122
+ --rls-theme-gradient-300: var(--rls-#{$theme}-gradient-300);
123
+
124
+ @include rolster-border-theme($theme, 900);
125
+ @include rolster-border-theme($theme, 800);
126
+ @include rolster-border-theme($theme, 700);
127
+ @include rolster-border-theme($theme, 600);
128
+ @include rolster-border-theme($theme, 500);
129
+ @include rolster-border-theme($theme, 400);
130
+ @include rolster-border-theme($theme, 300);
131
+ @include rolster-border-theme($theme, 200);
132
+ @include rolster-border-theme($theme, 100);
133
+ }
134
+
135
+ body {
136
+ @include rolster-app-border('050');
137
+ @include rolster-app-border('100');
138
+ @include rolster-app-border('200');
139
+ @include rolster-app-border('300');
140
+ @include rolster-app-border('400');
141
+ @include rolster-app-border('500');
142
+ @include rolster-app-border('600');
143
+ @include rolster-app-border('700');
144
+ @include rolster-app-border('800');
145
+ @include rolster-app-border('900');
146
+
147
+ @include rolster-border-token('standard');
148
+ @include rolster-border-token('primary');
149
+ @include rolster-border-token('secondary');
150
+ @include rolster-border-token('tertiary');
151
+ @include rolster-border-token('success');
152
+ @include rolster-border-token('info');
153
+ @include rolster-border-token('warning');
154
+ @include rolster-border-token('danger');
155
+ @include rolster-border-token('berry');
156
+ @include rolster-border-token('ross');
157
+ @include rolster-border-token('hope');
158
+ @include rolster-border-token('mountains');
159
+ @include rolster-border-token('amaizing');
160
+ @include rolster-border-token('purple');
161
+ @include rolster-border-token('amber');
162
+ @include rolster-border-token('smartness');
163
+ @include rolster-border-token('obsidian');
164
+
165
+ @include rolster-theme('primary');
166
+ }
167
+
168
+ *[rls-theme='standard'] {
169
+ @include rolster-theme('standard');
170
+ }
171
+
172
+ *[rls-theme='secondary'] {
173
+ @include rolster-theme('secondary');
174
+ }
175
+
176
+ *[rls-theme='tertiary'] {
177
+ @include rolster-theme('tertiary');
178
+ }
179
+
180
+ *[rls-theme='success'] {
181
+ @include rolster-theme('success');
182
+ }
183
+
184
+ *[rls-theme='info'] {
185
+ @include rolster-theme('info');
186
+ }
187
+
188
+ *[rls-theme='warning'] {
189
+ @include rolster-theme('warning');
190
+ }
191
+
192
+ *[rls-theme='danger'] {
193
+ @include rolster-theme('danger');
194
+ }
195
+
196
+ *[rls-theme='berry'] {
197
+ @include rolster-theme('berry');
198
+ }
199
+
200
+ *[rls-theme='ross'] {
201
+ @include rolster-theme('ross');
202
+ }
203
+
204
+ *[rls-theme='hope'] {
205
+ @include rolster-theme('hope');
206
+ }
207
+
208
+ *[rls-theme='mountains'] {
209
+ @include rolster-theme('mountains');
210
+ }
211
+
212
+ *[rls-theme='amaizing'] {
213
+ @include rolster-theme('amaizing');
214
+ }
215
+
216
+ *[rls-theme='purple'] {
217
+ @include rolster-theme('purple');
218
+ }
219
+
220
+ *[rls-theme='amber'] {
221
+ @include rolster-theme('amber');
222
+ }
223
+
224
+ *[rls-theme='smartness'] {
225
+ @include rolster-theme('smartness');
226
+ }
227
+
228
+ *[rls-theme='obsidian'] {
229
+ @include rolster-theme('obsidian');
230
+ }