@solid-design-system/styles 6.13.1 → 6.14.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 (70) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/cdn/modules/chip.css +1 -1
  3. package/cdn/modules/container.css +1 -1
  4. package/cdn/modules/copyright.css +1 -1
  5. package/cdn/modules/flag.css +1 -1
  6. package/cdn/modules/footnotes.css +1 -1
  7. package/cdn/modules/headline.css +1 -1
  8. package/cdn/modules/hidden-links.css +1 -1
  9. package/cdn/modules/list.css +1 -1
  10. package/cdn/modules/pagination.css +1 -1
  11. package/cdn/modules/prose.css +1 -1
  12. package/cdn/modules/status-badge.css +1 -1
  13. package/cdn/modules/table-cell.css +1 -1
  14. package/cdn/solid-styles.css +1 -1
  15. package/cdn-versioned/modules/chip.css +1 -1
  16. package/cdn-versioned/modules/container.css +1 -1
  17. package/cdn-versioned/modules/copyright.css +1 -1
  18. package/cdn-versioned/modules/display.css +1 -1
  19. package/cdn-versioned/modules/flag.css +1 -1
  20. package/cdn-versioned/modules/footnotes.css +1 -1
  21. package/cdn-versioned/modules/headline.css +1 -1
  22. package/cdn-versioned/modules/hidden-links.css +1 -1
  23. package/cdn-versioned/modules/interactive.css +1 -1
  24. package/cdn-versioned/modules/leadtext.css +1 -1
  25. package/cdn-versioned/modules/list.css +1 -1
  26. package/cdn-versioned/modules/mark.css +1 -1
  27. package/cdn-versioned/modules/media.css +1 -1
  28. package/cdn-versioned/modules/meta.css +1 -1
  29. package/cdn-versioned/modules/pagination.css +1 -1
  30. package/cdn-versioned/modules/paragraph.css +1 -1
  31. package/cdn-versioned/modules/prose.css +1 -1
  32. package/cdn-versioned/modules/status-badge.css +1 -1
  33. package/cdn-versioned/modules/table-cell.css +1 -1
  34. package/cdn-versioned/modules/table.css +1 -1
  35. package/cdn-versioned/solid-styles.css +1 -1
  36. package/dist/modules/chip.css +4 -5
  37. package/dist/modules/container.css +1 -1
  38. package/dist/modules/copyright.css +2 -2
  39. package/dist/modules/flag.css +5 -3
  40. package/dist/modules/footnotes.css +3 -3
  41. package/dist/modules/headline.css +2 -0
  42. package/dist/modules/hidden-links.css +9 -0
  43. package/dist/modules/list.css +1 -1
  44. package/dist/modules/pagination.css +8 -2
  45. package/dist/modules/prose.css +5 -3
  46. package/dist/modules/status-badge.css +2 -2
  47. package/dist/modules/table-cell.css +2 -2
  48. package/dist/solid-styles.css +33 -21
  49. package/dist-versioned/modules/chip.css +8 -9
  50. package/dist-versioned/modules/container.css +28 -28
  51. package/dist-versioned/modules/copyright.css +8 -8
  52. package/dist-versioned/modules/display.css +6 -6
  53. package/dist-versioned/modules/flag.css +9 -7
  54. package/dist-versioned/modules/footnotes.css +30 -30
  55. package/dist-versioned/modules/headline.css +30 -28
  56. package/dist-versioned/modules/hidden-links.css +13 -4
  57. package/dist-versioned/modules/interactive.css +16 -16
  58. package/dist-versioned/modules/leadtext.css +3 -3
  59. package/dist-versioned/modules/list.css +31 -31
  60. package/dist-versioned/modules/mark.css +1 -1
  61. package/dist-versioned/modules/media.css +4 -4
  62. package/dist-versioned/modules/meta.css +7 -7
  63. package/dist-versioned/modules/pagination.css +68 -62
  64. package/dist-versioned/modules/paragraph.css +3 -3
  65. package/dist-versioned/modules/prose.css +128 -126
  66. package/dist-versioned/modules/status-badge.css +8 -8
  67. package/dist-versioned/modules/table-cell.css +18 -18
  68. package/dist-versioned/modules/table.css +2 -2
  69. package/dist-versioned/solid-styles.css +302 -290
  70. package/package.json +1 -1
@@ -9,12 +9,9 @@
9
9
  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
10
10
  border-style: var(--tw-border-style);
11
11
  border-width: 1px;
12
- border-width: var(--sd-chip-border-width, 0);
13
12
  border-color: rgba(var(--sd-chip--primary-200-color-border, rgba(255, 255, 255, 0)));
14
13
  background-color: rgba(var(--sd-chip--primary-200-color-background, rgba(var(--sd-color-primary-200))));
15
14
  padding-inline: var(--sd-spacing-2);
16
- font-size: var(--sd-chip-font-size, 0.875rem);
17
- font-weight: var(--sd-chip-font-weight, var(--sd-font-weight-normal));
18
15
  white-space: nowrap;
19
16
  color: rgba(var(--sd-color-text-black));
20
17
  }
@@ -31,8 +28,10 @@
31
28
  border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
32
29
  background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
33
30
  }
34
- .sd-theme-kid .sd-chip {
35
- box-shadow: var(--sd-shadow-sm);
31
+ .sd-chip{
32
+ font-size: var(--sd-chip-font-size);
33
+ border-width: var(--sd-chip-border-width);
34
+ font-weight: var(--sd-chip-font-weight);
36
35
  }
37
36
  @property --tw-border-style {
38
37
  syntax: "*";
@@ -27,7 +27,7 @@
27
27
  padding-block: var(--sd-spacing-4);
28
28
  }
29
29
  .sd-container{
30
- --triangle-background: rgba(var(--sd-color-white));
30
+ --triangle-background: rgba(var(--sd-color-background-white));
31
31
  }
32
32
  .sd-container--triangle-top::before, .sd-container--triangle-right::before, .sd-container--triangle-bottom::before, .sd-container--triangle-left::before {
33
33
  position: absolute;
@@ -23,8 +23,8 @@
23
23
  font-size: var(--sd-text-sm);
24
24
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
25
25
  color: rgba(var(--sd-color-text-white));
26
- --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-sm));
27
- --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-sm));
26
+ --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-xs));
27
+ --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-xs));
28
28
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
29
29
  content: var(--copyright);
30
30
  }
@@ -9,12 +9,11 @@
9
9
  border-radius: var(--sd-flag-border-radius, 0);
10
10
  border-style: var(--tw-border-style);
11
11
  border-width: 1px;
12
- border-width: var(--sd-flag-border-width, 0);
13
12
  border-color: rgba(var(--sd-flag--neutral-200-color-border, rgba(255, 255, 255, 0)));
14
13
  background-color: rgba(var(--sd-flag--neutral-200-color-background, rgba(var(--sd-color-neutral-200))));
15
14
  padding-inline: var(--sd-spacing-3);
16
- font-size: var(--sd-text-sm);
17
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
15
+ font-size: var(--sd-marker-font-size, 0.875rem);
16
+ font-weight: var(--sd-marker-font-weight, var(--sd-font-weight-normal));
18
17
  white-space: nowrap;
19
18
  color: rgba(var(--sd-color-text-black));
20
19
  }
@@ -31,6 +30,9 @@
31
30
  border-color: rgba(var(--sd-flag--white-color-border, rgba(255, 255, 255, 0)));
32
31
  background-color: rgba(var(--sd-flag--white-color-background, rgba(var(--sd-color-white))));
33
32
  }
33
+ .sd-flag{
34
+ border-width: var(--sd-flag-border-width);
35
+ }
34
36
  @property --tw-border-style {
35
37
  syntax: "*";
36
38
  inherits: false;
@@ -85,6 +85,9 @@
85
85
  .sd-footnotes--inverted:is(.sd-footnotes--marker):target {
86
86
  background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
87
87
  }
88
+ .sd-footnotes--inverted:is(ol) li .sd-footnotes--marker::before, .sd-footnotes--inverted:is(ol) li::before {
89
+ color: rgba(var(--sd-color-text-white)) !important;
90
+ }
88
91
  .sd-footnotes--marker {
89
92
  position: relative;
90
93
  bottom: var(--sd-spacing-2);
@@ -129,9 +132,6 @@
129
132
  outline-offset: 2px;
130
133
  outline-color: var(--sd-color-border-primary, var(--sd-color-primary));
131
134
  }
132
- .sd-footnotes--marker :is(a):link {
133
- color: rgba(var(--sd-color-text-primary));
134
- }
135
135
  .sd-footnotes--marker:link, .sd-footnotes--marker:visited {
136
136
  color: rgba(var(--sd-color-text-primary));
137
137
  }
@@ -23,6 +23,7 @@
23
23
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
24
24
  --tw-leading: var(--leading-tight, 1.25);
25
25
  line-height: var(--leading-tight, 1.25);
26
+ color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
26
27
  }
27
28
  @media (width >= 40rem) {
28
29
  .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
@@ -44,6 +45,7 @@
44
45
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
45
46
  --tw-leading: var(--leading-tight, 1.25);
46
47
  line-height: var(--leading-tight, 1.25);
48
+ color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
47
49
  }
48
50
  @media (width >= 40rem) {
49
51
  .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
@@ -22,6 +22,9 @@
22
22
  position: absolute;
23
23
  top: var(--sd-spacing-6);
24
24
  left: var(--sd-spacing-6);
25
+ border-style: var(--tw-border-style);
26
+ border-width: 1px;
27
+ border-color: rgba(var(--sd-panel-color-border, rgba(255, 255, 255, 0)));
25
28
  }
26
29
  .sd-hidden-links--multiple {
27
30
  display: flex;
@@ -39,6 +42,11 @@
39
42
  font-weight: var(--sd-font-weight-bold);
40
43
  content: var(--sd-hidden-links-title);
41
44
  }
45
+ @property --tw-border-style {
46
+ syntax: "*";
47
+ inherits: false;
48
+ initial-value: solid;
49
+ }
42
50
  @property --tw-shadow {
43
51
  syntax: "*";
44
52
  inherits: false;
@@ -111,6 +119,7 @@
111
119
  @layer properties {
112
120
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
113
121
  *, ::before, ::after, ::backdrop {
122
+ --tw-border-style: solid;
114
123
  --tw-shadow: 0 0 #0000;
115
124
  --tw-shadow-color: initial;
116
125
  --tw-shadow-alpha: 100%;
@@ -95,7 +95,7 @@
95
95
  left: calc(var(--sd-spacing-1) * 0);
96
96
  font-size: var(--sd-text-3xl);
97
97
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
98
- color: rgba(var(--sd-color-text-primary));
98
+ color: rgb(var(--sd-color-icon-fill-primary));
99
99
  }
100
100
  .sd-list--icon.sd-list--horizontal {
101
101
  display: flex;
@@ -75,7 +75,7 @@
75
75
  border-bottom-color: transparent;
76
76
  }
77
77
  .sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
78
- border-bottom-color: rgba(var(--sd-color-border-accent));
78
+ border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
79
79
  }
80
80
  .sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
81
81
  color: rgba(var(--sd-color-text-black));
@@ -193,7 +193,7 @@
193
193
  width: var(--sd-spacing-8);
194
194
  border-bottom-style: var(--tw-border-style);
195
195
  border-bottom-width: var(--sd-border-width-2);
196
- border-bottom-color: rgba(var(--sd-color-border-accent));
196
+ border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
197
197
  }
198
198
  .sd-pagination--simple ul li:nth-child(2)::after {
199
199
  content: var(--tw-content);
@@ -242,6 +242,9 @@
242
242
  .sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible, .sd-pagination--inverted ul li button:focus-visible, .sd-pagination--inverted ul li button[aria-current]:focus-visible {
243
243
  outline-color: var(--color-white, #fff);
244
244
  }
245
+ .sd-pagination--inverted ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination--inverted ul li:not(:first-child):not(:last-child) button[aria-current] {
246
+ border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
247
+ }
245
248
  .sd-pagination--inverted.sd-pagination--simple ul li {
246
249
  color: rgba(var(--sd-color-text-white));
247
250
  }
@@ -249,6 +252,9 @@
249
252
  content: var(--tw-content);
250
253
  color: rgba(var(--sd-color-text-white));
251
254
  }
255
+ .sd-pagination--inverted.sd-pagination--simple ul li:nth-child(2) {
256
+ border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
257
+ }
252
258
  @property --tw-border-style {
253
259
  syntax: "*";
254
260
  inherits: false;
@@ -65,6 +65,7 @@
65
65
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
66
66
  --tw-leading: var(--leading-tight, 1.25);
67
67
  line-height: var(--leading-tight, 1.25);
68
+ color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
68
69
  }
69
70
  @media (width >= 40rem) {
70
71
  .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
@@ -86,6 +87,7 @@
86
87
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
87
88
  --tw-leading: var(--leading-tight, 1.25);
88
89
  line-height: var(--leading-tight, 1.25);
90
+ color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
89
91
  }
90
92
  @media (width >= 40rem) {
91
93
  .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
@@ -343,7 +345,7 @@
343
345
  left: calc(var(--sd-spacing-1) * 0);
344
346
  font-size: var(--sd-text-3xl);
345
347
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
346
- color: rgba(var(--sd-color-text-primary));
348
+ color: rgb(var(--sd-color-icon-fill-primary));
347
349
  }
348
350
  .sd-list--icon.sd-list--horizontal {
349
351
  display: flex;
@@ -431,7 +433,7 @@
431
433
  .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
432
434
  right: calc(var(--sd-spacing-1) * 0);
433
435
  left: calc(var(--sd-spacing-1) * 0);
434
- height: calc(var(--sd-spacing-1) * 2.5);
436
+ height: var(--sd-spacing-2\.5);
435
437
  }
436
438
  .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
437
439
  position: absolute;
@@ -448,7 +450,7 @@
448
450
  .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
449
451
  top: calc(var(--sd-spacing-1) * 0);
450
452
  bottom: calc(var(--sd-spacing-1) * 0);
451
- width: calc(var(--sd-spacing-1) * 2.5);
453
+ width: var(--sd-spacing-2\.5);
452
454
  }
453
455
  .sd-table-cell.sd-table-cell--shadow-active:after {
454
456
  opacity: 100%;
@@ -14,13 +14,13 @@
14
14
  color: rgba(var(--sd-color-text-white)) !important;
15
15
  }
16
16
  .sd-status-badge--success sd-icon {
17
- background-color: rgba(var(--sd-color-background-success));
17
+ background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-success))));
18
18
  }
19
19
  .sd-status-badge--warning sd-icon {
20
20
  background-color: rgba(var(--sd-color-background-warning));
21
21
  }
22
22
  .sd-status-badge--error sd-icon {
23
- background-color: rgba(var(--sd-color-background-error));
23
+ background-color: rgba(var(--sd-badge--red-color-background, rgba(var(--sd-color-error))));
24
24
  }
25
25
  .sd-status-badge--info sd-icon {
26
26
  background-color: rgba(var(--sd-color-background-info));
@@ -38,7 +38,7 @@
38
38
  .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
39
39
  right: calc(var(--sd-spacing-1) * 0);
40
40
  left: calc(var(--sd-spacing-1) * 0);
41
- height: calc(var(--sd-spacing-1) * 2.5);
41
+ height: var(--sd-spacing-2\.5);
42
42
  }
43
43
  .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
44
44
  position: absolute;
@@ -55,7 +55,7 @@
55
55
  .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
56
56
  top: calc(var(--sd-spacing-1) * 0);
57
57
  bottom: calc(var(--sd-spacing-1) * 0);
58
- width: calc(var(--sd-spacing-1) * 2.5);
58
+ width: var(--sd-spacing-2\.5);
59
59
  }
60
60
  .sd-table-cell.sd-table-cell--shadow-active:after {
61
61
  opacity: 100%;
@@ -9,12 +9,9 @@
9
9
  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
10
10
  border-style: var(--tw-border-style);
11
11
  border-width: 1px;
12
- border-width: var(--sd-chip-border-width, 0);
13
12
  border-color: rgba(var(--sd-chip--primary-200-color-border, rgba(255, 255, 255, 0)));
14
13
  background-color: rgba(var(--sd-chip--primary-200-color-background, rgba(var(--sd-color-primary-200))));
15
14
  padding-inline: var(--sd-spacing-2);
16
- font-size: var(--sd-chip-font-size, 0.875rem);
17
- font-weight: var(--sd-chip-font-weight, var(--sd-font-weight-normal));
18
15
  white-space: nowrap;
19
16
  color: rgba(var(--sd-color-text-black));
20
17
  }
@@ -31,8 +28,10 @@
31
28
  border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
32
29
  background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
33
30
  }
34
- .sd-theme-kid .sd-chip {
35
- box-shadow: var(--sd-shadow-sm);
31
+ .sd-chip{
32
+ font-size: var(--sd-chip-font-size);
33
+ border-width: var(--sd-chip-border-width);
34
+ font-weight: var(--sd-chip-font-weight);
36
35
  }
37
36
  .sd-container {
38
37
  position: relative;
@@ -61,7 +60,7 @@
61
60
  padding-block: var(--sd-spacing-4);
62
61
  }
63
62
  .sd-container{
64
- --triangle-background: rgba(var(--sd-color-white));
63
+ --triangle-background: rgba(var(--sd-color-background-white));
65
64
  }
66
65
  .sd-container--triangle-top::before, .sd-container--triangle-right::before, .sd-container--triangle-bottom::before, .sd-container--triangle-left::before {
67
66
  position: absolute;
@@ -172,8 +171,8 @@
172
171
  font-size: var(--sd-text-sm);
173
172
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
174
173
  color: rgba(var(--sd-color-text-white));
175
- --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-sm));
176
- --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-sm));
174
+ --tw-drop-shadow-size: drop-shadow(var(--sd-drop-shadow-xs));
175
+ --tw-drop-shadow: drop-shadow(var(--sd-drop-shadow-xs));
177
176
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
178
177
  content: var(--copyright);
179
178
  }
@@ -213,12 +212,11 @@
213
212
  border-radius: var(--sd-flag-border-radius, 0);
214
213
  border-style: var(--tw-border-style);
215
214
  border-width: 1px;
216
- border-width: var(--sd-flag-border-width, 0);
217
215
  border-color: rgba(var(--sd-flag--neutral-200-color-border, rgba(255, 255, 255, 0)));
218
216
  background-color: rgba(var(--sd-flag--neutral-200-color-background, rgba(var(--sd-color-neutral-200))));
219
217
  padding-inline: var(--sd-spacing-3);
220
- font-size: var(--sd-text-sm);
221
- line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
218
+ font-size: var(--sd-marker-font-size, 0.875rem);
219
+ font-weight: var(--sd-marker-font-weight, var(--sd-font-weight-normal));
222
220
  white-space: nowrap;
223
221
  color: rgba(var(--sd-color-text-black));
224
222
  }
@@ -235,6 +233,9 @@
235
233
  border-color: rgba(var(--sd-flag--white-color-border, rgba(255, 255, 255, 0)));
236
234
  background-color: rgba(var(--sd-flag--white-color-background, rgba(var(--sd-color-white))));
237
235
  }
236
+ .sd-flag{
237
+ border-width: var(--sd-flag-border-width);
238
+ }
238
239
  .sd-footnotes {
239
240
  margin-block: calc(var(--sd-spacing-1) * 0);
240
241
  padding: calc(var(--sd-spacing-1) * 0);
@@ -319,6 +320,9 @@
319
320
  .sd-footnotes--inverted:is(.sd-footnotes--marker):target {
320
321
  background-color: rgba(var(--sd-footnotes--target--inverted-color-background, rgba(var(--sd-color-primary-800))));
321
322
  }
323
+ .sd-footnotes--inverted:is(ol) li .sd-footnotes--marker::before, .sd-footnotes--inverted:is(ol) li::before {
324
+ color: rgba(var(--sd-color-text-white)) !important;
325
+ }
322
326
  .sd-footnotes--marker {
323
327
  position: relative;
324
328
  bottom: var(--sd-spacing-2);
@@ -363,9 +367,6 @@
363
367
  outline-offset: 2px;
364
368
  outline-color: var(--sd-color-border-primary, var(--sd-color-primary));
365
369
  }
366
- .sd-footnotes--marker :is(a):link {
367
- color: rgba(var(--sd-color-text-primary));
368
- }
369
370
  .sd-footnotes--marker:link, .sd-footnotes--marker:visited {
370
371
  color: rgba(var(--sd-color-text-primary));
371
372
  }
@@ -398,6 +399,9 @@
398
399
  position: absolute;
399
400
  top: var(--sd-spacing-6);
400
401
  left: var(--sd-spacing-6);
402
+ border-style: var(--tw-border-style);
403
+ border-width: 1px;
404
+ border-color: rgba(var(--sd-panel-color-border, rgba(255, 255, 255, 0)));
401
405
  }
402
406
  .sd-hidden-links--multiple {
403
407
  display: flex;
@@ -522,7 +526,7 @@ mark.sd-mark {
522
526
  border-bottom-color: transparent;
523
527
  }
524
528
  .sd-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
525
- border-bottom-color: rgba(var(--sd-color-border-accent));
529
+ border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
526
530
  }
527
531
  .sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
528
532
  color: rgba(var(--sd-color-text-black));
@@ -640,7 +644,7 @@ mark.sd-mark {
640
644
  width: var(--sd-spacing-8);
641
645
  border-bottom-style: var(--tw-border-style);
642
646
  border-bottom-width: var(--sd-border-width-2);
643
- border-bottom-color: rgba(var(--sd-color-border-accent));
647
+ border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
644
648
  }
645
649
  .sd-pagination--simple ul li:nth-child(2)::after {
646
650
  content: var(--tw-content);
@@ -689,6 +693,9 @@ mark.sd-mark {
689
693
  .sd-pagination--inverted ul li a:focus-visible, .sd-pagination--inverted ul li a[aria-current]:focus-visible, .sd-pagination--inverted ul li button:focus-visible, .sd-pagination--inverted ul li button[aria-current]:focus-visible {
690
694
  outline-color: var(--color-white, #fff);
691
695
  }
696
+ .sd-pagination--inverted ul li:not(:first-child):not(:last-child) a[aria-current], .sd-pagination--inverted ul li:not(:first-child):not(:last-child) button[aria-current] {
697
+ border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
698
+ }
692
699
  .sd-pagination--inverted.sd-pagination--simple ul li {
693
700
  color: rgba(var(--sd-color-text-white));
694
701
  }
@@ -696,6 +703,9 @@ mark.sd-mark {
696
703
  content: var(--tw-content);
697
704
  color: rgba(var(--sd-color-text-white));
698
705
  }
706
+ .sd-pagination--inverted.sd-pagination--simple ul li:nth-child(2) {
707
+ border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
708
+ }
699
709
  .sd-status-badge {
700
710
  display: inline-flex;
701
711
  align-items: center;
@@ -710,13 +720,13 @@ mark.sd-mark {
710
720
  color: rgba(var(--sd-color-text-white)) !important;
711
721
  }
712
722
  .sd-status-badge--success sd-icon {
713
- background-color: rgba(var(--sd-color-background-success));
723
+ background-color: rgba(var(--sd-badge--green-color-background, rgba(var(--sd-color-success))));
714
724
  }
715
725
  .sd-status-badge--warning sd-icon {
716
726
  background-color: rgba(var(--sd-color-background-warning));
717
727
  }
718
728
  .sd-status-badge--error sd-icon {
719
- background-color: rgba(var(--sd-color-background-error));
729
+ background-color: rgba(var(--sd-badge--red-color-background, rgba(var(--sd-color-error))));
720
730
  }
721
731
  .sd-status-badge--info sd-icon {
722
732
  background-color: rgba(var(--sd-color-background-info));
@@ -785,6 +795,7 @@ mark.sd-mark {
785
795
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
786
796
  --tw-leading: var(--leading-tight, 1.25);
787
797
  line-height: var(--leading-tight, 1.25);
798
+ color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
788
799
  }
789
800
  @media (width >= 40rem) {
790
801
  .sd-headline.sd-headline, .sd-headline:is(h1):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline, .sd-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-headline) {
@@ -806,6 +817,7 @@ mark.sd-mark {
806
817
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
807
818
  --tw-leading: var(--leading-tight, 1.25);
808
819
  line-height: var(--leading-tight, 1.25);
820
+ color: rgba(var(--sd-headline--3xl-onwards-color-text, rgba(var(--sd-color-primary))));
809
821
  }
810
822
  @media (width >= 40rem) {
811
823
  .sd-headline.sd-headline--size-3xl, .sd-headline:is(h2):not(.sd-headline), .sd-prose :is(h1, h2, h3, h4, h5).sd-headline--size-3xl, .sd-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-headline) {
@@ -1063,7 +1075,7 @@ mark.sd-mark {
1063
1075
  left: calc(var(--sd-spacing-1) * 0);
1064
1076
  font-size: var(--sd-text-3xl);
1065
1077
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
1066
- color: rgba(var(--sd-color-text-primary));
1078
+ color: rgb(var(--sd-color-icon-fill-primary));
1067
1079
  }
1068
1080
  .sd-list--icon.sd-list--horizontal {
1069
1081
  display: flex;
@@ -1151,7 +1163,7 @@ mark.sd-mark {
1151
1163
  .sd-table-cell--shadow-top:after, .sd-table-cell--shadow-bottom:after {
1152
1164
  right: calc(var(--sd-spacing-1) * 0);
1153
1165
  left: calc(var(--sd-spacing-1) * 0);
1154
- height: calc(var(--sd-spacing-1) * 2.5);
1166
+ height: var(--sd-spacing-2\.5);
1155
1167
  }
1156
1168
  .sd-table-cell--shadow-top:before, .sd-table-cell--shadow-bottom:before {
1157
1169
  position: absolute;
@@ -1168,7 +1180,7 @@ mark.sd-mark {
1168
1180
  .sd-table-cell--shadow-left:after, .sd-table-cell--shadow-right:after {
1169
1181
  top: calc(var(--sd-spacing-1) * 0);
1170
1182
  bottom: calc(var(--sd-spacing-1) * 0);
1171
- width: calc(var(--sd-spacing-1) * 2.5);
1183
+ width: var(--sd-spacing-2\.5);
1172
1184
  }
1173
1185
  .sd-table-cell.sd-table-cell--shadow-active:after {
1174
1186
  opacity: 100%;
@@ -1,7 +1,7 @@
1
1
  /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
- .sd-6-13-1-chip {
4
+ .sd-6-14-1-chip {
5
5
  display: inline-flex;
6
6
  height: var(--sd-spacing-6);
7
7
  align-items: center;
@@ -9,30 +9,29 @@
9
9
  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
10
10
  border-style: var(--tw-border-style);
11
11
  border-width: 1px;
12
- border-width: var(--sd-chip-border-width, 0);
13
12
  border-color: rgba(var(--sd-chip--primary-200-color-border, rgba(255, 255, 255, 0)));
14
13
  background-color: rgba(var(--sd-chip--primary-200-color-background, rgba(var(--sd-color-primary-200))));
15
14
  padding-inline: var(--sd-spacing-2);
16
- font-size: var(--sd-chip-font-size, 0.875rem);
17
- font-weight: var(--sd-chip-font-weight, var(--sd-font-weight-normal));
18
15
  white-space: nowrap;
19
16
  color: rgba(var(--sd-color-text-black));
20
17
  }
21
- .sd-6-13-1-chip--primary-500 {
18
+ .sd-6-14-1-chip--primary-500 {
22
19
  border-color: rgba(var(--sd-chip--primary-500-color-border, rgba(255, 255, 255, 0)));
23
20
  background-color: rgba(var(--sd-chip--primary-500-color-background, rgba(var(--sd-color-primary-500))));
24
21
  color: rgba(var(--sd-chip--primary-500-color-text, rgba(var(--sd-color-white))));
25
22
  }
26
- .sd-6-13-1-chip--primary-300 {
23
+ .sd-6-14-1-chip--primary-300 {
27
24
  border-color: rgba(var(--sd-chip--primary-300-color-border, rgba(255, 255, 255, 0)));
28
25
  background-color: rgba(var(--sd-chip--primary-300-color-background, rgba(var(--sd-color-primary-300))));
29
26
  }
30
- .sd-6-13-1-chip--white {
27
+ .sd-6-14-1-chip--white {
31
28
  border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
32
29
  background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
33
30
  }
34
- .sd-theme-kid .sd-6-13-1-chip {
35
- box-shadow: var(--sd-shadow-sm);
31
+ .sd-6-14-1-chip{
32
+ font-size: var(--sd-chip-font-size);
33
+ border-width: var(--sd-chip-border-width);
34
+ font-weight: var(--sd-chip-font-weight);
36
35
  }
37
36
  @property --tw-border-style {
38
37
  syntax: "*";
@@ -1,35 +1,35 @@
1
1
  /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
2
2
  @layer theme, base, components, utilities;
3
- .sd-6-13-1-container {
3
+ .sd-6-14-1-container {
4
4
  position: relative;
5
5
  background-color: rgba(var(--sd-color-background-neutral-100));
6
6
  padding-inline: var(--sd-spacing-10);
7
7
  padding-block: var(--sd-spacing-8);
8
8
  }
9
- .sd-6-13-1-container--variant-primary-100 {
9
+ .sd-6-14-1-container--variant-primary-100 {
10
10
  background-color: rgba(var(--sd-color-background-primary-100));
11
11
  }
12
- .sd-6-13-1-container--variant-primary {
12
+ .sd-6-14-1-container--variant-primary {
13
13
  background-color: rgba(var(--sd-color-background-primary));
14
14
  }
15
- .sd-6-13-1-container--variant-border-neutral-400 {
15
+ .sd-6-14-1-container--variant-border-neutral-400 {
16
16
  --tw-border-style: solid;
17
17
  border-style: solid;
18
18
  border-color: rgba(var(--sd-color-border-neutral-400));
19
19
  background-color: rgba(var(--sd-color-background-white));
20
20
  border-width: 1px;
21
21
  }
22
- .sd-6-13-1-container--variant-white {
22
+ .sd-6-14-1-container--variant-white {
23
23
  background-color: rgba(var(--sd-color-background-white));
24
24
  }
25
- .sd-6-13-1-container--padding-sm {
25
+ .sd-6-14-1-container--padding-sm {
26
26
  padding-inline: var(--sd-spacing-6);
27
27
  padding-block: var(--sd-spacing-4);
28
28
  }
29
- .sd-6-13-1-container{
30
- --triangle-background: rgba(var(--sd-color-white));
29
+ .sd-6-14-1-container{
30
+ --triangle-background: rgba(var(--sd-color-background-white));
31
31
  }
32
- .sd-6-13-1-container--triangle-top::before, .sd-6-13-1-container--triangle-right::before, .sd-6-13-1-container--triangle-bottom::before, .sd-6-13-1-container--triangle-left::before {
32
+ .sd-6-14-1-container--triangle-top::before, .sd-6-14-1-container--triangle-right::before, .sd-6-14-1-container--triangle-bottom::before, .sd-6-14-1-container--triangle-left::before {
33
33
  position: absolute;
34
34
  display: block;
35
35
  --tw-border-style: solid;
@@ -38,27 +38,27 @@
38
38
  border-width: 14px;
39
39
  content: '';
40
40
  }
41
- .sd-6-13-1-container--triangle-top::before {
41
+ .sd-6-14-1-container--triangle-top::before {
42
42
  top: calc(var(--sd-spacing-1) * 0);
43
43
  left: calc(50% - 14px);
44
44
  border-top-color: var(--triangle-background);
45
45
  }
46
- .sd-6-13-1-container--triangle-right::before {
46
+ .sd-6-14-1-container--triangle-right::before {
47
47
  right: calc(var(--sd-spacing-1) * 0);
48
48
  top: calc(50% - 14px);
49
49
  border-right-color: var(--triangle-background);
50
50
  }
51
- .sd-6-13-1-container--triangle-bottom::before {
51
+ .sd-6-14-1-container--triangle-bottom::before {
52
52
  bottom: calc(var(--sd-spacing-1) * 0);
53
53
  left: calc(50% - 14px);
54
54
  border-bottom-color: var(--triangle-background);
55
55
  }
56
- .sd-6-13-1-container--triangle-left::before {
56
+ .sd-6-14-1-container--triangle-left::before {
57
57
  left: calc(var(--sd-spacing-1) * 0);
58
58
  top: calc(50% - 14px);
59
59
  border-left-color: var(--triangle-background);
60
60
  }
61
- .sd-6-13-1-container--triangle-top-border::after, .sd-6-13-1-container--triangle-top-border::before, .sd-6-13-1-container--triangle-right-border::after, .sd-6-13-1-container--triangle-right-border::before, .sd-6-13-1-container--triangle-bottom-border::after, .sd-6-13-1-container--triangle-bottom-border::before, .sd-6-13-1-container--triangle-left-border::after, .sd-6-13-1-container--triangle-left-border::before {
61
+ .sd-6-14-1-container--triangle-top-border::after, .sd-6-14-1-container--triangle-top-border::before, .sd-6-14-1-container--triangle-right-border::after, .sd-6-14-1-container--triangle-right-border::before, .sd-6-14-1-container--triangle-bottom-border::after, .sd-6-14-1-container--triangle-bottom-border::before, .sd-6-14-1-container--triangle-left-border::after, .sd-6-14-1-container--triangle-left-border::before {
62
62
  position: absolute;
63
63
  display: block;
64
64
  --tw-border-style: solid;
@@ -66,53 +66,53 @@
66
66
  border-color: transparent;
67
67
  content: '';
68
68
  }
69
- .sd-6-13-1-container--triangle-top-border::after, .sd-6-13-1-container--triangle-right-border::after, .sd-6-13-1-container--triangle-bottom-border::after, .sd-6-13-1-container--triangle-left-border::after {
69
+ .sd-6-14-1-container--triangle-top-border::after, .sd-6-14-1-container--triangle-right-border::after, .sd-6-14-1-container--triangle-bottom-border::after, .sd-6-14-1-container--triangle-left-border::after {
70
70
  border-width: 14px;
71
71
  }
72
- .sd-6-13-1-container--triangle-top-border::before, .sd-6-13-1-container--triangle-right-border::before, .sd-6-13-1-container--triangle-bottom-border::before, .sd-6-13-1-container--triangle-left-border::before {
72
+ .sd-6-14-1-container--triangle-top-border::before, .sd-6-14-1-container--triangle-right-border::before, .sd-6-14-1-container--triangle-bottom-border::before, .sd-6-14-1-container--triangle-left-border::before {
73
73
  border-width: 15px;
74
74
  }
75
- .sd-6-13-1-container--triangle-top-border::after, .sd-6-13-1-container--triangle-top-border::before {
75
+ .sd-6-14-1-container--triangle-top-border::after, .sd-6-14-1-container--triangle-top-border::before {
76
76
  top: -1px;
77
77
  }
78
- .sd-6-13-1-container--triangle-top-border::before {
78
+ .sd-6-14-1-container--triangle-top-border::before {
79
79
  border-top-color: rgba(var(--sd-color-border-neutral-400));
80
80
  left: calc(50% - 15px);
81
81
  }
82
- .sd-6-13-1-container--triangle-top-border::after {
82
+ .sd-6-14-1-container--triangle-top-border::after {
83
83
  left: calc(50% - 14px);
84
84
  border-top-color: var(--triangle-background);
85
85
  }
86
- .sd-6-13-1-container--triangle-right-border::after, .sd-6-13-1-container--triangle-right-border::before {
86
+ .sd-6-14-1-container--triangle-right-border::after, .sd-6-14-1-container--triangle-right-border::before {
87
87
  right: -1px;
88
88
  }
89
- .sd-6-13-1-container--triangle-right-border::before {
89
+ .sd-6-14-1-container--triangle-right-border::before {
90
90
  border-right-color: rgba(var(--sd-color-border-neutral-400));
91
91
  top: calc(50% - 15px);
92
92
  }
93
- .sd-6-13-1-container--triangle-right-border::after {
93
+ .sd-6-14-1-container--triangle-right-border::after {
94
94
  top: calc(50% - 14px);
95
95
  border-right-color: var(--triangle-background);
96
96
  }
97
- .sd-6-13-1-container--triangle-bottom-border::after, .sd-6-13-1-container--triangle-bottom-border::before {
97
+ .sd-6-14-1-container--triangle-bottom-border::after, .sd-6-14-1-container--triangle-bottom-border::before {
98
98
  bottom: -1px;
99
99
  }
100
- .sd-6-13-1-container--triangle-bottom-border::before {
100
+ .sd-6-14-1-container--triangle-bottom-border::before {
101
101
  border-bottom-color: rgba(var(--sd-color-border-neutral-400));
102
102
  left: calc(50% - 15px);
103
103
  }
104
- .sd-6-13-1-container--triangle-bottom-border::after {
104
+ .sd-6-14-1-container--triangle-bottom-border::after {
105
105
  left: calc(50% - 14px);
106
106
  border-bottom-color: var(--triangle-background);
107
107
  }
108
- .sd-6-13-1-container--triangle-left-border::after, .sd-6-13-1-container--triangle-left-border::before {
108
+ .sd-6-14-1-container--triangle-left-border::after, .sd-6-14-1-container--triangle-left-border::before {
109
109
  left: -1px;
110
110
  }
111
- .sd-6-13-1-container--triangle-left-border::before {
111
+ .sd-6-14-1-container--triangle-left-border::before {
112
112
  border-left-color: rgba(var(--sd-color-border-neutral-400));
113
113
  top: calc(50% - 15px);
114
114
  }
115
- .sd-6-13-1-container--triangle-left-border::after {
115
+ .sd-6-14-1-container--triangle-left-border::after {
116
116
  top: calc(50% - 14px);
117
117
  border-left-color: var(--triangle-background);
118
118
  }