@solid-design-system/styles 1.0.0 → 1.1.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 (46) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/cdn/modules/status-badge.css +1 -0
  3. package/cdn/solid-styles.css +1 -1
  4. package/cdn-versioned/modules/chip.css +1 -1
  5. package/cdn-versioned/modules/container.css +1 -1
  6. package/cdn-versioned/modules/copyright.css +1 -1
  7. package/cdn-versioned/modules/display.css +1 -1
  8. package/cdn-versioned/modules/flag.css +1 -1
  9. package/cdn-versioned/modules/footnotes.css +1 -1
  10. package/cdn-versioned/modules/headline.css +1 -1
  11. package/cdn-versioned/modules/hidden-links.css +1 -1
  12. package/cdn-versioned/modules/interactive.css +1 -1
  13. package/cdn-versioned/modules/leadtext.css +1 -1
  14. package/cdn-versioned/modules/list.css +1 -1
  15. package/cdn-versioned/modules/mark.css +1 -1
  16. package/cdn-versioned/modules/media.css +1 -1
  17. package/cdn-versioned/modules/meta.css +1 -1
  18. package/cdn-versioned/modules/paragraph.css +1 -1
  19. package/cdn-versioned/modules/prose.css +1 -1
  20. package/cdn-versioned/modules/status-badge.css +1 -0
  21. package/cdn-versioned/modules/table-cell.css +1 -1
  22. package/cdn-versioned/modules/table.css +1 -1
  23. package/cdn-versioned/solid-styles.css +1 -1
  24. package/dist/modules/status-badge.css +61 -0
  25. package/dist/solid-styles.css +44 -0
  26. package/dist-versioned/modules/chip.css +6 -6
  27. package/dist-versioned/modules/container.css +45 -45
  28. package/dist-versioned/modules/copyright.css +11 -11
  29. package/dist-versioned/modules/display.css +9 -9
  30. package/dist-versioned/modules/flag.css +6 -6
  31. package/dist-versioned/modules/footnotes.css +7 -7
  32. package/dist-versioned/modules/headline.css +67 -67
  33. package/dist-versioned/modules/hidden-links.css +7 -7
  34. package/dist-versioned/modules/interactive.css +38 -38
  35. package/dist-versioned/modules/leadtext.css +8 -8
  36. package/dist-versioned/modules/list.css +47 -47
  37. package/dist-versioned/modules/mark.css +2 -2
  38. package/dist-versioned/modules/media.css +7 -7
  39. package/dist-versioned/modules/meta.css +12 -12
  40. package/dist-versioned/modules/paragraph.css +8 -8
  41. package/dist-versioned/modules/prose.css +231 -231
  42. package/dist-versioned/modules/status-badge.css +61 -0
  43. package/dist-versioned/modules/table-cell.css +23 -23
  44. package/dist-versioned/modules/table.css +4 -4
  45. package/dist-versioned/solid-styles.css +371 -327
  46. package/package.json +5 -5
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * Generates basic styles for flag elements.
3
- * @name sd-1-0-0-flag
3
+ * @name sd-1-1-0-flag
4
4
  * @status stable
5
5
  * @since 1.34.0
6
- * @variant { neutral-300 | neutral-500 | white } sd-1-0-0-flag--...
6
+ * @variant { neutral-300 | neutral-500 | white } sd-1-1-0-flag--...
7
7
  */
8
8
 
9
- .sd-1-0-0-flag {
9
+ .sd-1-1-0-flag {
10
10
 
11
11
  display: inline-flex;
12
12
 
@@ -33,7 +33,7 @@
33
33
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
34
34
  }
35
35
 
36
- .sd-1-0-0-flag--neutral-500 {
36
+ .sd-1-1-0-flag--neutral-500 {
37
37
 
38
38
 
39
39
 
@@ -44,14 +44,14 @@
44
44
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
45
45
  }
46
46
 
47
- .sd-1-0-0-flag--neutral-300 {
47
+ .sd-1-1-0-flag--neutral-300 {
48
48
 
49
49
 
50
50
 
51
51
  background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag */
52
52
  }
53
53
 
54
- .sd-1-0-0-flag--white {
54
+ .sd-1-1-0-flag--white {
55
55
 
56
56
 
57
57
 
@@ -1,12 +1,12 @@
1
1
  /**
2
2
  * A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
3
- * @name sd-1-0-0-footnotes
3
+ * @name sd-1-1-0-footnotes
4
4
  * @status stable
5
5
  * @since 3.0.0
6
- * @boolean sd-1-0-0-footnotes--inverted Inverts the footnote text.
6
+ * @boolean sd-1-1-0-footnotes--inverted Inverts the footnote text.
7
7
  */
8
8
 
9
- .sd-1-0-0-footnotes {
9
+ .sd-1-1-0-footnotes {
10
10
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
11
11
  margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
12
12
  padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
@@ -16,13 +16,13 @@
16
16
  color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
17
17
  }
18
18
 
19
- .sd-1-0-0-footnotes:is(ol) li {
19
+ .sd-1-1-0-footnotes:is(ol) li {
20
20
  counter-increment: list-item;
21
21
  display: flex;
22
22
  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
23
23
  }
24
24
 
25
- .sd-1-0-0-footnotes:is(ol) li::before {
25
+ .sd-1-1-0-footnotes:is(ol) li::before {
26
26
  width: var(--sd-spacing-5, 1.25rem) /* 20px */;
27
27
  flex-shrink: 0;
28
28
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
@@ -31,11 +31,11 @@
31
31
  font-size: 10px;
32
32
  }
33
33
 
34
- .sd-1-0-0-footnotes:is(ul) {
34
+ .sd-1-1-0-footnotes:is(ul) {
35
35
  list-style: '';
36
36
  }
37
37
 
38
- .sd-1-0-0-footnotes--inverted {
38
+ .sd-1-1-0-footnotes--inverted {
39
39
 
40
40
  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
41
41
  Used for inverted pressed interaction text link */;
@@ -1,15 +1,15 @@
1
1
  /**
2
2
  * Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
3
- * @name sd-1-0-0-headline
3
+ * @name sd-1-1-0-headline
4
4
  * @status stable
5
5
  * @since 1.16
6
- * @variant { 3xl | xl | lg | base } sd-1-0-0-headline--size-... The headline's size.
7
- * @boolean sd-1-0-0-headline--inverted Inverts the headline text.
8
- * @boolean sd-1-0-0-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
6
+ * @variant { 3xl | xl | lg | base } sd-1-1-0-headline--size-... The headline's size.
7
+ * @boolean sd-1-1-0-headline--inverted Inverts the headline text.
8
+ * @boolean sd-1-1-0-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
9
9
  */
10
10
 
11
- .sd-1-0-0-headline,
12
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5) {
11
+ .sd-1-1-0-headline,
12
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5) {
13
13
 
14
14
  display: flex;
15
15
 
@@ -20,7 +20,7 @@
20
20
  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */
21
21
  }
22
22
 
23
- .sd-1-0-0-headline sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
23
+ .sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
24
24
 
25
25
  flex-shrink: 0;
26
26
 
@@ -33,16 +33,16 @@
33
33
 
34
34
  @media (min-width: 640px) {
35
35
 
36
- .sd-1-0-0-headline sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
36
+ .sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
37
37
 
38
38
  margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */
39
39
  }
40
40
  }
41
41
 
42
- .sd-1-0-0-headline.sd-1-0-0-headline,
43
- .sd-1-0-0-headline:is(h1):not(.sd-1-0-0-headline),
44
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline,
45
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-0-headline) {
42
+ .sd-1-1-0-headline.sd-1-1-0-headline,
43
+ .sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline),
44
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline,
45
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) {
46
46
 
47
47
  gap: var(--sd-spacing-4, 1rem) /* 16px */;
48
48
 
@@ -53,32 +53,32 @@
53
53
 
54
54
  @media (min-width: 640px) {
55
55
 
56
- .sd-1-0-0-headline.sd-1-0-0-headline,
57
- .sd-1-0-0-headline:is(h1):not(.sd-1-0-0-headline),
58
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline,
59
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-0-headline) {
56
+ .sd-1-1-0-headline.sd-1-1-0-headline,
57
+ .sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline),
58
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline,
59
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) {
60
60
 
61
61
  font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
62
62
  }
63
63
  }
64
64
 
65
- .sd-1-0-0-headline.sd-1-0-0-headline sd-icon, .sd-1-0-0-headline:is(h1):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-0-headline) sd-icon {
65
+ .sd-1-1-0-headline.sd-1-1-0-headline sd-icon, .sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) sd-icon {
66
66
 
67
67
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
68
68
  }
69
69
 
70
70
  @media (min-width: 640px) {
71
71
 
72
- .sd-1-0-0-headline.sd-1-0-0-headline sd-icon, .sd-1-0-0-headline:is(h1):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-0-headline) sd-icon {
72
+ .sd-1-1-0-headline.sd-1-1-0-headline sd-icon, .sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) sd-icon {
73
73
 
74
74
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
75
75
  }
76
76
  }
77
77
 
78
- .sd-1-0-0-headline.sd-1-0-0-headline--size-3xl,
79
- .sd-1-0-0-headline:is(h2):not(.sd-1-0-0-headline),
80
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-3xl,
81
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-0-headline) {
78
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-3xl,
79
+ .sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline),
80
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl,
81
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) {
82
82
 
83
83
  gap: var(--sd-spacing-4, 1rem) /* 16px */;
84
84
 
@@ -89,36 +89,36 @@
89
89
 
90
90
  @media (min-width: 640px) {
91
91
 
92
- .sd-1-0-0-headline.sd-1-0-0-headline--size-3xl,
93
- .sd-1-0-0-headline:is(h2):not(.sd-1-0-0-headline),
94
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-3xl,
95
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-0-headline) {
92
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-3xl,
93
+ .sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline),
94
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl,
95
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) {
96
96
 
97
97
  font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
98
98
  }
99
99
  }
100
100
 
101
- .sd-1-0-0-headline.sd-1-0-0-headline--size-3xl sd-icon, .sd-1-0-0-headline:is(h2):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-3xl sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-0-headline) sd-icon {
101
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) sd-icon {
102
102
 
103
103
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
104
104
  }
105
105
 
106
106
  @media (min-width: 640px) {
107
107
 
108
- .sd-1-0-0-headline.sd-1-0-0-headline--size-3xl sd-icon, .sd-1-0-0-headline:is(h2):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-3xl sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-0-headline) sd-icon {
108
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) sd-icon {
109
109
 
110
110
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
111
111
  }
112
112
  }
113
113
 
114
- .sd-1-0-0-headline.sd-1-0-0-headline--size-xl,
115
- .sd-1-0-0-headline.sd-1-0-0-headline--size-lg,
116
- .sd-1-0-0-headline.sd-1-0-0-headline--size-base,
117
- .sd-1-0-0-headline:is(h3, h4, h5):not(.sd-1-0-0-headline),
118
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-xl,
119
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-lg,
120
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-base,
121
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-0-0-headline) {
114
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-xl,
115
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-lg,
116
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-base,
117
+ .sd-1-1-0-headline:is(h3, h4, h5):not(.sd-1-1-0-headline),
118
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl,
119
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg,
120
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base,
121
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-1-0-headline) {
122
122
 
123
123
  gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
124
124
 
@@ -127,87 +127,87 @@
127
127
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
128
128
  }
129
129
 
130
- .sd-1-0-0-headline.sd-1-0-0-headline--size-xl sd-icon, .sd-1-0-0-headline.sd-1-0-0-headline--size-lg sd-icon, .sd-1-0-0-headline.sd-1-0-0-headline--size-base sd-icon, .sd-1-0-0-headline:is(h3, h4, h5):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-xl sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-lg sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-base sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-0-0-headline) sd-icon {
130
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-headline.sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-headline.sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-headline:is(h3, h4, h5):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-1-0-headline) sd-icon {
131
131
 
132
132
  font-size: 2rem
133
133
  }
134
134
 
135
- .sd-1-0-0-headline.sd-1-0-0-headline--size-xl,
136
- .sd-1-0-0-headline:is(h3):not(.sd-1-0-0-headline),
137
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-xl,
138
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-0-0-headline) {
135
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-xl,
136
+ .sd-1-1-0-headline:is(h3):not(.sd-1-1-0-headline),
137
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl,
138
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-1-0-headline) {
139
139
 
140
140
  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
141
141
  }
142
142
 
143
- .sd-1-0-0-headline.sd-1-0-0-headline--size-xl sd-icon, .sd-1-0-0-headline:is(h3):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-xl sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-0-0-headline) sd-icon {
143
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-headline:is(h3):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-1-0-headline) sd-icon {
144
144
 
145
145
  margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
146
146
  }
147
147
 
148
148
  @media (min-width: 640px) {
149
149
 
150
- .sd-1-0-0-headline.sd-1-0-0-headline--size-xl sd-icon, .sd-1-0-0-headline:is(h3):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-xl sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-0-0-headline) sd-icon {
150
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-headline:is(h3):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-1-0-headline) sd-icon {
151
151
 
152
152
  margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
153
153
  }
154
154
  }
155
155
 
156
- .sd-1-0-0-headline.sd-1-0-0-headline--size-lg,
157
- .sd-1-0-0-headline.sd-1-0-0-headline--size-base,
158
- .sd-1-0-0-headline:is(h4, h5):not(.sd-1-0-0-headline),
159
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-lg,
160
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-base,
161
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-0-0-headline) {
156
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-lg,
157
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-base,
158
+ .sd-1-1-0-headline:is(h4, h5):not(.sd-1-1-0-headline),
159
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg,
160
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base,
161
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-1-0-headline) {
162
162
 
163
163
  line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */
164
164
  }
165
165
 
166
- .sd-1-0-0-headline.sd-1-0-0-headline--size-lg,
167
- .sd-1-0-0-headline:is(h4),
168
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-lg,
169
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h4) {
166
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-lg,
167
+ .sd-1-1-0-headline:is(h4),
168
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg,
169
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4) {
170
170
 
171
171
  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */
172
172
  }
173
173
 
174
- .sd-1-0-0-headline.sd-1-0-0-headline--size-lg sd-icon, .sd-1-0-0-headline:is(h4) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-lg sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
174
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-headline:is(h4) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
175
175
 
176
176
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
177
177
  }
178
178
 
179
179
  @media (min-width: 640px) {
180
180
 
181
- .sd-1-0-0-headline.sd-1-0-0-headline--size-lg sd-icon, .sd-1-0-0-headline:is(h4) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-lg sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
181
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-headline:is(h4) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
182
182
 
183
183
  margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
184
184
  }
185
185
  }
186
186
 
187
- .sd-1-0-0-headline.sd-1-0-0-headline--size-base,
188
- .sd-1-0-0-headline:is(h5):not(.sd-1-0-0-headline),
189
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-base,
190
- .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-0-0-headline) {
187
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-base,
188
+ .sd-1-1-0-headline:is(h5):not(.sd-1-1-0-headline),
189
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base,
190
+ .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-1-0-headline) {
191
191
 
192
192
  font-size: var(--sd-font-size-base, 1rem) /* 16px */
193
193
  }
194
194
 
195
- .sd-1-0-0-headline.sd-1-0-0-headline--size-base sd-icon, .sd-1-0-0-headline:is(h5):not(.sd-1-0-0-headline) sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-base sd-icon, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-0-0-headline) sd-icon {
195
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-headline:is(h5):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-1-0-headline) sd-icon {
196
196
 
197
197
  margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
198
198
  }
199
199
 
200
- .sd-1-0-0-headline.sd-1-0-0-headline--size-base mark, .sd-1-0-0-headline:is(h5):not(.sd-1-0-0-headline) mark, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5).sd-1-0-0-headline--size-base mark, .sd-1-0-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-0-0-headline) mark {
200
+ .sd-1-1-0-headline.sd-1-1-0-headline--size-base mark, .sd-1-1-0-headline:is(h5):not(.sd-1-1-0-headline) mark, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base mark, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-1-0-headline) mark {
201
201
 
202
202
  color: inherit
203
203
  }
204
204
 
205
- .sd-1-0-0-headline--inline {
205
+ .sd-1-1-0-headline--inline {
206
206
 
207
207
  display: inline-block
208
208
  }
209
209
 
210
- .sd-1-0-0-headline--inline sd-icon {
210
+ .sd-1-1-0-headline--inline sd-icon {
211
211
 
212
212
  margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
213
213
 
@@ -216,20 +216,20 @@
216
216
  vertical-align: middle
217
217
  }
218
218
 
219
- .sd-1-0-0-headline--inline:is(.sd-1-0-0-headline--size-xl, .sd-1-0-0-headline--size-lg, .sd-1-0-0-headline--size-base) sd-icon {
219
+ .sd-1-1-0-headline--inline:is(.sd-1-1-0-headline--size-xl, .sd-1-1-0-headline--size-lg, .sd-1-1-0-headline--size-base) sd-icon {
220
220
 
221
221
  margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */
222
222
  }
223
223
 
224
- .sd-1-0-0-headline--inverted:not(#_),
225
- .sd-1-0-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-0-0-headline):not(#_) {
224
+ .sd-1-1-0-headline--inverted:not(#_),
225
+ .sd-1-1-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-1-0-headline):not(#_) {
226
226
 
227
227
 
228
228
 
229
229
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
230
230
  }
231
231
 
232
- .sd-1-0-0-headline--inverted:not(#_) sd-icon, .sd-1-0-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-0-0-headline):not(#_) sd-icon {
232
+ .sd-1-1-0-headline--inverted:not(#_) sd-icon, .sd-1-1-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-1-0-headline):not(#_) sd-icon {
233
233
 
234
234
 
235
235
 
@@ -1,10 +1,10 @@
1
1
  /**
2
2
  * Hidden links can be used to show links only for keyboard users.
3
- * @name sd-1-0-0-hidden-links
3
+ * @name sd-1-1-0-hidden-links
4
4
  * @status stable
5
5
  * @since 3.15.0
6
- * @boolean sd-1-0-0-hidden-links--multiple Adapts styling for multiple skip links.
7
- * @boolean sd-1-0-0-hidden-links--debug Always show the links for debugging purposes.
6
+ * @boolean sd-1-1-0-hidden-links--multiple Adapts styling for multiple skip links.
7
+ * @boolean sd-1-1-0-hidden-links--debug Always show the links for debugging purposes.
8
8
  */
9
9
 
10
10
  :lang(en) {
@@ -15,7 +15,7 @@
15
15
  --sd-hidden-links-title: 'Springe zu';
16
16
  }
17
17
 
18
- .sd-1-0-0-hidden-links:not(:focus-within):not(.sd-1-0-0-hidden-links--debug) {
18
+ .sd-1-1-0-hidden-links:not(:focus-within):not(.sd-1-1-0-hidden-links--debug) {
19
19
  position: absolute;
20
20
  width: 1px;
21
21
  height: 1px;
@@ -27,13 +27,13 @@
27
27
  border-width: 0;
28
28
  }
29
29
 
30
- .sd-1-0-0-hidden-links {
30
+ .sd-1-1-0-hidden-links {
31
31
  position: absolute;
32
32
  top: var(--sd-spacing-6, 1.5rem) /* 24px */;
33
33
  left: var(--sd-spacing-6, 1.5rem) /* 24px */;
34
34
  }
35
35
 
36
- .sd-1-0-0-hidden-links--multiple {
36
+ .sd-1-1-0-hidden-links--multiple {
37
37
  display: flex;
38
38
  flex-direction: column;
39
39
 
@@ -47,7 +47,7 @@
47
47
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
48
48
  }
49
49
 
50
- .sd-1-0-0-hidden-links--multiple:before {
50
+ .sd-1-1-0-hidden-links--multiple:before {
51
51
  padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
52
52
  padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
53
53
  padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
@@ -1,20 +1,20 @@
1
1
  /**
2
2
  * Generates basic styles for interactive elements.
3
- * @name sd-1-0-0-interactive
3
+ * @name sd-1-1-0-interactive
4
4
  * @status stable
5
5
  * @since 1.11
6
- * @boolean sd-1-0-0-interactive--disabled Makes an element look disabled.
7
- * @boolean sd-1-0-0-interactive--inverted Inverts the colors of an element.
8
- * @boolean sd-1-0-0-interactive--reset Resets the default browser styles of e.g., a button.
6
+ * @boolean sd-1-1-0-interactive--disabled Makes an element look disabled.
7
+ * @boolean sd-1-1-0-interactive--inverted Inverts the colors of an element.
8
+ * @boolean sd-1-1-0-interactive--reset Resets the default browser styles of e.g., a button.
9
9
  */
10
10
 
11
- .sd-1-0-0-prose a--reset, .sd-1-0-0-interactive--reset {
11
+ .sd-1-1-0-prose a--reset, .sd-1-1-0-interactive--reset {
12
12
  all: unset;
13
13
  outline: revert;
14
14
  }
15
15
 
16
- .sd-1-0-0-prose a,
17
- .sd-1-0-0-interactive {
16
+ .sd-1-1-0-prose a,
17
+ .sd-1-1-0-interactive {
18
18
  cursor: pointer;
19
19
 
20
20
  color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
@@ -24,80 +24,80 @@
24
24
  transition-duration: 150ms;
25
25
  }
26
26
 
27
- .sd-1-0-0-prose a:hover:not([disabled]),
28
- .sd-1-0-0-interactive:hover:not([disabled]) {
27
+ .sd-1-1-0-prose a:hover:not([disabled]),
28
+ .sd-1-1-0-interactive:hover:not([disabled]) {
29
29
 
30
30
  color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
31
31
  }
32
32
 
33
- .sd-1-0-0-prose a:active:not([disabled]),
34
- .sd-1-0-0-interactive:active:not([disabled]) {
33
+ .sd-1-1-0-prose a:active:not([disabled]),
34
+ .sd-1-1-0-interactive:active:not([disabled]) {
35
35
 
36
36
  color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
37
37
  }
38
38
 
39
- .sd-1-0-0-prose a:is(.sd-1-0-0-interactive), .sd-1-0-0-interactive:is(.sd-1-0-0-interactive) {
39
+ .sd-1-1-0-prose a:is(.sd-1-1-0-interactive), .sd-1-1-0-interactive:is(.sd-1-1-0-interactive) {
40
40
  text-decoration-line: none;
41
41
  }
42
42
 
43
- .sd-1-0-0-prose a:focus-visible, .sd-1-0-0-interactive:focus-visible {
43
+ .sd-1-1-0-prose a:focus-visible, .sd-1-1-0-interactive:focus-visible {
44
44
  outline-style: solid;
45
45
  outline-width: 2px;
46
46
  outline-offset: 2px;
47
47
  outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
48
48
  }
49
49
 
50
- .sd-1-0-0-prose a--disabled,
51
- .sd-1-0-0-prose a[disabled],
52
- .sd-1-0-0-prose a[href=''],
53
- .sd-1-0-0-interactive--disabled,
54
- .sd-1-0-0-interactive[disabled],
55
- .sd-1-0-0-interactive[href=''] {
50
+ .sd-1-1-0-prose a--disabled,
51
+ .sd-1-1-0-prose a[disabled],
52
+ .sd-1-1-0-prose a[href=''],
53
+ .sd-1-1-0-interactive--disabled,
54
+ .sd-1-1-0-interactive[disabled],
55
+ .sd-1-1-0-interactive[href=''] {
56
56
  cursor: not-allowed;
57
57
 
58
58
  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
59
59
  }
60
60
 
61
- .sd-1-0-0-prose a--disabled:hover:not([disabled]),
62
- .sd-1-0-0-prose a[disabled]:hover:not([disabled]),
63
- .sd-1-0-0-prose a[href='']:hover:not([disabled]),
64
- .sd-1-0-0-interactive--disabled:hover:not([disabled]),
65
- .sd-1-0-0-interactive[disabled]:hover:not([disabled]),
66
- .sd-1-0-0-interactive[href='']:hover:not([disabled]) {
61
+ .sd-1-1-0-prose a--disabled:hover:not([disabled]),
62
+ .sd-1-1-0-prose a[disabled]:hover:not([disabled]),
63
+ .sd-1-1-0-prose a[href='']:hover:not([disabled]),
64
+ .sd-1-1-0-interactive--disabled:hover:not([disabled]),
65
+ .sd-1-1-0-interactive[disabled]:hover:not([disabled]),
66
+ .sd-1-1-0-interactive[href='']:hover:not([disabled]) {
67
67
 
68
68
  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
69
69
  }
70
70
 
71
- .sd-1-0-0-prose a--disabled:active:not([disabled]),
72
- .sd-1-0-0-prose a[disabled]:active:not([disabled]),
73
- .sd-1-0-0-prose a[href='']:active:not([disabled]),
74
- .sd-1-0-0-interactive--disabled:active:not([disabled]),
75
- .sd-1-0-0-interactive[disabled]:active:not([disabled]),
76
- .sd-1-0-0-interactive[href='']:active:not([disabled]) {
71
+ .sd-1-1-0-prose a--disabled:active:not([disabled]),
72
+ .sd-1-1-0-prose a[disabled]:active:not([disabled]),
73
+ .sd-1-1-0-prose a[href='']:active:not([disabled]),
74
+ .sd-1-1-0-interactive--disabled:active:not([disabled]),
75
+ .sd-1-1-0-interactive[disabled]:active:not([disabled]),
76
+ .sd-1-1-0-interactive[href='']:active:not([disabled]) {
77
77
 
78
78
  color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
79
79
  }
80
80
 
81
- .sd-1-0-0-prose--inverted a,
82
- .sd-1-0-0-interactive--inverted {
81
+ .sd-1-1-0-prose--inverted a,
82
+ .sd-1-1-0-interactive--inverted {
83
83
 
84
84
  color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
85
85
  }
86
86
 
87
- .sd-1-0-0-prose--inverted a:hover:not([disabled]),
88
- .sd-1-0-0-interactive--inverted:hover:not([disabled]) {
87
+ .sd-1-1-0-prose--inverted a:hover:not([disabled]),
88
+ .sd-1-1-0-interactive--inverted:hover:not([disabled]) {
89
89
 
90
90
  color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
91
91
  }
92
92
 
93
- .sd-1-0-0-prose--inverted a:active:not([disabled]),
94
- .sd-1-0-0-interactive--inverted:active:not([disabled]) {
93
+ .sd-1-1-0-prose--inverted a:active:not([disabled]),
94
+ .sd-1-1-0-interactive--inverted:active:not([disabled]) {
95
95
 
96
96
  color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
97
97
  Used for inverted pressed interaction text link */;
98
98
  }
99
99
 
100
- .sd-1-0-0-prose--inverted a:focus-visible, .sd-1-0-0-interactive--inverted:focus-visible {
100
+ .sd-1-1-0-prose--inverted a:focus-visible, .sd-1-1-0-interactive--inverted:focus-visible {
101
101
  outline-style: solid;
102
102
  outline-width: 2px;
103
103
  outline-offset: 2px;
@@ -1,14 +1,14 @@
1
1
  /**
2
2
  * Leadtext is used for text that should be highlighted and a focal point of the page.
3
- * @name sd-1-0-0-leadtext
3
+ * @name sd-1-1-0-leadtext
4
4
  * @status stable
5
5
  * @since 1.7
6
- * @variant { lg } sd-1-0-0-leadtext--size-... The leadtext's size.
7
- * @boolean sd-1-0-0-leadtext--inverted Inverts the leadtext text.
6
+ * @variant { lg } sd-1-1-0-leadtext--size-... The leadtext's size.
7
+ * @boolean sd-1-1-0-leadtext--inverted Inverts the leadtext text.
8
8
  */
9
9
 
10
- .sd-1-0-0-prose > .sd-1-0-0-leadtext,
11
- .sd-1-0-0-leadtext {
10
+ .sd-1-1-0-prose > .sd-1-1-0-leadtext,
11
+ .sd-1-1-0-leadtext {
12
12
 
13
13
  font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
14
14
 
@@ -21,7 +21,7 @@
21
21
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
22
22
  }
23
23
 
24
- .sd-1-0-0-prose > .sd-1-0-0-leadtext--size-lg, .sd-1-0-0-leadtext--size-lg {
24
+ .sd-1-1-0-prose > .sd-1-1-0-leadtext--size-lg, .sd-1-1-0-leadtext--size-lg {
25
25
 
26
26
  font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
27
27
 
@@ -34,8 +34,8 @@
34
34
  color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
35
35
  }
36
36
 
37
- .sd-1-0-0-prose--inverted > .sd-1-0-0-leadtext,
38
- .sd-1-0-0-leadtext--inverted {
37
+ .sd-1-1-0-prose--inverted > .sd-1-1-0-leadtext,
38
+ .sd-1-1-0-leadtext--inverted {
39
39
 
40
40
 
41
41