@redocly/theme 0.1.9 → 0.1.12

package/src/Markdown/StyledMarkdown.tsx

@@ -18,7 +18,7 @@ export const baseTable = css`
   table th,
   table td {
     padding: 12px;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--global-border-color);
   }
 
   table th {
@@ -29,42 +29,42 @@ export const baseTable = css`
 
   table tr th:first-child,
   table tr td:first-child {
-    border-left: 1px solid var(--color-border-light);
+    border-left: 1px solid var(--global-border-color);
   }
 
   table tr td:last-child,
   table tr th:last-child {
-    border-right: 1px solid var(--color-border-light);
+    border-right: 1px solid var(--global-border-color);
   }
 
   table thead td,
   table thead th {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--global-border-color);
   }
 
   /* top-left border */
 
   table thead tr:first-child th:first-child {
-    border-top-left-radius: var(--panel-border-radius);
+    border-top-left-radius: var(--panels-border-radius);
   }
 
   /* top-right border */
 
   table thead tr:first-child th:last-child {
-    border-top-right-radius: var(--panel-border-radius);
-    border-top: 1px solid var(--color-border-light);
+    border-top-right-radius: var(--panels-border-radius);
+    border-top: 1px solid var(--global-border-color);
   }
 
   /* bottom-left border */
 
   table tbody tr:last-child td:first-child {
-    border-bottom-left-radius: var(--panel-border-radius);
+    border-bottom-left-radius: var(--panels-border-radius);
   }
 
   /* bottom-right border */
 
   table tbody tr:last-child td:last-child {
-    border-bottom-right-radius: var(--panel-border-radius);
+    border-bottom-right-radius: var(--panels-border-radius);
   }
 `;
 
@@ -114,21 +114,21 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--color-text-main);
+  color: var(--color-content);
   font-size: var(--font-size-base);
-  font-family: var(--font-family-primary);
-  line-height: var(--line-height-m);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
 
   a:not([role='button']) {
-    text-decoration: var(--links-text-decoration);
-    color: var(--links-color);
+    text-decoration: var(--link-decoration);
+    color: var(--link-color);
 
     &:visited {
-      color: var(--links-color);
+      color: var(--link-color);
     }
 
     &:hover {
-      color: var(--links-color-hover);
+      color: var(--link-color-hover);
     }
   }
 
@@ -142,8 +142,8 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   h4,
   h5,
   h6 {
-    font-weight: var(--font-weight-h);
-    font-family: var(--font-family-h);
+    font-weight: var(--h-font-weight);
+    font-family: var(--h-font-family);
     position: relative;
 
     scroll-margin-top: 60px;
@@ -154,14 +154,14 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   }
 
   hr {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--global-border-color);
   }
 
   details {
     margin: 1.125em 0;
 
     summary {
-      color: var(--color-primary-main);
+      color: var(--color-content);
       font-weight: var(--font-weight-regular);
       outline: 0;
       padding: 0;
@@ -183,17 +183,17 @@ export const StyledMarkdown = styled.main.attrs(() => ({
     .snippets-tabs-headers {
       font-size: 0.9em;
 
-      font-family: var(--font-family-h);
+      font-family: var(--h-font-family);
 
       .tab-header {
         text-align: center;
         padding: 0.2em 0.5em;
         display: inline-block;
         cursor: pointer;
-        color: var(--color-text-dimmed);
+        color: var(--color-content-secondary);
 
         &.active {
-          color: var(--color-primary-main);
+          color: var(--h-color);
           font-weight: var(--font-weight-bold);
         }
       }
@@ -260,11 +260,11 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   }
 
   code {
-    color: var(--code-color);
-    background-color: var(--code-background-color);
+    color: var(--inline-code-color);
+    background-color: var(--inline-code-background-color);
 
     border-radius: 2px;
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--global-border-color);
     padding: 0.1em 0.25em 0.2em;
     font-weight: var(--code-font-weight);
     word-break: break-word;
@@ -275,7 +275,7 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   blockquote {
     margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);
     padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);
-    border-left: 4px solid var(--color-border-light);
+    border-left: 4px solid var(--global-border-color);
     background-color: var(--bloquote-background-color);
 
     ${typography(typographyTokens.blockquote)};

package/src/Markdown/Tabs/index.ts

@@ -1,2 +1,2 @@
-export * from './Tab';
-export * from './Tabs';
+export * from '@theme/Markdown/Tabs/Tab';
+export * from '@theme/Markdown/Tabs/Tabs';

package/src/Markdown/index.ts

@@ -1,9 +1,9 @@
-export * from './CodeSample';
-export * from './Tabs';
-export * from './Admonition';
-export * from './ContentWrapper';
-export * from './Heading';
-export * from './MarkdownLayout';
-export * from './Mermaid';
-export * from './PageWrapper';
-export * from './StyledMarkdown';
+export * from '@theme/Markdown/CodeSample';
+export * from '@theme/Markdown/Tabs';
+export * from '@theme/Markdown/Admonition';
+export * from '@theme/Markdown/ContentWrapper';
+export * from '@theme/Markdown/Heading';
+export * from '@theme/Markdown/MarkdownLayout';
+export * from '@theme/Markdown/Mermaid';
+export * from '@theme/Markdown/PageWrapper';
+export * from '@theme/Markdown/StyledMarkdown';

package/src/Navbar/Navbar.tsx

@@ -5,7 +5,6 @@ interface NavbarProps {
   menu: React.ReactNode;
   logo: React.ReactNode;
   search: React.ReactNode;
-  theme: any;
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
@@ -22,7 +21,7 @@ export const NavbarContainer = styled.nav`
   height: var(--navbar-height);
   box-sizing: border-box;
   display: flex;
-  color: var(--navbar-color-text);
+  color: var(--navbar-text-color);
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
@@ -32,7 +31,7 @@ export const NavbarContainer = styled.nav`
   top: 0;
   z-index: 200;
   padding: 10px var(--sidebar-margin-left);
-  background: var(--navbar-color-background);
+  background: var(--navbar-background-color);
   font-family: var(--h-font-family);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/Navbar/NavbarItem.tsx

@@ -79,7 +79,7 @@ const NavMenuItem = styled.li<{ active?: boolean }>`
 
 const NavLink = styled(Link)`
   color: ${({ active }) =>
-    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)'};
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
 `;

package/src/Navbar/NavbarMenu.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { NavbarItem } from '@theme/Navbar/NavbarItem';
 
 export function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
-  if (!menuItems || !menuItems.length) {
+  if (!menuItems?.length) {
     return null;
   }
 

package/src/Navbar/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/Navbar/Navbar';
+export * from '@theme/Navbar/NavbarItem';
+export * from '@theme/Navbar/NavbarMenu';

package/src/NavbarLogo/NavbarLogo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { LogoConfig } from '@theme/types/portal';
+
+export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };
+
+export function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null {
+  if (!logo.image) {
+    return null;
+  }
+  const img = (
+    <NavLogo src={logo.image} alt={logo.altText} data-component-name="NavbarLogo/NavbarLogo" />
+  );
+  return logo.link ? <Link to={logo.link}>{img}</Link> : img;
+}
+
+const NavLogo = styled.img`
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+`;

package/src/NavbarLogo/index.ts

@@ -0,0 +1 @@
+export * from '@theme/NavbarLogo/NavbarLogo';

package/src/OperationBadge/index.ts

@@ -1 +1 @@
-export * from './OperationBadge';
+export * from '@theme/OperationBadge/OperationBadge';

package/src/PageNavigation/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/PageNavigation/NextPageLink';
+export * from '@theme/PageNavigation/PageNavigation';
+export * from '@theme/PageNavigation/PreviousPageLink';

package/src/Panel/index.ts

@@ -1,8 +1,8 @@
-export * from './CodePanel';
-export * from './ContentPanel';
-export * from './DarkHeader';
-export * from './Panel';
-export * from './PanelBody';
-export * from './PanelComponent';
-export * from './PanelHeader';
-export * from './PanelHeaderTitle';
+export * from '@theme/Panel/CodePanel';
+export * from '@theme/Panel/ContentPanel';
+export * from '@theme/Panel/DarkHeader';
+export * from '@theme/Panel/Panel';
+export * from '@theme/Panel/PanelBody';
+export * from '@theme/Panel/PanelComponent';
+export * from '@theme/Panel/PanelHeader';
+export * from '@theme/Panel/PanelHeaderTitle';

package/src/SamplesPanelControls/index.ts

@@ -1 +1 @@
-export * from './SamplesPanelControls';
+export * from '@theme/SamplesPanelControls/SamplesPanelControls';

package/src/Search/Autocomplete.tsx

@@ -124,5 +124,5 @@ const Overlay = styled.div`
 
 const Message = styled.div`
   padding: 24px;
-  color: var(--color-text-main);
+  color: var(--color-content);
 `;

package/src/Search/ClearIcon.tsx

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/ClearIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 298.7 298.7"
-      {...props}
-    >
-      <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 298.7 298.7"
+    data-component-name="Search/ClearIcon"
+    {...props}
+  >
+    <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
+  </svg>
 );
 
 export const ClearIcon = styled(Icon)`
@@ -22,7 +21,7 @@ export const ClearIcon = styled(Icon)`
   width: 0.5em;
   height: 0.5em;
   right: 1.2em;
-  fill: var(--input-text-color);
+  fill: var(--search-input-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: 0.625em;

package/src/Search/Input.tsx

@@ -4,16 +4,16 @@ export const FormInput = styled.input.attrs(() => ({
   'data-component-name': 'Search/Input',
 }))`
   padding: 1em 2.5em 1em 1em;
-  background-color: var(--input-background-color);
-  border-radius: var(--input-border-radius);
+  background-color: var(--search-input-background-color);
+  border-radius: var(--search-input-border-radius);
   border: none;
   outline: none;
-  color: var(--input-text-color);
-  font-size: var(--input-font-size);
-  font-family: var(--input-font-family);
-  line-height: var(--input-line-height);
+  color: var(--search-input-text-color);
+  font-size: var(--search-input-font-size);
+  font-family: var(--search-input-font-family);
+  line-height: var(--search-input-line-height);
 
   ::placeholder {
-    color: var(--input-text-color);
+    color: var(--search-input-text-color);
   }
 `;

package/src/Search/Parameters.tsx

@@ -38,7 +38,7 @@ export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  border-left: 1px solid var(--color-border-light);
+  border-left: 1px solid var(--global-border-color);
   padding: 0 12px;
   margin-top: 8px;
   margin-bottom: 4px;
@@ -57,6 +57,6 @@ const Place = styled.div`
 
 const MoreText = styled.div`
   font-size: var(--font-size-small);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   padding-top: 4px;
 `;

package/src/Search/Popover.tsx

@@ -14,7 +14,7 @@ export const Popover = styled.div.attrs(() => ({
   overflow-y: auto;
   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
     0 8px 10px -5px rgba(0, 0, 0, 0.4);
-  background: var(--popover-backgrond-color);
+  background: var(--search-popover-backgrond-color);
   list-style: none;
-  border-radius: var(--popover-border-radius);
+  border-radius: var(--search-popover-border-radius);
 `;

package/src/Search/SearchIcon.tsx

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/SearchIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 490 490"
-      {...props}
-    >
-      <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 490 490"
+    data-component-name="Search/SearchIcon"
+    {...props}
+  >
+    <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
+  </svg>
 );
 
 export const SearchIcon = styled(Icon)`
@@ -22,7 +21,7 @@ export const SearchIcon = styled(Icon)`
   width: 1em;
   height: 1em;
   right: 1em;
-  fill: var(--input-text-color);
+  fill: var(--search-input-text-color);
   z-index: -1;
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/Search/SearchItem.tsx

@@ -56,7 +56,7 @@ const SearchLink = styled(Link)`
 `;
 
 const Operation = styled.div`
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-small);
   color: var(--search-item-title-text-color);
   overflow: hidden;
@@ -68,7 +68,7 @@ const Title = styled.div`
   color: var(--search-item-title-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height-m);
+  line-height: var(--line-height-base);
 `;
 
 const Description = styled.div`

package/src/Search/index.ts

@@ -1,9 +1,9 @@
-export * from './Autocomplete';
-export * from './ClearIcon';
-export * from './Input';
-export * from './Parameters';
-export * from './Popover';
-export * from './Search';
-export * from './SearchIcon';
-export * from './SearchItem';
-export * from './utils';
+export * from '@theme/Search/Autocomplete';
+export * from '@theme/Search/ClearIcon';
+export * from '@theme/Search/Input';
+export * from '@theme/Search/Parameters';
+export * from '@theme/Search/Popover';
+export * from '@theme/Search/Search';
+export * from '@theme/Search/SearchIcon';
+export * from '@theme/Search/SearchItem';
+export * from '@theme/Search/utils';

package/src/Search/utils.tsx

@@ -15,5 +15,5 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
 };
 
 const Strong = styled.strong`
-  color: var(--color-primary-main);
+  color: var(--color-content);
 `;

package/src/Sidebar/ApiCallItem.tsx

@@ -12,8 +12,7 @@ export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem">
       <MenuLinkItem item={item}>
         <MenuItemLabel active={item.active}>
-          {/* TODO: not sure item.httpVerb || 'event' is correct */}
-          <Badge type={item.httpVerb || 'event'}>
+          <Badge type={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </Badge>
           {item.label}

package/src/Sidebar/BackButton.tsx

@@ -25,7 +25,7 @@ const Button = styled.button`
   padding: 0;
   border: 0;
   outline: 0;
-  color: var(--color-secondary-contrast);
+  color: var(--color-content);
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -39,6 +39,6 @@ const Button = styled.button`
   }
 
   &:hover {
-    color: var(--sidebar-text-color);
+    color: var(--sidebar-item-color);
   }
 `;

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -9,7 +9,7 @@ export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
       {item.icon ? <Icon src={item.icon} /> : null}
       <div>
         {item.label}
-        {item.sublabel ? <Sublabel>{item.sublabel}</Sublabel> : null}
+        {item.sublabel ? <SubLabel>{item.sublabel}</SubLabel> : null}
       </div>
     </Container>
   );
@@ -18,7 +18,7 @@ export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
 const Container = styled.div`
   display: flex;
   align-items: center;
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
   font-size: var(--sidebar-font-size);
   font-weight: var(--font-weight-bold);
 `;
@@ -32,9 +32,9 @@ const Icon = styled.img`
   overflow: hidden;
 `;
 
-const Sublabel = styled.div`
+const SubLabel = styled.div`
   margin-top: 2px;
   font-size: 0.85rem;
-  color: var(--color-secondary-contrast);
+  color: var(--color-content);
   font-weight: var(--font-weight-regular);
 `;

package/src/Sidebar/Menu.tsx

@@ -6,6 +6,6 @@ export const Menu = styled.ul.attrs(() => ({
   padding: 0;
   margin: 0;
   list-style: none;
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
   position: relative;
 `;

package/src/Sidebar/MenuItemLabel.tsx

@@ -25,14 +25,14 @@ export const MenuItemLabel = styled.li.attrs(() => ({
   ${(props) =>
     props.active
       ? `
-    color: var(--sidebar-text-active-color);
-    background-color: var(--sidebar-text-active-background-color);
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
   `
       : null};
 
   :hover {
-    color: var(--sidebar-text-active-color);
-    background-color: var(--sidebar-text-active-background-color);
+    color: var(--sidebar-item-active-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
 
   :empty {

package/src/Sidebar/MenuLink.tsx

@@ -6,7 +6,7 @@ export const MenuLink = styled(UniversalLink).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',
 }))<UniversalLinkProps>`
   text-decoration: none;
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
 
   &&.external-url:after {
     content: none;

package/src/Sidebar/MobileSidebarButton.tsx

@@ -12,7 +12,7 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
   position: fixed;
   right: 20px;
   z-index: 3;
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;
   border-radius: 50%;
   transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform 0.75s;
@@ -35,7 +35,7 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
     left: 50%;
     width: 25px;
     height: 25px;
-    background-color: var(--color-primary-contrast);
+    background-color: #fff;
     -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
       no-repeat 50% 50%;
     mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")

package/src/Sidebar/Sidebar.tsx

@@ -17,7 +17,7 @@ export const Sidebar = styled.aside.attrs(() => ({
   background: var(--sidebar-background-color);
   font-size: var(--sidebar-font-size);
   font-family: var(--sidebar-font-family);
-  color: var(--sidebar-text-color);
+  color: var(--sidebar-item-color);
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   display: flex;