@redocly/theme 0.4.0 → 0.4.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.
Files changed (29) hide show
  1. package/EditPageButton/EditPageButton.d.ts +7 -0
  2. package/EditPageButton/EditPageButton.js +24 -0
  3. package/EditPageButton/index.d.ts +1 -0
  4. package/EditPageButton/index.js +17 -0
  5. package/LastUpdated/LastUpdated.d.ts +5 -0
  6. package/LastUpdated/LastUpdated.js +35 -0
  7. package/Markdown/MarkdownLayout.d.ts +7 -1
  8. package/Markdown/MarkdownLayout.js +13 -1
  9. package/Panel/PanelComponent.d.ts +2 -1
  10. package/Panel/PanelComponent.js +4 -4
  11. package/globalStyle.d.ts +0 -1
  12. package/globalStyle.js +29 -29
  13. package/index.d.ts +1 -0
  14. package/index.js +1 -0
  15. package/mocks/utils.d.ts +1 -0
  16. package/mocks/utils.js +7 -1
  17. package/package.json +1 -1
  18. package/src/EditPageButton/EditPageButton.tsx +38 -0
  19. package/src/EditPageButton/index.ts +1 -0
  20. package/src/LastUpdated/LastUpdated.tsx +40 -0
  21. package/src/Markdown/MarkdownLayout.tsx +23 -0
  22. package/src/Panel/PanelComponent.tsx +3 -1
  23. package/src/globalStyle.ts +49 -102
  24. package/src/index.ts +1 -0
  25. package/src/mocks/utils.ts +6 -0
  26. package/src/settings.yaml +2 -0
  27. package/src/ui/darkColors.tsx +28 -0
  28. package/ui/darkColors.d.ts +1 -0
  29. package/ui/darkColors.js +10 -0
package/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export * from './Button';
2
2
  export * from './CopyButton';
3
+ export * from './EditPageButton';
3
4
  export * from './JsonViewer';
4
5
  export * from './Typography';
5
6
  export * from './SidebarLogo';
package/index.js CHANGED
@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./Button"), exports);
18
18
  __exportStar(require("./CopyButton"), exports);
19
+ __exportStar(require("./EditPageButton"), exports);
19
20
  __exportStar(require("./JsonViewer"), exports);
20
21
  __exportStar(require("./Typography"), exports);
21
22
  __exportStar(require("./SidebarLogo"), exports);
package/mocks/utils.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export declare function withPathPrefix(link: string): string;
2
+ export declare function timeAgo(lastModified: string | Date): string;
package/mocks/utils.js CHANGED
@@ -1,7 +1,13 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.withPathPrefix = void 0;
3
+ exports.timeAgo = exports.withPathPrefix = void 0;
4
4
  function withPathPrefix(link) {
5
5
  return link;
6
6
  }
7
7
  exports.withPathPrefix = withPathPrefix;
8
+ function timeAgo(lastModified) {
9
+ // should return format(lastModified) in new-hope
10
+ var d = new Date(lastModified);
11
+ return "".concat(d.getDate(), "-").concat(d.getMonth() + 1, "-").concat(d.getFullYear());
12
+ }
13
+ exports.timeAgo = timeAgo;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.4.0",
3
+ "version": "0.4.3",
4
4
  "description": "Shared UI components",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/EditPageButton/EditPageButton.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ import { Link } from '@portal/Link';
5
+
6
+ export interface EditPageButtonProps {
7
+ text: string;
8
+ to: string;
9
+ icon: string;
10
+ }
11
+
12
+ export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
13
+ return (
14
+ <EditButton to={to}>
15
+ <ButtonIcon src={icon} />
16
+ <ButtonText>{text}</ButtonText>
17
+ </EditButton>
18
+ );
19
+ };
20
+
21
+ const EditButton = styled(Link)`
22
+ margin-left: auto;
23
+ display: inline-flex;
24
+ color: var(--color-content);
25
+ font-weight: var(--font-weight-bold);
26
+ font-size: var(--font-size-base);
27
+ font-family: var(--font-family-base);
28
+ text-decoration: none;
29
+ `;
30
+
31
+ const ButtonIcon = styled.img`
32
+ height: 14px;
33
+ padding-right: 3px;
34
+ `;
35
+
36
+ const ButtonText = styled.span`
37
+ line-height: 14px;
38
+ `;
package/src/EditPageButton/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from '@theme/EditPageButton/EditPageButton';
package/src/LastUpdated/LastUpdated.tsx ADDED
@@ -0,0 +1,40 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+
4
+ import { useThemeSettings } from '@portal/hooks';
5
+ import { DEFAULT_THEME_NAME } from '@portal/constants';
6
+ // import { timeAgo } from '@portal/utils';
7
+
8
+ // TODO: use timeago.js instead
9
+ // import { format } from 'timeago.js';
10
+ // Last updated ${format(lastModified)}
11
+ function timeAgo(date: string | Date) {
12
+ const d = new Date(date);
13
+ return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
14
+ }
15
+
16
+ export interface LastUpdatedProps {
17
+ lastModified: string | Date;
18
+ }
19
+
20
+ export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
21
+ const { lastUpdatedBlock } = useThemeSettings(DEFAULT_THEME_NAME);
22
+
23
+ if (lastUpdatedBlock?.hide) {
24
+ return null;
25
+ }
26
+
27
+ return (
28
+ <Wrapper data-component-name="LastUpdated/LastUpdated">
29
+ Last updated {timeAgo(lastModified)}
30
+ </Wrapper>
31
+ );
32
+ }
33
+
34
+ const Wrapper = styled.div`
35
+ color: var(--last-updated-text-color);
36
+ font-size: var(--last-updated-font-size);
37
+ font-family: var(--last-updated-font-family);
38
+ line-height: var(--last-updated-line-height);
39
+ padding-bottom: 30px;
40
+ `;
package/src/Markdown/MarkdownLayout.tsx CHANGED
@@ -1,14 +1,23 @@
1
1
  import React from 'react';
2
+ import styled from 'styled-components';
2
3
 
3
4
  import { PageWrapper } from '@theme/Markdown/PageWrapper';
4
5
  import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
5
6
  import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
7
+ import { EditPageButton } from '@theme/EditPageButton';
8
+ import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
6
9
 
7
10
  type MarkdownLayoutProps = {
8
11
  tableOfContent: React.ReactNode;
9
12
  markdownWrapper: React.ReactNode;
10
13
  showPrevButton?: boolean;
11
14
  showNextButton?: boolean;
15
+ editPage?: {
16
+ to: string;
17
+ text: string;
18
+ icon: string;
19
+ };
20
+ lastModified?: string | Date;
12
21
  };
13
22
 
14
23
  export function MarkdownLayout({
@@ -16,10 +25,18 @@ export function MarkdownLayout({
16
25
  markdownWrapper,
17
26
  showPrevButton,
18
27
  showNextButton,
28
+ editPage,
29
+ lastModified,
19
30
  }: MarkdownLayoutProps): JSX.Element {
20
31
  return (
21
32
  <PageWrapper data-component-name="Markdown/MarkdownLayout">
22
33
  <ContainerWrapper withToc={true}>
34
+ <LayoutTop>
35
+ {lastModified && <LastUpdated lastModified={lastModified} />}
36
+ {editPage && (
37
+ <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
38
+ )}
39
+ </LayoutTop>
23
40
  {markdownWrapper}
24
41
  <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
25
42
  </ContainerWrapper>
@@ -27,3 +44,9 @@ export function MarkdownLayout({
27
44
  </PageWrapper>
28
45
  );
29
46
  }
47
+
48
+ const LayoutTop = styled.div`
49
+ display: flex;
50
+ justify-content: space-between;
51
+ flex-flow: row nowrap;
52
+ `;
package/src/Panel/PanelComponent.tsx CHANGED
@@ -15,6 +15,7 @@ import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
15
15
  export interface PanelComponentProps {
16
16
  expanded?: boolean;
17
17
  className?: string;
18
+ renderChildrenHidden?: boolean;
18
19
  header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
19
20
  onToggle?: (expanded: boolean) => void;
20
21
  description?: React.ReactNode;
@@ -22,6 +23,7 @@ export interface PanelComponentProps {
22
23
 
23
24
  export function PanelComponent({
24
25
  expanded = true,
26
+ renderChildrenHidden = false,
25
27
  header,
26
28
  className,
27
29
  children,
@@ -61,7 +63,7 @@ export function PanelComponent({
61
63
  </PanelHeader>
62
64
  ))}
63
65
 
64
- {isExpanded && (
66
+ {(isExpanded || renderChildrenHidden) && (
65
67
  <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
66
68
  {children}
67
69
  </PanelBody>
package/src/globalStyle.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import { createGlobalStyle, css } from 'styled-components';
2
2
 
3
+ import { darkMode } from './ui/darkColors';
4
+
3
5
  const baseColors = css`
4
6
  /* === Palette === */
5
7
 
6
8
  /**
7
- * @tokens Base Colors
8
- * @presenter Color
9
- */
9
+ * @tokens Base Colors
10
+ * @presenter Color
11
+ */
10
12
 
11
13
  --color-primary-50: #87ceeb;
12
14
  --color-primary-100: #62a1ff;
@@ -85,22 +87,7 @@ const baseColors = css`
85
87
  --color-error-800: #ff1414;
86
88
  --color-error-900: #ff0000;
87
89
 
88
- // @tokens End
89
- `;
90
- const baseDarkColors = css`
91
- /**
92
- * @tokens Base Dark Colors
93
- * @presenter Color
94
- */
95
- --color-primary-100: #969ca6;
96
- --color-primary-200: #7f8693;
97
- --color-primary-300: #7d7d80;
98
- --color-primary-400: #4b4f56;
99
- --color-primary-500: #404042;
100
- --color-primary-600: #36383d;
101
- --color-primary-700: #28282a;
102
- --color-primary-800: #202021;
103
- --color-primary-900: #000000;
90
+ --colors-translucent: rgb(226 230 236 / 37%);
104
91
 
105
92
  // @tokens End
106
93
  `;
@@ -295,8 +282,8 @@ const common = css`
295
282
  */
296
283
  --border-color: var(--color-secondary-300);
297
284
  --border-color-secondary: var(--color-emphasis-600);
298
- --background-color: transparent;
299
-
285
+ --background-color: var(--color-secondary-50);
286
+ --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);
300
287
  /**
301
288
  * @tokens Spacings
302
289
  * @presenter Spacing
@@ -425,7 +412,7 @@ const sidebar = css`
425
412
  * @tokens Sidebar colors
426
413
  * @presenter Color
427
414
  */
428
- --sidebar-background-color: #fff;
415
+ --sidebar-background-color: var(--background-color);
429
416
  --sidebar-border-color: var(--border-color);
430
417
 
431
418
  /**
@@ -648,8 +635,7 @@ const admonition = css`
648
635
  --admonition-success-border-color: inherit; // @presenter Color
649
636
  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
650
637
  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
651
- --admonition-success-border: var(--admonition-success-border-width)
652
- var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
638
+ --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
653
639
  /* --admonition-success-icon: figure this out latter */
654
640
 
655
641
  // @tokens End
@@ -780,7 +766,7 @@ const apiReferencePanels = css`
780
766
  --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily
781
767
  --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize
782
768
  --panel-schemas-font-weight: var(--panel-font-weight); // @presenter
783
- --panel-schemas-background-color: var(--color-emphasis-50); // @presenter Color
769
+ --panel-schemas-background-color: var(--background-color); // @presenter Color
784
770
  --panel-schemas-border: var(--panel-border); // @presenter Border
785
771
  --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color
786
772
 
@@ -792,9 +778,8 @@ const apiReferencePanels = css`
792
778
  --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
793
779
  --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize
794
780
  --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
795
- --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding)
796
- var(--panel-body-padding);
797
- --panel-schemas-body-background-color: var(--color-emphasis-50); // @presenter Color
781
+ --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);
782
+ --panel-schemas-body-background-color: var(--background-color); // @presenter Color
798
783
  --panel-schemas-body-border: unset; // @presenter Border
799
784
 
800
785
  /**
@@ -807,7 +792,7 @@ const apiReferencePanels = css`
807
792
  --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight
808
793
  --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight
809
794
  --panel-schemas-heading-padding: var(--panel-heading-padding);
810
- --panel-schemas-heading-background-color: var(--color-emphasis-50); // @presenter Color
795
+ --panel-schemas-heading-background-color: var(--background-color); // @presenter Color
811
796
  --panel-schemas-heading-border: unset; // @presenter Border
812
797
 
813
798
  /**
@@ -841,9 +826,7 @@ const apiReferencePanels = css`
841
826
  --panel-heading-font-weight-local: var(--panel-schemas-heading-font-weight);
842
827
  --panel-heading-line-height-local: var(--panel-schemas-heading-line-height);
843
828
  --panel-heading-padding-local: var(--panel-schemas-heading-padding);
844
- --panel-heading-background-color: var(
845
- --panel-schemas-heading-background-color
846
- ); // @presenter Color
829
+ --panel-heading-background-color: var(--panel-schemas-heading-background-color); // @presenter Color
847
830
  --panel-heading-border: var(--panel-schemas-heading-border); // @presenter Border
848
831
  --panel-heading-white-space-local: var(--panel-heading-whit-space);
849
832
  }
@@ -852,7 +835,7 @@ const apiReferencePanels = css`
852
835
  * @tokens Panel samples common
853
836
  */
854
837
 
855
- --panel-samples-block-background-color: var(--color-emphasis-50); // @presenter Color
838
+ --panel-samples-block-background-color: var(--background-color); // @presenter Color
856
839
  --panel-samples-width: 50%;
857
840
 
858
841
  --panel-samples-text-color: var(--text-color-inverse); // @presenter Color
@@ -914,9 +897,7 @@ const apiReferencePanels = css`
914
897
  --panel-body-border-local: var(--panel-samples-body-border);
915
898
 
916
899
  --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
917
- --panel-heading-background-color: var(
918
- --panel-samples-heading-background-color
919
- ); // @presenter Color
900
+ --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
920
901
 
921
902
  --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
922
903
  --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
@@ -963,9 +944,7 @@ const apiReferencePanels = css`
963
944
  --panel-heading-background-color: var(--panel-response-success-heading-background-color);
964
945
  --panel-heading-text-color: var(--panel-response-success-heading-text-color);
965
946
 
966
- --panel-response-schema-nested-background-color: var(
967
- --panel-response-success-schema-nested-background-color
968
- );
947
+ --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);
969
948
  }
970
949
 
971
950
  /**
@@ -982,9 +961,7 @@ const apiReferencePanels = css`
982
961
  --panel-heading-background-color: var(--panel-response-info-heading-background-color);
983
962
  --panel-heading-text-color: var(--panel-response-info-heading-text-color);
984
963
 
985
- --panel-response-schema-nested-background-color: var(
986
- --panel-response-info-schema-nested-background-color
987
- );
964
+ --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);
988
965
  }
989
966
 
990
967
  /**
@@ -1001,9 +978,7 @@ const apiReferencePanels = css`
1001
978
  --panel-heading-background-color: var(--panel-response-error-heading-background-color);
1002
979
  --panel-heading-text-color: var(--panel-response-error-heading-text-color);
1003
980
 
1004
- --panel-response-schema-nested-background-color: var(
1005
- --panel-response-error-schema-nested-background-color
1006
- );
981
+ --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);
1007
982
  }
1008
983
 
1009
984
  /**
@@ -1019,9 +994,7 @@ const apiReferencePanels = css`
1019
994
  --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
1020
995
  --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
1021
996
 
1022
- --panel-response-schema-nested-background-color: var(
1023
- --panel-response-redirect-schema-nested-background-color
1024
- );
997
+ --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);
1025
998
  }
1026
999
 
1027
1000
  /**
@@ -1038,9 +1011,7 @@ const apiReferencePanels = css`
1038
1011
  --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
1039
1012
  --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
1040
1013
 
1041
- --panel-response-schema-nested-background-color: var(
1042
- --panel-response-callback-schema-nested-background-color
1043
- );
1014
+ --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);
1044
1015
  }
1045
1016
 
1046
1017
  /**
@@ -1088,19 +1059,13 @@ const apiReferencePanels = css`
1088
1059
 
1089
1060
  --panel-samples-tabs-background-color: transparent; // @presenter Color
1090
1061
  --panel-samples-tabs-hover-background-color: #3c4c5a; // @presenter Color
1091
- --panel-samples-tabs-active-background-color: var(
1092
- --panel-samples-heading-background-color
1093
- ); // @presenter Color
1062
+ --panel-samples-tabs-active-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1094
1063
 
1095
1064
  --panel-samples-tabs-border-color: var(--border-color-secondary); // @presenter Color
1096
- --panel-samples-tabs-hover-border-color: var(
1097
- var(--panel-samples-heading-background-color)
1098
- ); // @presenter Color
1065
+ --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color
1099
1066
  --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color
1100
1067
 
1101
- --panel-samples-code-block-background-color: var(
1102
- --code-block-background-color
1103
- ); // @presenter Color
1068
+ --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color
1104
1069
 
1105
1070
  /**
1106
1071
  * @tokens Panel try-it tabs
@@ -1112,19 +1077,13 @@ const apiReferencePanels = css`
1112
1077
  --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
1113
1078
  --panel-try-it-tabs-disabled-text-color: var(--color-secondary-400); // @presenter Color
1114
1079
 
1115
- --panel-try-it-tabs-background-color: var(
1116
- --panel-samples-heading-background-color
1117
- ); // @presenter Color
1118
- --panel-try-it-tabs-hover-background-color: var(
1119
- --panel-samples-tabs-hover-background-color
1120
- ); // @presenter Color
1080
+ --panel-try-it-tabs-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1081
+ --panel-try-it-tabs-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
1121
1082
  --panel-try-it-tabs-active-background-color: #47535e; // @presenter Color
1122
1083
  --panel-try-it-tabs-disabled-background-color: var(--color-secondary-500); // @presenter Color
1123
1084
 
1124
1085
  --panel-try-it-tabs-border-color: transparent; // @presenter Color
1125
- --panel-try-it-tabs-hover-border-color: var(
1126
- --panel-try-it-tabs-active-background-color
1127
- ); // @presenter Color
1086
+ --panel-try-it-tabs-hover-border-color: var(--panel-try-it-tabs-active-background-color); // @presenter Color
1128
1087
  --panel-try-it-tabs-active-border-color: var(--color-accent-500); // @presenter Color
1129
1088
  --panel-try-it-tabs-disabled-border-color: transparent; // @presenter Color
1130
1089
 
@@ -1141,14 +1100,10 @@ const apiReferencePanels = css`
1141
1100
  --panel-try-it-action-button-border-color: transparent; // @presenter Color
1142
1101
 
1143
1102
  --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
1144
- --panel-try-it-action-button-active-background-color: var(
1145
- --color-emphasis-700
1146
- ); // @presenter Color
1103
+ --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
1147
1104
  --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
1148
1105
 
1149
- --panel-try-it-action-button-hover-background-color: var(
1150
- --color-emphasis-600
1151
- ); // @presenter Color
1106
+ --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
1152
1107
  --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
1153
1108
  --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
1154
1109
 
@@ -1156,37 +1111,25 @@ const apiReferencePanels = css`
1156
1111
  * @tokens Panel samples other styles
1157
1112
  */
1158
1113
 
1159
- --panel-samples-controls-background-color: var(
1160
- --panel-samples-heading-background-color
1161
- ); // @presenter Color
1162
- --panel-samples-controls-hover-background-color: var(
1163
- --panel-samples-tabs-hover-background-color
1164
- ); // @presenter Color
1114
+ --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1115
+ --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
1165
1116
  --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
1166
1117
 
1167
- --panel-samples-dropdown-background-color: var(
1168
- --panel-samples-heading-background-color
1169
- ); // @presenter Color
1118
+ --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1170
1119
  --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color
1171
1120
  --panel-samples-dropdown-border: unset; // @presenter Border
1172
1121
 
1173
- --panel-samples-input-background-color: var(
1174
- --panel-samples-heading-background-color
1175
- ); // @presenter Color
1122
+ --panel-samples-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1176
1123
 
1177
1124
  /**
1178
1125
  * @tokens Panel try-it other styles
1179
1126
  */
1180
1127
 
1181
- --panel-try-it-input-background-color: var(
1182
- --panel-samples-heading-background-color
1183
- ); // @presenter Color
1128
+ --panel-try-it-input-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1184
1129
  --panel-try-it-input-text-color: var(--text-color-inverse); // @presenter Color
1185
1130
  --panel-try-it-input-border: unset; // @presenter Border
1186
1131
 
1187
- --panel-try-it-dropdown-background-color: var(
1188
- --panel-samples-heading-background-color
1189
- ); // @presenter Color
1132
+ --panel-try-it-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
1190
1133
  --panel-try-it-dropdown-color: var(--text-color-inverse); // @presenter Color
1191
1134
  --panel-try-it-border: unset; // @presenter Border
1192
1135
 
@@ -1215,7 +1158,7 @@ const tooltip = css`
1215
1158
  */
1216
1159
 
1217
1160
  --copy-button-tooltip-text-color: #000;
1218
- --copy-button-tooltip-background-color: var(--color-secondary-50);
1161
+ --copy-button-tooltip-background-color: var(--background-color);
1219
1162
 
1220
1163
  .tooltip-copy-button {
1221
1164
  --tooltip-text-color: var(--copy-button-tooltip-text-color);
@@ -1241,7 +1184,7 @@ const code = css`
1241
1184
  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
1242
1185
  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
1243
1186
  --inline-code-text-color: #e53935; // @presenter Color
1244
- --inline-code-background-color: var(--color-secondary-100); // @presenter Color
1187
+ --inline-code-background-color: var(--colors-translucent); // @presenter Color
1245
1188
  --inline-code-border-color: var(--border-color); // @presenter Color
1246
1189
  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
1247
1190
 
@@ -1390,7 +1333,7 @@ const apiReferenceDocs = css`
1390
1333
  --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily
1391
1334
  --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize
1392
1335
  --schema-inline-code-text-color: var(--text-color); // @presenter Color
1393
- --schema-inline-background-color: var(--color-secondary-100); // @presenter Color
1336
+ --schema-inline-background-color: var(--colors-translucent); // @presenter Color
1394
1337
  --schema-inline-border-color: var(--border-color); // @presenter Color
1395
1338
  --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
1396
1339
 
@@ -1452,7 +1395,7 @@ const apiReferenceDocs = css`
1452
1395
  */
1453
1396
 
1454
1397
  --schema-nested-offset: 1em; // @presenter Spacing
1455
- --schema-nested-background-color: var(--color-secondary-100); // @presenter Color
1398
+ --schema-nested-background-color: var(--colors-translucent); // @presenter Color
1456
1399
 
1457
1400
  /**
1458
1401
  * @tokens API Reference Schema Buttons
@@ -1509,7 +1452,7 @@ const apiReferenceDocs = css`
1509
1452
  --linear-progress-background-color: var(--color-accent-100); // @presenter Color
1510
1453
 
1511
1454
  --fab-icon-color: var(--color-primary-500); // @presenter Color
1512
- --fab-background-color: var(--color-emphasis-50); // @presenter Color
1455
+ --fab-background-color: var(--background-color); // @presenter Color
1513
1456
  --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow
1514
1457
 
1515
1458
  --fab-hover-background: var(--color-emphasis-200); // @presenter Color
@@ -1829,7 +1772,7 @@ const search = css`
1829
1772
  --search-input-hover-border: none; // @presenter Color
1830
1773
  --search-input-placeholder-color: var(--search-input-text-color);
1831
1774
 
1832
- --search-popover-background-color: #fff; // @presenter Color
1775
+ --search-popover-background-color: var(--background-color); // @presenter Color
1833
1776
  --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
1834
1777
  --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1835
1778
  0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow
@@ -1864,7 +1807,7 @@ const search = css`
1864
1807
  * @presenter Color
1865
1808
  */
1866
1809
 
1867
- --search-modal-background: #fff;
1810
+ --search-modal-background: var(--background-color);
1868
1811
  --search-modal-text-color: var(--text-color);
1869
1812
  --search-modal-border: none;
1870
1813
  --search-modal-box-shadow: none;
@@ -1890,8 +1833,11 @@ const dropdown = css`
1890
1833
  --dropdown-border: none;
1891
1834
  `;
1892
1835
 
1893
- export const darkMode = css`
1894
- ${baseDarkColors}
1836
+ const lastUpdated = css`
1837
+ --last-updated-text-color: var(--text-color);
1838
+ --last-updated-font-size: var(--font-size-small);
1839
+ --last-updated-font-family: var(--font-family-base);
1840
+ --last-updated-line-height: var(--line-height-base);
1895
1841
  `;
1896
1842
 
1897
1843
  export const styles = css`
@@ -1919,6 +1865,7 @@ export const styles = css`
1919
1865
  ${dropdown}
1920
1866
  ${apiReferencePanels}
1921
1867
  ${apiReferenceDocs}
1868
+ ${lastUpdated}
1922
1869
  }
1923
1870
 
1924
1871
  :root.dark {
package/src/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export * from './Button';
2
2
  export * from './CopyButton';
3
+ export * from './EditPageButton';
3
4
  export * from './JsonViewer';
4
5
  export * from './Typography';
5
6
  export * from './SidebarLogo';
package/src/mocks/utils.ts CHANGED
@@ -1,3 +1,9 @@
1
1
  export function withPathPrefix(link: string): string {
2
2
  return link;
3
3
  }
4
+
5
+ export function timeAgo(lastModified: string | Date): string {
6
+ // should return format(lastModified) in new-hope
7
+ const d = new Date(lastModified);
8
+ return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
9
+ }
package/src/settings.yaml CHANGED
@@ -23,3 +23,5 @@ colorMode:
23
23
  modes:
24
24
  - 'light'
25
25
  - 'dark'
26
+ lastUpdatedBlock:
27
+ hide: false
package/src/ui/darkColors.tsx ADDED
@@ -0,0 +1,28 @@
1
+ import { css } from 'styled-components';
2
+
3
+ export const darkMode = css`
4
+ /**
5
+ * @tokens Dark Colors
6
+ * @presenter Color
7
+ */
8
+
9
+ --color-primary-300: #1e5ab1;
10
+ --color-primary-500: #003c95;
11
+
12
+ --color-accent-50: #6c91c0;
13
+
14
+ --color-secondary-50: #031e48;
15
+ --color-secondary-200: #142d62;
16
+ --color-secondary-300: #3f517c;
17
+ --color-secondary-500: #222222;
18
+
19
+ --color-emphasis-100: #5c5e62;
20
+ --color-emphasis-800: #f0f0f0;
21
+
22
+ --color-success-50: #627565;
23
+ --color-error-50: #bda3a7;
24
+ --color-warning-50: #8c8469;
25
+
26
+ background-color: var(--background-color);
27
+ color: var(--text-color);
28
+ `;
package/ui/darkColors.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;
package/ui/darkColors.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.darkMode = void 0;
8
+ var styled_components_1 = require("styled-components");
9
+ exports.darkMode = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n /**\n * @tokens Dark Colors\n * @presenter Color\n */\n\n --color-primary-300: #1e5ab1;\n --color-primary-500: #003c95;\n\n --color-accent-50: #6c91c0;\n\n --color-secondary-50: #031e48;\n --color-secondary-200: #142d62;\n --color-secondary-300: #3f517c;\n --color-secondary-500: #222222;\n\n --color-emphasis-100: #5c5e62;\n --color-emphasis-800: #f0f0f0;\n\n --color-success-50: #627565;\n --color-error-50: #bda3a7;\n --color-warning-50: #8c8469;\n\n background-color: var(--background-color);\n color: var(--text-color);\n"], ["\n /**\n * @tokens Dark Colors\n * @presenter Color\n */\n\n --color-primary-300: #1e5ab1;\n --color-primary-500: #003c95;\n\n --color-accent-50: #6c91c0;\n\n --color-secondary-50: #031e48;\n --color-secondary-200: #142d62;\n --color-secondary-300: #3f517c;\n --color-secondary-500: #222222;\n\n --color-emphasis-100: #5c5e62;\n --color-emphasis-800: #f0f0f0;\n\n --color-success-50: #627565;\n --color-error-50: #bda3a7;\n --color-warning-50: #8c8469;\n\n background-color: var(--background-color);\n color: var(--text-color);\n"])));
10
+ var templateObject_1;