@redocly/theme 0.1.11 → 0.1.12

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 (104) hide show
  1. package/Search/ClearIcon.js +1 -1
  2. package/Search/Input.js +1 -1
  3. package/Search/Popover.js +1 -1
  4. package/Search/SearchIcon.js +1 -1
  5. package/Sidebar/ApiCallItem.js +1 -1
  6. package/globalStyle.js +24 -6
  7. package/mocks/Link.js +1 -1
  8. package/package.json +1 -1
  9. package/src/Search/ClearIcon.tsx +1 -1
  10. package/src/Search/Input.tsx +7 -7
  11. package/src/Search/Popover.tsx +2 -2
  12. package/src/Search/SearchIcon.tsx +1 -1
  13. package/src/Sidebar/ApiCallItem.tsx +1 -2
  14. package/src/globalStyle.ts +624 -461
  15. package/src/mocks/Link.tsx +1 -1
  16. package/src/ui/Typography.tsx +8 -8
  17. package/src/ui/UniversalLink.tsx +3 -8
  18. package/src/utils/isUrl.ts +4 -4
  19. package/ui/Typography.js +8 -8
  20. package/ui/UniversalLink.js +1 -5
  21. package/utils/isUrl.d.ts +2 -2
  22. package/utils/isUrl.js +4 -4
  23. package/src/Button/Button.stories.tsx +0 -74
  24. package/src/Button/__tests__/Button.test.tsx +0 -42
  25. package/src/Button/__tests__/__snapshots__/Button.test.tsx.snap +0 -274
  26. package/src/CodeBlock/__tests__/CodeBlock.test.tsx +0 -12
  27. package/src/CodeBlock/__tests__/__snapshots__/CodeBlock.test.tsx.snap +0 -140
  28. package/src/CopyButton/CopyButton.stories.tsx +0 -18
  29. package/src/CopyButton/__tests__/CopyButton.test.tsx +0 -35
  30. package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx +0 -17
  31. package/src/CopyButton/__tests__/__snapshots__/CopyButton.test.tsx.snap +0 -55
  32. package/src/CopyButton/__tests__/__snapshots__/CopyButtonWrapper.test.tsx.snap +0 -46
  33. package/src/DesignTokens/borders.stories.mdx +0 -20
  34. package/src/DesignTokens/colors.stories.mdx +0 -24
  35. package/src/DesignTokens/page-layout.stories.mdx +0 -12
  36. package/src/DesignTokens/tokens-generated.scss +0 -610
  37. package/src/DesignTokens/typography.stories.mdx +0 -36
  38. package/src/Footer/Footer.stories.tsx +0 -57
  39. package/src/Footer/__tests__/Footer.test.tsx +0 -55
  40. package/src/Footer/__tests__/__snapshots__/Footer.test.tsx.snap +0 -253
  41. package/src/Headings/Headings.stories.tsx +0 -36
  42. package/src/Headings/__tests__/Headings.test.tsx +0 -24
  43. package/src/Headings/__tests__/__snapshots__/Headings.test.tsx.snap +0 -57
  44. package/src/JsonViewer/JsonViewer.stories.tsx +0 -57
  45. package/src/JsonViewer/__tests__/JsonViewer.test.tsx +0 -83
  46. package/src/JsonViewer/__tests__/__snapshots__/JsonViewer.test.tsx.snap +0 -2728
  47. package/src/Layout/__tests__/PageLayout.test.tsx +0 -17
  48. package/src/Layout/__tests__/RootLayout.test.tsx +0 -17
  49. package/src/Layout/__tests__/__snapshots__/PageLayout.test.tsx.snap +0 -38
  50. package/src/Layout/__tests__/__snapshots__/RootLayout.test.tsx.snap +0 -18
  51. package/src/Navbar/Navbar.stories.tsx +0 -32
  52. package/src/Navbar/__tests__/Navbar.test.tsx +0 -55
  53. package/src/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap +0 -256
  54. package/src/NavbarLogo/NavbarLogo.stories.tsx +0 -20
  55. package/src/NavbarLogo/__tests__/NavbarLogo.test.tsx +0 -47
  56. package/src/NavbarLogo/__tests__/__snapshots__/NavbarLogo.test.tsx.snap +0 -38
  57. package/src/OperationBadge/OperationBadge.stories.tsx +0 -35
  58. package/src/OperationBadge/__tests__/OperationBadge.test.tsx +0 -59
  59. package/src/OperationBadge/__tests__/__snapshots__/OperationBadge.test.tsx.snap +0 -651
  60. package/src/PageNavigation/PageNavigation.stories.tsx +0 -21
  61. package/src/PageNavigation/__tests__/NextPageLink.test.tsx +0 -29
  62. package/src/PageNavigation/__tests__/PageNavigation.test.tsx +0 -54
  63. package/src/PageNavigation/__tests__/PreviousPageLink.test.tsx +0 -29
  64. package/src/PageNavigation/__tests__/__snapshots__/NextPageLink.test.tsx.snap +0 -67
  65. package/src/PageNavigation/__tests__/__snapshots__/PageNavigation.test.tsx.snap +0 -275
  66. package/src/PageNavigation/__tests__/__snapshots__/PreviousPageLink.test.tsx.snap +0 -67
  67. package/src/Panel/CodePanel.stories.tsx +0 -26
  68. package/src/Panel/ContentPanel.stories.tsx +0 -26
  69. package/src/Panel/Panel.stories.tsx +0 -56
  70. package/src/Panel/__tests__/CodePanel.test.tsx +0 -26
  71. package/src/Panel/__tests__/ContentPanel.test.tsx +0 -26
  72. package/src/Panel/__tests__/Panel.test.tsx +0 -53
  73. package/src/Panel/__tests__/__snapshots__/CodePanel.test.tsx.snap +0 -258
  74. package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap +0 -278
  75. package/src/Panel/__tests__/__snapshots__/Panel.test.tsx.snap +0 -398
  76. package/src/SamplesPanelControls/SamplesControlButton.stories.tsx +0 -18
  77. package/src/SamplesPanelControls/__tests__/SamplesPanelControls.test.tsx +0 -36
  78. package/src/SamplesPanelControls/__tests__/__snapshots__/SamplesPanelControls.test.tsx.snap +0 -228
  79. package/src/Search/__tests__/Input.test.tsx +0 -13
  80. package/src/Search/__tests__/__snapshots__/Input.test.tsx.snap +0 -36
  81. package/src/SidebarLogo/SidebarLogo.stories.tsx +0 -21
  82. package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx +0 -32
  83. package/src/SidebarLogo/__tests__/__snapshots__/SidebarLogo.test.tsx.snap +0 -62
  84. package/src/SourceCode/SourceCode.stories.tsx +0 -29
  85. package/src/SourceCode/__tests__/SourceCode.test.tsx +0 -48
  86. package/src/SourceCode/__tests__/__snapshots__/SourceCode.test.tsx.snap +0 -786
  87. package/src/TableOfContent/TableOfContent.stories.tsx +0 -37
  88. package/src/TableOfContent/__tests__/TableOfContent.test.tsx +0 -61
  89. package/src/TableOfContent/__tests__/__snapshots__/TableOfContent.test.tsx.snap +0 -153
  90. package/src/Tooltip/Tooltip.stories.tsx +0 -27
  91. package/src/Tooltip/__tests__/Tooltip.test.tsx +0 -41
  92. package/src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap +0 -83
  93. package/src/Welcome.stories.mdx +0 -7
  94. package/src/icons/ShelfIcon/ShelfIcon.stories.tsx +0 -36
  95. package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx +0 -54
  96. package/src/icons/ShelfIcon/__tests__/__snapshots__/ShelfIcon.test.tsx.snap +0 -235
  97. package/src/utils/__tests__/ClipboardService.test.ts +0 -24
  98. package/src/utils/__tests__/__snapshots__/highlight.test.ts.snap +0 -5
  99. package/src/utils/__tests__/__snapshots__/jsonToHtml.test.ts.snap +0 -5
  100. package/src/utils/__tests__/css-variables.test.ts +0 -20
  101. package/src/utils/__tests__/highlight.test.ts +0 -51
  102. package/src/utils/__tests__/jsonToHtml.test.ts +0 -40
  103. package/src/utils/__tests__/media-css.test.ts +0 -20
  104. package/src/utils/__tests__/theme-helpers.test.ts +0 -25
@@ -1,610 +0,0 @@
1
- // WARNING! This file was automatically generated and should not be edited!
2
-
3
- /*
4
- * Static classnames that can be used to override styles for components:
5
- * download-specification-button, next-section-button, button-base
6
- */
7
- :root {
8
-
9
- /* === Palette === */
10
-
11
- /**
12
- * @tokens Base Colors
13
- * @presenter Color
14
- */
15
- --color-primary-100: #62a1ff;
16
- --color-primary-200: #4892ff;
17
- --color-primary-300: #2f83ff;
18
- --color-primary-400: #1573ff;
19
- --color-primary-500: #0065fb;
20
- --color-primary-600: #005be2;
21
- --color-primary-700: #0050c8;
22
- --color-primary-800: #0046af;
23
- --color-primary-900: #003c95;
24
-
25
- --color-secondary-100: #ffffff;
26
- --color-secondary-200: #f5f7fa;
27
- --color-secondary-300: #f3f4f6;
28
- --color-secondary-400: #e4e7eb;
29
- --color-secondary-500: #d5dae0;
30
- --color-secondary-600: #c7cdd5;
31
- --color-secondary-700: #b8c0ca;
32
- --color-secondary-800: #a9b3c0;
33
- --color-secondary-900: #9ba6b5;
34
-
35
- --color-emphasis-100: #ffffff;
36
- --color-emphasis-200: #e9eaec;
37
- --color-emphasis-300: #cdd0d5;
38
- --color-emphasis-400: #b2b6bd;
39
- --color-emphasis-500: #969ca6;
40
- --color-emphasis-600: #7a828f;
41
- --color-emphasis-700: #626974;
42
- --color-emphasis-800: #4b5058;
43
- --color-emphasis-900: #1c1e21;
44
-
45
- --color-accent-100: #b3dcf3;
46
- --color-accent-200: #a6dfff;
47
- --color-accent-300: #8cd5ff;
48
- --color-accent-400: #73ccff;
49
- --color-accent-500: #59c3ff;
50
- --color-accent-600: #40baff;
51
- --color-accent-700: #26b1ff;
52
- --color-accent-800: #0da7ff;
53
- --color-accent-900: #009bf2;
54
-
55
- --color-success-100: #98eda0;
56
- --color-success-200: #82e98c;
57
- --color-success-300: #6ce678;
58
- --color-success-400: #57e264;
59
- --color-success-500: #41de50;
60
- --color-success-600: #2bda3c;
61
- --color-success-700: #23c933;
62
- --color-success-800: #1fb32d;
63
- --color-success-900: #1b9e28;
64
-
65
- --color-warning-100: #ffc966;
66
- --color-warning-200: #ffc04d;
67
- --color-warning-300: #ffb733;
68
- --color-warning-400: #ffae1a;
69
- --color-warning-500: #ffa500;
70
- --color-warning-600: #e69400;
71
- --color-warning-700: #cc8400;
72
- --color-warning-800: #b37300;
73
- --color-warning-900: #996300;
74
-
75
- --color-error-100: #ffc7c7;
76
- --color-error-200: #ffaeae;
77
- --color-error-300: #ff9494;
78
- --color-error-400: #ff7b7b;
79
- --color-error-500: #ff6161;
80
- --color-error-600: #ff4747;
81
- --color-error-700: #ff2e2e;
82
- --color-error-800: #ff1414;
83
- --color-error-900: #ff0000;
84
-
85
- // @tokens Other
86
-
87
-
88
- /* === Typography === */
89
-
90
- /**
91
- * @tokens Typography Colors
92
- * @presenter Color
93
- */
94
- --color-content: #1f2933;
95
- --color-content-inverse: var(--color-secondary-200);
96
- --color-content-secondary: #7b8794;
97
-
98
- /**
99
- * @tokens Font Sizes
100
- * @presenter FontSize
101
- */
102
- --font-size-base: 14px;
103
-
104
- /**
105
- * @tokens Line Heights
106
- * @presenter LineHeight
107
- */
108
- --line-height-base: 1.5em;
109
-
110
- /**
111
- * @tokens Font Weights
112
- * @presenter FontWeight
113
- */
114
- --font-weight-regular: 400;
115
- --font-weight-bold: 600;
116
- --font-weight-bolder: 700;
117
-
118
- /**
119
- * @tokens Font Families
120
- * @presenter FontFamily
121
- */
122
- --font-family-base: Source Sans Pro, sans-serif;
123
- --font-family-monospaced: Source Code Pro, monospace;
124
-
125
- /**
126
- * @tokens Rendering
127
- */
128
- --smoothing: antialiased; // text-smoothing
129
- --text-rendering: optimizeSpeed; // text-rendering
130
-
131
- /**
132
- * @tokens Spacings
133
- * @presenter Spacing
134
- */
135
- --spacing-unit: 5px;
136
- --spacing-horizontal: calc(var(--spacing-unit) * 8);
137
- --spacing-vertical: calc(var(--spacing-unit) * 4);
138
-
139
- // @tokens Other
140
-
141
-
142
- /**
143
- * @tokens Borders
144
- * @presenter Border
145
- */
146
- --global-border-width: 1px;
147
-
148
- /**
149
- * @tokens Border Radius
150
- * @presenter BorderRadius
151
- */
152
- --global-border-radius: 4px;
153
-
154
- /**
155
- * @tokens Border Colors
156
- * @presenter Color
157
- */
158
- --global-border-color: var(--color-secondary-400);
159
- --global-border-color-secondary: #616e7c;
160
- --global-background-color: transparent;
161
-
162
- // @tokens Other
163
-
164
-
165
- /* === Page layout === */
166
- //TBD
167
- /* === Navbar === */
168
- //--navbar-height:
169
- //TBD
170
-
171
- /* === Menu (sidebar) === */
172
-
173
- /**
174
- * @tokens Sidebar
175
- */
176
- --sidebar-width: 285px;
177
- --sidebar-background-color: #fff; // @presenter Color
178
- --sidebar-right-line-color: var(--global-border-color); // @presenter Color
179
- --sidebar-spacing-unit: 8px; // @presenter Spacing
180
- --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing
181
- --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing
182
-
183
- --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
184
- --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
185
- --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
186
- --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
187
-
188
- --sidebar-word-break: 'inherit';
189
- --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color
190
- --sidebar-separator-line-color: #dadada; // @presenter Color
191
- --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color
192
- --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing
193
-
194
- --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
195
- --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
196
- --sidebar-item-spacing-offset-nesting: calc(
197
- var(--sidebar-spacing-unit) * 2
198
- ); // @presenter Spacing
199
- --sidebar-item-border-radius: 4px; // @presenter BorderRadius
200
- --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
201
- --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
202
- --sidebar-item-color: var(--color-content); // @presenter Color
203
- --sidebar-item-active-color: var(--color-content); // @presenter Color
204
- --sidebar-item-background-color: #fff; // @presenter Color
205
- --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color
206
-
207
- //TBD
208
- /* === Footer === */
209
- //TBD
210
- /* === Table of contents === */
211
- //TBD
212
-
213
- // @tokens Other
214
-
215
- /* === Various components: buttons, inputs, alerts, tooltip === */
216
-
217
- /*
218
- * Buttons
219
- */
220
- --button-color: white;
221
- --button-background-color: var(--color-emphasis-500);
222
- --button-hover-background-color: var(--color-emphasis-600);
223
- --button-active-background-color: var(--color-emphasis-700);
224
- --button-outlined-active-border-color: var(--color-emphasis-800);
225
- --button-border-radius: var(--global-border-radius);
226
- --button-font-family: inherit;
227
- --button-font-weight: var(--font-weight-bold);
228
- --button-box-shadow: none;
229
- --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
230
-
231
- .button-color-primary {
232
- --button-color: white;
233
- --button-background-color: var(--color-primary-500);
234
- --button-hover-background-color: var(--color-primary-600);
235
- --button-active-background-color: var(--color-primary-700);
236
- --button-outlined-active-border-color: var(--color-primary-800);
237
- }
238
-
239
- .button-color-secondary {
240
- --button-color: var(--color-emphasis-800);
241
- --button-background-color: var(--color-secondary-400);
242
- --button-hover-background-color: var(--color-secondary-500);
243
- --button-active-background-color: var(--color-secondary-600);
244
- --button-outlined-active-border-color: var(--color-secondary-700);
245
- }
246
-
247
- --button-small-font-size: 12px;
248
- --button-small-padding: 8px 10px;
249
- --button-small-min-width: 90px;
250
- --button-medium-font-size: 14px;
251
- --button-medium-padding: 8px 20px;
252
- --button-medium-min-width: 120px;
253
- --button-large-font-size: 14px;
254
- --button-large-padding: 12px 24px;
255
- --button-large-min-width: 150px;
256
- --button-xlarge-font-size: 16px;
257
- --button-xlarge-padding: 20px 24px;
258
- --button-xlarge-min-width: 200px;
259
-
260
- /*
261
- * Tooltip
262
- */
263
- --tooltip-color: var(--color-secondary-300);
264
- --tooltip-background-color: #52606d;
265
-
266
- .tooltip-copy-button {
267
- --tooltip-color: #000;
268
- --tooltip-background-color: #fff;
269
- }
270
-
271
- /* === Markdown/Page content (tables, inline code, blockquotes) === */
272
-
273
- /*
274
- * Headings
275
- * --h-{css-property-name} is fallback for h1...h6
276
- */
277
- --h-font-family: Source Sans Pro, sans-serif;
278
- --h-font-weight: var(--font-weight-bolder);
279
- --h-color: var(--color-content);
280
-
281
- --h1-font-size: 36px;
282
- --h2-font-size: 28px;
283
- --h3-font-size: 18px;
284
- --h4-font-size: 16px;
285
- --h5-font-size: 14px;
286
- --h6-font-size: 12px;
287
-
288
- --h1-line-height: 36px;
289
- --h2-line-height: 28px;
290
- --h3-line-height: 18px;
291
- --h4-line-height: 16px;
292
- --h5-line-height: 14px;
293
- --h6-line-height: 12px;
294
-
295
- --code-font-size: 13px;
296
- --code-font-family: var(--font-family-monospaced);
297
- --code-font-weight: 400;
298
- --code-wrap: pre;
299
-
300
- --inline-code-font-size: var(--code-font-size);
301
- --inline-code-font-family: var(--code-font-family);
302
- --inline-code-color: #e53935;
303
- --inline-code-background-color: var(--color-secondary-200);
304
- --inline-code-border-color: var(--global-border-color);
305
- --inline-code-border-radius: var(--global-border-radius);
306
-
307
- --code-block-font-size: var(--code-font-size);
308
- --code-block-font-family: var(--code-font-family);
309
- --code-block-color: #f1928f;
310
- --code-block-background-color: rgba(217, 205, 199, 0.05);
311
- --code-block-border-color: var(--global-border-color);
312
- --code-block-border-radius: 8px;
313
- --code-block-max-height: 600px;
314
- --code-block-word-break: initial;
315
- --code-block-preformatted-background-color: #323f4b;
316
-
317
- /*
318
- * Links
319
- */
320
- --link-color: var(--color-primary-500);
321
- --link-decoration: none;
322
- --link-hover-color: var(--color-primary-100);
323
- --link-hover-decoration: underline;
324
-
325
- /* === ref docs and graphql docs specific === */
326
- /*
327
- * Logo
328
- */
329
- --logo-max-height: 285px;
330
- --logo-max-width: 285px;
331
- --logo-padding: 2px;
332
-
333
- /**
334
- * @tokens HTTP Colors
335
- * @presenter Color
336
- */
337
- --color-http-get: #3a9601;
338
- --color-http-post: #0065fb;
339
- --color-http-put: #93527b;
340
- --color-http-options: #947014;
341
- --color-http-patch: #bf581d;
342
- --color-http-delete: #c83637;
343
- --color-http-basic: #707070;
344
- --color-http-link: #07818f;
345
- --color-http-head: #a23dad;
346
- --color-http-hook: var(--color-http-post);
347
-
348
- /**
349
- * @tokens Response colors
350
- * @presenter Color
351
- */
352
- --response-success-border-color: #b1e996;
353
- --response-success-background-color: #f6fff4;
354
- --response-success-text-color: var(--response-success-border-color);
355
-
356
- --response-error-border-color: #ffc9c9;
357
- --response-error-background-color: #fff4f4;
358
- --response-error-text-color: var(--response-error-border-color);
359
-
360
- --response-redirect-border-color: var(--color-warning-500);
361
- --response-redirect-background-color: #ffa5001a;
362
- --response-redirect-text-color: var(--response-redirect-border-color);
363
-
364
- --response-info-border-color: #87ceeb;
365
- --response-info-background-color: #87ceeb1a;
366
- --response-info-text-color: var(--response-info-border-color);
367
-
368
- // @tokens Other
369
-
370
- /*
371
- * Panels
372
- */
373
- --panels-border-radius: 8px;
374
- --panels-background-color: #fff;
375
-
376
- --samples-panel-gap: 20px;
377
- --samples-panel-width: 50%;
378
- --samples-panel-block-background-color: #fff;
379
- --samples-panel-background-color: #52606d;
380
- --samples-panel-callback-background-color: var(--color-secondary-300);
381
- --samples-panel-controls-background-color: #323f4b;
382
- --samples-panel-controls-hover-background-color: #3c4c5a;
383
- --samples-panel-controls-active-border-color: var(--color-accent-500);
384
- --samples-panel-text-color: #fff;
385
- --samples-panel-heading-color: #fff;
386
-
387
- --samples-panel-markdown-background-color: #3c4c5a;
388
- --samples-panel-markdown-border-color: #46596a;
389
-
390
- --try-it-panel-tab-background-color: var(--samples-panel-background-color);
391
- --try-it-panel-active-tab-background-color: #47535e;
392
- --try-it-panel-active-tab-border-color: var(--color-accent-500);
393
- --try-it-panel-disabled-tab-color: rgba(245, 247, 250, 0.7);
394
- --try-it-panel-controls-background-color: var(--samples-panel-controls-background-color);
395
- --try-it-panel-action-button-width: auto;
396
-
397
- --request-and-response-panel-background-color: #fff;
398
-
399
- /*
400
- * Layout
401
- */
402
- --layout-buttons-top-offset: 20px;
403
- --layout-buttons-height: 36px;
404
- --layout-buttons-width: 36px;
405
-
406
- --layout-stacked-small-max-width: 90%;
407
- --layout-stacked-medium-max-width: 75%;
408
- --layout-stacked-large-max-width: 1200px;
409
-
410
- --layout-three-panel-small-max-width: 100%;
411
- --layout-three-panel-medium-max-width: 100%;
412
- --layout-three-panel-large-max-width: 1800px;
413
-
414
- --layout-middle-panel-small-max-width: none;
415
- --layout-middle-panel-medium-max-width: none;
416
- --layout-middle-panel-large-max-width: none;
417
-
418
- /*
419
- * Schema
420
- */
421
- --schema-lines-color: var(--global-border-color);
422
- --schema-default-details-width: 70%;
423
- --schema-type-name-color: var(--color-content-secondary);
424
- --schema-type-title-color: var(--color-content-secondary);
425
- --schema-require-label-color: var(--color-error-900);
426
- --schema-labels-text-size: 0.9em;
427
- --schema-nesting-spacing: 1em;
428
- --schema-nested-background-color: var(--color-secondary-200);
429
- --schema-chevron-color: var(--color-content);
430
- --schema-chevron-size: 9px;
431
-
432
- --schema-controls-color: var(--color-emphasis-800);
433
- --schema-controls-background-color: var(--color-secondary-400);
434
- --schema-controls-hover-background-color: var(--color-secondary-500);
435
- --schema-controls-border-color: var(--color-secondary-600);
436
-
437
- --field-name-font-size: var(--code-font-size);
438
- --field-name-font-family: var(--code-font-family);
439
- --field-example-color: var(--color-content);
440
- --field-example-background-color: var(--inline-code-background-color);
441
- --field-constraint-color: var(--color-content);
442
- --field-constraint-background-color: var(--inline-code-background-color);
443
-
444
- /*
445
- * Search
446
- */
447
- --search-input-border-bottom: #e6e6e6;
448
- --search-results-background-color: #f2f2f2;
449
- --search-results-active-item-background-color: #e6e6e6;
450
- --search-marked-background-color: #ffff03;
451
- --search-popup-header-background-color: var(--color-secondary-200);
452
- --search-clear-button-background-color: var(--color-secondary-400);
453
- --search-clear-button-hover-background-color: var(--color-secondary-600);
454
-
455
- /*
456
- * Other
457
- */
458
- --badge-color: var(--color-emphasis-100);
459
- --badge-background-color: var(--color-primary-500);
460
- --deprecated-badge-color: var(--color-emphasis-100);
461
- --deprecated-badge-background-color: var(--color-warning-500);
462
-
463
- --recursive-label-color: var(--color-warning-500);
464
-
465
- --http-badge-font-size: 12px;
466
- --http-badge-line-height: 20px;
467
- --http-badge-font-family: var(--code-font-family);
468
- --http-badge-font-weight: var(--font-weight-bold);
469
- --http-badge-border-radius: 16px;
470
- --http-badge-color: var(--color-content-inverse);
471
-
472
- --http-badge-menu-font-size: 8px;
473
- --http-badge-menu-line-height: 14px;
474
-
475
- --spinner-color: var(--color-primary-500);
476
-
477
- --linear-progress-color: var(--color-accent-500);
478
- --linear-progress-background-color: var(--color-accent-100);
479
-
480
- /* Floating action button */
481
- --fab-color: #0065fb;
482
- --fab-background-color: #f2f2f2;
483
-
484
- //* PORTAL settings *//
485
- /**
486
- * Headings
487
- * */
488
- --h2-font-weight: var(--font-weight-bold);
489
-
490
- --h1-margin-top: 1.35em;
491
- --h1-margin-bottom: 0.9em;
492
- --h2-margin-top: 1.25em;
493
- --h2-margin-bottom: 0.8em;
494
- --h3-margin-top: 1.25em;
495
- --h3-margin-bottom: 0.8em;
496
-
497
- /**
498
- * Footer
499
- * */
500
- --footer-background-color: var(--color-primary-500);
501
- --footer-text-color: #fff;
502
-
503
- /**
504
- * Sidebar
505
- * */
506
- --sidebar-padding-horizontal: var(--sidebar-spacing-unit);
507
- --sidebar-padding-vertical: var(--sidebar-spacing-unit);
508
-
509
- --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);
510
- --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);
511
-
512
- --sidebar-border-radius: 4px;
513
- --sidebar-font-size: var(--font-size-base);
514
- --sidebar-font-family: var(--font-family-base);
515
-
516
- /**
517
- * Logo
518
- * */
519
- --logo-height: 2rem;
520
- --logo-margin: var(--sidebar-margin-left);
521
-
522
- /**
523
- * Navbar
524
- * */
525
- --navbar-height: 60px;
526
- --navbar-text-color: #fff;
527
- --navbar-background-color: var(--color-primary-500);
528
-
529
- /**
530
- * Navbar Item
531
- * */
532
- --navbar-item-font-size: 16px;
533
- --navbar-item-margin-horizontal: 0;
534
- --navbar-item-margin-vertical: 0;
535
- --navbar-item-border-radius: 10px;
536
- --navbar-item-font-weight: var(--font-weight-bold);
537
- --navbar-item-active-background-color: #1b75fa;
538
- --navbar-item-active-text-color: var(--navbar-text-color);
539
- --navbar-item-active-text-decoration: none;
540
-
541
- /**
542
- * TOC
543
- * */
544
- --toc-width: 240px;
545
-
546
- /**
547
- * Markdown
548
- * */
549
- --content-wrapper-max-width: 910px;
550
- --content-wrapper-padding-vertical: 25px;
551
- --content-wrapper-padding-horizontal: 0px;
552
-
553
- /**
554
- * Bloquote
555
- * */
556
- --bloquote-margin-vertical: 1.5em;
557
- --bloquote-margin-horizontal: 0;
558
- --bloquote-padding-vertical: 0;
559
- --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);
560
- --bloquote-background-color: transparent;
561
-
562
- /**
563
- * Admonition
564
- * */
565
- --admonition-margin-horizontal: 0;
566
- --admonition-margin-vertical: calc(var(--spacing-unit) * 2);
567
- --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);
568
- --admonition-padding-vertical: calc(var(--spacing-unit) * 4);
569
- --admonition-icon-size: 25px;
570
- --admonition-border-radius: 8px;
571
- --admonition-font-size: 16px;
572
- --admonition-font-weight: normal;
573
- --admonition-line-height: 1.5em;
574
- --admonition-heading-font-size: 16px;
575
- --admonition-heading-font-weight: var(--font-weight-bold);
576
- --admonition-heading-letter-spacing: 0.3px;
577
- --admonition-heading-transform: uppercase;
578
-
579
- /**
580
- * @tokens Admonition colors
581
- * @presenter Color
582
- */
583
-
584
- /* info */
585
- --admonition-info-background-color: #ebedf0;
586
- --admonition-info-text-color: var(--color-content);
587
- --admonition-info-icon-color: #4782cb;
588
-
589
- /* attention */
590
- --admonition-attention-background-color: #e6eef8;
591
- --admonition-attention-text-color: var(--color-content);
592
- --admonition-attention-icon-color: #4782cb;
593
-
594
- /* warning */
595
- --admonition-warning-background-color: #feeda5;
596
- --admonition-warning-text-color: var(--color-content);
597
- --admonition-warning-icon-color: #d4ad03;
598
-
599
- /* danger */
600
- --admonition-danger-background-color: #fceaea;
601
- --admonition-danger-text-color: var(--color-content);
602
- --admonition-danger-icon-color: #e53935;
603
-
604
- /* success */
605
- --admonition-success-background-color: #ddffe1;
606
- --admonition-success-text-color: var(--color-content);
607
- --admonition-success-icon-color: #00aa13;
608
-
609
- // @tokens Other
610
- }
@@ -1,36 +0,0 @@
1
- import { Meta, Story, Canvas } from '@storybook/addon-docs';
2
- import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';
3
-
4
- <Meta title="Design Tokens/Typography" />
5
-
6
- # Typography
7
-
8
- <br />
9
-
10
- ## Font Families
11
-
12
- <DesignTokenDocBlock categoryName="Font Families" viewType="card" />
13
-
14
- ## Font Sizes
15
-
16
- <DesignTokenDocBlock categoryName="Font Sizes" />
17
-
18
- ## Font Weights
19
-
20
- <DesignTokenDocBlock categoryName="Font Weights" />
21
-
22
- ## Line Heights
23
-
24
- <DesignTokenDocBlock categoryName="Line Heights" />
25
-
26
- ## Typography Colors
27
-
28
- <DesignTokenDocBlock categoryName="Typography Colors" />
29
-
30
- ## Rendering
31
-
32
- <DesignTokenDocBlock categoryName="Rendering" />
33
-
34
- ## Spacings
35
-
36
- <DesignTokenDocBlock categoryName="Spacings" />
@@ -1,57 +0,0 @@
1
- import React from 'react';
2
- import { ComponentMeta, ComponentStory } from '@storybook/react';
3
-
4
- import { Footer } from '@theme/Footer';
5
-
6
- export default {
7
- title: 'Portal/Footer',
8
- component: Footer,
9
- } as ComponentMeta<typeof Footer>;
10
-
11
- const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />;
12
-
13
- export const WithCopyrightOnly = Template.bind({});
14
- WithCopyrightOnly.args = {
15
- copyrightText: 'Redocly ®',
16
- };
17
-
18
- export const WithColumns = Template.bind({});
19
- WithColumns.args = {
20
- copyrightText: 'Redocly ®',
21
- columns: [
22
- {
23
- group: 'Products',
24
- items: [
25
- { label: 'Portal', active: true, type: 'link', link: 'https://redocly.com/portals/' },
26
- { label: 'Workflows', type: 'link', link: 'https://redocly.com/workflows/' },
27
- { label: 'Redocly CLI', type: 'link', link: 'https://redocly.com/redocly-cli/' },
28
- ],
29
- },
30
- {
31
- group: 'Explore',
32
- items: [
33
- { label: 'Pricing', type: 'link', link: 'https://redocly.com/pricing/' },
34
- { label: 'Enterprise', type: 'link', link: 'https://redocly.com/enterprise/' },
35
- { label: 'Customers', type: 'link', link: 'https://redocly.com/customers/' },
36
- ],
37
- },
38
- {
39
- group: 'Resources',
40
- items: [
41
- { label: 'Docs', type: 'link', link: 'https://redocly.com/docs/' },
42
- { label: 'Blog', type: 'link', link: 'https://redocly.com/blog/' },
43
- { label: 'Webinars', type: 'link', link: 'https://redocly.com/webinars/' },
44
- { label: 'Error link', type: 'error' },
45
- ],
46
- },
47
- {
48
- group: 'Other',
49
- items: [
50
- { label: 'External', type: 'link', link: 'https://google.com/', external: true },
51
- { type: 'separator', separatorLine: true },
52
- { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
53
- { label: 'Error link', type: 'error' },
54
- ],
55
- },
56
- ],
57
- };