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

package/src/components/Tag/styledVariables.ts

@@ -43,7 +43,7 @@ export const tag = css`
   .tag-schema,
   .tag-default {
     --tag-color: var(--text-primary); // @presenter Color
-    --tag-background-color: var(--bg-raised); // @presenter Color
+    --tag-background-color: var(--bg-overlay); // @presenter Color
     --tag-border-color: var(--border-primary); // @presenter Color
   }
 
@@ -51,76 +51,76 @@ export const tag = css`
   .tag-success,
   .tag-approved,
   .tag-get {
-    --tag-color: var(--color-success-base); // @presenter Color
-    --tag-background-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-border); // @presenter Color
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
   .tag-red,
   .tag-error,
   .tag-declined,
   .tag-delete {
-    --tag-color: var(--color-error-base); // @presenter Color
+    --tag-color: var(--color-error-active); // @presenter Color
     --tag-background-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-border); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
   }
 
   .tag-gold,
   .tag-warning,
   .tag-deprecated,
   .tag-put {
-    --tag-color: var(--color-warning-base); // @presenter Color
-    --tag-background-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-border); // @presenter Color
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
   .tag-blue,
   .tag-processing,
   .tag-post {
-    --tag-color: var(--color-info-base); // @presenter Color
-    --tag-background-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
-    --tag-color: var(--color-purple-6); // @presenter Color
-    --tag-background-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-3); // @presenter Color
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
-    --tag-color: var(--color-cyan-6); // @presenter Color
-    --tag-background-color: var(--color-cyan-1); // @presenter Color
-    --tag-border-color: var(--color-cyan-3); // @presenter Color
+    --tag-color: var(--color-cyan-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
-    --tag-color: var(--color-yellow-6); // @presenter Color
-    --tag-background-color: var(--color-yellow-1); // @presenter Color
-    --tag-border-color: var(--color-yellow-3); // @presenter Color
+    --tag-color: var(--color-yellow-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
-    --tag-color: var(--color-geekblue-6); // @presenter Color
-    --tag-background-color: var(--color-geekblue-1); // @presenter Color
-    --tag-border-color: var(--color-geekblue-3); // @presenter Color
+    --tag-color: var(--color-geekblue-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
-    --tag-color: var(--color-magneta-6); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-3); // @presenter Color
+    --tag-color: var(--color-magneta-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 
   .tag-lime {
-    --tag-color: var(--color-lime-6); // @presenter Color
-    --tag-background-color: var(--color-lime-1); // @presenter Color
-    --tag-border-color: var(--color-lime-3); // @presenter Color
+    --tag-color: var(--color-lime-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-lime-7); // @presenter Color
   }
 
   // @tokens End

package/src/components/Tiles/ThinTile.tsx

@@ -10,20 +10,20 @@ import type { TextAlign, TileProps } from '@theme/components/Tiles/types';
 const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  border-radius: var(--border-radius-lg);
   box-sizing: border-box;
-  transition: box-shadow 0.25s ease;
-  padding: 24px;
+  padding: var(--spacing-lg);
   margin-bottom: 20px;
   text-decoration: none;
   width: 100%;
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
   background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {
@@ -57,10 +57,12 @@ const ThinTileIcon = styled.img`
 
 const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'center'};
 `;
 
 const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
+  color: var(--text-secondary);
   font-size: 18px;
   line-height: 1.5;
   flex-shrink: 0;

package/src/components/Tiles/WideTile.tsx

@@ -17,21 +17,21 @@ const WideTileWrapper = styled(Link)<{
 }>`
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-lg);
   background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
-  padding: 24px;
+  padding: var(--spacing-lg);
   padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
+  margin-bottom: var(--spacing-xl);
   box-sizing: border-box;
   position: relative;
   text-decoration: none;
   width: 100%;
-  transition: box-shadow 0.25s ease;
   :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
@@ -51,8 +51,8 @@ const WideTileWrapper = styled(Link)<{
   
   ${({ theme }) => theme.mediaQueries.medium} {
     width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    padding: var(--spacing-xl);
+    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
     flex-direction: row;
     max-width: ${({ maxWidth }) => maxWidth};
   }
@@ -60,9 +60,11 @@ const WideTileWrapper = styled(Link)<{
 
 const WideTileHeader = styled(TileHeader)<{ align?: string }>`
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'left'};
 `;
 const WideTileText = styled(TileText)<{ align?: string }>`
+  color: var(--text-secondary);
   font-size: 18px;
   text-align: ${({ align }) => align || 'left'};
 `;

package/src/components/Typography/SectionHeader.ts

@@ -4,9 +4,9 @@ export const SectionHeader = styled.h2.attrs<{ className?: string }>(({ classNam
   'data-component-name': 'Typography/SectionHeader',
   className,
 }))`
-  color: var(--h2-color);
+  color: var(--h2-text-color);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
+  font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;

package/src/config.ts

@@ -254,6 +254,11 @@ const navItemSchema = {
     label: { type: 'string' },
     separator: { type: 'string' },
     separatorLine: { type: 'boolean' },
+    linePosition: {
+      type: 'string',
+      enum: ['top', 'bottom'],
+      default: 'top',
+    },
     version: { type: 'string' },
     menuStyle: { type: 'string', enum: ['drilldown' as MenuStyle] },
     expanded: { type: 'string', const: 'always' },
@@ -415,7 +420,19 @@ export const themeConfigSchema = {
       },
       additionalProperties: false,
     },
-    sidebar: hideConfigSchema,
+    sidebar: {
+      type: 'object',
+      properties: {
+        separatorLine: { type: 'boolean' },
+        linePosition: {
+          type: 'string',
+          enum: ['top', 'bottom'],
+          default: 'bottom',
+        },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+    },
     scripts: {
       type: 'object',
       properties: {

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;
+};