@oardi/css-utils 0.47.1 → 0.49.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 (31) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +24 -19
  3. package/scss/components/breadcrumb.scss +27 -25
  4. package/scss/components/button.scss +146 -140
  5. package/scss/components/card.scss +49 -47
  6. package/scss/components/chip.scss +81 -79
  7. package/scss/components/drawer.scss +30 -28
  8. package/scss/components/expansion-panel.scss +93 -91
  9. package/scss/components/form.scss +156 -155
  10. package/scss/components/icon-button.scss +112 -110
  11. package/scss/components/list.scss +57 -55
  12. package/scss/components/navbar.scss +24 -22
  13. package/scss/components/overlay.scss +9 -7
  14. package/scss/components/table.scss +35 -33
  15. package/scss/components/tabs.scss +54 -52
  16. package/scss/components/toast.scss +19 -17
  17. package/scss/components/tooltip.scss +54 -52
  18. package/scss/flex-responsive.scss +64 -76
  19. package/scss/flex.scss +114 -127
  20. package/scss/gap-responsive.scss +22 -0
  21. package/scss/gap.scss +18 -0
  22. package/scss/grid-responsive.scss +7 -5
  23. package/scss/grid.scss +14 -12
  24. package/scss/index.scss +9 -1
  25. package/scss/reboot.scss +110 -108
  26. package/scss/spacings-responsive.scss +12 -10
  27. package/scss/spacings.scss +33 -28
  28. package/scss/text.scss +69 -39
  29. package/scss/typography.scss +92 -125
  30. package/scss/utilities.scss +207 -205
  31. package/scss/variables.scss +70 -68
package/scss/utilities.scss CHANGED
@@ -1,276 +1,278 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
- // positions
5
- @each $value in map.get(theme.$theme, positions) {
6
- .position-#{$value} {
7
- position: $value !important;
4
+ @layer utilities {
5
+ // positions
6
+ @each $value in map.get(theme.$theme, positions) {
7
+ .position-#{$value} {
8
+ position: $value;
9
+ }
8
10
  }
9
- }
10
11
 
11
- .container {
12
- max-width: var(--container);
13
- margin-left: auto;
14
- margin-right: auto;
15
- padding-left: var(--spacer-3);
16
- padding-right: var(--spacer-3);
17
- width: 100%;
18
- }
12
+ .container {
13
+ max-width: var(--container);
14
+ margin-left: auto;
15
+ margin-right: auto;
16
+ padding-left: var(--spacer-3);
17
+ padding-right: var(--spacer-3);
18
+ width: 100%;
19
+ }
19
20
 
20
- .bg-opacity-10 {
21
- --bg-opacity: 0.1 !important;
22
- }
21
+ .bg-opacity-10 {
22
+ --bg-opacity: 0.1;
23
+ }
23
24
 
24
- .bg-opacity-25 {
25
- --bg-opacity: 0.25 !important;
26
- }
25
+ .bg-opacity-25 {
26
+ --bg-opacity: 0.25;
27
+ }
27
28
 
28
- .bg-opacity-50 {
29
- --bg-opacity: 0.5 !important;
30
- }
29
+ .bg-opacity-50 {
30
+ --bg-opacity: 0.5;
31
+ }
31
32
 
32
- .bg-opacity-75 {
33
- --bg-opacity: 0.75 !important;
34
- }
33
+ .bg-opacity-75 {
34
+ --bg-opacity: 0.75;
35
+ }
35
36
 
36
- @each $name, $value in map.get(theme.$theme, colors) {
37
- .bg-#{$name} {
38
- color: var(--on-#{$name}) !important;
39
- fill: var(--on-#{$name}) !important;
40
- background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity)) !important;
37
+ @each $name, $value in map.get(theme.$theme, colors) {
38
+ .bg-#{$name} {
39
+ color: var(--on-#{$name});
40
+ fill: var(--on-#{$name});
41
+ background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity));
42
+ }
41
43
  }
42
- }
43
44
 
44
- @each $name, $value in map.get(theme.$theme, grays) {
45
- .bg-gray-#{$name} {
46
- background-color: var(--gray-#{$name}) !important;
45
+ @each $name, $value in map.get(theme.$theme, grays) {
46
+ .bg-gray-#{$name} {
47
+ background-color: var(--gray-#{$name});
48
+ }
47
49
  }
48
- }
49
50
 
50
- .bg-white {
51
- background-color: var(--white) !important;
52
- }
51
+ .bg-white {
52
+ background-color: var(--white);
53
+ }
53
54
 
54
- .bg-black {
55
- background-color: var(--black) !important;
56
- }
55
+ .bg-black {
56
+ background-color: var(--black);
57
+ }
57
58
 
58
- .bg-surface {
59
- background-color: var(--bg-surface);
60
- }
59
+ .bg-surface {
60
+ background-color: var(--bg-surface);
61
+ }
61
62
 
62
- .img-responsive {
63
- width: 100% !important;
64
- }
63
+ .img-responsive {
64
+ width: 100%;
65
+ }
65
66
 
66
- .rounded {
67
- border-radius: var(--border-radius);
68
- }
67
+ .rounded {
68
+ border-radius: var(--border-radius);
69
+ }
69
70
 
70
- .rounded-sm {
71
- border-radius: var(--border-radius-sm);
72
- }
71
+ .rounded-sm {
72
+ border-radius: var(--border-radius-sm);
73
+ }
73
74
 
74
- .rounded-lg {
75
- border-radius: var(--border-radius-lg);
76
- }
75
+ .rounded-lg {
76
+ border-radius: var(--border-radius-lg);
77
+ }
77
78
 
78
- .rounded-pill {
79
- border-radius: 9999px;
80
- }
79
+ .rounded-pill {
80
+ border-radius: 9999px;
81
+ }
81
82
 
82
- .rounded-circle {
83
- border-radius: 50% !important;
84
- }
83
+ .rounded-circle {
84
+ border-radius: 50%;
85
+ }
85
86
 
86
- .rounded-top {
87
- border-top-right-radius: var(--border-radius);
88
- border-top-left-radius: var(--border-radius);
89
- }
87
+ .rounded-top {
88
+ border-top-right-radius: var(--border-radius);
89
+ border-top-left-radius: var(--border-radius);
90
+ }
90
91
 
91
- .rounded-bottom {
92
- border-bottom-right-radius: var(--border-radius);
93
- border-bottom-left-radius: var(--border-radius);
94
- }
92
+ .rounded-bottom {
93
+ border-bottom-right-radius: var(--border-radius);
94
+ border-bottom-left-radius: var(--border-radius);
95
+ }
95
96
 
96
- .rounded-start {
97
- border-top-left-radius: var(--border-radius);
98
- border-bottom-left-radius: var(--border-radius);
99
- }
97
+ .rounded-start {
98
+ border-top-left-radius: var(--border-radius);
99
+ border-bottom-left-radius: var(--border-radius);
100
+ }
100
101
 
101
- .rounded-end {
102
- border-top-right-radius: var(--border-radius);
103
- border-bottom-right-radius: var(--border-radius);
104
- }
102
+ .rounded-end {
103
+ border-top-right-radius: var(--border-radius);
104
+ border-bottom-right-radius: var(--border-radius);
105
+ }
105
106
 
106
- .rounded-0 {
107
- border-radius: 0;
108
- }
107
+ .rounded-0 {
108
+ border-radius: 0;
109
+ }
109
110
 
110
- .shadow-0 {
111
- box-shadow: none;
112
- }
111
+ .shadow-0 {
112
+ box-shadow: none;
113
+ }
113
114
 
114
- .shadow-sm {
115
- box-shadow: var(--shadow-sm);
116
- }
115
+ .shadow-sm {
116
+ box-shadow: var(--shadow-sm);
117
+ }
117
118
 
118
- .shadow {
119
- box-shadow: var(--shadow);
120
- }
119
+ .shadow {
120
+ box-shadow: var(--shadow);
121
+ }
121
122
 
122
- .shadow-lg {
123
- box-shadow: var(--shadow-lg);
124
- }
123
+ .shadow-lg {
124
+ box-shadow: var(--shadow-lg);
125
+ }
125
126
 
126
- .hover-shadow-sm {
127
- transition:
128
- box-shadow var(--transition-duration-fast) ease-out,
129
- transform var(--transition-duration-fast) ease-out;
127
+ .hover-shadow-sm {
128
+ transition:
129
+ box-shadow var(--transition-duration-fast) ease-out,
130
+ transform var(--transition-duration-fast) ease-out;
130
131
 
131
- &:hover {
132
- box-shadow: var(--shadow-sm);
132
+ &:hover {
133
+ box-shadow: var(--shadow-sm);
134
+ }
133
135
  }
134
- }
135
136
 
136
- .hover-shadow {
137
- transition:
138
- box-shadow var(--transition-duration-fast) ease-out,
139
- transform var(--transition-duration-fast) ease-out;
137
+ .hover-shadow {
138
+ transition:
139
+ box-shadow var(--transition-duration-fast) ease-out,
140
+ transform var(--transition-duration-fast) ease-out;
140
141
 
141
- &:hover {
142
- box-shadow: var(--shadow);
142
+ &:hover {
143
+ box-shadow: var(--shadow);
144
+ }
143
145
  }
144
- }
145
146
 
146
- .hover-shadow-lg {
147
- transition:
148
- box-shadow var(--transition-duration-fast) ease-out,
149
- transform var(--transition-duration-fast) ease-out;
147
+ .hover-shadow-lg {
148
+ transition:
149
+ box-shadow var(--transition-duration-fast) ease-out,
150
+ transform var(--transition-duration-fast) ease-out;
150
151
 
151
- &:hover {
152
- box-shadow: var(--shadow-lg);
152
+ &:hover {
153
+ box-shadow: var(--shadow-lg);
154
+ }
153
155
  }
154
- }
155
156
 
156
- .w-100 {
157
- width: 100% !important;
158
- }
157
+ .w-100 {
158
+ width: 100%;
159
+ }
159
160
 
160
- .w-60 {
161
- width: 60% !important;
162
- }
161
+ .w-60 {
162
+ width: 60%;
163
+ }
163
164
 
164
- .w-50 {
165
- width: 50% !important;
166
- }
165
+ .w-50 {
166
+ width: 50%;
167
+ }
167
168
 
168
- .w-40 {
169
- width: 40% !important;
170
- }
169
+ .w-40 {
170
+ width: 40%;
171
+ }
171
172
 
172
- // TODO - add several heights
173
- .h-100 {
174
- height: 100% !important;
175
- }
173
+ // TODO - add several heights
174
+ .h-100 {
175
+ height: 100%;
176
+ }
176
177
 
177
- // TODO - check if more classes are needed
178
- // arrange elements top, start, bottom, end
179
- .top-0 {
180
- top: 0px !important;
181
- }
178
+ // TODO - check if more classes are needed
179
+ // arrange elements top, start, bottom, end
180
+ .top-0 {
181
+ top: 0px;
182
+ }
182
183
 
183
- .right-0 {
184
- right: 0px !important;
185
- }
184
+ .right-0 {
185
+ right: 0px;
186
+ }
186
187
 
187
- .bottom-0 {
188
- bottom: 0px !important;
189
- }
188
+ .bottom-0 {
189
+ bottom: 0px;
190
+ }
190
191
 
191
- .left-0 {
192
- left: 0px !important;
193
- }
192
+ .left-0 {
193
+ left: 0px;
194
+ }
194
195
 
195
- .fixed-top {
196
- position: fixed;
197
- top: 0;
198
- right: 0;
199
- left: 0;
200
- z-index: 1030;
201
- }
196
+ .fixed-top {
197
+ position: fixed;
198
+ top: 0;
199
+ right: 0;
200
+ left: 0;
201
+ z-index: 1030;
202
+ }
202
203
 
203
- .overflow-y-scroll {
204
- overflow-y: scroll !important;
205
- }
204
+ .overflow-y-scroll {
205
+ overflow-y: scroll;
206
+ }
206
207
 
207
- .no-scroll {
208
- overflow: hidden;
209
- position: fixed;
210
- width: 100%;
211
- height: 100%;
212
- }
208
+ .no-scroll {
209
+ overflow: hidden;
210
+ position: fixed;
211
+ width: 100%;
212
+ height: 100%;
213
+ }
213
214
 
214
- // width, height, display with breakpoints and directions
215
- @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
216
- @media (min-width: #{$bp-value}) {
217
- .w-#{$bp}-100 {
218
- width: 100% !important;
219
- }
215
+ // width, height, display with breakpoints and directions
216
+ @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
217
+ @media (min-width: #{$bp-value}) {
218
+ .w-#{$bp}-100 {
219
+ width: 100%;
220
+ }
220
221
 
221
- .w-#{$bp}-60 {
222
- width: 60% !important;
223
- }
222
+ .w-#{$bp}-60 {
223
+ width: 60%;
224
+ }
224
225
 
225
- .w-#{$bp}-50 {
226
- width: 50% !important;
227
- }
226
+ .w-#{$bp}-50 {
227
+ width: 50%;
228
+ }
228
229
 
229
- .w-#{$bp}-40 {
230
- width: 40% !important;
231
- }
230
+ .w-#{$bp}-40 {
231
+ width: 40%;
232
+ }
232
233
 
233
- .w-#{$bp}-30 {
234
- width: 30% !important;
234
+ .w-#{$bp}-30 {
235
+ width: 30%;
236
+ }
235
237
  }
236
238
  }
237
- }
238
239
 
239
- // display
240
- .d-none {
241
- display: none !important;
242
- }
240
+ // display
241
+ .d-none {
242
+ display: none;
243
+ }
243
244
 
244
- .d-block {
245
- display: block !important;
246
- }
245
+ .d-block {
246
+ display: block;
247
+ }
247
248
 
248
- .d-inline-block {
249
- display: inline-block !important;
250
- }
249
+ .d-inline-block {
250
+ display: inline-block;
251
+ }
251
252
 
252
- .hidden {
253
- visibility: hidden !important;
254
- }
253
+ .hidden {
254
+ visibility: hidden;
255
+ }
255
256
 
256
- @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
257
- @media (min-width: #{$bp-value}) {
258
- .d-#{$bp}-none {
259
- display: none !important;
260
- }
257
+ @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
258
+ @media (min-width: #{$bp-value}) {
259
+ .d-#{$bp}-none {
260
+ display: none;
261
+ }
261
262
 
262
- .d-#{$bp}-block {
263
- display: block !important;
264
- }
263
+ .d-#{$bp}-block {
264
+ display: block;
265
+ }
265
266
 
266
- .d-#{$bp}-inline-block {
267
- display: inline-block !important;
267
+ .d-#{$bp}-inline-block {
268
+ display: inline-block;
269
+ }
268
270
  }
269
271
  }
270
- }
271
272
 
272
- @each $name, $value in map.get(theme.$theme, zIndexLevels) {
273
- .z-index-#{$name} {
274
- z-index: $value !important;
273
+ @each $name, $value in map.get(theme.$theme, zIndexLevels) {
274
+ .z-index-#{$name} {
275
+ z-index: $value;
276
+ }
275
277
  }
276
278
  }
package/scss/variables.scss CHANGED
@@ -9,73 +9,75 @@
9
9
  @return '#{$r}, #{$g}, #{$b}';
10
10
  }
11
11
 
12
- :root {
13
- @each $name, $value in map.get(theme.$theme, colors) {
14
- $base: map.get($value, base);
15
- $hover: map.get($value, hover);
16
- $active: map.get($value, active);
17
- $on: map.get($value, on);
18
-
19
- --#{$name}: #{$base};
20
- --#{$name}-hover: #{$hover};
21
- --#{$name}-active: #{$active};
22
- --#{$name}-rgb: #{to-rgb-string($base)};
23
- --on-#{$name}: #{$on};
12
+ @layer base {
13
+ :root {
14
+ @each $name, $value in map.get(theme.$theme, colors) {
15
+ $base: map.get($value, base);
16
+ $hover: map.get($value, hover);
17
+ $active: map.get($value, active);
18
+ $on: map.get($value, on);
19
+
20
+ --#{$name}: #{$base};
21
+ --#{$name}-hover: #{$hover};
22
+ --#{$name}-active: #{$active};
23
+ --#{$name}-rgb: #{to-rgb-string($base)};
24
+ --on-#{$name}: #{$on};
25
+ }
26
+
27
+ @each $name, $value in map.get(theme.$theme, grays) {
28
+ --gray-#{$name}: #{$value};
29
+ --gray-#{$name}-rgb: #{to-rgb-string($value)};
30
+ }
31
+
32
+ @each $name, $value in map.get(theme.$theme, spacings) {
33
+ --spacer-#{$name}: #{$value};
34
+ }
35
+
36
+ --line-height: 1.7;
37
+ --font-size: 16px;
38
+ --font-weight: 400;
39
+ --font-family: 'Inter', sans-serif;
40
+
41
+ --body-bg-color: var(--gray-50);
42
+
43
+ --bg-surface: var(--white);
44
+ --bg-surface-hover: var(--gray-50);
45
+ --bg-surface-active: var(--gray-100);
46
+
47
+ --text-color: var(--gray-900);
48
+ --text-color-inverse: var(--gray-50);
49
+ --text-color-muted: var(--gray-500);
50
+ --text-color-subtle: var(--gray-400);
51
+
52
+ --highlight: rgba(0, 0, 0, 0.15);
53
+
54
+ --border-width: 1px;
55
+ --border-color: var(--gray-100);
56
+
57
+ --border-radius-sm: 0.25rem;
58
+ --border-radius: 0.5rem;
59
+ --border-radius-lg: 0.75rem;
60
+
61
+ --disabled-text-color: var(--gray-600);
62
+ --disabled-bg-color: var(--gray-300);
63
+ --disabled-border-color: var(--gray-50);
64
+
65
+ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
66
+ --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
67
+ --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.175);
68
+
69
+ --focus-outline-color: rgba(var(--primary-rgb), 0.5);
70
+ --focus-outline-style: solid;
71
+ --focus-outline-width: 2.5px;
72
+ // create focus outline for every theme color
73
+ --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) rgba(var(--error-rgb), 0.5);
74
+ --focus-offset: 0px;
75
+
76
+ --container: 900px;
77
+
78
+ --transition-duration: 0.2s;
79
+ --transition-easing: ease-out;
80
+
81
+ --bg-opacity: 1;
24
82
  }
25
-
26
- @each $name, $value in map.get(theme.$theme, grays) {
27
- --gray-#{$name}: #{$value};
28
- --gray-#{$name}-rgb: #{to-rgb-string($value)};
29
- }
30
-
31
- @each $name, $value in map.get(theme.$theme, spacings) {
32
- --spacer-#{$name}: #{$value};
33
- }
34
-
35
- --line-height: 1.7;
36
- --font-size: 16px;
37
- --font-weight: 400;
38
- --font-family: 'Inter', sans-serif;
39
-
40
- --body-bg-color: var(--gray-50);
41
-
42
- --bg-surface: var(--white);
43
- --bg-surface-hover: var(--gray-50);
44
- --bg-surface-active: var(--gray-100);
45
-
46
- --text-color: var(--gray-900);
47
- --text-color-inverse: var(--gray-50);
48
- --text-color-muted: var(--gray-500);
49
- --text-color-subtle: var(--gray-400);
50
-
51
- --highlight: rgba(0, 0, 0, 0.15);
52
-
53
- --border-width: 1px;
54
- --border-color: var(--gray-100);
55
-
56
- --border-radius-sm: 0.25rem;
57
- --border-radius: 0.5rem;
58
- --border-radius-lg: 0.75rem;
59
-
60
- --disabled-text-color: var(--gray-600);
61
- --disabled-bg-color: var(--gray-300);
62
- --disabled-border-color: var(--gray-50);
63
-
64
- --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
65
- --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
66
- --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.175);
67
-
68
- --focus-outline-color: rgba(var(--primary-rgb), 0.5);
69
- --focus-outline-style: solid;
70
- --focus-outline-width: 2.5px;
71
- // create focus outline for every theme color
72
- --focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) rgba(var(--error-rgb), 0.5);
73
- --focus-offset: 0px;
74
-
75
- --container: 900px;
76
-
77
- --transition-duration: 0.2s;
78
- --transition-easing: ease-out;
79
-
80
- --bg-opacity: 1;
81
83
  }