@redocly/theme 0.71.0-next.3 → 0.71.0-next.4

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 (7) hide show
  1. package/lib/core/styles/dark.js +0 -1
  2. package/lib/markdoc/components/NumberedList/NumberedItem.js +15 -23
  3. package/lib/markdoc/components/NumberedList/variables.js +4 -3
  4. package/package.json +1 -1
  5. package/src/core/styles/dark.ts +0 -1
  6. package/src/markdoc/components/NumberedList/NumberedItem.tsx +17 -26
  7. package/src/markdoc/components/NumberedList/variables.ts +4 -3
package/lib/core/styles/dark.js CHANGED
@@ -65,7 +65,6 @@ const numberedListDarkMode = (0, styled_components_1.css) `
65
65
  */
66
66
 
67
67
  --md-numbered-list-marker-bg-color: var(--color-warm-grey-3); // @presenter Color
68
- --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-4); // @presenter Color
69
68
 
70
69
  // @tokens End
71
70
  `;
package/lib/markdoc/components/NumberedList/NumberedItem.js CHANGED
@@ -55,8 +55,8 @@ function NumberedItem({ headline, anchorId, headlineLevel, icon, iconRawContent,
55
55
  type === exports.NumberedListType.ICON && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" },
56
56
  react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }))),
57
57
  type === exports.NumberedListType.NUMBER && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" }, index)),
58
- anchorId && (react_1.default.createElement(MarkerLink, { className: "numbered-item-marker-link", $isDot: isDot },
59
- react_1.default.createElement(MarkerLinkIcon, { "aria-hidden": "true", focusable: "false", color: "--md-numbered-list-marker-text-color" })))));
58
+ anchorId && (react_1.default.createElement(MarkerLink, { className: "numbered-item-marker-link", "aria-hidden": "true" },
59
+ react_1.default.createElement(MarkerLinkIcon, { "aria-hidden": "true", focusable: "false", size: "var(--md-numbered-list-marker-link-size)", color: "--md-numbered-list-marker-link-icon-color" })))));
60
60
  return (react_1.default.createElement(NumberedItemWrapper, { "data-component-name": "Markdoc/NumberedList/NumberedItem", className: className, id: anchorId, $size: size, $isDot: isDot },
61
61
  react_1.default.createElement(MarkerRail, null,
62
62
  anchorId ? (react_1.default.createElement("a", Object.assign({ href: `#${anchorId}` }, (headline
@@ -110,24 +110,23 @@ const MarkerContent = styled_components_1.default.span `
110
110
  justify-content: center;
111
111
  `;
112
112
  const MarkerLink = styled_components_1.default.span `
113
+ position: absolute;
114
+ inset-inline-end: calc(100% + var(--md-numbered-list-marker-link-gap));
113
115
  display: none;
114
116
  align-items: center;
115
117
  justify-content: center;
116
118
 
117
- svg {
118
- width: var(--icon-width, 16px);
119
- height: var(--icon-height, 16px);
119
+ &::before {
120
+ content: '';
121
+ position: absolute;
122
+ inset-block: 0;
123
+ inset-inline-start: 100%;
124
+ width: var(--md-numbered-list-marker-link-gap);
120
125
  }
121
-
122
- ${({ $isDot }) => $isDot &&
123
- (0, styled_components_1.css) `
124
- position: absolute;
125
- inset-inline-end: calc(100% + var(--md-numbered-list-dot-link-gap));
126
- `}
127
126
  `;
128
127
  const MarkerLinkIcon = (0, styled_components_1.default)(LinkIcon_1.LinkIcon) `
129
128
  path:first-of-type {
130
- fill: var(--md-numbered-list-marker-icon-bg-color);
129
+ fill: var(--md-numbered-list-marker-link-bg-color);
131
130
  }
132
131
  `;
133
132
  const MarkerRail = styled_components_1.default.span `
@@ -199,17 +198,10 @@ const NumberedItemWrapper = styled_components_1.default.li `
199
198
  padding-bottom: 0;
200
199
  }
201
200
 
202
- &:hover,
203
- &:focus-within {
204
- ${Marker} {
205
- background-color: ${({ $isDot }) => $isDot ? 'var(--text-color-primary)' : 'var(--md-numbered-list-marker-bg-color-hover)'};
206
- }
207
-
208
- a ${Marker}:not([data-dot]) .numbered-item-marker-content {
209
- display: none;
210
- }
211
-
212
- a ${Marker} .numbered-item-marker-link {
201
+ &:has(${MarkerRail} a:hover),
202
+ &:has(${MarkerRail} a:focus-visible),
203
+ &:has(${NumberedItemHeadline}:hover) {
204
+ .numbered-item-marker-link {
213
205
  display: flex;
214
206
  }
215
207
  }
package/lib/markdoc/components/NumberedList/variables.js CHANGED
@@ -11,8 +11,6 @@ exports.markdownNumberedList = (0, styled_components_1.css) `
11
11
  --md-numbered-list-gap: var(--spacing-base); // @presenter Spacing
12
12
 
13
13
  --md-numbered-list-marker-bg-color: var(--color-warm-grey-2); // @presenter Color
14
- --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
15
- --md-numbered-list-marker-icon-bg-color: transparent; // @presenter Color
16
14
  --md-numbered-list-marker-text-color: var(--text-color-primary); // @presenter Color
17
15
  --md-numbered-list-marker-font-size: var(--font-size-base); // @presenter FontSize
18
16
 
@@ -23,7 +21,10 @@ exports.markdownNumberedList = (0, styled_components_1.css) `
23
21
  --md-numbered-list-icon-small-size: 12px; // @presenter Spacing
24
22
  --md-numbered-list-dot-size: 10px; // @presenter Spacing
25
23
  --md-numbered-list-dot-rail-padding-top: 7px; // @presenter Spacing
26
- --md-numbered-list-dot-link-gap: 6px; // @presenter Spacing
24
+ --md-numbered-list-marker-link-gap: 10px; // @presenter Spacing
25
+ --md-numbered-list-marker-link-size: 20px; // @presenter Spacing
26
+ --md-numbered-list-marker-link-icon-color: var(--md-numbered-list-marker-text-color); // @presenter Color
27
+ --md-numbered-list-marker-link-bg-color: var(--bg-color-tonal); // @presenter Color
27
28
 
28
29
  --md-numbered-list-tail-bg-color: var(--md-numbered-list-marker-bg-color); // @presenter Color
29
30
  --md-numbered-list-tail-fade-gradient: linear-gradient(to bottom, var(--md-numbered-list-tail-bg-color), transparent); // @presenter Color
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.71.0-next.3",
3
+ "version": "0.71.0-next.4",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/core/styles/dark.ts CHANGED
@@ -67,7 +67,6 @@ const numberedListDarkMode = css`
67
67
  */
68
68
 
69
69
  --md-numbered-list-marker-bg-color: var(--color-warm-grey-3); // @presenter Color
70
- --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-4); // @presenter Color
71
70
 
72
71
  // @tokens End
73
72
  `
package/src/markdoc/components/NumberedList/NumberedItem.tsx CHANGED
@@ -63,11 +63,12 @@ export function NumberedItem({
63
63
  <MarkerContent className="numbered-item-marker-content">{index}</MarkerContent>
64
64
  )}
65
65
  {anchorId && (
66
- <MarkerLink className="numbered-item-marker-link" $isDot={isDot}>
66
+ <MarkerLink className="numbered-item-marker-link" aria-hidden="true">
67
67
  <MarkerLinkIcon
68
68
  aria-hidden="true"
69
69
  focusable="false"
70
- color="--md-numbered-list-marker-text-color"
70
+ size="var(--md-numbered-list-marker-link-size)"
71
+ color="--md-numbered-list-marker-link-icon-color"
71
72
  />
72
73
  </MarkerLink>
73
74
  )}
@@ -156,27 +157,25 @@ const MarkerContent = styled.span`
156
157
  justify-content: center;
157
158
  `;
158
159
 
159
- const MarkerLink = styled.span<{ $isDot?: boolean }>`
160
+ const MarkerLink = styled.span`
161
+ position: absolute;
162
+ inset-inline-end: calc(100% + var(--md-numbered-list-marker-link-gap));
160
163
  display: none;
161
164
  align-items: center;
162
165
  justify-content: center;
163
166
 
164
- svg {
165
- width: var(--icon-width, 16px);
166
- height: var(--icon-height, 16px);
167
+ &::before {
168
+ content: '';
169
+ position: absolute;
170
+ inset-block: 0;
171
+ inset-inline-start: 100%;
172
+ width: var(--md-numbered-list-marker-link-gap);
167
173
  }
168
-
169
- ${({ $isDot }) =>
170
- $isDot &&
171
- css`
172
- position: absolute;
173
- inset-inline-end: calc(100% + var(--md-numbered-list-dot-link-gap));
174
- `}
175
174
  `;
176
175
 
177
176
  const MarkerLinkIcon = styled(LinkIcon)`
178
177
  path:first-of-type {
179
- fill: var(--md-numbered-list-marker-icon-bg-color);
178
+ fill: var(--md-numbered-list-marker-link-bg-color);
180
179
  }
181
180
  `;
182
181
 
@@ -256,18 +255,10 @@ const NumberedItemWrapper = styled.li<{ $size?: string; $isDot?: boolean }>`
256
255
  padding-bottom: 0;
257
256
  }
258
257
 
259
- &:hover,
260
- &:focus-within {
261
- ${Marker} {
262
- background-color: ${({ $isDot }) =>
263
- $isDot ? 'var(--text-color-primary)' : 'var(--md-numbered-list-marker-bg-color-hover)'};
264
- }
265
-
266
- a ${Marker}:not([data-dot]) .numbered-item-marker-content {
267
- display: none;
268
- }
269
-
270
- a ${Marker} .numbered-item-marker-link {
258
+ &:has(${MarkerRail} a:hover),
259
+ &:has(${MarkerRail} a:focus-visible),
260
+ &:has(${NumberedItemHeadline}:hover) {
261
+ .numbered-item-marker-link {
271
262
  display: flex;
272
263
  }
273
264
  }
package/src/markdoc/components/NumberedList/variables.ts CHANGED
@@ -9,8 +9,6 @@ export const markdownNumberedList = css`
9
9
  --md-numbered-list-gap: var(--spacing-base); // @presenter Spacing
10
10
 
11
11
  --md-numbered-list-marker-bg-color: var(--color-warm-grey-2); // @presenter Color
12
- --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
13
- --md-numbered-list-marker-icon-bg-color: transparent; // @presenter Color
14
12
  --md-numbered-list-marker-text-color: var(--text-color-primary); // @presenter Color
15
13
  --md-numbered-list-marker-font-size: var(--font-size-base); // @presenter FontSize
16
14
 
@@ -21,7 +19,10 @@ export const markdownNumberedList = css`
21
19
  --md-numbered-list-icon-small-size: 12px; // @presenter Spacing
22
20
  --md-numbered-list-dot-size: 10px; // @presenter Spacing
23
21
  --md-numbered-list-dot-rail-padding-top: 7px; // @presenter Spacing
24
- --md-numbered-list-dot-link-gap: 6px; // @presenter Spacing
22
+ --md-numbered-list-marker-link-gap: 10px; // @presenter Spacing
23
+ --md-numbered-list-marker-link-size: 20px; // @presenter Spacing
24
+ --md-numbered-list-marker-link-icon-color: var(--md-numbered-list-marker-text-color); // @presenter Color
25
+ --md-numbered-list-marker-link-bg-color: var(--bg-color-tonal); // @presenter Color
25
26
 
26
27
  --md-numbered-list-tail-bg-color: var(--md-numbered-list-marker-bg-color); // @presenter Color
27
28
  --md-numbered-list-tail-fade-gradient: linear-gradient(to bottom, var(--md-numbered-list-tail-bg-color), transparent); // @presenter Color