@redocly/theme 0.9.13 → 0.9.15

package/src/Sidebar/SeparatorItem.tsx

@@ -13,6 +13,10 @@ export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--sidebar-item-separator-background-color);
 
+  *:not(:first-child) > & {
+    margin-top: var(--sidebar-item-separator-offset);
+  }
+
   :hover {
     color: inherit;
     background-color: inherit;

package/src/Sidebar/SeparatorLine.tsx

@@ -5,5 +5,5 @@ export const SeparatorLine = styled.div.attrs(() => ({
 }))`
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-padding-vertical) 0;
+  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
 `;

package/src/config.ts

@@ -1,234 +1,350 @@
-import { z } from 'zod';
+import type { FromSchema } from 'json-schema-to-ts';
+import type { MenuStyle } from './types/portal';
 
-const LogoConfig = z
-  .object({
-    image: z.string().optional(),
-    altText: z.string().optional(),
-    link: z.string().optional(),
-    favicon: z.string().optional(),
-  })
-  .strict();
+const logoConfigSchema = {
+  type: 'object',
+  properties: {
+    image: { type: 'string' },
+    altText: { type: 'string' },
+    link: { type: 'string' },
+    favicon: { type: 'string' },
+  },
+  additionalProperties: false,
+} as const;
 
-const HideConfig = z.object({
-  hide: z.boolean().optional(),
-});
+const hideConfigSchema = {
+  type: 'object',
+  properties: {
+    hide: { type: 'boolean' },
+  },
+  additionalProperties: false,
+} as const;
 
-const ScriptConfig = z
-  .object({
-    src: z.string(),
-    async: z.boolean().optional(),
-    crossorigin: z.string().optional(),
-    defer: z.boolean().optional(),
-    fetchpriority: z.string().optional(),
-    integrity: z.string().optional(),
-    module: z.boolean().optional(),
-    nomodule: z.boolean().optional(),
-    nonce: z.string().optional(),
-    referrerpolicy: z.string().optional(),
-    type: z.string().optional(),
-  })
-  .passthrough();
+const scriptConfigSchema = {
+  type: 'object',
+  properties: {
+    src: { type: 'string' },
+    async: { type: 'boolean' },
+    crossorigin: { type: 'string' },
+    defer: { type: 'boolean' },
+    fetchpriority: { type: 'string' },
+    integrity: { type: 'string' },
+    module: { type: 'boolean' },
+    nomodule: { type: 'boolean' },
+    nonce: { type: 'string' },
+    referrerpolicy: { type: 'string' },
+    type: { type: 'string' },
+  },
+  required: ['src'],
+  additionalProperties: true,
+} as const;
 
-const LinksConfig = z
-  .object({
-    href: z.string(),
+const linksConfigSchema = {
+  type: 'object',
+  properties: {
+    href: { type: 'string' },
+    as: { type: 'string' },
+    crossorigin: { type: 'string' },
+    fetchpriority: { type: 'string' },
+    hreflang: { type: 'string' },
+    imagesizes: { type: 'string' },
+    imagesrcset: { type: 'string' },
+    integrity: { type: 'string' },
+    media: { type: 'string' },
+    prefetch: { type: 'string' },
+    referrerpolicy: { type: 'string' },
+    rel: { type: 'string' },
+    sizes: { type: 'string' },
+    title: { type: 'string' },
+    type: { type: 'string' },
+  },
+  required: ['href'],
+  additionalProperties: true,
+} as const;
 
-    as: z.string().optional(),
-    crossorigin: z.string().optional(),
-    fetchpriority: z.string().optional(),
-    hreflang: z.string().optional(),
-    imagesizes: z.string().optional(),
-    imagesrcset: z.string().optional(),
-    integrity: z.string().optional(),
-    media: z.string().optional(),
-    prefetch: z.string().optional(),
-    referrerpolicy: z.string().optional(),
-    rel: z.string().optional(),
-    sizes: z.string().optional(),
-    title: z.string().optional(),
-    type: z.string().optional(),
-  })
-  .passthrough();
+const markdownConfigSchema = {
+  type: 'object',
+  properties: {
+    frontMatterKeysToResolve: {
+      type: 'array',
+      items: { type: 'string' },
+      default: ['image', 'links'],
+    },
+    lastUpdatedBlock: {
+      type: 'object',
+      properties: {
+        format: {
+          type: 'string',
+          enum: ['timeago', 'iso', 'long', 'short'],
+          default: 'timeago',
+        },
+        locale: { type: 'string', default: 'en-US' },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    toc: {
+      type: 'object',
+      properties: {
+        header: { type: 'string', default: 'On this page' },
+        depth: { type: 'number', default: 3 },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    editPage: {
+      type: 'object',
+      properties: {
+        baseUrl: { type: 'string' },
+        icon: { type: 'string' },
+        text: { type: 'string', default: 'Edit this page' },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+  },
+  additionalProperties: false,
+  default: {},
+} as const;
 
-const MarkdownConfig = z
-  .object({
-    frontMatterKeysToResolve: z.array(z.string()).default(['image', 'links']).optional(),
-    lastUpdatedBlock: z
-      .object({
-        format: z.enum(['timeago', 'iso', 'long', 'short']).default('timeago').optional(),
-        locale: z.string().default('en-US').optional(),
-      })
-      .extend(HideConfig.shape)
-      .default({})
-      .optional(),
-    toc: z
-      .object({
-        header: z.string().default('On this page').optional(),
-        depth: z.number().default(3).optional(),
-      })
-      .extend(HideConfig.shape)
-      .optional()
-      .default({}),
-    editPage: z
-      .object({
-        baseUrl: z.string().optional(),
-        icon: z.string().optional(),
-        text: z.string().optional().default('Edit this page'),
-      })
-      .extend(HideConfig.shape)
-      .default({})
-      .optional(),
-  })
-  .strict()
-  .default({});
+const navItemSchema = {
+  type: 'object',
+  properties: {
+    page: { type: 'string' },
+    directory: { type: 'string' },
+    group: { type: 'string' },
+    label: { type: 'string' },
+    separator: { type: 'string' },
+    separatorLine: { type: 'boolean' },
+    version: { type: 'string' },
+    menuStyle: { type: 'string', enum: ['drilldown' as MenuStyle] },
+    expanded: { type: 'string', const: 'always' },
+    selectFirstItemOnExpand: { type: 'boolean' },
+    flatten: { type: 'boolean' },
+  },
+} as const;
 
-export const ThemeConfig = z
-  .object({
-    imports: z.array(z.string()).default([]).optional(),
+const navItemsSchema = {
+  type: 'array',
+  items: {
+    ...navItemSchema,
+    properties: {
+      ...navItemSchema.properties,
+      items: { type: 'array', items: navItemSchema },
+    },
+  },
+} as const;
 
-    logo: LogoConfig.optional(),
-    navbar: z
-      .object({
-        items: z.array(z.any()).optional(), // todo: think about validation here
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .optional(),
+export const themeConfigSchema = {
+  type: 'object',
+  properties: {
+    imports: {
+      type: 'array',
+      items: { type: 'string' },
+      default: [],
+    },
+    logo: logoConfigSchema,
+    navbar: {
+      type: 'object',
+      properties: {
+        items: navItemsSchema,
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+    },
+    footer: {
+      type: 'object',
+      properties: {
+        items: navItemsSchema,
+        copyrightText: { type: 'string' },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+    },
+    sidebar: hideConfigSchema,
+    scripts: {
+      type: 'object',
+      properties: {
+        head: { type: 'array', items: scriptConfigSchema },
+        body: { type: 'array', items: scriptConfigSchema },
+      },
+      additionalProperties: false,
+    },
+    links: { type: 'array', items: linksConfigSchema },
+    feedback: {
+      type: 'object',
+      properties: {
+        hide: {
+          type: 'boolean',
+          default: false,
+        },
+        type: {
+          type: 'string',
+          enum: ['rating', 'sentiment', 'comment', 'reasons'],
+          default: 'sentiment',
+        },
+        settings: {
+          type: 'object',
+          properties: {
+            label: { type: 'string' },
+            submitText: { type: 'string' },
+            max: { type: 'number' },
+            buttonText: { type: 'string' },
+            multi: { type: 'boolean' },
+            items: { type: 'array', items: { type: 'string' }, minItems: 1 },
+            reasons: {
+              type: 'object',
+              properties: {
+                enable: { type: 'boolean', default: true },
+                multi: { type: 'boolean' },
+                label: { type: 'string' },
+                items: { type: 'array', items: { type: 'string' } },
+              },
+              additionalProperties: false,
+            },
+            comment: {
+              type: 'object',
+              properties: {
+                enable: { type: 'boolean', default: true },
+                label: { type: 'string' },
+                likeLabel: { type: 'string' },
+                dislikeLabel: { type: 'string' },
+              },
+              additionalProperties: false,
+            },
+          },
+          additionalProperties: false,
+          ...hideConfigSchema.properties,
+        },
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    search: {
+      type: 'object',
+      properties: {
+        placement: {
+          type: 'string',
+          default: 'navbar',
+        },
+        shortcuts: {
+          type: 'array',
+          items: { type: 'string' },
+          default: ['/'],
+        },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    colorMode: {
+      type: 'object',
+      properties: {
+        ignoreDetection: { type: 'boolean' },
+        modes: {
+          type: 'array',
+          items: { type: 'string' },
+          default: ['light', 'dark'],
+        },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    navigation: {
+      type: 'object',
+      properties: {
+        nextButton: {
+          type: 'object',
+          properties: {
+            text: { type: 'string', default: 'Next to {label}' },
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: {},
+        },
+        previousButton: {
+          type: 'object',
+          properties: {
+            text: { type: 'string', default: 'Back to {label}' },
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: {},
+        },
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    codeSnippet: {
+      type: 'object',
+      properties: {
+        copy: {
+          type: 'object',
+          properties: {
+            buttonText: { type: 'string', default: 'Copy' },
+            tooltipText: { type: 'string', default: 'Copy to clipboard' },
+            toasterText: { type: 'string', default: 'Copied!' },
+            toasterDuration: { type: 'number', default: 1500 },
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: {},
+        },
+        report: {
+          type: 'object',
+          properties: {
+            tooltipText: { type: 'string', default: 'Report a problem' },
+            label: { type: 'string' },
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: { hide: true },
+        },
+      },
+      additionalProperties: false,
+      default: {},
+    },
+    markdown: markdownConfigSchema,
+    openapi: { type: 'object', additionalProperties: true },
+    graphql: { type: 'object', additionalProperties: true },
+    analytics: {
+      type: ['array', 'boolean', 'number', 'object', 'string'],
+    },
+    userProfile: {
+      type: 'object',
+      properties: {
+        loginLabel: { type: 'string', default: 'Login' },
+        logoutLabel: { type: 'string', default: 'Logout' },
+        menu: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              label: { type: 'string' },
+              external: { type: 'boolean' },
+              link: { type: 'string' },
+              separatorLine: { type: 'boolean' },
+            },
+            additionalProperties: true,
+          },
+          default: [],
+        },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+      default: {},
+    },
+  },
+  additionalProperties: true,
+  default: {},
+} as const;
 
-    footer: z
-      .object({
-        items: z.array(z.any()).optional(), // todo: think about validation here
-        copyrightText: z.string().optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .optional(),
-    sidebar: HideConfig.strict().optional(),
-
-    scripts: z
-      .object({
-        head: z.array(ScriptConfig).optional(),
-        body: z.array(ScriptConfig).optional(),
-      })
-      .optional(),
-    links: z.array(LinksConfig).optional(),
-
-    feedback: z
-      .object({
-        type: z.enum(['rating', 'sentiment', 'comment', 'reasons']).default('sentiment'),
-        settings: z
-          .object({
-            label: z.string().optional(),
-            submitText: z.string().optional(),
-            max: z.number().optional(),
-            buttonText: z.string().optional(),
-            multi: z.boolean().optional(),
-            items: z.array(z.string()).min(1).optional(),
-            reasons: z
-              .object({
-                enable: z.boolean().default(true),
-                multi: z.boolean().optional(),
-                label: z.string().optional(),
-                items: z.array(z.string()),
-              })
-              .optional(),
-            comment: z
-              .object({
-                enable: z.boolean().default(true),
-                label: z.string().optional(),
-                likeLabel: z.string().optional(),
-                dislikeLabel: z.string().optional(),
-              })
-              .optional(),
-          })
-          .optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .default({})
-      .optional(),
-
-    search: z
-      .object({
-        placement: z.string().default('navbar').optional(),
-        shortcuts: z.array(z.string()).default(['/']).optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .default({})
-      .optional(),
-
-    colorMode: z
-      .object({
-        ignoreDetection: z.boolean().optional(),
-        modes: z.array(z.string()).default(['light', 'dark']).optional(),
-      })
-      .extend(HideConfig.shape)
-      .strict()
-      .optional()
-      .default({}),
-    navigation: z
-      .object({
-        nextButton: z
-          .object({ text: z.string().default('Next to {label}') })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        previousButton: z
-          .object({ text: z.string().default('Back to {label}') })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-      })
-      .strict()
-      .optional()
-      .default({}),
-    codeSnippet: z
-      .object({
-        copy: z
-          .object({
-            buttonText: z.string().default('Copy').optional(),
-            tooltipText: z.string().default('Copy to clipboard').optional(),
-            toasterText: z.string().default('Copied!').optional(),
-            toasterDuration: z.number().default(1500).optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({}),
-        report: z
-          .object({
-            tooltipText: z.string().default('Report a problem').optional(),
-            label: z.string().optional(),
-          })
-          .extend(HideConfig.shape)
-          .optional()
-          .default({ hide: true }),
-      })
-      .strict()
-      .default({})
-      .optional(),
-    markdown: MarkdownConfig.optional(),
-    openapi: z.object({}).passthrough().optional(),
-    graphql: z.object({}).passthrough().optional(),
-    analytics: z.any().optional(),
-    userProfile: z
-      .object({
-        loginLabel: z.string().default('Login').optional(),
-        logoutLabel: z.string().default('Logout').optional(),
-        menu: z.array(z.any()).optional(), // should be same as navbar items type
-      })
-      .extend(HideConfig.shape)
-      .optional()
-      .default({}),
-  })
-  .passthrough()
-  .default({});
-
-export type ThemeConfig = z.infer<typeof ThemeConfig>;
-// export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+export type ThemeConfig = FromSchema<typeof themeConfigSchema>;
 export type ThemeUIConfig = ThemeConfig & {
-  navbar?: any; // TODO
-  footer?: any; // TODO
   auth?: {
     // used by portal dev login emulator
     idpsInfo?: {
@@ -243,4 +359,4 @@ export type ThemeUIConfig = ThemeConfig & {
   };
 };
 
-export type MarkdownConfig = z.infer<typeof MarkdownConfig>;
+export type MarkdownConfig = FromSchema<typeof markdownConfigSchema>;

package/src/globalStyle.ts

@@ -510,6 +510,7 @@ const sidebar = css`
   --sidebar-item-separator-text-color: var(--sidebar-item-text-color);
   --sidebar-item-separator-background-color: var(--sidebar-background-color);
   --sidebar-item-separator-line-color: var(--border-color); // but has line color
+  --sidebar-item-separator-offset: calc(var(--sidebar-spacing-unit) * 2);
 
   /**
     * @tokens Sidebar back button
@@ -567,7 +568,7 @@ const admonition = css`
   * @tokens Admonition type info
   */
 
-  --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color
+  --admonition-info-background-color: var(--color-secondary-200); // @presenter Color
   --admonition-info-heading-text-color: var(--text-color); // @presenter Color
   --admonition-info-text-color: var(--text-color); // @presenter Color
   --admonition-info-icon-color: var(--color-accent-900); // @presenter Color
@@ -1967,7 +1968,7 @@ const pages = css`
 const userProfile = css`
 
   /**
-  * @tokens User Profile 
+  * @tokens User Profile
   */
 
    --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
@@ -1975,12 +1976,12 @@ const userProfile = css`
    --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
    --profile-name-text-color: var(--navbar-text-color); // @presenter Color
-   
+
    --profile-name-padding-horizontal: 0; // @presenter Spacing
    --profile-name-padding-vertical: 0; // @presenter Spacing
    --profile-name-margin-horizontal: 0; // @presenter Spacing
 
-   --profile-avatar-width: 40px; 
+   --profile-avatar-width: 40px;
    --profile-avatar-height: 40px;
    --profile-avatar-border-radius: 50%; // @presenter BorderRadius
 
@@ -2008,7 +2009,7 @@ const userProfile = css`
    --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
    --profile-menu-item-text-align: left;
- 
+
    --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
    --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
 
@@ -2022,7 +2023,7 @@ const userProfile = css`
    --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
 
    // @tokens End
- 
+
 `;
 
 const modal = css`

package/src/ui/Dropdown.tsx

@@ -34,10 +34,9 @@ const DropDownHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid #e4e7eb;
+  border: 1px solid var(--border-color);
   font-weight: 600;
   color: var(--text-color);
   background: var(--color-secondary-200);
@@ -65,16 +64,16 @@ const IconWrapper = styled.span`
 `;
 
 const ListItem = styled.div`
-  background-color: #fff;
+  background-color: var(--color-secondary-200);
   padding: 0.4em 10px;
   font-size: 1em;
   color: var(--text-color);
   cursor: pointer;
   &:hover {
-    background-color: rgba(38, 50, 56, 0.12);
+    background-color: var(--color-secondary-300);
   }
   &.active {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--color-secondary-300);
   }
 `;