@db-ux/core-foundations 4.13.1-angular-signal-forms12-ac097f6 → 4.14.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.
- package/CHANGELOG.md +12 -0
- package/build/styles/helpers/_a11y.scss +18 -11
- package/build/styles/helpers/_divider.scss +35 -6
- package/build/styles/helpers/classes/all.css +86 -38
- package/build/styles/helpers/classes/divider.css +86 -38
- package/build/tailwind/theme/index.css +38 -9
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @db-ux/core-foundations
|
|
2
2
|
|
|
3
|
+
## 4.14.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- refactor: consolidate floating component listeners into shared abstractions - [see commit de676fe](https://github.com/db-ux-design-system/core-web/commit/de676fe17e8a8157acd2e574fcea28ab6022389c)
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- fix: allow overriding font-weight on `text-body-*` / `text-head-*` Tailwind utilities - [see commit 771da1a](https://github.com/db-ux-design-system/core-web/commit/771da1aead25ba11a3aff37b7a578edeecf54605):
|
|
12
|
+
|
|
13
|
+
- The typography utilities applied the `font` shorthand, which reset `font-weight` to its initial value and made utilities like `font-bold` ineffective. The utilities now re-apply `font-weight` via Tailwind's `--tw-font-weight` variable, keeping the token's natural weight as the default while allowing independent overrides.
|
|
14
|
+
|
|
3
15
|
## 4.13.0
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
// stylelint-disable property-no-deprecated, db-ux/use-sizing
|
|
2
2
|
%a11y-visually-hidden {
|
|
3
|
-
clip: rect(0, 0, 0, 0) !important;
|
|
4
|
-
overflow: hidden !important;
|
|
5
|
-
white-space: nowrap !important;
|
|
6
|
-
font-size: 0 !important;
|
|
7
|
-
all: initial;
|
|
8
|
-
inset-block-start: 0 !important;
|
|
9
|
-
block-size: 1px !important;
|
|
10
3
|
position: absolute !important;
|
|
4
|
+
inset-block-start: 0 !important;
|
|
11
5
|
inline-size: 1px !important;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
block-size: 1px !important;
|
|
7
|
+
overflow: hidden !important;
|
|
8
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
9
|
+
white-space: nowrap !important;
|
|
10
|
+
border: 0 !important;
|
|
16
11
|
padding: 0 !important;
|
|
17
12
|
pointer-events: none !important;
|
|
18
13
|
}
|
|
14
|
+
|
|
15
|
+
// Hides text while keeping the element visible (e.g. for background images).
|
|
16
|
+
// RTL-safe alternative to text-indent: -9999px.
|
|
17
|
+
@mixin a11y-visually-hidden-text {
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
text-indent: 100%;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
%a11y-visually-hidden-text {
|
|
24
|
+
@include a11y-visually-hidden-text;
|
|
25
|
+
}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
@use "../colors";
|
|
2
2
|
@use "../variables";
|
|
3
3
|
|
|
4
|
+
@mixin forced-color {
|
|
5
|
+
// border is the better implementation, but border height changes in windows based on pixel density
|
|
6
|
+
// we use it as a fallback for color contrast
|
|
7
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
8
|
+
@media (forced-colors: active) {
|
|
9
|
+
@content;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
4
13
|
// Workaround until we get Relative Color Syntax
|
|
5
14
|
// https://codepen.io/bramus/pen/VwMZOQK
|
|
6
15
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=1274133
|
|
@@ -19,32 +28,52 @@
|
|
|
19
28
|
background-color: var(--db-divider-bg-color);
|
|
20
29
|
position: absolute;
|
|
21
30
|
|
|
31
|
+
/* jscpd:ignore-start */
|
|
22
32
|
@if $position == "top" {
|
|
23
33
|
block-size: variables.$db-border-width-3xs;
|
|
24
34
|
inset-block-start: 0;
|
|
25
35
|
inset-inline: 0;
|
|
36
|
+
|
|
37
|
+
@include forced-color {
|
|
38
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
39
|
+
border-block-start: variables.$db-border-width-3xs solid
|
|
40
|
+
var(--db-divider-bg-color);
|
|
41
|
+
}
|
|
26
42
|
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
27
43
|
} @else if $position == "bottom" {
|
|
28
44
|
block-size: variables.$db-border-width-3xs;
|
|
29
45
|
inset-block-end: 0;
|
|
30
46
|
inset-inline: 0;
|
|
47
|
+
|
|
48
|
+
@include forced-color {
|
|
49
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
50
|
+
border-block-end: variables.$db-border-width-3xs solid
|
|
51
|
+
var(--db-divider-bg-color);
|
|
52
|
+
}
|
|
31
53
|
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
32
54
|
} @else if $position == "left" {
|
|
33
55
|
inline-size: variables.$db-border-width-3xs;
|
|
34
56
|
inset-inline-start: 0;
|
|
35
57
|
inset-block: 0;
|
|
58
|
+
|
|
59
|
+
@include forced-color {
|
|
60
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
61
|
+
border-inline-start: variables.$db-border-width-3xs solid
|
|
62
|
+
var(--db-divider-bg-color);
|
|
63
|
+
}
|
|
36
64
|
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
37
65
|
} @else if $position == "right" {
|
|
38
66
|
inline-size: variables.$db-border-width-3xs;
|
|
39
67
|
inset-inline-end: 0;
|
|
40
68
|
inset-block: 0;
|
|
69
|
+
|
|
70
|
+
@include forced-color {
|
|
71
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
72
|
+
border-inline-end: variables.$db-border-width-3xs solid
|
|
73
|
+
var(--db-divider-bg-color);
|
|
74
|
+
}
|
|
41
75
|
}
|
|
42
|
-
}
|
|
43
76
|
|
|
44
|
-
|
|
45
|
-
// border is the better implementation, but border height changes in windows based on pixel density
|
|
46
|
-
// we use it as a fallback for color contrast
|
|
47
|
-
/* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
|
|
48
|
-
border: variables.$db-border-width-3xs solid var(--db-divider-bg-color);
|
|
77
|
+
/* jscpd:ignore-end */
|
|
49
78
|
}
|
|
50
79
|
}
|
|
@@ -26,18 +26,24 @@
|
|
|
26
26
|
content: "";
|
|
27
27
|
background-color: var(--db-divider-bg-color);
|
|
28
28
|
position: absolute;
|
|
29
|
+
/* jscpd:ignore-start */
|
|
29
30
|
block-size: var(--db-border-width-3xs);
|
|
30
31
|
inset-block-start: 0;
|
|
31
32
|
inset-inline: 0;
|
|
32
|
-
/* stylelint-disable-next-line
|
|
33
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
33
34
|
}
|
|
34
35
|
@media (forced-colors: active) {
|
|
35
|
-
.db-divider-top-before,
|
|
36
|
-
[data-divider=top-before] {
|
|
37
|
-
/* stylelint-disable-next-line
|
|
38
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
36
|
+
.db-divider-top-before::before,
|
|
37
|
+
[data-divider=top-before]::before {
|
|
38
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
39
|
+
border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
39
40
|
}
|
|
40
41
|
}
|
|
42
|
+
.db-divider-top-before::before,
|
|
43
|
+
[data-divider=top-before]::before {
|
|
44
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
45
|
+
/* jscpd:ignore-end */
|
|
46
|
+
}
|
|
41
47
|
|
|
42
48
|
.db-divider-top-after,
|
|
43
49
|
[data-divider=top-after] {
|
|
@@ -53,18 +59,24 @@
|
|
|
53
59
|
content: "";
|
|
54
60
|
background-color: var(--db-divider-bg-color);
|
|
55
61
|
position: absolute;
|
|
62
|
+
/* jscpd:ignore-start */
|
|
56
63
|
block-size: var(--db-border-width-3xs);
|
|
57
64
|
inset-block-start: 0;
|
|
58
65
|
inset-inline: 0;
|
|
59
|
-
/* stylelint-disable-next-line
|
|
66
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
60
67
|
}
|
|
61
68
|
@media (forced-colors: active) {
|
|
62
|
-
.db-divider-top-after,
|
|
63
|
-
[data-divider=top-after] {
|
|
64
|
-
/* stylelint-disable-next-line
|
|
65
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
69
|
+
.db-divider-top-after::after,
|
|
70
|
+
[data-divider=top-after]::after {
|
|
71
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
72
|
+
border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
66
73
|
}
|
|
67
74
|
}
|
|
75
|
+
.db-divider-top-after::after,
|
|
76
|
+
[data-divider=top-after]::after {
|
|
77
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
78
|
+
/* jscpd:ignore-end */
|
|
79
|
+
}
|
|
68
80
|
|
|
69
81
|
.db-divider-bottom-before,
|
|
70
82
|
[data-divider=bottom-before] {
|
|
@@ -80,18 +92,24 @@
|
|
|
80
92
|
content: "";
|
|
81
93
|
background-color: var(--db-divider-bg-color);
|
|
82
94
|
position: absolute;
|
|
95
|
+
/* jscpd:ignore-start */
|
|
83
96
|
block-size: var(--db-border-width-3xs);
|
|
84
97
|
inset-block-end: 0;
|
|
85
98
|
inset-inline: 0;
|
|
86
|
-
/* stylelint-disable-next-line
|
|
99
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
87
100
|
}
|
|
88
101
|
@media (forced-colors: active) {
|
|
89
|
-
.db-divider-bottom-before,
|
|
90
|
-
[data-divider=bottom-before] {
|
|
91
|
-
/* stylelint-disable-next-line
|
|
92
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
102
|
+
.db-divider-bottom-before::before,
|
|
103
|
+
[data-divider=bottom-before]::before {
|
|
104
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
105
|
+
border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
93
106
|
}
|
|
94
107
|
}
|
|
108
|
+
.db-divider-bottom-before::before,
|
|
109
|
+
[data-divider=bottom-before]::before {
|
|
110
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
111
|
+
/* jscpd:ignore-end */
|
|
112
|
+
}
|
|
95
113
|
|
|
96
114
|
.db-divider-bottom-after,
|
|
97
115
|
[data-divider=bottom-after] {
|
|
@@ -107,18 +125,24 @@
|
|
|
107
125
|
content: "";
|
|
108
126
|
background-color: var(--db-divider-bg-color);
|
|
109
127
|
position: absolute;
|
|
128
|
+
/* jscpd:ignore-start */
|
|
110
129
|
block-size: var(--db-border-width-3xs);
|
|
111
130
|
inset-block-end: 0;
|
|
112
131
|
inset-inline: 0;
|
|
113
|
-
/* stylelint-disable-next-line
|
|
132
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
114
133
|
}
|
|
115
134
|
@media (forced-colors: active) {
|
|
116
|
-
.db-divider-bottom-after,
|
|
117
|
-
[data-divider=bottom-after] {
|
|
118
|
-
/* stylelint-disable-next-line
|
|
119
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
135
|
+
.db-divider-bottom-after::after,
|
|
136
|
+
[data-divider=bottom-after]::after {
|
|
137
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
138
|
+
border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
120
139
|
}
|
|
121
140
|
}
|
|
141
|
+
.db-divider-bottom-after::after,
|
|
142
|
+
[data-divider=bottom-after]::after {
|
|
143
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
144
|
+
/* jscpd:ignore-end */
|
|
145
|
+
}
|
|
122
146
|
|
|
123
147
|
.db-divider-left-before,
|
|
124
148
|
[data-divider=left-before] {
|
|
@@ -134,18 +158,24 @@
|
|
|
134
158
|
content: "";
|
|
135
159
|
background-color: var(--db-divider-bg-color);
|
|
136
160
|
position: absolute;
|
|
161
|
+
/* jscpd:ignore-start */
|
|
137
162
|
inline-size: var(--db-border-width-3xs);
|
|
138
163
|
inset-inline-start: 0;
|
|
139
164
|
inset-block: 0;
|
|
140
|
-
/* stylelint-disable-next-line
|
|
165
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
141
166
|
}
|
|
142
167
|
@media (forced-colors: active) {
|
|
143
|
-
.db-divider-left-before,
|
|
144
|
-
[data-divider=left-before] {
|
|
145
|
-
/* stylelint-disable-next-line
|
|
146
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
168
|
+
.db-divider-left-before::before,
|
|
169
|
+
[data-divider=left-before]::before {
|
|
170
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
171
|
+
border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
147
172
|
}
|
|
148
173
|
}
|
|
174
|
+
.db-divider-left-before::before,
|
|
175
|
+
[data-divider=left-before]::before {
|
|
176
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
177
|
+
/* jscpd:ignore-end */
|
|
178
|
+
}
|
|
149
179
|
|
|
150
180
|
.db-divider-left-after,
|
|
151
181
|
[data-divider=left-after] {
|
|
@@ -161,18 +191,24 @@
|
|
|
161
191
|
content: "";
|
|
162
192
|
background-color: var(--db-divider-bg-color);
|
|
163
193
|
position: absolute;
|
|
194
|
+
/* jscpd:ignore-start */
|
|
164
195
|
inline-size: var(--db-border-width-3xs);
|
|
165
196
|
inset-inline-start: 0;
|
|
166
197
|
inset-block: 0;
|
|
167
|
-
/* stylelint-disable-next-line
|
|
198
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
168
199
|
}
|
|
169
200
|
@media (forced-colors: active) {
|
|
170
|
-
.db-divider-left-after,
|
|
171
|
-
[data-divider=left-after] {
|
|
172
|
-
/* stylelint-disable-next-line
|
|
173
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
201
|
+
.db-divider-left-after::after,
|
|
202
|
+
[data-divider=left-after]::after {
|
|
203
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
204
|
+
border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
174
205
|
}
|
|
175
206
|
}
|
|
207
|
+
.db-divider-left-after::after,
|
|
208
|
+
[data-divider=left-after]::after {
|
|
209
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
210
|
+
/* jscpd:ignore-end */
|
|
211
|
+
}
|
|
176
212
|
|
|
177
213
|
.db-divider-right-before,
|
|
178
214
|
[data-divider=right-before] {
|
|
@@ -188,17 +224,23 @@
|
|
|
188
224
|
content: "";
|
|
189
225
|
background-color: var(--db-divider-bg-color);
|
|
190
226
|
position: absolute;
|
|
227
|
+
/* jscpd:ignore-start */
|
|
191
228
|
inline-size: var(--db-border-width-3xs);
|
|
192
229
|
inset-inline-end: 0;
|
|
193
230
|
inset-block: 0;
|
|
231
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
194
232
|
}
|
|
195
233
|
@media (forced-colors: active) {
|
|
196
|
-
.db-divider-right-before,
|
|
197
|
-
[data-divider=right-before] {
|
|
198
|
-
/* stylelint-disable-next-line
|
|
199
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
234
|
+
.db-divider-right-before::before,
|
|
235
|
+
[data-divider=right-before]::before {
|
|
236
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
237
|
+
border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
200
238
|
}
|
|
201
239
|
}
|
|
240
|
+
.db-divider-right-before::before,
|
|
241
|
+
[data-divider=right-before]::before {
|
|
242
|
+
/* jscpd:ignore-end */
|
|
243
|
+
}
|
|
202
244
|
|
|
203
245
|
.db-divider-right-after,
|
|
204
246
|
[data-divider=right-after] {
|
|
@@ -214,14 +256,20 @@
|
|
|
214
256
|
content: "";
|
|
215
257
|
background-color: var(--db-divider-bg-color);
|
|
216
258
|
position: absolute;
|
|
259
|
+
/* jscpd:ignore-start */
|
|
217
260
|
inline-size: var(--db-border-width-3xs);
|
|
218
261
|
inset-inline-end: 0;
|
|
219
262
|
inset-block: 0;
|
|
263
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
220
264
|
}
|
|
221
265
|
@media (forced-colors: active) {
|
|
222
|
-
.db-divider-right-after,
|
|
223
|
-
[data-divider=right-after] {
|
|
224
|
-
/* stylelint-disable-next-line
|
|
225
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
266
|
+
.db-divider-right-after::after,
|
|
267
|
+
[data-divider=right-after]::after {
|
|
268
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
269
|
+
border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
226
270
|
}
|
|
227
271
|
}
|
|
272
|
+
.db-divider-right-after::after,
|
|
273
|
+
[data-divider=right-after]::after {
|
|
274
|
+
/* jscpd:ignore-end */
|
|
275
|
+
}
|
|
@@ -15,18 +15,24 @@
|
|
|
15
15
|
content: "";
|
|
16
16
|
background-color: var(--db-divider-bg-color);
|
|
17
17
|
position: absolute;
|
|
18
|
+
/* jscpd:ignore-start */
|
|
18
19
|
block-size: var(--db-border-width-3xs);
|
|
19
20
|
inset-block-start: 0;
|
|
20
21
|
inset-inline: 0;
|
|
21
|
-
/* stylelint-disable-next-line
|
|
22
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
22
23
|
}
|
|
23
24
|
@media (forced-colors: active) {
|
|
24
|
-
.db-divider-top-before,
|
|
25
|
-
[data-divider=top-before] {
|
|
26
|
-
/* stylelint-disable-next-line
|
|
27
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
25
|
+
.db-divider-top-before::before,
|
|
26
|
+
[data-divider=top-before]::before {
|
|
27
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
28
|
+
border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
28
29
|
}
|
|
29
30
|
}
|
|
31
|
+
.db-divider-top-before::before,
|
|
32
|
+
[data-divider=top-before]::before {
|
|
33
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
34
|
+
/* jscpd:ignore-end */
|
|
35
|
+
}
|
|
30
36
|
|
|
31
37
|
.db-divider-top-after,
|
|
32
38
|
[data-divider=top-after] {
|
|
@@ -42,18 +48,24 @@
|
|
|
42
48
|
content: "";
|
|
43
49
|
background-color: var(--db-divider-bg-color);
|
|
44
50
|
position: absolute;
|
|
51
|
+
/* jscpd:ignore-start */
|
|
45
52
|
block-size: var(--db-border-width-3xs);
|
|
46
53
|
inset-block-start: 0;
|
|
47
54
|
inset-inline: 0;
|
|
48
|
-
/* stylelint-disable-next-line
|
|
55
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
49
56
|
}
|
|
50
57
|
@media (forced-colors: active) {
|
|
51
|
-
.db-divider-top-after,
|
|
52
|
-
[data-divider=top-after] {
|
|
53
|
-
/* stylelint-disable-next-line
|
|
54
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
58
|
+
.db-divider-top-after::after,
|
|
59
|
+
[data-divider=top-after]::after {
|
|
60
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
61
|
+
border-block-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
55
62
|
}
|
|
56
63
|
}
|
|
64
|
+
.db-divider-top-after::after,
|
|
65
|
+
[data-divider=top-after]::after {
|
|
66
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
67
|
+
/* jscpd:ignore-end */
|
|
68
|
+
}
|
|
57
69
|
|
|
58
70
|
.db-divider-bottom-before,
|
|
59
71
|
[data-divider=bottom-before] {
|
|
@@ -69,18 +81,24 @@
|
|
|
69
81
|
content: "";
|
|
70
82
|
background-color: var(--db-divider-bg-color);
|
|
71
83
|
position: absolute;
|
|
84
|
+
/* jscpd:ignore-start */
|
|
72
85
|
block-size: var(--db-border-width-3xs);
|
|
73
86
|
inset-block-end: 0;
|
|
74
87
|
inset-inline: 0;
|
|
75
|
-
/* stylelint-disable-next-line
|
|
88
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
76
89
|
}
|
|
77
90
|
@media (forced-colors: active) {
|
|
78
|
-
.db-divider-bottom-before,
|
|
79
|
-
[data-divider=bottom-before] {
|
|
80
|
-
/* stylelint-disable-next-line
|
|
81
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
91
|
+
.db-divider-bottom-before::before,
|
|
92
|
+
[data-divider=bottom-before]::before {
|
|
93
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
94
|
+
border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
82
95
|
}
|
|
83
96
|
}
|
|
97
|
+
.db-divider-bottom-before::before,
|
|
98
|
+
[data-divider=bottom-before]::before {
|
|
99
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
100
|
+
/* jscpd:ignore-end */
|
|
101
|
+
}
|
|
84
102
|
|
|
85
103
|
.db-divider-bottom-after,
|
|
86
104
|
[data-divider=bottom-after] {
|
|
@@ -96,18 +114,24 @@
|
|
|
96
114
|
content: "";
|
|
97
115
|
background-color: var(--db-divider-bg-color);
|
|
98
116
|
position: absolute;
|
|
117
|
+
/* jscpd:ignore-start */
|
|
99
118
|
block-size: var(--db-border-width-3xs);
|
|
100
119
|
inset-block-end: 0;
|
|
101
120
|
inset-inline: 0;
|
|
102
|
-
/* stylelint-disable-next-line
|
|
121
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
103
122
|
}
|
|
104
123
|
@media (forced-colors: active) {
|
|
105
|
-
.db-divider-bottom-after,
|
|
106
|
-
[data-divider=bottom-after] {
|
|
107
|
-
/* stylelint-disable-next-line
|
|
108
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
124
|
+
.db-divider-bottom-after::after,
|
|
125
|
+
[data-divider=bottom-after]::after {
|
|
126
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
127
|
+
border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
109
128
|
}
|
|
110
129
|
}
|
|
130
|
+
.db-divider-bottom-after::after,
|
|
131
|
+
[data-divider=bottom-after]::after {
|
|
132
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
133
|
+
/* jscpd:ignore-end */
|
|
134
|
+
}
|
|
111
135
|
|
|
112
136
|
.db-divider-left-before,
|
|
113
137
|
[data-divider=left-before] {
|
|
@@ -123,18 +147,24 @@
|
|
|
123
147
|
content: "";
|
|
124
148
|
background-color: var(--db-divider-bg-color);
|
|
125
149
|
position: absolute;
|
|
150
|
+
/* jscpd:ignore-start */
|
|
126
151
|
inline-size: var(--db-border-width-3xs);
|
|
127
152
|
inset-inline-start: 0;
|
|
128
153
|
inset-block: 0;
|
|
129
|
-
/* stylelint-disable-next-line
|
|
154
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
130
155
|
}
|
|
131
156
|
@media (forced-colors: active) {
|
|
132
|
-
.db-divider-left-before,
|
|
133
|
-
[data-divider=left-before] {
|
|
134
|
-
/* stylelint-disable-next-line
|
|
135
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
157
|
+
.db-divider-left-before::before,
|
|
158
|
+
[data-divider=left-before]::before {
|
|
159
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
160
|
+
border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
136
161
|
}
|
|
137
162
|
}
|
|
163
|
+
.db-divider-left-before::before,
|
|
164
|
+
[data-divider=left-before]::before {
|
|
165
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
166
|
+
/* jscpd:ignore-end */
|
|
167
|
+
}
|
|
138
168
|
|
|
139
169
|
.db-divider-left-after,
|
|
140
170
|
[data-divider=left-after] {
|
|
@@ -150,18 +180,24 @@
|
|
|
150
180
|
content: "";
|
|
151
181
|
background-color: var(--db-divider-bg-color);
|
|
152
182
|
position: absolute;
|
|
183
|
+
/* jscpd:ignore-start */
|
|
153
184
|
inline-size: var(--db-border-width-3xs);
|
|
154
185
|
inset-inline-start: 0;
|
|
155
186
|
inset-block: 0;
|
|
156
|
-
/* stylelint-disable-next-line
|
|
187
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
157
188
|
}
|
|
158
189
|
@media (forced-colors: active) {
|
|
159
|
-
.db-divider-left-after,
|
|
160
|
-
[data-divider=left-after] {
|
|
161
|
-
/* stylelint-disable-next-line
|
|
162
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
190
|
+
.db-divider-left-after::after,
|
|
191
|
+
[data-divider=left-after]::after {
|
|
192
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
193
|
+
border-inline-start: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
163
194
|
}
|
|
164
195
|
}
|
|
196
|
+
.db-divider-left-after::after,
|
|
197
|
+
[data-divider=left-after]::after {
|
|
198
|
+
/* stylelint-disable-next-line at-rule-empty-line-before */
|
|
199
|
+
/* jscpd:ignore-end */
|
|
200
|
+
}
|
|
165
201
|
|
|
166
202
|
.db-divider-right-before,
|
|
167
203
|
[data-divider=right-before] {
|
|
@@ -177,17 +213,23 @@
|
|
|
177
213
|
content: "";
|
|
178
214
|
background-color: var(--db-divider-bg-color);
|
|
179
215
|
position: absolute;
|
|
216
|
+
/* jscpd:ignore-start */
|
|
180
217
|
inline-size: var(--db-border-width-3xs);
|
|
181
218
|
inset-inline-end: 0;
|
|
182
219
|
inset-block: 0;
|
|
220
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
183
221
|
}
|
|
184
222
|
@media (forced-colors: active) {
|
|
185
|
-
.db-divider-right-before,
|
|
186
|
-
[data-divider=right-before] {
|
|
187
|
-
/* stylelint-disable-next-line
|
|
188
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
223
|
+
.db-divider-right-before::before,
|
|
224
|
+
[data-divider=right-before]::before {
|
|
225
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
226
|
+
border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
189
227
|
}
|
|
190
228
|
}
|
|
229
|
+
.db-divider-right-before::before,
|
|
230
|
+
[data-divider=right-before]::before {
|
|
231
|
+
/* jscpd:ignore-end */
|
|
232
|
+
}
|
|
191
233
|
|
|
192
234
|
.db-divider-right-after,
|
|
193
235
|
[data-divider=right-after] {
|
|
@@ -203,14 +245,20 @@
|
|
|
203
245
|
content: "";
|
|
204
246
|
background-color: var(--db-divider-bg-color);
|
|
205
247
|
position: absolute;
|
|
248
|
+
/* jscpd:ignore-start */
|
|
206
249
|
inline-size: var(--db-border-width-3xs);
|
|
207
250
|
inset-inline-end: 0;
|
|
208
251
|
inset-block: 0;
|
|
252
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
209
253
|
}
|
|
210
254
|
@media (forced-colors: active) {
|
|
211
|
-
.db-divider-right-after,
|
|
212
|
-
[data-divider=right-after] {
|
|
213
|
-
/* stylelint-disable-next-line
|
|
214
|
-
border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
255
|
+
.db-divider-right-after::after,
|
|
256
|
+
[data-divider=right-after]::after {
|
|
257
|
+
/* stylelint-disable-next-line db-ux/use-border-color */
|
|
258
|
+
border-inline-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
|
|
215
259
|
}
|
|
216
260
|
}
|
|
261
|
+
.db-divider-right-after::after,
|
|
262
|
+
[data-divider=right-after]::after {
|
|
263
|
+
/* jscpd:ignore-end */
|
|
264
|
+
}
|
|
@@ -6,121 +6,150 @@
|
|
|
6
6
|
@import "./colors.css";
|
|
7
7
|
@import "./breakpoints.css";
|
|
8
8
|
|
|
9
|
+
/*
|
|
10
|
+
* The typography design tokens (--db-type-*) are stored as a CSS `font` shorthand.
|
|
11
|
+
* The `font` shorthand resets every sub-property it does not explicitly contain
|
|
12
|
+
* to its initial value — including `font-weight`. To keep the font-weight
|
|
13
|
+
* overridable via Tailwind utilities (e.g. `font-bold`, `font-semibold`), we
|
|
14
|
+
* re-apply `font-weight` right after the shorthand using Tailwind's own
|
|
15
|
+
* `--tw-font-weight` custom property (set by the font-weight utilities) and fall
|
|
16
|
+
* back to the token's natural weight when no font-weight utility is present.
|
|
17
|
+
* This mirrors how Tailwind's built-in text-size utilities behave.
|
|
18
|
+
*/
|
|
19
|
+
|
|
9
20
|
@utility text-body-3xs {
|
|
10
21
|
font: var(--db-type-body-3xs);
|
|
22
|
+
font-weight: var(--tw-font-weight, normal);
|
|
11
23
|
}
|
|
12
24
|
|
|
13
25
|
@utility text-body-2xs {
|
|
14
26
|
font: var(--db-type-body-2xs);
|
|
27
|
+
font-weight: var(--tw-font-weight, normal);
|
|
15
28
|
}
|
|
16
29
|
|
|
17
30
|
@utility text-body-xs {
|
|
18
31
|
font: var(--db-type-body-xs);
|
|
32
|
+
font-weight: var(--tw-font-weight, normal);
|
|
19
33
|
}
|
|
20
34
|
|
|
21
35
|
@utility text-body-sm {
|
|
22
36
|
font: var(--db-type-body-sm);
|
|
37
|
+
font-weight: var(--tw-font-weight, normal);
|
|
23
38
|
}
|
|
24
39
|
|
|
25
40
|
@utility text-body-md {
|
|
26
41
|
font: var(--db-type-body-md);
|
|
42
|
+
font-weight: var(--tw-font-weight, normal);
|
|
27
43
|
}
|
|
28
44
|
|
|
29
45
|
@utility text-body-lg {
|
|
30
46
|
font: var(--db-type-body-lg);
|
|
47
|
+
font-weight: var(--tw-font-weight, normal);
|
|
31
48
|
}
|
|
32
49
|
|
|
33
50
|
@utility text-body-xl {
|
|
34
51
|
font: var(--db-type-body-xl);
|
|
52
|
+
font-weight: var(--tw-font-weight, normal);
|
|
35
53
|
}
|
|
36
54
|
|
|
37
55
|
@utility text-body-2xl {
|
|
38
56
|
font: var(--db-type-body-2xl);
|
|
57
|
+
font-weight: var(--tw-font-weight, normal);
|
|
39
58
|
}
|
|
40
59
|
|
|
41
60
|
@utility text-body-3xl {
|
|
42
61
|
font: var(--db-type-body-3xl);
|
|
62
|
+
font-weight: var(--tw-font-weight, normal);
|
|
43
63
|
}
|
|
44
64
|
|
|
45
65
|
@utility text-head-3xs {
|
|
46
66
|
font: var(--db-type-headline-3xs);
|
|
67
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
47
68
|
}
|
|
48
69
|
|
|
49
70
|
@utility text-head-2xs {
|
|
50
71
|
font: var(--db-type-headline-2xs);
|
|
72
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
51
73
|
}
|
|
52
74
|
|
|
53
75
|
@utility text-head-xs {
|
|
54
76
|
font: var(--db-type-headline-xs);
|
|
77
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
55
78
|
}
|
|
56
79
|
|
|
57
80
|
@utility text-head-sm {
|
|
58
81
|
font: var(--db-type-headline-sm);
|
|
82
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
59
83
|
}
|
|
60
84
|
|
|
61
85
|
@utility text-head-md {
|
|
62
86
|
font: var(--db-type-headline-md);
|
|
87
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
63
88
|
}
|
|
64
89
|
|
|
65
90
|
@utility text-head-lg {
|
|
66
91
|
font: var(--db-type-headline-lg);
|
|
92
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
67
93
|
}
|
|
68
94
|
|
|
69
95
|
@utility text-head-xl {
|
|
70
96
|
font: var(--db-type-headline-xl);
|
|
97
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
71
98
|
}
|
|
72
99
|
|
|
73
100
|
@utility text-head-2xl {
|
|
74
101
|
font: var(--db-type-headline-2xl);
|
|
102
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
75
103
|
}
|
|
76
104
|
|
|
77
105
|
@utility text-head-3xl {
|
|
78
106
|
font: var(--db-type-headline-3xl);
|
|
107
|
+
font-weight: var(--tw-font-weight, bolder);
|
|
79
108
|
}
|
|
80
109
|
|
|
81
110
|
@utility text-head-light-3xs {
|
|
82
111
|
font: var(--db-type-headline-3xs);
|
|
83
|
-
font-weight: 300;
|
|
112
|
+
font-weight: var(--tw-font-weight, 300);
|
|
84
113
|
}
|
|
85
114
|
|
|
86
115
|
@utility text-head-light-2xs {
|
|
87
116
|
font: var(--db-type-headline-2xs);
|
|
88
|
-
font-weight: 300;
|
|
117
|
+
font-weight: var(--tw-font-weight, 300);
|
|
89
118
|
}
|
|
90
119
|
|
|
91
120
|
@utility text-head-light-xs {
|
|
92
121
|
font: var(--db-type-headline-xs);
|
|
93
|
-
font-weight: 300;
|
|
122
|
+
font-weight: var(--tw-font-weight, 300);
|
|
94
123
|
}
|
|
95
124
|
|
|
96
125
|
@utility text-head-light-sm {
|
|
97
126
|
font: var(--db-type-headline-sm);
|
|
98
|
-
font-weight: 300;
|
|
127
|
+
font-weight: var(--tw-font-weight, 300);
|
|
99
128
|
}
|
|
100
129
|
|
|
101
130
|
@utility text-head-light-md {
|
|
102
131
|
font: var(--db-type-headline-md);
|
|
103
|
-
font-weight: 300;
|
|
132
|
+
font-weight: var(--tw-font-weight, 300);
|
|
104
133
|
}
|
|
105
134
|
|
|
106
135
|
@utility text-head-light-lg {
|
|
107
136
|
font: var(--db-type-headline-lg);
|
|
108
|
-
font-weight: 300;
|
|
137
|
+
font-weight: var(--tw-font-weight, 300);
|
|
109
138
|
}
|
|
110
139
|
|
|
111
140
|
@utility text-head-light-xl {
|
|
112
141
|
font: var(--db-type-headline-xl);
|
|
113
|
-
font-weight: 300;
|
|
142
|
+
font-weight: var(--tw-font-weight, 300);
|
|
114
143
|
}
|
|
115
144
|
|
|
116
145
|
@utility text-head-light-2xl {
|
|
117
146
|
font: var(--db-type-headline-2xl);
|
|
118
|
-
font-weight: 300;
|
|
147
|
+
font-weight: var(--tw-font-weight, 300);
|
|
119
148
|
}
|
|
120
149
|
|
|
121
150
|
@utility text-head-light-3xl {
|
|
122
151
|
font: var(--db-type-headline-3xl);
|
|
123
|
-
font-weight: 300;
|
|
152
|
+
font-weight: var(--tw-font-weight, 300);
|
|
124
153
|
}
|
|
125
154
|
|
|
126
155
|
@layer base {
|
package/package.json
CHANGED