@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/icon-button.scss CHANGED
@@ -1,141 +1,186 @@
1
1
  @use 'sass:map';
2
- @use '../theme.scss';
3
-
4
- $sizes: (
5
- xs: 32px,
6
- sm: 36px,
7
- md: 40px,
8
- lg: 44px,
9
- );
2
+ @use '../theme.scss' as theme;
10
3
 
11
4
  @layer components {
12
5
  .icon-btn {
6
+ --icon-button-color: var(--text-color);
7
+ --icon-button-color-hover: var(--text-color);
8
+ --icon-button-color-active: var(--text-color);
9
+ --icon-button-color-rgb: var(--primary-rgb);
10
+ --icon-button-on-color: var(--on-primary);
11
+
12
+ --icon-button-bg-color: transparent;
13
+ --icon-button-border-color: transparent;
14
+ --icon-button-highlight: var(--bg-highlight);
15
+
13
16
  --icon-button-border-width: var(--border-width);
14
- --icon-button-padding: 0.25rem;
15
- --icon-button-width: 40px;
16
- --icon-button-min-width: 40px;
17
- --icon-button-height: 40px;
18
- --icon-button-border-radius: 100%;
17
+ --icon-button-border-radius: 9999px;
18
+
19
+ --icon-button-size: 2.5rem;
20
+ --icon-button-padding: var(--spacer-1);
21
+ --icon-button-svg-size: 1.125rem;
22
+
23
+ --icon-button-disabled-text-color: var(--disabled-text-color);
24
+ --icon-button-disabled-bg-color: var(--disabled-bg-color);
25
+ --icon-button-disabled-border-color: var(--disabled-border-color);
19
26
 
20
27
  --icon-button-focus-outline-width: var(--focus-outline-width);
21
28
  --icon-button-focus-outline-style: var(--focus-outline-style);
22
29
  --icon-button-focus-outline-color: var(--focus-outline-color);
30
+ --icon-button-focus-outline-offset: var(--focus-offset);
23
31
 
24
- --icon-button-svg-width: 18px;
25
- --icon-button-svg-height: 18px;
32
+ --icon-button-transition-duration: var(--transition-duration);
33
+ --icon-button-transition-easing: var(--transition-easing);
26
34
 
27
- --icon-button-transition-duration: var(--transition-duration, 0.2s);
28
-
29
- padding: var(--icon-button-padding);
30
- min-width: var(--icon-button-min-width);
31
- width: var(--icon-button-width);
32
- height: var(--icon-button-height);
33
- border-radius: var(--icon-button-border-radius);
34
35
  display: inline-flex;
35
36
  align-items: center;
36
37
  justify-content: center;
37
-
38
- border-width: var(--icon-button-border-width, var(--border-width));
38
+ flex-shrink: 0;
39
+ width: var(--icon-button-size);
40
+ min-width: var(--icon-button-size);
41
+ height: var(--icon-button-size);
42
+ padding: var(--icon-button-padding);
43
+ border-width: var(--icon-button-border-width);
39
44
  border-style: solid;
40
- background-color: transparent;
41
- border-color: transparent;
42
-
43
- fill: var(--text-color);
44
- color: var(--text-color);
45
+ border-color: var(--icon-button-border-color);
46
+ border-radius: var(--icon-button-border-radius);
47
+ background-color: var(--icon-button-bg-color);
48
+ color: var(--icon-button-color);
49
+ fill: currentColor;
50
+ line-height: 1;
51
+ text-decoration: none;
52
+ touch-action: manipulation;
53
+ -webkit-tap-highlight-color: transparent;
45
54
 
46
55
  transition:
47
- color var(--icon-button-transition-duration) ease,
48
- background-color var(--icon-button-transition-duration) ease,
49
- box-shadow var(--icon-button-transition-duration) ease,
50
- border-color var(--icon-button-transition-duration) ease;
51
-
52
- -webkit-tap-highlight-color: transparent;
53
- touch-action: manipulation; // ios fix
56
+ color var(--icon-button-transition-duration) var(--icon-button-transition-easing),
57
+ background-color var(--icon-button-transition-duration) var(--icon-button-transition-easing),
58
+ box-shadow var(--icon-button-transition-duration) var(--icon-button-transition-easing),
59
+ border-color var(--icon-button-transition-duration) var(--icon-button-transition-easing);
54
60
 
55
61
  svg {
56
- max-width: var(--icon-button-svg-width);
57
- max-height: var(--icon-button-svg-width);
62
+ max-width: var(--icon-button-svg-size);
63
+ max-height: var(--icon-button-svg-size);
58
64
  overflow: visible;
59
65
  }
60
66
 
61
67
  &:hover {
62
68
  cursor: pointer;
63
69
  text-decoration: none;
64
- background-color: var(--icon-button-highlight, var(--highlight));
65
- }
66
-
67
- &:disabled,
68
- &[disabled],
69
- &[disabled]:hover {
70
- color: var(--gray-800);
71
- fill: var(--gray-800);
72
- cursor: not-allowed;
73
- outline: 0;
74
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
75
70
  }
76
71
 
77
72
  &:focus-visible {
78
73
  outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
79
74
  var(--icon-button-focus-outline-color);
80
- outline-offset: var(--focus-offset);
81
- background-color: var(--icon-button-highlight, var(--highlight));
75
+ outline-offset: var(--icon-button-focus-outline-offset);
82
76
  }
83
77
  }
84
78
 
85
- // sizes
86
- // change to use css vars
87
- @each $name, $value in $sizes {
79
+ @each $name, $value in map.get(theme.$theme, colors) {
88
80
  .icon-btn-#{$name} {
89
- min-width: $value;
90
- width: $value;
91
- height: $value;
92
-
93
- svg {
94
- max-width: calc($value - 20px);
95
- max-height: calc($value - 20px);
96
- }
81
+ --icon-button-color: var(--#{$name});
82
+ --icon-button-color-hover: var(--#{$name}-hover);
83
+ --icon-button-color-active: var(--#{$name}-active);
84
+ --icon-button-color-rgb: var(--#{$name}-rgb);
85
+ --icon-button-on-color: var(--on-#{$name});
97
86
  }
98
87
  }
99
88
 
100
- @each $name, $value in map.get(theme.$theme, colors) {
101
- .icon-btn-#{$name} {
102
- color: var(--#{$name});
103
- fill: var(--#{$name});
104
- background-color: transparent;
105
-
106
- &:focus-visible {
107
- // color: var(--on-#{$name});
108
- outline: var(--icon-button-focus-outline-width)
109
- var(--icon-button-focus-outline-style)
110
- rgba(var(--#{$name}-rgb), 0.5);
111
- outline-offset: var(--focus-offset);
112
- }
89
+ .icon-btn-text {
90
+ color: var(--icon-button-color);
91
+ background-color: transparent;
92
+ border-color: transparent;
93
+
94
+ &:hover,
95
+ &:active {
96
+ color: var(--icon-button-color-hover);
97
+ background-color: var(--icon-button-highlight);
98
+ border-color: transparent;
99
+ }
100
+
101
+ &:focus-visible {
102
+ outline-color: rgba(var(--icon-button-color-rgb), 0.5);
103
+ background-color: var(--icon-button-highlight);
113
104
  }
105
+ }
106
+
107
+ .icon-btn-solid {
108
+ color: var(--icon-button-on-color);
109
+ background-color: var(--icon-button-color);
110
+ border-color: var(--icon-button-color);
114
111
 
115
- .icon-btn-#{$name}-contained {
116
- color: var(--on-#{$name});
117
- fill: var(--on-#{$name});
118
- background-color: var(--#{$name});
119
-
120
- &:hover,
121
- &:active,
122
- &:focus-visible {
123
- outline: var(--icon-button-focus-outline-width)
124
- var(--icon-button-focus-outline-style)
125
- var(--#{$name}-hover);
126
- background-color: var(--#{$name}-hover);
127
- }
128
-
129
- &:disabled,
130
- &[disabled],
131
- &[disabled]:hover {
132
- color: var(--#{$name}-hover);
133
- fill: var(--#{$name}-hover);
134
- cursor: not-allowed;
135
- box-shadow: none;
136
- background-color: var(--icon-button-disabled-bg-color, var(--disabled-bg-color));
137
- outline: 0;
138
- }
112
+ &:hover {
113
+ color: var(--icon-button-on-color);
114
+ background-color: var(--icon-button-color-hover);
115
+ border-color: var(--icon-button-color-hover);
116
+ }
117
+
118
+ &:active,
119
+ &.active {
120
+ color: var(--icon-button-on-color);
121
+ background-color: var(--icon-button-color-active);
122
+ border-color: var(--icon-button-color-active);
123
+ }
124
+
125
+ &:focus-visible {
126
+ outline-color: rgba(var(--icon-button-color-rgb), 0.5);
127
+ }
128
+ }
129
+
130
+ .icon-btn-outline {
131
+ color: var(--icon-button-color);
132
+ background-color: transparent;
133
+ border-color: var(--icon-button-color);
134
+
135
+ &:hover {
136
+ color: var(--icon-button-on-color);
137
+ background-color: var(--icon-button-color-hover);
138
+ border-color: var(--icon-button-color-hover);
139
+ }
140
+
141
+ &:active,
142
+ &.active {
143
+ color: var(--icon-button-on-color);
144
+ background-color: var(--icon-button-color-active);
145
+ border-color: var(--icon-button-color-active);
146
+ }
147
+
148
+ &:focus-visible {
149
+ outline-color: rgba(var(--icon-button-color-rgb), 0.5);
150
+ }
151
+ }
152
+
153
+ .icon-btn-xs {
154
+ --icon-button-size: 2rem;
155
+ --icon-button-svg-size: 0.75rem;
156
+ }
157
+
158
+ .icon-btn-sm {
159
+ --icon-button-size: 2.25rem;
160
+ --icon-button-svg-size: 1rem;
161
+ }
162
+
163
+ .icon-btn-md {
164
+ --icon-button-size: 2.5rem;
165
+ --icon-button-svg-size: 1.125rem;
166
+ }
167
+
168
+ .icon-btn-lg {
169
+ --icon-button-size: 2.75rem;
170
+ --icon-button-svg-size: 1.25rem;
171
+ }
172
+
173
+ .icon-btn {
174
+ &:disabled,
175
+ &[disabled],
176
+ &.disabled {
177
+ cursor: not-allowed;
178
+ pointer-events: none;
179
+ box-shadow: none;
180
+ outline: 0;
181
+ color: var(--icon-button-disabled-text-color);
182
+ background-color: var(--icon-button-disabled-bg-color);
183
+ border-color: var(--icon-button-disabled-border-color);
139
184
  }
140
185
  }
141
186
  }
package/scss/components/list.scss CHANGED
@@ -1,24 +1,35 @@
1
1
  @layer components {
2
2
  .list {
3
- --list-padding: 0rem;
3
+ --list-padding: var(--spacer-0);
4
+
4
5
  --list-border-width: var(--border-width);
5
6
  --list-border-color: var(--border-color);
6
- --list-item-padding: 0.75rem 1rem;
7
- --list-item-transition-duration: var(--transition-duration, 0.2s);
8
- --list-item-transition-easing: var(--transition-easing, ease-out);
7
+ --list-border-radius: var(--border-radius);
8
+
9
+ --list-item-bg-color: var(--bg-surface);
10
+ --list-item-padding-y: var(--spacer-3);
11
+ --list-item-padding-x: var(--spacer-3);
12
+ --list-item-gap: var(--spacer-2);
13
+
14
+ --list-item-active-color: var(--primary);
15
+ --list-item-hover-color: var(--primary);
16
+
17
+ --list-item-transition-duration: var(--transition-duration);
18
+ --list-item-transition-easing: var(--transition-easing);
9
19
 
10
- border: var(--list-border-width) solid var(--list-border-color);
11
20
  padding: var(--list-padding);
21
+ border: var(--list-border-width) solid var(--list-border-color);
22
+ border-radius: var(--list-border-radius);
12
23
  list-style-type: none;
13
24
 
14
25
  .list-item {
15
- background-color: var(--list-item-bg-color, var(--bg-surface));
16
- color: var(--text-color);
17
- min-height: 1px;
18
- padding: var(--list-item-padding);
19
26
  display: flex;
20
27
  align-items: center;
21
- gap: var(--spacer-2);
28
+ gap: var(--list-item-gap);
29
+ padding: var(--list-item-padding-y) var(--list-item-padding-x);
30
+ background-color: var(--list-item-bg-color);
31
+ color: var(--text-color);
32
+ fill: currentColor;
22
33
 
23
34
  transition:
24
35
  color var(--list-item-transition-duration) var(--list-item-transition-easing),
@@ -26,32 +37,35 @@
26
37
  box-shadow var(--list-item-transition-duration) var(--list-item-transition-easing),
27
38
  border-color var(--list-item-transition-duration) var(--list-item-transition-easing);
28
39
 
29
- &.is-active,
30
- &.has-hover:hover {
40
+ &.is-active {
41
+ color: var(--list-item-active-color);
42
+ }
43
+
44
+ &.list-item-action:hover {
31
45
  cursor: pointer;
32
- color: var(--primary);
33
- fill: var(--primary);
46
+ color: var(--list-item-hover-color);
34
47
  text-decoration: none;
35
48
  }
36
49
 
37
50
  .list-item-text {
38
- flex: 1;
39
51
  display: flex;
52
+ flex: 1;
40
53
  flex-direction: column;
41
54
  }
42
55
 
43
56
  a {
44
57
  color: inherit;
58
+ text-decoration: none;
45
59
  }
46
60
 
47
61
  &:first-child {
48
- border-top-left-radius: inherit;
49
- border-top-right-radius: inherit;
62
+ border-start-start-radius: inherit;
63
+ border-start-end-radius: inherit;
50
64
  }
51
65
 
52
66
  &:last-child {
53
- border-bottom-right-radius: inherit;
54
- border-bottom-left-radius: inherit;
67
+ border-end-start-radius: inherit;
68
+ border-end-end-radius: inherit;
55
69
  }
56
70
  }
57
71
 
package/scss/components/navbar.scss CHANGED
@@ -1,34 +1,41 @@
1
1
  @use 'sass:map';
2
- @use '../theme.scss';
2
+ @use '../theme.scss' as theme;
3
3
 
4
4
  @layer components {
5
5
  .navbar {
6
6
  --navbar-bg-color: var(--bg-surface);
7
7
  --navbar-text-color: var(--text-color);
8
8
 
9
- color: var(--navbar-text-color);
10
- padding-top: 0.6rem;
11
- padding-bottom: 0.6rem;
12
- background-color: var(--navbar-bg-color);
13
- min-height: 60px;
9
+ --navbar-padding-y: var(--spacer-2);
10
+ --navbar-padding-x: var(--spacer-0);
11
+ --navbar-min-height: 3.75rem;
12
+
13
+ --navbar-link-color: var(--navbar-text-color);
14
+ --navbar-link-hover-color: var(--primary-hover);
15
+
16
+ --navbar-logo-hover-color: var(--primary-hover);
17
+
14
18
  display: flex;
15
19
  align-items: center;
20
+ min-height: var(--navbar-min-height);
21
+ padding-block: var(--navbar-padding-y);
22
+ padding-inline: var(--navbar-padding-x);
23
+ color: var(--navbar-text-color);
24
+ background-color: var(--navbar-bg-color);
16
25
 
17
26
  a {
18
- --link-text-color: var(--navbar-text-color);
27
+ --link-text-color: var(--navbar-link-color);
28
+ --link-hover-color: var(--navbar-link-hover-color);
19
29
  }
20
- }
21
30
 
22
- .navbar .logo:hover {
23
- text-decoration: none;
24
- color: var(--primary-hover);
25
- }
31
+ .navbar-logo {
32
+ color: inherit;
33
+ text-decoration: none;
26
34
 
27
- /** @deprecated - use bg-color instead */
28
- @each $name, $value in map.get(theme.$theme, colors) {
29
- .navbar-#{$name} {
30
- --navbar-bg-color: var(--#{$name});
31
- --navbar-text-color: var(--on-#{$name});
35
+ &:hover {
36
+ color: var(--navbar-logo-hover-color);
37
+ text-decoration: none;
38
+ }
32
39
  }
33
40
  }
34
41
  }
package/scss/components/table.scss CHANGED
@@ -1,42 +1,92 @@
1
1
  @layer components {
2
2
  .table {
3
- --table-color-type: initial;
4
- --table-bg-type: initial;
5
- --table-color-state: initial;
6
- --table-bg-state: initial;
7
3
  --table-color: var(--text-color);
8
- --table-accent-bg: transparent;
9
- --table-striped-color: var(--text-color);
10
- --table-striped-bg: rgba(var(--text-color-rgb), 0.05); // TODO
11
- --table-active-color: var(--text-color);
12
- --table-active-bg: rgba(var(--text-color-rgb), 0.1); // TODO
13
- --table-hover-color: var(--text-color);
14
- --table-hover-bg: rgba(var(--text-color-rgb), 0.075); // TODO
4
+ --table-bg-color: var(--bg-surface);
5
+
6
+ --table-border-width: var(--border-width);
7
+ --table-border-color: var(--border-color);
8
+
9
+ --table-margin-bottom: var(--spacer-3);
10
+
11
+ --table-cell-padding-y: var(--spacer-2);
12
+ --table-cell-padding-x: var(--spacer-2);
13
+
14
+ --table-header-color: var(--text-color);
15
+ --table-header-bg-color: var(--bg-surface-hover);
16
+
17
+ --table-striped-bg-color: var(--bg-highlight);
18
+ --table-striped-color: var(--table-color);
19
+
20
+ --table-hover-bg-color: var(--bg-highlight);
21
+ --table-hover-color: var(--table-color);
22
+
23
+ --table-active-bg-color: var(--bg-active);
24
+ --table-active-color: var(--table-color);
15
25
 
16
26
  width: 100%;
17
- margin-bottom: 1rem;
27
+ margin-bottom: var(--table-margin-bottom);
28
+ color: var(--table-color);
18
29
  vertical-align: top;
19
- border-color: var(--table-border-color, --border-color);
30
+ border-color: var(--table-border-color);
31
+ border-collapse: collapse;
20
32
 
21
33
  & > thead {
22
34
  vertical-align: bottom;
23
35
  }
24
36
 
37
+ & > tbody {
38
+ vertical-align: inherit;
39
+ }
40
+
25
41
  & > :not(caption) > * > * {
26
- padding: 0.5rem 0.5rem;
27
- color: var(--table-color-state, var(--table-color-type, var(--table-color)));
28
- background-color: var(--table-bg, var(--bg-surface));
29
- border-bottom-width: var(--table-border-width, var(--border-width));
30
- box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--table-accent-bg)));
42
+ padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
43
+ color: var(--table-color);
44
+ background-color: var(--table-bg-color);
45
+ border-bottom: var(--table-border-width) solid var(--table-border-color);
31
46
  }
32
47
 
33
- & > tbody {
34
- vertical-align: inherit;
48
+ & > thead > tr > * {
49
+ color: var(--table-header-color);
50
+ background-color: var(--table-header-bg-color);
51
+ font-weight: 600;
52
+ }
53
+
54
+ &.table-striped > tbody > tr:nth-of-type(odd) > * {
55
+ color: var(--table-striped-color);
56
+ background-color: var(--table-striped-bg-color);
35
57
  }
36
58
 
37
- .table-striped > tbody > tr:nth-of-type(odd) > * {
38
- --table-color-type: var(--table-striped-color);
39
- --table-bg-type: var(--table-striped-bg);
59
+ &.table-hover > tbody > tr:hover > * {
60
+ color: var(--table-hover-color);
61
+ background-color: var(--table-hover-bg-color);
40
62
  }
63
+
64
+ & > tbody > tr.is-active > * {
65
+ color: var(--table-active-color);
66
+ background-color: var(--table-active-bg-color);
67
+ }
68
+ }
69
+
70
+ .table-bordered {
71
+ & > :not(caption) > * > * {
72
+ border: var(--table-border-width) solid var(--table-border-color);
73
+ }
74
+ }
75
+
76
+ .table-borderless {
77
+ & > :not(caption) > * > * {
78
+ border-bottom-width: 0;
79
+ }
80
+ }
81
+
82
+ .table-sm {
83
+ --table-cell-padding-y: var(--spacer-1);
84
+ --table-cell-padding-x: var(--spacer-1);
85
+ }
86
+
87
+ .table-responsive {
88
+ width: 100%;
89
+ overflow-x: auto;
90
+ -webkit-overflow-scrolling: touch;
41
91
  }
42
92
  }