@oardi/css-utils 0.47.0 → 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 +164 -146
  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 -51
  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 +44 -35
  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
 
@@ -16,42 +16,51 @@
16
16
  padding-right: var(--spacer-3);
17
17
  width: 100%;
18
18
  }
19
+
19
20
  .bg-opacity-10 {
20
- --bg-opacity: 0.1 !important;
21
+ --bg-opacity: 0.1;
21
22
  }
22
23
 
23
24
  .bg-opacity-25 {
24
- --bg-opacity: 0.25 !important;
25
+ --bg-opacity: 0.25;
25
26
  }
26
27
 
27
28
  .bg-opacity-50 {
28
- --bg-opacity: 0.5 !important;
29
+ --bg-opacity: 0.5;
29
30
  }
30
31
 
31
32
  .bg-opacity-75 {
32
- --bg-opacity: 0.75 !important;
33
+ --bg-opacity: 0.75;
33
34
  }
34
35
 
35
36
  @each $name, $value in map.get(theme.$theme, colors) {
36
37
  .bg-#{$name} {
37
- color: var(--on-#{$name}) !important;
38
- fill: var(--on-#{$name}) !important;
39
- 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));
40
41
  }
41
42
  }
42
43
 
43
44
  @each $name, $value in map.get(theme.$theme, grays) {
44
45
  .bg-gray-#{$name} {
45
- background-color: var(--gray-#{$name}) !important;
46
+ background-color: var(--gray-#{$name});
46
47
  }
47
48
  }
48
49
 
49
50
  .bg-white {
50
- background-color: var(--white) !important;
51
+ background-color: var(--white);
52
+ }
53
+
54
+ .bg-black {
55
+ background-color: var(--black);
56
+ }
57
+
58
+ .bg-surface {
59
+ background-color: var(--bg-surface);
51
60
  }
52
61
 
53
62
  .img-responsive {
54
- width: 100% !important;
63
+ width: 100%;
55
64
  }
56
65
 
57
66
  .rounded {
@@ -71,7 +80,7 @@
71
80
  }
72
81
 
73
82
  .rounded-circle {
74
- border-radius: 50% !important;
83
+ border-radius: 50%;
75
84
  }
76
85
 
77
86
  .rounded-top {
@@ -145,42 +154,42 @@
145
154
  }
146
155
 
147
156
  .w-100 {
148
- width: 100% !important;
157
+ width: 100%;
149
158
  }
150
159
 
151
160
  .w-60 {
152
- width: 60% !important;
161
+ width: 60%;
153
162
  }
154
163
 
155
164
  .w-50 {
156
- width: 50% !important;
165
+ width: 50%;
157
166
  }
158
167
 
159
168
  .w-40 {
160
- width: 40% !important;
169
+ width: 40%;
161
170
  }
162
171
 
163
172
  // TODO - add several heights
164
173
  .h-100 {
165
- height: 100% !important;
174
+ height: 100%;
166
175
  }
167
176
 
168
177
  // TODO - check if more classes are needed
169
178
  // arrange elements top, start, bottom, end
170
179
  .top-0 {
171
- top: 0px !important;
180
+ top: 0px;
172
181
  }
173
182
 
174
183
  .right-0 {
175
- right: 0px !important;
184
+ right: 0px;
176
185
  }
177
186
 
178
187
  .bottom-0 {
179
- bottom: 0px !important;
188
+ bottom: 0px;
180
189
  }
181
190
 
182
191
  .left-0 {
183
- left: 0px !important;
192
+ left: 0px;
184
193
  }
185
194
 
186
195
  .fixed-top {
@@ -192,7 +201,7 @@
192
201
  }
193
202
 
194
203
  .overflow-y-scroll {
195
- overflow-y: scroll !important;
204
+ overflow-y: scroll;
196
205
  }
197
206
 
198
207
  .no-scroll {
@@ -206,62 +215,62 @@
206
215
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
207
216
  @media (min-width: #{$bp-value}) {
208
217
  .w-#{$bp}-100 {
209
- width: 100% !important;
218
+ width: 100%;
210
219
  }
211
220
 
212
221
  .w-#{$bp}-60 {
213
- width: 60% !important;
222
+ width: 60%;
214
223
  }
215
224
 
216
225
  .w-#{$bp}-50 {
217
- width: 50% !important;
226
+ width: 50%;
218
227
  }
219
228
 
220
229
  .w-#{$bp}-40 {
221
- width: 40% !important;
230
+ width: 40%;
222
231
  }
223
232
 
224
233
  .w-#{$bp}-30 {
225
- width: 30% !important;
234
+ width: 30%;
226
235
  }
227
236
  }
228
237
  }
229
238
 
230
239
  // display
231
240
  .d-none {
232
- display: none !important;
241
+ display: none;
233
242
  }
234
243
 
235
244
  .d-block {
236
- display: block !important;
245
+ display: block;
237
246
  }
238
247
 
239
248
  .d-inline-block {
240
- display: inline-block !important;
249
+ display: inline-block;
241
250
  }
242
251
 
243
252
  .hidden {
244
- visibility: hidden !important;
253
+ visibility: hidden;
245
254
  }
246
255
 
247
256
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
248
257
  @media (min-width: #{$bp-value}) {
249
258
  .d-#{$bp}-none {
250
- display: none !important;
259
+ display: none;
251
260
  }
252
261
 
253
262
  .d-#{$bp}-block {
254
- display: block !important;
263
+ display: block;
255
264
  }
256
265
 
257
266
  .d-#{$bp}-inline-block {
258
- display: inline-block !important;
267
+ display: inline-block;
259
268
  }
260
269
  }
261
270
  }
262
271
 
263
272
  @each $name, $value in map.get(theme.$theme, zIndexLevels) {
264
273
  .z-index-#{$name} {
265
- z-index: $value !important;
274
+ z-index: $value;
266
275
  }
267
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
  }