@redocly/theme 0.25.2 → 0.25.3
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.
- package/lib/components/Markdown/styledVariables.js +54 -0
- package/lib/components/Tabs/Tab.js +30 -6
- package/lib/components/Tabs/Tabs.js +22 -8
- package/package.json +1 -1
- package/src/components/Markdown/styledVariables.ts +54 -0
- package/src/components/Tabs/Tab.tsx +30 -6
- package/src/components/Tabs/Tabs.tsx +22 -8
|
@@ -211,10 +211,64 @@ exports.markdown = (0, styled_components_1.css) `
|
|
|
211
211
|
/**
|
|
212
212
|
* @tokens Markdown Tabs
|
|
213
213
|
*/
|
|
214
|
+
|
|
215
|
+
--md-tabs-container-text-color: inherit; // @presenter Color
|
|
216
|
+
--md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
|
|
217
|
+
--md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
|
|
218
|
+
--md-tabs-container-font-style: normal; // @presenter FontStyle
|
|
219
|
+
--md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
|
|
220
|
+
--md-tabs-container-background-color: inherit; // @presenter Color
|
|
221
|
+
--md-tabs-container-margin: 10px 0; // @presenter Spacing
|
|
222
|
+
--md-tabs-container-padding: 0; // @presenter Spacing
|
|
223
|
+
--md-tabs-container-border: none; // @presenter Border
|
|
224
|
+
|
|
225
|
+
--md-tabs-border: solid var(--border-primary); // @presenter Color
|
|
226
|
+
--md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
|
|
227
|
+
--md-tabs-padding: 0; // @presenter Spacing
|
|
228
|
+
|
|
229
|
+
--md-tabs-content-text-color: inherit; // @presenter Color
|
|
230
|
+
--md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
|
|
231
|
+
--md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
|
|
232
|
+
--md-tabs-content-font-style: normal; // @presenter FontStyle
|
|
233
|
+
--md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
|
|
234
|
+
--md-tabs-content-background-color: inherit; // @presenter Color
|
|
235
|
+
--md-tabs-content-margin: 0; // @presenter Spacing
|
|
236
|
+
--md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
|
|
237
|
+
--md-tabs-content-border: none; // @presenter Border
|
|
214
238
|
|
|
215
239
|
--md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
|
|
240
|
+
--md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
|
|
241
|
+
--md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
|
|
242
|
+
--md-tabs-tab-font-style: normal; // @presenter FontStyle
|
|
243
|
+
--md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
|
|
244
|
+
--md-tabs-tab-background-color: none; // @presenter Color
|
|
245
|
+
--md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
|
|
246
|
+
--md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
|
|
247
|
+
--md-tabs-tab-border: none; // @presenter Color
|
|
248
|
+
--md-tabs-tab-border-width: 0; // @presenter Spacing
|
|
249
|
+
--md-tabs-tab-border-radius: 0; // @presenter BorderRadius
|
|
250
|
+
|
|
251
|
+
--md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
|
|
252
|
+
--md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
|
|
253
|
+
--md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
|
|
254
|
+
--md-tabs-active-tab-font-style: normal; // @presenter FontStyle
|
|
255
|
+
--md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
|
|
256
|
+
--md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
|
|
257
|
+
--md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
|
|
216
258
|
--md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
|
|
259
|
+
--md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
|
|
260
|
+
--md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
|
|
261
|
+
|
|
262
|
+
--md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
|
|
263
|
+
--md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
|
|
264
|
+
--md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
|
|
265
|
+
--md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
|
|
266
|
+
--md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
|
|
267
|
+
--md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
|
|
268
|
+
--md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
|
|
217
269
|
--md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
|
|
270
|
+
--md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
|
|
271
|
+
--md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
|
|
218
272
|
|
|
219
273
|
// @tokens End
|
|
220
274
|
`;
|
|
@@ -14,20 +14,44 @@ exports.Tab = Tab;
|
|
|
14
14
|
const TabItem = styled_components_1.default.li `
|
|
15
15
|
display: inline-block;
|
|
16
16
|
list-style: none;
|
|
17
|
-
padding: 0.75rem 1rem;
|
|
18
17
|
cursor: pointer;
|
|
19
18
|
|
|
19
|
+
color: var(--md-tabs-tab-text-color);
|
|
20
|
+
font-size: var(--md-tabs-tab-font-size);
|
|
21
|
+
font-family: var(--md-tabs-tab-font-family);
|
|
22
|
+
font-style: var(--md-tabs-tab-font-style);
|
|
23
|
+
font-weight: var(--md-tabs-tab-font-weight);
|
|
24
|
+
background-color: var(--md-tabs-tab-background-color);
|
|
25
|
+
border-radius: var(--md-tabs-tab-border-radius);
|
|
26
|
+
padding: var(--md-tabs-tab-padding);
|
|
27
|
+
border: var(--md-tabs-tab-border);
|
|
28
|
+
border-width: var(--md-tabs-tab-border-width);
|
|
29
|
+
|
|
20
30
|
${({ active }) => active
|
|
21
|
-
? `
|
|
22
|
-
|
|
31
|
+
? `
|
|
32
|
+
color: var(--md-tabs-active-tab-text-color);
|
|
33
|
+
font-size: var(--md-tabs-active-tab-font-size);
|
|
34
|
+
font-family: var(--md-tabs-active-tab-font-family);
|
|
35
|
+
font-style: var(--md-tabs-active-tab-font-style);
|
|
36
|
+
font-weight: var(--md-tabs-active-tab-font-weight);
|
|
37
|
+
background-color: var(--md-tabs-active-tab-background-color);
|
|
38
|
+
border-radius: var(--md-tabs-active-tab-border-radius);
|
|
39
|
+
padding: var(--md-tabs-active-tab-padding);
|
|
23
40
|
border: solid var(--md-tabs-active-tab-border-color);
|
|
24
|
-
border-width:
|
|
25
|
-
color: var(--text-primary);
|
|
41
|
+
border-width: var(--md-tabs-active-tab-border-width);
|
|
26
42
|
`
|
|
27
43
|
: `
|
|
28
44
|
&:hover {
|
|
45
|
+
color: var(--md-tabs-hover-tab-text-color);
|
|
46
|
+
font-size: var(--md-tabs-hover-tab-font-size);
|
|
47
|
+
font-family: var(--md-tabs-hover-tab-font-family);
|
|
48
|
+
font-style: var(--md-tabs-hover-tab-font-style);
|
|
49
|
+
font-weight: var(--md-tabs-hover-tab-font-weight);
|
|
50
|
+
background-color: var(--md-tabs-hover-tab-background-color);
|
|
51
|
+
border-radius: var(--md-tabs-hover-tab-border-radius);
|
|
52
|
+
padding: var(--md-tabs-hover-tab-padding);
|
|
29
53
|
border: solid var(--md-tabs-hover-tab-border-color);
|
|
30
|
-
border-width:
|
|
54
|
+
border-width: var(--md-tabs-hover-tab-border-width);
|
|
31
55
|
}
|
|
32
56
|
`}
|
|
33
57
|
`;
|
|
@@ -48,7 +48,15 @@ function Tabs(props) {
|
|
|
48
48
|
}
|
|
49
49
|
exports.Tabs = Tabs;
|
|
50
50
|
const TabsContainer = styled_components_1.default.div `
|
|
51
|
-
|
|
51
|
+
color: var(--md-tabs-container-text-color);
|
|
52
|
+
font-size: var(--md-tabs-container-font-size);
|
|
53
|
+
font-family: var(--md-tabs-container-font-family);
|
|
54
|
+
font-style: var(--md-tabs-container-font-style);
|
|
55
|
+
font-weight: var(--md-tabs-container-font-weight);
|
|
56
|
+
background-color: var(--md-tabs-container-background-color);
|
|
57
|
+
margin: var(--md-tabs-container-margin);
|
|
58
|
+
padding: var(--md-tabs-container-padding);
|
|
59
|
+
border: var(--md-tabs-container-border);
|
|
52
60
|
|
|
53
61
|
ol[class^='Tabs__TabList'] {
|
|
54
62
|
margin: 0;
|
|
@@ -56,18 +64,24 @@ const TabsContainer = styled_components_1.default.div `
|
|
|
56
64
|
}
|
|
57
65
|
`;
|
|
58
66
|
const TabList = styled_components_1.default.ol `
|
|
59
|
-
|
|
60
|
-
padding: 0;
|
|
67
|
+
padding: var(--md-tabs-padding);
|
|
61
68
|
margin-block-end: 0;
|
|
62
|
-
border:
|
|
63
|
-
border-width:
|
|
69
|
+
border: var(--md-tabs-border);
|
|
70
|
+
border-width: var(--md-tabs-border-width);
|
|
64
71
|
|
|
65
72
|
li[class^='Tab__TabItem'] {
|
|
66
|
-
margin:
|
|
67
|
-
margin-bottom: -1px;
|
|
73
|
+
margin: var(--md-tabs-tab-margin);
|
|
68
74
|
}
|
|
69
75
|
`;
|
|
70
76
|
const TabContent = styled_components_1.default.div `
|
|
71
|
-
|
|
77
|
+
color: var(--md-tabs-content-text-color);
|
|
78
|
+
font-size: var(--md-tabs-content-font-size);
|
|
79
|
+
font-family: var(--md-tabs-content-font-family);
|
|
80
|
+
font-style: var(--md-tabs-content-font-style);
|
|
81
|
+
font-weight: var(--md-tabs-content-font-weight);
|
|
82
|
+
background-color: var(--md-tabs-content-background-color);
|
|
83
|
+
margin: var(--md-tabs-content-margin);
|
|
84
|
+
padding: var(--md-tabs-content-padding);
|
|
85
|
+
border: var(--md-tabs-content-border);
|
|
72
86
|
`;
|
|
73
87
|
//# sourceMappingURL=Tabs.js.map
|
package/package.json
CHANGED
|
@@ -210,10 +210,64 @@ export const markdown = css`
|
|
|
210
210
|
/**
|
|
211
211
|
* @tokens Markdown Tabs
|
|
212
212
|
*/
|
|
213
|
+
|
|
214
|
+
--md-tabs-container-text-color: inherit; // @presenter Color
|
|
215
|
+
--md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
|
|
216
|
+
--md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
|
|
217
|
+
--md-tabs-container-font-style: normal; // @presenter FontStyle
|
|
218
|
+
--md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
|
|
219
|
+
--md-tabs-container-background-color: inherit; // @presenter Color
|
|
220
|
+
--md-tabs-container-margin: 10px 0; // @presenter Spacing
|
|
221
|
+
--md-tabs-container-padding: 0; // @presenter Spacing
|
|
222
|
+
--md-tabs-container-border: none; // @presenter Border
|
|
223
|
+
|
|
224
|
+
--md-tabs-border: solid var(--border-primary); // @presenter Color
|
|
225
|
+
--md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
|
|
226
|
+
--md-tabs-padding: 0; // @presenter Spacing
|
|
227
|
+
|
|
228
|
+
--md-tabs-content-text-color: inherit; // @presenter Color
|
|
229
|
+
--md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
|
|
230
|
+
--md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
|
|
231
|
+
--md-tabs-content-font-style: normal; // @presenter FontStyle
|
|
232
|
+
--md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
|
|
233
|
+
--md-tabs-content-background-color: inherit; // @presenter Color
|
|
234
|
+
--md-tabs-content-margin: 0; // @presenter Spacing
|
|
235
|
+
--md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
|
|
236
|
+
--md-tabs-content-border: none; // @presenter Border
|
|
213
237
|
|
|
214
238
|
--md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
|
|
239
|
+
--md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
|
|
240
|
+
--md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
|
|
241
|
+
--md-tabs-tab-font-style: normal; // @presenter FontStyle
|
|
242
|
+
--md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
|
|
243
|
+
--md-tabs-tab-background-color: none; // @presenter Color
|
|
244
|
+
--md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
|
|
245
|
+
--md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
|
|
246
|
+
--md-tabs-tab-border: none; // @presenter Color
|
|
247
|
+
--md-tabs-tab-border-width: 0; // @presenter Spacing
|
|
248
|
+
--md-tabs-tab-border-radius: 0; // @presenter BorderRadius
|
|
249
|
+
|
|
250
|
+
--md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
|
|
251
|
+
--md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
|
|
252
|
+
--md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
|
|
253
|
+
--md-tabs-active-tab-font-style: normal; // @presenter FontStyle
|
|
254
|
+
--md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
|
|
255
|
+
--md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
|
|
256
|
+
--md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
|
|
215
257
|
--md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
|
|
258
|
+
--md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
|
|
259
|
+
--md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
|
|
260
|
+
|
|
261
|
+
--md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
|
|
262
|
+
--md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
|
|
263
|
+
--md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
|
|
264
|
+
--md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
|
|
265
|
+
--md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
|
|
266
|
+
--md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
|
|
267
|
+
--md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
|
|
216
268
|
--md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
|
|
269
|
+
--md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
|
|
270
|
+
--md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
|
|
217
271
|
|
|
218
272
|
// @tokens End
|
|
219
273
|
`;
|
|
@@ -25,21 +25,45 @@ export function Tab({ activeTab, label, onClick, className }: TabProps): JSX.Ele
|
|
|
25
25
|
const TabItem = styled.li<{ active: boolean }>`
|
|
26
26
|
display: inline-block;
|
|
27
27
|
list-style: none;
|
|
28
|
-
padding: 0.75rem 1rem;
|
|
29
28
|
cursor: pointer;
|
|
30
29
|
|
|
30
|
+
color: var(--md-tabs-tab-text-color);
|
|
31
|
+
font-size: var(--md-tabs-tab-font-size);
|
|
32
|
+
font-family: var(--md-tabs-tab-font-family);
|
|
33
|
+
font-style: var(--md-tabs-tab-font-style);
|
|
34
|
+
font-weight: var(--md-tabs-tab-font-weight);
|
|
35
|
+
background-color: var(--md-tabs-tab-background-color);
|
|
36
|
+
border-radius: var(--md-tabs-tab-border-radius);
|
|
37
|
+
padding: var(--md-tabs-tab-padding);
|
|
38
|
+
border: var(--md-tabs-tab-border);
|
|
39
|
+
border-width: var(--md-tabs-tab-border-width);
|
|
40
|
+
|
|
31
41
|
${({ active }) =>
|
|
32
42
|
active
|
|
33
|
-
? `
|
|
34
|
-
|
|
43
|
+
? `
|
|
44
|
+
color: var(--md-tabs-active-tab-text-color);
|
|
45
|
+
font-size: var(--md-tabs-active-tab-font-size);
|
|
46
|
+
font-family: var(--md-tabs-active-tab-font-family);
|
|
47
|
+
font-style: var(--md-tabs-active-tab-font-style);
|
|
48
|
+
font-weight: var(--md-tabs-active-tab-font-weight);
|
|
49
|
+
background-color: var(--md-tabs-active-tab-background-color);
|
|
50
|
+
border-radius: var(--md-tabs-active-tab-border-radius);
|
|
51
|
+
padding: var(--md-tabs-active-tab-padding);
|
|
35
52
|
border: solid var(--md-tabs-active-tab-border-color);
|
|
36
|
-
border-width:
|
|
37
|
-
color: var(--text-primary);
|
|
53
|
+
border-width: var(--md-tabs-active-tab-border-width);
|
|
38
54
|
`
|
|
39
55
|
: `
|
|
40
56
|
&:hover {
|
|
57
|
+
color: var(--md-tabs-hover-tab-text-color);
|
|
58
|
+
font-size: var(--md-tabs-hover-tab-font-size);
|
|
59
|
+
font-family: var(--md-tabs-hover-tab-font-family);
|
|
60
|
+
font-style: var(--md-tabs-hover-tab-font-style);
|
|
61
|
+
font-weight: var(--md-tabs-hover-tab-font-weight);
|
|
62
|
+
background-color: var(--md-tabs-hover-tab-background-color);
|
|
63
|
+
border-radius: var(--md-tabs-hover-tab-border-radius);
|
|
64
|
+
padding: var(--md-tabs-hover-tab-padding);
|
|
41
65
|
border: solid var(--md-tabs-hover-tab-border-color);
|
|
42
|
-
border-width:
|
|
66
|
+
border-width: var(--md-tabs-hover-tab-border-width);
|
|
43
67
|
}
|
|
44
68
|
`}
|
|
45
69
|
`;
|
|
@@ -39,7 +39,15 @@ export function Tabs(props: TabsProps): JSX.Element {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
const TabsContainer = styled.div`
|
|
42
|
-
|
|
42
|
+
color: var(--md-tabs-container-text-color);
|
|
43
|
+
font-size: var(--md-tabs-container-font-size);
|
|
44
|
+
font-family: var(--md-tabs-container-font-family);
|
|
45
|
+
font-style: var(--md-tabs-container-font-style);
|
|
46
|
+
font-weight: var(--md-tabs-container-font-weight);
|
|
47
|
+
background-color: var(--md-tabs-container-background-color);
|
|
48
|
+
margin: var(--md-tabs-container-margin);
|
|
49
|
+
padding: var(--md-tabs-container-padding);
|
|
50
|
+
border: var(--md-tabs-container-border);
|
|
43
51
|
|
|
44
52
|
ol[class^='Tabs__TabList'] {
|
|
45
53
|
margin: 0;
|
|
@@ -48,18 +56,24 @@ const TabsContainer = styled.div`
|
|
|
48
56
|
`;
|
|
49
57
|
|
|
50
58
|
const TabList = styled.ol`
|
|
51
|
-
|
|
52
|
-
padding: 0;
|
|
59
|
+
padding: var(--md-tabs-padding);
|
|
53
60
|
margin-block-end: 0;
|
|
54
|
-
border:
|
|
55
|
-
border-width:
|
|
61
|
+
border: var(--md-tabs-border);
|
|
62
|
+
border-width: var(--md-tabs-border-width);
|
|
56
63
|
|
|
57
64
|
li[class^='Tab__TabItem'] {
|
|
58
|
-
margin:
|
|
59
|
-
margin-bottom: -1px;
|
|
65
|
+
margin: var(--md-tabs-tab-margin);
|
|
60
66
|
}
|
|
61
67
|
`;
|
|
62
68
|
|
|
63
69
|
const TabContent = styled.div`
|
|
64
|
-
|
|
70
|
+
color: var(--md-tabs-content-text-color);
|
|
71
|
+
font-size: var(--md-tabs-content-font-size);
|
|
72
|
+
font-family: var(--md-tabs-content-font-family);
|
|
73
|
+
font-style: var(--md-tabs-content-font-style);
|
|
74
|
+
font-weight: var(--md-tabs-content-font-weight);
|
|
75
|
+
background-color: var(--md-tabs-content-background-color);
|
|
76
|
+
margin: var(--md-tabs-content-margin);
|
|
77
|
+
padding: var(--md-tabs-content-padding);
|
|
78
|
+
border: var(--md-tabs-content-border);
|
|
65
79
|
`;
|