@oardi/css-utils 0.52.0 → 0.53.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 (23) hide show
  1. package/package.json +1 -1
  2. package/scss/borders.scss +1 -1
  3. package/scss/components/breadcrumb.scss +1 -1
  4. package/scss/components/button.scss +1 -1
  5. package/scss/components/card.scss +27 -11
  6. package/scss/components/chip.scss +88 -60
  7. package/scss/components/drawer.scss +41 -19
  8. package/scss/components/expansion-panel.scss +113 -83
  9. package/scss/components/form.scss +85 -81
  10. package/scss/components/icon-button.scss +144 -99
  11. package/scss/components/list.scss +33 -19
  12. package/scss/components/navbar.scss +24 -17
  13. package/scss/components/table.scss +73 -23
  14. package/scss/components/tabs.scss +72 -39
  15. package/scss/components/toast.scss +69 -18
  16. package/scss/components/tooltip.scss +45 -33
  17. package/scss/flex-responsive.scss +5 -2
  18. package/scss/gap-responsive.scss +1 -1
  19. package/scss/spacings-responsive.scss +58 -9
  20. package/scss/spacings.scss +1 -1
  21. package/scss/text.scss +4 -4
  22. package/scss/utilities.scss +41 -7
  23. package/scss/variables.scss +15 -9
package/scss/utilities.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use 'sass:map';
2
- @use './theme.scss';
2
+ @use './theme.scss' as theme;
3
3
 
4
4
  @layer utilities {
5
5
  // positions
@@ -48,10 +48,30 @@
48
48
  }
49
49
  }
50
50
 
51
+ .bg-body {
52
+ background-color: var(--bg-body);
53
+ }
54
+
51
55
  .bg-surface {
52
56
  background-color: var(--bg-surface);
53
57
  }
54
58
 
59
+ .bg-inverse {
60
+ background-color: var(--bg-inverse);
61
+ }
62
+
63
+ .bg-surface-hover {
64
+ background-color: var(--bg-surface-hover);
65
+ }
66
+
67
+ .bg-highlight {
68
+ background-color: var(--bg-highlight);
69
+ }
70
+
71
+ .bg-active {
72
+ background-color: var(--bg-active);
73
+ }
74
+
55
75
  .img-responsive {
56
76
  width: 100%;
57
77
  }
@@ -126,8 +146,8 @@
126
146
 
127
147
  .hover-shadow-sm {
128
148
  transition:
129
- box-shadow var(--transition-duration) ease-out,
130
- transform var(--transition-duration) ease-out;
149
+ box-shadow var(--transition-duration) var(--transition-easing),
150
+ transform var(--transition-duration) var(--transition-easing);
131
151
 
132
152
  &:hover {
133
153
  box-shadow: var(--shadow-sm);
@@ -136,8 +156,18 @@
136
156
 
137
157
  .hover-shadow {
138
158
  transition:
139
- box-shadow var(--transition-duration) ease-out,
140
- transform var(--transition-duration) ease-out;
159
+ box-shadow var(--transition-duration) var(--transition-easing),
160
+ transform var(--transition-duration) var(--transition-easing);
161
+
162
+ &:hover {
163
+ box-shadow: var(--shadow);
164
+ }
165
+ }
166
+
167
+ .hover-shadow-md {
168
+ transition:
169
+ box-shadow var(--transition-duration) var(--transition-easing),
170
+ transform var(--transition-duration) var(--transition-easing);
141
171
 
142
172
  &:hover {
143
173
  box-shadow: var(--shadow);
@@ -146,8 +176,8 @@
146
176
 
147
177
  .hover-shadow-lg {
148
178
  transition:
149
- box-shadow var(--transition-duration) ease-out,
150
- transform var(--transition-duration) ease-out;
179
+ box-shadow var(--transition-duration) var(--transition-easing),
180
+ transform var(--transition-duration) var(--transition-easing);
151
181
 
152
182
  &:hover {
153
183
  box-shadow: var(--shadow-lg);
@@ -250,6 +280,10 @@
250
280
  display: block;
251
281
  }
252
282
 
283
+ .d-inline {
284
+ display: inline;
285
+ }
286
+
253
287
  .d-inline-block {
254
288
  display: inline-block;
255
289
  }
package/scss/variables.scss CHANGED
@@ -38,18 +38,18 @@
38
38
  --font-weight: 400;
39
39
  --font-family: 'Inter', sans-serif;
40
40
 
41
- --body-bg-color: #fdfdfd;
42
-
41
+ --bg-body: #fdfdfd;
43
42
  --bg-surface: var(--white);
44
43
  --bg-surface-hover: var(--gray-50);
45
- --bg-surface-active: var(--gray-100);
44
+ --bg-inverse: var(--gray-900);
45
+ --bg-highlight: var(--gray-100);
46
+ --bg-active: var(--gray-150);
47
+ --bg-opacity: 1;
46
48
 
47
49
  --text-color: var(--gray-950);
48
- --text-color-inverse: var(--gray-50);
49
- --text-color-muted: var(--gray-550);
50
- --text-color-subtle: var(--gray-400);
51
-
52
- --highlight: rgba(0, 0, 0, 0.15);
50
+ --text-muted: var(--gray-550);
51
+ --text-inverse: var(--gray-50);
52
+ --text-subtle: var(--gray-400);
53
53
 
54
54
  --border-width: 1px;
55
55
  --border-color: var(--gray-100);
@@ -80,6 +80,12 @@
80
80
  --transition-duration: 0.2s;
81
81
  --transition-easing: ease-out;
82
82
 
83
- --bg-opacity: 1;
83
+ /* deprecated alias */
84
+ --bg-color: var(--bg-body);
85
+ --body-bg-color: var(--bg-body);
86
+ --text-color-muted: var(--text-muted);
87
+ --text-color-inverse: var(--text-inverse);
88
+ --text-color-subtle: var(--text-subtle);
89
+ --highlight: var(--bg-highlight);
84
90
  }
85
91
  }