@db-ux/core-foundations 4.13.1-angular-signal-forms13-577b861 → 4.14.0-shell-52d18db

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 (52) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/assets/icons/LICENCES.json +18 -0
  3. package/assets/icons/fonts/all/db-ux.woff2 +0 -0
  4. package/assets/icons/fonts/default/db-ux.woff2 +0 -0
  5. package/assets/icons/fonts/default_12/db-ux.woff2 +0 -0
  6. package/assets/icons/fonts/default_14/db-ux.woff2 +0 -0
  7. package/assets/icons/fonts/default_16/db-ux.woff2 +0 -0
  8. package/assets/icons/fonts/default_20/db-ux.woff2 +0 -0
  9. package/assets/icons/fonts/default_24/db-ux.woff2 +0 -0
  10. package/assets/icons/fonts/default_28/db-ux.woff2 +0 -0
  11. package/assets/icons/fonts/default_32/db-ux.woff2 +0 -0
  12. package/assets/icons/fonts/default_48/db-ux.woff2 +0 -0
  13. package/assets/icons/fonts/default_64/db-ux.woff2 +0 -0
  14. package/assets/icons/fonts/filled/db-ux.woff2 +0 -0
  15. package/assets/icons/fonts/filled_12/db-ux.woff2 +0 -0
  16. package/assets/icons/fonts/filled_14/db-ux.woff2 +0 -0
  17. package/assets/icons/fonts/filled_16/db-ux.woff2 +0 -0
  18. package/assets/icons/fonts/filled_20/db-ux.woff2 +0 -0
  19. package/assets/icons/fonts/filled_24/db-ux.woff2 +0 -0
  20. package/assets/icons/fonts/filled_28/db-ux.woff2 +0 -0
  21. package/assets/icons/fonts/filled_32/db-ux.woff2 +0 -0
  22. package/assets/icons/fonts/filled_48/db-ux.woff2 +0 -0
  23. package/assets/icons/fonts/filled_64/db-ux.woff2 +0 -0
  24. package/assets/images/chevron_down.svg +7 -0
  25. package/assets/images/chevron_up.svg +7 -0
  26. package/assets/images/logo.svg +7 -0
  27. package/assets/images/resize_handle_corner.svg +7 -0
  28. package/build/styles/bundle.css +5 -38
  29. package/build/styles/colors/_default-color-mappings.scss +1 -2
  30. package/build/styles/defaults/default-container-variables.css +1 -1
  31. package/build/styles/defaults/default-container-variables.scss +1 -2
  32. package/build/styles/defaults/default-required.css +1 -1
  33. package/build/styles/defaults/default-required.scss +4 -24
  34. package/build/styles/defaults/default-variables.css +1 -1
  35. package/build/styles/defaults/default-variables.scss +1 -2
  36. package/build/styles/helpers/_a11y.scss +18 -11
  37. package/build/styles/helpers/_divider.scss +35 -6
  38. package/build/styles/helpers/classes/all.css +86 -38
  39. package/build/styles/helpers/classes/divider.css +86 -38
  40. package/build/styles/theme/_absolute.assets-paths.scss +2 -1
  41. package/build/styles/theme/_default-images.scss +14 -0
  42. package/build/styles/theme/_default.assets-paths.scss +1 -0
  43. package/build/styles/theme/_rollup.assets-paths.scss +2 -1
  44. package/build/styles/theme/_webpack.assets-paths.scss +2 -1
  45. package/build/styles/theme/absolute.css +1 -1
  46. package/build/styles/theme/relative.css +1 -1
  47. package/build/styles/theme/relative.scss +5 -0
  48. package/build/styles/theme/rollup.css +1 -1
  49. package/build/styles/theme/webpack.css +1 -1
  50. package/build/tailwind/theme/index.css +38 -9
  51. package/package.json +3 -3
  52. package/build/styles/colors/_default-color-icons.scss +0 -11
@@ -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 at-rule-empty-line-before */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 at-rule-empty-line-before */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 at-rule-empty-line-before */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 at-rule-empty-line-before */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 at-rule-empty-line-before */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 at-rule-empty-line-before */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 no-invalid-position-declaration, db-ux/use-border-color */
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 no-invalid-position-declaration, db-ux/use-border-color */
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
+ }
@@ -1,5 +1,6 @@
1
1
  // If you serve your assets and your css on root level you might need those paths.
2
2
  @use "default.assets-paths" as assets-paths with (
3
3
  $icons-path: "/assets/icons/",
4
- $fonts-path: "/assets/fonts/"
4
+ $fonts-path: "/assets/fonts/",
5
+ $images-path: "/assets/images/"
5
6
  );
@@ -0,0 +1,14 @@
1
+ @use "./default.assets-paths" as assets-paths;
2
+
3
+ @mixin get-images {
4
+ --db-textarea-resizer-image: url("#{assets-paths.$images-path}resize_handle_corner.svg");
5
+ --db-textarea-scrollbar-button-decrement: url("#{assets-paths.$images-path}chevron_up.svg");
6
+ --db-textarea-scrollbar-button-increment: url("#{assets-paths.$images-path}chevron_down.svg");
7
+ --db-logo-aspect-ratio: 1;
8
+ --db-logo-url: url("#{assets-paths.$images-path}logo.svg");
9
+
10
+ // NOTE: --db-logo-url-short uses the same logo.svg as a placeholder.
11
+ // Override this token in your theme to provide a distinct short variant.
12
+ --db-logo-aspect-ratio-short: 1;
13
+ --db-logo-url-short: url("#{assets-paths.$images-path}logo.svg");
14
+ }
@@ -1,2 +1,3 @@
1
1
  $icons-path: "../../assets/icons/" !default;
2
2
  $fonts-path: "../../assets/fonts/" !default;
3
+ $images-path: "../../assets/images/" !default;
@@ -1,5 +1,6 @@
1
1
  // If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
2
2
  @use "default.assets-paths" as assets-paths with (
3
3
  $icons-path: "@db-ux/core-foundations/assets/icons/",
4
- $fonts-path: "@db-ux/core-foundations/assets/fonts/"
4
+ $fonts-path: "@db-ux/core-foundations/assets/fonts/",
5
+ $images-path: "@db-ux/core-foundations/assets/images/"
5
6
  );
@@ -1,5 +1,6 @@
1
1
  // If this library is used as an npm dependency, and the source files should be included rather than css, this corrects the paths.
2
2
  @use "default.assets-paths" as assets-paths with (
3
3
  $icons-path: "~@db-ux/core-foundations/assets/icons/",
4
- $fonts-path: "~@db-ux/core-foundations/assets/fonts/"
4
+ $fonts-path: "~@db-ux/core-foundations/assets/fonts/",
5
+ $images-path: "~@db-ux/core-foundations/assets/images/"
5
6
  );