@solid-design-system/styles 7.0.0-next.9 → 7.0.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 (80) hide show
  1. package/CHANGELOG.md +25 -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/display.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/interactive.css +1 -1
  10. package/cdn/modules/leadtext.css +1 -1
  11. package/cdn/modules/list.css +1 -1
  12. package/cdn/modules/mark.css +1 -1
  13. package/cdn/modules/media.css +1 -1
  14. package/cdn/modules/meta.css +1 -1
  15. package/cdn/modules/pagination.css +1 -1
  16. package/cdn/modules/paragraph.css +1 -1
  17. package/cdn/modules/prose.css +1 -1
  18. package/cdn/modules/status-badge.css +1 -1
  19. package/cdn/modules/table-cell.css +1 -1
  20. package/cdn/solid-styles.css +1 -1
  21. package/cdn-versioned/modules/chip.css +1 -1
  22. package/cdn-versioned/modules/container.css +1 -1
  23. package/cdn-versioned/modules/copyright.css +1 -1
  24. package/cdn-versioned/modules/display.css +1 -1
  25. package/cdn-versioned/modules/footnotes.css +1 -1
  26. package/cdn-versioned/modules/headline.css +1 -1
  27. package/cdn-versioned/modules/hidden-links.css +1 -1
  28. package/cdn-versioned/modules/interactive.css +1 -1
  29. package/cdn-versioned/modules/leadtext.css +1 -1
  30. package/cdn-versioned/modules/list.css +1 -1
  31. package/cdn-versioned/modules/mark.css +1 -1
  32. package/cdn-versioned/modules/media.css +1 -1
  33. package/cdn-versioned/modules/meta.css +1 -1
  34. package/cdn-versioned/modules/pagination.css +1 -1
  35. package/cdn-versioned/modules/paragraph.css +1 -1
  36. package/cdn-versioned/modules/prose.css +1 -1
  37. package/cdn-versioned/modules/status-badge.css +1 -1
  38. package/cdn-versioned/modules/table-cell.css +1 -1
  39. package/cdn-versioned/modules/table.css +1 -1
  40. package/cdn-versioned/solid-styles.css +1 -1
  41. package/dist/modules/chip.css +42 -42
  42. package/dist/modules/container.css +16 -16
  43. package/dist/modules/copyright.css +11 -11
  44. package/dist/modules/display.css +15 -15
  45. package/dist/modules/footnotes.css +30 -30
  46. package/dist/modules/headline.css +33 -33
  47. package/dist/modules/hidden-links.css +12 -12
  48. package/dist/modules/interactive.css +12 -12
  49. package/dist/modules/leadtext.css +9 -9
  50. package/dist/modules/list.css +12 -12
  51. package/dist/modules/mark.css +1 -1
  52. package/dist/modules/media.css +3 -3
  53. package/dist/modules/meta.css +10 -10
  54. package/dist/modules/pagination.css +33 -33
  55. package/dist/modules/paragraph.css +9 -9
  56. package/dist/modules/prose.css +113 -113
  57. package/dist/modules/status-badge.css +10 -10
  58. package/dist/modules/table-cell.css +12 -12
  59. package/dist/solid-styles.css +278 -278
  60. package/dist-versioned/modules/chip.css +63 -63
  61. package/dist-versioned/modules/container.css +44 -44
  62. package/dist-versioned/modules/copyright.css +17 -17
  63. package/dist-versioned/modules/display.css +21 -21
  64. package/dist-versioned/modules/footnotes.css +58 -58
  65. package/dist-versioned/modules/headline.css +63 -63
  66. package/dist-versioned/modules/hidden-links.css +16 -16
  67. package/dist-versioned/modules/interactive.css +28 -28
  68. package/dist-versioned/modules/leadtext.css +12 -12
  69. package/dist-versioned/modules/list.css +42 -42
  70. package/dist-versioned/modules/mark.css +2 -2
  71. package/dist-versioned/modules/media.css +7 -7
  72. package/dist-versioned/modules/meta.css +17 -17
  73. package/dist-versioned/modules/pagination.css +94 -94
  74. package/dist-versioned/modules/paragraph.css +12 -12
  75. package/dist-versioned/modules/prose.css +238 -238
  76. package/dist-versioned/modules/status-badge.css +16 -16
  77. package/dist-versioned/modules/table-cell.css +28 -28
  78. package/dist-versioned/modules/table.css +2 -2
  79. package/dist-versioned/solid-styles.css +565 -565
  80. package/package.json +1 -1
package/dist/modules/meta.css CHANGED
@@ -2,33 +2,33 @@
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  .sd-meta {
5
- font-size: var(--sd-text-base);
5
+ font-size: var(--sd-text-base, 1rem);
6
6
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
7
7
  --tw-leading: 1;
8
8
  line-height: 1;
9
- --tw-font-weight: var(--sd-font-weight-normal);
10
- font-weight: var(--sd-font-weight-normal);
11
- color: rgba(var(--sd-color-text-black));
9
+ --tw-font-weight: var(--sd-font-weight-normal, 400);
10
+ font-weight: var(--sd-font-weight-normal, 400);
11
+ color: rgba(var(--sd-color-text-black, 24 24 24));
12
12
  }
13
13
  .sd-meta--size-sm {
14
- font-size: var(--sd-text-sm);
14
+ font-size: var(--sd-text-sm, 0.875rem);
15
15
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
16
16
  }
17
17
  .sd-meta--light {
18
- color: rgba(var(--sd-color-text-neutral-700));
18
+ color: rgba(var(--sd-color-text-neutral-700, 104 104 104));
19
19
  }
20
20
  .sd-meta--inverted {
21
- color: rgba(var(--sd-color-text-white));
21
+ color: rgba(var(--sd-color-text-white, 255 255 255));
22
22
  }
23
23
  .sd-meta--inverted.sd-meta--light {
24
- color: rgba(var(--sd-color-text-primary-400));
24
+ color: rgba(var(--sd-color-text-primary-400, 153 171 208));
25
25
  }
26
26
  .sd-meta--pipe::after {
27
27
  content: '|';
28
- margin-inline: var(--sd-spacing-1);
28
+ margin-inline: var(--sd-spacing-1, 0.25rem);
29
29
  }
30
30
  .sd-meta--pipe.sd-meta--size-sm::after {
31
- margin-inline: var(--sd-spacing-0\.5);
31
+ margin-inline: var(--sd-spacing-0\.5, 0.125rem);
32
32
  }
33
33
  @property --tw-leading {
34
34
  syntax: "*";
package/dist/modules/pagination.css CHANGED
@@ -3,14 +3,14 @@
3
3
  @layer theme, base, components, utilities;
4
4
  .sd-pagination > :not(ul) {
5
5
  position: absolute;
6
- height: var(--sd-spacing-0\.25);
7
- width: var(--sd-spacing-0\.25);
6
+ height: var(--sd-spacing-0\.25, 0.0625rem);
7
+ width: var(--sd-spacing-0\.25, 0.0625rem);
8
8
  overflow: hidden;
9
9
  }
10
10
  .sd-pagination ul {
11
11
  display: flex;
12
12
  align-items: center;
13
- gap: var(--sd-spacing-2);
13
+ gap: var(--sd-spacing-2, 0.5rem);
14
14
  }
15
15
  .sd-pagination ul li button {
16
16
  all: unset;
@@ -30,29 +30,29 @@
30
30
  display: flex;
31
31
  align-items: center;
32
32
  justify-content: center;
33
- color: rgba(var(--sd-color-text-primary));
33
+ color: rgba(var(--sd-color-text-primary, 0 53 142));
34
34
  text-decoration-line: none;
35
35
  transition-property: color;
36
36
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
37
37
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
38
38
  }
39
39
  .sd-pagination ul li a:hover:not([disabled]), .sd-pagination ul li button:hover:not([disabled]) {
40
- color: rgba(var(--sd-color-text-primary-500));
40
+ color: rgba(var(--sd-color-text-primary-500, 70 109 175));
41
41
  }
42
42
  .sd-pagination ul li a:active:not([disabled]), .sd-pagination ul li button:active:not([disabled]) {
43
- color: rgba(var(--sd-color-text-primary-800));
43
+ color: rgba(var(--sd-color-text-primary-800, 5 21 48));
44
44
  }
45
45
  .sd-pagination ul li a:focus-visible, .sd-pagination ul li button:focus-visible {
46
46
  outline-width: 1px;
47
47
  outline-style: var(--tw-outline-style);
48
48
  outline-width: 2px;
49
49
  outline-offset: 2px;
50
- outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary)));
50
+ outline-color: rgba(var(--sd-color-border-primary, var(--sd-color-primary, 0 53 142)));
51
51
  }
52
52
  .sd-pagination ul li:first-child, .sd-pagination ul li:last-child {
53
- height: var(--sd-spacing-12);
54
- width: var(--sd-spacing-12);
55
- font-size: var(--sd-text-xl);
53
+ height: var(--sd-spacing-12, 3rem);
54
+ width: var(--sd-spacing-12, 3rem);
55
+ font-size: var(--sd-text-xl, 1.5rem);
56
56
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
57
57
  }
58
58
  .sd-pagination ul li:first-child a, .sd-pagination ul li:first-child button, .sd-pagination ul li:last-child a, .sd-pagination ul li:last-child button {
@@ -61,8 +61,8 @@
61
61
  }
62
62
  .sd-pagination ul li {
63
63
  display: flex;
64
- height: var(--sd-spacing-8);
65
- width: var(--sd-spacing-8);
64
+ height: var(--sd-spacing-8, 2rem);
65
+ width: var(--sd-spacing-8, 2rem);
66
66
  align-items: center;
67
67
  justify-content: center;
68
68
  text-align: center;
@@ -71,21 +71,21 @@
71
71
  height: 100%;
72
72
  width: 100%;
73
73
  border-bottom-style: var(--tw-border-style);
74
- border-bottom-width: var(--sd-border-width-2);
74
+ border-bottom-width: var(--sd-border-width-2, 0.125rem);
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-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
78
+ border-color: rgba(var(--sd-pagination--default-border, 45 157 0));
79
79
  }
80
80
  .sd-pagination ul li a[aria-current], .sd-pagination ul li button[aria-current] {
81
- color: rgba(var(--sd-color-text-black));
81
+ color: rgba(var(--sd-color-text-black, 24 24 24));
82
82
  }
83
83
  .sd-pagination ul li a[aria-current]:hover:not([disabled]), .sd-pagination ul li button[aria-current]:hover:not([disabled]) {
84
- color: rgba(var(--sd-color-text-black));
84
+ color: rgba(var(--sd-color-text-black, 24 24 24));
85
85
  }
86
86
  .sd-pagination ul li:first-child:has(a:not([href])) a, .sd-pagination ul li:last-child:has(a:not([href])) a, .sd-pagination ul li:first-child:has(button[disabled]) button, .sd-pagination ul li:last-child:has(button[disabled]) button {
87
87
  cursor: not-allowed;
88
- color: rgba(var(--sd-form-control--disabled-color-text, rgba(var(--sd-color-neutral-500))));
88
+ color: rgba(var(--sd-form-control--disabled-color-text, 174 174 174));
89
89
  }
90
90
  .sd-pagination:not(.sd-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
91
91
  pointer-events: none;
@@ -186,11 +186,11 @@
186
186
  }
187
187
  .sd-pagination--simple ul li:nth-child(2) {
188
188
  position: relative;
189
- margin-inline-end: calc(var(--sd-spacing-1) * 5);
190
- width: var(--sd-spacing-8);
189
+ margin-inline-end: calc(var(--sd-spacing-1, 0.25rem) * 5);
190
+ width: var(--sd-spacing-8, 2rem);
191
191
  border-bottom-style: var(--tw-border-style);
192
- border-bottom-width: var(--sd-border-width-2);
193
- border-color: rgba(var(--sd-pagination--default-border, rgba(var(--sd-color-accent))));
192
+ border-bottom-width: var(--sd-border-width-2, 0.125rem);
193
+ border-color: rgba(var(--sd-pagination--default-border, 45 157 0));
194
194
  }
195
195
  .sd-pagination--simple ul li:nth-child(2)::after {
196
196
  content: var(--tw-content);
@@ -214,43 +214,43 @@
214
214
  }
215
215
  .sd-pagination--simple ul li:nth-last-child(2) {
216
216
  border-bottom-style: var(--tw-border-style);
217
- border-bottom-width: var(--sd-border-width-2);
217
+ border-bottom-width: var(--sd-border-width-2, 0.125rem);
218
218
  border-bottom-color: transparent;
219
219
  }
220
220
  .sd-pagination--inverted ul li::after {
221
221
  content: var(--tw-content);
222
- color: rgba(var(--sd-color-text-white));
222
+ color: rgba(var(--sd-color-text-white, 255 255 255));
223
223
  }
224
224
  .sd-pagination--inverted ul li:first-child:has(a:not([href])) a, .sd-pagination--inverted ul li:last-child:has(a:not([href])) a, .sd-pagination--inverted ul li:first-child:has(button[disabled]) button, .sd-pagination--inverted ul li:last-child:has(button[disabled]) button {
225
- color: rgba(var(--sd-color-text-neutral-600));
225
+ color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
226
226
  }
227
227
  .sd-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]), .sd-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]), .sd-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
228
- color: rgba(var(--sd-color-text-neutral-600));
228
+ color: rgba(var(--sd-color-text-neutral-600, 136 136 136));
229
229
  }
230
230
  .sd-pagination--inverted ul li a, .sd-pagination--inverted ul li a[aria-current], .sd-pagination--inverted ul li button, .sd-pagination--inverted ul li button[aria-current] {
231
- color: rgba(var(--sd-color-text-white));
231
+ color: rgba(var(--sd-color-text-white, 255 255 255));
232
232
  }
233
233
  .sd-pagination--inverted ul li a:hover:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:hover:not([disabled]), .sd-pagination--inverted ul li button:hover:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
234
- color: rgba(var(--sd-color-text-primary-200));
234
+ color: rgba(var(--sd-color-text-primary-200, 224 233 243));
235
235
  }
236
236
  .sd-pagination--inverted ul li a:active:not([disabled]), .sd-pagination--inverted ul li a[aria-current]:active:not([disabled]), .sd-pagination--inverted ul li button:active:not([disabled]), .sd-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
237
- color: rgba(var(--sd-color-text-primary-400));
237
+ color: rgba(var(--sd-color-text-primary-400, 153 171 208));
238
238
  }
239
239
  .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 {
240
- outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white)));
240
+ outline-color: rgba(var(--sd-color-border-white, var(--sd-color-white, 255 255 255)));
241
241
  }
242
242
  .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] {
243
- border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
243
+ border-color: rgba(var(--sd-pagination--inverted-border, 45 157 0));
244
244
  }
245
245
  .sd-pagination--inverted.sd-pagination--simple ul li {
246
- color: rgba(var(--sd-color-text-white));
246
+ color: rgba(var(--sd-color-text-white, 255 255 255));
247
247
  }
248
248
  .sd-pagination--inverted.sd-pagination--simple ul li::after {
249
249
  content: var(--tw-content);
250
- color: rgba(var(--sd-color-text-white));
250
+ color: rgba(var(--sd-color-text-white, 255 255 255));
251
251
  }
252
252
  .sd-pagination--inverted.sd-pagination--simple ul li:nth-child(2) {
253
- border-color: rgba(var(--sd-pagination--inverted-border, rgba(var(--sd-color-accent))));
253
+ border-color: rgba(var(--sd-pagination--inverted-border, 45 157 0));
254
254
  }
255
255
  @property --tw-border-style {
256
256
  syntax: "*";
package/dist/modules/paragraph.css CHANGED
@@ -2,25 +2,25 @@
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  .sd-paragraph, .sd-prose p {
5
- font-size: var(--sd-text-base);
5
+ font-size: var(--sd-text-base, 1rem);
6
6
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
7
7
  --tw-leading: var(--leading-normal, 1.5);
8
8
  line-height: var(--leading-normal, 1.5);
9
- --tw-font-weight: var(--sd-font-weight-normal);
10
- font-weight: var(--sd-font-weight-normal);
11
- color: rgba(var(--sd-color-text-black));
9
+ --tw-font-weight: var(--sd-font-weight-normal, 400);
10
+ font-weight: var(--sd-font-weight-normal, 400);
11
+ color: rgba(var(--sd-color-text-black, 24 24 24));
12
12
  }
13
13
  .sd-paragraph--size-sm, .sd-prose p--size-sm {
14
- font-size: var(--sd-text-sm);
14
+ font-size: var(--sd-text-sm, 0.875rem);
15
15
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
16
16
  --tw-leading: var(--leading-normal, 1.5);
17
17
  line-height: var(--leading-normal, 1.5);
18
- --tw-font-weight: var(--sd-font-weight-normal);
19
- font-weight: var(--sd-font-weight-normal);
20
- color: rgba(var(--sd-color-text-black));
18
+ --tw-font-weight: var(--sd-font-weight-normal, 400);
19
+ font-weight: var(--sd-font-weight-normal, 400);
20
+ color: rgba(var(--sd-color-text-black, 24 24 24));
21
21
  }
22
22
  .sd-paragraph--inverted, .sd-prose--inverted p {
23
- color: rgba(var(--sd-color-text-white));
23
+ color: rgba(var(--sd-color-text-white, 255 255 255));
24
24
  }
25
25
  @property --tw-leading {
26
26
  syntax: "*";