@oardi/css-utils 0.47.1 → 0.48.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 (29) 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 +77 -75
  19. package/scss/flex.scss +127 -125
  20. package/scss/grid-responsive.scss +7 -5
  21. package/scss/grid.scss +14 -12
  22. package/scss/index.scss +2 -1
  23. package/scss/reboot.scss +110 -108
  24. package/scss/spacings-responsive.scss +12 -10
  25. package/scss/spacings.scss +33 -28
  26. package/scss/text.scss +69 -39
  27. package/scss/typography.scss +92 -125
  28. package/scss/utilities.scss +36 -36
  29. package/scss/variables.scss +70 -68
package/scss/typography.scss CHANGED
@@ -1,145 +1,112 @@
1
- :root {
2
- --h1: 500 2.25rem var(--font-family);
3
- --h2: 500 2rem var(--font-family);
4
- --h3: 500 1.45rem var(--font-family);
5
- --h4: 500 1.35rem var(--font-family);
6
- --h5: 500 1.25rem var(--font-family);
7
- --h6: 500 1rem var(--font-family);
8
-
9
- --font-size-xs: 0.75rem;
10
- --font-size-sm: 0.875rem;
11
- --font-size-md: 1rem;
12
- --font-size-lg: 1.125rem;
13
- --font-size-xl: 1.25rem;
14
- --font-size-xxl: 1.5rem;
15
- --font-size-xxxl: 2rem;
16
- }
1
+ @layer base {
2
+ :root {
3
+ --h1: 500 2.25rem var(--font-family);
4
+ --h2: 500 2rem var(--font-family);
5
+ --h3: 500 1.45rem var(--font-family);
6
+ --h4: 500 1.35rem var(--font-family);
7
+ --h5: 500 1.25rem var(--font-family);
8
+ --h6: 500 1rem var(--font-family);
9
+
10
+ --font-size-xs: 0.75rem;
11
+ --font-size-sm: 0.875rem;
12
+ --font-size-md: 1rem;
13
+ --font-size-lg: 1.125rem;
14
+ --font-size-xl: 1.25rem;
15
+ --font-size-xxl: 1.5rem;
16
+ --font-size-xxxl: 2rem;
17
+ }
17
18
 
18
- small {
19
- font-size: 0.833rem;
20
- }
19
+ small {
20
+ font-size: 0.833rem;
21
+ }
21
22
 
22
- h1,
23
- .h1,
24
- h2,
25
- .h2,
26
- h3,
27
- .h3,
28
- h4,
29
- .h4,
30
- h5,
31
- .h5,
32
- h6,
33
- .h6 {
34
- margin: 0;
35
- margin-bottom: 0.5rem;
36
- }
23
+ h1,
24
+ .h1,
25
+ h2,
26
+ .h2,
27
+ h3,
28
+ .h3,
29
+ h4,
30
+ .h4,
31
+ h5,
32
+ .h5,
33
+ h6,
34
+ .h6 {
35
+ margin: 0;
36
+ margin-bottom: 0.5rem;
37
+ }
37
38
 
38
- h1,
39
- .h1 {
40
- font: var(--h1);
41
- letter-spacing: -1px;
42
- line-height: 1.2;
43
- }
39
+ h1,
40
+ .h1 {
41
+ font: var(--h1);
42
+ letter-spacing: -1px;
43
+ line-height: 1.2;
44
+ }
44
45
 
45
- h2,
46
- .h2 {
47
- font: var(--h2);
48
- line-height: 1.25;
49
- }
46
+ h2,
47
+ .h2 {
48
+ font: var(--h2);
49
+ line-height: 1.25;
50
+ }
50
51
 
51
- h3,
52
- .h3 {
53
- font: var(--h3);
54
- line-height: 1.3;
55
- }
52
+ h3,
53
+ .h3 {
54
+ font: var(--h3);
55
+ line-height: 1.3;
56
+ }
56
57
 
57
- h4,
58
- .h4 {
59
- font: var(--h4);
60
- line-height: 1.35;
61
- }
58
+ h4,
59
+ .h4 {
60
+ font: var(--h4);
61
+ line-height: 1.35;
62
+ }
62
63
 
63
- h5,
64
- .h5 {
65
- font: var(--h5);
66
- line-height: 1.4;
67
- }
64
+ h5,
65
+ .h5 {
66
+ font: var(--h5);
67
+ line-height: 1.4;
68
+ }
68
69
 
69
- h6,
70
- .h6 {
71
- font: var(--h6);
72
- line-height: 1.45;
73
- }
70
+ h6,
71
+ .h6 {
72
+ font: var(--h6);
73
+ line-height: 1.45;
74
+ }
74
75
 
75
- .text-xs {
76
- font-size: var(--font-size-xs);
77
- }
78
- .text-sm {
79
- font-size: var(--font-size-sm);
80
- }
81
- .text-md {
82
- font-size: var(--font-size-md);
83
- }
84
- .text-lg {
85
- font-size: var(--font-size-lg);
86
- }
87
- .text-xl {
88
- font-size: var(--font-size-xl);
89
- }
90
- .text-xxl {
91
- font-size: var(--font-size-xxl);
92
- }
93
- .text-xxxl {
94
- font-size: var(--font-size-xxxl);
95
- }
76
+ a {
77
+ --link-text-color: var(--primary);
96
78
 
97
- a {
98
- --link-text-color: var(--primary);
79
+ --link-focus-outline-width: var(--focus-outline-width);
80
+ --link-focus-outline-style: var(--focus-outline-style);
81
+ --link-focus-outline-color: var(--focus-outline-color);
99
82
 
100
- --link-focus-outline-width: var(--focus-outline-width);
101
- --link-focus-outline-style: var(--focus-outline-style);
102
- --link-focus-outline-color: var(--focus-outline-color);
83
+ --link-transition-duration: var(--transition-duration, 0.18s);
84
+ --link-transition-easing: var(--transition-easing, ease-out);
103
85
 
104
- --link-transition-duration: var(--transition-duration, 0.18s);
105
- --link-transition-easing: var(--transition-easing, ease-out);
86
+ color: var(--link-text-color);
87
+ fill: var(--link-text-color);
106
88
 
107
- color: var(--link-text-color);
108
- fill: var(--link-text-color);
89
+ text-decoration: none;
109
90
 
110
- text-decoration: none;
91
+ transition:
92
+ color var(--link-transition-duration) var(--link-transition-easing),
93
+ background-color var(--link-transition-duration) var(--link-transition-easing),
94
+ box-shadow var(--link-transition-duration) var(--link-transition-easing),
95
+ border-color var(--link-transition-duration) var(--link-transition-easing),
96
+ outline-offset var(--link-transition-duration) var(--link-transition-easing);
111
97
 
112
- transition:
113
- color var(--link-transition-duration) var(--link-transition-easing),
114
- background-color var(--link-transition-duration) var(--link-transition-easing),
115
- box-shadow var(--link-transition-duration) var(--link-transition-easing),
116
- border-color var(--link-transition-duration) var(--link-transition-easing),
117
- outline-offset var(--link-transition-duration) var(--link-transition-easing);
98
+ &:hover {
99
+ text-decoration: underline;
100
+ }
118
101
 
119
- &:hover {
120
- text-decoration: underline;
102
+ &:focus {
103
+ outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
104
+ outline-offset: var(--focus-offset);
105
+ }
121
106
  }
122
107
 
123
- &:focus {
124
- outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
125
- outline-offset: var(--focus-offset);
108
+ p {
109
+ --paragraph-margin: 0 0 0.5rem 0;
110
+ margin: var(--paragraph-margin);
126
111
  }
127
112
  }
128
-
129
- p {
130
- --paragraph-margin: 0 0 0.5rem 0;
131
- margin: var(--paragraph-margin);
132
- }
133
-
134
- // *::selection {
135
- // background: var(--primary);
136
- // color: #ffffff;
137
- // }
138
- // *::-moz-selection {
139
- // background: var(--primary);
140
- // color: #ffffff;
141
- // }
142
- // *::-webkit-selection {
143
- // background: var(--primary);
144
- // color: #ffffff;
145
- // }
package/scss/utilities.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  // positions
5
5
  @each $value in map.get(theme.$theme, positions) {
6
6
  .position-#{$value} {
7
- position: $value !important;
7
+ position: $value;
8
8
  }
9
9
  }
10
10
 
@@ -18,41 +18,41 @@
18
18
  }
19
19
 
20
20
  .bg-opacity-10 {
21
- --bg-opacity: 0.1 !important;
21
+ --bg-opacity: 0.1;
22
22
  }
23
23
 
24
24
  .bg-opacity-25 {
25
- --bg-opacity: 0.25 !important;
25
+ --bg-opacity: 0.25;
26
26
  }
27
27
 
28
28
  .bg-opacity-50 {
29
- --bg-opacity: 0.5 !important;
29
+ --bg-opacity: 0.5;
30
30
  }
31
31
 
32
32
  .bg-opacity-75 {
33
- --bg-opacity: 0.75 !important;
33
+ --bg-opacity: 0.75;
34
34
  }
35
35
 
36
36
  @each $name, $value in map.get(theme.$theme, colors) {
37
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;
38
+ color: var(--on-#{$name});
39
+ fill: var(--on-#{$name});
40
+ background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity));
41
41
  }
42
42
  }
43
43
 
44
44
  @each $name, $value in map.get(theme.$theme, grays) {
45
45
  .bg-gray-#{$name} {
46
- background-color: var(--gray-#{$name}) !important;
46
+ background-color: var(--gray-#{$name});
47
47
  }
48
48
  }
49
49
 
50
50
  .bg-white {
51
- background-color: var(--white) !important;
51
+ background-color: var(--white);
52
52
  }
53
53
 
54
54
  .bg-black {
55
- background-color: var(--black) !important;
55
+ background-color: var(--black);
56
56
  }
57
57
 
58
58
  .bg-surface {
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  .img-responsive {
63
- width: 100% !important;
63
+ width: 100%;
64
64
  }
65
65
 
66
66
  .rounded {
@@ -80,7 +80,7 @@
80
80
  }
81
81
 
82
82
  .rounded-circle {
83
- border-radius: 50% !important;
83
+ border-radius: 50%;
84
84
  }
85
85
 
86
86
  .rounded-top {
@@ -154,42 +154,42 @@
154
154
  }
155
155
 
156
156
  .w-100 {
157
- width: 100% !important;
157
+ width: 100%;
158
158
  }
159
159
 
160
160
  .w-60 {
161
- width: 60% !important;
161
+ width: 60%;
162
162
  }
163
163
 
164
164
  .w-50 {
165
- width: 50% !important;
165
+ width: 50%;
166
166
  }
167
167
 
168
168
  .w-40 {
169
- width: 40% !important;
169
+ width: 40%;
170
170
  }
171
171
 
172
172
  // TODO - add several heights
173
173
  .h-100 {
174
- height: 100% !important;
174
+ height: 100%;
175
175
  }
176
176
 
177
177
  // TODO - check if more classes are needed
178
178
  // arrange elements top, start, bottom, end
179
179
  .top-0 {
180
- top: 0px !important;
180
+ top: 0px;
181
181
  }
182
182
 
183
183
  .right-0 {
184
- right: 0px !important;
184
+ right: 0px;
185
185
  }
186
186
 
187
187
  .bottom-0 {
188
- bottom: 0px !important;
188
+ bottom: 0px;
189
189
  }
190
190
 
191
191
  .left-0 {
192
- left: 0px !important;
192
+ left: 0px;
193
193
  }
194
194
 
195
195
  .fixed-top {
@@ -201,7 +201,7 @@
201
201
  }
202
202
 
203
203
  .overflow-y-scroll {
204
- overflow-y: scroll !important;
204
+ overflow-y: scroll;
205
205
  }
206
206
 
207
207
  .no-scroll {
@@ -215,62 +215,62 @@
215
215
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
216
216
  @media (min-width: #{$bp-value}) {
217
217
  .w-#{$bp}-100 {
218
- width: 100% !important;
218
+ width: 100%;
219
219
  }
220
220
 
221
221
  .w-#{$bp}-60 {
222
- width: 60% !important;
222
+ width: 60%;
223
223
  }
224
224
 
225
225
  .w-#{$bp}-50 {
226
- width: 50% !important;
226
+ width: 50%;
227
227
  }
228
228
 
229
229
  .w-#{$bp}-40 {
230
- width: 40% !important;
230
+ width: 40%;
231
231
  }
232
232
 
233
233
  .w-#{$bp}-30 {
234
- width: 30% !important;
234
+ width: 30%;
235
235
  }
236
236
  }
237
237
  }
238
238
 
239
239
  // display
240
240
  .d-none {
241
- display: none !important;
241
+ display: none;
242
242
  }
243
243
 
244
244
  .d-block {
245
- display: block !important;
245
+ display: block;
246
246
  }
247
247
 
248
248
  .d-inline-block {
249
- display: inline-block !important;
249
+ display: inline-block;
250
250
  }
251
251
 
252
252
  .hidden {
253
- visibility: hidden !important;
253
+ visibility: hidden;
254
254
  }
255
255
 
256
256
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
257
257
  @media (min-width: #{$bp-value}) {
258
258
  .d-#{$bp}-none {
259
- display: none !important;
259
+ display: none;
260
260
  }
261
261
 
262
262
  .d-#{$bp}-block {
263
- display: block !important;
263
+ display: block;
264
264
  }
265
265
 
266
266
  .d-#{$bp}-inline-block {
267
- display: inline-block !important;
267
+ display: inline-block;
268
268
  }
269
269
  }
270
270
  }
271
271
 
272
272
  @each $name, $value in map.get(theme.$theme, zIndexLevels) {
273
273
  .z-index-#{$name} {
274
- z-index: $value !important;
274
+ z-index: $value;
275
275
  }
276
276
  }
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
  }