@redocly/theme 0.4.1 → 0.4.4

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './CopyButton';
+export * from './EditPageButton';
 export * from './JsonViewer';
 export * from './Typography';
 export * from './SidebarLogo';

package/src/mocks/utils.ts

@@ -1,3 +1,9 @@
 export function withPathPrefix(link: string): string {
   return link;
 }
+
+export function timeAgo(lastModified: string | Date): string {
+  // should return format(lastModified) in new-hope
+  const d = new Date(lastModified);
+  return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
+}

package/src/settings.yaml

@@ -23,3 +23,5 @@ colorMode:
   modes:
     - 'light'
     - 'dark'
+lastUpdatedBlock:
+  hide: false

package/src/ui/Tiles/WideTile.tsx

@@ -19,7 +19,7 @@ const WideTileWrapper = styled(Link)<{
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
   border-radius: 10px;
   box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
-  background-color: ${({ bgColor }) => bgColor || '#fff'};
+  background-color: ${({ bgColor }) => bgColor || 'var(--color-secondary-50)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
   padding: 24px;

package/src/ui/darkColors.tsx

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+export const darkMode = css`
+  /**
+     * @tokens Dark Colors
+     * @presenter Color
+     */
+
+  --color-primary-300: #1e5ab1;
+  --color-primary-500: #003c95;
+
+  --color-accent-50: #6c91c0;
+
+  --color-secondary-50: #031e48;
+  --color-secondary-200: #142d62;
+  --color-secondary-300: #3f517c;
+  --color-secondary-500: #222222;
+
+  --color-emphasis-100: #5c5e62;
+  --color-emphasis-800: #f0f0f0;
+
+  --color-success-50: #627565;
+  --color-error-50: #bda3a7;
+  --color-warning-50: #8c8469;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
+`;

package/ui/Tiles/WideTile.js

@@ -57,7 +57,7 @@ var WideTileWrapper = (0, styled_components_1.default)(Link_1.Link)(templateObje
     return (withIcon ? 'column' : 'row');
 }, function (_a) {
     var bgColor = _a.bgColor;
-    return bgColor || '#fff';
+    return bgColor || 'var(--color-secondary-50)';
 }, function (_a) {
     var bgImage = _a.bgImage;
     return (bgImage ? "url(".concat(bgImage, ")") : 'none');

package/ui/darkColors.d.ts

@@ -0,0 +1 @@
+export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;

package/ui/darkColors.js

@@ -0,0 +1,10 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkMode = void 0;
+var styled_components_1 = require("styled-components");
+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"])));
+var templateObject_1;