@redocly/theme 0.1.10 → 0.1.11
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/Navbar/NavbarMenu.js +1 -1
- package/Search/ClearIcon.js +1 -1
- package/Search/SearchIcon.js +1 -1
- package/TableOfContent/TableOfContent.js +5 -6
- package/globalStyle.d.ts +1 -0
- package/globalStyle.js +7 -3
- package/mocks/Link.js +4 -1
- package/mocks/hooks/usePageData.js +4 -1
- package/package.json +1 -1
- package/src/DesignTokens/borders.stories.mdx +20 -0
- package/src/DesignTokens/colors.stories.mdx +24 -0
- package/src/DesignTokens/page-layout.stories.mdx +12 -0
- package/src/DesignTokens/tokens-generated.scss +610 -0
- package/src/DesignTokens/typography.stories.mdx +36 -0
- package/src/Navbar/Navbar.stories.tsx +1 -1
- package/src/Navbar/NavbarMenu.tsx +1 -1
- package/src/Navbar/__tests__/Navbar.test.tsx +55 -0
- package/src/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap +256 -0
- package/src/NavbarLogo/NavbarLogo.stories.tsx +1 -1
- package/src/PageNavigation/PageNavigation.stories.tsx +21 -0
- package/src/PageNavigation/__tests__/NextPageLink.test.tsx +29 -0
- package/src/PageNavigation/__tests__/PageNavigation.test.tsx +54 -0
- package/src/PageNavigation/__tests__/PreviousPageLink.test.tsx +29 -0
- package/src/PageNavigation/__tests__/__snapshots__/NextPageLink.test.tsx.snap +67 -0
- package/src/PageNavigation/__tests__/__snapshots__/PageNavigation.test.tsx.snap +275 -0
- package/src/PageNavigation/__tests__/__snapshots__/PreviousPageLink.test.tsx.snap +67 -0
- package/src/Search/ClearIcon.tsx +11 -12
- package/src/Search/SearchIcon.tsx +11 -12
- package/src/Search/__tests__/Input.test.tsx +13 -0
- package/src/Search/__tests__/__snapshots__/Input.test.tsx.snap +36 -0
- package/src/TableOfContent/TableOfContent.stories.tsx +5 -7
- package/src/TableOfContent/TableOfContent.tsx +6 -4
- package/src/TableOfContent/__tests__/TableOfContent.test.tsx +61 -0
- package/src/TableOfContent/__tests__/__snapshots__/TableOfContent.test.tsx.snap +153 -0
- package/src/globalStyle.ts +232 -138
- package/src/mocks/Link.tsx +5 -2
- package/src/mocks/hooks/usePageData.ts +4 -1
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`TableOfContent renders 1`] = `
|
|
4
|
+
.c2 {
|
|
5
|
+
font-size: 0.8em;
|
|
6
|
+
padding: 10px 15px;
|
|
7
|
+
font-weight: bold;
|
|
8
|
+
text-transform: uppercase;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.c3 {
|
|
12
|
+
display: block;
|
|
13
|
+
color: var(--color-content);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
font-size: 0.8em;
|
|
16
|
+
padding: 10px 15px;
|
|
17
|
+
padding-left: 0px;
|
|
18
|
+
-webkit-transition: background-color 0.3s,color 0.3s;
|
|
19
|
+
transition: background-color 0.3s,color 0.3s;
|
|
20
|
+
-webkit-text-decoration: none;
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
word-break: break-word;
|
|
23
|
+
font-family: var(--h-font-family);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.c3:hover,
|
|
27
|
+
.c3.active {
|
|
28
|
+
color: var(--sidebar-item-active-color);
|
|
29
|
+
background-color: var(--sidebar-item-active-background-color);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.c3:empty {
|
|
33
|
+
padding: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.c4 {
|
|
37
|
+
display: block;
|
|
38
|
+
color: var(--color-content);
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
font-size: 0.8em;
|
|
41
|
+
padding: 10px 15px;
|
|
42
|
+
padding-left: 15px;
|
|
43
|
+
-webkit-transition: background-color 0.3s,color 0.3s;
|
|
44
|
+
transition: background-color 0.3s,color 0.3s;
|
|
45
|
+
-webkit-text-decoration: none;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
word-break: break-word;
|
|
48
|
+
font-family: var(--h-font-family);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.c4:hover,
|
|
52
|
+
.c4.active {
|
|
53
|
+
color: var(--sidebar-item-active-color);
|
|
54
|
+
background-color: var(--sidebar-item-active-background-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.c4:empty {
|
|
58
|
+
padding: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.c5 {
|
|
62
|
+
display: block;
|
|
63
|
+
color: var(--color-content);
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
font-size: 0.8em;
|
|
66
|
+
padding: 10px 15px;
|
|
67
|
+
padding-left: -15px;
|
|
68
|
+
-webkit-transition: background-color 0.3s,color 0.3s;
|
|
69
|
+
transition: background-color 0.3s,color 0.3s;
|
|
70
|
+
-webkit-text-decoration: none;
|
|
71
|
+
text-decoration: none;
|
|
72
|
+
word-break: break-word;
|
|
73
|
+
font-family: var(--h-font-family);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.c5:hover,
|
|
77
|
+
.c5.active {
|
|
78
|
+
color: var(--sidebar-item-active-color);
|
|
79
|
+
background-color: var(--sidebar-item-active-background-color);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.c5:empty {
|
|
83
|
+
padding: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.c0 {
|
|
87
|
+
font-size: 1rem;
|
|
88
|
+
background-color: transparent;
|
|
89
|
+
-webkit-flex-shrink: 0;
|
|
90
|
+
-ms-flex-negative: 0;
|
|
91
|
+
flex-shrink: 0;
|
|
92
|
+
display: none !important;
|
|
93
|
+
font-family: var(--font-family-base);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.c1 {
|
|
97
|
+
position: -webkit-sticky;
|
|
98
|
+
position: sticky;
|
|
99
|
+
top: calc(var(--navbar-height) + 20px);
|
|
100
|
+
max-height: calc(100vh - var(--navbar-height) - 20px);
|
|
101
|
+
border-left: 1px solid var(--global-border-color);
|
|
102
|
+
overflow-y: auto;
|
|
103
|
+
width: var(--toc-width);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@media screen and (min-width:85rem) {
|
|
107
|
+
.c0 {
|
|
108
|
+
width: var(--toc-width);
|
|
109
|
+
display: block !important;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
<aside
|
|
114
|
+
class="c0"
|
|
115
|
+
data-component-name="TableOfContent/TableOfContent"
|
|
116
|
+
>
|
|
117
|
+
<div
|
|
118
|
+
class="c1"
|
|
119
|
+
>
|
|
120
|
+
<div
|
|
121
|
+
class="c2"
|
|
122
|
+
>
|
|
123
|
+
On this page
|
|
124
|
+
</div>
|
|
125
|
+
<a
|
|
126
|
+
class="c3"
|
|
127
|
+
data-cy="toc-test 2"
|
|
128
|
+
href="#2"
|
|
129
|
+
>
|
|
130
|
+
test 2
|
|
131
|
+
</a>
|
|
132
|
+
<a
|
|
133
|
+
class="c4"
|
|
134
|
+
data-cy="toc-"
|
|
135
|
+
href="#3"
|
|
136
|
+
/>
|
|
137
|
+
<a
|
|
138
|
+
class="c5"
|
|
139
|
+
data-cy="toc-test 4"
|
|
140
|
+
href="#4"
|
|
141
|
+
>
|
|
142
|
+
test 4
|
|
143
|
+
</a>
|
|
144
|
+
<a
|
|
145
|
+
class="c3"
|
|
146
|
+
data-cy="toc-test 5"
|
|
147
|
+
href="#5"
|
|
148
|
+
>
|
|
149
|
+
test 5
|
|
150
|
+
</a>
|
|
151
|
+
</div>
|
|
152
|
+
</aside>
|
|
153
|
+
`;
|
package/src/globalStyle.ts
CHANGED
|
@@ -1,118 +1,174 @@
|
|
|
1
|
-
import { createGlobalStyle } from 'styled-components';
|
|
1
|
+
import { createGlobalStyle, css } from 'styled-components';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
/*
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
const baseColors = css`
|
|
4
|
+
/* === Palette === */
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @tokens Base Colors
|
|
8
|
+
* @presenter Color
|
|
9
|
+
*/
|
|
10
|
+
--color-primary-100: #62a1ff;
|
|
11
|
+
--color-primary-200: #4892ff;
|
|
12
|
+
--color-primary-300: #2f83ff;
|
|
13
|
+
--color-primary-400: #1573ff;
|
|
14
|
+
--color-primary-500: #0065fb;
|
|
15
|
+
--color-primary-600: #005be2;
|
|
16
|
+
--color-primary-700: #0050c8;
|
|
17
|
+
--color-primary-800: #0046af;
|
|
18
|
+
--color-primary-900: #003c95;
|
|
19
|
+
|
|
20
|
+
--color-secondary-100: #ffffff;
|
|
21
|
+
--color-secondary-200: #f5f7fa;
|
|
22
|
+
--color-secondary-300: #f3f4f6;
|
|
23
|
+
--color-secondary-400: #e4e7eb;
|
|
24
|
+
--color-secondary-500: #d5dae0;
|
|
25
|
+
--color-secondary-600: #c7cdd5;
|
|
26
|
+
--color-secondary-700: #b8c0ca;
|
|
27
|
+
--color-secondary-800: #a9b3c0;
|
|
28
|
+
--color-secondary-900: #9ba6b5;
|
|
29
|
+
|
|
30
|
+
--color-emphasis-100: #ffffff;
|
|
31
|
+
--color-emphasis-200: #e9eaec;
|
|
32
|
+
--color-emphasis-300: #cdd0d5;
|
|
33
|
+
--color-emphasis-400: #b2b6bd;
|
|
34
|
+
--color-emphasis-500: #969ca6;
|
|
35
|
+
--color-emphasis-600: #7a828f;
|
|
36
|
+
--color-emphasis-700: #626974;
|
|
37
|
+
--color-emphasis-800: #4b5058;
|
|
38
|
+
--color-emphasis-900: #1c1e21;
|
|
39
|
+
|
|
40
|
+
--color-accent-100: #b3dcf3;
|
|
41
|
+
--color-accent-200: #a6dfff;
|
|
42
|
+
--color-accent-300: #8cd5ff;
|
|
43
|
+
--color-accent-400: #73ccff;
|
|
44
|
+
--color-accent-500: #59c3ff;
|
|
45
|
+
--color-accent-600: #40baff;
|
|
46
|
+
--color-accent-700: #26b1ff;
|
|
47
|
+
--color-accent-800: #0da7ff;
|
|
48
|
+
--color-accent-900: #009bf2;
|
|
49
|
+
|
|
50
|
+
--color-success-100: #98eda0;
|
|
51
|
+
--color-success-200: #82e98c;
|
|
52
|
+
--color-success-300: #6ce678;
|
|
53
|
+
--color-success-400: #57e264;
|
|
54
|
+
--color-success-500: #41de50;
|
|
55
|
+
--color-success-600: #2bda3c;
|
|
56
|
+
--color-success-700: #23c933;
|
|
57
|
+
--color-success-800: #1fb32d;
|
|
58
|
+
--color-success-900: #1b9e28;
|
|
59
|
+
|
|
60
|
+
--color-warning-100: #ffc966;
|
|
61
|
+
--color-warning-200: #ffc04d;
|
|
62
|
+
--color-warning-300: #ffb733;
|
|
63
|
+
--color-warning-400: #ffae1a;
|
|
64
|
+
--color-warning-500: #ffa500;
|
|
65
|
+
--color-warning-600: #e69400;
|
|
66
|
+
--color-warning-700: #cc8400;
|
|
67
|
+
--color-warning-800: #b37300;
|
|
68
|
+
--color-warning-900: #996300;
|
|
69
|
+
|
|
70
|
+
--color-error-100: #ffc7c7;
|
|
71
|
+
--color-error-200: #ffaeae;
|
|
72
|
+
--color-error-300: #ff9494;
|
|
73
|
+
--color-error-400: #ff7b7b;
|
|
74
|
+
--color-error-500: #ff6161;
|
|
75
|
+
--color-error-600: #ff4747;
|
|
76
|
+
--color-error-700: #ff2e2e;
|
|
77
|
+
--color-error-800: #ff1414;
|
|
78
|
+
--color-error-900: #ff0000;
|
|
79
|
+
|
|
80
|
+
// @tokens Other
|
|
81
|
+
`;
|
|
82
|
+
|
|
83
|
+
const typography = css`
|
|
84
|
+
/* === Typography === */
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* @tokens Typography Colors
|
|
88
|
+
* @presenter Color
|
|
89
|
+
*/
|
|
90
|
+
--color-content: #1f2933;
|
|
91
|
+
--color-content-inverse: var(--color-secondary-200);
|
|
92
|
+
--color-content-secondary: #7b8794;
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* @tokens Font Sizes
|
|
96
|
+
* @presenter FontSize
|
|
97
|
+
*/
|
|
98
|
+
--font-size-base: 14px;
|
|
99
|
+
--font-size-small: 12px;
|
|
100
|
+
|
|
101
|
+
/**
|
|
102
|
+
* @tokens Line Heights
|
|
103
|
+
* @presenter LineHeight
|
|
104
|
+
*/
|
|
105
|
+
--line-height-base: 1.5em;
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* @tokens Font Weights
|
|
109
|
+
* @presenter FontWeight
|
|
110
|
+
*/
|
|
111
|
+
--font-weight-regular: 400;
|
|
112
|
+
--font-weight-bold: 600;
|
|
113
|
+
--font-weight-bolder: 700;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* @tokens Font Families
|
|
117
|
+
* @presenter FontFamily
|
|
118
|
+
*/
|
|
119
|
+
--font-family-base: Source Sans Pro, sans-serif;
|
|
120
|
+
--font-family-monospaced: Source Code Pro, monospace;
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* @tokens Rendering
|
|
7
124
|
*/
|
|
8
|
-
:
|
|
9
|
-
|
|
125
|
+
--smoothing: antialiased; // text-smoothing
|
|
126
|
+
--text-rendering: optimizeSpeed; // text-rendering
|
|
10
127
|
|
|
11
|
-
|
|
12
|
-
|
|
128
|
+
/**
|
|
129
|
+
* @tokens Spacings
|
|
130
|
+
* @presenter Spacing
|
|
131
|
+
*/
|
|
132
|
+
--spacing-unit: 5px;
|
|
133
|
+
--spacing-horizontal: calc(var(--spacing-unit) * 8);
|
|
134
|
+
--spacing-vertical: calc(var(--spacing-unit) * 4);
|
|
135
|
+
|
|
136
|
+
// @tokens Other
|
|
137
|
+
`;
|
|
138
|
+
|
|
139
|
+
const borders = css`
|
|
140
|
+
/**
|
|
141
|
+
* @tokens Borders
|
|
142
|
+
* @presenter Border
|
|
13
143
|
*/
|
|
14
|
-
|
|
15
|
-
--color-primary-200: #4892ff;
|
|
16
|
-
--color-primary-300: #2f83ff;
|
|
17
|
-
--color-primary-400: #1573ff;
|
|
18
|
-
--color-primary-500: #0065fb;
|
|
19
|
-
--color-primary-600: #005be2;
|
|
20
|
-
--color-primary-700: #0050c8;
|
|
21
|
-
--color-primary-800: #0046af;
|
|
22
|
-
--color-primary-900: #003c95;
|
|
23
|
-
|
|
24
|
-
--color-secondary-100: #ffffff;
|
|
25
|
-
--color-secondary-200: #f5f7fa;
|
|
26
|
-
--color-secondary-300: #f3f4f6;
|
|
27
|
-
--color-secondary-400: #e4e7eb;
|
|
28
|
-
--color-secondary-500: #d5dae0;
|
|
29
|
-
--color-secondary-600: #c7cdd5;
|
|
30
|
-
--color-secondary-700: #b8c0ca;
|
|
31
|
-
--color-secondary-800: #a9b3c0;
|
|
32
|
-
--color-secondary-900: #9ba6b5;
|
|
33
|
-
|
|
34
|
-
--color-emphasis-100: #ffffff;
|
|
35
|
-
--color-emphasis-200: #e9eaec;
|
|
36
|
-
--color-emphasis-300: #cdd0d5;
|
|
37
|
-
--color-emphasis-400: #b2b6bd;
|
|
38
|
-
--color-emphasis-500: #969ca6;
|
|
39
|
-
--color-emphasis-600: #7a828f;
|
|
40
|
-
--color-emphasis-700: #626974;
|
|
41
|
-
--color-emphasis-800: #4b5058;
|
|
42
|
-
--color-emphasis-900: #1c1e21;
|
|
43
|
-
|
|
44
|
-
--color-accent-100: #b3dcf3;
|
|
45
|
-
--color-accent-200: #a6dfff;
|
|
46
|
-
--color-accent-300: #8cd5ff;
|
|
47
|
-
--color-accent-400: #73ccff;
|
|
48
|
-
--color-accent-500: #59c3ff;
|
|
49
|
-
--color-accent-600: #40baff;
|
|
50
|
-
--color-accent-700: #26b1ff;
|
|
51
|
-
--color-accent-800: #0da7ff;
|
|
52
|
-
--color-accent-900: #009bf2;
|
|
53
|
-
|
|
54
|
-
--color-success-100: #98eda0;
|
|
55
|
-
--color-success-200: #82e98c;
|
|
56
|
-
--color-success-300: #6ce678;
|
|
57
|
-
--color-success-400: #57e264;
|
|
58
|
-
--color-success-500: #41de50;
|
|
59
|
-
--color-success-600: #2bda3c;
|
|
60
|
-
--color-success-700: #23c933;
|
|
61
|
-
--color-success-800: #1fb32d;
|
|
62
|
-
--color-success-900: #1b9e28;
|
|
63
|
-
|
|
64
|
-
--color-warning-100: #ffc966;
|
|
65
|
-
--color-warning-200: #ffc04d;
|
|
66
|
-
--color-warning-300: #ffb733;
|
|
67
|
-
--color-warning-400: #ffae1a;
|
|
68
|
-
--color-warning-500: #ffa500;
|
|
69
|
-
--color-warning-600: #e69400;
|
|
70
|
-
--color-warning-700: #cc8400;
|
|
71
|
-
--color-warning-800: #b37300;
|
|
72
|
-
--color-warning-900: #996300;
|
|
73
|
-
|
|
74
|
-
--color-error-100: #ffc7c7;
|
|
75
|
-
--color-error-200: #ffaeae;
|
|
76
|
-
--color-error-300: #ff9494;
|
|
77
|
-
--color-error-400: #ff7b7b;
|
|
78
|
-
--color-error-500: #ff6161;
|
|
79
|
-
--color-error-600: #ff4747;
|
|
80
|
-
--color-error-700: #ff2e2e;
|
|
81
|
-
--color-error-800: #ff1414;
|
|
82
|
-
--color-error-900: #ff0000;
|
|
83
|
-
|
|
84
|
-
/* === Typography === */
|
|
85
|
-
|
|
86
|
-
--color-content: #1f2933;
|
|
87
|
-
--color-content-inverse: var(--color-secondary-200);
|
|
88
|
-
--color-content-secondary: #7b8794;
|
|
89
|
-
|
|
90
|
-
--font-size-base: 14px;
|
|
91
|
-
--line-height-base: 1.5em;
|
|
92
|
-
--font-weight-regular: 400;
|
|
93
|
-
--font-weight-bold: 600;
|
|
94
|
-
--font-weight-bolder: 700;
|
|
95
|
-
--font-family-base: Source Sans Pro, sans-serif;
|
|
96
|
-
--font-family-monospaced: Source Code Pro, monospace;
|
|
97
|
-
|
|
98
|
-
--smoothing: antialiased; // text-smoothing
|
|
99
|
-
--text-rendering: optimizeSpeed; // text-rendering
|
|
144
|
+
--global-border-width: 1px;
|
|
100
145
|
|
|
101
|
-
|
|
102
|
-
*
|
|
146
|
+
/**
|
|
147
|
+
* @tokens Border Radius
|
|
148
|
+
* @presenter BorderRadius
|
|
103
149
|
*/
|
|
104
|
-
|
|
105
|
-
--spacing-horizontal: calc(var(--spacing-unit) * 8);
|
|
106
|
-
--spacing-vertical: calc(var(--spacing-unit) * 4);
|
|
150
|
+
--global-border-radius: 4px;
|
|
107
151
|
|
|
108
|
-
|
|
109
|
-
*
|
|
152
|
+
/**
|
|
153
|
+
* @tokens Border Colors
|
|
154
|
+
* @presenter Color
|
|
110
155
|
*/
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
156
|
+
--global-border-color: var(--color-secondary-400);
|
|
157
|
+
--global-border-color-secondary: #616e7c;
|
|
158
|
+
--global-background-color: transparent;
|
|
159
|
+
|
|
160
|
+
// @tokens Other
|
|
161
|
+
`;
|
|
162
|
+
|
|
163
|
+
export const styles = css`
|
|
164
|
+
/*
|
|
165
|
+
* Static classnames that can be used to override styles for components:
|
|
166
|
+
* download-specification-button, next-section-button, button-base
|
|
167
|
+
*/
|
|
168
|
+
:root {
|
|
169
|
+
${baseColors}
|
|
170
|
+
${typography}
|
|
171
|
+
${borders}
|
|
116
172
|
|
|
117
173
|
/* === Page layout === */
|
|
118
174
|
//TBD
|
|
@@ -122,40 +178,48 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
122
178
|
|
|
123
179
|
/* === Menu (sidebar) === */
|
|
124
180
|
|
|
181
|
+
/**
|
|
182
|
+
* @tokens Sidebar
|
|
183
|
+
*/
|
|
125
184
|
--sidebar-width: 285px;
|
|
126
|
-
--sidebar-background-color: #fff;
|
|
127
|
-
--sidebar-right-line-color: var(--global-border-color);
|
|
128
|
-
--sidebar-spacing-unit: 8px;
|
|
129
|
-
--sidebar-spacing-horizontal: var(--sidebar-spacing-unit);
|
|
130
|
-
--sidebar-spacing-vertical: var(--sidebar-spacing-unit);
|
|
185
|
+
--sidebar-background-color: #fff; // @presenter Color
|
|
186
|
+
--sidebar-right-line-color: var(--global-border-color); // @presenter Color
|
|
187
|
+
--sidebar-spacing-unit: 8px; // @presenter Spacing
|
|
188
|
+
--sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing
|
|
189
|
+
--sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing
|
|
131
190
|
|
|
132
|
-
--sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);
|
|
133
|
-
--sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
|
|
134
|
-
--sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
|
|
135
|
-
--sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
|
|
191
|
+
--sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
|
|
192
|
+
--sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
|
|
193
|
+
--sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
|
|
194
|
+
--sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
|
|
136
195
|
|
|
137
196
|
--sidebar-word-break: 'inherit';
|
|
138
|
-
--sidebar-separator-label-color: var(--sidebar-item-color);
|
|
139
|
-
--sidebar-separator-line-color: #dadada;
|
|
140
|
-
--sidebar-chevron-color: var(--sidebar-item-color);
|
|
141
|
-
--sidebar-chevron-size: var(--sidebar-spacing-unit);
|
|
142
|
-
|
|
143
|
-
--sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
|
|
144
|
-
--sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
|
|
145
|
-
--sidebar-item-spacing-offset-nesting: calc(
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
--sidebar-item-
|
|
149
|
-
--sidebar-item-
|
|
150
|
-
--sidebar-item-
|
|
151
|
-
--sidebar-item-
|
|
152
|
-
--sidebar-item-active-
|
|
197
|
+
--sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color
|
|
198
|
+
--sidebar-separator-line-color: #dadada; // @presenter Color
|
|
199
|
+
--sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color
|
|
200
|
+
--sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing
|
|
201
|
+
|
|
202
|
+
--sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
|
|
203
|
+
--sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
|
|
204
|
+
--sidebar-item-spacing-offset-nesting: calc(
|
|
205
|
+
var(--sidebar-spacing-unit) * 2
|
|
206
|
+
); // @presenter Spacing
|
|
207
|
+
--sidebar-item-border-radius: 4px; // @presenter BorderRadius
|
|
208
|
+
--sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
|
|
209
|
+
--sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
|
|
210
|
+
--sidebar-item-color: var(--color-content); // @presenter Color
|
|
211
|
+
--sidebar-item-active-color: var(--color-content); // @presenter Color
|
|
212
|
+
--sidebar-item-background-color: #fff; // @presenter Color
|
|
213
|
+
--sidebar-item-active-background-color: var(--global-border-color); // @presenter Color
|
|
153
214
|
|
|
154
215
|
//TBD
|
|
155
216
|
/* === Footer === */
|
|
156
217
|
//TBD
|
|
157
218
|
/* === Table of contents === */
|
|
158
219
|
//TBD
|
|
220
|
+
|
|
221
|
+
// @tokens Other
|
|
222
|
+
|
|
159
223
|
/* === Various components: buttons, inputs, alerts, tooltip === */
|
|
160
224
|
|
|
161
225
|
/*
|
|
@@ -274,8 +338,9 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
274
338
|
--logo-max-width: 285px;
|
|
275
339
|
--logo-padding: 2px;
|
|
276
340
|
|
|
277
|
-
|
|
278
|
-
*
|
|
341
|
+
/**
|
|
342
|
+
* @tokens HTTP Colors
|
|
343
|
+
* @presenter Color
|
|
279
344
|
*/
|
|
280
345
|
--color-http-get: #3a9601;
|
|
281
346
|
--color-http-post: #0065fb;
|
|
@@ -288,8 +353,9 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
288
353
|
--color-http-head: #a23dad;
|
|
289
354
|
--color-http-hook: var(--color-http-post);
|
|
290
355
|
|
|
291
|
-
|
|
292
|
-
* Response colors
|
|
356
|
+
/**
|
|
357
|
+
* @tokens Response colors
|
|
358
|
+
* @presenter Color
|
|
293
359
|
*/
|
|
294
360
|
--response-success-border-color: #b1e996;
|
|
295
361
|
--response-success-background-color: #f6fff4;
|
|
@@ -307,6 +373,8 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
307
373
|
--response-info-background-color: #87ceeb1a;
|
|
308
374
|
--response-info-text-color: var(--response-info-border-color);
|
|
309
375
|
|
|
376
|
+
// @tokens Other
|
|
377
|
+
|
|
310
378
|
/*
|
|
311
379
|
* Panels
|
|
312
380
|
*/
|
|
@@ -418,9 +486,9 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
418
486
|
--linear-progress-background-color: var(--color-accent-100);
|
|
419
487
|
|
|
420
488
|
/* Floating action button */
|
|
421
|
-
--fab-color: #
|
|
489
|
+
--fab-color: #0065fb;
|
|
422
490
|
--fab-background-color: #f2f2f2;
|
|
423
|
-
|
|
491
|
+
|
|
424
492
|
//* PORTAL settings *//
|
|
425
493
|
/**
|
|
426
494
|
* Headings
|
|
@@ -433,7 +501,7 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
433
501
|
--h2-margin-bottom: 0.8em;
|
|
434
502
|
--h3-margin-top: 1.25em;
|
|
435
503
|
--h3-margin-bottom: 0.8em;
|
|
436
|
-
|
|
504
|
+
|
|
437
505
|
/**
|
|
438
506
|
* Footer
|
|
439
507
|
* */
|
|
@@ -516,6 +584,11 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
516
584
|
--admonition-heading-letter-spacing: 0.3px;
|
|
517
585
|
--admonition-heading-transform: uppercase;
|
|
518
586
|
|
|
587
|
+
/**
|
|
588
|
+
* @tokens Admonition colors
|
|
589
|
+
* @presenter Color
|
|
590
|
+
*/
|
|
591
|
+
|
|
519
592
|
/* info */
|
|
520
593
|
--admonition-info-background-color: #ebedf0;
|
|
521
594
|
--admonition-info-text-color: var(--color-content);
|
|
@@ -540,5 +613,26 @@ export const GlobalStyle = createGlobalStyle`
|
|
|
540
613
|
--admonition-success-background-color: #ddffe1;
|
|
541
614
|
--admonition-success-text-color: var(--color-content);
|
|
542
615
|
--admonition-success-icon-color: #00aa13;
|
|
616
|
+
|
|
617
|
+
/*
|
|
618
|
+
* Portal Search
|
|
619
|
+
*/
|
|
620
|
+
--input-background-color: rgba(255, 255, 255, 0.1);
|
|
621
|
+
--input-text-color: #fff;
|
|
622
|
+
--input-border-radius: 4px;
|
|
623
|
+
--input-font-size: 16px;
|
|
624
|
+
--input-font-family: var(--font-family-primary);
|
|
625
|
+
--input-line-height: 1.15em;
|
|
626
|
+
--popover-backgrond-color: #fff;
|
|
627
|
+
--popover-border-radius: 4px;
|
|
628
|
+
--search-item-text-color: var(--color-content-secondary);
|
|
629
|
+
--search-item-title-text-color: var(--color-content);
|
|
630
|
+
--search-item-active-background-color: rgba(0, 68, 212, 0.1);
|
|
631
|
+
|
|
632
|
+
// @tokens Other
|
|
543
633
|
}
|
|
544
634
|
`;
|
|
635
|
+
|
|
636
|
+
export const GlobalStyle = createGlobalStyle`
|
|
637
|
+
${styles}
|
|
638
|
+
`;
|
package/src/mocks/Link.tsx
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { omit } from 'lodash';
|
|
2
3
|
|
|
3
4
|
// TODO: use real typings here
|
|
4
5
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
5
6
|
export function Link(props: any): JSX.Element {
|
|
6
|
-
|
|
7
|
+
// We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
|
|
8
|
+
const filteredProps = omit(props, ['active']);
|
|
9
|
+
return <a href={filteredProps.to} {...filteredProps} />;
|
|
7
10
|
}
|
|
@@ -4,5 +4,8 @@ export function usePageData(): {
|
|
|
4
4
|
prevPage: ResolvedNavLinkItem | null;
|
|
5
5
|
nextPage: ResolvedNavLinkItem | null;
|
|
6
6
|
} {
|
|
7
|
-
return {
|
|
7
|
+
return {
|
|
8
|
+
prevPage: { label: 'Intro', type: 'link', link: '#prev' },
|
|
9
|
+
nextPage: { label: 'FAQ', type: 'link', link: '#next' },
|
|
10
|
+
};
|
|
8
11
|
}
|