@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.2

package/src/globalStyle.ts

@@ -22,6 +22,8 @@ import { userProfile, userProfileDropdown } from '@theme/components/Profile';
 import { dropdown } from '@theme/components/Dropdown';
 import { admonition, markdown } from '@theme/components/Markdown';
 import { tooltip } from '@theme/components/Tooltip';
+import { lastUpdated } from '@theme/components/LastUpdated';
+import { logo } from '@theme/components/NavbarLogo';
 
 const themeColors = css`
 /* === Palette === */
@@ -205,16 +207,17 @@ const themeColors = css`
   --color-warning: var(--color-warning-base);
   --color-success: var(--color-success-base);
   --color-info: var(--color-info-base);
- 
+
   /**
    * @tokens Elevation Colors
    * @presenter Color
    */
 
-  --bg-sunken: #F1F1F1; // Sunken is the lowest elevation available.
   --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
+  --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
   --bg-raised: #fafafa; // Cards, elements, inputs
   --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
 
   --bg-base-shadow: 0px 3px 5px rgba(51, 51, 51, 0.2), 0px 0px 1px rgba(51, 51, 51, 0.31); // Elements
   --bg-raised-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Hovers for base. Menu
@@ -248,7 +251,7 @@ const typography = css`
   --text-description: #8d8d8d; // Caption, Description, Icon
   --text-placeholder: #a8a8a8; // Placeholder text, Disabled text
   --text-link: var(--color-blue-6);
-  
+
   /**
     * @tokens Font Weights
     * @presenter FontWeight
@@ -258,7 +261,7 @@ const typography = css`
   --font-weight-bold: 600; // All strong weights in the entire system.
   --font-weight-bolder: 700;
   --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.
-  
+
   /**
    * @tokens Line Heights
    * @presenter LineHeight
@@ -277,15 +280,10 @@ const typography = css`
     * @presenter FontSize
     */
 
-  --font-size-base: 14px; // Base font size of the entire system.
-  --font-size-sm: 12px;
-  --font-size-lg: 16px;
-  --font-size-xl: 20px;
-  --font-size-heading-1: 38px;
-  --font-size-heading-2: 30px;
-  --font-size-heading-3: 24px;
-  --font-size-heading-4: 20px;
-  --font-size-heading-5: 16px;
+  --font-size-base: 16px; // Base font size of the entire system.
+  --font-size-sm: 14px;
+  --font-size-lg: 18px;
+  --font-size-xl: 22px;
 
   /**
     * @tokens Font Rendering
@@ -299,7 +297,7 @@ const typography = css`
 
 const sizeAndSpace = css`
   /* === Size & Space === */
-  
+
   /**
     * @tokens Size
     * @presenter Spacing
@@ -313,7 +311,7 @@ const sizeAndSpace = css`
     */
 
   --spacing-unit: 4px;
-  
+
   --spacing-base: calc(var(--spacing-unit) * 4);
   --spacing-xxs: var(--spacing-unit);
   --spacing-xs: calc(var(--spacing-unit) * 2);
@@ -325,7 +323,7 @@ const sizeAndSpace = css`
 
   --spacing-horizontal: var(--spacing-xl);
   --spacing-vertical: var(--spacing-base);
-  
+
   /**
     * @tokens Height
     * @presenter Spacing
@@ -430,31 +428,41 @@ const headingsTypography = css`
     * @tokens Heading level 4
     */
 
+  --h4-font-family: var(--heading-font-family); // @presenter FontFamily
   --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h4-font-size: 16px; // @presenter FontSize
-  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-line-height: 16px; // @presenter LineHeight
   --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-text-color: var(--heading-text-color); // @presenter Color
 
   /**
     * @tokens Heading level 5
     */
 
+  --h5-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h5-font-size: 14px; // @presenter FontSize
-  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-line-height: 14px; // @presenter LineHeight
   --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-text-color: var(--heading-text-color); // @presenter Color
 
   /**
     * @tokens Heading level 6
     */
 
+  --h6-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h6-font-size: 12px; // @presenter FontSize
+  --h6-line-height: 12px; // @presenter LineHeight
   --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h6-text-color: var(--heading-text-color); // @presenter Color
 
   // @tokens End
 `;
 
-
 const links = css`
   /**
     * @tokens Links
@@ -506,7 +514,7 @@ const apiReferenceDocs = css`
   --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;
   --schemas-mime-type-dropdown-border: var(--docs-dropdown-border); // @presenter Border
   --schemas-mime-type-dropdown-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
-  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-font-size); // @presenter Color
+  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
 
   /**
     * @tokens API Reference Schemas Discriminator Dropdown
@@ -585,9 +593,9 @@ const apiReferenceDocs = css`
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning);
-  --schema-recursive-background-color: var(--schema-inline-background-color);
-  --schema-recursive-border-color: var(--schema-inline-border-color);
+  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -597,7 +605,7 @@ const apiReferenceDocs = css`
   --schema-non-null-text-color: var(--schema-inline-code-text-color);
   --schema-non-null-background-color: var(--schema-inline-background-color);
   --schema-non-null-border-color: var(--schema-inline-border-color);
-  
+
   /**
     * @tokens API Reference Schema Nested styles
     */
@@ -703,20 +711,6 @@ const badges = css`
   // @tokens End
 `;
 
-const logo = css`
-  /**
-    * @tokens Logo
-    */
-
-  --navbar-logo-height: 2rem; // @presenter Spacing
-  --navbar-logo-width: auto;
-  --navbar-logo-margin: 16px; // @presenter Spacing
-  --navbar-logo-max-width: 285px; // @presenter Spacing
-  --navbar-logo-max-height: 285px; // @presenter Spacing
-
-  // @tokens End
-`;
-
 const loadProgressBar = css`
   /**
     * @tokens Load progress bar
@@ -799,20 +793,13 @@ const docsDropdown = css`
   --docs-dropdown-font-size: var(--font-size-base);
   --docs-dropdown-text-color: var(--text-secondary);
 
-  --docs-dropdown-padding-vertical: 0;
+  --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
   --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
 
-const lastUpdated = css`
-  --last-updated-text-color: var(--text-secondary);
-  --last-updated-font-size: var(--font-size-sm);
-  --last-updated-font-family: var(--font-family-base);
-  --last-updated-line-height: var(--line-height-base);
-`;
-
 const tile = css`
   --wide-tile-background-color: var(--bg-raised);
   --thin-tile-background-color: var(--bg-raised);
@@ -876,18 +863,18 @@ const error = css`
   --error-bubble-gap: var(--spacing-base);
   --error-bubble-font-family: var(--font-family-base);
   --error-bubble-z-index: var(--z-index-popover);
-  
+
   --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
   --error-card-background: var(--bg-raised);
   --error-card-padding: var(--spacing-xs) var(--spacing-base);
   --error-card-text-color: var(--text-primary);
   --error-card-font-size: var(--font-size-base);
   --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-normal);
+  --error-card-font-weight: var(--font-weight-regular);
   --error-card-line-height: var(--line-height-base);
   --error-card-box-shadow: var(--bg-raised-shadow);
   --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
-  
+
   --detailed-error-overlay-background: #4f4f4f;
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
@@ -904,13 +891,13 @@ const error = css`
   --detailed-error-modal-font-family: var(--font-family-base);
   --detailed-error-modal-padding: var(--spacing-md);
   --detailed-error-modal-wapper-text-align: right;
-  
+
   --detailed-error-content-margin-top: var(--spacing-md);
   --detailed-error-content-height: 100%;
-  
+
   --detailed-error-close-button-color: var(--text-description);
   --detailed-error-close-button-text-transform: uppercase;
-  
+
   --detailed-error-message-margin: var(--spacing-base) auto var(--spacing-lg);
   --detailed-error-message-padding: var(--spacing-base);
   --detailed-error-message-border-radius: var(--border-radius);
@@ -926,8 +913,8 @@ const modal = css`
     overflow: hidden;
   }
 
-  --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
-  --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
+  --modal-box-shadow: var(--bg-overlay-shadow);
+  --modal-overlay-background-color: var(--bg-modal-overlay);
   --modal-background-color: var(--bg-base);
 `;
 
@@ -985,7 +972,6 @@ export const styles = css`
     ${versionPicker}
     ${zIndexDepth}
 
-    --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-base);
@@ -995,8 +981,6 @@ export const styles = css`
 
   :root.dark {
     ${darkMode};
-
-    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/src/icons/PlusIcon/PlusIcon.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 export const Icon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M7.53125 2.375H8.46875C8.55208 2.375 8.59375 2.41667 8.59375 2.5V13.5C8.59375 13.5833 8.55208 13.625 8.46875 13.625H7.53125C7.44792 13.625 7.40625 13.5833 7.40625 13.5V2.5C7.40625 2.41667 7.44792 2.375 7.53125 2.375Z"
       fill="inherit"

package/src/ui/ArrowBack.tsx

@@ -25,7 +25,6 @@ const Arrow = ({
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/ui/darkColors.tsx

@@ -190,10 +190,10 @@ export const darkMode = css`
     */
   --text-base: #ffffff; // The base color of the typography color tokens.
   --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
-  --text-primary: #e3e3e3; // Headers, Icon hover
-  --text-secondary: #b3b3b3; // Body text
-  --text-description: #8e8e8e; // Caption, Description, Icon
-  --text-placeholder: #7b7b7b; // Placeholder text, Disabled text
+  --text-primary: #ffffffde; // Headers, Icon hover
+  --text-secondary: #ffffff99; // Body text
+  --text-description: #ffffff61; // Caption, Description, Icon
+  --text-placeholder: #ffffff61; // Placeholder text, Disabled text
   --text-link: var(--color-blue-6);
 
   /**
@@ -205,6 +205,7 @@ export const darkMode = css`
   --bg-base: #141414; // The default elevation is the baseline with respect to all other layers.
   --bg-raised: #1f1f1f; // Cards, elements, inputs
   --bg-overlay: #282828; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #282828c2;
 
   --bg-base-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Elements
   --bg-raised-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Hovers for base. Menu

package/src/utils/index.ts

@@ -9,3 +9,4 @@ export * from './args-typecheck';
 export * from './color';
 export * from './urls';
 export * from './jsUtils';
+export * from './tags-parser';

package/src/utils/tags-parser.ts

@@ -0,0 +1,8 @@
+export const slug = (value: string) => {
+  const matches = value.match(/[a-zA-Z0-9_-]*/g);
+  const result = matches
+    ?.filter((value) => value !== '')
+    .join('-')
+    .toLowerCase();
+  return result ?? value;
+};