@oardi/css-utils 0.51.0 → 0.53.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 (20) hide show
  1. package/package.json +1 -1
  2. package/scss/components/breadcrumb.scss +8 -12
  3. package/scss/components/button.scss +27 -24
  4. package/scss/components/card.scss +27 -11
  5. package/scss/components/chip.scss +88 -60
  6. package/scss/components/drawer.scss +41 -19
  7. package/scss/components/expansion-panel.scss +113 -83
  8. package/scss/components/form.scss +85 -81
  9. package/scss/components/icon-button.scss +144 -99
  10. package/scss/components/list.scss +33 -19
  11. package/scss/components/navbar.scss +24 -17
  12. package/scss/components/table.scss +73 -23
  13. package/scss/components/tabs.scss +72 -39
  14. package/scss/components/toast.scss +69 -18
  15. package/scss/components/tooltip.scss +45 -33
  16. package/scss/flex-responsive.scss +3 -0
  17. package/scss/spacings-responsive.scss +8 -0
  18. package/scss/text.scss +3 -3
  19. package/scss/utilities.scss +12 -0
  20. package/scss/variables.scss +14 -9
package/scss/components/tabs.scss CHANGED
@@ -1,71 +1,104 @@
1
1
  @layer components {
2
2
  .tabs {
3
+ --tabs-bg-color: transparent;
4
+
3
5
  display: flex;
4
- cursor: pointer;
5
- -webkit-tap-highlight-color: transparent;
6
6
  overflow-x: auto;
7
7
  overflow-y: visible;
8
+ background-color: var(--tabs-bg-color);
9
+ -webkit-tap-highlight-color: transparent;
8
10
 
9
11
  .tab {
10
- --tab-transition-duration: var(--transition-duration, 0.2s);
12
+ --tab-color: var(--text-color);
13
+ --tab-bg-color: var(--bg-surface);
11
14
 
12
- border: none;
13
- color: var(--text-color);
14
- background-color: var(--tab-bg-color, var(--bg-surface));
15
- text-align: center;
15
+ --tab-hover-color: var(--primary);
16
+ --tab-hover-bg-color: var(--bg-surface-hover);
17
+
18
+ --tab-active-color: var(--primary);
19
+ --tab-active-border-color: var(--primary);
20
+
21
+ --tab-border-width: 3px;
22
+ --tab-border-color: var(--border-color);
23
+
24
+ --tab-padding-y: var(--spacer-3);
25
+ --tab-padding-x: var(--spacer-4);
26
+
27
+ --tab-disabled-text-color: var(--disabled-text-color);
28
+ --tab-disabled-bg-color: var(--disabled-bg-color);
29
+ --tab-disabled-border-color: var(--disabled-border-color);
30
+
31
+ --tab-focus-outline-width: var(--focus-outline-width);
32
+ --tab-focus-outline-style: var(--focus-outline-style);
33
+ --tab-focus-outline-color: var(--focus-outline-color);
34
+ --tab-focus-outline-offset: calc(-1 * var(--tab-border-width));
35
+
36
+ --tab-transition-duration: var(--transition-duration);
37
+ --tab-transition-easing: var(--transition-easing);
16
38
 
17
- padding: 16px 20px;
18
- border-bottom: 3px solid var(--tab-border-color, var(--border-color));
19
39
  flex: 1 0 auto;
40
+ padding: var(--tab-padding-y) var(--tab-padding-x);
41
+ border: 0;
42
+ border-block-end: var(--tab-border-width) solid var(--tab-border-color);
43
+ background-color: var(--tab-bg-color);
44
+ color: var(--tab-color);
45
+ text-align: center;
46
+ font: inherit;
47
+ white-space: nowrap;
20
48
 
21
49
  transition:
22
- color var(--tab-transition-duration) ease,
23
- background-color var(--tab-transition-duration) ease,
24
- box-shadow var(--tab-transition-duration) ease,
25
- border-color var(--tab-transition-duration) ease;
26
-
27
- &.active {
28
- color: var(--primary);
29
- border-bottom: 3px solid var(--primary);
30
- }
31
-
32
- &:focus {
33
- outline: 3px solid var(--primary-light);
34
- outline-offset: -3px;
35
- color: var(--primary);
36
- z-index: 10;
37
- }
50
+ color var(--tab-transition-duration) var(--tab-transition-easing),
51
+ background-color var(--tab-transition-duration) var(--tab-transition-easing),
52
+ box-shadow var(--tab-transition-duration) var(--tab-transition-easing),
53
+ border-color var(--tab-transition-duration) var(--tab-transition-easing);
38
54
 
39
55
  &:hover {
40
56
  cursor: pointer;
41
- color: var(--primary);
57
+ color: var(--tab-hover-color);
58
+ background-color: var(--tab-hover-bg-color);
42
59
  }
43
60
 
44
- &.disabled {
45
- color: var(--tab-disabled-text-color, var(--disabled-text-color));
46
- background-color: var(--tab-disabled-bg-color, var(--disabled-bg-color));
61
+ &.is-active {
62
+ color: var(--tab-active-color);
63
+ border-block-end-color: var(--tab-active-border-color);
64
+ }
65
+
66
+ &:focus-visible {
67
+ z-index: 10;
68
+ color: var(--tab-active-color);
69
+ outline: var(--tab-focus-outline-width) var(--tab-focus-outline-style) var(--tab-focus-outline-color);
70
+ outline-offset: var(--tab-focus-outline-offset);
71
+ }
47
72
 
73
+ &.disabled,
74
+ &:disabled,
75
+ &[disabled] {
76
+ cursor: not-allowed;
77
+ pointer-events: none;
78
+ color: var(--tab-disabled-text-color);
79
+ background-color: var(--tab-disabled-bg-color);
80
+ border-block-end-color: var(--tab-disabled-border-color);
48
81
  outline: 0;
49
- &:hover {
50
- cursor: not-allowed;
51
- }
52
82
  }
53
83
  }
54
84
  }
55
85
 
56
86
  .tab-content {
57
- --tab-content-transition-duration: var(--transition-duration, 0.2s);
87
+ --tab-content-bg-color: var(--bg-surface);
88
+ --tab-content-padding: var(--spacer-3);
89
+ --tab-content-transition-duration: var(--transition-duration);
90
+ --tab-content-transition-easing: var(--transition-easing);
58
91
 
59
92
  display: none;
60
- padding: 20px;
61
- background-color: var(--tab-content-bg-color, var(--bg-surface));
93
+ padding: var(--tab-content-padding);
94
+ background-color: var(--tab-content-bg-color);
62
95
 
63
96
  transition:
64
- color var(--tab-content-transition-duration),
65
- background-color var(--tab-content-transition-duration),
66
- border-color var(--tab-content-transition-duration);
97
+ color var(--tab-content-transition-duration) var(--tab-content-transition-easing),
98
+ background-color var(--tab-content-transition-duration) var(--tab-content-transition-easing),
99
+ border-color var(--tab-content-transition-duration) var(--tab-content-transition-easing);
67
100
 
68
- &.active {
101
+ &.is-active {
69
102
  display: block;
70
103
  }
71
104
  }
package/scss/components/toast.scss CHANGED
@@ -1,26 +1,77 @@
1
- @use 'sass:map';
2
- @use '../theme.scss';
3
-
4
1
  @layer components {
5
- @each $name, $value in map.get(theme.$theme, colors) {
6
- .toast-#{$name} {
7
- --toast-on-color: var(--on-#{$name});
8
- --toast-color: var(--#{$name});
9
- }
10
- }
11
-
12
2
  .toast {
13
- --toast-padding-y: 0.4rem;
14
- --toast-padding-x: 0.9rem;
3
+ --toast-padding-y: var(--spacer-2);
4
+ --toast-padding-x: var(--spacer-3);
5
+ --toast-bg-color: var(--bg-surface);
6
+ --toast-color: var(--text-color);
7
+ --toast-border-width: var(--border-width);
8
+ --toast-border-color: transparent;
9
+ --toast-border-radius: var(--border-radius);
10
+ --toast-box-shadow: var(--shadow);
11
+ --toast-gap: var(--spacer-2);
15
12
 
16
- background-color: var(--toast-color);
17
- border-color: transparent;
18
- color: var(--toast-on-color, var(--text-color));
19
- box-shadow: var(--shadow);
20
- padding: var(--toast-padding-y) var(--toast-padding-x);
21
- border-radius: var(--border-radius);
22
13
  display: flex;
23
14
  align-items: center;
15
+ gap: var(--toast-gap);
24
16
  width: 100%;
17
+ padding: var(--toast-padding-y) var(--toast-padding-x);
18
+ color: var(--toast-color);
19
+ background-color: var(--toast-bg-color);
20
+ border: var(--toast-border-width) solid var(--toast-border-color);
21
+ border-radius: var(--toast-border-radius);
22
+ box-shadow: var(--toast-box-shadow);
23
+ }
24
+
25
+ .toast-icon {
26
+ display: inline-flex;
27
+ flex-shrink: 0;
28
+ color: inherit;
29
+ fill: currentColor;
30
+ }
31
+
32
+ .toast-content {
33
+ flex: 1;
34
+ min-width: 0;
35
+ }
36
+
37
+ .toast-title {
38
+ margin: 0;
39
+ font-weight: 600;
40
+ }
41
+
42
+ .toast-message {
43
+ margin: 0;
44
+ }
45
+
46
+ .toast-actions {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ gap: var(--spacer-1);
50
+ flex-shrink: 0;
51
+ margin-inline-start: auto;
52
+ }
53
+
54
+ .toast-action {
55
+ --button-color: currentColor;
56
+ --button-color-hover: currentColor;
57
+ --button-color-active: currentColor;
58
+ --button-on-color: currentColor;
59
+ }
60
+
61
+ .toast-close {
62
+ --icon-button-color: currentColor;
63
+ --icon-button-color-hover: currentColor;
64
+ --icon-button-color-active: currentColor;
65
+ --icon-button-on-color: currentColor;
66
+
67
+ flex-shrink: 0;
68
+ }
69
+
70
+ .toast-content + .toast-close {
71
+ margin-inline-start: auto;
72
+ }
73
+
74
+ .toast-actions + .toast-close {
75
+ margin-inline-start: var(--spacer-1);
25
76
  }
26
77
  }
package/scss/components/tooltip.scss CHANGED
@@ -1,60 +1,72 @@
1
1
  @layer components {
2
2
  .tooltip {
3
- background: #222;
4
- color: #fff;
5
- padding: 4px 8px;
6
- border-radius: 6px;
7
- font-size: 0.75rem;
3
+ --tooltip-bg-color: var(--bg-inverse);
4
+ --tooltip-color: var(--text-inverse);
5
+
6
+ --tooltip-padding-y: var(--spacer-1);
7
+ --tooltip-padding-x: var(--spacer-2);
8
+ --tooltip-border-radius: var(--border-radius-sm, var(--border-radius));
9
+ --tooltip-font-size: var(--font-size-xs, 0.75rem);
10
+ --tooltip-box-shadow: var(--shadow-lg);
11
+ --tooltip-z-index: 1000;
12
+
13
+ --tooltip-arrow-size: 0.375rem;
14
+
15
+ position: absolute;
16
+ z-index: var(--tooltip-z-index);
17
+ padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
18
+ border-radius: var(--tooltip-border-radius);
19
+ background-color: var(--tooltip-bg-color);
20
+ color: var(--tooltip-color);
21
+ font-size: var(--tooltip-font-size);
8
22
  white-space: nowrap;
9
- z-index: 1000;
10
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
23
+ box-shadow: var(--tooltip-box-shadow);
11
24
  pointer-events: none;
12
- position: absolute;
13
25
  }
14
26
 
15
27
  .tooltip-arrow {
28
+ position: absolute;
16
29
  width: 0;
17
30
  height: 0;
18
- position: absolute;
19
31
  }
20
32
 
21
33
  .tooltip-arrow.top {
22
- bottom: -6px;
23
- left: 50%;
34
+ inset-block-end: calc(-1 * var(--tooltip-arrow-size));
35
+ inset-inline-start: 50%;
24
36
  transform: translateX(-50%);
25
- border-left: 6px solid transparent;
26
- border-right: 6px solid transparent;
27
- border-top: 6px solid #222;
28
- border-bottom: 0;
37
+ border-inline-start: var(--tooltip-arrow-size) solid transparent;
38
+ border-inline-end: var(--tooltip-arrow-size) solid transparent;
39
+ border-block-start: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
40
+ border-block-end: 0;
29
41
  }
30
42
 
31
43
  .tooltip-arrow.bottom {
32
- top: -6px;
33
- left: 50%;
44
+ inset-block-start: calc(-1 * var(--tooltip-arrow-size));
45
+ inset-inline-start: 50%;
34
46
  transform: translateX(-50%);
35
- border-left: 6px solid transparent;
36
- border-right: 6px solid transparent;
37
- border-bottom: 6px solid #222;
38
- border-top: 0;
47
+ border-inline-start: var(--tooltip-arrow-size) solid transparent;
48
+ border-inline-end: var(--tooltip-arrow-size) solid transparent;
49
+ border-block-end: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
50
+ border-block-start: 0;
39
51
  }
40
52
 
41
53
  .tooltip-arrow.left {
42
- right: -6px;
43
- top: 50%;
54
+ inset-inline-end: calc(-1 * var(--tooltip-arrow-size));
55
+ inset-block-start: 50%;
44
56
  transform: translateY(-50%);
45
- border-top: 6px solid transparent;
46
- border-bottom: 6px solid transparent;
47
- border-left: 6px solid #222;
48
- border-right: 0;
57
+ border-block-start: var(--tooltip-arrow-size) solid transparent;
58
+ border-block-end: var(--tooltip-arrow-size) solid transparent;
59
+ border-inline-start: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
60
+ border-inline-end: 0;
49
61
  }
50
62
 
51
63
  .tooltip-arrow.right {
52
- left: -6px;
53
- top: 50%;
64
+ inset-inline-start: calc(-1 * var(--tooltip-arrow-size));
65
+ inset-block-start: 50%;
54
66
  transform: translateY(-50%);
55
- border-top: 6px solid transparent;
56
- border-bottom: 6px solid transparent;
57
- border-right: 6px solid #222;
58
- border-left: 0;
67
+ border-block-start: var(--tooltip-arrow-size) solid transparent;
68
+ border-block-end: var(--tooltip-arrow-size) solid transparent;
69
+ border-inline-end: var(--tooltip-arrow-size) solid var(--tooltip-bg-color);
70
+ border-inline-start: 0;
59
71
  }
60
72
  }
package/scss/flex-responsive.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  @use 'sass:map';
2
2
  @use './theme.scss';
3
3
 
4
+ // TODO
5
+ // add flex-wrap-*, flex-grow-*, flex-shrink-*, flex-fill-* oder order-* variants
6
+
4
7
  @layer utilities {
5
8
  @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
6
9
  @media (min-width: #{$bp-value}) {
package/scss/spacings-responsive.scss CHANGED
@@ -7,6 +7,14 @@
7
7
  @media (min-width: #{$bp-value}) {
8
8
  @each $key, $value in map.get(theme.$theme, spacings) {
9
9
  @each $dir, $prop in map.get(theme.$theme, directions) {
10
+ .m-#{$bp}-#{$key} {
11
+ margin-#{$prop}: $value;
12
+ }
13
+
14
+ .p-#{$bp}-#{$key} {
15
+ padding-#{$prop}: $value;
16
+ }
17
+
10
18
  .m#{$dir}-#{$bp}-#{$key} {
11
19
  margin-#{$prop}: $value;
12
20
  }
package/scss/text.scss CHANGED
@@ -19,15 +19,15 @@
19
19
  }
20
20
 
21
21
  .text-inverse {
22
- color: var(--text-color-inverse);
22
+ color: var(--text-inverse);
23
23
  }
24
24
 
25
25
  .text-muted {
26
- color: var(--text-color-muted);
26
+ color: var(--text-muted);
27
27
  }
28
28
 
29
29
  .text-subtle {
30
- color: var(--text-color-subtle);
30
+ color: var(--text-subtle);
31
31
  }
32
32
 
33
33
  .text-inherit {
package/scss/utilities.scss CHANGED
@@ -48,10 +48,18 @@
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
+
55
63
  .img-responsive {
56
64
  width: 100%;
57
65
  }
@@ -250,6 +258,10 @@
250
258
  display: block;
251
259
  }
252
260
 
261
+ .d-inline {
262
+ display: inline;
263
+ }
264
+
253
265
  .d-inline-block {
254
266
  display: inline-block;
255
267
  }
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-color: #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,11 @@
80
80
  --transition-duration: 0.2s;
81
81
  --transition-easing: ease-out;
82
82
 
83
- --bg-opacity: 1;
83
+ /* deprecated alias */
84
+ --body-bg-color: var(--bg-body);
85
+ --text-color-muted: var(--text-muted);
86
+ --text-color-inverse: var(--text-inverse);
87
+ --text-color-subtle: var(--text-subtle);
88
+ --highlight: rgba(0, 0, 0, 0.15);
84
89
  }
85
90
  }